@adea-ai/ui 0.82.2 → 0.83.1

package/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/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/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/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/src/index.ts

@@ -79,6 +79,8 @@ export * from './components/motion'
 
 /* --- Layout -------------------------------------------------------------- */
 export * from './components/layout/split-layout'
+export * from './components/layout/orbit-layout'
+export * from './components/layout/virtual-window'
 export * from './components/layout/app-shell'
 export * from './components/layout/page'
 export * from './components/layout/panel'