@adea-ai/ui 0.89.2 → 0.93.2

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

@@ -1,6 +1,15 @@
-import { Tooltip as KobalteTooltip } from '@kobalte/core/tooltip'
+import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'
 import type { ComponentProps } from 'solid-js'
-import { createContext, splitProps, useContext } from 'solid-js'
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+  splitProps,
+  useContext,
+} from 'solid-js'
+import { isServer } from 'solid-js/web'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -33,6 +42,99 @@ const tooltipDefaults: TooltipTiming = {
 
 const TooltipTimingContext = createContext<TooltipTiming>(tooltipDefaults)
 
+type TooltipInteraction = {
+  id: string
+  trigger: () => HTMLElement | undefined
+  setTrigger: (element: HTMLElement) => void
+  isOpen: () => boolean
+  isDisabled: () => boolean
+  isTriggerFocused: () => boolean
+  markOpenIntent: () => void
+  clearOpenIntent: () => void
+  requestCloseFromAnotherTooltip: () => void
+  markPointerCloseIntent: () => void
+  clearPointerCloseIntent: () => void
+  markCloseIntent: () => void
+}
+
+const TooltipInteractionContext = createContext<TooltipInteraction>()
+const openTooltipInteractions = new Set<TooltipInteraction>()
+let pendingTooltipOpenId: string | undefined
+let tooltipScrollListenerAttached = false
+
+function clearPendingTooltipOpen(id: string) {
+  if (pendingTooltipOpenId === id) pendingTooltipOpenId = undefined
+}
+
+function tooltipScrollContainsTrigger(event: Event, trigger: HTMLElement) {
+  const target = event.target
+  return target === window || (target instanceof Node && target.contains(trigger))
+}
+
+function handleTooltipScroll(event: Event) {
+  for (const interaction of openTooltipInteractions) {
+    const trigger = interaction.trigger()
+    if (interaction.isOpen() && trigger && tooltipScrollContainsTrigger(event, trigger)) {
+      interaction.markCloseIntent()
+    }
+  }
+}
+
+function handleTooltipPointerMove(event: PointerEvent) {
+  for (const interaction of openTooltipInteractions) {
+    const trigger = interaction.trigger()
+    const target = event.target
+    if (
+      interaction.isOpen() &&
+      interaction.isTriggerFocused() &&
+      trigger &&
+      !(target instanceof Node && trigger.contains(target))
+    ) {
+      interaction.markPointerCloseIntent()
+    }
+  }
+}
+
+function setTooltipInteractionOpen(interaction: TooltipInteraction, open: boolean) {
+  if (isServer) return
+
+  if (open) {
+    if (openTooltipInteractions.has(interaction)) return
+    openTooltipInteractions.add(interaction)
+    if (!tooltipScrollListenerAttached) {
+      tooltipScrollListenerAttached = true
+      // Register before Kobalte's global listeners so intentional scroll
+      // dismissal can be distinguished from its delayed pointer dismissal.
+      window.addEventListener('scroll', handleTooltipScroll, true)
+      document.addEventListener('pointermove', handleTooltipPointerMove, true)
+    }
+  } else {
+    openTooltipInteractions.delete(interaction)
+    if (openTooltipInteractions.size === 0 && tooltipScrollListenerAttached) {
+      tooltipScrollListenerAttached = false
+      window.removeEventListener('scroll', handleTooltipScroll, true)
+      document.removeEventListener('pointermove', handleTooltipPointerMove, true)
+    }
+  }
+}
+
+function registerTooltipInteraction(interaction: TooltipInteraction) {
+  onCleanup(() => {
+    setTooltipInteractionOpen(interaction, false)
+    clearPendingTooltipOpen(interaction.id)
+  })
+}
+
+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)
+  }
+}
+
 export type TooltipProviderProps = {
   children?: ComponentProps<'div'>['children']
   openDelay?: number
@@ -58,19 +160,192 @@ export type TooltipRootProps = ComponentProps<typeof KobalteTooltip>
 
 export function Tooltip(props: TooltipRootProps) {
   const timing = useContext(TooltipTimingContext)
+  const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled'])
+  const id = createUniqueId()
+  const controlled = () => local.open !== undefined
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? false)
+  const isOpen = () => (controlled() ? (local.open ?? false) : uncontrolledOpen())
+  const [trigger, setTrigger] = createSignal<HTMLElement>()
+  let closeIntent = false
+  let ignoreDuplicateClose = false
+  let onOpenChange: (next: boolean, source?: 'handoff') => void
+  let pointerCloseIntentUntil = 0
+  let pointerCloseIntentTimeout: ReturnType<typeof setTimeout> | undefined
+  const clearPointerCloseIntent = () => {
+    pointerCloseIntentUntil = 0
+    if (pointerCloseIntentTimeout) clearTimeout(pointerCloseIntentTimeout)
+    pointerCloseIntentTimeout = undefined
+  }
+  const markPointerCloseIntent = () => {
+    if (!isOpen()) return
+    clearPointerCloseIntent()
+    const closeDelay = props.closeDelay ?? timing.closeDelay
+    pointerCloseIntentUntil = Date.now() + closeDelay + 50
+    pointerCloseIntentTimeout = setTimeout(clearPointerCloseIntent, closeDelay + 50)
+  }
+  const markCloseIntent = () => {
+    closeIntent = true
+    clearPointerCloseIntent()
+    queueMicrotask(() => {
+      closeIntent = false
+    })
+  }
+  const requestCloseFromAnotherTooltip = () => {
+    if (!isOpen()) return
+
+    // Another trigger is an explicit handoff, even when a focused tooltip has
+    // a pending pointer-close intent that would otherwise suppress Kobalte's
+    // close callback. Route the request through the same controlled/uncontrolled
+    // state contract as Kobalte and ignore its duplicate callback for this turn.
+    ignoreDuplicateClose = true
+    queueMicrotask(() => {
+      ignoreDuplicateClose = false
+    })
+    onOpenChange(false, 'handoff')
+  }
+  const interaction: TooltipInteraction = {
+    id,
+    trigger,
+    setTrigger,
+    isOpen,
+    isDisabled: () => local.disabled ?? false,
+    isTriggerFocused: () =>
+      Boolean(trigger() && typeof document !== 'undefined' && trigger() === document.activeElement),
+    markOpenIntent: () => {
+      clearPointerCloseIntent()
+      pendingTooltipOpenId = id
+      // A focused tooltip ignores ordinary pointer movement, but entering or
+      // focusing another tooltip is an explicit transfer.
+      for (const openInteraction of openTooltipInteractions) {
+        if (openInteraction.id !== id) openInteraction.requestCloseFromAnotherTooltip()
+      }
+    },
+    clearOpenIntent: () => clearPendingTooltipOpen(id),
+    requestCloseFromAnotherTooltip,
+    markPointerCloseIntent,
+    clearPointerCloseIntent,
+    markCloseIntent,
+  }
+  registerTooltipInteraction(interaction)
+  onCleanup(() => {
+    clearPointerCloseIntent()
+    ignoreDuplicateClose = false
+  })
+  if (isOpen()) setTooltipInteractionOpen(interaction, true)
+  createEffect(() => setTooltipInteractionOpen(interaction, isOpen()))
+  onOpenChange = (next: boolean, source) => {
+    if (!next && source !== 'handoff' && ignoreDuplicateClose) return
+
+    if (next) {
+      clearPendingTooltipOpen(id)
+      clearPointerCloseIntent()
+      // Install this capture listener before Kobalte's open-state effect adds
+      // its scroll listener later in the same update.
+      setTooltipInteractionOpen(interaction, true)
+    } else {
+      const focusedTrigger = interaction.isTriggerFocused()
+      const anotherTooltipOpening =
+        pendingTooltipOpenId !== undefined && pendingTooltipOpenId !== id
+      const pointerClosePending = Date.now() <= pointerCloseIntentUntil
+      if (
+        source !== 'handoff' &&
+        focusedTrigger &&
+        pointerClosePending &&
+        !closeIntent &&
+        !anotherTooltipOpening
+      ) {
+        clearPointerCloseIntent()
+        return
+      }
+      closeIntent = false
+      clearPointerCloseIntent()
+      clearPendingTooltipOpen(id)
+    }
+
+    if (!controlled()) setUncontrolledOpen(next)
+    local.onOpenChange?.(next)
+    if (next) {
+      // A controlled parent can reject the open request without changing its
+      // signal, so the effect above would not rerun to release this listener.
+      queueMicrotask(() => {
+        if (!isOpen()) setTooltipInteractionOpen(interaction, false)
+      })
+    }
+  }
+
+  // Kobalte dismisses on Escape only when its content owns the top-most
+  // layer, and a handoff keeps the previous tooltip's content mounted while
+  // it exits — swallowing the key for the tooltip that just took over.
+  // Listening on document (capture) closes this tooltip first; the layer's
+  // own handler still runs for anything stacked above it.
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') return
+    markCloseIntent()
+    onOpenChange(false)
+  }
+  createEffect(() => {
+    if (isServer || !isOpen()) return
+    document.addEventListener('keydown', handleKeyDown, true)
+    onCleanup(() => document.removeEventListener('keydown', handleKeyDown, true))
+  })
 
   return (
-    <KobalteTooltip
-      openDelay={props.openDelay ?? timing.openDelay}
-      closeDelay={props.closeDelay ?? timing.closeDelay}
-      skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}
-      {...props}
-    />
+    <TooltipInteractionContext.Provider value={interaction}>
+      <KobalteTooltip
+        open={isOpen()}
+        onOpenChange={onOpenChange}
+        disabled={local.disabled}
+        openDelay={props.openDelay ?? timing.openDelay}
+        closeDelay={props.closeDelay ?? timing.closeDelay}
+        skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}
+        {...rest}
+      />
+    </TooltipInteractionContext.Provider>
   )
 }
 
 export function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>) {
-  return <KobalteTooltip.Trigger {...props} />
+  const interaction = useContext(TooltipInteractionContext)
+  const [local, rest] = splitProps(props, [
+    'ref',
+    'onFocus',
+    'onBlur',
+    'onPointerEnter',
+    'onPointerLeave',
+    'onClick',
+  ])
+
+  return (
+    <KobalteTooltip.Trigger
+      {...rest}
+      ref={(element) => {
+        interaction?.setTrigger(element)
+        if (typeof local.ref === 'function') local.ref(element)
+      }}
+      onFocus={(event) => {
+        invokeEventHandler(local.onFocus, event)
+        if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()
+      }}
+      onBlur={(event) => {
+        invokeEventHandler(local.onBlur, event)
+        interaction?.clearOpenIntent()
+        interaction?.markCloseIntent()
+      }}
+      onPointerEnter={(event) => {
+        invokeEventHandler(local.onPointerEnter, event)
+        if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()
+      }}
+      onPointerLeave={(event) => {
+        invokeEventHandler(local.onPointerLeave, event)
+        interaction?.clearOpenIntent()
+        interaction?.markPointerCloseIntent()
+      }}
+      onClick={(event) => {
+        invokeEventHandler(local.onClick, event)
+        interaction?.markCloseIntent()
+      }}
+    />
+  )
 }
 
 export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {
@@ -79,8 +354,19 @@ export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>
 }
 
 export function TooltipContent(props: TooltipContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])
