@kitn.ai/ui 0.28.0 → 0.30.0

package/src/ui/editable-label.tsx

@@ -1,112 +0,0 @@
-import { type JSX, Show, createSignal, createEffect, untrack } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Input } from './input';
-
-export interface EditableLabelProps {
-  /** The label text. */
-  value: string;
-  /** Controlled edit state. When it flips true the field opens; double-click and
-   *  the host's `edit()` open it too. */
-  editing?: boolean;
-  /** Placeholder shown while editing (and as muted text when the value is empty). */
-  placeholder?: string;
-  /** Disable entering edit mode. */
-  disabled?: boolean;
-  /** Fires on commit (Enter / blur) with the new value — ONLY when it changed. */
-  onRename?: (value: string) => void;
-  /** Fires on Esc (cancel); the text is restored. */
-  onCancel?: () => void;
-  class?: string;
-}
-
-/**
- * `EditableLabel`: inline rename. Shows `value` as text; double-click (or the
- * `editing` prop, or a host `edit()`) swaps in an autofocused `Input` with the
- * text pre-selected. Enter or blur commits (fires `onRename` only when the value
- * changed); Esc cancels (fires `onCancel`, restores the text). Both exit editing.
- *
- * Parts: `text` (the read view), `input` (the field while editing).
- */
-export function EditableLabel(props: EditableLabelProps): JSX.Element {
-  // `editing` is seeded from the controlled prop and follows it; double-click /
-  // commit / cancel toggle it locally without touching the prop (no feedback loop).
-  const [editing, setEditing] = createSignal(!!props.editing);
-  createEffect(() => setEditing(!!props.editing));
-
-  // The displayed text. Seeded from `value`, kept in sync with it, and updated
-  // optimistically on a successful rename so the read view shows the new label.
-  const [text, setText] = createSignal(props.value);
-  createEffect(() => setText(props.value));
-
-  let root: HTMLElement | undefined;
-  // Set before an Enter/Esc unmounts the field so its teardown blur does not
-  // double-commit (mirrors the AMUX inline-rename guard).
-  let suppressBlur = false;
-
-  const focusSelect = () => {
-    const input = root?.querySelector('input');
-    if (input) { input.focus(); input.select(); }
-  };
-  createEffect(() => { if (editing()) queueMicrotask(focusSelect); });
-
-  const enterEdit = () => { if (!props.disabled) setEditing(true); };
-
-  const commit = (next: string) => {
-    if (!untrack(editing)) return; // idempotent: a teardown blur after Enter is a no-op
-    setEditing(false);
-    if (next !== untrack(text)) { setText(next); props.onRename?.(next); }
-  };
-
-  const cancel = () => {
-    if (!untrack(editing)) return;
-    setEditing(false);
-    props.onCancel?.();
-  };
-
-  const onFieldKeyDown = (e: KeyboardEvent) => {
-    const el = e.currentTarget as HTMLInputElement;
-    if (e.key === 'Enter') { e.preventDefault(); suppressBlur = true; commit(el.value); }
-    else if (e.key === 'Escape') { e.preventDefault(); suppressBlur = true; cancel(); }
-  };
-
-  const onFieldBlur = (v: string) => {
-    if (suppressBlur) { suppressBlur = false; return; }
-    commit(v);
-  };
-
-  return (
-    <span ref={root} class={cn('inline-flex max-w-full items-center', props.class)}>
-      <Show
-        when={editing()}
-        fallback={
-          <span
-            part="text"
-            tabindex={props.disabled ? undefined : 0}
-            class={cn(
-              'inline-block max-w-full truncate rounded px-1 py-0.5 text-sm text-foreground',
-              props.disabled ? 'cursor-default opacity-60' : 'cursor-text hover:bg-muted',
-              !text() && 'text-muted-foreground',
-            )}
-            onDblClick={enterEdit}
-            onKeyDown={(e) => {
-              if (!props.disabled && (e.key === 'Enter' || e.key === 'F2')) { e.preventDefault(); enterEdit(); }
-            }}
-          >
-            {text() || props.placeholder || ''}
-          </span>
-        }
-      >
-        <Input
-          value={text()}
-          placeholder={props.placeholder}
-          disabled={props.disabled}
-          size="sm"
-          class="h-7 py-0"
-          aria-label={props.placeholder ?? 'Edit label'}
-          onKeyDown={onFieldKeyDown}
-          onValueChange={onFieldBlur}
-        />
-      </Show>
-    </span>
-  );
-}

