@kitn.ai/ui 0.16.0 → 0.18.0

package/src/ui/command.tsx

@@ -0,0 +1,99 @@
+import { For, Show, type JSX } from 'solid-js';
+import { cn } from '../utils/cn';
+import { renderIcon } from './icon';
+import { Kbd } from './kbd';
+
+export interface CommandRow {
+  id: string;
+  label: string;
+  icon?: string;
+  description?: string;
+  /** Optional keyboard shortcut shown as right-aligned key caps; uses the
+   *  kai-kbd `keys` syntax (e.g. "Mod+K", "Alt+1"). */
+  shortcut?: string;
+}
+
+export interface CommandGroup {
+  group?: string;
+  items: CommandRow[];
+}
+
+export interface CommandListProps {
+  groups: CommandGroup[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  emptyLabel?: string;
+  /** Accessible label for the listbox container. Defaults to 'Command palette'. */
+  ariaLabel?: string;
+  /** id applied to the listbox container, for aria-controls wiring. */
+  id?: string;
+}
+
+/**
+ * `CommandList` — a presentational grouped listbox for command/mention palettes.
+ *
+ * Renders a `role="listbox"` container. Groups with a `group` name get a muted
+ * section header. Each row is a `role="option"` button with icon, label, and
+ * optional description. Clicking a row calls `onSelect(id)`. When there are no
+ * groups/items it renders `emptyLabel` (default "No results").
+ */
+export function CommandList(props: CommandListProps): JSX.Element {
+  const hasItems = () => props.groups.some((g) => g.items.length > 0);
+
+  return (
+    <div role="listbox" aria-label={props.ariaLabel ?? 'Command palette'} id={props.id}>
+      <Show
+        when={hasItems()}
+        fallback={
+          <div class="px-3 py-4 text-center text-sm text-muted-foreground select-none">
+            {props.emptyLabel ?? 'No results'}
+          </div>
+        }
+      >
+        <For each={props.groups}>
+          {(group) => (
+            <Show when={group.items.length > 0}>
+              <>
+                <Show when={group.group}>
+                  <div class="px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground select-none">
+                    {group.group}
+                  </div>
+                </Show>
+                <For each={group.items}>
+                  {(row) => (
+                    <button
+                      role="option"
+                      aria-selected={row.id === props.activeId}
+                      class={cn(
+                        'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors',
+                        row.id === props.activeId
+                          ? 'bg-muted text-foreground'
+                          : 'text-foreground hover:bg-muted',
+                      )}
+                      // Prevent blur on the search input so keyboard nav keeps working.
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={() => props.onSelect(row.id)}
+                    >
+                      <Show when={row.icon}>{(icon) => renderIcon(icon(), { imgClass: 'size-4 shrink-0 rounded object-cover', spanClass: 'flex size-4 shrink-0 items-center justify-center text-sm', ariaHidden: true })}</Show>
+                      <span class="font-medium whitespace-nowrap shrink-0">{row.label}</span>
+                      <Show when={row.description}>
+                        <span class="min-w-0 truncate text-muted-foreground">{row.description}</span>
+                      </Show>
+                      <Show when={row.shortcut}>
+                        {(sc) => (
+                          <span part="shortcut" class="ml-auto shrink-0 pl-3">
+                            <Kbd keys={sc()} platform="auto" size="sm" />
+                          </span>
+                        )}
+                      </Show>
+                    </button>
+                  )}
+                </For>
+              </>
+            </Show>
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}

package/src/ui/dialog.tsx

@@ -0,0 +1,217 @@
+import {
+  createEffect, createSignal, createUniqueId, Show, type Accessor, type JSX,
+} from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+import { createPresence } from './overlay';
+
+/** Imperative open controller, handed to a parent (e.g. the kai-dialog facade)
+ *  via `controllerRef` so it can drive/observe open state with `wireDisclosure`. */
+export interface DialogController { open: Accessor<boolean>; setOpen: (v: boolean) => void; }
+
+export interface DialogProps {
+  /** Dialog body — the default slot / main content. */
+  children?: JSX.Element;
+  /** Optional header region (e.g. a title). Rendered above the body with a divider. */
+  header?: JSX.Element;
+  /** Optional footer region (e.g. action buttons). Rendered below the body with a divider. */
+  footer?: JSX.Element;
+  /** Controlled open state. When set, the component never changes it itself —
+   *  drive it from `onOpenChange`. Omit for uncontrolled (internal) state. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  /** Fires whenever the dialog wants to open or close (Escape / backdrop / method). */
+  onOpenChange?: (open: boolean) => void;
+  /** Receive the open controller (open accessor + setOpen) once mounted. */
+  controllerRef?: (api: DialogController) => void;
+  /** Receive the focusable panel node so a facade's `focus()` can target it. */
+  panelRef?: (el: HTMLElement) => void;
+  /** Accessible name for the dialog when no `header` is provided. */
+  'aria-label'?: string;
+  /** Extra class applied to the panel (e.g. a wider `max-w-*`). */
+  class?: string;
+}
+
+/** Focusable-element selector for the Tab focus trap. */
+const FOCUSABLE_SELECTOR = [
+  'a[href]', 'button:not([disabled])', 'input:not([disabled])',
+  'select:not([disabled])', 'textarea:not([disabled])',
+  'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+/** Roughly "rendered + not visibility:hidden" — skips display:none / hidden nodes. */
+function isVisible(el: HTMLElement): boolean {
+  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
+    && getComputedStyle(el).visibility !== 'hidden';
+}
+
+/**
+ * Tabbable descendants of `panel`, in tab order. Crosses `<slot>` boundaries:
+ * when used as a web-component facade the panel's real content is light-DOM nodes
+ * assigned to its slots, not panel descendants, so a plain querySelectorAll would
+ * miss them. We walk the tree and expand each slot to its assigned elements.
+ */
+function getTabbables(panel: HTMLElement): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  const walk = (node: Element) => {
+    for (const child of Array.from(node.children)) {
+      if (child instanceof HTMLSlotElement) {
+        for (const assigned of child.assignedElements()) {
+          if (assigned instanceof HTMLElement) {
+            if (assigned.matches(FOCUSABLE_SELECTOR)) out.push(assigned);
+            walk(assigned);
+          }
+        }
+      } else if (child instanceof HTMLElement) {
+        if (child.matches(FOCUSABLE_SELECTOR)) out.push(child);
+        walk(child);
+      }
+    }
+  };
+  walk(panel);
+  return out.filter(isVisible);
+}
+
+/** The deepest active element, drilling through nested shadow roots (so a focused
+ *  node inside a shadow tree resolves to the real element, not its host). */
+function deepActiveElement(): HTMLElement | null {
+  let el = document.activeElement as HTMLElement | null;
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement as HTMLElement;
+  return el;
+}
+
+/**
+ * Dialog is the presentational centered modal surface. It renders through a Portal
+ * (so it escapes any clipping/stacking ancestor), dims the page with a backdrop,
+ * and centers a panel with a sensible max width/height and internal scroll. It
+ * closes on Escape and on a backdrop click (never on a panel click), moves focus
+ * into the panel on open and restores it on close, and runs a basic Tab focus
+ * trap so keyboard focus cycles within the panel while open. The developer owns
+ * when it opens (drive `open` / `defaultOpen`); this owns being the modal.
+ *
+ * Styleable parts: `backdrop` · `panel` · `header` · `body` · `footer`.
+ */
+export function Dialog(props: DialogProps) {
+  const config = useChatConfig();
+  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
+  const headerId = `kai-dialog-title-${createUniqueId()}`;
+
+  const isControlled = () => props.open !== undefined;
+  const isOpen = () => (isControlled() ? !!props.open : internalOpen());
+  const setOpen = (v: boolean) => {
+    if (!isControlled()) setInternalOpen(v);
+    props.onOpenChange?.(v);
+  };
+
+  // Hand the open controller up to a parent (e.g. the kai-dialog facade) so it can
+  // drive/observe open state via wireDisclosure.
+  props.controllerRef?.({ open: isOpen, setOpen });
+
+  const presence = createPresence(isOpen);
+
+  let backdrop: HTMLElement | undefined;
+  let panel: HTMLElement | undefined;
+  // The element that had focus before we opened, restored on close.
+  let restoreFocus: HTMLElement | null = null;
+  // Track where a click started so a drag that ends on the backdrop (e.g. a text
+  // selection begun inside the panel) does not falsely dismiss.
+  let pointerDownOnBackdrop = false;
+
+  // Move focus into the panel on open; restore it on close. Seeded prev=false so a
+  // `defaultOpen` (open-at-mount) still runs the open branch.
+  createEffect((wasOpen: boolean) => {
+    const open = isOpen();
+    if (open && !wasOpen) {
+      restoreFocus = deepActiveElement();
+      queueMicrotask(() => panel?.focus());
+    } else if (!open && wasOpen) {
+      const target = restoreFocus;
+      restoreFocus = null;
+      if (target && target.isConnected) queueMicrotask(() => target.focus());
+    }
+    return open;
+  }, false);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      setOpen(false);
+      return;
+    }
+    if (e.key !== 'Tab' || !panel) return;
+    // Basic focus trap: keep Tab / Shift+Tab cycling within the panel.
+    const items = getTabbables(panel);
+    if (!items.length) {
+      e.preventDefault();
+      panel.focus();
+      return;
+    }
+    const active = deepActiveElement();
+    const idx = active ? items.indexOf(active) : -1;
+    if (e.shiftKey) {
+      if (idx <= 0) { e.preventDefault(); items[items.length - 1].focus(); }
+    } else if (idx === -1 || idx === items.length - 1) {
+      e.preventDefault();
+      items[0].focus();
+    }
+  };
+
+  const onClick = (e: MouseEvent) => {
+    if (pointerDownOnBackdrop && e.target === backdrop) setOpen(false);
+    pointerDownOnBackdrop = false;
+  };
+
+  return (
+    <Show when={presence.present()}>
+      <Portal mount={config.portalMount()}>
+        <div
+          ref={(el) => { backdrop = el; presence.setRef(el); }}
+          part="backdrop"
+          data-expanded={presence.state() === 'open' ? '' : undefined}
+          data-closed={presence.state() === 'closed' ? '' : undefined}
+          onPointerDown={(e) => { pointerDownOnBackdrop = e.target === e.currentTarget; }}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          class={cn(
+            'fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4',
+            'animate-in fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0 motion-reduce:animate-none',
+          )}
+        >
+          <div
+            ref={(el) => { panel = el; props.panelRef?.(el); }}
+            part="panel"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={props.header ? headerId : undefined}
+            aria-label={props.header ? undefined : props['aria-label']}
+            tabindex={-1}
+            data-expanded={presence.state() === 'open' ? '' : undefined}
+            data-closed={presence.state() === 'closed' ? '' : undefined}
+            class={cn(
+              'flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-xl outline-none',
+              'animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 motion-reduce:animate-none',
+              props.class,
+            )}
+          >
+            <Show when={props.header}>
+              <header part="header" id={headerId} class="shrink-0 border-b border-border px-5 py-4 text-base font-semibold text-foreground">
+                {props.header}
+              </header>
+            </Show>
+            <div part="body" class="min-h-0 flex-1 overflow-auto px-5 py-4 text-sm text-foreground">
+              {props.children}
+            </div>
+            <Show when={props.footer}>
+              <footer part="footer" class="flex shrink-0 items-center justify-end gap-2 border-t border-border px-5 py-3">
+                {props.footer}
+              </footer>
+            </Show>
+          </div>
+        </div>
+      </Portal>
+    </Show>
+  );
+}