@kitn.ai/ui 0.20.1 → 0.21.0

package/README.md

@@ -49,9 +49,10 @@ npm run build   # emits dist/kai.es.js
 
     const chat = document.querySelector('kai-chat');
 
-    // Rich data is set as JS properties (not HTML attributes)
+    // Rich data is set as JS properties (not HTML attributes). A message's
+    // content is an ordered `parts` array.
     chat.messages = [
-      { id: '1', role: 'assistant', content: 'Hello! How can I help?' },
+      { id: '1', role: 'assistant', parts: [{ type: 'text', text: 'Hello! How can I help?' }] },
     ];
 
     // Events are non-bubbling kai-* CustomEvents dispatched on the element
@@ -130,6 +131,8 @@ The components are deliberately **transport-agnostic**: `<kai-chat>` just render
 
 <script type="module">
   import '@kitn.ai/ui/elements';
+  import { createAssistantStream } from '@kitn.ai/ui/state';
+  import { readOpenAIStream, toOpenAIMessages } from '@kitn.ai/ui/wire';
 
   // Registration is async (SSR-safe) — wait for the element before using it.
   await customElements.whenDefined('kai-chat');
@@ -142,14 +145,17 @@ The components are deliberately **transport-agnostic**: `<kai-chat>` just render
     if (!text) return;
 
     // 1. Show the user message immediately
-    const history = [...chat.messages, { id: crypto.randomUUID(), role: 'user', content: text }];
+    const history = [...chat.messages,
+      { id: crypto.randomUUID(), role: 'user', parts: [{ type: 'text', text }] }];
     chat.messages = history;
     chat.value = '';        // clear the input
     chat.loading = true;
 
-    // 2. Add an empty assistant message we'll stream into
-    const assistantId = crypto.randomUUID();
-    chat.messages = [...history, { id: assistantId, role: 'assistant', content: '' }];
+    // 2. Open the assistant message. createAssistantStream appends it and folds
+    //    each delta onto the right part, reassigning `messages` every time.
+    const stream = createAssistantStream((update) => {
+      chat.messages = update(chat.messages);
+    });
 
     try {
       // In production, replace this URL with your own proxy endpoint.
@@ -162,59 +168,41 @@ The components are deliberately **transport-agnostic**: `<kai-chat>` just render
         body: JSON.stringify({
           model: 'anthropic/claude-sonnet-4',
           stream: true,
-          messages: history.map((m) => ({ role: m.role, content: m.content })),
+          // The encoder turns the thread into the OpenAI `messages` array,
+          // keeping tool calls and their results in the order the model needs.
+          messages: toOpenAIMessages(history),
         }),
       });
 
-      const reader = res.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = '';
-      let answer = '';
-
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-
-        // SSE frames are separated by newlines; each data line is JSON
-        const lines = buffer.split('\n');
-        buffer = lines.pop();               // keep the partial last line
-        for (const line of lines) {
-          const s = line.trim();
-          if (!s.startsWith('data:')) continue;  // skip ": keep-alive" comments
-          const payload = s.slice(5).trim();
-          if (payload === '[DONE]') continue;
-          try {
-            const delta = JSON.parse(payload).choices?.[0]?.delta?.content;
-            if (!delta) continue;
-            answer += delta;
-            // Replace the assistant message with a NEW object so the row re-renders
-            chat.messages = chat.messages.map((m) =>
-              m.id === assistantId ? { ...m, content: answer } : m
-            );
-          } catch { /* ignore non-JSON keep-alive lines */ }
-        }
-      }
+      // Parses the whole stream: keep-alive comments, multi-line frames,
+      // codepoints split across a socket boundary, tool calls, reasoning.
+      await readOpenAIStream(res, stream);
     } catch (err) {
-      chat.messages = chat.messages.map((m) =>
-        m.id === assistantId ? { ...m, content: '⚠️ ' + err.message } : m
-      );
+      // A non-ok response throws WireError before a single chunk is read, so put
+      // the reason in the bubble rather than leaving an empty one.
+      stream.appendText('Request failed: ' + err.message);
     } finally {
+      stream.done();
       chat.loading = false;
     }
   });
 </script>
 ```
 
-Key point: reassign `chat.messages` with a **new array containing a new object** for the streaming message on each chunk — that's what triggers the re-render. Mutating the existing object in place won't update the view.
+Key point: `chat.messages` has to be reassigned with a **new array containing a new object** for the streaming message on each chunk. That's what triggers the re-render. Mutating the existing object in place won't update the view. `createAssistantStream` is what satisfies that rule for you; if you drive `messages` by hand, you own it.
+
+`@kitn.ai/ui/wire` also ships `readAnthropicStream`, the helpers for a multi-round tool loop, and a seam for a custom wire format. See the [wire adapter recipe](https://ui.kitn.ai/guides/recipes/wire-adapter/).
 
 ### Text-to-speech (TTS)
 
 #### Option 1 — Browser-native (zero dependencies)
 
-The Web Speech API speaks text with no network call. Speak each assistant reply once it finishes streaming — call `speak(answer)` right before `chat.loading = false` in the example above:
+The Web Speech API speaks text with no network call. `readOpenAIStream` resolves with the finished turn, so speak `turn.text` in the example above:
 
 ```js
+const turn = await readOpenAIStream(res, stream);
+speak(turn.text);
+
 function speak(text) {
   if (!('speechSynthesis' in window)) return;
   const utter = new SpeechSynthesisUtterance(text);
@@ -236,7 +224,19 @@ function speakIncremental(fullText) {
     spokenUpTo = lastBreak + 1;
   }
 }
