@adea-ai/ui 0.89.1 → 0.93.2

package/dist/lib/variants.js

@@ -1,4 +1,4 @@
-import { cva } from "class-variance-authority";
+import { cva as cva$1 } from "class-variance-authority";
 //#region src/lib/variants.ts
 /**
 * The shared control-size ladder, in Tailwind height utilities.
@@ -44,6 +44,6 @@ var controlInteractive = "transition-colors ease-out outline-none focus-visible:
 /** The shared focus treatment for surfaces that are not focusable controls. */
 var surfaceInteractive = "transition-colors ease-out outline-none";
 //#endregion
-export { controlInteractive, controlSize, controlSizeIcon, controlSizes, cva, surfaceInteractive };
+export { controlInteractive, controlSize, controlSizeIcon, controlSizes, cva$1 as cva, surfaceInteractive };
 
 //# sourceMappingURL=variants.js.map

package/dist/r/conversation.json

@@ -8,6 +8,7 @@
     "lucide-solid@^1.48.0"
   ],
   "registryDependencies": [
+    "@adea-ai/ui/action-button",
     "@adea-ai/ui/button",
     "@adea-ai/ui/button-group",
     "@adea-ai/ui/code-block",

package/dist/r/list-row.json

@@ -16,6 +16,11 @@
       "type": "registry:ui",
       "target": "components/composites/list-row/index.ts"
     },
+    {
+      "path": "src/components/composites/list-row/list-row-control.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/list-row/list-row-control.tsx"
+    },
     {
       "path": "src/components/composites/list-row/list-row.tsx",
       "type": "registry:ui",

package/dist/r/registry.json

@@ -1374,7 +1374,9 @@
       "type": "registry:ui",
       "title": "Textarea",
       "description": "",
-      "dependencies": [],
+      "dependencies": [
+        "class-variance-authority@^0.7.1"
+      ],
       "registryDependencies": [
         "lib"
       ],
@@ -1740,7 +1742,9 @@
       "type": "registry:ui",
       "title": "Top Bar",
       "description": "",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
       "registryDependencies": [
         "lib"
       ],
@@ -1946,6 +1950,11 @@
           "type": "registry:ui",
           "target": "components/composites/list-row/index.ts"
         },
+        {
+          "path": "src/components/composites/list-row/list-row-control.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/list-row/list-row-control.tsx"
+        },
         {
           "path": "src/components/composites/list-row/list-row.tsx",
           "type": "registry:ui",
@@ -2011,6 +2020,35 @@
         }
       ]
     },
