From 9229227cff7dde1ea4793710987f1c6aa0f131a2 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Fri, 20 Mar 2026 22:00:56 +0530 Subject: [PATCH 1/6] chore: fix conflicts --- apps/sim/app/_styles/globals.css | 7 + .../emcn/components/avatar/avatar.tsx | 6 +- .../emcn/components/badge/badge.tsx | 4 +- .../emcn/components/breadcrumb/breadcrumb.tsx | 2 +- .../components/button-group/button-group.tsx | 4 +- .../emcn/components/button/button.tsx | 24 +-- .../emcn/components/checkbox/checkbox.tsx | 3 +- .../components/emcn/components/code/code.css | 175 +++++++++--------- .../components/emcn/components/code/code.tsx | 2 +- .../emcn/components/combobox/combobox.tsx | 22 ++- .../components/date-picker/date-picker.tsx | 14 +- .../dropdown-menu/dropdown-menu.tsx | 6 +- .../emcn/components/input-otp/input-otp.tsx | 2 +- .../emcn/components/input/input.tsx | 2 +- .../emcn/components/modal/modal.tsx | 19 +- .../emcn/components/s-modal/s-modal.tsx | 17 +- .../emcn/components/skeleton/skeleton.tsx | 5 +- .../emcn/components/slider/slider.tsx | 2 +- .../emcn/components/switch/switch.tsx | 2 +- .../emcn/components/tag-input/tag-input.tsx | 8 +- .../emcn/components/textarea/textarea.tsx | 2 +- .../components/time-picker/time-picker.tsx | 8 +- .../emcn/components/toast/toast.tsx | 10 +- .../emcn/components/tooltip/tooltip.tsx | 2 +- .../emcn/icons/animate/copy.module.css | 7 + .../emcn/icons/animate/download.module.css | 6 + .../emcn/icons/animate/layout.module.css | 9 + .../emcn/icons/animate/loader.module.css | 6 + .../emcn/icons/animate/pills-ring.module.css | 6 + apps/sim/components/emcn/icons/arrow-down.tsx | 1 + apps/sim/components/emcn/icons/arrow-left.tsx | 1 + .../sim/components/emcn/icons/arrow-right.tsx | 1 + .../components/emcn/icons/arrow-up-down.tsx | 1 + apps/sim/components/emcn/icons/arrow-up.tsx | 1 + apps/sim/components/emcn/icons/asterisk.tsx | 1 + apps/sim/components/emcn/icons/bell.tsx | 1 + apps/sim/components/emcn/icons/blimp.tsx | 1 + apps/sim/components/emcn/icons/book-open.tsx | 1 + .../emcn/icons/bubble-chat-close.tsx | 1 + .../emcn/icons/bubble-chat-preview.tsx | 1 + apps/sim/components/emcn/icons/bug.tsx | 1 + apps/sim/components/emcn/icons/calendar.tsx | 1 + apps/sim/components/emcn/icons/card.tsx | 1 + apps/sim/components/emcn/icons/check.tsx | 1 + .../components/emcn/icons/chevron-down.tsx | 1 + .../components/emcn/icons/clipboard-list.tsx | 1 + apps/sim/components/emcn/icons/columns2.tsx | 1 + apps/sim/components/emcn/icons/columns3.tsx | 1 + .../sim/components/emcn/icons/connections.tsx | 1 + apps/sim/components/emcn/icons/copy.tsx | 6 +- apps/sim/components/emcn/icons/cursor.tsx | 1 + apps/sim/components/emcn/icons/database-x.tsx | 1 + apps/sim/components/emcn/icons/database.tsx | 1 + .../emcn/icons/document-attachment.tsx | 1 + apps/sim/components/emcn/icons/download.tsx | 6 +- apps/sim/components/emcn/icons/duplicate.tsx | 1 + apps/sim/components/emcn/icons/expand.tsx | 1 + apps/sim/components/emcn/icons/eye.tsx | 1 + apps/sim/components/emcn/icons/file-x.tsx | 1 + apps/sim/components/emcn/icons/file.tsx | 1 + .../sim/components/emcn/icons/fingerprint.tsx | 1 + .../sim/components/emcn/icons/folder-code.tsx | 1 + .../sim/components/emcn/icons/folder-plus.tsx | 1 + apps/sim/components/emcn/icons/hammer.tsx | 1 + apps/sim/components/emcn/icons/hand.tsx | 1 + .../sim/components/emcn/icons/help-circle.tsx | 1 + apps/sim/components/emcn/icons/hex-simple.tsx | 1 + apps/sim/components/emcn/icons/home.tsx | 1 + .../sim/components/emcn/icons/integration.tsx | 1 + apps/sim/components/emcn/icons/key-square.tsx | 1 + apps/sim/components/emcn/icons/key.tsx | 1 + apps/sim/components/emcn/icons/layout.tsx | 10 +- apps/sim/components/emcn/icons/library.tsx | 1 + .../sim/components/emcn/icons/list-filter.tsx | 1 + apps/sim/components/emcn/icons/loader.tsx | 6 +- apps/sim/components/emcn/icons/lock.tsx | 1 + apps/sim/components/emcn/icons/log-in.tsx | 1 + apps/sim/components/emcn/icons/log-out.tsx | 1 + apps/sim/components/emcn/icons/mail.tsx | 1 + .../components/emcn/icons/more-horizontal.tsx | 1 + apps/sim/components/emcn/icons/no-wrap.tsx | 1 + apps/sim/components/emcn/icons/palette.tsx | 1 + apps/sim/components/emcn/icons/panel-left.tsx | 1 + apps/sim/components/emcn/icons/pause.tsx | 1 + apps/sim/components/emcn/icons/pencil.tsx | 1 + apps/sim/components/emcn/icons/pills-ring.tsx | 6 +- apps/sim/components/emcn/icons/play.tsx | 2 + apps/sim/components/emcn/icons/plus.tsx | 1 + apps/sim/components/emcn/icons/redo.tsx | 1 + apps/sim/components/emcn/icons/rocket.tsx | 1 + apps/sim/components/emcn/icons/rows3.tsx | 1 + apps/sim/components/emcn/icons/search.tsx | 1 + apps/sim/components/emcn/icons/send.tsx | 1 + apps/sim/components/emcn/icons/server.tsx | 1 + apps/sim/components/emcn/icons/settings.tsx | 1 + .../components/emcn/icons/shield-check.tsx | 1 + apps/sim/components/emcn/icons/sim.tsx | 1 + .../emcn/icons/square-arrow-up-right.tsx | 1 + apps/sim/components/emcn/icons/table-x.tsx | 1 + apps/sim/components/emcn/icons/table.tsx | 1 + apps/sim/components/emcn/icons/tag.tsx | 1 + .../components/emcn/icons/terminal-window.tsx | 1 + .../components/emcn/icons/trash-outline.tsx | 1 + apps/sim/components/emcn/icons/trash.tsx | 1 + apps/sim/components/emcn/icons/trash2.tsx | 1 + .../components/emcn/icons/type-boolean.tsx | 1 + apps/sim/components/emcn/icons/type-json.tsx | 1 + .../sim/components/emcn/icons/type-number.tsx | 1 + apps/sim/components/emcn/icons/type-text.tsx | 1 + apps/sim/components/emcn/icons/undo.tsx | 1 + apps/sim/components/emcn/icons/unlock.tsx | 1 + apps/sim/components/emcn/icons/upload.tsx | 1 + apps/sim/components/emcn/icons/user-plus.tsx | 1 + apps/sim/components/emcn/icons/user.tsx | 1 + apps/sim/components/emcn/icons/users.tsx | 1 + apps/sim/components/emcn/icons/workflow-x.tsx | 1 + apps/sim/components/emcn/icons/wrap.tsx | 1 + apps/sim/components/emcn/icons/wrench.tsx | 1 + apps/sim/components/emcn/icons/x.tsx | 1 + apps/sim/components/emcn/icons/zoom-in.tsx | 1 + apps/sim/components/emcn/icons/zoom-out.tsx | 1 + 121 files changed, 331 insertions(+), 173 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 6512d7212f1..054dcd2ee20 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -15,6 +15,13 @@ --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */ --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */ --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */ + + /* z-index scale for layered UI */ + --z-dropdown: 100; + --z-popover: 200; + --z-modal: 300; + --z-tooltip: 400; + --z-toast: 500; } .workspace-root { diff --git a/apps/sim/components/emcn/components/avatar/avatar.tsx b/apps/sim/components/emcn/components/avatar/avatar.tsx index 9500f7ecbeb..6c88e12428f 100644 --- a/apps/sim/components/emcn/components/avatar/avatar.tsx +++ b/apps/sim/components/emcn/components/avatar/avatar.tsx @@ -31,10 +31,10 @@ const avatarStatusVariants = cva( { variants: { status: { - online: 'bg-[#16a34a]', + online: 'bg-[var(--brand-tertiary)]', offline: 'bg-[var(--text-muted)]', - busy: 'bg-[#dc2626]', - away: 'bg-[#f59e0b]', + busy: 'bg-[var(--c-DC2626)]', + away: 'bg-[var(--c-F59E0B)]', }, size: { xs: 'h-1.5 w-1.5 border', diff --git a/apps/sim/components/emcn/components/badge/badge.tsx b/apps/sim/components/emcn/components/badge/badge.tsx index 837bb85fe4e..c0e5ae174fe 100644 --- a/apps/sim/components/emcn/components/badge/badge.tsx +++ b/apps/sim/components/emcn/components/badge/badge.tsx @@ -13,9 +13,9 @@ const badgeVariants = cva( variants: { variant: { default: - 'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover:text-[var(--text-primary)] hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]', + 'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]', outline: - 'gap-[4px] rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-5)] dark:hover:bg-transparent dark:hover:border-[var(--surface-6)]', + 'gap-[4px] rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]', type: 'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]', green: `${STATUS_BASE} bg-[#bbf7d0] text-[#15803d] dark:bg-[rgba(34,197,94,0.2)] dark:text-[#86efac]`, red: `${STATUS_BASE} bg-[#fecaca] text-[var(--text-error)] dark:bg-[#551a1a] dark:text-[var(--text-error)]`, diff --git a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx index ae2167f2915..0b8e67b5c61 100644 --- a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx +++ b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx @@ -32,7 +32,7 @@ function Breadcrumb({ items, className, ...props }: BreadcrumbProps) { {item.href && !isLast ? ( {item.label} diff --git a/apps/sim/components/emcn/components/button-group/button-group.tsx b/apps/sim/components/emcn/components/button-group/button-group.tsx index a9c6f22474f..68a8c3fca8e 100644 --- a/apps/sim/components/emcn/components/button-group/button-group.tsx +++ b/apps/sim/components/emcn/components/button-group/button-group.tsx @@ -104,9 +104,9 @@ const buttonGroupItemVariants = cva( { variants: { active: { - true: 'bg-[#1D1D1D] text-[var(--text-inverse)] border-[#1D1D1D] hover:bg-[#2A2A2A] hover:border-[#2A2A2A] dark:bg-white dark:border-white dark:hover:bg-[#E0E0E0] dark:hover:border-[#E0E0E0]', + true: 'bg-[var(--c-1D1D1D)] text-[var(--text-inverse)] border-[var(--c-1D1D1D)] hover-hover:bg-[var(--c-2A2A2A)] hover-hover:border-[var(--c-2A2A2A)] dark:bg-white dark:border-white dark:hover-hover:bg-[var(--c-E0E0E0)] dark:hover-hover:border-[var(--c-E0E0E0)]', false: - 'bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-6)] hover:border-[var(--border-1)]', + 'bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-6)] hover-hover:border-[var(--border-1)]', }, position: { only: 'rounded-[5px]', diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx index 02de7fe269e..62824afae21 100644 --- a/apps/sim/components/emcn/components/button/button.tsx +++ b/apps/sim/components/emcn/components/button/button.tsx @@ -3,29 +3,31 @@ import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/core/utils/cn' const buttonVariants = cva( - 'inline-flex items-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]', + 'inline-flex items-center justify-center font-medium transition-colors active:scale-[0.97] disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]', { variants: { variant: { default: - 'bg-[var(--surface-4)] hover:bg-[var(--surface-6)] border border-[var(--border)] hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]', + 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] bg-[var(--surface-4)] hover-hover:bg-[var(--surface-6)] border border-[var(--border)] hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]', active: - 'bg-[var(--surface-5)] hover:bg-[var(--surface-7)] text-[var(--text-primary)] border border-[var(--border-1)] dark:hover:bg-[var(--border-1)]', - '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover:shadow-[0_4px_0_0_var(--border-1)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)]', + 'bg-[var(--surface-5)] hover-hover:bg-[var(--surface-7)] text-[var(--text-primary)] border border-[var(--border-1)] dark:hover-hover:bg-[var(--border-1)]', + '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover-hover:shadow-[0_4px_0_0_var(--border-1)] transition-[transform,box-shadow,color] hover-hover:-translate-y-0.5 hover-hover:text-[var(--text-primary)]', outline: - 'border border-[var(--text-muted)] bg-transparent hover:border-[var(--text-secondary)]', + 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] border border-[var(--text-muted)] bg-transparent hover-hover:border-[var(--text-secondary)]', primary: - 'bg-[#1D1D1D] text-[var(--text-inverse)] hover:text-[var(--text-inverse)] hover:bg-[#2A2A2A] dark:bg-white dark:hover:bg-[#E0E0E0]', - destructive: 'bg-[var(--text-error)] text-white hover:text-white hover:brightness-106', + 'bg-[var(--c-1D1D1D)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--c-2A2A2A)] dark:bg-white dark:hover-hover:bg-[var(--c-E0E0E0)]', + destructive: + 'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106', secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]', tertiary: - '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!text-[var(--text-inverse)] hover:!bg-[#2DAC72] dark:!bg-[var(--brand-tertiary-2)] dark:hover:!bg-[#2DAC72] dark:!text-[var(--text-inverse)] dark:hover:!text-[var(--text-inverse)]', - ghost: '', - subtle: 'text-[var(--text-body)] hover:text-[var(--text-body)] hover:bg-[var(--surface-4)]', + 'bg-[var(--brand-tertiary-2)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[#2DAC72] dark:bg-[var(--brand-tertiary-2)] dark:hover-hover:bg-[#2DAC72] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]', + ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]', + subtle: + 'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]', 'ghost-secondary': 'text-[var(--text-muted)]', /** Branded button - requires branded-button-gradient or branded-button-custom class for colors */ branded: - 'rounded-[10px] border text-white hover:text-white text-[15px] transition-all duration-200', + 'rounded-[10px] border text-white hover-hover:text-white text-[15px] transition-[transform,background-color,color,border-color] duration-200', }, size: { sm: 'px-[6px] py-[4px] text-[11px]', diff --git a/apps/sim/components/emcn/components/checkbox/checkbox.tsx b/apps/sim/components/emcn/components/checkbox/checkbox.tsx index 1a3c0d6fa92..9f7563e7545 100644 --- a/apps/sim/components/emcn/components/checkbox/checkbox.tsx +++ b/apps/sim/components/emcn/components/checkbox/checkbox.tsx @@ -24,8 +24,9 @@ import { cn } from '@/lib/core/utils/cn' */ const checkboxVariants = cva( [ - 'peer flex shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors', + 'relative peer flex shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors', 'border-[var(--border-1)] bg-transparent', + 'before:absolute before:inset-[-12px] before:content-[""]', 'focus-visible:outline-none', 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50', 'data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)]', diff --git a/apps/sim/components/emcn/components/code/code.css b/apps/sim/components/emcn/components/code/code.css index be90a337a40..e4ae11111c4 100644 --- a/apps/sim/components/emcn/components/code/code.css +++ b/apps/sim/components/emcn/components/code/code.css @@ -3,149 +3,152 @@ * Cursor/VS Code base colors with Sim's vibrant saturation. * Colors aligned to Sim brand where applicable. * Applied to elements with .code-editor-theme class. + * + * Uses double-class specificity (.code-editor-theme.code-editor-theme) + * to override PrismJS defaults without !important. */ /** * Light mode token colors - Cursor style with Sim vibrancy */ -.code-editor-theme .token.comment, -.code-editor-theme .token.block-comment, -.code-editor-theme .token.prolog, -.code-editor-theme .token.doctype, -.code-editor-theme .token.cdata { - color: #16a34a !important; +.code-editor-theme.code-editor-theme .token.comment, +.code-editor-theme.code-editor-theme .token.block-comment, +.code-editor-theme.code-editor-theme .token.prolog, +.code-editor-theme.code-editor-theme .token.doctype, +.code-editor-theme.code-editor-theme .token.cdata { + color: #16a34a; } -.code-editor-theme .token.punctuation { - color: #383838 !important; +.code-editor-theme.code-editor-theme .token.punctuation { + color: #383838; } -.code-editor-theme .token.property, -.code-editor-theme .token.attr-name, -.code-editor-theme .token.variable { - color: #0891b2 !important; +.code-editor-theme.code-editor-theme .token.property, +.code-editor-theme.code-editor-theme .token.attr-name, +.code-editor-theme.code-editor-theme .token.variable { + color: #0891b2; } -.code-editor-theme .token.tag, -.code-editor-theme .token.boolean, -.code-editor-theme .token.number, -.code-editor-theme .token.constant { - color: #16a34a !important; +.code-editor-theme.code-editor-theme .token.tag, +.code-editor-theme.code-editor-theme .token.boolean, +.code-editor-theme.code-editor-theme .token.number, +.code-editor-theme.code-editor-theme .token.constant { + color: #16a34a; } -.code-editor-theme .token.string, -.code-editor-theme .token.char, -.code-editor-theme .token.builtin, -.code-editor-theme .token.inserted { - color: #b45309 !important; +.code-editor-theme.code-editor-theme .token.string, +.code-editor-theme.code-editor-theme .token.char, +.code-editor-theme.code-editor-theme .token.builtin, +.code-editor-theme.code-editor-theme .token.inserted { + color: #b45309; } -.code-editor-theme .token.operator, -.code-editor-theme .token.entity, -.code-editor-theme .token.url { - color: #383838 !important; +.code-editor-theme.code-editor-theme .token.operator, +.code-editor-theme.code-editor-theme .token.entity, +.code-editor-theme.code-editor-theme .token.url { + color: #383838; } -.code-editor-theme .token.atrule, -.code-editor-theme .token.attr-value, -.code-editor-theme .token.keyword { - color: #2f55ff !important; +.code-editor-theme.code-editor-theme .token.atrule, +.code-editor-theme.code-editor-theme .token.attr-value, +.code-editor-theme.code-editor-theme .token.keyword { + color: #2f55ff; } -.code-editor-theme .token.function, -.code-editor-theme .token.class-name { - color: #ca8a04 !important; +.code-editor-theme.code-editor-theme .token.function, +.code-editor-theme.code-editor-theme .token.class-name { + color: #ca8a04; } -.code-editor-theme .token.regex, -.code-editor-theme .token.important { - color: #e11d48 !important; +.code-editor-theme.code-editor-theme .token.regex, +.code-editor-theme.code-editor-theme .token.important { + color: #e11d48; } -.code-editor-theme .token.symbol { - color: #383838 !important; +.code-editor-theme.code-editor-theme .token.symbol { + color: #383838; } -.code-editor-theme .token.deleted { - color: #dc2626 !important; +.code-editor-theme.code-editor-theme .token.deleted { + color: #dc2626; } /* Blue accents for and {{ENV}} placeholders - light mode */ -.code-editor-theme .text-blue-500 { - color: #1d4ed8 !important; +.code-editor-theme.code-editor-theme .text-blue-500 { + color: #1d4ed8; } /** * Dark mode token colors - Cursor style with Sim vibrancy */ -.dark .code-editor-theme .token.comment, -.dark .code-editor-theme .token.block-comment, -.dark .code-editor-theme .token.prolog, -.dark .code-editor-theme .token.doctype, -.dark .code-editor-theme .token.cdata { - color: #6ec97d !important; +.dark .code-editor-theme.code-editor-theme .token.comment, +.dark .code-editor-theme.code-editor-theme .token.block-comment, +.dark .code-editor-theme.code-editor-theme .token.prolog, +.dark .code-editor-theme.code-editor-theme .token.doctype, +.dark .code-editor-theme.code-editor-theme .token.cdata { + color: #6ec97d; } -.dark .code-editor-theme .token.punctuation { - color: #d4d4d4 !important; +.dark .code-editor-theme.code-editor-theme .token.punctuation { + color: #d4d4d4; } -.dark .code-editor-theme .token.property, -.dark .code-editor-theme .token.attr-name, -.dark .code-editor-theme .token.variable { - color: #4fc3f7 !important; +.dark .code-editor-theme.code-editor-theme .token.property, +.dark .code-editor-theme.code-editor-theme .token.attr-name, +.dark .code-editor-theme.code-editor-theme .token.variable { + color: #4fc3f7; } -.dark .code-editor-theme .token.tag, -.dark .code-editor-theme .token.boolean, -.dark .code-editor-theme .token.number, -.dark .code-editor-theme .token.constant { - color: #a5d6a7 !important; +.dark .code-editor-theme.code-editor-theme .token.tag, +.dark .code-editor-theme.code-editor-theme .token.boolean, +.dark .code-editor-theme.code-editor-theme .token.number, +.dark .code-editor-theme.code-editor-theme .token.constant { + color: #a5d6a7; } -.dark .code-editor-theme .token.string, -.dark .code-editor-theme .token.char, -.dark .code-editor-theme .token.builtin, -.dark .code-editor-theme .token.inserted { - color: #f39c6b !important; +.dark .code-editor-theme.code-editor-theme .token.string, +.dark .code-editor-theme.code-editor-theme .token.char, +.dark .code-editor-theme.code-editor-theme .token.builtin, +.dark .code-editor-theme.code-editor-theme .token.inserted { + color: #f39c6b; } -.dark .code-editor-theme .token.operator, -.dark .code-editor-theme .token.entity, -.dark .code-editor-theme .token.url { - color: #d4d4d4 !important; +.dark .code-editor-theme.code-editor-theme .token.operator, +.dark .code-editor-theme.code-editor-theme .token.entity, +.dark .code-editor-theme.code-editor-theme .token.url { + color: #d4d4d4; } -.dark .code-editor-theme .token.atrule, -.dark .code-editor-theme .token.attr-value, -.dark .code-editor-theme .token.keyword { - color: #2fa1ff !important; +.dark .code-editor-theme.code-editor-theme .token.atrule, +.dark .code-editor-theme.code-editor-theme .token.attr-value, +.dark .code-editor-theme.code-editor-theme .token.keyword { + color: #2fa1ff; } -.dark .code-editor-theme .token.function, -.dark .code-editor-theme .token.class-name { - color: #fbbf24 !important; +.dark .code-editor-theme.code-editor-theme .token.function, +.dark .code-editor-theme.code-editor-theme .token.class-name { + color: #fbbf24; } -.dark .code-editor-theme .token.regex, -.dark .code-editor-theme .token.important { - color: #f87171 !important; +.dark .code-editor-theme.code-editor-theme .token.regex, +.dark .code-editor-theme.code-editor-theme .token.important { + color: #f87171; } -.dark .code-editor-theme .token.symbol { - color: #d4d4d4 !important; +.dark .code-editor-theme.code-editor-theme .token.symbol { + color: #d4d4d4; } -.dark .code-editor-theme .token.deleted { - color: #f87171 !important; +.dark .code-editor-theme.code-editor-theme .token.deleted { + color: #f87171; } /* Blue accents for and {{ENV}} placeholders - dark mode */ -.dark .code-editor-theme .text-blue-500 { - color: #35b6ff !important; +.dark .code-editor-theme.code-editor-theme .text-blue-500 { + color: #35b6ff; } /* Ensure transparent backgrounds */ -.code-editor-theme .token { - background: transparent !important; +.code-editor-theme.code-editor-theme .token { + background: transparent; } diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx index 94f865b01ed..c57f892fdc9 100644 --- a/apps/sim/components/emcn/components/code/code.tsx +++ b/apps/sim/components/emcn/components/code/code.tsx @@ -329,7 +329,7 @@ const CollapseButton = memo(function CollapseButton({ isCollapsed, onClick }: Co diff --git a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx index ba3829a5af4..177da2145c5 100644 --- a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx +++ b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx @@ -26,7 +26,7 @@ import { Check, ChevronRight, Circle, Search } from 'lucide-react' import { cn } from '@/lib/core/utils/cn' const ANIMATION_CLASSES = - 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in' + 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none' const DropdownMenu = DropdownMenuPrimitive.Root @@ -79,7 +79,7 @@ const DropdownMenuSubContent = React.forwardRef< ref={ref} className={cn( ANIMATION_CLASSES, - 'z-50 max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm', + 'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[280px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm', className )} {...props} @@ -97,7 +97,7 @@ const DropdownMenuContent = React.forwardRef< sideOffset={sideOffset} className={cn( ANIMATION_CLASSES, - 'z-50 max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm', + 'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[280px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm', className )} {...props} diff --git a/apps/sim/components/emcn/components/input-otp/input-otp.tsx b/apps/sim/components/emcn/components/input-otp/input-otp.tsx index 12edabec592..d368640967a 100644 --- a/apps/sim/components/emcn/components/input-otp/input-otp.tsx +++ b/apps/sim/components/emcn/components/input-otp/input-otp.tsx @@ -86,7 +86,7 @@ const InputOTPSlot = React.forwardRef< {char} {hasFakeCaret && (
-
+
)}
diff --git a/apps/sim/components/emcn/components/input/input.tsx b/apps/sim/components/emcn/components/input/input.tsx index 516e929315a..fcc3e8da8d1 100644 --- a/apps/sim/components/emcn/components/input/input.tsx +++ b/apps/sim/components/emcn/components/input/input.tsx @@ -26,7 +26,7 @@ import { cn } from '@/lib/core/utils/cn' * Currently supports a 'default' variant. */ const inputVariants = cva( - 'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50', + 'flex w-full touch-manipulation rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50', { variants: { variant: { diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx index d4f92699640..f2140a2e219 100644 --- a/apps/sim/components/emcn/components/modal/modal.tsx +++ b/apps/sim/components/emcn/components/modal/modal.tsx @@ -48,14 +48,14 @@ import { Button } from '../button/button' * Mirrors the legacy `Modal` component to ensure consistent behavior. */ const ANIMATION_CLASSES = - 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in' + 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none' /** * Modal content animation classes. * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects. */ const CONTENT_ANIMATION_CLASSES = - 'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]' + 'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none' /** * Root modal component. Manages open state. @@ -90,7 +90,7 @@ const ModalOverlay = React.forwardRef< - @@ -308,7 +311,7 @@ const ModalTabsList = React.forwardRef< @@ -329,7 +332,7 @@ const ModalTabsTrigger = React.forwardRef< ref={ref} className={cn( 'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors', - 'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]', + 'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]', className )} {...props} @@ -370,7 +373,7 @@ const ModalFooter = React.forwardRef {children} - @@ -328,7 +331,7 @@ const SModalTabsList = React.forwardRef< @@ -349,7 +352,7 @@ const SModalTabsTrigger = React.forwardRef< ref={ref} className={cn( 'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors', - 'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]', + 'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]', className )} {...props} diff --git a/apps/sim/components/emcn/components/skeleton/skeleton.tsx b/apps/sim/components/emcn/components/skeleton/skeleton.tsx index 59a4393d208..c011430fe2d 100644 --- a/apps/sim/components/emcn/components/skeleton/skeleton.tsx +++ b/apps/sim/components/emcn/components/skeleton/skeleton.tsx @@ -7,7 +7,10 @@ import { cn } from '@/lib/core/utils/cn' function Skeleton({ className, ...props }: React.HTMLAttributes) { return (
) diff --git a/apps/sim/components/emcn/components/slider/slider.tsx b/apps/sim/components/emcn/components/slider/slider.tsx index 71a84a9120d..bf85ab21567 100644 --- a/apps/sim/components/emcn/components/slider/slider.tsx +++ b/apps/sim/components/emcn/components/slider/slider.tsx @@ -30,7 +30,7 @@ const Slider = React.forwardRef, S - + ) ) diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx index c61ae0e69a4..ddb3912b600 100644 --- a/apps/sim/components/emcn/components/switch/switch.tsx +++ b/apps/sim/components/emcn/components/switch/switch.tsx @@ -16,7 +16,7 @@ const Switch = React.memo( ( inputRef.current?.focus() } }} - className='flex items-center px-[3px] opacity-80 transition-opacity hover:opacity-100 focus:outline-none' + className='relative flex items-center px-[3px] opacity-80 transition-opacity before:absolute before:inset-[-10px] before:content-[""] hover-hover:opacity-100 focus:outline-none' disabled={disabled} aria-label='Add tag' > @@ -491,7 +491,7 @@ const TagInput = React.forwardRef( e.stopPropagation() fileInputRef.current?.click() }} - className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]' + className='absolute right-[8px] bottom-[9px] p-[6px] -m-[6px] text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-secondary)]' aria-label={fileInputOptions?.tooltip ?? 'Upload file'} > diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx index de56797c8ea..d4f8311569a 100644 --- a/apps/sim/components/emcn/components/textarea/textarea.tsx +++ b/apps/sim/components/emcn/components/textarea/textarea.tsx @@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/core/utils/cn' const textareaVariants = cva( - 'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50', + 'flex w-full touch-manipulation rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50', { variants: { variant: { diff --git a/apps/sim/components/emcn/components/time-picker/time-picker.tsx b/apps/sim/components/emcn/components/time-picker/time-picker.tsx index 4bc776b347a..7ffb1d48442 100644 --- a/apps/sim/components/emcn/components/time-picker/time-picker.tsx +++ b/apps/sim/components/emcn/components/time-picker/time-picker.tsx @@ -40,7 +40,7 @@ import { cn } from '@/lib/core/utils/cn' * Matches the input and combobox styling patterns. */ const timePickerVariants = cva( - 'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)] transition-colors', + 'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)] transition-colors', { variants: { variant: { @@ -256,7 +256,7 @@ const TimePicker = React.forwardRef(
( /> : ( 'px-[8px] py-[5px] font-medium font-sans text-[12px] transition-colors', ampm === period ? 'bg-[var(--brand-secondary)] text-[var(--bg)]' - : 'bg-[var(--surface-5)] text-[var(--text-secondary)] hover:bg-[var(--surface-7)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]' + : 'bg-[var(--surface-5)] text-[var(--text-secondary)] hover-hover:bg-[var(--surface-7)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--surface-5)]' )} > {period} diff --git a/apps/sim/components/emcn/components/toast/toast.tsx b/apps/sim/components/emcn/components/toast/toast.tsx index 163f05858b5..723a7d41508 100644 --- a/apps/sim/components/emcn/components/toast/toast.tsx +++ b/apps/sim/components/emcn/components/toast/toast.tsx @@ -14,7 +14,7 @@ import { X } from 'lucide-react' import { createPortal } from 'react-dom' import { cn } from '@/lib/core/utils/cn' -const AUTO_DISMISS_MS = 0 +const AUTO_DISMISS_MS = 5000 const EXIT_ANIMATION_MS = 200 const MAX_VISIBLE = 20 @@ -137,10 +137,10 @@ function ToastItem({ toast: t, onDismiss }: { toast: ToastData; onDismiss: (id: return (
@@ -240,7 +240,7 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
{toasts.map((t) => ( diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx index af1b14309ae..ea0d5411b24 100644 --- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx +++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx @@ -50,7 +50,7 @@ const Content = React.forwardRef< collisionPadding={8} avoidCollisions={true} className={cn( - 'z-[10000300] rounded-[4px] bg-[#1b1b1b] px-[8px] py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black', + 'z-[var(--z-tooltip)] rounded-[4px] bg-[#1b1b1b] px-[8px] py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black', className )} {...props} diff --git a/apps/sim/components/emcn/icons/animate/copy.module.css b/apps/sim/components/emcn/icons/animate/copy.module.css index 7b652378d8c..e3d52509b92 100644 --- a/apps/sim/components/emcn/icons/animate/copy.module.css +++ b/apps/sim/components/emcn/icons/animate/copy.module.css @@ -65,3 +65,10 @@ animation: segment-cycle 2s ease-in-out infinite; transform-box: fill-box; } + +@media (prefers-reduced-motion: reduce) { + .animated-copy-svg .rect-bottom-right, + .animated-copy-svg .rect-top-left { + animation: none; + } +} diff --git a/apps/sim/components/emcn/icons/animate/download.module.css b/apps/sim/components/emcn/icons/animate/download.module.css index 0f279d3ff00..3c1cc6c1402 100644 --- a/apps/sim/components/emcn/icons/animate/download.module.css +++ b/apps/sim/components/emcn/icons/animate/download.module.css @@ -20,3 +20,9 @@ animation: arrow-pulse 1.5s ease-in-out infinite; transform-origin: center center; } + +@media (prefers-reduced-motion: reduce) { + .animated-download-svg { + animation: none; + } +} diff --git a/apps/sim/components/emcn/icons/animate/layout.module.css b/apps/sim/components/emcn/icons/animate/layout.module.css index 4230456a9e0..364d4a3028c 100644 --- a/apps/sim/components/emcn/icons/animate/layout.module.css +++ b/apps/sim/components/emcn/icons/animate/layout.module.css @@ -177,3 +177,12 @@ .animated-layout-svg.clockwise .block-bottom-left { animation: move-bottom-left-cw 2.5s ease-in-out infinite; } + +@media (prefers-reduced-motion: reduce) { + .animated-layout-svg .block-top-left, + .animated-layout-svg .block-top-right, + .animated-layout-svg .block-bottom-right, + .animated-layout-svg .block-bottom-left { + animation: none; + } +} diff --git a/apps/sim/components/emcn/icons/animate/loader.module.css b/apps/sim/components/emcn/icons/animate/loader.module.css index c18e027f57a..ebe4f368f54 100644 --- a/apps/sim/components/emcn/icons/animate/loader.module.css +++ b/apps/sim/components/emcn/icons/animate/loader.module.css @@ -18,3 +18,9 @@ transform-origin: center center; will-change: transform; } + +@media (prefers-reduced-motion: reduce) { + .animated-loader-svg { + animation: none; + } +} diff --git a/apps/sim/components/emcn/icons/animate/pills-ring.module.css b/apps/sim/components/emcn/icons/animate/pills-ring.module.css index 20e46e6fd4b..5ba88317291 100644 --- a/apps/sim/components/emcn/icons/animate/pills-ring.module.css +++ b/apps/sim/components/emcn/icons/animate/pills-ring.module.css @@ -20,3 +20,9 @@ animation: pill-fade 1.2s ease-in-out infinite; will-change: opacity; } + +@media (prefers-reduced-motion: reduce) { + .animated-pills-ring-svg .pill { + animation: none; + } +} diff --git a/apps/sim/components/emcn/icons/arrow-down.tsx b/apps/sim/components/emcn/icons/arrow-down.tsx index d419ea8962d..e1cbbd85595 100644 --- a/apps/sim/components/emcn/icons/arrow-down.tsx +++ b/apps/sim/components/emcn/icons/arrow-down.tsx @@ -16,6 +16,7 @@ export function ArrowDown(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/arrow-left.tsx b/apps/sim/components/emcn/icons/arrow-left.tsx index adf57187cfb..729fd5547a6 100644 --- a/apps/sim/components/emcn/icons/arrow-left.tsx +++ b/apps/sim/components/emcn/icons/arrow-left.tsx @@ -16,6 +16,7 @@ export function ArrowLeft(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/arrow-right.tsx b/apps/sim/components/emcn/icons/arrow-right.tsx index 992adacd545..2d98246046a 100644 --- a/apps/sim/components/emcn/icons/arrow-right.tsx +++ b/apps/sim/components/emcn/icons/arrow-right.tsx @@ -16,6 +16,7 @@ export function ArrowRight(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/arrow-up-down.tsx b/apps/sim/components/emcn/icons/arrow-up-down.tsx index 86729d15345..012511c209f 100644 --- a/apps/sim/components/emcn/icons/arrow-up-down.tsx +++ b/apps/sim/components/emcn/icons/arrow-up-down.tsx @@ -16,6 +16,7 @@ export function ArrowUpDown(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/arrow-up.tsx b/apps/sim/components/emcn/icons/arrow-up.tsx index 24430bd4bcc..f4272c4fa42 100644 --- a/apps/sim/components/emcn/icons/arrow-up.tsx +++ b/apps/sim/components/emcn/icons/arrow-up.tsx @@ -16,6 +16,7 @@ export function ArrowUp(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/asterisk.tsx b/apps/sim/components/emcn/icons/asterisk.tsx index e443ff6f341..d6bc5a52925 100644 --- a/apps/sim/components/emcn/icons/asterisk.tsx +++ b/apps/sim/components/emcn/icons/asterisk.tsx @@ -16,6 +16,7 @@ export function Asterisk(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/bell.tsx b/apps/sim/components/emcn/icons/bell.tsx index d9d4b0f2b9f..ebbf72ad849 100644 --- a/apps/sim/components/emcn/icons/bell.tsx +++ b/apps/sim/components/emcn/icons/bell.tsx @@ -16,6 +16,7 @@ export function Bell(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/blimp.tsx b/apps/sim/components/emcn/icons/blimp.tsx index d361451ea99..8c3b34d750c 100644 --- a/apps/sim/components/emcn/icons/blimp.tsx +++ b/apps/sim/components/emcn/icons/blimp.tsx @@ -15,6 +15,7 @@ export function Blimp(props: SVGProps) { strokeWidth='0.75' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > ) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/bubble-chat-close.tsx b/apps/sim/components/emcn/icons/bubble-chat-close.tsx index a8792b2ab04..db8e7c2cf2c 100644 --- a/apps/sim/components/emcn/icons/bubble-chat-close.tsx +++ b/apps/sim/components/emcn/icons/bubble-chat-close.tsx @@ -12,6 +12,7 @@ export function BubbleChatClose(props: SVGProps) { viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > ) { viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > ) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/calendar.tsx b/apps/sim/components/emcn/icons/calendar.tsx index d1b4c25d1a3..d986f323d9a 100644 --- a/apps/sim/components/emcn/icons/calendar.tsx +++ b/apps/sim/components/emcn/icons/calendar.tsx @@ -16,6 +16,7 @@ export function Calendar(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/card.tsx b/apps/sim/components/emcn/icons/card.tsx index 74d1c4ea8b1..fe546a578b7 100644 --- a/apps/sim/components/emcn/icons/card.tsx +++ b/apps/sim/components/emcn/icons/card.tsx @@ -12,6 +12,7 @@ export function Card(props: SVGProps) { viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > ) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/chevron-down.tsx b/apps/sim/components/emcn/icons/chevron-down.tsx index a52666136c3..56dc176d2c1 100644 --- a/apps/sim/components/emcn/icons/chevron-down.tsx +++ b/apps/sim/components/emcn/icons/chevron-down.tsx @@ -12,6 +12,7 @@ export function ChevronDown(props: SVGProps) { viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > ) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/columns2.tsx b/apps/sim/components/emcn/icons/columns2.tsx index 5672efeb191..fb697639bcf 100644 --- a/apps/sim/components/emcn/icons/columns2.tsx +++ b/apps/sim/components/emcn/icons/columns2.tsx @@ -16,6 +16,7 @@ export function Columns2(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/columns3.tsx b/apps/sim/components/emcn/icons/columns3.tsx index d4213bf36d2..9c041cef65a 100644 --- a/apps/sim/components/emcn/icons/columns3.tsx +++ b/apps/sim/components/emcn/icons/columns3.tsx @@ -16,6 +16,7 @@ export function Columns3(props: SVGProps) { strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > diff --git a/apps/sim/components/emcn/icons/connections.tsx b/apps/sim/components/emcn/icons/connections.tsx index 5baed700406..a9d4d248419 100644 --- a/apps/sim/components/emcn/icons/connections.tsx +++ b/apps/sim/components/emcn/icons/connections.tsx @@ -12,6 +12,7 @@ export function Connections(props: SVGProps) { viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' {...props} > { /** @@ -16,9 +17,7 @@ export interface CopyProps extends SVGProps { * @param props - SVG properties including className, animate, etc. */ export function Copy({ animate = false, className, ...props }: CopyProps) { - const svgClassName = animate - ? `${styles['animated-copy-svg']} ${className || ''}`.trim() - : className + const svgClassName = cn(animate && styles['animated-copy-svg'], className) return (
-
@@ -1126,14 +1126,14 @@ function PreviewEditorContent({ if (!blockConfig) { return (
-
-
- +
+
+ {block.name || 'Unknown Block'}
-
-

Block configuration not found.

+
+

Block configuration not found.

) @@ -1180,10 +1180,10 @@ function PreviewEditorContent({ return (
{/* Header - styled like editor */} -
+
{block.type !== 'note' && (
)} - + {block.name || blockConfig.name} {onClose && ( - )} @@ -1209,7 +1209,7 @@ function PreviewEditorContent({
{/* Not Executed Banner - shown when in execution mode but block wasn't executed */} {isBlockNotExecuted && ( -
+
Not Executed @@ -1220,14 +1220,14 @@ function PreviewEditorContent({ {/* Execution Status & Duration Header */} {executionData && (executionData.status || executionData.durationMs !== undefined) && ( -
+
{executionData.status && ( {executionData.status} )} {executionData.durationMs !== undefined && ( - + {formatDuration(executionData.durationMs, { precision: 2 })} )} @@ -1253,7 +1253,7 @@ function PreviewEditorContent({ {/* Action buttons overlay */} {!isSearchActive && ( -
+
Go back to parent workflow {currentWorkflowName && ( -
- +
+ {currentWorkflowName}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx index 8c619daa376..970e263a118 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx @@ -32,7 +32,7 @@ export function CollapsedSidebarMenu({ className, }: CollapsedSidebarMenuProps) { return ( -
+
{ @@ -46,7 +46,7 @@ export function CollapsedSidebarMenu({