improvement(emcn): normalize the chevron geometry and consolidate consumers

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
+import { ChevronRight } from '@sim/emcn/icons'
 import type { Folder, Item, Separator } from 'fumadocs-core/page-tree'
 import { useSidebar } from 'fumadocs-ui/components/sidebar/base'
 import Link from 'next/link'
@@ -10,25 +11,13 @@ import { cn } from '@/lib/utils'
 
 function SidebarChevron({ open, className }: { open: boolean; className?: string }) {
   return (
-    <svg
-      width='5'
-      height='8'
-      viewBox='0 0 6 10'
-      fill='none'
+    <ChevronRight
       className={cn(
-        'flex-shrink-0 transition-transform duration-200',
+        'size-[14px] flex-shrink-0 transition-transform duration-200',
         open && 'rotate-90',
         className
       )}
-    >
-      <path
-        d='M1 1L5 5L1 9'
-        stroke='currentColor'
-        strokeWidth='1.33'
-        strokeLinecap='square'
-        strokeLinejoin='miter'
-      />
-    </svg>
+    />
   )
 }
 

apps/docs/components/ui/theme-toggle.tsx

@@ -1,54 +1,8 @@
 'use client'
 
-import type { SVGProps } from 'react'
+import { Moon, Sun } from '@sim/emcn/icons'
 import { useTheme } from 'next-themes'
 
-function SunIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='16'
-      height='16'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <circle cx='12' cy='12' r='4' />
-      <path d='M12 2v2' />
-      <path d='M12 20v2' />
-      <path d='m4.93 4.93 1.41 1.41' />
-      <path d='m17.66 17.66 1.41 1.41' />
-      <path d='M2 12h2' />
-      <path d='M20 12h2' />
-      <path d='m6.34 17.66-1.41 1.41' />
-      <path d='m19.07 4.93-1.41 1.41' />
-    </svg>
-  )
-}
-
-function MoonIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='16'
-      height='16'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.5'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      {...props}
-    >
-      <path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z' />
-    </svg>
-  )
-}
-
 export function ThemeToggle() {
   const { resolvedTheme, setTheme } = useTheme()
 
@@ -59,8 +13,8 @@ export function ThemeToggle() {
       className='flex size-[30px] cursor-pointer items-center justify-center rounded-lg text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)]'
       aria-label='Toggle theme'
     >
-      <SunIcon className='block size-[14px] dark:hidden' />
-      <MoonIcon className='hidden size-[14px] dark:block' />
+      <Sun className='block size-[14px] dark:hidden' />
+      <Moon className='hidden size-[14px] dark:block' />
     </button>
   )
 }

apps/docs/components/workflow-preview/output-bundle.tsx

@@ -71,7 +71,7 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
         </span>
         <TypeBadge type={type} />
         <ChevronDown
-          className='h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)]'
+          className='size-[14px] flex-shrink-0 text-[var(--text-muted)]'
           style={expanded ? undefined : { transform: 'rotate(-90deg)' }}
         />
       </div>

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/chat-title-bar.tsx