+  const interaction = useContext(TooltipInteractionContext)
+  const [local, rest] = splitProps(props, [
+    'class',
+    'hideArrow',
+    'children',
+    'aria-hidden',
+    'onEscapeKeyDown',
+    'onPointerDownOutside',
+  ])
+  const context = useTooltipContext()
 
+  // Kobalte keeps force-mounted and exiting content present after close. Hide
+  // that retained tooltip from assistive technology until it opens again.
   return (
     <KobalteTooltip.Portal>
       <KobalteTooltip.Content
@@ -92,6 +378,15 @@ export function TooltipContent(props: TooltipContentProps) {
           'data-expanded:duration-150 data-closed:duration-100',
           local.class
         )}
+        aria-hidden={context.isOpen() ? local['aria-hidden'] : true}
+        onEscapeKeyDown={(event) => {
+          invokeEventHandler(local.onEscapeKeyDown, event)
+          if (!event.defaultPrevented) interaction?.markCloseIntent()
+        }}
+        onPointerDownOutside={(event) => {
+          invokeEventHandler(local.onPointerDownOutside, event)
+          if (!event.defaultPrevented) interaction?.markCloseIntent()
+        }}
         {...rest}
       >
         {local.children}

package/dist/r/src/styles/base.css

@@ -92,6 +92,45 @@
   }
 }
 
