@kitn.ai/ui 0.18.2 → 0.20.0

package/src/elements/define.tsx

@@ -78,6 +78,17 @@ export interface WebComponentContext<E = Record<string, unknown>> {
    * convention). Methods are attached when the facade renders (on element upgrade).
    */
   expose: (methods: Record<string, (...args: never[]) => unknown>) => void;
+  /**
+   * Whether the element should currently render its dark-mode look --
+   * exactly the SAME resolved value that already drives the `.dark` class
+   * every facade's content sits inside (not a second computation of the
+   * `theme='light'|'dark'|'auto'` rule; see `createDarkMode` above). Most
+   * facades never need this directly, since the injected kit CSS already
+   * flips its custom properties under `.dark`. It exists for content that
+   * cannot read CSS at all -- e.g. a WebGL shader baking a colour choice
+   * into a GLSL uniform, which is why `kai-audio-visualizer` reads it.
+   */
+  dark: () => boolean;
 }
 
 /** camelCase prop name → kebab-case attribute (`hoverCard` → `hover-card`). */
@@ -223,7 +234,7 @@ export function defineWebComponent<P extends Record<string, unknown>, E = Record
         <div classList={{ dark: isDark() }} style={{ display: 'contents', color: 'var(--color-foreground)' }}>
           <div ref={portalNode} />
           <ChatConfig portalMount={portalNode}>
-            {Facade(props as unknown as P, { element, dispatch, flag, expose })}
+            {Facade(props as unknown as P, { element, dispatch, flag, expose, dark: isDark })}
           </ChatConfig>
         </div>
       </>

package/src/elements/element-manifest.json

@@ -4,6 +4,7 @@
     "kai-prompt-input": "prompt-input",
     "kai-chat": "chat",
     "kai-workspace": "chat-workspace",
+    "kai-thread": "thread",
     "kai-thinking-bar": "thinking-bar",
     "kai-model-switcher": "model-switcher",
     "kai-attachments": "attachments",
@@ -18,6 +19,7 @@
     "kai-suggestions": "prompt-suggestions",
     "kai-file-upload": "file-upload",
     "kai-voice-input": "voice-input",
+    "kai-audio-visualizer": "audio-visualizer",
     "kai-loader": "loader",
     "kai-text-shimmer": "text-shimmer",
     "kai-image": "image",
@@ -91,6 +93,9 @@
     "chat-workspace": [
       "kai-workspace"
     ],
+    "thread": [
+      "kai-thread"
+    ],
     "thinking-bar": [
       "kai-thinking-bar"
     ],
@@ -133,6 +138,9 @@
     "voice-input": [
       "kai-voice-input"
     ],
+    "audio-visualizer": [
+      "kai-audio-visualizer"
+    ],
     "loader": [
       "kai-loader"
     ],

package/src/elements/element-meta.json

@@ -456,6 +456,176 @@
       }
     ]
   },
