@adea-ai/ui 0.82.2 → 0.83.1

package/dist/r/orbit-layout.json

@@ -0,0 +1,22 @@
+{
+  "name": "orbit-layout",
+  "type": "registry:ui",
+  "title": "Orbit Layout",
+  "description": "Geometry-only wrappers for arranging content around a circle.",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/layout/orbit-layout/index.ts",
+      "type": "registry:ui",
+      "target": "components/layout/orbit-layout/index.ts"
+    },
+    {
+      "path": "src/components/layout/orbit-layout/orbit-layout.tsx",
+      "type": "registry:ui",
+      "target": "components/layout/orbit-layout/orbit-layout.tsx"
+    }
+  ]
+}

package/dist/r/registry.json

@@ -1457,6 +1457,28 @@
         }
       ]
     },
+    {
+      "name": "orbit-layout",
+      "type": "registry:ui",
+      "title": "Orbit Layout",
+      "description": "Geometry-only wrappers for arranging content around a circle.",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/orbit-layout/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/orbit-layout/index.ts"
+        },
+        {
+          "path": "src/components/layout/orbit-layout/orbit-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/orbit-layout/orbit-layout.tsx"
+        }
+      ]
+    },
     {
       "name": "page",
       "type": "registry:ui",
@@ -1640,6 +1662,28 @@
         }
       ]
     },
+    {
+      "name": "virtual-window",
+      "type": "registry:ui",
+      "title": "Virtual Window",
+      "description": "Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller.",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/virtual-window/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/virtual-window/index.ts"
+        },
+        {
+          "path": "src/components/layout/virtual-window/virtual-window.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/virtual-window/virtual-window.tsx"
+        }
+      ]
+    },
     {
       "name": "account-menu",
       "type": "registry:ui",

package/dist/r/src/components/composites/action-button/action-button.tsx

@@ -1,4 +1,11 @@
-import { Show, splitProps, type ComponentProps, type JSX, type ValidComponent } from 'solid-js'
+import {
+  Show,
+  createSignal,
+  splitProps,
+  type ComponentProps,
+  type JSX,
+  type ValidComponent,
+} from 'solid-js'
 import { Button, type ButtonProps } from '../../ui/button'
 import { Spinner } from '../../ui/spinner'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
@@ -27,7 +34,28 @@ export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps
   busyLabel?: string
 }
 
-function guardedClick(handler: unknown, disabled: () => boolean) {
+function invokeHandler(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)
+  }
+}
+
+function chainedHandler(handler: unknown, before: (event: Event) => void) {
+  return (event: Event) => {
+    before(event)
+    invokeHandler(handler, event)
+  }
+}
+
+function guardedClick(
+  handler: unknown,
+  disabled: () => boolean,
+  onActivate: (event: MouseEvent) => void = () => {}
+) {
   return (event: MouseEvent) => {
     if (disabled()) {
       event.preventDefault()
@@ -35,13 +63,8 @@ function guardedClick(handler: unknown, disabled: () => boolean) {
       return
     }
 
-    if (Array.isArray(handler)) {
-      const [callback, data] = handler as [(data: unknown, event: MouseEvent) => void, unknown]
-      callback(data, event)
-    } else if (typeof handler === 'function') {
-      const callback = handler as (event: MouseEvent) => void
-      callback(event)
-    }
+    onActivate(event)
+    invokeHandler(handler, event)
   }
 }
 
@@ -73,6 +96,8 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
   const busy = () => local.busy ?? false
   const disabled = () => busy() || !!local.disabled
   const busyStatus = () => local.busyLabel ?? 'Working'
+  const [tooltipOpen, setTooltipOpen] = createSignal(false)
+  const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)
   const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture
   const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element
   const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element
@@ -90,7 +115,17 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     role: local.as === 'a' && disabled() ? 'link' : rest.role,
     href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,
     'aria-busy': busy() || local['aria-busy'],
-    onClick: guardedClick(rest.onClick, disabled),
+    onClick: guardedClick(rest.onClick, disabled, (event) => {
+      if (!local.tooltip) return
+      setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')
+      setTooltipOpen(false)
+    }),
+    onPointerLeave: chainedHandler(rest.onPointerLeave, () => {
+      if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)
+    }),
+    onBlur: chainedHandler(rest.onBlur, () => {
+      if (tooltipSuppression() === 'focus') setTooltipSuppression(null)
+    }),
     onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,
     'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),
     'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),