+    {
+      "name": "tree",
+      "type": "registry:ui",
+      "title": "Tree",
+      "description": "Keyboard-accessible tree rows with virtualization-aware focus handoff.",
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/tree/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/tree/index.ts"
+        },
+        {
+          "path": "src/components/composites/tree/tree-navigation.ts",
+          "type": "registry:ui",
+          "target": "components/composites/tree/tree-navigation.ts"
+        },
+        {
+          "path": "src/components/composites/tree/tree.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/tree/tree.tsx"
+        }
+      ]
+    },
     {
       "name": "update-dialog",
       "type": "registry:ui",
@@ -2072,6 +2110,7 @@
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/action-button",
         "@adea-ai/ui/button",
         "@adea-ai/ui/button-group",
         "@adea-ai/ui/code-block",

package/dist/r/src/components/composites/list-row/index.ts

@@ -1 +1,2 @@
 export { ListGroup, ListRow, type ListRowProps } from './list-row'
+export { ListRowControl, type ListRowControlProps } from './list-row-control'

package/dist/r/src/components/composites/list-row/list-row-control.tsx

@@ -0,0 +1,108 @@
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
+import { Polymorphic } from '@kobalte/core/polymorphic'
+import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicProps<
+  T,
+  {
+    class?: string
+    /** Marks the row as current. Sets `aria-current` for a link row. */
+    selected?: boolean
+    /** Draw the row at the compact height. */
+    dense?: boolean
+    /** Leading slot: an avatar, an icon, a checkbox. */
+    leading?: JSX.Element
+    /** Trailing slot: a count, a menu trigger, a timestamp. */
+    trailing?: JSX.Element
+    /** A second line that wraps and grows the row to fit its content. */
+    description?: string
+    /** Native button type; defaults to `button` for button rows. */
+    type?: ComponentProps<'button'>['type']
+  }
+>
+
+type ListRowControlBaseProps<T extends ValidComponent = 'div'> = ListRowControlProps<T> & {
+  as?: T
+}
+
+/** A tree-shakeable ListRow renderer without optional tooltip behavior. */
+export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowControlProps<T>) {
+  const [local, rest] = splitProps(props as ListRowControlBaseProps, [
+    'as',
+    'class',
+    'selected',
+    'dense',
+    'leading',
+    'trailing',
+    'description',
+    'type',
+    'tabIndex',
+    'children',
+  ])
+  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])
+  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T
+
+  return (
+    <Polymorphic
+      as={rowAs()}
+      type={rowAs() === 'button' ? (local.type ?? 'button') : local.type}
+      tabIndex={local.tabIndex ?? (rowAs() === 'button' || rowAs() === 'a' ? 0 : undefined)}
+      aria-current={local.selected ? 'true' : undefined}
+      data-selected={local.selected ? '' : undefined}
+      data-description={local.description ? '' : undefined}
+      class={cn(
+        'group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
+        'transition-colors ease-out outline-none',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        {
+          'h-row-sm': local.dense && !local.description,
+          'h-row-md': !local.dense && !local.description,
+        },
+        {
+          'bg-primary-subtle text-foreground': local.selected,
+          'hover:bg-surface-hover': !local.selected,
+        },
+        local.class
+      )}
+      {...(rest as ComponentProps<'div'>)}
+    >
+      <Show when={local.leading}>
+        <span
+          data-slot="list-row-leading"
+          class="flex shrink-0 items-center justify-center [&_svg]:size-4"
+        >
+          {local.leading}
+        </span>
+      </Show>
+      <div data-slot="list-row-content" class="flex min-w-0 flex-1 items-center gap-2.5">
+        <span data-slot="list-row-label" class="flex min-w-0 flex-1 flex-col">
+          <span class="truncate">{local.children}</span>
+          <Show when={local.description}>
+            <span
+              data-slot="list-row-description"
+              class={cn(
+                'text-xs break-words',
+                local.selected ? 'text-foreground' : 'text-muted-foreground'
+              )}
+            >
+              {local.description}
+            </span>
+          </Show>
+        </span>
+        <Show when={local.trailing}>
+          <span
+            data-slot="list-row-trailing"
+            class={cn(
+              'ms-auto flex shrink-0 items-center gap-1',
+              local.selected ? 'text-foreground' : 'text-muted-foreground'
+            )}
+          >
+            {local.trailing}
+          </span>
+        </Show>
+      </div>
+    </Polymorphic>
+  )
+}

package/dist/r/src/components/composites/list-row/list-row.tsx

@@ -1,161 +1,93 @@
 import type { PolymorphicProps } from '@kobalte/core/polymorphic'
-import { Polymorphic } from '@kobalte/core/polymorphic'
-import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import type { ComponentProps, ValidComponent } from 'solid-js'
+import { createSignal, createUniqueId, Show, splitProps } from 'solid-js'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
 import { cn } from '../../../lib/utils'
+import { ListRowControl, type ListRowControlProps } from './list-row-control'
 
-/**
- * ListRow.
- *
- * One row in a list of like things: a project, a session, a file, a person. It
- * is the highest-frequency component in an application of this shape, and the
- * one where a half-pixel of drift is most visible — twenty rows of a sidebar
- * make any inconsistency in height or padding obvious.
- *
- * The structure is fixed at four slots — `leading`, `children`, `meta`,
- * `trailing` — so rows that show an avatar, an icon, a status dot, a timestamp
- * and an overflow menu all sit at the same height without the caller doing
- * arithmetic.
- *
- * A row is only interactive when it is given an `as` that can be activated
- * (an anchor, a button) or an `onClick`. Click handlers default to a native
- * button; a row without either remains a `div` with no hover treatment.
- */
 export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<
   T,