+/* Emitted only when ListRowControl is used. A described row changes its own
+   height and stacks trailing actions when its available width gets tight. */
+@utility list-row-description {
+  &[data-description] {
+    align-items: flex-start;
+    container: list-row / inline-size;
+    flex-wrap: wrap;
+    min-height: var(--row-height-lg);
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  &[data-description] [data-slot='list-row-content'] {
+    flex: 1 1 14rem;
+  }
+
+  @container list-row (width < 28rem) {
+    &[data-description] [data-slot='list-row-content'] {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    &[data-description] [data-slot='list-row-label'],
+    &[data-description] [data-slot='list-row-trailing'] {
+      flex: none;
+      width: 100%;
+    }
+
+    &[data-description] [data-slot='list-row-trailing'] {
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+
+    &[data-description] [data-slot='list-row-trailing'] button {
+      max-width: 100%;
+      white-space: normal;
+    }
+  }
+}
+
 @custom-variant data-horizontal {
   &:where([data-orientation='horizontal']) {
     @slot;

package/dist/r/textarea.json

@@ -3,7 +3,9 @@
   "type": "registry:ui",
   "title": "Textarea",
   "description": "",
-  "dependencies": [],
+  "dependencies": [
+    "class-variance-authority@^0.7.1"
+  ],
   "registryDependencies": [
     "lib"
   ],

package/dist/r/top-bar.json

@@ -3,7 +3,9 @@
   "type": "registry:ui",
   "title": "Top Bar",
   "description": "",
-  "dependencies": [],
+  "dependencies": [
+    "lucide-solid@^1.48.0"
+  ],
   "registryDependencies": [
     "lib"
   ],

package/dist/r/tree.json

@@ -0,0 +1,29 @@
+{
+  "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"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.89.2",
+  "version": "0.93.2",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -102,12 +102,15 @@
     "theme:check": "bun scripts/build-default-theme.ts --check",
     "check:packed-layout": "node --test scripts/check-packed-layout-process.test.mjs && node scripts/check-packed-layout.mjs",
     "check:packed-consumer": "bun scripts/check-packed-consumer.ts",
+    "check:packed-list-row": "bun scripts/check-packed-list-row.ts",
     "check:packed-conversation": "bun scripts/check-packed-conversation.ts",
     "check:packed-transcript": "bun scripts/check-packed-transcript.ts",
     "check:packed-layout-renderer": "bun scripts/check-packed-layout-renderer.ts",
     "check:packed-appearance": "bun scripts/check-packed-appearance.ts",
+    "check:packed-modal-dialog": "bun scripts/check-packed-modal-dialog.ts",
     "check:packed-native-select": "bun scripts/check-packed-native-select.ts",
     "check:packed-settings-navigation": "bun scripts/check-packed-settings-navigation.ts",
+    "check:packed-tree": "bun scripts/check-packed-tree.ts",
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {

package/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/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/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>
+  )
+}