@adea-ai/ui 0.81.0 → 0.82.0

package/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/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/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/src/components/layout/sidebar-nav/index.ts

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

package/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/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/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/src/components/ui/input/index.ts

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

package/src/components/ui/input/input.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { createUniqueId, For, Show, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 
 /**
@@ -14,28 +14,45 @@ import { cn } from '#lib/utils'
  * Height comes from `h-control-md`; an input cannot be given a new height
  * without a new token, which is what keeps it aligned with Button and Select.
  */
-export function Input(props: ComponentProps<'input'>) {
-  const [local, rest] = splitProps(props, ['class', 'type'])
+export type InputProps = ComponentProps<'input'> & {
+  /** Native text suggestions; custom values remain valid and submit unchanged. */
+  suggestions?: readonly string[]
+}
+
+export function Input(props: InputProps) {
+  const [local, rest] = splitProps(props, ['class', 'type', 'list', 'suggestions'])
+  const suggestionsId = createUniqueId()
+  const listId = () => local.list ?? `input-suggestions-${suggestionsId}`
 
   return (
-    <input
-      data-slot="input"
-      type={local.type ?? 'text'}
-      class={cn(
-        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
-        'transition-[color,box-shadow,border-color] ease-out outline-none',
-        'placeholder:text-muted-foreground',
-        'selection:bg-primary selection:text-primary-foreground',
-        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
-        /* A pointer click on a text field is a typing affordance, so the ring
+    <>
+      <input
+        data-slot="input"
+        type={local.type ?? 'text'}
+        list={local.suggestions ? listId() : local.list}
+        class={cn(
+          'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+          'transition-[color,box-shadow,border-color] ease-out outline-none',
+          'placeholder:text-muted-foreground',
+          'selection:bg-primary selection:text-primary-foreground',
+          'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+          /* A pointer click on a text field is a typing affordance, so the ring
            appears where the user agent already matches :focus-visible. */
-        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-        'read-only:bg-surface-hover',
-        local.class
-      )}
-      {...rest}
-    />
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+          'read-only:bg-surface-hover',
+          local.class
+        )}
+        {...rest}
+      />
+      <Show when={local.suggestions}>
+        {(suggestions) => (
+          <datalist id={listId()}>
+            <For each={suggestions()}>{(value) => <option value={value} />}</For>
+          </datalist>
+        )}
+      </Show>
+    </>
   )
 }

package/src/index.ts

@@ -95,6 +95,7 @@ export * from './components/theme'
 
 /* --- Composites ---------------------------------------------------------- */
 export * from './components/composites/account-menu'
+export * from './components/composites/action-button'
 export * from './components/composites/list-row'
 export * from './components/composites/settings'
 export * from './components/composites/stat'