-  {
-    class?: string
-    /** Marks the row as current. Sets `aria-current` for a link row. */
-    selected?: boolean
-    /** Draw the row at the compact height. */
-    dense?: boolean
-    /** Leading slot: an avatar, an icon, a checkbox. */
-    leading?: JSX.Element
-    /** Trailing slot: a count, a menu trigger, a timestamp. */
-    trailing?: JSX.Element
-    /** A dimmed second line under the main content. */
-    description?: string
+  ListRowControlProps<T> & {
     /** A short explanation shown on pointer hover and keyboard focus. */
     tooltip?: string
     /** Native button type; defaults to `button` for button rows. */
     type?: ComponentProps<'button'>['type']
+    /** Additional accessible description preserved on plain and rich rows. */
+    'aria-describedby'?: string
   }
 >
 
-type ListRowBaseProps<T extends ValidComponent = 'div'> = ListRowProps<T> & {
-  as?: T
-  type?: ComponentProps<'button'>['type']
-}
-
-function ListRowBase<T extends ValidComponent = 'div'>(props: ListRowBaseProps<T>) {
-  const [local, rest] = splitProps(props as ListRowProps, [
-    'as',
-    'class',
-    'selected',
-    'dense',
-    'leading',
-    'trailing',
-    'description',
-    'tooltip',
-    'type',
-    'tabIndex',
-    'children',
-  ])
-
-  return (
-    <Polymorphic
-      as={(local.as ?? 'div') as T}
-      type={local.as === 'button' ? (local.type ?? 'button') : local.type}
-      tabIndex={local.tabIndex ?? (local.as === 'button' || local.as === 'a' ? 0 : undefined)}
-      aria-current={local.selected ? 'true' : undefined}
-      data-selected={local.selected ? '' : undefined}
-      class={cn(
-        'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
-        'transition-colors ease-out outline-none',
-        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-        {
-          'h-row-sm': local.dense && !local.description,
-          'h-row-md': !local.dense && !local.description,
-          'min-h-row-sm py-1': local.dense && local.description,
-          'min-h-row-md py-1.5': !local.dense && local.description,
-        },
-        {
-          'bg-primary-subtle text-foreground': local.selected,
-          'hover:bg-surface-hover': !local.selected,
-        },
-        local.class
-      )}
-      {...(rest as ComponentProps<'div'>)}
-    >
-      <Show when={local.leading}>
-        <span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
-          {local.leading}
-        </span>
-      </Show>
-      <span class="flex min-w-0 flex-1 flex-col">
-        <span class="truncate">{local.children}</span>
-        <Show when={local.description}>
-          <span
-            data-slot="list-row-description"
-            class={cn(
-              'truncate text-xs',
-              local.selected ? 'text-foreground' : 'text-muted-foreground'
-            )}
-          >
-            {local.description}
-          </span>
-        </Show>
-      </span>
-      <Show when={local.trailing}>
-        <span
-          data-slot="list-row-trailing"
-          class={cn(
-            'ms-auto flex shrink-0 items-center gap-1',
-            local.selected ? 'text-foreground' : 'text-muted-foreground'
-          )}
-        >
-          {local.trailing}
-        </span>
-      </Show>
-    </Polymorphic>
-  )
+type ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<ListRowProps<T>, 'as'> & {
+  rowAs?: T
+  externalDescribedBy?: string
+  tooltipId?: string
+  tooltipOpen?: () => boolean
 }
 
-type ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<
-  ListRowBaseProps<T>,
-  'as'
-> & { rowAs?: T }
-
 /** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */
 function ListRowTooltipTarget<T extends ValidComponent = 'div'>(
   props: ListRowTooltipTargetProps<T>
 ) {
-  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, ['rowAs'])
-  return <ListRowBase as={local.rowAs} {...(rest as ListRowBaseProps<T>)} />
+  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, [
+    'rowAs',
+    'externalDescribedBy',
+    'tooltipId',
+    'tooltipOpen',
+  ])
+  const describedBy = () => {
+    const ids = [
+      rest['aria-describedby'],
+      local.externalDescribedBy,
+      local.tooltipOpen?.() ? local.tooltipId : undefined,
+    ]
+      .flatMap((value) => value?.split(/\s+/) ?? [])
+      .filter(Boolean)
+    return [...new Set(ids)].join(' ') || undefined
+  }
+
+  return (
+    <ListRowControl
+      as={local.rowAs}
+      {...(rest as unknown as ListRowControlProps<T>)}
+      aria-describedby={describedBy()}
+    />
+  )
 }
 