package/src/ui/hover-card.tsx

@@ -1,345 +0,0 @@
-import {
-  createContext, useContext, createSignal, createUniqueId, Show, splitProps, onCleanup,
-  type JSX, type Accessor,
-} from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { type Placement } from '@floating-ui/dom';
-import { cn } from '../utils/cn';
-import { useChatConfig } from '../primitives/chat-config';
-import { createPresence, usePosition, useDismiss, As } from './overlay';
-
-interface HoverCardCtx {
-  open: Accessor<boolean>;
-  enter: () => void;
-  leave: () => void;
-  close: () => void;
-  setTrigger: (el: HTMLElement) => void;
-  setContent: (el: HTMLElement) => void;
-  trigger: Accessor<HTMLElement | undefined>;
-  content: Accessor<HTMLElement | undefined>;
-  /** Ties a focused trigger to the card it reveals. Without it a keyboard tab
-   *  stop announces nothing, which is a focus stop that wastes the user's time. */
-  contentId: string;
-  /** Whether this card refuses to open. Read by the TRIGGER, not just by
-   *  `enter()`: a card that cannot open must not be in the tab order either. */
-  disabled: Accessor<boolean>;
-}
-const Ctx = createContext<HoverCardCtx>();
-const useHoverCard = () => {
-  const c = useContext(Ctx);
-  if (!c) throw new Error('HoverCard parts must be used within <HoverCardRoot>');
-  return c;
-};
-
-/** Imperative open controller, handed to a parent (e.g. the kai-hover-card facade)
- *  via `controllerRef` so it can drive/observe open state. */
-export interface HoverCardController { open: Accessor<boolean>; setOpen: (v: boolean) => void; }
-
-export interface HoverCardRootProps {
-  children: JSX.Element;
-  openDelay?: number;
-  closeDelay?: number;
-  /** Initial open state (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** When true, hover/focus never opens the card. */
-  disabled?: boolean;
-  /** Receive the open controller (open accessor + setOpen) once mounted. */
-  controllerRef?: (api: HoverCardController) => void;
-}
-
-export function HoverCardRoot(props: HoverCardRootProps) {
-  const [open, setOpen] = createSignal(props.defaultOpen ?? false);
-  const [trigger, setTrigger] = createSignal<HTMLElement>();
-  const [content, setContent] = createSignal<HTMLElement>();
-  const contentId = createUniqueId();
-  let timer: number | undefined;
-  props.controllerRef?.({ open, setOpen });
-
-  // ONE shared timer drives both trigger and content. Entering either cancels
-  // any pending close and schedules an open; leaving either cancels any pending
-  // open and schedules a close. Because the pointer transit trigger -> content
-  // fires leave() then enter() against the SAME timer, the close is cancelled
-  // before it can run, so the card never flickers and there are no stale-timer
-  // sporadics (the HC-1 fix).
-  const enter = () => {
-    if (props.disabled) return;
-    clearTimeout(timer);
-    timer = window.setTimeout(() => setOpen(true), props.openDelay ?? 0);
-  };
-  const leave = () => {
-    clearTimeout(timer);
-    // closeDelay default is 300ms (Radix-style) as a belt-and-suspenders fallback
-    // for diagonal pointer escapes that miss the transparent safe bridge.
-    timer = window.setTimeout(() => setOpen(false), props.closeDelay ?? 300);
-  };
-  const close = () => { clearTimeout(timer); setOpen(false); };
-  onCleanup(() => clearTimeout(timer));
-
-  return (
-    <Ctx.Provider value={{
-      open, enter, leave, close,
-      setTrigger, setContent,
-      trigger, content,
-      contentId,
-      disabled: () => props.disabled ?? false,
-    }}>
-      {props.children}
-    </Ctx.Provider>
-  );
-}
-
-export interface HoverCardTriggerProps {
-  children: JSX.Element;
-  class?: string;
-  /**
-   * Whether the trigger is its own tab stop. Omit for the automatic behaviour,
-   * which is right for every case in this repo: the trigger takes focus only
-   * when nothing inside it already can.
-   *
-   * Pass `false` to keep a trigger out of the tab order entirely, or `true` to
-   * force a stop. Both are escape hatches — reach for them when the automatic
-   * answer is wrong, not to restate it.
-   */
-  focusable?: boolean;
-}
-
-/** Anything the platform puts in the tab order by default, plus anything a
- *  consumer opted in with `tabindex`. `tabindex="-1"` is deliberately excluded:
- *  it is programmatically focusable but the Tab key skips it, so a trigger
- *  containing only such an element still needs a stop of its own. */
-const FOCUSABLE_CHILD =
-  'a[href],button,input,select,textarea,summary,[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex^="-"])';
-
-/** Does this subtree already offer the keyboard a way in? Slotted content is
- *  checked through `assignedElements()`, because a `<slot>` in the shadow tree
- *  contains none of the light-DOM nodes it projects — the `kai-hover-card`
- *  facade wraps a bare `<slot />`, so without this branch every use of that
- *  element would be told its children are inert.
- *
- *  ★ WHEN this runs is as load-bearing as what it asks. At ref time the facade's
- *  trigger contains `<slot></slot>` with NOTHING assigned yet, so a single call
- *  from the ref answers "inert" for a slot that is about to receive a focusable
- *  `<a>` — and the trigger stamps a second tab stop on top of the child's. That
- *  is the very regression the `assignedElements()` branch was added to prevent,
- *  reintroduced by timing rather than by logic. Measured with a real Tab key:
- *  4 stops across a 3-widget fixture. So the caller re-runs this on
- *  `slotchange`; see `HoverCardTrigger`. */
-const hasFocusableChild = (root: HTMLElement): boolean => {
-  if (root.querySelector(FOCUSABLE_CHILD)) return true;
-  return Array.from(root.querySelectorAll('slot')).some((slot) =>
-    (slot as HTMLSlotElement).assignedElements().some(
-      (el) => el.matches(FOCUSABLE_CHILD) || el.querySelector(FOCUSABLE_CHILD),
-    ),
-  );
-};
-
-/**
- * ★ THE TRIGGER IS A TAB STOP WHEN, AND ONLY WHEN, ITS CHILDREN ARE NOT.
- *
- * `onFocusIn`/`onFocusOut` were here from the start and the focus-open path was
- * plainly intended, but the span never set `tabindex`, so the Tab key could not
- * land on it and neither handler could fire on a keyboard. It went unnoticed for
- * as long as it did because `focusin` BUBBLES and every consumer at the time put
- * something focusable inside the trigger — `source.tsx` an `<a>`, `context.tsx`
- * a `<Button>` — so the card opened via the child and the span's own inertness
- * never showed. The first trigger with inert children (an attachment tile: a
- * div, an img, an svg) had no tab stop anywhere in it.
- *
- * Hence delegation rather than an unconditional `tabindex`: adding one always
- * would give every existing consumer TWO stops for one card, which is a worse
- * bug than the one being fixed. The check runs in the ref AND again on every
- * `slotchange`, because slot assignment happens after the ref and a one-shot
- * check calls a not-yet-filled `<slot>` inert (see `hasFocusableChild`).
- *
- * ★ THE FOCUS LISTENERS ARE NATIVE, NOT SOLID'S DELEGATED `onFocusIn`. Solid
- * delegates a fixed set of events from the document and retargets them into
- * component trees; inside these shadow roots that path runs for a PROGRAMMATIC
- * `.focus()` and, in the deeper trees, not for a real Tab. Measured: tabbing to
- * an attachment tile in a mounted `<kai-chat>` left the card shut and
- * `aria-describedby` null while `.focus()` on the same element opened it — so
- * every keyboard user got a tab stop that announced nothing and showed nothing,
- * which is worse than no stop at all. `addEventListener` in the ref does not
- * care how focus arrived. Anything in this kit relying on delegated focus
- * events inside a shadow root is suspect for the same reason.
- *
- * `aria-describedby` is what makes the stop worth arriving at: the card is
- * DESCRIPTIVE, not an action, so the trigger gets no `role="button"` — that
- * would promise an activation that does not exist — and instead points at the
- * content it reveals so a screen reader reads it out.
- */
-export function HoverCardTrigger(props: HoverCardTriggerProps) {
-  const ctx = useHoverCard();
-  const [detectedInert, setDetectedInert] = createSignal(false);
-  // `&& !disabled` last, and it beats an explicit `focusable` — a disabled card
-  // early-returns out of `enter()`, so a stop here could never open anything.
-  // Landing on it would announce nothing and reveal nothing, which is the dead
-  // stop the note above argues against; forcing one is not an escape hatch
-  // anybody should get.
-  const isFocusable = () => (props.focusable ?? detectedInert()) && !ctx.disabled();
-
-  return (
-    <As
-      as="span"
-      class={cn(
-        'inline-block',
-        // A tab stop nobody can SEE is barely an improvement on no tab stop —
-        // WCAG 2.4.7. Only when this element is the stop; a delegating trigger
-        // must not draw a ring around its child's own focus state.
-        //
-        // AN OUTLINE, NOT A RING, and both halves of that were measured rather
-        // than assumed:
-        //
-        //  1. ★ A TAILWIND v4 UTILITY THAT ROUTES THROUGH `@property` IS INERT
-        //     INSIDE THESE SHADOW ROOTS, and that is a trap far wider than this
-        //     line. v4 gives `--tw-*` custom properties their defaults with
-        //     `@property`, and an `@property` rule delivered through a shadow
-        //     root's `adoptedStyleSheets` never registers — so the var resolves
-        //     to nothing, the declaration is invalid, and the property falls
-        //     back to its initial value. Measured in Chrome, twice:
-        //     `ring-2 ring-offset-1` set `--tw-ring-shadow` correctly and
-        //     computed `box-shadow: none`; `inset-ring-2` did the same; and
-        //     `outline-2` alone computed `outline-style: none` while width,
-        //     colour and offset all landed, because only the style goes
-        //     through `var(--tw-outline-style)`. Hence the literal
-        //     `[outline-style:solid]` — the one part that cannot be a var.
-        //  2. The offset is NEGATIVE so the outline lands inside the border
-        //     box. A trigger that fills its container (`block size-full` inside
-        //     the attachment tile's `overflow-hidden rounded-lg`) would
-        //     otherwise have its focus indicator painted straight into the
-        //     clip, and a trigger cannot know whether its container clips.
-        isFocusable() &&
-          'rounded-sm focus-visible:[outline-style:solid] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',
-        props.class,
-      )}
-      ref={(el: HTMLElement) => {
-        ctx.setTrigger(el);
-
-        // Native listeners, deliberately — see the note above. `focusin` /
-        // `focusout` rather than `focus` / `blur` because these have to fire
-        // for a focusable CHILD too, and only the -in/-out pair bubbles.
-        const enter = () => ctx.enter();
-        const leave = () => ctx.leave();
-        el.addEventListener('focusin', enter);
-        el.addEventListener('focusout', leave);
-        onCleanup(() => {
-          el.removeEventListener('focusin', enter);
-          el.removeEventListener('focusout', leave);
-        });
-
-        // Ask now for the direct-children case, and again whenever a slot is
-        // filled or emptied. Both are needed: `slotchange` never fires for a
-        // trigger with no slot in it, and the ref-time answer is wrong for one
-        // that has.
-        const evaluate = () => setDetectedInert(!hasFocusableChild(el));
-        evaluate();
-        for (const slot of Array.from(el.querySelectorAll('slot'))) {
-          slot.addEventListener('slotchange', evaluate);
-          onCleanup(() => slot.removeEventListener('slotchange', evaluate));
-        }
-      }}
-      tabIndex={isFocusable() ? 0 : undefined}
-      aria-describedby={isFocusable() && ctx.open() ? ctx.contentId : undefined}
-      onPointerEnter={ctx.enter}
-      onPointerLeave={ctx.leave}
-    >
-      {props.children}
-    </As>
-  );
-}
-
-export interface HoverCardContentProps { children: JSX.Element; class?: string; placement?: Placement; }
-
-// Visual gap between trigger and the visible card. Also the depth of the
-// transparent safe bridge so the pointer never crosses "empty" space.
-const GUTTER = 8;
-
-/**
- * Returns the CSS padding property that, set to `gutter`px on the OUTER floating
- * shell, recreates the visual gap as a transparent safe area on the
- * trigger-facing side. The outer shell is placed flush (gutter: 0) so the
- * padding bridges the gap while keeping the inner card the same distance away.
- *
- * Placement strings from @floating-ui/dom (post flip/shift) may carry a
- * '-start'/'-end' alignment suffix; we split on '-' and key on the side.
- *   bottom* -> padding-top, top* -> padding-bottom,
- *   left*   -> padding-right, right* -> padding-left
- */
-function gapPaddingStyle(placement: string, gutter: number): JSX.CSSProperties {
-  const side = placement.split('-')[0];
-  const prop: Record<string, keyof JSX.CSSProperties> = {
-    bottom: 'padding-top',
-    top: 'padding-bottom',
-    left: 'padding-right',
-    right: 'padding-left',
-  };
-  return { [prop[side] ?? 'padding-top']: `${gutter}px` };
-}
-
-export function HoverCardContent(props: HoverCardContentProps) {
-  const ctx = useHoverCard();
-  const config = useChatConfig();
-  const presence = createPresence(ctx.open);
-  // gutter: 0 places the outer shell flush with the trigger; the visual gap is
-  // recreated by transparent padding (gapPaddingStyle) so the hit area bridges
-  // it and a straight trigger->content transit never leaves a hot zone.
-  const position = usePosition(ctx.trigger, ctx.content, {
-    placement: props.placement ?? 'bottom',
-    gutter: 0,
-    // Trigger removed from the DOM -> close so the card portal doesn't orphan.
-    onDisconnect: () => ctx.close(),
-  });
-  // Escape OR an outside click closes immediately — an outside click is a
-  // deliberate dismiss, not a hover-out (which uses leave()'s grace delay).
-  useDismiss({ enabled: ctx.open, onDismiss: () => ctx.close(), refs: () => [ctx.trigger(), ctx.content()] });
-
-  return (
-    <Show when={presence.present()}>
-      <Portal mount={config.portalMount()}>
-        {/* Outer shell: positioning + the transparent safe bridge + hot zone. */}
-        <div
-          ref={(el) => { ctx.setContent(el); presence.setRef(el); }}
-          data-hovercard-content
-          onPointerEnter={ctx.enter}
-          onPointerLeave={ctx.leave}
-          onFocusIn={ctx.enter}
-          onFocusOut={ctx.leave}
-          style={{
-            position: 'fixed',
-            left: `${position.pos().x}px`,
-            top: `${position.pos().y}px`,
-            background: 'transparent',
-            visibility: position.hidden() ? 'hidden' : 'visible',
-            ...gapPaddingStyle(position.pos().placement, GUTTER),
-          }}
-          class="z-50"
-        >
-          {/* Inner card: all visual + animation classes and the presence state. */}
-          <div
-            id={ctx.contentId}
-            data-expanded={presence.state() === 'open' ? '' : undefined}
-            data-closed={presence.state() === 'closed' ? '' : undefined}
-            class={cn(
-              'rounded-lg bg-card kai-elevation',
-              'animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
-              props.class,
-            )}
-          >
-            {props.children}
-          </div>
-        </div>
-      </Portal>
-    </Show>
-  );
-}
-
-export interface HoverCardProps { trigger: JSX.Element; children: JSX.Element; class?: string; openDelay?: number; closeDelay?: number; placement?: Placement; }
-
-export function HoverCard(props: HoverCardProps) {
-  const [local] = splitProps(props, ['trigger', 'children', 'class', 'openDelay', 'closeDelay', 'placement']);
-  return (
-    <HoverCardRoot openDelay={local.openDelay} closeDelay={local.closeDelay}>
-      <HoverCardTrigger>{local.trigger}</HoverCardTrigger>
-      <HoverCardContent class={cn('w-64 p-4', local.class)} placement={local.placement}>{local.children}</HoverCardContent>
-    </HoverCardRoot>
-  );
-}

