@adea-ai/ui 0.81.1 → 0.82.0

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'