@adea-ai/ui 0.89.2 → 0.94.0

package/src/components/composites/tree/tree.tsx

@@ -0,0 +1,405 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { ChevronRight } from 'lucide-solid'
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createUniqueId,
+  onCleanup,
+  splitProps,
+  useContext,
+} from 'solid-js'
+import { cn } from '#lib/utils'
+import {
+  indexTreeItems,
+  treeNavigationAction,
+  type TreeItemDescriptor,
+  type TreeNavigationIndex,
+} from './tree-navigation'
+
+type TreeContextValue = {
+  idPrefix: string
+  activeId: () => string | null
+  index: () => TreeNavigationIndex
+  register: (id: string, element: HTMLDivElement) => void
+  unregister: (id: string, element: HTMLDivElement | undefined) => void
+  focusItem: (id: string) => void
+  noteFocus: (id: string) => void
+  activate: (id: string, event: Event) => void
+  onActiveIdChange: (id: string) => void
+}
+
+const TreeContext = createContext<TreeContextValue>()
+
+function useTreeContext() {
+  const tree = useContext(TreeContext)
+  if (!tree) throw new Error('[adea-ui]: TreeRow must be used inside Tree.')
+  return tree
+}
+
+type TreeAccessibleName =
+  | { 'aria-label': string; 'aria-labelledby'?: string }
+  | { 'aria-label'?: string; 'aria-labelledby': string }
+
+export type TreeProps = Omit<
+  ComponentProps<'div'>,
+  'children' | 'role' | 'tabIndex' | 'onKeyDown' | 'aria-label' | 'aria-labelledby'
+> &
+  TreeAccessibleName & {
+    /** Complete, ordered projection of currently visible (expanded) items. */
+    visibleItems: readonly TreeItemDescriptor[]
+    /** The host-owned identity of the row that currently owns roving focus. */
+    activeId: string | null
+    /** Called when keyboard or pointer navigation changes the active row. */
+    onActiveIdChange: (id: string) => void
+    /** Called for Left/Right expand and collapse requests. */
+    onExpand?: (id: string, expanded: boolean) => void
+    /** Called for Enter or pointer activation. Domain action stays host-owned. */
+    onActivate?: (id: string, event: Event) => void
+    /** Called for Space selection. Selection state stays host-owned. */
+    onSelectItem?: (id: string, event: Event) => void
+    /** Ask the host window to mount/reveal an item before focus moves to it. */
+    onRequestReveal?: (id: string) => void
+    /** Report a mounted row's border-box block size in CSS pixels for host range math. */
+    onRowSizeChange?: (id: string, blockSize: number) => void
+    /** Declares a multi-select tree to assistive technology. */
+    selectionMode?: 'single' | 'multiple'
+    children?: JSX.Element
+  }
+
+/**
+ * Tree.
+ *
+ * Supplies semantic and keyboard behavior for a tree whose host owns the
+ * visible projection, filesystem state, row window and domain actions. The
+ * mounted children can be a small virtualized window; `visibleItems` remains
+ * the complete ordered projection so keyboard movement and sibling positions
+ * do not depend on which rows currently exist in the DOM.
+ *
+ * Kobalte 0.13.14 has no Tree primitive, so this component implements the
+ * WAI-ARIA tree row navigation contract and leaves product state to callbacks.
+ */
+export function Tree(props: TreeProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'visibleItems',
+    'activeId',
+    'onActiveIdChange',
+    'onExpand',
+    'onActivate',
+    'onSelectItem',
+    'onRequestReveal',
+    'onRowSizeChange',
+    'selectionMode',
+    'children',
+  ])
+
+  const index = createMemo(() => indexTreeItems(local.visibleItems))
+  const effectiveActiveId = createMemo(() => {
+    const candidate = local.activeId
+    const visible = index()
+    return candidate !== null && visible.byId.has(candidate) ? candidate : (visible.ids[0] ?? null)
+  })
+  const idPrefix = `tree-${createUniqueId()}`
+  const rows = new Map<string, HTMLDivElement>()
+  const rowIdsByElement = new WeakMap<HTMLDivElement, string>()
+  let pendingFocusId: string | null = null
+  let requestedRevealId: string | null = null
+  let focusedId: string | null = null
+  let disposed = false
+  const rowSizeObserver =
+    typeof ResizeObserver === 'undefined'
+      ? undefined
+      : new ResizeObserver((entries) => {
+          if (disposed) return
+          for (const entry of entries) {
+            const id = rowIdsByElement.get(entry.target as HTMLDivElement)
+            const blockSize =
+              entry.borderBoxSize[0]?.blockSize ?? (entry.target as HTMLElement).offsetHeight
+            if (id !== undefined && Number.isFinite(blockSize) && blockSize > 0)
+              local.onRowSizeChange?.(id, blockSize)
+          }
+        })
+
+  onCleanup(() => {
+    disposed = true
+    rowSizeObserver?.disconnect()
+  })
+
+  const requestReveal = (id: string) => {
+    if (requestedRevealId === id) return
+    requestedRevealId = id
+    local.onRequestReveal?.(id)
+  }
+
+  const focusWhenMounted = (id: string) => {
+    queueMicrotask(() => {
+      if (pendingFocusId !== id || effectiveActiveId() !== id) return
+      const row = rows.get(id)
+      if (!row || typeof document === 'undefined') return
+      row.focus()
+      if (document.activeElement === row) pendingFocusId = null
+    })
+  }
+
+  const focusItem = (id: string) => {
+    pendingFocusId = id
+    local.onActiveIdChange(id)
+    if (rows.has(id)) requestedRevealId = null
+    else requestReveal(id)
+    focusWhenMounted(id)
+  }
+
+  const context: TreeContextValue = {
+    idPrefix,
+    activeId: effectiveActiveId,
+    index,
+    register: (id, element) => {
+      rows.set(id, element)
+      rowIdsByElement.set(element, id)
+      rowSizeObserver?.observe(element)
+      if (requestedRevealId === id) requestedRevealId = null
+      if (pendingFocusId === id) focusWhenMounted(id)
+    },
+    unregister: (id, element) => {
+      if (rows.get(id) !== element) return
+      const focusWasInside =
+        !disposed &&
+        Boolean(
+          element && typeof document !== 'undefined' && element.contains(document.activeElement)
+        )
+      rows.delete(id)
+      if (element) {
+        rowIdsByElement.delete(element)
+        rowSizeObserver?.unobserve(element)
+      }
+      if (requestedRevealId === id) requestedRevealId = null
+      if (focusWasInside) {
+        queueMicrotask(() => {
+          const fallbackId = effectiveActiveId()
+          if (!disposed && fallbackId !== null && pendingFocusId !== fallbackId)
+            focusItem(fallbackId)
+        })
+      }
+    },
+    focusItem,
+    noteFocus: (id) => {
+      focusedId = id
+    },
+    activate: (id, event) => local.onActivate?.(id, event),
+    onActiveIdChange: local.onActiveIdChange,
+  }
+
+  // A filtered or removed active ID falls back to the first visible item. This
+  // keeps one treeitem in the sequential tab order while notifying the host.
+  createEffect(() => {
+    const activeId = effectiveActiveId()
+    if (activeId === null) return
+    // If a host filter removes the row that had DOM focus, move focus to the
+    // same projection fallback that now owns the roving tab stop.
+    if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {
+      focusItem(activeId)
+    } else if (local.activeId !== activeId) {
+      local.onActiveIdChange(activeId)
+    }
+    // Preserve the active row in a caller-owned virtual window, including when
+    // the pane mounts with its saved active row outside the initial render range.
+    if (!rows.has(activeId)) requestReveal(activeId)
+    if (pendingFocusId === activeId) focusWhenMounted(activeId)
+  })
+
+  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {
+    if (event.defaultPrevented || isActionTarget(event.target, event.currentTarget)) return
+
+    const action = treeNavigationAction(index(), effectiveActiveId(), event.key)
+    if (!action) return
+    event.preventDefault()
+
+    switch (action.type) {
+      case 'focus':
+        focusItem(action.id)
+        break
+      case 'expand':
+        local.onExpand?.(action.id, action.expanded)
+        break
+      case 'activate':
+        local.onActivate?.(action.id, event)
+        break
+      case 'select':
+        local.onSelectItem?.(action.id, event)
+        break
+    }
+  }
+
+  return (
+    <TreeContext.Provider value={context}>
+      <div
+        {...rest}
+        role="tree"
+        aria-multiselectable={local.selectionMode === 'multiple' ? 'true' : undefined}
+        data-slot="tree"
+        class={cn('flex min-w-0 flex-col', local.class)}
+        onKeyDown={handleKeyDown}
+      >
+        {local.children}
+      </div>
+    </TreeContext.Provider>
+  )
+}
+
+export type TreeRowProps = Omit<
+  ComponentProps<'div'>,
+  | 'children'
+  | 'role'
+  | 'tabIndex'
+  | 'onClick'
+  | 'onFocus'
+  | 'onDoubleClick'
+  | 'style'
+  | 'aria-level'
+  | 'aria-expanded'
+  | 'aria-selected'
+  | 'aria-posinset'
+  | 'aria-setsize'
+> & {
+  item: TreeItemDescriptor
+  /** Host-owned selection state; omitted for non-selectable trees. */
+  selected?: boolean
+  leading?: JSX.Element
+  trailing?: JSX.Element
+  children: JSX.Element
+  onDoubleClick?: (id: string, event: MouseEvent & { currentTarget: HTMLDivElement }) => void
+}
+
+/**
+ * TreeRow.
+ *
+ * Keeps the donor's disclosure marker, leading file/folder affordance, primary
+ * label and trailing-action hierarchy while replacing the donor's button and
+ * runtime callbacks with a shared treeitem and host-owned slots/actions.
+ */
+export function TreeRow(props: TreeRowProps) {
+  const tree = useTreeContext()
+  const [local, rest] = splitProps(props, [
+    'class',
+    'item',
+    'selected',
+    'leading',
+    'trailing',
+    'children',
+    'onDoubleClick',
+    'ref',
+  ])
+
+  let row: HTMLDivElement | undefined
+  let registeredId: string | undefined
+  const id = () => local.item.id
+
+  onCleanup(() => tree.unregister(registeredId ?? id(), row))
+
+  const setRef = (element: HTMLDivElement) => {
+    row = element
+    registeredId = id()
+    tree.register(registeredId, element)
+  }
+
+  createEffect(() => {
+    const nextId = id()
+    if (!row || registeredId === nextId) return
+    if (registeredId !== undefined) tree.unregister(registeredId, row)
+    registeredId = nextId
+    tree.register(nextId, row)
+  })
+
+  const handleFocus = () => {
+    tree.noteFocus(id())
+    if (tree.activeId() !== id()) tree.onActiveIdChange(id())
+  }
+
+  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {
+    if (isActionTarget(event.target, event.currentTarget)) return
+    tree.focusItem(id())
+    tree.activate(id(), event)
+  }
+
+  const handleDoubleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {
+    if (isActionTarget(event.target, event.currentTarget)) return
+    local.onDoubleClick?.(id(), event)
+  }
+
+  const position = () => tree.index().positionById.get(id())
+
+  return (
+    <div
+      {...rest}
+      ref={composeRefs(setRef, () => local.ref)}
+      id={rest.id ?? `${tree.idPrefix}-item-${encodeURIComponent(id())}`}
+      role="treeitem"
+      aria-level={local.item.level}
+      aria-expanded={local.item.expandable ? (local.item.expanded ? 'true' : 'false') : undefined}
+      aria-selected={local.selected === undefined ? undefined : local.selected ? 'true' : 'false'}
+      aria-posinset={position()?.position}
+      aria-setsize={position()?.setSize}
+      tabIndex={tree.activeId() === id() ? 0 : -1}
+      data-tree-id={id()}
+      data-active={tree.activeId() === id() ? '' : undefined}
+      data-selected={local.selected ? '' : undefined}
+      data-expanded={local.item.expandable ? String(local.item.expanded) : undefined}
+      class={cn(
+        'group/tree-row flex min-h-row-sm w-full min-w-0 items-center gap-1.5 rounded-md pe-1.5 text-left text-sm outline-none transition-colors',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        {
+          'bg-primary-subtle text-foreground': local.selected,
+          'hover:bg-surface-hover': !local.selected,
+        },
+        local.class
+      )}
+      style={{ 'padding-inline-start': `${6 + Math.max(0, local.item.level - 1) * 12}px` }}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      onDblClick={handleDoubleClick}
+    >
+      <span class="flex size-3.5 shrink-0 items-center justify-center text-muted-foreground">
+        {local.item.expandable ? (
+          <ChevronRight
+            aria-hidden="true"
+            class={cn('size-3.5 transition-transform', local.item.expanded && 'rotate-90')}
+          />
+        ) : null}
+      </span>
+      {local.leading ? (
+        <span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+          {local.leading}
+        </span>
+      ) : null}
+      <span class="min-w-0 flex-1 truncate">{local.children}</span>
+      {local.trailing ? (
+        <span class="ms-auto flex shrink-0 items-center gap-1 text-muted-foreground">
+          {local.trailing}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+function isActionTarget(target: EventTarget | null, currentTarget: HTMLElement): boolean {
+  if (!(target instanceof Element) || target === currentTarget) return false
+  return Boolean(
+    target.closest(
+      'a, button, input, textarea, select, [contenteditable="true"], [role="button"], [data-tree-keyboard-stop]'
+    )
+  )
+}
+
+function composeRefs(
+  internal: (element: HTMLDivElement) => void,
+  external: () => ComponentProps<'div'>['ref']
+): (element: HTMLDivElement) => void {
+  return (element) => {
+    internal(element)
+    const ref = external()
+    if (typeof ref === 'function') ref(element)
+  }
+}
+
+export type { TreeItemDescriptor } from './tree-navigation'

package/src/components/conversation/message-composer.tsx

@@ -1,18 +1,30 @@
 import { CornerDownLeft, Paperclip, Send, X } from 'lucide-solid'
-import type { ComponentProps, JSX } from 'solid-js'
-import { Show, createSignal, splitProps } from 'solid-js'
+import type { ComponentProps, JSX, Ref } from 'solid-js'
+import { Show, createSignal, createUniqueId, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
+import { ActionButton } from '../composites/action-button/action-button'
 import { Button } from '../ui/button/button'
 import { Kbd } from '../ui/kbd/kbd'
 import { Spinner } from '../ui/spinner/spinner'
 import { Textarea } from '../ui/textarea/textarea'
 import { createComposerImeGuard } from './ime-guard'
 
+function invokeEventHandler(handler: unknown, event: Event) {
+  if (Array.isArray(handler)) {
+    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]
+    callback(data, event)
+  } else if (typeof handler === 'function') {
+    const callback = handler as (event: Event) => void
+    callback(event)
+  }
+}
+
 /**
  * MessageComposer.
  *
  * The field a message is written in. It is a form, and it behaves like one: Enter
- * sends, Shift+Enter breaks the line, Escape clears the error.
+ * sends, Shift+Enter breaks the line, Escape clears the error from anywhere in
+ * the composer unless a nested control or an active IME already owns the key.
  *
  * ## What it does not know
  *
@@ -49,7 +61,7 @@ export type MessageComposerProps = Omit<ComponentProps<'form'>, 'onSubmit'> & {
   placeholder?: string
   /** Disable the whole composer, e.g. while the channel is read-only. */
   disabled?: boolean
-  /** Label the send action for a context other than a message, e.g. a reply. */
+  /** Accessible name and tooltip for the action, e.g. "Reply". */
   submitLabel?: string
   /** Show the keyboard hint under the field. */
   showHint?: boolean
@@ -61,6 +73,20 @@ export type MessageComposerProps = Omit<ComponentProps<'form'>, 'onSubmit'> & {
   menu?: JSX.Element
   /** The reply target, drawn as a strip above the field. */
   replyTo?: { label: string; onDismiss: () => void }
+  /** Ref to the actual message textarea, for host focus and selection behavior. */
+  inputRef?: Ref<HTMLTextAreaElement>
+  /** Stable host-owned id for the actual textarea. */
+  inputId?: string
+  /** Accessible name for the actual textarea. Defaults to "Message" or "Reply message". */
+  inputLabel?: string
+  /** Additional help text associated with the actual textarea. */
+  inputDescription?: string
+  /** Existing host description id, combined with `inputDescription` when supplied. */
+  inputDescribedBy?: string
+  /** Comfortable uses the shared 4rem minimum and 12rem maximum field heights. */
+  inputSize?: 'default' | 'comfortable'
+  /** The shared resize behavior for the actual textarea. */
+  inputResize?: 'vertical' | 'none' | 'both'
 }
 
 export function MessageComposer(props: MessageComposerProps) {
@@ -77,11 +103,27 @@ export function MessageComposer(props: MessageComposerProps) {
     'trailing',
     'menu',
     'replyTo',
+    'inputRef',
+    'inputId',
+    'inputLabel',
+    'inputDescription',
+    'inputDescribedBy',
+    'inputSize',
+    'inputResize',
+    'onKeyDown',
   ])
 
   const [sending, setSending] = createSignal(false)
   const [error, setError] = createSignal<string | null>(null)
   const ime = createComposerImeGuard()
+  const descriptionId = `message-composer-help-${createUniqueId()}`
+  const describedBy = () =>
+    [local.inputDescribedBy, local.inputDescription ? descriptionId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined
+  const actionLabel = () => local.submitLabel ?? 'Send message'
+  const pendingLabel = () =>
+    `Sending ${local.submitLabel ? local.submitLabel.toLowerCase() : 'message'}`
 
   const canSend = () => local.value.trim().length > 0 && !local.disabled && !sending()
 
@@ -102,10 +144,6 @@ export function MessageComposer(props: MessageComposerProps) {
 
   const onKeyDown: JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent> = (event) => {
     if (event.defaultPrevented) return
-    if (event.key === 'Escape' && error()) {
-      setError(null)
-      return
-    }
     if (event.key !== 'Enter') return
     // Shift breaks the line; a bare Enter, or a modified one, sends.
     if (event.shiftKey && !event.metaKey && !event.ctrlKey) return
@@ -113,6 +151,22 @@ export function MessageComposer(props: MessageComposerProps) {
     void send()
   }
 
+  const onFormKeyDown: JSX.EventHandlerUnion<HTMLFormElement, KeyboardEvent> = (event) => {
+    invokeEventHandler(local.onKeyDown, event)
+    if (
+      event.defaultPrevented ||
+      event.key !== 'Escape' ||
+      !error() ||
+      event.isComposing ||
+      event.keyCode === 229
+    ) {
+      return
+    }
+    setError(null)
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
   return (
     <form
       data-slot="message-composer"
@@ -121,6 +175,7 @@ export function MessageComposer(props: MessageComposerProps) {
         event.preventDefault()
         void send()
       }}
+      onKeyDown={onFormKeyDown}
       {...rest}
     >
       <Show when={local.menu}>
@@ -131,15 +186,16 @@ export function MessageComposer(props: MessageComposerProps) {
         {(reply) => (
           <div class="bg-muted text-muted-foreground flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs">
             <span class="min-w-0 flex-1 truncate">Replying to {reply().label}</span>
-            <Button
+            <ActionButton
               type="button"
               variant="ghost"
               size="icon-2xs"
               aria-label="Cancel reply"
+              tooltip="Cancel reply"
               onClick={() => reply().onDismiss()}
             >
               <X />
-            </Button>
+            </ActionButton>
           </div>
         )}
       </Show>
@@ -153,6 +209,8 @@ export function MessageComposer(props: MessageComposerProps) {
         )}
       >
         <Textarea
+          ref={local.inputRef}
+          id={local.inputId}
           onCompositionStart={ime.onCompositionStart}
           onCompositionEnd={ime.onCompositionEnd}
           onFocus={ime.onFocus}
@@ -163,24 +221,37 @@ export function MessageComposer(props: MessageComposerProps) {
           placeholder={local.placeholder ?? 'Write a message…'}
           disabled={local.disabled}
           rows={1}
-          aria-label={local.submitLabel ? `${local.submitLabel} message` : 'Message'}
-          class="min-h-9 resize-none border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
+          aria-label={
+            local.inputLabel ?? (local.submitLabel ? `${local.submitLabel} message` : 'Message')
+          }
+          aria-describedby={describedBy()}
+          variant="composer"
+          size={local.inputSize ?? 'comfortable'}
+          resize={local.inputResize ?? 'vertical'}
         />
+        <Show when={local.inputDescription}>
+          {(description) => (
+            <span id={descriptionId} class="sr-only">
+              {description()}
+            </span>
+          )}
+        </Show>
 
         <div class="flex items-center gap-1">
           <Show when={local.leading}>{local.leading}</Show>
           <div class="ms-auto flex items-center gap-1">
             <Show when={local.trailing}>{local.trailing}</Show>
-            <Button
+            <ActionButton
               type="submit"
               size="icon-sm"
               disabled={!canSend()}
-              aria-label={sending() ? 'Sending message' : 'Send message'}
+              aria-label={sending() ? pendingLabel() : actionLabel()}
+              tooltip={actionLabel()}
             >
               <Show when={sending()} fallback={<Send />}>
                 <Spinner size="sm" label={false} class="text-primary-foreground" />
               </Show>
-            </Button>
+            </ActionButton>
           </div>
         </div>
       </div>
@@ -195,11 +266,20 @@ export function MessageComposer(props: MessageComposerProps) {
 
       {/* A live region, so the outcome is announced without moving focus out of the
           field the user is typing in. */}
-      <div aria-live="polite" class="min-h-0">
-        <Show when={error()}>
-          {(message) => (
-            <p class="text-foreground border-s-2 border-destructive ps-2 text-xs">{message()}</p>
-          )}
+      <div role="status" aria-live="polite" class="min-h-0">
+        <Show
+          when={sending()}
+          fallback={
+            <Show when={error()}>
+              {(message) => (
+                <p class="text-foreground border-s-2 border-destructive ps-2 text-xs">
+                  {message()}
+                </p>
+              )}
+            </Show>
+          }
+        >
+          {pendingLabel()}…
         </Show>
       </div>
     </form>
@@ -220,17 +300,18 @@ export function ComposerAttachmentButton(
   const [local, rest] = splitProps(props, ['count', 'open', 'children'])
 
   return (
-    <Button
+    <ActionButton
       type="button"
       variant="ghost"
       size="icon-sm"
       aria-label={local.count ? `${local.count} attached, add an attachment` : 'Add an attachment'}
       aria-expanded={local.open}
+      tooltip="Add an attachment"
       class="text-muted-foreground"
       {...rest}
     >
       {local.children ?? <Paperclip />}
-    </Button>
+    </ActionButton>
   )
 }