-// call speakIncremental(answer) inside the streaming loop
+
+// A sink is a plain object, so wrap it to see the text as it arrives. Everything
+// else passes through untouched.
+let sofar = '';
+const speaking = {
+  ...stream,
+  appendText(delta) {
+    sofar += delta;
+    speakIncremental(sofar);
+    return stream.appendText(delta);
+  },
+};
+await readOpenAIStream(res, speaking);
 ```
 
 #### Option 2 — Cloud TTS (OpenAI, ElevenLabs, …)
@@ -268,16 +268,15 @@ You can trigger either option from the streaming completion (auto-read replies)
 
 ## State helpers & hooks
 
-`@kitn.ai/ui/state` ships immutable helpers (`appendMessage`, `upsertMessage`, `updateMessage`, `removeMessage`, `appendContent`) and a streaming handle (`createAssistantStream`) so you don't hand-roll array mutations. React apps get `useKaiChat` (from `@kitn.ai/ui/react`); SolidJS apps get `createKaiChat` (from `@kitn.ai/ui`). Both return a `bind` object to spread directly onto the element:
+`@kitn.ai/ui/state` ships immutable helpers (`appendMessage`, `upsertMessage`, `updateMessage`, `removeMessage`, `appendText`, `textMessage`), the part-level folds they build on (`appendTextPart`, `appendReasoningPart`, `upsertToolPart`, `upsertCardPart`), and a streaming handle (`createAssistantStream`) so you don't hand-roll array mutations. React apps get `useKaiChat` (from `@kitn.ai/ui/react`); SolidJS apps get `createKaiChat` (from `@kitn.ai/ui`). Both return a `bind` object to spread directly onto the element:
 
 ```tsx
 import { Chat, useKaiChat } from '@kitn.ai/ui/react';
