@adea-ai/ui 0.60.4 → 0.61.0

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

@@ -0,0 +1,214 @@
+import {
+  CommandDialog as CmdkDialog,
+  CommandEmpty as CmdkEmpty,
+  CommandGroup as CmdkGroup,
+  CommandInput as CmdkInput,
+  CommandItem as CmdkItem,
+  CommandList as CmdkList,
+  CommandLoading as CmdkLoading,
+  CommandRoot as CmdkRoot,
+  CommandSeparator as CmdkSeparator,
+  useCommandState,
+} from 'cmdk-solid'
+import { Search } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { createEffect, createSignal, splitProps } from 'solid-js'
+import { menuItem } from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * Command.
+ *
+ * The command palette: a filtered list of everything the user can do, ranked
+ * by fuzzy match. It is the one place in an app where a keyboard-first surface
+ * is the *primary* one, so it carries rules the rest of the system does not:
+ *
+ *   - Every item must be reachable by typing its name. If a user has to
+ *     remember which group it lives in, the palette has failed at its job.
+ *   - Groups exist for reading, not for navigation. The ranking crosses them.
+ *   - The empty state is not an apology — it should offer the closest thing
+ *     the app could guess, or say plainly that nothing matched.
+ *
+ * cmdk-solid supplies the filter, the scoring, the `aria-activedescendant`
+ * wiring and the arrow-key navigation.
+ */
+export function Command(props: ComponentProps<typeof CmdkRoot>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <CmdkRoot
+      class={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-xl',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function CommandDialog(props: ComponentProps<typeof CmdkDialog>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <CmdkDialog
+      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',
+        'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function CommandInput(props: ComponentProps<typeof CmdkInput>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      class="flex h-11 items-center gap-2 border-b border-border px-3"
+    >
+      <Search class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      <CmdkInput
+        class={cn(
+          'h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          local.class
+        )}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+/**
+ * The scrolling list.
+ *
+ * Two DOM corrections, and both are deliberate. cmdk builds a `role="listbox"`
+ * whose children include two elements ARIA does not allow there:
+ *
+ *   - a bare `<div cmdk-list-sizer>` with no role, wrapped around every group;
+ *   - a `<div cmdk-separator role="separator">`, and `separator` is a menu and
+ *     toolbar role — inside a listbox the only owned elements may be `option`
+ *     and `group`.
+ *
+ * Both are pure presentation: the sizer is layout, and the separator is a
+ * hairline between groups that the groups already structure. `role="presentation"`
+ * is their accurate role rather than a workaround — each is flattened out of the
+ * accessibility tree, and the options inside are reached exactly as before.
+ *
+ * Written onto the mounted nodes rather than through props, because cmdk owns
+ * this markup and does not forward a `ref`; in an effect rather than `onMount`,
+ * because cmdk renders the sizer with the first item, after the list itself.
+ */
+export function CommandList(props: ComponentProps<typeof CmdkList>) {
+  const [local, rest] = splitProps(props, ['class'])
+  const [wrapper, setWrapper] = createSignal<HTMLDivElement>()
+  const resultCount = useCommandState((state) => state.filtered.count)
+
+  createEffect(() => {
+    const root = wrapper()
+    if (!root) return
+    for (const selector of ['[cmdk-list-sizer]', '[cmdk-separator]']) {
+      root.querySelector(selector)?.setAttribute('role', 'presentation')
+    }
+
+    /*
+     * A `listbox` must own at least one `option`, so a listbox with nothing in it
+     * is invalid ARIA — which is what a search with no matches produces. When
+     * there are no results the list is inert, so it becomes presentational and
+     * the empty message carries the information instead. It keeps its `id`, so
+     * the input's `aria-controls` still resolves.
+     */
+    root
+      .querySelector('[cmdk-list]')
+      ?.setAttribute('role', resultCount() > 0 ? 'listbox' : 'presentation')
+  })
+
+  return (
+    <div ref={setWrapper} class="contents">
+      <CmdkList
+        class={cn('max-h-80 scroll-py-1 overflow-y-auto overflow-x-hidden p-1', local.class)}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+export function CommandEmpty(props: ComponentProps<typeof CmdkEmpty>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <CmdkEmpty
+      /*
+       * A status rather than plain text: when the list is presentational, this is
+       * the only thing that tells a screen reader the search matched nothing.
+       */
+      role="status"
+      class={cn('text-muted-foreground py-8 text-center text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function CommandGroup(props: ComponentProps<typeof CmdkGroup>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <CmdkGroup
+      class={cn(
+        'text-foreground overflow-hidden p-1',
+        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-2xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <CmdkItem
+      class={cn(
+        menuItem,
+        'data-[selected=true]:bg-surface-hover data-[selected=true]:text-foreground',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function CommandSeparator(props: ComponentProps<typeof CmdkSeparator>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <CmdkSeparator class={cn('bg-border -mx-1 my-1 h-px', local.class)} {...rest} />
+}
+
+export function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <CmdkLoading
+      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** The keyboard hint a palette item usually carries. */
+export function CommandShortcut(props: {
+  class?: string
+  children?: ComponentProps<'span'>['children']
+}) {
+  return (
+    <span
+      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
+    >
+      {props.children}
+    </span>
+  )
+}

package/src/components/ui/command/index.ts

@@ -0,0 +1,12 @@
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+  CommandSeparator,
+  CommandShortcut,
+} from './command'

package/src/components/ui/context-menu/context-menu.tsx

@@ -0,0 +1,163 @@
+import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'
+import { Check, ChevronRight, Circle } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import {
+  menuContentPadding,
+  menuItem,
+  menuLabel,
+  menuSeparator,
+  overlayMotion,
+  overlaySurface,
+} from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * ContextMenu.
+ *
+ * The same actions as DropdownMenu, opened by right-click. The trigger is the
+ * region the menu belongs to — a file row, a canvas, a code block — and the
+ * menu opens at the pointer.
+ *
+ * The accessibility rule for this component is not about its own markup: a
+ * context menu must never hold the *only* route to an action, because a
+ * right-click is unavailable on touch and undiscoverable on a trackpad. Every
+ * item here should also appear somewhere reachable, usually a DropdownMenu on
+ * the same row.
+ */
+export function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {
+  return <KobalteContextMenu {...props} />
+}
+
+export function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {
+  return <KobalteContextMenu.Trigger {...props} />
+}
+
+export function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteContextMenu.Portal>
+      <KobalteContextMenu.Content
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      />
+    </KobalteContextMenu.Portal>
+  )
+}
+
+export function ContextMenuItem(
+  props: ComponentProps<typeof KobalteContextMenu.Item> & {
+    variant?: 'default' | 'destructive'
+    shortcut?: string
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])
+
+  return (
+    <KobalteContextMenu.Item
+      class={cn(
+        menuItem,
+        {
+          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':
+            local.variant === 'destructive',
+        },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      {local.shortcut ? (
+        <span class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest">
+          {local.shortcut}
+        </span>
+      ) : null}
+    </KobalteContextMenu.Item>
+  )
+}
+
+export function ContextMenuCheckboxItem(
+  props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>
+) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      {local.children}
+      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Check class="size-4" />
+      </KobalteContextMenu.ItemIndicator>
+    </KobalteContextMenu.CheckboxItem>
+  )
+}
+
+export function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {
+  return <KobalteContextMenu.RadioGroup {...props} />
+}
+
+export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      {local.children}
+      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Circle class="size-2 fill-current" />
+      </KobalteContextMenu.ItemIndicator>
+    </KobalteContextMenu.RadioItem>
+  )
+}
+
+export function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />
+}
+
+export function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {
+  return <KobalteContextMenu.Group {...props} />
+}
+
+export function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />
+}
+
+export function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {
+  return <KobalteContextMenu.Sub {...props} />
+}
+
+export function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>
+      {local.children}
+      <ChevronRight class="ms-auto size-4" />
+    </KobalteContextMenu.SubTrigger>
+  )
+}
+
+export function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteContextMenu.Portal>
+      <KobalteContextMenu.SubContent
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      />
+    </KobalteContextMenu.Portal>
+  )
+}