@@ -118,7 +153,13 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
           </PolymorphicButton>
         }
       >
-        <Tooltip>
+        <Tooltip
+          open={tooltipOpen()}
+          onOpenChange={(open) => {
+            if (open && tooltipSuppression()) return
+            setTooltipOpen(open)
+          }}
+        >
           <TooltipTrigger
             as={PolymorphicButtonTarget}
             {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}

package/dist/r/src/components/layout/orbit-layout/index.ts

@@ -0,0 +1,8 @@
+/** Geometry-only wrappers for arranging content around a circle. */
+export {
+  OrbitItem,
+  OrbitLayout,
+  type OrbitItemProps,
+  type OrbitLayoutProps,
+  type OrbitRadius,
+} from './orbit-layout'

package/dist/r/src/components/layout/orbit-layout/orbit-layout.tsx

@@ -0,0 +1,112 @@
+import type { ComponentProps } from 'solid-js'
+import { createContext, createMemo, splitProps, useContext, type Accessor } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/** A CSS length or expression used to place an item away from the orbit center. */
+export type OrbitRadius = number | string
+export type OrbitLayoutMode = 'radial' | 'flow'
+
+const DEFAULT_ORBIT_RADIUS = 'calc(50% - 2rem)'
+const OrbitRadiusContext = createContext<Accessor<string>>()
+const OrbitModeContext = createContext<Accessor<OrbitLayoutMode>>()
+
+function resolveRadius(radius: OrbitRadius | undefined): string {
+  if (typeof radius === 'number') return `${Number.isFinite(radius) ? Math.max(0, radius) : 0}px`
+  return radius?.trim() || DEFAULT_ORBIT_RADIUS
+}
+
+/**
+ * OrbitLayout.
+ *
+ * Provides a positioned canvas and a shared radius for its OrbitItems. It does
+ * not assign list semantics or alter DOM order: callers choose semantics, and
+ * keyboard and screen-reader order remain the source order of the children.
+ */
+export type OrbitLayoutProps = Omit<ComponentProps<'div'>, 'style'> & {
+  /** JSX style props are owned by this geometry primitive. */
+  style?: never
+  /** Responsive radius used by every OrbitItem unless that item overrides it. */
+  radius?: OrbitRadius
+  /** `flow` places items in source order; `radial` positions them around the host. */
+  mode?: OrbitLayoutMode
+}
+
+export function OrbitLayout(props: OrbitLayoutProps) {
+  const [local, rest] = splitProps(props, ['class', 'radius', 'mode', 'style', 'children'])
+  const radius = createMemo(() => resolveRadius(local.radius))
+  const mode = createMemo(() => local.mode ?? 'radial')
+
+  return (
+    <OrbitRadiusContext.Provider value={radius}>
+      <OrbitModeContext.Provider value={mode}>
+        <div
+          {...rest}
+          data-slot="orbit-layout"
+          class={cn(mode() === 'flow' ? 'grid gap-3' : 'relative size-full', local.class)}
+        >
+          {local.children}
+        </div>
+      </OrbitModeContext.Provider>
+    </OrbitRadiusContext.Provider>
+  )
+}
+
+/**
+ * OrbitItem.
+ *
+ * Positions one ordinary child around its OrbitLayout. This is geometry only:
+ * the wrapper has no role, tabindex, or interaction of its own.
+ */
+export type OrbitItemProps = Omit<ComponentProps<'div'>, 'style'> & {
+  /** JSX style props are owned by this geometry primitive. */
+  style?: never
+  /** Zero-based position in the rendered sequence. */
+  index: number
+  /** Number of items sharing this orbit. */
+  count: number
+  /** Per-item override for OrbitLayout's responsive radius. */
+  radius?: OrbitRadius
+}
+
+export function OrbitItem(props: OrbitItemProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'index',
+    'count',
+    'radius',
+    'style',
+    'children',
+  ])
+  const inheritedRadius = useContext(OrbitRadiusContext)
+  const inheritedMode = useContext(OrbitModeContext)
+  const mode = () => inheritedMode?.() ?? 'radial'
+  const radius = () =>
+    local.radius !== undefined
+      ? resolveRadius(local.radius)
+      : (inheritedRadius?.() ?? DEFAULT_ORBIT_RADIUS)
+  const angle = createMemo(() => {
+    const count = Number.isFinite(local.count) ? Math.max(1, Math.trunc(local.count)) : 1
+    const rawIndex = Number.isFinite(local.index) ? Math.trunc(local.index) : 0
+    const index = ((rawIndex % count) + count) % count
+    return `${(index / count) * Math.PI * 2}rad`
+  })
+  const positionStyle = () =>
+    mode() === 'flow'
+      ? undefined
+      : {
+          top: `calc(50% + sin(${angle()}) * ${radius()})`,
+          left: `calc(50% + cos(${angle()}) * ${radius()})`,
+          translate: '-50% -50%',
+        }
+
+  return (
+    <div
+      {...rest}
+      data-slot="orbit-item"
+      class={cn(mode() === 'flow' ? undefined : 'absolute', local.class)}
+      style={positionStyle()}
+    >
+      {local.children}
+    </div>
+  )
+}

