@kitn.ai/ui 0.16.0 → 0.18.0

package/src/ui/icon.tsx

@@ -0,0 +1,110 @@
+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,
+} 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,
+};
+
+/** 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>
+    );
+}

package/src/ui/input.tsx

@@ -0,0 +1,132 @@
+import { type JSX, Show, splitProps, createUniqueId } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onInput' | 'onChange' | 'size'> {
+  /** Field label rendered above the control and linked via `for`/`id`. */
+  label?: string;
+  /** Helper text rendered below the control. */
+  hint?: string;
+  /** Error text; rendered below the control and flips the field invalid. */
+  error?: string;
+  /** Control density. Defaults to `md`. */
+  size?: 'sm' | 'md';
+  /** Force the invalid (destructive-border) state without an `error` string. */
+  invalid?: boolean;
+  /** Leading affix (icon, unit). Rendered inside the field row, before the input. */
+  leading?: JSX.Element;
+  /** Trailing affix (icon, inline button). Rendered inside the field row, after the input. */
+  trailing?: JSX.Element;
+  /** Fires per keystroke with the current value. */
+  onValueInput?: (value: string) => void;
+  /** Fires on commit (blur) with the current value. */
+  onValueChange?: (value: string) => void;
+}
+
+// The single source of the field shell styling — lifted verbatim from the
+// `inputBase` constant that used to live in `src/components/form-widgets.tsx`.
+// `Input` now owns it; the form widgets render `Input` rather than re-pasting it.
+export const FIELD_BASE =
+  'w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none';
+
+// When a leading/trailing affix is present the border + padding wrap the whole
+// row and the focus ring is driven off the row (`focus-within`), so the input
+// itself sits borderless and transparent inside it.
+const FIELD_ROW =
+  'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-ring';
+const ROW_INPUT =
+  'min-w-0 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed';
+
+const SIZE_SM = 'px-2.5 py-1';
+const INVALID = 'border-destructive dark:border-red-400/70';
+
+// Suppress the native search affordances Chrome/WebKit render for `type="search"`.
+// Without this the browser's `::-webkit-search-cancel-button` (×) stacks on top of
+// a custom clear control (e.g. kai-search's `part="clear"`) — a double ×. Applied
+// to the inner `<input>` in BOTH layouts (the field can be `type="search"` either
+// way; kai-search uses the affix layout for its leading icon).
+const SEARCH_RESET =
+  '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-cancel-button]:hidden';
+
+/**
+ * `Input`: the token-themed single-line text field shell. A label/hint/error
+ * stack around a field row that holds an optional `leading` affix, the
+ * `<input>`, and an optional `trailing` affix. The shared border/background/ring
+ * styling lives here (the single field source the form widgets build on).
+ *
+ * Parts: `field` (the bordered control), `input`, `label`, `hint`.
+ * a11y: a generated id links `<label for>`; `invalid`/`error` set `aria-invalid`;
+ * the hint/error text is linked via `aria-describedby`.
+ */
+export function Input(props: InputProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'class', 'label', 'hint', 'error', 'size', 'invalid',
+    'leading', 'trailing', 'onValueInput', 'onValueChange', 'onBlur', 'id', 'disabled',
+  ]);
+
+  const id = local.id ?? createUniqueId();
+  const hintId = `${id}-hint`;
+  const isInvalid = () => !!local.invalid || !!local.error;
+  const hasHint = () => !!local.error || !!local.hint;
+  const hasAffix = () => local.leading != null || local.trailing != null;
+
+  const inputEl = (cls: string, part: string): JSX.Element => (
+    <input
+      {...rest}
+      id={id}
+      part={part}
+      disabled={local.disabled}
+      aria-invalid={isInvalid() ? 'true' : undefined}
+      aria-describedby={hasHint() ? hintId : undefined}
+      class={cn(SEARCH_RESET, cls)}
+      onInput={(e) => local.onValueInput?.(e.currentTarget.value)}
+      onBlur={(e) => {
+        const handler = local.onBlur;
+        if (typeof handler === 'function') handler(e);
+        local.onValueChange?.(e.currentTarget.value);
+      }}
+    />
+  );
+
+  return (
+    <div class="flex w-full flex-col gap-1.5">
+      <Show when={local.label}>
+        <label part="label" for={id} class="text-sm font-medium text-foreground">
+          {local.label}
+        </label>
+      </Show>
+
+      <Show
+        when={hasAffix()}
+        fallback={inputEl(
+          cn(FIELD_BASE, local.size === 'sm' && SIZE_SM, isInvalid() && INVALID, local.class),
+          'field input',
+        )}
+      >
+        <div
+          part="field"
+          class={cn(
+            FIELD_ROW,
+            local.size === 'sm' && SIZE_SM,
+            isInvalid() && INVALID,
+            local.disabled && 'opacity-50 pointer-events-none',
+            local.class,
+          )}
+        >
+          <Show when={local.leading}>
+            <span class="flex shrink-0 items-center text-muted-foreground">{local.leading}</span>
+          </Show>
+          {inputEl(ROW_INPUT, 'input')}
+          <Show when={local.trailing}>
+            <span class="flex shrink-0 items-center text-muted-foreground">{local.trailing}</span>
+          </Show>
+        </div>
+      </Show>
+
+      <Show when={hasHint()}>
+        <p part="hint" id={hintId} class={cn('text-xs', local.error ? 'text-destructive' : 'text-muted-foreground')}>
+          {local.error ?? local.hint}
+        </p>
+      </Show>
+    </div>
+  );
+}