+  {
+    "tag": "kai-audio-visualizer",
+    "className": "KaiAudioVisualizerElement",
+    "displayName": "AudioVisualizer",
+    "props": [
+      {
+        "name": "variant",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Look to render: `bar` (default), `grid`, `radial`, `wave`, `aurora`, `custom`. `aura` is accepted as a LiveKit-markup alias for `aurora`. Attribute: `variant`.",
+        "default": "'bar'",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "state",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "`idle` (default), `connecting`, `listening`, `thinking`, `speaking`, `disconnected` (connection down: the dead, flat look). LiveKit's room-lifecycle state names are accepted as aliases. Attribute: `state`.",
+        "default": "'idle'",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "size",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "`icon` | `sm` | `md` (default) | `lg` | `xl`. Attribute: `size`.",
+        "default": "'md'",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "barCount",
+        "type": "undefined | number",
+        "optional": true,
+        "scalar": true,
+        "description": "Bars to draw. Bar and radial only. Attribute: `bar-count`.",
+        "displayType": "undefined | number"
+      },
+      {
+        "name": "count",
+        "type": "undefined | number",
+        "optional": true,
+        "scalar": true,
+        "description": "Grid only: rows and columns of the (always square) grid. Attribute: `count`.",
+        "displayType": "undefined | number"
+      },
+      {
+        "name": "radius",
+        "type": "undefined | number",
+        "optional": true,
+        "scalar": true,
+        "description": "Radial only: ring distance from center, in px. Attribute: `radius`.",
+        "displayType": "undefined | number"
+      },
+      {
+        "name": "spread",
+        "type": "undefined | number",
+        "optional": true,
+        "scalar": true,
+        "description": "Grid only: ring distance for the connecting animation, in cells. Attribute: `spread`.",
+        "displayType": "undefined | number"
+      },
+      {
+        "name": "interval",
+        "type": "undefined | number",
+        "optional": true,
+        "scalar": true,
+        "description": "Grid only: ms between scripted frames. Attribute: `interval`.",
+        "displayType": "undefined | number"
+      },
+      {
+        "name": "color",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "CSS color for the geometry, overriding the inherited `currentColor`. Attribute: `color`.",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "complexity",
+        "type": "undefined | number",
+        "optional": true,
+        "scalar": true,
+        "description": "Shader variants only: pattern density, 0..1. Attribute: `complexity`.",
+        "displayType": "undefined | number"
+      },
+      {
+        "name": "label",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Setting this makes the element an announced image (`role=\"img\"`) instead of decorative (`aria-hidden`). Attribute: `label`.",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "stream",
+        "type": "undefined | MediaStream",
+        "optional": true,
+        "scalar": false,
+        "description": "Live microphone or WebRTC audio to analyze. JS property only.",
+        "displayType": "undefined | MediaStream"
+      },
+      {
+        "name": "audioElement",
+        "type": "undefined | HTMLMediaElement",
+        "optional": true,
+        "scalar": false,
+        "description": "An `<audio>` or `<video>` element to tap for its audio. JS property only.",
+        "displayType": "undefined | HTMLMediaElement"
+      },
+      {
+        "name": "bands",
+        "type": "undefined | number[]",
+        "optional": true,
+        "scalar": false,
+        "description": "Pre-computed levels, 0..1. Set this and no AudioContext is ever built, which is what keeps headless/SSR rendering and browser-speech-synthesis playback (which exposes no audio node) free of Web Audio entirely. JS property only. A new array reference is required for each update; mutating the existing array in place will not re-render.",
+        "displayType": "undefined | number[]"
+      },
+      {
+        "name": "shader",
+        "type": "undefined | { fragment: string; uniforms?: undefined | Record<string, { type: \"1f\" | \"1i\" | \"1fv\" | \"2f\" | \"3f\" | \"3fv\" | \"4f\" | \"4fv\" | \"Matrix2fv\" | \"Matrix3fv\" | \"Matrix4fv\"; value: number | number[] }> }",
+        "optional": true,
+        "scalar": false,
+        "description": "Custom fragment shader for `variant=\"custom\"`. JS property only.",
+        "displayType": "undefined | { fragment: string; uniforms?: undefined | Record<string, { type: \"1f\" | \"1i\" | \"1fv\" | \"2f\" | \"3f\" | \"3fv\" | \"4f\" | \"4fv\" | \"Matrix2fv\" | \"Matrix3fv\" | \"Matrix4fv\"; value: number | number[] }> }"
+      },
+      {
+        "name": "animateWhenNotVisible",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Shader variants only: keep animating while scrolled off screen. Off by default, which stops drawing and releases the WebGL context until the element comes back (browsers ration contexts to roughly 16 a page). Does not override `prefers-reduced-motion`. Attribute: `animate-when-not-visible`.",
+        "displayType": "undefined | false | true"
+      }
+    ],
+    "events": [],
+    "methods": [],
+    "composedFrom": [
+      {
+        "name": "AudioVisualizer",
+        "group": "Components",
+        "storyId": "solid-advanced-elements-audiovisualizer--docs"
+      }
+    ],
+    "tokens": [],
+    "parts": [
+      {
+        "name": "bar",
+        "doc": "A single bar in the `bar` variant, or a single spoke in the `radial` variant. Also carries `data-kai-index` and `data-kai-highlighted` (\"true\"/\"false\") for use inside the shadow root; to style the lit state from OUTSIDE, combine with the `highlighted` part below rather than an attribute selector.",
+        "recipe": "kai-audio-visualizer::part(bar) { border-radius: 2px }\nkai-audio-visualizer::part(bar highlighted) { background: var(--brand) }"
+      },
+      {
+        "name": "cell",
+        "doc": "A single dot in the `grid` variant. Also carries `data-kai-index` and `data-kai-highlighted` (\"true\"/\"false\") for use inside the shadow root; to style the lit state from OUTSIDE, combine with the `highlighted` part below rather than an attribute selector.",
+        "recipe": "kai-audio-visualizer::part(cell) { border-radius: 9999px }\nkai-audio-visualizer::part(cell highlighted) { background: var(--brand) }"
+      },
+      {
+        "name": "highlighted",
+        "doc": "A second part TOKEN present on a `bar` or `cell` exactly when the sequencer or live audio has it lit, not a standalone styleable element. Combine it in the same `::part()` argument: `::part(bar highlighted)` or `::part(cell highlighted)`. This is the external equivalent of the internal `data-kai-highlighted=\"true\"` attribute, which a `::part()` selector cannot reach (an attribute selector cannot follow a pseudo-element).",
+        "recipe": "kai-audio-visualizer::part(bar highlighted) { background: var(--brand) }\nkai-audio-visualizer::part(cell highlighted) { background: var(--brand) }"
+      },
+      {
+        "name": "canvas",
+        "doc": "The WebGL canvas backing the `wave` and `aurora` variants. Restyle its size or radius, or layer a mask/filter, from outside.",
+        "recipe": "kai-audio-visualizer::part(canvas) { border-radius: 0.75rem }"
+      }
+    ]
+  },
   {
     "tag": "kai-avatar",
     "className": "KaiAvatarElement",
@@ -5200,6 +5370,15 @@
         "description": "Which item index is maximized (null = none). Declarative source of truth.",
         "default": "null",
         "displayType": "undefined | null | number"
+      },
+      {
+        "name": "handle",
+        "type": "undefined | \"none\" | \"line\" | \"grip\"",
+        "optional": true,
+        "scalar": true,
+        "description": "Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three.",
+        "default": "'line'",
+        "displayType": "undefined | \"none\" | \"line\" | \"grip\""
       }
     ],
     "events": [
@@ -6768,6 +6947,114 @@
     ],
     "tokens": []
   },
