@adea-ai/ui 0.81.1 → 0.82.0

package/dist/r/src/components/composites/account-menu/account-menu.tsx

@@ -9,10 +9,10 @@ import {
   Smartphone,
   UserRound,
 } from 'lucide-solid'
-import type { JSX } from 'solid-js'
-import { For, Show, splitProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
+import { For, Show, createSignal, onCleanup, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
-import { Button } from '../../ui/button/button'
+import { Button, type ButtonProps } from '../../ui/button/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,6 +21,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip/tooltip'
 
 /**
  * AccountMenu.
@@ -49,10 +50,14 @@ export type AccountMenuItem = {
   /** Render only on this platform. Omit to always render. */
   platform?: 'desktop' | 'web'
   onSelect?: () => void
+  /** Run after the menu's close-focus cycle, with its trigger as a stable opener. */
+  onSelectAfterClose?: (trigger: HTMLButtonElement | undefined) => void
 }
 
 export type AccountMenuProps = {
   class?: string
+  /** The trigger size. Icon-only menus default to the standard icon size. */
+  size?: ButtonProps['size']
   /** The entries above the separator. */
   items: readonly AccountMenuItem[]
   /** Which platform this is rendered on, for items that declare one. */
@@ -81,6 +86,7 @@ const FALLBACK_ICONS: Record<string, typeof Settings2> = {
 export function AccountMenu(props: AccountMenuProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'size',
     'items',
     'platform',
     'authenticated',
@@ -91,55 +97,105 @@ export function AccountMenu(props: AccountMenuProps) {
     'onIntent',
   ])
 
+  let trigger: HTMLButtonElement | undefined
+  let pendingAfterClose:
+    | { callback: NonNullable<AccountMenuItem['onSelectAfterClose']> }
+    | undefined
+  let scheduledAfterClose:
+    | { callback: NonNullable<AccountMenuItem['onSelectAfterClose']> }
+    | undefined
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [tooltipOpen, setTooltipOpen] = createSignal(false)
+
+  onCleanup(() => {
+    pendingAfterClose = undefined
+    scheduledAfterClose = undefined
+  })
+
   const visible = () =>
     local.items.filter((item) => !item.platform || item.platform === (local.platform ?? 'desktop'))
 
   return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger
-        as={Button}
-        variant="ghost"
-        size="icon-md"
-        class={cn('text-muted-foreground', local.class)}
-        aria-label={local.label ?? 'Account and settings'}
-        onFocus={() => local.onIntent?.()}
-        onPointerEnter={() => local.onIntent?.()}
-        {...rest}
+    <Tooltip open={tooltipOpen()} onOpenChange={(open) => setTooltipOpen(open && !menuOpen())}>
+      <DropdownMenu
+        modal={false}
+        onOpenChange={(open) => {
+          setMenuOpen(open)
+          if (open) setTooltipOpen(false)
+        }}
       >
-        <UserRound aria-hidden="true" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent side="top" align="start" class="min-w-56">
-        <DropdownMenuGroup>
-          <For each={visible()}>
-            {(item) => (
-              <DropdownMenuItem
-                disabled={item.disabled}
-                onSelect={() => item.onSelect?.()}
-                shortcut={item.shortcut}
-              >
-                {item.icon ?? renderFallbackIcon(item.id)}
-                <span>{item.label}</span>
-              </DropdownMenuItem>
-            )}
-          </For>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem
-            disabled={local.busy}
-            onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
-          >
-            <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
-              <LogOut aria-hidden="true" />
-            </Show>
-            <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        <TooltipTrigger
+          as={AccountMenuButton}
+          ref={(element: HTMLButtonElement) => (trigger = element)}
+          variant="ghost"
+          size={local.size ?? 'icon-md'}
+          class={cn('text-muted-foreground', local.class)}
+          aria-label={local.label ?? 'Account and settings'}
+          onFocus={() => local.onIntent?.()}
+          onPointerEnter={() => local.onIntent?.()}
+          {...rest}
+        >
+          <UserRound aria-hidden="true" />
+        </TooltipTrigger>
+        <TooltipContent placement="top">{local.label ?? 'Account and settings'}</TooltipContent>
+        <DropdownMenuContent
+          placement="top-start"
+          class="min-w-56 max-h-(--kb-popper-available-height) overflow-x-hidden overflow-y-auto"
+          onCloseAutoFocus={(event) => {
+            const selection = pendingAfterClose
+            pendingAfterClose = undefined
+            if (!selection) return
+
+            event.preventDefault()
+            scheduledAfterClose = selection
+            queueMicrotask(() => {
+              if (scheduledAfterClose !== selection) return
+              scheduledAfterClose = undefined
+              selection.callback(trigger)
+            })
+          }}
+        >
+          <DropdownMenuGroup>
+            <For each={visible()}>
+              {(item) => (
+                <DropdownMenuItem
+                  disabled={item.disabled}
+                  onSelect={() => {
+                    pendingAfterClose = item.onSelectAfterClose
+                      ? { callback: item.onSelectAfterClose }
+                      : undefined
+                    item.onSelect?.()
+                  }}
+                  shortcut={item.shortcut}
+                >
+                  {item.icon ?? renderFallbackIcon(item.id)}
+                  <span>{item.label}</span>
+                </DropdownMenuItem>
+              )}
+            </For>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              disabled={local.busy}
+              onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
+            >
+              <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
+                <LogOut aria-hidden="true" />
+              </Show>
+              <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Tooltip>
   )
 }
 
+function AccountMenuButton(props: ComponentProps<typeof Button>) {
+  return <DropdownMenuTrigger as={Button} {...props} />
+}
+
 /**
  * A known item id gets its conventional glyph, so a caller that only wants the
  * standard menu does not have to import six icons to get it.

package/dist/r/src/components/composites/action-button/action-button.tsx

@@ -0,0 +1,139 @@
+import { Show, splitProps, type ComponentProps, type JSX, type ValidComponent } from 'solid-js'
+import { Button, type ButtonProps } from '../../ui/button'
+import { Spinner } from '../../ui/spinner'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
+
+/**
+ * ActionButton.
+ *
+ * A Button with optional explanatory tooltip and busy feedback. Use it for a
+ * simple action that needs these states; actions with product-specific rules
+ * should compose Button directly.
+ *
+ * The tooltip trigger renders the polymorphic Button itself. A disabled native
+ * control cannot receive pointer or keyboard events. When a tooltip is set,
+ * disabled actions therefore use focusable `aria-disabled` semantics and guard
+ * activation; without a tooltip, native buttons retain native disabling.
+ * Custom polymorphic components must forward aria, event, and href props for
+ * these guarantees to apply.
+ */
+export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {
+  /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */
+  tooltip?: string
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /** Disables the action and announces the busy label through a polite status region. */
+  busy?: boolean
+  /** The activity announced while busy. The Button's accessible name stays unchanged. */
+  busyLabel?: string
+}
+
+function guardedClick(handler: unknown, disabled: () => boolean) {
+  return (event: MouseEvent) => {
+    if (disabled()) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      return
+    }
+
+    if (Array.isArray(handler)) {
+      const [callback, data] = handler as [(data: unknown, event: MouseEvent) => void, unknown]
+      callback(data, event)
+    } else if (typeof handler === 'function') {
+      const callback = handler as (event: MouseEvent) => void
+      callback(event)
+    }
+  }
+}
+
+type ButtonTargetProps<T extends ValidComponent = 'button'> = Omit<ButtonProps<T>, 'as'> & {
+  actionAs?: T
+}
+
+/** Adapter keeps TooltipTrigger's `as` separate from Button's polymorphic `as`. */
+function ButtonTarget<T extends ValidComponent = 'button'>(props: ButtonTargetProps<T>) {
+  const [local, rest] = splitProps(props as ButtonTargetProps, ['actionAs'])
+  const PolymorphicButton = Button as (targetProps: ButtonProps<T>) => JSX.Element
+  return <PolymorphicButton as={(local.actionAs ?? 'button') as T} {...(rest as ButtonProps<T>)} />
+}
+
+export function ActionButton<T extends ValidComponent = 'button'>(props: ActionButtonProps<T>) {
+  const [local, rest] = splitProps(props as ActionButtonProps, [
+    'as',
+    'variant',
+    'size',
+    'class',
+    'children',
+    'disabled',
+    'aria-busy',
+    'tooltip',
+    'tooltipSide',
+    'busy',
+    'busyLabel',
+  ])
+  const busy = () => local.busy ?? false
+  const disabled = () => busy() || !!local.disabled
+  const busyStatus = () => local.busyLabel ?? 'Working'
+  const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture
+  const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element
+  const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element
+
+  const buttonProps = () => ({
+    ...rest,
+    variant: local.variant,
+    size: local.size,
+    class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']
+      .filter(Boolean)
+      .join(' '),
+    disabled: disabled() && !local.tooltip,
+    'aria-disabled': disabled() ? true : rest['aria-disabled'],
+    tabIndex: local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : rest.tabIndex,
+    role: local.as === 'a' && disabled() ? 'link' : rest.role,
+    href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,
+    'aria-busy': busy() || local['aria-busy'],
+    onClick: guardedClick(rest.onClick, disabled),
+    onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,
+    'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),
+    'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),
+  })
+
+  const contents = () => (
+    <>
+      <Show when={busy()}>
+        <Spinner size="sm" label={false} aria-hidden="true" data-icon="inline-start" />
+      </Show>
+      {local.children}
+    </>
+  )
+
+  return (
+    <>
+      <Show
+        when={local.tooltip}
+        fallback={
+          <PolymorphicButton
+            as={(local.as ?? 'button') as T}
+            {...(buttonProps() as unknown as ButtonProps<T>)}
+          >
+            {contents()}
+          </PolymorphicButton>
+        }
+      >
+        <Tooltip>
+          <TooltipTrigger
+            as={PolymorphicButtonTarget}
+            {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}
+            actionAs={(local.as ?? 'button') as T}
+          >
+            {contents()}
+          </TooltipTrigger>
+          <TooltipContent side={local.tooltipSide}>{local.tooltip}</TooltipContent>
+        </Tooltip>
+      </Show>
+      <Show when={busy()}>
+        <span role="status" aria-live="polite" class="visually-hidden">
+          {busyStatus()}
+        </span>
+      </Show>
+    </>
+  )
+}