package/src/ui/icon.tsx

@@ -1,167 +0,0 @@
-import type { Component, JSX } from 'solid-js';
-import {
-  Plus, Paperclip, Github, Globe, Sparkles, Settings,
-  FileText, Folder, Image, Monitor, MessageCircle, MessageSquare, Search,
-  Mic, AudioLines, X, ChevronDown, ChevronLeft,
-  Pencil, BookOpen, Code, Smile,
-  Share, ArrowLeft, MoreHorizontal,
-  House, Clock, Lock, Box, Briefcase, PanelLeft, Circle, SlidersHorizontal, Workflow, SquarePen,
-  Archive, ArrowUp, Bookmark, Copy, Ellipsis, ExternalLink, Flag,
-  GitBranch, GitPullRequest, ListFilter, RotateCw,
-  Moon, Sun,
-  // Device / viewport glyphs.
-  Tablet, Smartphone, Laptop,
-  // Direction glyphs completing the chevron + arrow quartets.
-  ChevronRight, ChevronUp, ArrowRight, ArrowDown, PanelRight,
-  // Status glyphs (kai-notice / kai-toast / kai-tool render these already).
-  Check, Info, TriangleAlert, CircleCheck, CircleAlert, CircleX,
-  // Action glyphs the kit performs but could not be named.
-  Trash2, Download, Upload, Link, RotateCcw,
-  // Pane / media chrome.
-  Maximize2, Minimize2, Eye, EyeOff, Bell, Square, Minus, Play,
-} from 'lucide-solid';
-
-type IconComponent = Component<{ class?: string }>;
-
-/** Curated name → lucide-solid component map for item icons in kai-menu /
- *  kai-command. Extend here when new named icons are needed. */
-const NAMED_ICONS: Record<string, IconComponent> = {
-  plus: Plus,
-  paperclip: Paperclip,
-  github: Github,
-  globe: Globe,
-  sparkles: Sparkles,
-  settings: Settings,
-  'file-text': FileText,
-  folder: Folder,
-  image: Image,
-  monitor: Monitor,
-  'message-circle': MessageCircle,
-  'message-square': MessageSquare,
-  search: Search,
-  mic: Mic,
-  'audio-lines': AudioLines,
-  x: X,
-  'chevron-down': ChevronDown,
-  pencil: Pencil,
-  'book-open': BookOpen,
-  code: Code,
-  smile: Smile,
-  // Header / chrome glyphs.
-  share: Share,
-  'arrow-left': ArrowLeft,
-  'more-horizontal': MoreHorizontal,
-  'chevron-left': ChevronLeft,
-  // App-shell glyphs (sidebar nav, recents, filters).
-  home: House,
-  clock: Clock,
-  lock: Lock,
-  box: Box,
-  briefcase: Briefcase,
-  'panel-left': PanelLeft,
-  circle: Circle,
-  'sliders-horizontal': SlidersHorizontal,
-  workflow: Workflow,
-  'square-pen': SquarePen,
-  // Code-app / dev-tool glyphs (git, filters, list actions).
-  archive: Archive,
-  'arrow-up': ArrowUp,
-  bookmark: Bookmark,
-  copy: Copy,
-  ellipsis: Ellipsis,
-  'external-link': ExternalLink,
-  flag: Flag,
-  'git-branch': GitBranch,
-  'git-pull-request': GitPullRequest,
-  'list-filter': ListFilter,
-  'rotate-cw': RotateCw,
-  // Theme / appearance glyphs.
-  moon: Moon,
-  sun: Sun,
-  // Device / viewport glyphs. `desktop` and `mobile` are aliases onto the same
-  // components as `monitor`/`smartphone` — lucide's names are not the words a
-  // consumer reaches for, and an alias costs nothing in the bundle.
-  desktop: Monitor,
-  laptop: Laptop,
-  tablet: Tablet,
-  smartphone: Smartphone,
-  mobile: Smartphone,
-  // Direction glyphs — chevron-down/left and arrow-left/up were here without
-  // their opposites; both quartets are now complete.
-  'chevron-right': ChevronRight,
-  'chevron-up': ChevronUp,
-  'arrow-right': ArrowRight,
-  'arrow-down': ArrowDown,
-  'panel-right': PanelRight,
-  // Status glyphs. kai-notice / kai-toast / kai-tool already paint these, so a
-  // host building matching UI needs to be able to name them.
-  check: Check,
-  info: Info,
-  'triangle-alert': TriangleAlert,
-  'circle-check': CircleCheck,
-  'circle-alert': CircleAlert,
-  'circle-x': CircleX,
-  // Action glyphs. `trash`/`download`/`link` match the keys action-icons.ts
-  // already uses for message actions; `upload` is download's missing sibling.
-  trash: Trash2,
-  download: Download,
-  upload: Upload,
-  link: Link,
-  'rotate-ccw': RotateCcw,
-  // Pane / media chrome (kai-pane, kai-artifact, kai-embed, kai-agent-card).
-  'maximize-2': Maximize2,
-  'minimize-2': Minimize2,
-  eye: Eye,
-  'eye-off': EyeOff,
-  bell: Bell,
-  square: Square,
-  minus: Minus,
-  play: Play,
-};
-
-/** Every curated icon name, sorted. Derived from `NAMED_ICONS` so a gallery,
- *  a story control or a test can never drift from the map itself. */
-export const ICON_NAMES: readonly string[] = Object.keys(NAMED_ICONS).sort();
-
-/** Render an item icon.
- *
- *  Resolution order:
- *  1. Known icon name (e.g. `"paperclip"`) → lucide-solid component.
- *  2. URL / absolute path / data-URI → `<img>`.
- *  3. Anything else → `<span>` text fallback.
- *  Returns `null` when `icon` is undefined/empty.
- *
- *  The img and span branches render different markup, so they accept different
- *  class options: `imgClass` for the `<img>`, `spanClass` for the `<span>`.
- *  `class` is a shared fallback. Pass `ariaHidden` to mark the span decorative. */
-export function renderIcon(
-  icon: string | undefined,
-  opts?: { class?: string; imgClass?: string; spanClass?: string; ariaHidden?: boolean },
-): JSX.Element {
-  if (!icon) return null;
-  const Named = NAMED_ICONS[icon];
-  if (Named) {
-    return <Named class={opts?.imgClass ?? opts?.class ?? 'mr-2 size-4 shrink-0'} />;
-  }
-  const isUrl = /^(https?:|\/|data:)/.test(icon);
-  // DEV footgun guard: a kebab/identifier-shaped string that isn't a URL and
-  // isn't a known name is almost certainly a typo'd/unregistered icon (e.g.
-  // `icon="share"` before it was added) — it would silently paint as literal
-  // text. Warn in dev only; emoji/arbitrary text passes through untouched.
-  if (import.meta.env.DEV && !isUrl && /^[a-z][a-z0-9-]*$/.test(icon)) {
-    console.warn(
-      `[kai-icon] unknown icon name "${icon}" — rendering as text. ` +
-        'Add it to NAMED_ICONS in src/ui/icon.tsx, or pass a URL / an inline SVG via slot="icon".',
-    );
-  }
-  return isUrl
-    ? <img src={icon} alt="" class={opts?.imgClass ?? opts?.class ?? 'size-4 shrink-0'} />
-    : (
-      <span
-        class={opts?.spanClass ?? opts?.class ?? 'size-4 shrink-0'}
-        aria-hidden={opts?.ariaHidden ? 'true' : undefined}
-      >
-        {icon}
-      </span>
-    );
-}