+  {
+    "tag": "kai-thread",
+    "className": "KaiThreadElement",
+    "displayName": "Thread",
+    "props": [
+      {
+        "name": "messages",
+        "type": "undefined | { id: string; role: \"user\" | \"assistant\"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: \"input-streaming\" | \"input-available\" | \"output-available\" | \"output-error\"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | (\"copy\" | \"like\" | \"dislike\" | \"regenerate\" | \"edit\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string }; feedback?: undefined | \"like\" | \"dislike\" }[]",
+        "optional": true,
+        "scalar": false,
+        "description": "The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not).",
+        "displayType": "undefined | { id: string; role: \"user\" | \"assistant\"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: \"input-streaming\" | \"input-available\" | \"output-available\" | \"output-error\"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | (\"copy\" | \"like\" | \"dislike\" | \"regenerate\" | \"edit\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string }; feedback?: undefined | \"like\" | \"dislike\" }[]"
+      },
+      {
+        "name": "loading",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply.",
+        "default": "false",
+        "displayType": "undefined | false | true"
+      },
+      {
+        "name": "proseSize",
+        "type": "undefined | \"sm\" | \"lg\" | \"xs\" | \"base\"",
+        "optional": true,
+        "scalar": true,
+        "description": "Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`.",
+        "default": "'sm'",
+        "displayType": "undefined | \"sm\" | \"lg\" | \"xs\" | \"base\""
+      },
+      {
+        "name": "codeTheme",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`).",
+        "default": "'github-dark-dimmed'",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "codeHighlight",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true.",
+        "default": "true",
+        "displayType": "undefined | false | true"
+      },
+      {
+        "name": "actionsReveal",
+        "type": "undefined | \"always\" | \"hover\"",
+        "optional": true,
+        "scalar": true,
+        "description": "Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`).",
+        "default": "'always'",
+        "displayType": "undefined | \"always\" | \"hover\""
+      },
+      {
+        "name": "scrollButton",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Show the scroll-to-bottom button inside the scroll area. Default true.",
+        "default": "true",
+        "displayType": "undefined | false | true"
+      },
+      {
+        "name": "class",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Extra classes applied to the thread's inner root.",
+        "displayType": "undefined | string"
+      }
+    ],
+    "events": [
+      {
+        "name": "kai-message-action",
+        "detail": "{ messageId: string; action: string; state?: undefined | \"on\" | \"off\" }",
+        "description": "A message's action button was clicked. `action` is the built-in name (`copy` / `like` / `dislike` / `regenerate` / `edit`) or a custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear.",
+        "displayDetail": "{ messageId: string; action: string; state?: undefined | \"on\" | \"off\" }"
+      }
+    ],
+    "methods": [
+      {
+        "name": "scrollToBottom",
+        "params": "behavior?: ScrollBehavior",
+        "returns": "void",
+        "description": "Scroll the message list to the bottom (default `'smooth'`)."
+      }
+    ],
+    "composedFrom": [
+      {
+        "name": "Thread",
+        "group": "Components",
+        "storyId": "solid-advanced-elements-thread--docs"
+      }
+    ],
+    "tokens": [],
+    "slots": [
+      {
+        "name": "empty",
+        "mode": "replace",
+        "doc": "Custom zero-state rendered in the message area while the thread is empty; replaces the built-in default."
+      }
+    ]
+  },
   {
     "tag": "kai-toast-region",
     "className": "KaiToastRegionElement",

package/src/elements/element-types.d.ts

@@ -164,6 +164,43 @@ export interface KaiAttachmentsElement extends HTMLElement {
   emptyText?: string;
 }
 
+export interface KaiAudioVisualizerElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Look to render: `bar` (default), `grid`, `radial`, `wave`, `aurora`, `custom`. `aura` is accepted as a LiveKit-markup alias for `aurora`. Attribute: `variant`. */
+  variant?: string;
+  /** `idle` (default), `connecting`, `listening`, `thinking`, `speaking`, `disconnected` (connection down: the dead, flat look). LiveKit's room-lifecycle state names are accepted as aliases. Attribute: `state`. */
+  state?: string;
+  /** `icon` | `sm` | `md` (default) | `lg` | `xl`. Attribute: `size`. */
+  size?: string;
+  /** Bars to draw. Bar and radial only. Attribute: `bar-count`. */
+  barCount?: number;
+  /** Grid only: rows and columns of the (always square) grid. Attribute: `count`. */
+  count?: number;
+  /** Radial only: ring distance from center, in px. Attribute: `radius`. */
+  radius?: number;
+  /** Grid only: ring distance for the connecting animation, in cells. Attribute: `spread`. */
+  spread?: number;
+  /** Grid only: ms between scripted frames. Attribute: `interval`. */
+  interval?: number;
+  /** CSS color for the geometry, overriding the inherited `currentColor`. Attribute: `color`. */
+  color?: string;
+  /** Shader variants only: pattern density, 0..1. Attribute: `complexity`. */
+  complexity?: number;
+  /** Setting this makes the element an announced image (`role="img"`) instead of decorative (`aria-hidden`). Attribute: `label`. */
+  label?: string;
+  /** Live microphone or WebRTC audio to analyze. JS property only. */
+  stream?: MediaStream;
+  /** An `<audio>` or `<video>` element to tap for its audio. JS property only. */
+  audioElement?: HTMLMediaElement;
+  /** Pre-computed levels, 0..1. Set this and no AudioContext is ever built, which is what keeps headless/SSR rendering and browser-speech-synthesis playback (which exposes no audio node) free of Web Audio entirely. JS property only. A new array reference is required for each update; mutating the existing array in place will not re-render. */
+  bands?: number[];
+  /** Custom fragment shader for `variant="custom"`. JS property only. */
+  shader?: { fragment: string; uniforms?: Record<string, { type: "1f" | "1i" | "1fv" | "2f" | "3f" | "3fv" | "4f" | "4fv" | "Matrix2fv" | "Matrix3fv" | "Matrix4fv"; value: number | number[] }> };
+  /** Shader variants only: keep animating while scrolled off screen. Off by default, which stops drawing and releases the WebGL context until the element comes back (browsers ration contexts to roughly 16 a page). Does not override `prefers-reduced-motion`. Attribute: `animate-when-not-visible`. */
+  animateWhenNotVisible?: boolean;
+}
+
 export interface KaiAvatarElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