package/dist/r/src/components/composites/action-button/index.ts

@@ -0,0 +1,2 @@
+/** A shared Button with optional tooltip and busy-state feedback. */
+export { ActionButton, type ActionButtonProps } from './action-button'

package/dist/r/src/components/conversation/thread-panel.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { cn } from '../../lib/utils'
 import { Button } from '../ui/button/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip/tooltip'
 
 /**
  * ThreadPanel.
@@ -26,6 +27,8 @@ export type ThreadPanelProps = ComponentProps<'aside'> & {
   root?: JSX.Element
   /** The composer for a reply. */
   composer?: JSX.Element
+  /** Host actions, such as marking the thread unread, before the close control. */
+  headerActions?: JSX.Element
   onClose?: () => void
 }
 
@@ -36,6 +39,7 @@ export function ThreadPanel(props: ThreadPanelProps) {
     'count',
     'root',
     'composer',
+    'headerActions',
     'onClose',
     'children',
   ])
@@ -45,7 +49,7 @@ export function ThreadPanel(props: ThreadPanelProps) {
       data-slot="thread-panel"
       aria-label={`Thread: ${local.label}`}
       class={cn(
-        'bg-surface flex h-full w-96 shrink-0 flex-col border-s border-border',
+        'bg-surface flex h-full w-96 max-w-full shrink-0 flex-col border-s border-border',
         local.class
       )}
       {...rest}
@@ -59,17 +63,23 @@ export function ThreadPanel(props: ThreadPanelProps) {
             </span>
           </Show>
         </div>
-        <Show when={local.onClose}>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label="Close thread"
-            class="ms-auto text-muted-foreground"
-            onClick={() => local.onClose?.()}
-          >
-            <X />
-          </Button>
-        </Show>
+        <div class="ms-auto flex shrink-0 items-center gap-1">
+          {local.headerActions}
+          <Show when={local.onClose}>
+            <Tooltip>
+              <TooltipTrigger
+                as={Button}
+                variant="ghost"
+                size="icon-sm"
+                aria-label="Close thread"
+                onClick={() => local.onClose?.()}
+              >
+                <X />
+              </TooltipTrigger>
+              <TooltipContent>Close thread</TooltipContent>
+            </Tooltip>
+          </Show>
+        </div>
       </header>
 
       <Show when={local.root}>

package/dist/r/src/components/layout/sidebar-nav/index.ts

@@ -11,4 +11,5 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavTitleProps,
 } from './sidebar-nav'

package/dist/r/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -56,13 +56,19 @@ export function SidebarNavHeader(props: ComponentProps<'div'>) {
   )
 }
 
