@adea-ai/ui 0.138.0 → 0.139.0

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

@@ -25,6 +25,7 @@ type TreeContextValue = {
   unregister: (id: string, element: HTMLDivElement | undefined) => void
   focusItem: (id: string) => void
   noteFocus: (id: string) => void
+  noteBlur: (next: EventTarget | null) => void
   activate: (id: string, event: Event) => void
   expand: (id: string, expanded: boolean) => void
   disclosure: () => TreeDisclosure
@@ -114,8 +115,14 @@ export type TreeProps = Omit<
  * the target row: when the active row leaves `visibleItems`, the first visible
  * row becomes the roving stop and `onActiveIdChange` is called with it. If the
  * removed row held focus, or was the last row the tree saw focused, focus moves
- * to that same row; if it had no focus, only the roving stop moves. This is the
- * same in both `disclosure` modes and for every way a host collapses a row.
+ * to that same row; if it had no focus, only the roving stop moves. Focus that
+ * has already gone to a control outside the tree is never pulled back: the tree
+ * forgets its last focused row when focus moves to an element outside it, and
+ * the roving stop alone moves if that control still has focus when the row is
+ * hidden. Focus the tree has asked for but not yet moved (a queued recovery, or a
+ * keyboard move to a row the host has not mounted) is withdrawn when focus lands
+ * outside the tree, and is checked again when a row mounts. This is the same in
+ * both `disclosure` modes and for every way a host collapses a row.
  */
 export function Tree(props: TreeProps) {
   const [local, rest] = splitProps(props, [
@@ -143,9 +150,26 @@ export function Tree(props: TreeProps) {
   const rows = new Map<string, HTMLDivElement>()
   const rowIdsByElement = new WeakMap<HTMLDivElement, string>()
   let pendingFocusId: string | null = null
+  let pendingFocusGuard: ((event: FocusEvent) => void) | undefined
   let requestedRevealId: string | null = null
   let focusedId: string | null = null
   let disposed = false
+  const isInsideTreeRow = (element: Element) => {
+    const row = element.closest('[role="treeitem"]')
+    return row instanceof HTMLDivElement && rowIdsByElement.has(row)
+  }
+  // True when a focusable control outside this tree owns focus. Nothing focused
+  // (`body`) is not outside: that is where focus falls when a focused row is removed.
+  const focusIsOutsideTree = () => {
+    if (typeof document === 'undefined') return false
+    const active = document.activeElement
+    return (
+      active instanceof Element &&
+      active !== document.body &&
+      active !== document.documentElement &&
+      !isInsideTreeRow(active)
+    )
+  }
   const rowSizeObserver =
     typeof ResizeObserver === 'undefined'
       ? undefined
@@ -160,8 +184,33 @@ export function Tree(props: TreeProps) {
           }
         })
 
+  // Focus the tree has asked for but not yet moved (a microtask away, or waiting for a
+  // virtualised row to mount) is only a request. While one is pending, focus arriving
+  // on a control outside the tree withdraws it, so a row mounting later cannot take
+  // focus back from a control the user, or the host, has since chosen.
+  const setPendingFocus = (id: string | null) => {
+    pendingFocusId = id
+    if (typeof document === 'undefined') return
+    if (id === null) {
+      if (pendingFocusGuard) document.removeEventListener('focusin', pendingFocusGuard, true)
+      pendingFocusGuard = undefined
+    } else if (!pendingFocusGuard) {
+      pendingFocusGuard = (event) => {
+        if (event.target instanceof Element && !isInsideTreeRow(event.target)) cancelPendingFocus()
+      }
+      document.addEventListener('focusin', pendingFocusGuard, true)
+    }
+  }
+  // Withdrawing a request also drops the memory of the row it was recovering for:
+  // nothing is left to recover.
+  const cancelPendingFocus = () => {
+    setPendingFocus(null)
+    focusedId = null
+  }
+
   onCleanup(() => {
     disposed = true
+    setPendingFocus(null)
     rowSizeObserver?.disconnect()
   })
 
@@ -176,13 +225,19 @@ export function Tree(props: TreeProps) {
       if (pendingFocusId !== id || effectiveActiveId() !== id) return
       const row = rows.get(id)
       if (!row || typeof document === 'undefined') return
+      // Ownership is checked when focus would move, not when it was requested: a
+      // control outside the tree may have taken focus since, and keeps it.
+      if (focusIsOutsideTree()) {
+        cancelPendingFocus()
+        return
+      }
       row.focus()
-      if (document.activeElement === row) pendingFocusId = null
+      if (document.activeElement === row) setPendingFocus(null)
     })
   }
 
   const focusItem = (id: string) => {
-    pendingFocusId = id
+    setPendingFocus(id)
     local.onActiveIdChange(id)
     if (rows.has(id)) requestedRevealId = null
     else requestReveal(id)
@@ -216,8 +271,14 @@ export function Tree(props: TreeProps) {
       if (focusWasInside) {
         queueMicrotask(() => {
           const fallbackId = effectiveActiveId()
-          if (!disposed && fallbackId !== null && pendingFocusId !== fallbackId)
-            focusItem(fallbackId)
+          if (disposed || fallbackId === null || pendingFocusId === fallbackId) return
+          // Focus fell out of the removed row, but it may have been given to a control
+          // outside the tree before this ran. Only nothing-focused (body) recovers.
+          if (focusIsOutsideTree()) {
+            focusedId = null
+            return
+          }
+          focusItem(fallbackId)
         })
       }
     },
@@ -225,6 +286,13 @@ export function Tree(props: TreeProps) {
     noteFocus: (id) => {
       focusedId = id
     },
+    noteBlur: (next) => {
+      // Focus moving to an element outside this tree ends the memory of the last
+      // focused row and withdraws any focus the tree was still waiting to give a
+      // row. A null target (focus to nothing, or the window losing focus) is
+      // ambiguous, so both stay for the recovery below.
+      if (next instanceof Element && !isInsideTreeRow(next)) cancelPendingFocus()
+    },
     activate: (id, event) => local.onActivate?.(id, event),
     expand: (id, expanded) => local.onExpand?.(id, expanded),
     disclosure: () => local.disclosure ?? 'row',
@@ -239,11 +307,15 @@ export function Tree(props: TreeProps) {
     if (activeId === null) return
     // If the projection removes the last row that took focus (a host filter, or
     // an ancestor collapsing), move focus to the same fallback that now owns the
-    // roving tab stop. `focusedId` is not cleared when focus leaves the tree, so
-    // this also reclaims focus from a control outside it; that long-standing
-    // behaviour is deliberately left as it was.
+    // roving tab stop, unless a control outside the tree has focus: that control
+    // keeps it, and only the roving stop moves.
     if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {
-      focusItem(activeId)
+      if (focusIsOutsideTree()) {
+        focusedId = null
+        if (local.activeId !== activeId) local.onActiveIdChange(activeId)
+      } else {
+        focusItem(activeId)
+      }
     } else if (local.activeId !== activeId) {
       local.onActiveIdChange(activeId)
     }
@@ -354,12 +426,19 @@ export function TreeRow(props: TreeRowProps) {
   let registeredId: string | undefined
   const id = () => local.item.id
 
-  onCleanup(() => tree.unregister(registeredId ?? id(), row))
+  const handleFocusOut = (event: FocusEvent) => tree.noteBlur(event.relatedTarget)
+
+  onCleanup(() => {
+    row?.removeEventListener('focusout', handleFocusOut)
+    tree.unregister(registeredId ?? id(), row)
+  })
 
   const setRef = (element: HTMLDivElement) => {
     row = element
     registeredId = id()
     tree.register(registeredId, element)
+    // A listener, not an `onFocusOut` prop, so a host's own handler is untouched.
+    element.addEventListener('focusout', handleFocusOut)
   }
 
   createEffect(() => {

package/src/components/layout/top-bar/top-bar.tsx

@@ -12,6 +12,12 @@ import { cn } from '#lib/utils'
  * narrow screens the middle track yields space to the controls, and each side
  * group scrolls when necessary so keyboard focus can reveal every action.
  *
+ * The centre track is sized for a lone search field. A bar whose centre holds
+ * more than that, such as a search plus an action beside it, passes
+ * `centerWidth="wide"`: the centre then stays fluid below 1280px, never
+ * narrower than 7rem so its controls are not squeezed out by a long leading
+ * group (which scrolls instead), and takes a wider fixed track above it.
+ *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
  * `windows-inset` reserve the space the native window controls occupy, which is
@@ -27,6 +33,13 @@ export type TopBarProps = ComponentProps<'header'> & {
   windowsInset?: boolean
   /** Blur the content scrolling under the bar. */
   glass?: boolean
+  /**
+   * How wide the centre track is. `field` (default) suits a lone search field.
+   * `wide` suits a centre that also holds an action: fluid below 1280px and
+   * never narrower than 7rem (the side groups scroll to make room), then a
+   * clamp of 32vw up to 672px between equal side tracks.
+   */
+  centerWidth?: 'field' | 'wide'
 }
 
 export function TopBar(props: TopBarProps) {
@@ -36,6 +49,7 @@ export function TopBar(props: TopBarProps) {
     'macosInset',
     'windowsInset',
     'glass',
+    'centerWidth',
   ])
 
   return (
@@ -43,6 +57,8 @@ export function TopBar(props: TopBarProps) {
       data-slot="top-bar"
       class={cn(
         'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
+        local.centerWidth === 'wide' &&
+          'grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         /* Each edge gets exactly one inline-padding utility. A window inset

package/src/components/ui/callout/callout.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { children, createMemo, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 
@@ -75,15 +75,35 @@ export const calloutVariants = cva(
 
 export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
 
+const isRendered = (node: unknown) =>
+  node != null && typeof node !== 'boolean' && (typeof node !== 'string' || node.trim() !== '')
+
+const isCalloutTitle = (node: unknown) =>
+  typeof node === 'object' &&
+  node !== null &&
+  'getAttribute' in node &&
+  typeof node.getAttribute === 'function' &&
+  node.getAttribute('data-slot') === 'callout-title'
+
 export function Callout(props: CalloutProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'children'])
+  const resolved = children(() => local.children)
+  // CSS cannot see text nodes, so the callout looks at what it renders and marks a
+  // title with nothing after it. The title reads the mark to drop its bottom margin.
+  const titleOnly = createMemo(() => {
+    const nodes = resolved.toArray().filter(isRendered)
+    return nodes.length === 1 && isCalloutTitle(nodes[0])
+  })
   return (
     <div
       data-slot="callout"
+      data-title-only={titleOnly() ? '' : undefined}
       role="note"
       class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
       {...rest}
-    />
+    >
+      {resolved()}
+    </div>
   )
 }
 
@@ -93,22 +113,23 @@ export function Callout(props: CalloutProps) {
  * level would break it. Pass `role="heading"` with `aria-level` where the
  * content does belong in the outline.
  *
- * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+ * The title carries a 4px (`mb-1`) margin below it, whatever follows: a
  * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
  * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
  * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
- * bare text, the most common body. The unconditional margin is the less
- * surprising failure: it is never missing where text follows. The price is the
- * title-only callout, which would end 4px taller than its padding says. Pass
- * `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
- * shows it.
+ * bare text, the most common body. So the gap stays the default and the one case
+ * that does not want it is detected by `Callout`, which sees its rendered
+ * children: a callout whose only child is a title carries `data-title-only`, and
+ * the title drops its margin so the block ends at its own padding. A caller never
+ * passes `mb-0` for this. Anything else after the title, text included, keeps the
+ * gap.
  */
 export function CalloutTitle(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="callout-title"
-      class={cn('mb-1 font-medium tracking-tight', local.class)}
+      class={cn('mb-1 font-medium tracking-tight in-data-title-only:mb-0', local.class)}
       {...rest}
     />
   )

package/src/components/ui/input-group/secret-input-group.tsx

@@ -1,4 +1,4 @@
-import { splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'
+import { Show, splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'
 import { ActionButton } from '../../composites/action-button'
 import { FormFieldContext } from '#lib/form-field'
 import { InputGroup, InputGroupInput } from './input-group'
@@ -56,28 +56,31 @@ export function SecretInputGroup(props: SecretInputGroupProps) {
     />
   )
 
-  if (!local.onClear) return <InputGroup class={local.class}>{input}</InputGroup>
-
+  // One group for both cases: `onClear` may appear or disappear after setup
+  // (a stored secret is cleared, or a configured one arrives), and the input
+  // must keep its element, value and focus while the action comes and goes.
   return (
     <InputGroup class={local.class}>
       {input}
-      <ActionButton
-        data-slot="input-group-button"
-        variant="ghost"
-        size="xs"
-        class="-me-1 h-6 min-w-0 shrink-0 px-2"
-        disabled={local.disabled}
-        tooltip={
-          local.disabled
-            ? (local.disabledReason ?? 'This API key is managed by policy')
-            : (local.clearLabel ?? 'Clear API key')
-        }
-        tooltipSide="top"
-        aria-label={local.clearLabel ?? 'Clear API key'}
-        onClick={() => local.onClear?.()}
-      >
-        Clear
-      </ActionButton>
+      <Show when={local.onClear}>
+        <ActionButton
+          data-slot="input-group-button"
+          variant="ghost"
+          size="xs"
+          class="-me-1 h-6 min-w-0 shrink-0 px-2"
+          disabled={local.disabled}
+          tooltip={
+            local.disabled
+              ? (local.disabledReason ?? 'This API key is managed by policy')
+              : (local.clearLabel ?? 'Clear API key')
+          }
+          tooltipSide="top"
+          aria-label={local.clearLabel ?? 'Clear API key'}
+          onClick={() => local.onClear?.()}
+        >
+          Clear
+        </ActionButton>
+      </Show>
     </InputGroup>
   )
 }