@@ -923,6 +960,8 @@ export interface KaiResizableElement extends HTMLElement {
   orientation?: "vertical" | "horizontal";
   /** Which item index is maximized (null = none). Declarative source of truth. */
   maximizedIndex?: null | number;
+  /** Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three. */
+  handle?: "none" | "line" | "grip";
 }
 
 export interface KaiResizableItemElement extends HTMLElement {
@@ -1213,6 +1252,27 @@ export interface KaiThinkingBarElement extends HTMLElement {
   stopLabel?: string;
 }
 
+export interface KaiThreadElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). */
+  messages?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: string; tooltip?: string })[]; avatar?: { src?: string; fallback?: string; alt?: string }; feedback?: "like" | "dislike" }[];
+  /** Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`. */
+  proseSize?: "sm" | "lg" | "xs" | "base";
+  /** Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
+  actionsReveal?: "always" | "hover";
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Extra classes applied to the thread's inner root. */
+  class?: string;
+}
+
 export interface KaiToastRegionElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
@@ -1343,6 +1403,7 @@ declare global {
     'kai-agent-card': KaiAgentCardElement;
     'kai-artifact': KaiArtifactElement;
     'kai-attachments': KaiAttachmentsElement;
+    'kai-audio-visualizer': KaiAudioVisualizerElement;
     'kai-avatar': KaiAvatarElement;
     'kai-badge': KaiBadgeElement;
     'kai-button': KaiButtonElement;
@@ -1412,6 +1473,7 @@ declare global {
     'kai-tasks': KaiTasksElement;
     'kai-text-shimmer': KaiTextShimmerElement;
     'kai-thinking-bar': KaiThinkingBarElement;
+    'kai-thread': KaiThreadElement;
     'kai-toast-region': KaiToastRegionElement;
     'kai-tool': KaiToolElement;
     'kai-tooltip': KaiTooltipElement;

package/src/elements/icon-names.json

@@ -30,6 +30,7 @@
   "message-square",
   "mic",
   "monitor",
+  "moon",
   "more-horizontal",
   "panel-left",
   "paperclip",
@@ -43,6 +44,7 @@
   "smile",
   "sparkles",
   "square-pen",
+  "sun",
   "workflow",
   "x"
 ]

package/src/elements/menu.tsx

@@ -79,12 +79,15 @@ interface Events {
 /**
  * `<kai-menu>` — a cascading action menu driven by a JSON items-tree.
  *
- * Set the `items` property in JavaScript (array, not attribute). The trigger
- * is slotted — put your icon/button content in `slot="trigger"`:
+ * Set the `items` property in JavaScript (array, not attribute). The menu
+ * provides its own trigger button (accessible + keyboard-wired); slot only the
+ * VISUAL content into `slot="trigger"` (an icon, text, an `<svg>`) — never your
+ * own `<button>`/`<a>`, which would nest interactive elements. Set the
+ * accessible name with the `label` attribute (for an icon-only trigger):
  *
  * ```html
- * <kai-menu>
- *   <button slot="trigger" aria-label="Open menu">+</button>
+ * <kai-menu label="Open menu">
+ *   <span slot="trigger">+</span>
  * </kai-menu>
  * <script type="module">
  *   import '@kitn.ai/ui/elements';

package/src/elements/register-impl.ts

@@ -7,6 +7,8 @@ import './conversation-list';
 import './prompt-input';
 import './chat';
 import './chat-workspace';
+// Message-list composable (the scrolling thread slice, sans composer/header)
+import './thread';
 // Composable leaf elements (spike — see docs/handoff + examples/composable)
 import './thinking-bar';
 import './model-switcher';
@@ -25,6 +27,7 @@ import './chat-scope-picker';
 import './prompt-suggestions';
 import './file-upload';
 import './voice-input';
+import './audio-visualizer';
 // Phase 4 — indicators & leaves
 import './loader';
 import './text-shimmer';

package/src/elements/resizable.tsx

@@ -55,6 +55,14 @@ interface GroupProps extends Record<string, unknown> {
   orientation?: Orientation;
   /** Which item index is maximized (null = none). Declarative source of truth. */
   maximizedIndex?: number | null;
+  /**
+   * Divider affordance drawn inside each draggable handle's 8px grab zone:
+   * - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag.
+   * - `grip` — a dotted grip handle.
+   * - `none` — no visible divider, just the invisible hit-area.
+   * The full grab zone and keyboard/ARIA behavior are identical for all three.
+   */
+  handle?: 'line' | 'grip' | 'none';
 }
 
 interface GroupEvents extends Record<string, unknown> {
@@ -75,6 +83,7 @@ interface GroupEvents extends Record<string, unknown> {
 defineWebComponent<GroupProps, GroupEvents>('kai-resizable', {
   orientation: 'horizontal',
   maximizedIndex: null,
+  handle: 'line',
 }, (props, { element, dispatch }) => {
   const [items, setItems] = createSignal<ItemInfo[]>([]);
   const orientation = (): Orientation => (props.orientation === 'vertical' ? 'vertical' : 'horizontal');
@@ -452,7 +461,7 @@ defineWebComponent<GroupProps, GroupEvents>('kai-resizable', {
             <>
               <Show when={i() > 0}>
                 <ResizableHandle
-                  withHandle
+                  handle={props.handle ?? 'line'}
                   orientation={orientation()}
                   static={isStatic()}
                   onPanelResize={() => {
@@ -516,6 +525,68 @@ defineWebComponent<GroupProps, GroupEvents>('kai-resizable', {
   );
 });
 
+/**
+ * Reflect a `<kai-resizable-item>`'s reactive CONFIG props to the ATTRIBUTES the
+ * parent `<kai-resizable>` reads (`readItems()` + its `size`/`min`/`max`/`locked`
+ * MutationObserver). Framework runtimes (React et al.) assign these as DOM
+ * *properties* — `el.size = "280px"` — but component-register only mirrors
+ * attribute→property, never the reverse, so a property-set size never becomes an
+ * attribute and the parent silently falls back to a flexible split. This is the
+ * exact class of bug the `collapsed` reflection already fixed; extended here to
+ * `size`/`min`/`max` (strings) and `locked` (boolean). `hidden` is deliberately
+ * NOT reflected — native `el.hidden` reflects to the attribute on its own and the
+ * parent honours the `hidden` property directly (and maximize drives `hidden`).
+ *
+ * Durability (don't fight drags): the parent WRITES `size` back to the live percent
+ * during a drag (`persistSizes` → `setAttribute('size', …)`), and that attribute
+ * write back-propagates into this prop's signal (component-register's
+ * attributeChangedCallback → property → the solid-element prop signal). A naive
+ * "reflect on every signal change" effect would therefore re-stomp the dragged size
+ * the next time a framework re-render re-asserts the ORIGINAL declared `size`
+ * (e.g. React re-runs `el.size = "280px"` on every render). So each string reflect
+ * only writes when the value the CONSUMER declared actually changes: a signal value
+ * that already equals the current attribute came FROM an attribute write (a drag),
+ * not the consumer, so it is left untouched and is not adopted as the new baseline.
+ * Net effect: a dragged size survives re-renders, while an explicit `size` change
+ * still applies. `size` prop signals use Solid's DEFAULT (same-value-skipping)
+ * equality — this guard is needed on top of that only because of the drag-write
+ * back-propagation, which same-value-skip alone can't see.
+ *
+ * Exported for unit testing (the live Shadow-DOM element is not jsdom-friendly).
+ */
+export function reflectItemConfig(
+  element: HTMLElement,
+  props: { readonly size?: string; readonly min?: string; readonly max?: string },
+  flag: (name: string) => boolean,
+) {
+  const norm = (v: unknown): string | null => (v == null || v === '' ? null : String(v));
+  const reflectString = (name: 'size' | 'min' | 'max') => {
+    // Last value the CONSUMER declared (distinct from a value the parent wrote to
+    // the attribute mid-drag). Starts `undefined`, which `norm` never returns, so
+    // the first genuine value always reflects.
+    let lastConsumer: string | null | undefined;
+    createEffect(() => {
+      const desired = norm(props[name]); // reactive read
+      if (desired === lastConsumer) return; // consumer intent unchanged → leave the attr (the drag owns it)
+      const current = element.getAttribute(name);
+      // Already matches — either untouched or the parent wrote it (drag). Don't
+      // adopt it as the consumer baseline and don't fight it.
+      if (desired === current) return;
+      lastConsumer = desired;
+      if (desired === null) element.removeAttribute(name);
+      else element.setAttribute(name, desired);
+    });
+  };
+  reflectString('size');
+  reflectString('min');
+  reflectString('max');
+  // Boolean: mirror the `collapsed`/`loading` precedent — a bare `locked` attribute
+  // and the IDL property are both honoured via `flag`. The parent also writes
+  // `locked` during maximize/restore; because `flag` re-derives from that same
+  // attribute state, the reflection stays self-consistent (no fight).
+  createEffect(() => { element.toggleAttribute('locked', flag('locked')); });
+}
+
 interface ItemProps extends Record<string, unknown> {
   /** Initial main-axis size: `"280px"` (fixed) or `"25%"`/`25` (percent). Omitted → flexible. */
   size?: string;
@@ -551,7 +622,7 @@ defineWebComponent<ItemProps>('kai-resizable-item', {
   locked: false,
   hidden: false,
   collapsed: false,
-}, (_props, { element, flag }) => {
+}, (props, { element, flag }) => {
   // Reflect the reactive `collapsed` prop to the `collapsed` ATTRIBUTE the parent
   // <kai-resizable> reads (and observes). This is what makes a bare JSX boolean
   // collapse the panel at INITIAL render from any framework: component-register
@@ -563,6 +634,11 @@ defineWebComponent<ItemProps>('kai-resizable-item', {
   // `hidden`, so the back-compat hidden path and maximize (which drive `hidden`)
   // are untouched.
   createEffect(() => { element.toggleAttribute('collapsed', flag('collapsed')); });
+  // Reflect the other config props (`size`/`min`/`max`/`locked`) property→attribute
+  // for the SAME reason — a framework that sets them as DOM properties (React et al.)
+  // would otherwise be invisible to the parent. See reflectItemConfig for the
+  // drag-durability guard on `size`.
+  reflectItemConfig(element, props, flag);
   return (
   <>
     {/* The item host fills the panel's single grid cell (the panel stretches it on