package/dist/r/src/components/layout/virtual-window/index.ts

@@ -0,0 +1,2 @@
+/** Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller. */
+export { VirtualWindow, type VirtualWindowProps } from './virtual-window'

package/dist/r/src/components/layout/virtual-window/virtual-window.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * VirtualWindow.
+ *
+ * Supplies the two geometry wrappers a virtualized viewport needs: a full-height
+ * scroll space and a translated window containing the mounted rows. The caller
+ * owns the scroll region, its semantics, keyboard model, and range calculation;
+ * this component only keeps those rows at their measured position.
+ */
+export type VirtualWindowProps = Omit<ComponentProps<'div'>, 'children' | 'style'> & {
+  /** JSX style props are owned by this geometry primitive. */
+  style?: never
+  /** The full scrollable height, in pixels. */
+  totalSize: number
+  /** The mounted window's top offset from the start of the full list, in pixels. */
+  offset?: number
+  /** Optional layout classes for the translated row container. */
+  contentClass?: string
+  children?: JSX.Element
+}
+
+function finitePixels(value: number): string {
+  return `${Number.isFinite(value) ? value : 0}px`
+}
+
+export function VirtualWindow(props: VirtualWindowProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'totalSize',
+    'offset',
+    'contentClass',
+    'style',
+  ])
+
+  return (
+    <div
+      {...rest}
+      data-slot="virtual-window-space"
+      class={cn('relative', local.class)}
+      style={{ height: finitePixels(Math.max(0, local.totalSize)) }}
+    >
+      <div
+        data-slot="virtual-window-content"
+        class={local.contentClass}
+        style={{ transform: `translateY(${finitePixels(local.offset ?? 0)})` }}
+      >
+        {local.children}
+      </div>
+    </div>
+  )
+}

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

@@ -110,6 +110,7 @@ export function CommandDialog(props: CommandDialogProps) {
         <KobalteDialog.Content
           aria-label={commandProps.label}
           cmdk-dialog=""
+          role="dialog"
           class={cn(
             'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
             'overflow-hidden rounded-xl border border-border shadow-xl',

package/dist/r/virtual-window.json

@@ -0,0 +1,22 @@
+{
+  "name": "virtual-window",
+  "type": "registry:ui",
+  "title": "Virtual Window",
+  "description": "Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller.",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/layout/virtual-window/index.ts",
+      "type": "registry:ui",
+      "target": "components/layout/virtual-window/index.ts"
+    },
+    {
+      "path": "src/components/layout/virtual-window/virtual-window.tsx",
+      "type": "registry:ui",
+      "target": "components/layout/virtual-window/virtual-window.tsx"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.82.2",
+  "version": "0.83.1",
   "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",

package/registry.json

@@ -1457,6 +1457,28 @@
         }
       ]
     },
+    {
+      "name": "orbit-layout",
+      "type": "registry:ui",
+      "title": "Orbit Layout",
+      "description": "Geometry-only wrappers for arranging content around a circle.",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/orbit-layout/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/orbit-layout/index.ts"
+        },
+        {
+          "path": "src/components/layout/orbit-layout/orbit-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/orbit-layout/orbit-layout.tsx"
+        }
+      ]
+    },
     {
       "name": "page",
       "type": "registry:ui",
@@ -1640,6 +1662,28 @@
         }
       ]
     },