+/**
+ * Rich row composition with optional hover and keyboard tooltip behavior.
+ * Import ListRowControl when the tooltip API is not needed and the consumer
+ * wants the plain renderer to tree-shake independently.
+ */
 export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {
-  const [local, rest] = splitProps(props as ListRowProps, ['as', 'tooltip'])
+  const [local, rest] = splitProps(props as ListRowProps<T>, ['as', 'tooltip', 'aria-describedby'])
+  const [tooltipOpen, setTooltipOpen] = createSignal(false)
+  const tooltipId = `list-row-tooltip-${createUniqueId()}`
   const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])
   const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T
   const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)
+  const rowProps = () =>
+    ({
+      ...rest,
+      type: rowType(),
+      'aria-describedby': local['aria-describedby'],
+    }) as unknown as ListRowControlProps<T>
 
   return (
-    <Show
-      when={local.tooltip}
-      fallback={<ListRowBase as={rowAs()} type={rowType()} {...(rest as ListRowBaseProps<T>)} />}
-    >
-      <Tooltip>
+    <Show when={local.tooltip} fallback={<ListRowControl as={rowAs()} {...rowProps()} />}>
+      <Tooltip open={tooltipOpen()} onOpenChange={setTooltipOpen}>
         <TooltipTrigger
           as={ListRowTooltipTarget}
           rowAs={rowAs()}
           type={rowType()}
+          externalDescribedBy={local['aria-describedby']}
+          tooltipId={tooltipId}
+          tooltipOpen={tooltipOpen}
           {...(rest as ListRowTooltipTargetProps<T>)}
         >
           {rest.children}
         </TooltipTrigger>
-        <TooltipContent>{local.tooltip}</TooltipContent>
+        <TooltipContent id={tooltipId}>{local.tooltip}</TooltipContent>
       </Tooltip>
     </Show>
   )
@@ -163,12 +95,13 @@ export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>
 
 /**
  * A group of rows with an optional heading and a scrolling body. The heading is
- * a plain label rather than a control: grouping is for reading, and a
- * disclosure on a list of five rows costs more attention than it saves.
+ * a plain label rather than a control: grouping is for reading, and a disclosure
+ * on a list of five rows costs more attention than it saves.
  */
-export function ListGroup(props: ComponentProps<'div'> & { label?: string; action?: JSX.Element }) {
+export function ListGroup(
+  props: ComponentProps<'div'> & { label?: string; action?: import('solid-js').JSX.Element }
+) {
   const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])