package/src/ui/kbd.tsx

@@ -0,0 +1,118 @@
+import { type JSX, For, Show, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export type KbdPlatform = 'auto' | 'mac' | 'other';
+
+export interface KbdProps extends JSX.HTMLAttributes<HTMLElement> {
+  /** Shortcut spec — tokens joined by `+` (e.g. `Mod+Shift+K`). When omitted,
+   *  children render verbatim. Display only; `kai-kbd` does not bind keys. */
+  keys?: string;
+  /** Glyph platform. `mac` uses ⌘/⌥; `other` uses Ctrl. `auto` (default for the
+   *  facade) sniffs the OS, SSR-safe (falls back to `other` on the server). */
+  platform?: KbdPlatform;
+  /** Cap size. Defaults to `md`. */
+  size?: 'sm' | 'md';
+}
+
+/** SSR-safe mac check: prefers UA-CH `platform`, falls back to `navigator.platform`. */
+function isMacOS(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const nav = navigator as Navigator & { userAgentData?: { platform?: string } };
+  const platform = nav.userAgentData?.platform ?? nav.platform ?? '';
+  return /mac/i.test(platform);
+}
+
+/** Resolve `auto` to a concrete platform; `mac`/`other` pass through. */
+function resolvePlatform(platform: KbdPlatform): 'mac' | 'other' {
+  if (platform === 'mac') return 'mac';
+  if (platform === 'other') return 'other';
+  return isMacOS() ? 'mac' : 'other';
+}
+
+/** Map a single token to its display glyph. Unknown tokens uppercase (so `k` → `K`). */
+function glyph(token: string, mac: boolean): string {
+  const t = token.trim();
+  switch (t.toLowerCase()) {
+    case 'mod':
+      return mac ? '⌘' : 'Ctrl';
+    case 'cmd':
+    case 'command':
+    case 'meta':
+      return '⌘';
+    case 'ctrl':
+    case 'control':
+      return 'Ctrl';
+    case 'shift':
+      return '⇧';
+    case 'alt':
+    case 'opt':
+    case 'option':
+      return '⌥';
+    case 'arrowup':
+      return '↑';
+    case 'arrowdown':
+      return '↓';
+    case 'arrowleft':
+      return '←';
+    case 'arrowright':
+      return '→';
+    case 'enter':
+    case 'return':
+      return '⏎';
+    case 'esc':
+    case 'escape':
+      return 'Esc';
+    case 'space':
+      return 'Space';
+    default:
+      return t.toUpperCase();
+  }
+}
+
+const SIZE: Record<'sm' | 'md', string> = {
+  sm: 'h-5 min-w-5 px-1 text-[11px]',
+  md: 'h-6 min-w-6 px-1.5 text-xs',
+};
+
+/**
+ * `Kbd`: a keyboard-shortcut display. Splits `keys` on `+`, maps each token to a
+ * platform glyph (`Mod` → ⌘ on mac else Ctrl, `Shift` → ⇧, `ArrowUp` → ↑, …) and
+ * renders each as an inset `part="key"` cap, with an empty `part="separator"` hook
+ * between caps. Token-driven, light + dark. Display only — it does not bind keys.
+ *
+ * When `keys` is omitted, the children render verbatim (use any custom content).
+ */
+export function Kbd(props: KbdProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['keys', 'platform', 'size', 'class', 'children']);
+  const mac = () => resolvePlatform(local.platform ?? 'other') === 'mac';
+  const tokens = () =>
+    (local.keys ?? '')
+      .split('+')
+      .map((t) => t.trim())
+      .filter(Boolean);
+
+  return (
+    <kbd {...rest} class={cn('inline-flex items-center gap-0.5 align-middle font-sans', local.class)}>
+      <Show when={local.keys != null} fallback={local.children}>
+        <For each={tokens()}>
+          {(token, i) => (
+            <>
+              <Show when={i() > 0}>
+                <span part="separator" aria-hidden="true" class="text-muted-foreground" />
+              </Show>
+              <span
+                part="key"
+                class={cn(
+                  'inline-flex items-center justify-center rounded border border-border bg-muted font-medium leading-none tabular-nums text-muted-foreground',
+                  SIZE[local.size ?? 'md'],
+                )}
+              >
+                {glyph(token, mac())}
+              </span>
+            </>
+          )}
+        </For>
+      </Show>
+    </kbd>
+  );
+}