-export function SidebarNavTitle(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export type SidebarNavTitleProps<T extends ValidComponent = 'div'> = PolymorphicProps<
+  T,
+  { class?: string }
+>
+
+export function SidebarNavTitle<T extends ValidComponent = 'div'>(props: SidebarNavTitleProps<T>) {
+  const [local, rest] = splitProps(props as SidebarNavTitleProps, ['class'])
   return (
-    <div
+    <Polymorphic
+      as="div"
       data-slot="sidebar-nav-title"
       class={cn('truncate text-sm font-semibold tracking-tight', local.class)}
-      {...rest}
+      {...(rest as ComponentProps<'div'>)}
     />
   )
 }
@@ -105,6 +111,8 @@ export function SidebarNavSection(
     count?: number
     /** A control at the trailing edge of the heading row. */
     action?: JSX.Element
+    /** Semantic heading element for a host's section hierarchy. */
+    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   }
 ) {
   const [local, rest] = splitProps(props, [
@@ -114,6 +122,7 @@ export function SidebarNavSection(
     'defaultOpen',
     'count',
     'action',
+    'headingAs',
     'children',
   ])
   const [open, setOpen] = createSignal(local.defaultOpen ?? true)
@@ -138,25 +147,24 @@ export function SidebarNavSection(
   return (
     <div data-slot="sidebar-nav-section" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>
       <div class="group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60">
-        <Show
-          when={local.collapsible}
-          fallback={
-            <div class="flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase">
-              {heading}
-            </div>
-          }
+        <Polymorphic
+          as={local.headingAs ?? 'div'}
+          aria-label={local.headingAs ? local.label : undefined}
+          class="flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
         >
-          <button
-            type="button"
-            aria-expanded={open()}
-            onClick={() => setOpen((value) => !value)}
-            class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
-          >
-            {heading}
-          </button>
-        </Show>
+          <Show when={local.collapsible} fallback={heading}>
+            <button
+              type="button"
+              aria-expanded={open()}
+              onClick={() => setOpen((value) => !value)}
+              class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
+            >
+              {heading}
+            </button>
+          </Show>
+        </Polymorphic>
         <Show when={local.action}>
-          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100">
+          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
             {local.action}
           </span>
         </Show>

package/dist/r/src/components/ui/board/board.tsx

@@ -1,4 +1,13 @@
-import { createMemo, createSignal, For, Show, splitProps, type JSX } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  onCleanup,
+  Show,
+  splitProps,
+  type JSX,
+} from 'solid-js'
 import { cva, type VariantProps } from '../../../lib/variants'
 import { cn } from '../../../lib/utils'
 
@@ -88,6 +97,50 @@ export function Board<T>(props: BoardProps<T>) {
   const [dragging, setDragging] = createSignal<T | null>(null)
   const [overColumn, setOverColumn] = createSignal<string | null>(null)
   const [announcement, setAnnouncement] = createSignal('')
+  const cardElements = new Map<string, HTMLElement>()
+  const [pendingFocus, setPendingFocus] = createSignal<{
+    itemId: string
+    columnId: string
+    source: HTMLElement
+  } | null>(null)
+  const cancelOnPointer = () => setPendingFocus(null)
+
+  // A controlled move can settle after a server response. Restore only the
+  // focus that belonged to the moved card; another focus action cancels it.
+  createEffect(() => {
+    const pending = pendingFocus()
+    if (!pending) return
+    const document = pending.source.ownerDocument
+    const cancelOnFocus = (event: FocusEvent) => {
+      if (!pending.source.contains(event.target as Node)) setPendingFocus(null)
+    }
+    document.addEventListener('focusin', cancelOnFocus)
+    document.addEventListener('pointerdown', cancelOnPointer)
+    onCleanup(() => {
+      document.removeEventListener('focusin', cancelOnFocus)
+      document.removeEventListener('pointerdown', cancelOnPointer)
+    })
+  })
+
+  createEffect(() => {
+    const pending = pendingFocus()
+    if (!pending) return
+    const moved = local.items.find((item) => local.itemId(item) === pending.itemId)
+    if (!moved || local.itemColumn(moved) !== pending.columnId) return
+    queueMicrotask(() => {
+      if (pendingFocus() !== pending) return
+      const target = cardElements.get(pending.itemId)
+      setPendingFocus(null)
+      if (target?.isConnected) target.focus()
+    })
+  })
+
+  const prepareFocus = (item: T, columnId: string, source?: HTMLElement) => {
+    const card = source ?? cardElements.get(local.itemId(item))
+    if (card?.contains(card.ownerDocument.activeElement)) {
+      setPendingFocus({ itemId: local.itemId(item), columnId, source: card })
+    }
+  }
 
   const byColumn = createMemo(() => {
     const grouped = new Map<string, T[]>()
@@ -106,9 +159,11 @@ export function Board<T>(props: BoardProps<T>) {
   const drop = (column: BoardColumn) => {
     const item = dragging()
     const from = item ? local.itemColumn(item) : null
+    const accepted = accepts(column)
     setDragging(null)
     setOverColumn(null)
-    if (!item || !from || from === column.id || !accepts(column)) return
+    if (!item || !from || from === column.id || !accepted) return
+    prepareFocus(item, column.id)
     local.onMove({ itemId: local.itemId(item), from, to: column.id })
   }
 
@@ -117,11 +172,12 @@ export function Board<T>(props: BoardProps<T>) {
    * thing within its container" that does not collide with scrolling or with the
    * text caret, and it is the same chord a browser tab or a spreadsheet uses.
    */
-  const moveByKeyboard = (item: T, direction: -1 | 1) => {
+  const moveByKeyboard = (item: T, direction: -1 | 1, source: HTMLElement) => {
     const from = local.itemColumn(item)
     const index = local.columns.findIndex((column) => column.id === from)
-    const candidates = local.columns.slice(index + direction)
-    const ordered = direction === 1 ? candidates : candidates.toReversed()
+    if (index < 0) return
+    const ordered =
+      direction === 1 ? local.columns.slice(index + 1) : local.columns.slice(0, index).toReversed()
     const target = ordered.find(
       (column) => !column.disabled && local.canDrop(item, from, column.id)
     )
@@ -129,6 +185,7 @@ export function Board<T>(props: BoardProps<T>) {
       setAnnouncement(`No column after ${from} accepts this item`)
       return
     }
+    prepareFocus(item, target.id, source)
     local.onMove({ itemId: local.itemId(item), from, to: target.id })
     setAnnouncement(`Moved to ${target.label}`)
   }
@@ -185,6 +242,13 @@ export function Board<T>(props: BoardProps<T>) {
                     }
                     return (
                       <article
+                        ref={(element) => {
+                          const id = local.itemId(item)
+                          cardElements.set(id, element)
+                          onCleanup(() => {
+                            if (cardElements.get(id) === element) cardElements.delete(id)
+                          })
+                        }}
                         class={cn(
                           'rounded-md border border-border bg-card text-sm shadow-xs',
                           cardDragState[isDragging() ? 'dragging' : 'idle']
@@ -203,7 +267,11 @@ export function Board<T>(props: BoardProps<T>) {
                           if (!(event.ctrlKey || event.metaKey)) return
                           if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
                           event.preventDefault()
-                          moveByKeyboard(item, event.key === 'ArrowRight' ? 1 : -1)
+                          moveByKeyboard(
+                            item,
+                            event.key === 'ArrowRight' ? 1 : -1,
+                            event.currentTarget
+                          )
                         }}
                       >
                         {local.children(item, { dragging: isDragging() })}

package/dist/r/src/components/ui/command/command.tsx

@@ -16,6 +16,12 @@ import { createEffect, createSignal, splitProps } from 'solid-js'
 import { menuItem } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
+// cmdk emits data-disabled="false" on enabled items; Kobalte omits it.
+// Presence selectors would dim and disable every command in an app palette.
+const commandItem = menuItem
+  .replace('data-[disabled]:pointer-events-none', '')
+  .replace('data-[disabled]:opacity-50', '')
+
 /**
  * Command.
  *
@@ -181,8 +187,9 @@ export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
   return (
     <CmdkItem
       class={cn(
-        menuItem,
-        'data-[selected=true]:bg-surface-hover data-[selected=true]:text-foreground',
+        commandItem,
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+        'text-popover-foreground data-[selected=true]:bg-surface-hover data-[selected=true]:text-popover-foreground',
         local.class
       )}
       {...rest}
@@ -205,14 +212,18 @@ export function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {
   )
 }
 
-/** The keyboard hint a palette item usually carries. */
+/**
+ * The keyboard hint a palette item usually carries.
+ * Muted canvas text can fail contrast on a raised or selected command row;
+ * hierarchy comes from its size and monospace face, with the row's readable ink.
+ */
 export function CommandShortcut(props: {
   class?: string
   children?: ComponentProps<'span'>['children']
 }) {
   return (
     <span
-      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
+      class={cn('text-popover-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
     >
       {props.children}
     </span>

package/dist/r/src/components/ui/input/index.ts

@@ -1 +1 @@
-export { Input } from './input'
+export { Input, type InputProps } from './input'