-
   return (
     <div data-slot="list-group" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>
       <Show when={local.label}>

package/dist/r/src/components/composites/tree/index.ts

@@ -0,0 +1,3 @@
+/** Keyboard-accessible tree rows with virtualization-aware focus handoff. */
+export { Tree, TreeRow, type TreeProps, type TreeRowProps } from './tree'
+export type { TreeItemDescriptor } from './tree-navigation'

package/dist/r/src/components/composites/tree/tree-navigation.ts

@@ -0,0 +1,114 @@
+/** A visible tree row's host-owned projection metadata. */
+export type TreeItemDescriptor = {
+  /** Stable identity shared with the host's domain item. */
+  id: string
+  /** Stable parent identity, or null for a root item. */
+  parentId: string | null
+  /** One-based depth exposed to assistive technology. */
+  level: number
+  /** Whether this item can be expanded. */
+  expandable: boolean
+  /** Whether this item is currently expanded. */
+  expanded: boolean
+}
+
+export type TreeNavigationIndex = {
+  ids: readonly string[]
+  byId: ReadonlyMap<string, TreeItemDescriptor>
+  indexById: ReadonlyMap<string, number>
+  firstChildByParent: ReadonlyMap<string, string>
+  positionById: ReadonlyMap<string, { position: number; setSize: number }>
+}
+
+export type TreeNavigationAction =
+  | { type: 'focus'; id: string }
+  | { type: 'expand'; id: string; expanded: boolean }
+  | { type: 'activate'; id: string }
+  | { type: 'select'; id: string }
+
+/**
+ * Indexes the complete expanded projection once per host update. The DOM may
+ * contain only a window of these rows; this index keeps keyboard movement and
+ * aria-setsize independent of the mounted window.
+ */
+export function indexTreeItems(items: readonly TreeItemDescriptor[]): TreeNavigationIndex {
+  const byId = new Map<string, TreeItemDescriptor>()
+  const indexById = new Map<string, number>()
+  const firstChildByParent = new Map<string, string>()
+  const siblingsByParent = new Map<string | null, string[]>()
+
+  items.forEach((item, index) => {
+    if (byId.has(item.id)) {
+      throw new Error(`[adea-ui]: Tree visibleItems contains duplicate id "${item.id}".`)
+    }
+    byId.set(item.id, item)
+    indexById.set(item.id, index)
+
+    const siblings = siblingsByParent.get(item.parentId) ?? []
+    siblings.push(item.id)
+    siblingsByParent.set(item.parentId, siblings)
+
+    if (item.parentId !== null && !firstChildByParent.has(item.parentId)) {
+      firstChildByParent.set(item.parentId, item.id)
+    }
+  })
+
+  const positionById = new Map<string, { position: number; setSize: number }>()
+  for (const siblings of siblingsByParent.values()) {
+    siblings.forEach((id, index) => {
+      positionById.set(id, { position: index + 1, setSize: siblings.length })
+    })
+  }
+
+  return {
+    ids: items.map((item) => item.id),
+    byId,
+    indexById,
+    firstChildByParent,
+    positionById,
+  }
+}
+
+/** Resolves one keyboard event without owning tree data or host actions. */
+export function treeNavigationAction(
+  index: TreeNavigationIndex,
+  activeId: string | null,
+  key: string
+): TreeNavigationAction | null {
+  const { ids, byId, indexById, firstChildByParent } = index
+  if (ids.length === 0) return null
+
+  const activeIndex = activeId === null ? undefined : indexById.get(activeId)
+  const active = activeId === null ? undefined : byId.get(activeId)
+
+  if (key === 'ArrowDown' || key === 'ArrowUp') {
+    const step = key === 'ArrowDown' ? 1 : -1
+    const start = activeIndex ?? (step > 0 ? -1 : 0)
+    const nextIndex = (start + step + ids.length) % ids.length
+    const id = ids[nextIndex]
+    return id === undefined ? null : { type: 'focus', id }
+  }
+
+  if (key === 'Home') return { type: 'focus', id: ids[0]! }
+  if (key === 'End') return { type: 'focus', id: ids[ids.length - 1]! }
+  if (!active) return null
+
+  if (key === 'ArrowRight' && active.expandable) {
+    if (!active.expanded) return { type: 'expand', id: active.id, expanded: true }
+    const childId = firstChildByParent.get(active.id)
+    return childId ? { type: 'focus', id: childId } : null
+  }
+
+  if (key === 'ArrowLeft') {
+    if (active.expandable && active.expanded) {
+      return { type: 'expand', id: active.id, expanded: false }
+    }
+    if (active.parentId !== null && byId.has(active.parentId)) {
+      return { type: 'focus', id: active.parentId }
+    }
+  }
+
+  if (key === 'Enter') return { type: 'activate', id: active.id }
+  if (key === ' ' || key === 'Spacebar') return { type: 'select', id: active.id }
+  return null
+}