+    {
+      "name": "virtual-window",
+      "type": "registry:ui",
+      "title": "Virtual Window",
+      "description": "Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller.",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/virtual-window/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/virtual-window/index.ts"
+        },
+        {
+          "path": "src/components/layout/virtual-window/virtual-window.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/virtual-window/virtual-window.tsx"
+        }
+      ]
+    },
     {
       "name": "account-menu",
       "type": "registry:ui",

package/src/components/composites/action-button/action-button.tsx

@@ -1,4 +1,11 @@
-import { Show, splitProps, type ComponentProps, type JSX, type ValidComponent } from 'solid-js'
+import {
+  Show,
+  createSignal,
+  splitProps,
+  type ComponentProps,
+  type JSX,
+  type ValidComponent,
+} from 'solid-js'
 import { Button, type ButtonProps } from '../../ui/button'
 import { Spinner } from '../../ui/spinner'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
@@ -27,7 +34,28 @@ export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps
   busyLabel?: string
 }
 
-function guardedClick(handler: unknown, disabled: () => boolean) {
+function invokeHandler(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)
+  }
+}
+
+function chainedHandler(handler: unknown, before: (event: Event) => void) {
+  return (event: Event) => {
+    before(event)
+    invokeHandler(handler, event)
+  }
+}
+
+function guardedClick(
+  handler: unknown,
+  disabled: () => boolean,
+  onActivate: (event: MouseEvent) => void = () => {}
+) {
   return (event: MouseEvent) => {
     if (disabled()) {
       event.preventDefault()
@@ -35,13 +63,8 @@ function guardedClick(handler: unknown, disabled: () => boolean) {
       return
     }
 
-    if (Array.isArray(handler)) {
-      const [callback, data] = handler as [(data: unknown, event: MouseEvent) => void, unknown]
-      callback(data, event)
-    } else if (typeof handler === 'function') {
-      const callback = handler as (event: MouseEvent) => void
-      callback(event)
-    }
+    onActivate(event)
+    invokeHandler(handler, event)
   }
 }
 
@@ -73,6 +96,8 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
   const busy = () => local.busy ?? false
   const disabled = () => busy() || !!local.disabled
   const busyStatus = () => local.busyLabel ?? 'Working'
+  const [tooltipOpen, setTooltipOpen] = createSignal(false)
+  const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)
   const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture
   const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element
   const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element
@@ -90,7 +115,17 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     role: local.as === 'a' && disabled() ? 'link' : rest.role,
     href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,
     'aria-busy': busy() || local['aria-busy'],
-    onClick: guardedClick(rest.onClick, disabled),
+    onClick: guardedClick(rest.onClick, disabled, (event) => {
+      if (!local.tooltip) return
+      setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')
+      setTooltipOpen(false)
+    }),
+    onPointerLeave: chainedHandler(rest.onPointerLeave, () => {
+      if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)
+    }),
+    onBlur: chainedHandler(rest.onBlur, () => {
+      if (tooltipSuppression() === 'focus') setTooltipSuppression(null)
+    }),
     onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,
     'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),
     'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),
@@ -118,7 +153,13 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
           </PolymorphicButton>
         }
       >
-        <Tooltip>
+        <Tooltip
+          open={tooltipOpen()}
+          onOpenChange={(open) => {
+            if (open && tooltipSuppression()) return
+            setTooltipOpen(open)
+          }}
+        >
           <TooltipTrigger
             as={PolymorphicButtonTarget}
             {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}

package/src/components/layout/orbit-layout/index.ts

@@ -0,0 +1,8 @@
+/** Geometry-only wrappers for arranging content around a circle. */
+export {
+  OrbitItem,
+  OrbitLayout,
+  type OrbitItemProps,
+  type OrbitLayoutProps,
+  type OrbitRadius,
+} from './orbit-layout'