+
+ Overlays · Command
+ Command
+
+ ⌘K command palette. Soma owns fuzzy scoring
+ (computeFuzzyScore), keyboard nav (arrow + vim
+ bindings + typeahead + loop + grid columns + RTL), item
+ visibility and the imperative CommandApi. Eidos
+ paints the palette chrome, exposes size
+ (sm/md/lg), adds Item.Icon / Item.Shortcut
+ sub-parts, and provides a <Command.Dialog>
+ composition wired to the eidos Dialog with an optional
+ mod+k shortcut binding.
+
+
+
+ parts {compiled.parts.order.length}
+
+
+ events {events.length}
+
+
+ sizes 3
+
+
+ apg
+ combobox ↗
+
+ {#if lastInvoked}
+
+ last {lastInvoked}
+
+ {/if}
+
+
+
+
+
+
+
+ No commands match.
+
+ Files
+
+
+ 📄
+ New file
+ ⌘N
+
+
+ 📁
+ Open file…
+ ⌘O
+
+
+ 💾
+ Save file
+ ⌘S
+
+
+
+
+ Edit
+
+
+ ↶
+ Undo
+ ⌘Z
+
+
+ ↷
+ Redo
+ ⇧⌘Z
+
+
+ 🔍
+ Find in file
+ ⌘F
+
+
+
+
+ Help
+
+
+ 📚
+ Open documentation
+ ↗
+
+
+ ℹ︎
+ About (disabled)
+
+
+
+
+
+
+
+
+ trace
+ {#if trace.length === 0}
+ type or arrow-nav to highlight, Enter to invoke
+ {:else}
+ {#each trace.slice(0, 3) as entry (entry.at)}
+ {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}{fmtTime(entry.at)}
+ {/each}
+ {/if}
+
+ value {value || '—'}
+
+
+
+
+
+
+
+ (dialogOpen = !dialogOpen)}
+ style="padding: var(--uix-space-2) var(--uix-space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-raised); cursor: pointer;"
+ >
+ {dialogOpen ? 'Close' : 'Open'} Command.Dialog (or press {dialogShortcut})
+
+
+
+
+
+
+ No matches.
+
+ Quick actions
+
+
+ ＋
+ New project
+ ⌘N
+
+
+ 🔍
+ Global search
+ ⌘P
+
+
+ ⚙︎
+ Open settings
+ ⌘,
+
+
+
+
+
+
+
+ (tab = 'live')}>Live
+ (tab = 'api')}>
+ API 15
+
+ (tab = 'morfo')}>
+ morfo
+ {partsList.length}p · {events.length}e
+
+ (tab = 'sema')}>
+ sema
+ {events.length}
+
+ (tab = 'recipe')}>Recipe
+ (tab = 'a11y')}>A11y
+
+
+ {#if tab === 'live'}
+
+ {/if}
+
+ {#if tab === 'api'}
+
+ API reference
+
+ 13 soma parts plus 3 eidos additions: Command.Dialog
+ (wraps eidos Dialog), Command.Item.Icon and
+ Command.Item.Shortcut (Item layout sub-parts).
+
+
+ Provider (Command)
+
+
+ Prop Type Default Description
+ value bindable string '' Currently highlighted item value. search bindable string '' Current search string. shouldFilter boolean true Whether to run the scoring filter over items. filter CommandFilterFn computeFuzzyScore Custom scoring function. Return 0 to exclude. loop boolean false Loop keyboard navigation at the edges. vimBindings boolean true Ctrl+N/J = next, Ctrl+P/K = previous. columns number 1 Grid columns — arrows move ±1 (Right/Left) or ±columns (Down/Up). disablePointerSelection boolean false Hovering items doesn't change the highlight. dir 'ltr' | 'rtl' from soma config Grid arrow inversion in RTL. size eidos ResponsiveProp<'sm' | 'md' | 'lg'> 'md' Visual size — input height + item height + font. shortcut eidos string | string[] — Optional keyboard shortcut (e.g. 'mod+k') that toggles open. Requires bindable open.
+
+
Item
+
+
+ Prop Type Default Description
+ value string required Unique value used by the scorer. keywords readonly string[] [] Text aliases the scorer also matches. disabled boolean false Disable activation. Still focusable. forceMount boolean false Render even when filtered out. onSelect () => void — Fired on Enter or click.
+
+
Item.Icon / Item.Shortcut eidos
+
+ Sub-parts of Item. Both accept children; the recipe handles layout — Icon is a leading flex slot, Shortcut is pushed to row's end via margin-inline-start: auto. Pair with <Kbd> for richer shortcut styling.
+
+
+ Command.Dialog eidos
+
+
+ Prop Type Default Description
+ open bindable boolean false Dialog open state. shortcut string | string[] | null 'mod+k' Keyboard binding(s) to toggle. null disables. size 'sm' | 'md' | 'lg' 'md' Inner Command palette size. dialogSize DialogSize 'md' Eidos Dialog panel size (sm | md | lg | xl | full). modal · label · value · search · shouldFilter · filter · loop · … pass-through — Forwarded to Dialog + Command.
+
+
+ {/if}
+
+ {#if tab === 'morfo'}
+
+
+ morfo
+ · declarative contract
+
+ Source: src/uix/morfo/components/command.ts.
+
+
+
+ Field Value
+ name "{commandMorfo.name}" kebab "{commandMorfo.kebab}" scope [{commandMorfo.scope.map((s) => `"${s}"`).join(', ')}] parts.length {commandMorfo.parts.length} events.length {events.length}
+
+
Parts
+
+
+ Part Marker Element Role Archetype States Optional
+ {#each partsList as part (part.kebab)}
+
+ {part.kebab}
+ [{part.marker}]<{part.defaultElement}>
+ {part.role ?? '—'}
+ {part.archetype ?? '—'}
+ {part.states.length ? part.states.join(' | ') : '—'}
+ {part.optional ? 'yes' : 'no'}
+
+ {/each}
+
+
+
Events declaration
+
+
+ name family verb sequence intent target
+ {#each events as action (action.name)}
+ {@const sem = action.semantic}
+ {@const intentDecl = 'intent' in sem ? sem.intent : undefined}
+ {@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
+
+ {action.name}
+ {sem.family}
+ {sem.verb ?? '—'}
+ {sem.sequence ?? 'pre'}
+ {intentStr}
+ {action.target}
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if tab === 'sema'}
+
+
+ sema
+ · events + perceptual signature
+
+
+ One event: commit-invoke fires when the user
+ activates a highlighted Item (Enter or click). Verb submit,
+ intent fulfill.
+
+
+
+
+ Name Family Verb Sequence Intent Play
+ {#each events as action (action.name)}
+ {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined}
+ {@const effectiveIntent = typeof intentDecl === 'string' ? intentDecl : undefined}
+
+ {action.name}
+ {action.semantic.family}
+ {action.semantic.verb ?? '—'}
+ {action.semantic.sequence ?? 'pre'}
+ {effectiveIntent ?? '—'}
+
+ {
+ const target = (stageRef?.querySelector('[data-command-item]') ?? stageRef) as HTMLElement | null;
+ if (!target) return;
+ void uix.events?.emit({
+ name: action.name,
+ family: action.semantic.family,
+ target,
+ ...(effectiveIntent ? { intent: effectiveIntent } : {})
+ });
+ }}
+ >▶ play
+
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if tab === 'recipe'}
+
+ Eidos recipe
+
+ Selectors at src/uix/eidos/components/command/command.css.
+ Inside <Command.Dialog> the dialog panel chrome
+ comes from dialog.css and the inner palette uses these
+ selectors.
+
+
+
+ Selector Source What it paints
+ [data-command] eidos Palette container — flex column, border, surface bg. [data-command][data-size] eidos Size variant — input + item heights, font-size. [data-command-input] morfo Search input row + divider. [data-command-list], [data-command-viewport] morfo Scrolling list. [data-command-item], [data-command-link-item] morfo Row — flex, padding, gap. [data-command-item][data-selected] morfo Highlighted row tint. [data-command-item-icon], [data-command-item-shortcut] eidos Item sub-part layout slots — icon fixed, shortcut auto-end. [data-command-group-heading] morfo Muted uppercase group label. [data-command-separator] morfo 1px divider between groups.
+
+
+ {/if}
+
+ {#if tab === 'a11y'}
+
+ Accessibility
+
+ Follows the APG combobox pattern with a listbox popup. Input has role="combobox"; List is role="listbox"; each Item is role="option".
+
+
+ Keyboard
+
+
+ Key Action
+ ArrowDown / ArrowUp Move highlight ±1 (or ±columns if columns > 1). ArrowRight / ArrowLeft In grid mode, move ±1 column (RTL inverts). Ctrl+N / Ctrl+J Next (vim binding, if vimBindings=true). Ctrl+P / Ctrl+K Previous (vim binding). Home / End First / last visible item. Enter Activate highlighted item — fires onSelect + commit-invoke. Escape Clear search (or close dialog if inside Command.Dialog). mod+k Toggle dialog open/close (if shortcut is configured).
+
+
ARIA contract
+
+
+ Part Attribute Value
+ input role "combobox" input aria-expanded "true" (always while palette is mounted) input aria-controls {``}
input aria-activedescendant {``} list role "listbox" item role "option" item aria-selected "true" (when highlighted) item aria-disabled "true" (when disabled)
+
+
+ {/if}
+