-import { createAssistantStream } from '@kitn.ai/ui/state';
 
 function App() {
   const chat = useKaiChat({
     async onSubmit({ value }) {
-      chat.append({ id: crypto.randomUUID(), role: 'user', content: value });
+      chat.append({ id: crypto.randomUUID(), role: 'user', parts: [{ type: 'text', text: value }] });
       const s = chat.streamAssistant();
       for await (const part of backend(value)) s.appendText(part);
       s.done();

package/dist/components/artifact-card.d.ts

@@ -0,0 +1,51 @@
+import { JSX } from 'solid-js';
+import { CardHost } from '../primitives/card-contract.js';
+import { ArtifactCardData } from '../primitives/card-data-types.js';
+export type { ArtifactCardData, ArtifactCardEnvelope, ArtifactCardFile, ArtifactCardTab, } from '../primitives/card-data-types.js';
+/** Height the artifact card falls back to. Tall enough that a framed page is
+ *  actually legible in a thread, short enough to leave the conversation visible. */
+export declare const DEFAULT_ARTIFACT_CARD_HEIGHT = "420px";
+export interface ArtifactCardProps {
+    data: ArtifactCardData;
+    cardId: string;
+    heading?: string;
+    host?: CardHost;
+}
+/** Chrome + sizing around `<Artifact>` for the `artifact` card type.
+ *
+ *  WHY A WRAPPER IS REQUIRED, not cosmetic. `<Artifact>`'s root is
+ *  `flex h-full w-full flex-col` — it is built to FILL a container that already
+ *  has a height (a resizable panel, a split view). A message thread gives its
+ *  parts no height at all, so `h-full` resolves against an auto-height parent,
+ *  the frame computes to ZERO, and the card renders as an invisible nothing.
+ *  The explicit `height` here is what makes the card visible; `data.height`
+ *  overrides it.
+ *
+ *  `part`/`data-card-type` are stable handles. `CardRenderer` renders card
+ *  components bare, and in the web-component path `cardComponentsFromTags` maps a
+ *  non-overridden built-in straight to its Solid component — so there is no
+ *  `<kai-artifact>` tag in the DOM to point at. This wrapper is the only stable
+ *  thing to select, which is what lets a test count rendered artifacts inside
+ *  `<kai-thread>`'s shadow root.
+ *
+ *  `part="card"` matches the other chromed cards, which get it from `<Card>`;
+ *  this one hand-rolls its chrome and so states it directly. The artifact-specific
+ *  handle is `data-card-type`, NOT a second part token: every `::part` name has to
+ *  be declared in `elements/slots.ts` (the drift guard in `slots.test.ts` enforces
+ *  it), so adding an `artifact` part is a deliberate public-API decision to make
+ *  there, not something to smuggle in from a component.
+ *
+ *  `envelope.title` renders as a HEADING above the frame rather than being folded
+ *  into `displayUrl`: the address field states where the preview is pointing, and
+ *  overwriting it with a title would make it lie. A heading is also what the four
+ *  other chromed cards (form/confirm/tasks/choice) already do with `title`.
+ *
+ *  `tab`/`activeFile` are SEEDS, never re-asserted — see their notes on
+ *  `ArtifactCardData`. A revised envelope must not undo what the user did.
+ *
+ *  The three observation callbacks emit the contract's EXISTING `state` verb —
+ *  the contract is frozen, and a new kind would force a CARD_CONTRACT_VERSION
+ *  bump. Each patch key mirrors a `data` field name, so a host can merge the
+ *  patch straight back into `envelope.data` and re-send it; `addCard` upserts on
+ *  `envelope.id`, so that round-trip revises the card instead of duplicating it. */
+export declare function ArtifactCard(props: ArtifactCardProps): JSX.Element;

package/dist/components/artifact.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'solid-js';
-import { FileTreeFile } from './file-tree';
+import { FileTreeFile } from './file-tree.js';
 export type ArtifactTab = 'preview' | 'code';
 /** A file the artifact can preview + show source for. */
 export type ArtifactFile = FileTreeFile;

package/dist/components/attachments.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
-import { AttachmentData, AttachmentMediaCategory, AttachmentVariant } from './attachment-types';
-export type { AttachmentData, AttachmentMediaCategory, AttachmentVariant } from './attachment-types';
+import { AttachmentData, AttachmentMediaCategory, AttachmentVariant } from './attachment-types.js';
+export type { AttachmentData, AttachmentMediaCategory, AttachmentVariant } from './attachment-types.js';
 export declare const getMediaCategory: (data: AttachmentData) => AttachmentMediaCategory;
 export declare const getAttachmentLabel: (data: AttachmentData) => string;
 interface AttachmentsContextValue {

package/dist/components/audio-visualizer/index.d.ts

@@ -1,7 +1,7 @@
 import { Accessor, JSX } from 'solid-js';
-import { VariantProps } from './variant-bar';
-import { VisualizerSize } from './sizes';
-import { UniformType } from './shader-canvas';
+import { VariantProps } from './variant-bar.js';
+import { VisualizerSize } from './sizes.js';
+import { UniformType } from './shader-canvas.js';
 export type VisualizerVariant = 'bar' | 'grid' | 'radial' | 'wave' | 'aurora' | 'custom';
 export declare function normalizeVariant(input: string | undefined): VisualizerVariant;
 /** A consumer-supplied fragment shader, for `variant="custom"`. */

package/dist/components/audio-visualizer/labs/lab-choreography.d.ts

@@ -0,0 +1,59 @@
+import { LabLook } from './lab-shaders.js';
+/** The agent states the kit's visualizers respond to, plus manual free play. */
+export type LabState = 'manual' | 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking';
+export declare const LAB_STATES: LabState[];
+/** Every tunable the lab shaders read. Flat on purpose: story args map 1:1. */
+export interface LabParams {
+    baseR: number;
+    ampIdle: number;
+    ampVoice: number;
+    radVoice: number;
+    sigma: number;
+    gain: number;
+    f1: number;
+    f2: number;
+    s1: number;
+    s2: number;
+    envSpd: number;
+    sepSpd: number;
+    whiteLo: number;
+    whiteHi: number;
+    bloomMul: number;
+    bloomGain: number;
+    delta: number;
+    off: number;
+    wWidth: number;
+    wMin: number;
+    fillGain: number;
+    edgeGain: number;
+    flut: number;
+    twistSpd: number;
+    warpAmp: number;
+    lens: number;
+    spec: number;
+    tint: number;
+    vSpeed: number;
+    presence: number;
+    gather: number;
+    core: number;
+    neural: number;
+    boltJag: number;
+    boltWidth: number;
+    boltRate: number;
+}
+/** Hand-tuned in the aurora playground; per-look starting points. */
+export declare const LOOK_DEFAULTS: Record<LabLook, LabParams>;
+export interface LabFrame {
+    t: number;
+    level: number;
+    values: LabParams;
+}
+/**
+ * The state choreography from the playground, per frame. Slow targets glide
+ * over seconds (presence slowest, so smoke visibly forms and dissipates);
+ * tempo runs on an accumulated warped clock, so state changes never jump the
+ * animation phase; the ember beats and the bolts fire in real time.
+ */
+export declare function createChoreography(getLook: () => LabLook, getState: () => LabState, getParams: () => LabParams): {
+    step: (dt: number) => LabFrame;
+};

package/dist/components/audio-visualizer/labs/lab-shaders.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The four lab looks, written for `ShaderCanvas` in the same `mainImage`
+ * convention the `custom` variant documents. Every uniform is declared by
+ * the canvas from the uniform map (`lab-visualizer.tsx`), never in the body.
+ *
+ * All four are original clean-room work from the aurora prototyping sessions
+ * (see `examples/internal/aurora-playground`, the tuning playground these were
+ * born in). Braid and ribbon read the accent through the shared ring pipeline;
+ * planet and orb are stationary vessels whose CONTENTS react to state and
+ * voice: presence materializes the smoke, gather settles or centers it, the
+ * ember pulses while connecting, and thinking fires fractal lightning.
+ */
+/** Three woven strands sharing one wave family; pileups soft-compressed. */
+export declare const BRAID_FRAGMENT = "\nfloat labStroke(float d, float sigma) {\n  float q = d / sigma;\n  float q2 = q * q;\n  float core = exp(-q2 * q2);\n  float bq = d / (sigma * uBloomMul);\n  float bloom = exp(-bq * bq) * uBloomGain;\n  return core + bloom;\n}\n\nvec4 labRingColor(float glow, float bfloor, float bscale, float wcap, vec2 fragCoord) {\n  float bright = bfloor + bscale * min(glow, 1.2);\n  float white = smoothstep(uWhiteLo, uWhiteHi, glow) * wcap;\n  vec3 col = mix(uColor * bright, vec3(1.0), white);\n  float alpha = clamp(glow, 0.0, 1.0);\n  float n = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);\n  alpha = clamp(alpha + (n - 0.5) / 255.0, 0.0, 1.0);\n  return vec4(col * alpha, alpha);\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n  vec2 hres = iResolution.xy * 0.5;\n  vec2 p = (fragCoord - hres) / hres.y;\n  float r = length(p);\n  float th = atan(p.y, p.x);\n  float t = uT;\n\n  float amp = uAmpIdle + uAmpVoice * uLvl;\n  float baseR = uBaseR + uRadVoice * uLvl;\n  float env = 0.62 + 0.38 * sin(th * 2.0 + t * uEnvSpd + 2.0);\n\n  float glow = 0.0;\n  for (int i = 0; i < 3; i++) {\n    float fi = float(i);\n    float a = th + fi * uDelta;\n    float tt = t + fi * 1.3;\n    float wob = sin(a * uF1 + tt * uS1) * 0.55 + sin(a * uF2 - tt * uS2) * 0.45;\n    float ampi = amp * (0.65 + 0.35 * fi);\n    float sepMod = 0.5 + 0.5 * sin(th + t * uSepSpd + fi * 1.9);\n    float ringR = baseR + (fi - 1.0) * uOff * (0.35 + 1.5 * sepMod) + wob * ampi * env;\n    glow += uGain * (0.8 + 0.35 * env) * labStroke(abs(r - ringR), uSigma);\n  }\n  // three overlapping strands can sum past every threshold; compress so\n  // crossings brighten without blowing out to a solid white tube\n  glow = glow / (1.0 + 0.35 * glow);\n  fragColor = labRingColor(glow, 0.55, 0.65, 0.45, fragCoord);\n}\n";
+/** One ribbon whose width pinches to zero at traveling twist points. */
+export declare const RIBBON_FRAGMENT = "\nfloat labStroke(float d, float sigma) {\n  float q = d / sigma;\n  float q2 = q * q;\n  float core = exp(-q2 * q2);\n  float bq = d / (sigma * uBloomMul);\n  float bloom = exp(-bq * bq) * uBloomGain;\n  return core + bloom;\n}\n\nvec4 labRingColor(float glow, float bfloor, float bscale, float wcap, vec2 fragCoord) {\n  float bright = bfloor + bscale * min(glow, 1.2);\n  float white = smoothstep(uWhiteLo, uWhiteHi, glow) * wcap;\n  vec3 col = mix(uColor * bright, vec3(1.0), white);\n  float alpha = clamp(glow, 0.0, 1.0);\n  float n = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);\n  alpha = clamp(alpha + (n - 0.5) / 255.0, 0.0, 1.0);\n  return vec4(col * alpha, alpha);\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n  vec2 hres = iResolution.xy * 0.5;\n  vec2 p = (fragCoord - hres) / hres.y;\n  float r = length(p);\n  float th = atan(p.y, p.x);\n  float t = uT;\n\n  float amp = uAmpIdle + uAmpVoice * uLvl;\n  float baseR = uBaseR + uRadVoice * uLvl;\n  float env = 0.62 + 0.38 * sin(th * 2.0 + t * uEnvSpd + 2.0);\n\n  float wRaw = sin(th * 2.0 + t * uTwistSpd) * 0.6\n             + sin(th * 3.0 - t * uTwistSpd * 0.7 + 1.7) * 0.4;\n  float w = (abs(wRaw) * uWWidth + uWMin) * (0.55 + 0.45 * env);\n\n  float c = baseR\n    + (sin(th * uF1 + t * uS1) * 0.6\n     + sin(th * (uF1 + 2.0) - t * uS1 * 0.63 + 2.3) * 0.4) * amp;\n\n  float fl = uFlut * (0.5 + 0.9 * uLvl);\n  float e1 = c - w + sin(th * uF2 + t * uS2) * fl;\n  float e2 = c + w + sin(th * uF2 * 1.3 - t * uS2 * 0.8 + 2.0) * fl;\n\n  float lo = min(e1, e2), hi = max(e1, e2);\n  float ww = max(hi - lo, 0.004);\n  float dens = clamp(uWWidth * 1.2 / ww, 0.4, 2.0);\n\n  float box = smoothstep(-uSigma, uSigma, r - lo)\n            * (1.0 - smoothstep(-uSigma, uSigma, r - hi));\n  float u = clamp((r - lo) / ww, 0.0, 1.0);\n  float rim = smoothstep(0.5, 1.0, abs(u - 0.5) * 2.0);\n\n  float outside = max(max(lo - r, r - hi), 0.0);\n  float bs = uSigma * uBloomMul;\n  float halo = exp(-(outside * outside) / (2.0 * bs * bs)) * uBloomGain * dens;\n\n  float glow = uGain * uFillGain\n             * (box * dens * (1.0 + uEdgeGain * rim) + halo * (1.0 - box));\n  fragColor = labRingColor(glow, 0.75, 0.45, 0.55, fragCoord);\n}\n";
+/** Dense churning cloud cover on a stationary glass sphere. */
+export declare const PLANET_FRAGMENT = "\nfloat labHash(vec2 q) {\n  return fract(sin(dot(q, vec2(127.1, 311.7))) * 43758.5453);\n}\nfloat labNoise(vec2 q) {\n  vec2 i = floor(q);\n  vec2 f = fract(q);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float a = labHash(i);\n  float b = labHash(i + vec2(1.0, 0.0));\n  float c = labHash(i + vec2(0.0, 1.0));\n  float d = labHash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\nfloat labFbm(vec2 q) {\n  float sum = 0.0;\n  float amp = 0.5;\n  for (int i = 0; i < 4; i++) {\n    sum += amp * labNoise(q);\n    q *= 2.03;\n    amp *= 0.5;\n  }\n  return sum;\n}\n\nfloat labSegDist(vec2 q, vec2 a, vec2 b) {\n  vec2 ab = b - a;\n  float h = clamp(dot(q - a, ab) / max(dot(ab, ab), 1.0e-6), 0.0, 1.0);\n  return length(q - a - ab * h);\n}\nvec2 labSparkPos(float k, float i, float R) {\n  float h1 = labHash(vec2(k * 7.31 + 1.13, i * 3.71 + 0.17));\n  float h2 = labHash(vec2(i * 9.13 + 2.29, k * 5.77 + 0.53));\n  float av = 6.2831853 * h1;\n  float rad = R * 0.85 * sqrt(h2);\n  return vec2(cos(av), sin(av)) * rad;\n}\nfloat labBolt(vec2 q, vec2 A, vec2 B, float seed, float R, float life) {\n  vec2 ab = B - A;\n  float len = max(length(ab), 1.0e-4);\n  vec2 dir = ab / len;\n  vec2 nrm = vec2(-dir.y, dir.x);\n  vec2 w = q - A;\n  float u = dot(w, dir) / len;\n  float v = dot(w, nrm);\n  if (u < -0.05 || u > 1.05 || abs(v) > R * 0.30) return 0.0;\n  float uu = clamp(u, 0.0, 1.0);\n  float taper = sin(uu * 3.14159265);\n  float off1 = (labFbm(vec2(uu * 9.0 + seed * 13.1, seed * 7.7)) - 0.5) * 0.55 * uBoltJag;\n  float off2 = (labFbm(vec2(uu * 23.0 + seed * 5.3, seed * 3.9 + 4.2)) - 0.5) * 0.22 * uBoltJag;\n  float mainArc = abs(v - (off1 + off2) * len * taper);\n  float forkArc = abs(v - (off1 * 0.6 - off2 * 1.8) * len * taper);\n  float wdt = R * (0.006 + 0.010 * life) * uBoltWidth;\n  float bolt = exp(-pow(mainArc / wdt, 2.0))\n             + 0.45 * exp(-pow(mainArc / (wdt * 3.0), 2.0))\n             + 0.5 * exp(-pow(forkArc / (wdt * 0.8), 2.0))\n             + 0.25 * exp(-pow(forkArc / (wdt * 2.5), 2.0));\n  return bolt * taper;\n}\nfloat labNeural(vec2 q, float t, float R) {\n  if (uNeural < 0.01) return 0.0;\n  float acc = 0.0;\n  for (int k = 0; k < 5; k++) {\n    float fk = float(k);\n    float period = (1.1 + 1.3 * labHash(vec2(fk, 3.3))) / max(uBoltRate, 0.05);\n    float cyc = t / period + labHash(vec2(fk, 7.7)) * 7.0;\n    float i = floor(cyc);\n    float life = fract(cyc);\n    float env = smoothstep(0.0, 0.04, life) * exp(-5.0 * life);\n    if (env >= 0.004) {\n      vec2 pos = labSparkPos(fk, i, R);\n      vec2 prev = labSparkPos(fk, i - 1.0, R);\n      float seed = labHash(vec2(fk * 3.1, i * 1.7));\n      float bolt = labBolt(q, prev, pos, seed, R, life) * env;\n      vec2 dp = q - pos;\n      vec2 dq = q - prev;\n      float tips = (exp(-dot(dp, dp) / (2.0 * R * R * 0.0016))\n                  + 0.6 * exp(-dot(dq, dq) / (2.0 * R * R * 0.0012))) * env;\n      acc += bolt * 1.2 + tips * 0.8;\n    }\n  }\n  return acc * uNeural;\n}\n\nvec4 labRingColor(float glow, float bfloor, float bscale, float wcap, vec2 fragCoord) {\n  float bright = bfloor + bscale * min(glow, 1.2);\n  float white = smoothstep(uWhiteLo, uWhiteHi, glow) * wcap;\n  vec3 col = mix(uColor * bright, vec3(1.0), white);\n  float alpha = clamp(glow, 0.0, 1.0);\n  float n = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);\n  alpha = clamp(alpha + (n - 0.5) / 255.0, 0.0, 1.0);\n  return vec4(col * alpha, alpha);\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n  vec2 hres = iResolution.xy * 0.5;\n  vec2 p = (fragCoord - hres) / hres.y;\n  float t = uT;\n  float R = uBaseR * 2.0;\n  float d = length(p);\n  float mask = 1.0 - smoothstep(R - 0.012, R + 0.004, d);\n  float zn = sqrt(max(R * R - d * d, 0.0)) / max(R, 1.0e-4);\n  vec2 ps = p / (R * mix(1.0, 0.35 + 0.65 * zn, uLens));\n\n  float tt = t * uTwistSpd;\n  float sc = uF2 * 0.35;\n  float turb = uWarpAmp * (0.5 + 0.8 * uLvl);\n\n  float dens = 0.0;\n  for (int k = 0; k < 3; k++) {\n    float fk = float(k);\n    vec2 o = vec2(fk * 7.31, fk * 3.77);\n    vec2 pk = ps * (1.0 + fk * 0.18 * (1.0 - zn));\n    vec2 q = vec2(\n      labFbm(pk * sc * 0.6 + o + vec2(tt * uS1 * 0.55, 0.0)),\n      labFbm(pk * sc * 0.6 + o + vec2(5.2, 1.3) - vec2(0.0, tt * uS2 * 0.45)));\n    float n = labFbm(pk * sc + turb * 2.0 * (q - 0.5) + o + vec2(tt * 0.28, tt * 0.18));\n    dens += (0.45 - fk * 0.1) * n;\n  }\n  dens = smoothstep(0.30 + (1.0 - uPresence) * 0.40, 0.78, dens);\n  dens *= 0.12 + 0.88 * uPresence;\n\n  vec2 lp = vec2(cos(tt * 0.23), sin(tt * 0.31)) * R * 0.35;\n  vec2 dl = p - lp;\n  float smoke = dens * (0.5 + 0.9 * exp(-dot(dl, dl) / (2.0 * R * R * 0.16))) * (0.55 + 0.65 * zn)\n              + 0.05 * zn;\n\n  float rim = pow(smoothstep(R * 0.62, R, d), 3.0);\n  vec2 hp = p - vec2(-0.38, 0.42) * R;\n  float spec = exp(-dot(hp, hp) / (2.0 * R * R * 0.004)) * uSpec;\n  float core = uCore * exp(-(d * d) / (2.0 * R * R * 0.026));\n  float nrl = labNeural(p, tt * 0.6, R);\n\n  float glow = uGain * mask\n             * (uFillGain * 1.6 * smoke + uEdgeGain * 0.8 * rim + spec + core * 1.3 + nrl * 1.2);\n  fragColor = labRingColor(glow, 0.75, 0.45, 0.55, fragCoord);\n}\n";
+/** Luminous smoke sealed in a stationary glass sphere, lit from within. */
+export declare const ORB_FRAGMENT = "\nfloat labHash(vec2 q) {\n  return fract(sin(dot(q, vec2(127.1, 311.7))) * 43758.5453);\n}\nfloat labNoise(vec2 q) {\n  vec2 i = floor(q);\n  vec2 f = fract(q);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float a = labHash(i);\n  float b = labHash(i + vec2(1.0, 0.0));\n  float c = labHash(i + vec2(0.0, 1.0));\n  float d = labHash(i + vec2(1.0, 1.0));\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\n}\nfloat labFbm(vec2 q) {\n  float sum = 0.0;\n  float amp = 0.5;\n  for (int i = 0; i < 4; i++) {\n    sum += amp * labNoise(q);\n    q *= 2.03;\n    amp *= 0.5;\n  }\n  return sum;\n}\n\nfloat labSegDist(vec2 q, vec2 a, vec2 b) {\n  vec2 ab = b - a;\n  float h = clamp(dot(q - a, ab) / max(dot(ab, ab), 1.0e-6), 0.0, 1.0);\n  return length(q - a - ab * h);\n}\nvec2 labSparkPos(float k, float i, float R) {\n  float h1 = labHash(vec2(k * 7.31 + 1.13, i * 3.71 + 0.17));\n  float h2 = labHash(vec2(i * 9.13 + 2.29, k * 5.77 + 0.53));\n  float av = 6.2831853 * h1;\n  float rad = R * 0.85 * sqrt(h2);\n  return vec2(cos(av), sin(av)) * rad;\n}\nfloat labBolt(vec2 q, vec2 A, vec2 B, float seed, float R, float life) {\n  vec2 ab = B - A;\n  float len = max(length(ab), 1.0e-4);\n  vec2 dir = ab / len;\n  vec2 nrm = vec2(-dir.y, dir.x);\n  vec2 w = q - A;\n  float u = dot(w, dir) / len;\n  float v = dot(w, nrm);\n  if (u < -0.05 || u > 1.05 || abs(v) > R * 0.30) return 0.0;\n  float uu = clamp(u, 0.0, 1.0);\n  float taper = sin(uu * 3.14159265);\n  float off1 = (labFbm(vec2(uu * 9.0 + seed * 13.1, seed * 7.7)) - 0.5) * 0.55 * uBoltJag;\n  float off2 = (labFbm(vec2(uu * 23.0 + seed * 5.3, seed * 3.9 + 4.2)) - 0.5) * 0.22 * uBoltJag;\n  float mainArc = abs(v - (off1 + off2) * len * taper);\n  float forkArc = abs(v - (off1 * 0.6 - off2 * 1.8) * len * taper);\n  float wdt = R * (0.006 + 0.010 * life) * uBoltWidth;\n  float bolt = exp(-pow(mainArc / wdt, 2.0))\n             + 0.45 * exp(-pow(mainArc / (wdt * 3.0), 2.0))\n             + 0.5 * exp(-pow(forkArc / (wdt * 0.8), 2.0))\n             + 0.25 * exp(-pow(forkArc / (wdt * 2.5), 2.0));\n  return bolt * taper;\n}\nfloat labNeural(vec2 q, float t, float R) {\n  if (uNeural < 0.01) return 0.0;\n  float acc = 0.0;\n  for (int k = 0; k < 5; k++) {\n    float fk = float(k);\n    float period = (1.1 + 1.3 * labHash(vec2(fk, 3.3))) / max(uBoltRate, 0.05);\n    float cyc = t / period + labHash(vec2(fk, 7.7)) * 7.0;\n    float i = floor(cyc);\n    float life = fract(cyc);\n    float env = smoothstep(0.0, 0.04, life) * exp(-5.0 * life);\n    if (env >= 0.004) {\n      vec2 pos = labSparkPos(fk, i, R);\n      vec2 prev = labSparkPos(fk, i - 1.0, R);\n      float seed = labHash(vec2(fk * 3.1, i * 1.7));\n      float bolt = labBolt(q, prev, pos, seed, R, life) * env;\n      vec2 dp = q - pos;\n      vec2 dq = q - prev;\n      float tips = (exp(-dot(dp, dp) / (2.0 * R * R * 0.0016))\n                  + 0.6 * exp(-dot(dq, dq) / (2.0 * R * R * 0.0012))) * env;\n      acc += bolt * 1.2 + tips * 0.8;\n    }\n  }\n  return acc * uNeural;\n}\n\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n  vec2 hres = iResolution.xy * 0.5;\n  vec2 p = (fragCoord - hres) / hres.y;\n  float t = uT;\n  float R = uBaseR * 2.0;\n  float d = length(p);\n  float mask = 1.0 - smoothstep(R - 0.010, R + 0.004, d);\n  float zn = sqrt(max(R * R - d * d, 0.0)) / max(R, 1.0e-4);\n  float inner = 1.0 - clamp(d / max(R, 1.0e-4), 0.0, 1.0);\n  vec2 ps = p / (R * mix(1.0, 0.35 + 0.65 * zn, uLens));\n\n  float tt = t * uTwistSpd;\n  // rigid drift plus a BOUNDED oscillating stir: shear that accumulates\n  // forever winds any pattern into a spiral\n  float ang = tt * 0.04\n            + (sin(tt * 0.11) * 0.55 + sin(tt * 0.047 + 1.7) * 0.35) * inner;\n  float ca = cos(ang), sa = sin(ang);\n  ps = mat2(ca, -sa, sa, ca) * ps;\n\n  float sc = uF2 * 0.18;\n  float tau0 = 0.50 + 0.06 * uLvl;\n  float bw = mix(0.16, 0.12, uLvl);\n\n  vec2 lp = vec2(cos(tt * 0.21), sin(tt * 0.27)) * R * 0.42;\n  vec2 L = normalize(lp - p + vec2(1.0e-4, 0.0));\n\n  float dens = 0.0;\n  float lit = 0.0;\n  for (int k = 0; k < 2; k++) {\n    float fk = float(k);\n    vec2 o = vec2(fk * 9.17, fk * 5.13);\n    float scale = sc * (1.0 + 0.7 * fk);\n    vec2 pk = ps * (1.0 + fk * 0.24 * (1.0 - zn)) + o;\n\n    // bounded orbit, never a straight scroll: the coverage pattern wanders\n    // around home instead of migrating off one side of the vessel\n    float cn = labFbm(pk * 0.9 + vec2(sin(tt * 0.041), -cos(tt * 0.033)) * 0.8);\n    float covLo = 0.62 - 0.30 * uFillGain + 0.03 * uLvl\n                + (1.0 - uPresence) * 0.45;\n    float bottomness = clamp(-p.y / max(R, 1.0e-4) * 1.3 - 0.1, 0.0, 1.0);\n    float gBias = 0.16 * inner * uPresence\n                + max(uGather, 0.0) * 0.30 * inner\n                + max(-uGather, 0.0) * 0.38 * bottomness;\n    float cov = smoothstep(covLo, covLo + 0.28, cn + gBias);\n\n    vec2 flow = vec2(-pk.y, pk.x) * 0.5 + vec2(0.0, 0.4);\n    float cyc = tt * 0.10 * uS1 * (1.0 + 0.6 * fk);\n    float ph0 = fract(cyc + 0.35 * cn);\n    float ph1 = fract(cyc + 0.35 * cn + 0.5);\n    float w0 = 1.0 - abs(1.0 - 2.0 * ph0);\n\n    vec2 w2 = vec2(labFbm(pk * scale * 0.5 + vec2(sin(tt * 0.09 * uS2), cos(tt * 0.075 * uS2)) * 0.9),\n                   labFbm(pk * scale * 0.5 + vec2(3.7, 8.1) + vec2(cos(tt * 0.065 * uS2), sin(tt * 0.083 * uS2)) * 0.9));\n    vec2 qw = pk * scale + uWarpAmp * 3.0 * (w2 - 0.5);\n\n    float n = mix(labFbm(qw - flow * 1.2 * ph1), labFbm(qw - flow * 1.2 * ph0), w0);\n    float sgn = 2.0 * n - 1.0;\n    float ridge = 1.0 - abs(sgn);\n    ridge *= ridge;\n    float band = smoothstep(tau0 - bw, tau0, n) * (1.0 - smoothstep(tau0, tau0 + bw, n));\n    float dk = cov * (band * (0.6 + 0.5 * ridge) + 0.12 * n * cov);\n    dens += (0.60 - 0.22 * fk) * dk;\n\n    float nL = labFbm(qw + L * 0.5);\n    lit += clamp((nL - n) * 3.0, 0.0, 1.0) * dk;\n  }\n  dens *= 1.0 - smoothstep(0.72, 0.97, d / max(R, 1.0e-4));\n  dens *= (0.45 + 1.25 * uFillGain) * (1.0 + 0.25 * uLvl);\n  dens *= 0.08 + 0.92 * uPresence;\n  float dEff = clamp(dens, 0.0, 1.5) * (0.5 + 0.5 * zn);\n  float aSmoke = 1.0 - exp(-2.6 * dEff);\n\n  float rL = length(p - lp) / R;\n  float G = 1.0 / (1.0 + 2.0 * rL + 8.0 * rL * rL);\n  float act = 0.7 + 0.8 * uLvl;\n\n  vec3 albedo = mix(vec3(0.84, 0.87, 0.92), uColor, uTint);\n  vec3 body = albedo * (0.30 + 0.55 * exp(-1.4 * dEff))\n            + uColor * (lit * 0.5 + dEff * G * 1.1) * act;\n  vec3 bgIn = uColor * 0.05 * zn;\n  vec3 col = mix(bgIn, body, aSmoke)\n           + uColor * G * act * 0.18 * zn;\n\n  float rim = pow(smoothstep(R * 0.66, R, d), 3.0);\n  vec2 hp = p - vec2(-0.38, 0.42) * R;\n  float spec = exp(-dot(hp, hp) / (2.0 * R * R * 0.004)) * uSpec;\n  float core = uCore * exp(-(d * d) / (2.0 * R * R * 0.022));\n  float nrl = labNeural(p, tt * 0.6, R);\n  col += uColor * rim * uEdgeGain * 0.7 + vec3(spec) + uColor * core * 1.5\n       + uColor * nrl * (0.7 + 0.6 * aSmoke);\n\n  col *= uGain * mask;\n  float alpha = clamp((aSmoke * 0.9 + G * act * 0.15 * zn + core + nrl * 0.55\n                     + rim * uEdgeGain * 0.5 + spec + 0.03 * zn) * uGain, 0.0, 1.0) * mask;\n  float nz = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);\n  alpha = clamp(alpha + (nz - 0.5) / 255.0, 0.0, 1.0);\n  fragColor = vec4(col, alpha);\n}\n";
+export type LabLook = 'braid' | 'ribbon' | 'planet' | 'orb';
+export declare const LAB_FRAGMENTS: Record<LabLook, string>;

package/dist/components/audio-visualizer/labs/lab-visualizer.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+import { LabLook } from './lab-shaders.js';
+import { LabParams, LabState } from './lab-choreography.js';
+export interface LabVisualizerProps {
+    look: LabLook;
+    state?: LabState;
+    color?: string;
+    /** Square canvas edge in px. */
+    size?: number;
+    /** Overrides on the look's tuned defaults. */
+    params?: Partial<LabParams>;
+}
+/**
+ * Runs one lab look through the same `ShaderCanvas` the shipped variants use,
+ * with the playground's state choreography driving the uniforms per frame.
+ * While `speaking`, a baked loudness loop stands in for a live voice.
+ */
+export declare function LabVisualizer(props: LabVisualizerProps): JSX.Element;

package/dist/components/audio-visualizer/variant-aurora.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
-import { VisualizerState } from '../../primitives/visualizer-sequences';
-import { ShaderVariantProps } from './index';
+import { VisualizerState } from '../../primitives/visualizer-sequences.js';
+import { ShaderVariantProps } from './index.js';
 /**
  * Per-state uniform targets, straight from fact sheet section 5's measured
  * table (`.superpowers/sdd/2026-08-07-audio-visualizers/reference/

package/dist/components/audio-visualizer/variant-bar.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
-import { VisualizerState } from '../../primitives/visualizer-sequences';
-import { VisualizerSize } from './sizes';
+import { VisualizerState } from '../../primitives/visualizer-sequences.js';
+import { VisualizerSize } from './sizes.js';
 /** Props every DOM variant takes. The dispatcher supplies all of them. */
 export interface VariantProps {
     state: VisualizerState;

package/dist/components/audio-visualizer/variant-custom.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
-import { UniformSpec } from './shader-canvas';
-import { ShaderVariantProps } from './index';
+import { UniformSpec } from './shader-canvas.js';
+import { ShaderVariantProps } from './index.js';
 /**
  * Uniforms every custom shader receives without asking: the standard set
  * (`uColor`, `uIntensity`, `uSpeed`, `uComplexity`) plus the audio pair that

package/dist/components/audio-visualizer/variant-grid.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'solid-js';
-import { VariantProps } from './variant-bar';
+import { VariantProps } from './variant-bar.js';
 /**
  * A grid of dots that pulses with the audio.
  *

package/dist/components/audio-visualizer/variant-radial.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'solid-js';
-import { VariantProps } from './variant-bar';
+import { VariantProps } from './variant-bar.js';
 /**
  * Bars arranged around a circle, growing outward with the audio.
  *

package/dist/components/audio-visualizer/variant-wave.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'solid-js';
-import { ShaderVariantProps } from './index';
+import { ShaderVariantProps } from './index.js';
 /**
  * A flowing oscilloscope line.
  *

package/dist/components/card-fallback.d.ts

@@ -1,10 +1,20 @@
 import { JSX } from 'solid-js';
 export interface CardFallbackProps {
-    /** The unrecognized envelope type, shown to aid debugging. */
+    /** The envelope type, shown to aid debugging. */
     type: string;
     /** The envelope id (for parity with cards; not displayed). */
     cardId?: string;
+    /**
+     * Why this card could not render, when the type WAS known but the data was not
+     * usable. Carries the failing field paths verbatim, e.g.
+     * `(root).actions: fewer than minItems 1`.
+     *
+     * Absent means the older case: an unrecognized type. The two are told apart by
+     * this prop rather than by a mode flag so a caller cannot ask for the diagnostic
+     * and forget to supply the diagnosis.
+     */
+    reason?: string;
 }
-/** Inert, themed fallback for an unsupported card type. Emits nothing itself —
+/** Inert, themed fallback for a card that cannot render. Emits nothing itself:
  *  the dispatcher emits the contract `error` event alongside rendering this. */
 export declare function CardFallback(props: CardFallbackProps): JSX.Element;

package/dist/components/card-renderer.d.ts

@@ -1,13 +1,74 @@
 import { JSX } from 'solid-js';
-import { CardEnvelope } from '../primitives/card-contract';
-import { CardComponentMap } from '../primitives/card-registry';
+import { CardEnvelope } from '../primitives/card-contract.js';
+import { CardComponentMap } from '../primitives/card-registry.js';
+/**
+ * Consumer card schemas by envelope type: `{ 'pricing-table': pricingSchema }`.
+ *
+ * `object`, NOT `JsonSchema`, and that is measured rather than lazy. A real schema
+ * is either imported from a `.json` file — where TypeScript widens `"type": "object"`
+ * to `string`, which `JsonSchema`'s literal union rejects — or written out with the
+ * `$schema` / `title` / `description` / `additionalProperties` keywords that
+ * `JsonSchema` does not describe at all, which excess-property checking rejects.
+ * Both are the ordinary case, so the tighter type would make the normal way of
+ * supplying a schema a compile error. `src/schemas/index.ts` widens `CardSchema`
+ * for exactly this reason and says so at length (lines 92-110 there).
+ *
+ * The value is handed straight to `validateCardData`, which reads only the keywords
+ * `validateAgainstSchema` implements and ignores the rest.
+ */
+export type CardSchemaMap = Record<string, object>;
 export interface CardRendererProps {
     envelope: CardEnvelope;
     /** Add/override type→component entries (merged over the built-ins). */
     types?: CardComponentMap;
+    /**
+     * JSON Schemas for the card types this app renders, keyed by `envelope.type`.
+     * `createCardRegistry(...).validationSchemas` is exactly this shape.
+     *
+     * The companion of `types`, and the half that was missing: `types` says WHAT
+     * draws a `pricing-table`, `schemas` says what a VALID one looks like. Without it
+     * the kit checks its own seven built-ins and leaves the developer's own card —
+     * the one the app actually cares about — as the only unvalidated thing on screen.
+     *
+     * A schema given here WINS over a built-in of the same name, matching
+     * `mergeCardComponents`, where the consumer's entry is spread over ours.
+     */
+    schemas?: CardSchemaMap;
+    /**
+     * Validate `envelope.data` against the built-in schema for `envelope.type` before
+     * rendering. Default `true`.
+     *
+     * ON IN PRODUCTION TOO, DELIBERATELY. The obvious alternative, stripping the check
+     * from production builds, inverts the point: a model emitting a bad shape is a
+     * production failure mode, so stripping it means the developer's USERS get the
+     * broken card while the developer's laptop looks fine. The cost is the projected
+     * schema data for all seven card types, measured by building this package twice
+     * (once with the projection stubbed to `{}`) rather than estimated: +834 B gzip on
+     * `dist/index.js` and +775 B gzip on the elements register bundle. That is below
+     * the noise floor of a package that already ships a Solid runtime and `marked`.
+     *
+     * Set `false` to opt out. A type with no schema at all — no built-in, and none
+     * supplied through `schemas` — is never validated either way.
+     */
+    validateCards?: boolean;
 }
+/**
+ * True when the consumer registered a schema for this type.
+ *
+ * Spelled out rather than left to `validateCardData` because it is a GATE, not a
+ * lookup: a consumer schema is the one thing that authorises validating a renderer
+ * that is not ours. `hasOwnProperty` (not `in`) so a type named `toString` cannot
+ * pick up `Object.prototype`, and the `typeof` check so a `{ 'x': null }` entry
+ * reads as "not registered" instead of matching and then validating against
+ * nothing. The same predicate lives in elements/cards.tsx for `<kai-cards>`; the
+ * two dispatchers already duplicate this rule (they compare component identity vs
+ * tag identity), so keep them in step.
+ */
+export declare function hasConsumerSchema(schemas: CardSchemaMap | undefined, type: string): boolean;
 export declare function CardRenderer(props: CardRendererProps): JSX.Element;
 /** Function sugar: renderCard(env) ≡ <CardRenderer envelope={env} />. */
 export declare function renderCard(envelope: CardEnvelope, opts?: {
     types?: CardComponentMap;
+    schemas?: CardSchemaMap;
+    validateCards?: boolean;
 }): JSX.Element;

package/dist/components/chat-container.d.ts

@@ -16,4 +16,7 @@ export interface ChatContainerScrollAnchorProps extends JSX.HTMLAttributes<HTMLD
     ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
 }
 declare function ChatContainerScrollAnchor(props: ChatContainerScrollAnchorProps): JSX.Element;
+/** `ChatContainer` is the exported alias of `ChatContainerRoot`; its props type
+ *  is aliased too, so the name a consumer imports always has a matching Props. */
+export type ChatContainerProps = ChatContainerRootProps;
 export { ChatContainerRoot as ChatContainer, ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor, };

package/dist/components/chat-scope-picker.d.ts

@@ -1,5 +1,5 @@
-import { DropdownController } from '../ui/dropdown';
-import { SearchFilters } from '../types';
+import { DropdownController } from '../ui/dropdown.js';
+import { SearchFilters } from '../types.js';
 export interface ChatScopePickerProps {
     currentLabel: string;
     onScopeChange: (filters: SearchFilters | undefined) => void;