package/src/ui/nav.tsx

@@ -0,0 +1,282 @@
+import { For, Show, type JSX, createSignal, splitProps } from 'solid-js';
+import { ChevronRight } from 'lucide-solid';
+import { cn } from '../utils/cn';
+import { renderIcon } from './icon';
+import { Badge } from './badge';
+
+/** Status tone for a nav item's dot. `primary` is the theme accent; the rest use
+ *  the kit's tool hues (the same colors as kai-status / kai-progress-bar). Generic
+ *  enough for thread/onboarding states (success = "Completed", info = "Working")
+ *  and task-run states (neutral = queued, info = running, success = done,
+ *  error = failed). */
+export type NavStatusTone = 'primary' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
+
+/** Dot hue per `tone`, mirroring the kai-status / kai-progress-bar token map. */
+const STATUS_DOT_BG: Record<NavStatusTone, string> = {
+  primary: 'bg-primary',
+  info: 'bg-tool-blue',
+  success: 'bg-tool-green',
+  warning: 'bg-tool-amber',
+  error: 'bg-tool-red',
+  neutral: 'bg-muted-foreground',
+};
+
+/** A small colored status indicator on a nav row. The `label` (when set) is folded
+ *  into the row's accessible name; `pulse` adds an animated ping ring. */
+export interface NavItemStatus {
+  tone: NavStatusTone;
+  /** Short status word ("Working", "Failed"). Shown as muted text and announced. */
+  label?: string;
+  /** Animated ping ring (disabled under prefers-reduced-motion). */
+  pulse?: boolean;
+}
+
+export interface KaiNavItem {
+  id: string;
+  label?: string;
+  /** Leading icon: a named icon, an image URL / data-URI, or plain text. */
+  icon?: string;
+  /** Trailing text pill (e.g. "Beta"). */
+  badge?: string;
+  /** Trailing icon (a named icon), e.g. an edit/compose affordance. */
+  trailing?: string;
+  disabled?: boolean;
+  /** Nested items. When present, the row becomes a collapsible group: a parent
+   *  row with a disclosure chevron over an indented child list. Recurses for
+   *  arbitrary depth (primarily 2 levels, e.g. project -> threads). */
+  children?: KaiNavItem[];
+  /** A small colored status dot (+ optional label) on the row. */
+  status?: NavItemStatus;
+  /** Right-aligned muted trailing text (e.g. a relative time, "24d ago").
+   *  Distinct from `trailing` (a hover icon). */
+  meta?: string;
+  /** An interactive trailing action button (`icon` is a named icon; `label` is
+   *  its accessible name). Activating it fires `onItemAction` and does NOT select
+   *  the row. Distinct from `trailing` (a decorative hover icon, not a button). */
+  action?: { icon: string; label: string };
+  /** Render an interactive trailing close (×) button. Activating it fires
+   *  `onItemClose` and does NOT select the row. */
+  closable?: boolean;
+}
+
+export interface NavProps extends JSX.HTMLAttributes<HTMLElement> {
+  items?: KaiNavItem[];
+  /** Active item id (drives aria-current + the selected look). */
+  value?: string;
+  onItemSelect?: (id: string) => void;
+  /** A row's trailing `action` button was activated (not a select). */
+  onItemAction?: (id: string, action?: { icon: string; label: string }) => void;
+  /** A `closable` row's trailing close button was activated (not a select). */
+  onItemClose?: (id: string) => void;
+  /** Ids of group items collapsed on first render. Groups default to expanded. */
+  defaultCollapsed?: string[];
+}
+
+export function Nav(props: NavProps) {
+  const [local, rest] = splitProps(props, [
+    'items', 'value', 'onItemSelect', 'onItemAction', 'onItemClose', 'defaultCollapsed', 'class',
+  ]);
+
+  // Groups default to expanded; `defaultCollapsed` seeds the closed set. Using a
+  // Set keyed by item id keeps expand state independent of the items reference,
+  // so late-arriving items (the element sets `items` post-construction) are open.
+  const [collapsed, setCollapsed] = createSignal<Set<string>>(
+    new Set(local.defaultCollapsed ?? []),
+    { equals: false },
+  );
+  const isExpanded = (id: string) => !collapsed().has(id);
+  const toggle = (id: string) =>
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  return (
+    <nav {...rest} class={cn('flex flex-col gap-0.5', local.class)}>
+      <NavRows
+        items={local.items ?? []}
+        depth={0}
+        value={local.value}
+        onItemSelect={local.onItemSelect}
+        onItemAction={local.onItemAction}
+        onItemClose={local.onItemClose}
+        isExpanded={isExpanded}
+        toggle={toggle}
+      />
+    </nav>
+  );
+}
+
+interface NavRowsProps {
+  items: KaiNavItem[];
+  depth: number;
+  value?: string;
+  onItemSelect?: (id: string) => void;
+  onItemAction?: (id: string, action?: { icon: string; label: string }) => void;
+  onItemClose?: (id: string) => void;
+  isExpanded: (id: string) => boolean;
+  toggle: (id: string) => void;
+}
+
+/** Render one nesting level. Recurses through `children`. */
+function NavRows(props: NavRowsProps) {
+  // When a level has any groups, every row reserves a chevron-width disclosure
+  // column (chevron for groups, a spacer for leaves) so icons/labels line up.
+  const hasGroups = () => props.items.some((i) => (i.children?.length ?? 0) > 0);
+  return (
+    <For each={props.items}>
+      {(item) => {
+        const isGroup = () => (item.children?.length ?? 0) > 0;
+        const expanded = () => props.isExpanded(item.id);
+        const active = () => props.value === item.id;
+        const tone = () => item.status?.tone ?? 'neutral';
+        // Fold the status word + meta into the accessible name so AT gets them
+        // (the dot/label/meta nodes are aria-hidden to avoid double-announcing).
+        const ariaLabel = () => {
+          if (!item.status?.label && !item.meta) return undefined;
+          return [item.label, item.status?.label, item.meta].filter(Boolean).join(', ');
+        };
+        const onClick = () => {
+          if (item.disabled) return;
+          if (isGroup()) props.toggle(item.id);
+          else props.onItemSelect?.(item.id);
+        };
+        // Native buttons handle Enter/Space; add ArrowRight/Left for tree parity.
+        const onKeyDown = (e: KeyboardEvent) => {
+          if (!isGroup() || item.disabled) return;
+          if (e.key === 'ArrowRight' && !expanded()) { e.preventDefault(); props.toggle(item.id); }
+          else if (e.key === 'ArrowLeft' && expanded()) { e.preventDefault(); props.toggle(item.id); }
+        };
+        return (
+          <>
+            {/* The row is a non-interactive wrapper: the selectable item button
+                and the trailing action/close button are SIBLINGS, never nested
+                (a button inside a button is invalid HTML — browsers hoist it out
+                — and trips axe's nested-interactive). Each control owns its own
+                click, so a trailing-button click never reaches the item button's
+                select handler; no event-delegation discrimination is needed. */}
+            <div
+              class={cn(
+                'group relative flex items-center rounded-md transition-colors',
+                'hover:bg-accent',
+                active() && 'bg-accent',
+                item.disabled && 'pointer-events-none opacity-50',
+              )}
+            >
+              <button
+                part="item"
+                type="button"
+                disabled={item.disabled}
+                aria-current={active() ? 'page' : undefined}
+                aria-expanded={isGroup() ? expanded() : undefined}
+                aria-label={ariaLabel()}
+                onClick={onClick}
+                onKeyDown={onKeyDown}
+                style={props.depth > 0 ? { 'padding-left': `${10 + props.depth * 16}px` } : undefined}
+                class={cn(
+                  'flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors',
+                  'text-muted-foreground group-hover:text-foreground',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  'disabled:pointer-events-none',
+                  active() && 'font-medium text-foreground',
+                )}
+              >
+                <Show
+                  when={isGroup()}
+                  fallback={hasGroups() ? <span class="size-4 shrink-0" aria-hidden="true" /> : null}
+                >
+                  <span
+                    part="chevron"
+                    aria-hidden="true"
+                    class={cn('flex shrink-0 items-center opacity-60 transition-transform', expanded() && 'rotate-90')}
+                  >
+                    <ChevronRight size={16} />
+                  </span>
+                </Show>
+                <Show when={item.icon}>{renderIcon(item.icon, { class: 'size-4 shrink-0' })}</Show>
+                <span class="min-w-0 flex-1 truncate">{item.label}</span>
+                <Show when={item.status}>
+                  <span part="status" class="flex shrink-0 items-center gap-1.5" aria-hidden="true">
+                    <span class="relative inline-flex">
+                      <Show when={item.status!.pulse}>
+                        <span
+                          class={cn(
+                            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden',
+                            STATUS_DOT_BG[tone()],
+                          )}
+                        />
+                      </Show>
+                      <span class={cn('relative inline-block size-2 rounded-full', STATUS_DOT_BG[tone()])} />
+                    </span>
+                    <Show when={item.status!.label}>
+                      <span class="text-xs text-muted-foreground">{item.status!.label}</span>
+                    </Show>
+                  </span>
+                </Show>
+                <Show when={item.meta}>
+                  <span part="meta" class="shrink-0 text-xs tabular-nums text-muted-foreground" aria-hidden="true">
+                    {item.meta}
+                  </span>
+                </Show>
+                <Show when={item.badge}>
+                  <Badge variant="default" class="px-1.5 py-0 text-[0.625rem] font-medium uppercase tracking-wide">{item.badge}</Badge>
+                </Show>
+                <Show when={item.trailing}>{renderIcon(item.trailing, { class: 'size-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-60' })}</Show>
+              </button>
+              <Show when={item.action}>
+                <button
+                  part="item-action"
+                  data-nav-action="action"
+                  type="button"
+                  aria-label={item.action!.label}
+                  onClick={() => props.onItemAction?.(item.id, item.action)}
+                  class={cn(
+                    'mr-1 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground',
+                    'opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground',
+                    'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    'group-hover:opacity-100',
+                  )}
+                >
+                  {renderIcon(item.action!.icon, { class: 'size-4' })}
+                </button>
+              </Show>
+              <Show when={item.closable}>
+                <button
+                  part="item-action"
+                  data-nav-action="close"
+                  type="button"
+                  aria-label={item.label ? `Remove ${item.label}` : 'Remove'}
+                  onClick={() => props.onItemClose?.(item.id)}
+                  class={cn(
+                    'mr-1 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground',
+                    'opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground',
+                    'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    'group-hover:opacity-100',
+                  )}
+                >
+                  {renderIcon('x', { class: 'size-4' })}
+                </button>
+              </Show>
+            </div>
+            <Show when={isGroup() && expanded()}>
+              <div part="group" role="group">
+                <NavRows
+                  items={item.children!}
+                  depth={props.depth + 1}
+                  value={props.value}
+                  onItemSelect={props.onItemSelect}
+                  onItemAction={props.onItemAction}
+                  onItemClose={props.onItemClose}
+                  isExpanded={props.isExpanded}
+                  toggle={props.toggle}
+                />
+              </div>
+            </Show>
+          </>
+        );
+      }}
+    </For>
+  );
+}