package/src/components/ui/context-menu/index.ts

@@ -0,0 +1,15 @@
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from './context-menu'

package/src/components/ui/detail-panel/detail-panel.tsx

@@ -0,0 +1,161 @@
+import { createUniqueId, Show, splitProps, type ComponentProps, type JSX } from 'solid-js'
+import { X } from 'lucide-solid'
+import { Button } from '../button'
+import { cn } from '#lib/utils'
+
+/**
+ * DetailPanel.
+ *
+ * The companion surface to a list: something is selected over there, and its
+ * detail is here. Every application grows one — an artifact, a task, a member, a
+ * file, a commit — and every one of them is a header, a body, and a way to close.
+ *
+ * It is an `<aside>` with a label, not a `<div>`. That is the whole reason it is a
+ * component: a detail panel is a *second region* next to the main content, and a
+ * screen reader user needs to be able to skip to it, name it, and know when it
+ * appeared. A div with a heading inside is invisible to that navigation. The
+ * label is wired to the title by id, so the panel announces itself as the thing
+ * it is showing rather than as "complementary".
+ *
+ * The header is sticky and the body scrolls, because a detail panel is usually
+ * taller than its viewport and the close affordance must not scroll away — the
+ * panel is dismissed far more often than it is read to the end.
+ *
+ * `DetailPanelSection` is the repeating unit of a detail body: a small caption
+ * and its value. Definition-list semantics, because these are facets of one
+ * subject rather than a table with columns to compare.
+ */
+export type DetailPanelProps = ComponentProps<'aside'> & {
+  /** The panel's name, for its accessible label. Usually the selected item's name. */
+  label: string
+}
+
+export function DetailPanel(props: DetailPanelProps) {
+  const [local, rest] = splitProps(props, ['label', 'class', 'children'])
+
+  return (
+    <aside
+      class={cn(
+        'flex h-full min-h-0 flex-col overflow-hidden border-l border-border bg-card',
+        local.class
+      )}
+      aria-label={local.label}
+      {...rest}
+    >
+      {local.children}
+    </aside>
+  )
+}
+
+export type DetailPanelHeaderProps = ComponentProps<'header'> & {
+  /** A small caption above the title: what kind of thing this is. */
+  eyebrow?: string
+  title: string
+  /** Trailing controls, before the close button. */
+  actions?: JSX.Element
+  onDismiss?: () => void
+  /** Accessible name for the dismiss control. Defaults to `Dismiss <title>`. */
+  dismissLabel?: string
+}
+
+export function DetailPanelHeader(props: DetailPanelHeaderProps) {
+  const [local, rest] = splitProps(props, [
+    'eyebrow',
+    'title',
+    'actions',
+    'onDismiss',
+    'dismissLabel',
+    'class',
+    'children',
+  ])
+  const titleId = createUniqueId()
+
+  return (
+    <header
+      class={cn(
+        'sticky top-0 z-(--z-sticky) flex shrink-0 items-start justify-between gap-3 border-b border-border bg-card px-4 py-3',
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="min-w-0">
+        <Show when={local.eyebrow}>
+          <p class="text-2xs font-semibold tracking-wide text-muted-foreground uppercase">
+            {local.eyebrow}
+          </p>
+        </Show>
+        <h2 id={titleId} class="truncate text-sm font-semibold text-foreground">
+          {local.title}
+        </h2>
+        {local.children}
+      </div>
+      <div class="flex shrink-0 items-center gap-1">
+        {local.actions}
+        <Show when={local.onDismiss}>
+          {(dismiss) => (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={local.dismissLabel ?? `Dismiss ${local.title}`}
+              onClick={() => dismiss()()}
+            >
+              <X aria-hidden="true" />
+            </Button>
+          )}
+        </Show>
+      </div>
+    </header>
+  )
+}
+
+export function DetailPanelBody(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <div class={cn('min-h-0 flex-1 overflow-y-auto px-4 py-3', local.class)} {...rest}>
+      {local.children}
+    </div>
+  )
+}
+
+/**
+ * A group of related facets. Renders a `<dl>`, so its children are
+ * `DetailPanelField`s; a section whose content is not name/value pairs — a
+ * preview, a list, a form — belongs directly in `DetailPanelBody` with its own
+ * layout rather than inside this.
+ */
+export function DetailPanelSection(props: ComponentProps<'dl'> & { title: string }) {
+  const [local, rest] = splitProps(props, ['title', 'class', 'children'])
+
+  return (
+    <div class="grid gap-2">
+      <h3 class="text-2xs font-semibold tracking-wide text-muted-foreground uppercase">
+        {local.title}
+      </h3>
+      <dl class={cn('grid gap-2', local.class)} {...rest}>
+        {local.children}
+      </dl>
+    </div>
+  )
+}
+
+/**
+ * One facet: a name and its value. `muted` is for a value that is absent or
+ * unknown, so "—" reads as *no value* rather than as a value that happens to be
+ * a dash.
+ */
+export function DetailPanelField(props: {
+  name: string
+  value?: JSX.Element
+  /** Render the value in the muted colour: an absent, unknown, or inherited value. */
+  muted?: boolean
+}) {
+  return (
+    <div class="flex items-baseline justify-between gap-4 text-sm">
+      <dt class="text-muted-foreground">{props.name}</dt>
+      <dd class={cn('text-right', props.muted ? 'text-muted-foreground' : 'text-foreground')}>
+        {props.value ?? '—'}
+      </dd>
+    </div>
+  )
+}

package/src/components/ui/detail-panel/index.ts

@@ -0,0 +1,9 @@
+export {
+  DetailPanel,
+  DetailPanelBody,
+  DetailPanelField,
+  DetailPanelHeader,
+  DetailPanelSection,
+  type DetailPanelHeaderProps,
+  type DetailPanelProps,
+} from './detail-panel'