@@ -31,7 +31,7 @@ export function LandingPreviewChatTitleBar({
         </span>
         <span aria-hidden='true' className='w-px self-stretch bg-[var(--surface-2)]' />
         <span className='flex items-center rounded-r-lg px-1 transition-colors hover-hover:bg-[var(--surface-active)]'>
-          <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </span>
       </span>
       {showClose && (

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx

@@ -200,7 +200,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                         </div>
                         <span className='text-[var(--text-body)] text-sm'>Sim</span>
                         <ChevronDown
-                          className='h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150'
+                          className='size-[14px] text-[var(--text-icon)] transition-transform duration-150'
                           style={{
                             transform: toolsExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
                           }}
@@ -298,7 +298,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
               <div className='flex items-center justify-between'>
                 <div className='flex items-center gap-2'>
                   <span className='text-[var(--text-muted)] text-small'>Suggested actions</span>
-                  <ChevronDown className='h-[7px] w-[9px] text-[var(--text-muted)]' />
+                  <ChevronDown className='size-[14px] text-[var(--text-muted)]' />
                 </div>
                 <div className='-mr-2 flex items-center gap-1.5 rounded-lg px-2 py-1'>
                   <span className='-mt-px text-[var(--text-muted)] text-small'>Shuffle</span>
@@ -411,7 +411,7 @@ function MiniTablePanel() {
                       <span className='font-medium text-[11px] text-[var(--text-primary)]'>
                         {col.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[6px] w-[8px] text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx

@@ -97,7 +97,7 @@ export function LandingPreviewSidebar({
           <span className='min-w-0 flex-1 truncate text-left font-medium text-[13px] text-[var(--text-primary)]'>
             Superark
           </span>
-          <ChevronDown className='h-[8px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </div>
       </div>
 

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx

@@ -444,7 +444,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
           <span className='select-none text-[var(--text-icon)] text-sm'>/</span>
           <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
             {tableName}
-            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
           </span>
         </div>
       </div>
@@ -470,7 +470,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
                       <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                         {col.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )

apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx

@@ -217,7 +217,7 @@ export function EnterpriseHomeStage({
             <div className='flex items-center justify-between'>
               <span className='flex items-center gap-2'>
                 <span className='text-[13px] text-[var(--text-muted)]'>Suggested actions</span>
-                <ChevronDown className='h-[7px] w-[9px] text-[var(--text-muted)]' />
+                <ChevronDown className='size-[14px] text-[var(--text-muted)]' />
               </span>
               <span className='flex items-center gap-1.5'>
                 <span className='text-[13px] text-[var(--text-muted)]'>Shuffle</span>

apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx

@@ -110,7 +110,7 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
     <div className='flex h-full w-[249px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3'>
       {/* Workspace header, matching the real product's WorkspaceHeader chip
           (borderless `chipVariants()` geometry: h-[30px] rounded-lg px-2 with
-          mx-0.5, 16px logo, text-sm name, 6x10 chevron) and therefore the
+          mx-0.5, 16px logo, text-sm name, 14px chevron) and therefore the
           homepage's baked sidebar pixels - logo + name + chevron as a bare
           row, panel toggle right-aligned outside it. */}
       <div className='flex flex-shrink-0 items-center justify-between px-2'>
@@ -126,7 +126,7 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
             className='size-[16px] flex-shrink-0 rounded-sm'
           />
           <span className='min-w-0 truncate text-[var(--text-body)] text-sm'>{workspaceName}</span>
-          <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
         </div>
         <PanelLeft className='mr-1.5 size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
       </div>

apps/sim/app/(landing)/tables/components/tables-hero-loop.tsx

@@ -294,7 +294,7 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
           <span className='select-none text-[var(--text-icon)] text-sm'>/</span>
           <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
             Leads
-            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
           </span>
         </div>
       </div>
@@ -319,7 +319,7 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
                       <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                         {column.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx

@@ -112,7 +112,7 @@ export function AgentGroup({
           )}
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
+              'size-[14px] text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
               !expanded && '-rotate-90'
             )}
           />

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx

@@ -268,7 +268,7 @@ export function QuestionDisplay({
                   'before:absolute before:inset-[-8px] before:content-[""] disabled:opacity-50'
                 )}
               >
-                <ChevronLeft className='h-[9px] w-[7px] text-[var(--text-icon)]' />
+                <ChevronLeft className='size-[14px] text-[var(--text-icon)]' />
                 <span className='sr-only'>Previous question</span>
               </Button>
               <span className='whitespace-nowrap text-[var(--text-muted)] text-sm tabular-nums'>
@@ -286,7 +286,7 @@ export function QuestionDisplay({
                   'before:absolute before:inset-[-8px] before:content-[""] disabled:opacity-50'
                 )}
               >
-                <ChevronRight className='h-[9px] w-[7px] text-[var(--text-icon)]' />
+                <ChevronRight className='size-[14px] text-[var(--text-icon)]' />
                 <span className='sr-only'>Next question</span>
               </Button>
             </div>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -1383,7 +1383,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
           <span className='text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
           />

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx

@@ -362,7 +362,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
          */}
         <ChevronDown
           className={cn(
-            'h-[6px] w-[8px] flex-shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
+            'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
             'group-hover/suggested:opacity-100 group-focus-visible/toggle:opacity-100',
             !expanded && '-rotate-90'
           )}

apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx

@@ -307,7 +307,7 @@ export function Integrations() {
                       ? selectedCategory
                       : formatIntegrationType(selectedCategory)}
                   </span>
-                  <ChevronDown className='h-[7px] w-[9px] text-[var(--text-icon)]' />
+                  <ChevronDown className='size-[14px] text-[var(--text-icon)]' />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end' className='min-w-[160px]'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx

@@ -104,7 +104,7 @@ export function FieldItem({
       {hasChildren && (
         <ChevronDown
           className={clsx(
-            'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+            'size-[14px] flex-shrink-0 transition-transform duration-100',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
             isExpanded && 'rotate-180'
           )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx

@@ -66,8 +66,7 @@ const BADGE_VARIANTS: Record<ValueType, BadgeVariant> = {
  */
 const STYLES = {
   row: 'group flex min-h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 -mx-2 hover-hover:bg-[var(--surface-active)]',
-  chevron:
-    'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+  chevron: 'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
   keyName: 'text-sm text-[var(--text-primary)]',
   badge: 'rounded-sm px-1 py-[0px] text-xs',
   summary: 'text-sm text-[var(--text-secondary)]',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx

@@ -24,7 +24,7 @@ export const ToggleButton = memo(function ToggleButton({ isExpanded, onClick }:
     >
       <ChevronDown
         className={clsx(
-          'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+          'size-[14px] flex-shrink-0 transition-transform duration-100',
           !isExpanded && 'rotate-180'
         )}
       />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx

@@ -206,7 +206,7 @@ const IterationNodeRow = memo(function IterationNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
@@ -316,7 +316,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
@@ -443,7 +443,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx

@@ -113,7 +113,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
                 </Tooltip.Trigger>
                 <Button className='-m-1 !p-1.5 group' variant='ghost'>
                   <ChevronDown
-                    className={`h-[8px] w-[10px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${isCanvasModeOpen ? 'rotate-180' : ''}`}
+                    className={`size-[14px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${isCanvasModeOpen ? 'rotate-180' : ''}`}
                   />
                 </Button>
               </div>

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx

@@ -468,7 +468,7 @@ function ConnectionsSection({
               </span>
               <ChevronDown
                 className={cn(
-                  'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+                  'size-[14px] flex-shrink-0 transition-transform duration-100',
                   'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                   expandedVariables && 'rotate-180'
                 )}
@@ -520,7 +520,7 @@ function ConnectionsSection({
               </span>
               <ChevronDown
                 className={cn(
-                  'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+                  'size-[14px] flex-shrink-0 transition-transform duration-100',
                   'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
                   expandedEnvVars && 'rotate-180'
                 )}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx

@@ -93,7 +93,7 @@ export function SidebarSection({
              */}
             <ChevronDown
               className={cn(
-                'h-[6px] w-[8px] flex-shrink-0 text-[var(--text-icon)] opacity-0',
+                'size-[14px] flex-shrink-0 text-[var(--text-icon)] opacity-0',
                 CHEVRON_TRANSITION_CLASS,
                 'group-hover/section:opacity-100 group-focus-visible/toggle:opacity-100',
                 !expanded && '-rotate-90'

apps/sim/ee/workspace-forking/components/fork-excluded-workflows/fork-excluded-workflows.tsx

@@ -213,7 +213,7 @@ function ExcludedFolderRow({
           </span>
           <ChevronDown
             className={cn(
-              'h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />

apps/sim/ee/workspace-forking/components/fork-file-tree/fork-file-tree.tsx

@@ -142,7 +142,7 @@ function ForkFileFolderRow({
           </span>
           <ChevronDown
             className={cn(
-              'h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
+              'size-[14px] flex-shrink-0 text-[var(--text-icon)] transition-transform',
               expanded && 'rotate-180'
             )}
           />