@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/theme.css

@@ -6,39 +6,26 @@
  *   @source "../node_modules/@schlessera/brain-ui-react/src";
  * so the consumer build scans the component sources. Consumers without a
  * Tailwind build use the precompiled ./styles.css export instead.
+ *
+ * The kit's tokens come in here, so a consumer cannot forget them: the kit
+ * components this package renders read `--bk-*` and draw no colour without
+ * it (kit D23). It is the kit's `tokens.css`, not its `theme.css` — that
+ * entry carries the kit's own `@theme static` scales, and its `--spacing-2:
+ * 2px` would redefine this app's `p-2`. `tokens.css` is plain CSS: the
+ * values, the `color-scheme` switch under `[data-theme]`, the one `breathe`
+ * keyframe and the interaction rules, and no utility name.
  */
-@theme {
-  /* Backgrounds - warm-tinted darks */
-  --color-background: #0c0e12;
-  --color-surface: #141619;
-  --color-surface-raised: #1a1d22;
-  --color-surface-overlay: #1e2128;
-
-  /* Borders */
-  --color-border: #2a2d35;
-  --color-border-subtle: #1f2229;
-
-  /* Text hierarchy */
-  --color-foreground: #e8e4df;
-  --color-muted: #141619;
-  --color-muted-foreground: #8a8691;
-  --color-card: #141619;
-  --color-card-foreground: #e8e4df;
-
-  /* Primary: Amber */
-  --color-primary: #e09f3e;
-  --color-primary-foreground: #0c0e12;
-
-  /* Secondary */
-  --color-secondary: #1a1d22;
-  --color-secondary-foreground: #e8e4df;
-  --color-accent: #5bb5a2;
-  --color-accent-foreground: #0c0e12;
+@import "@schlessera/brain-ui-kit/tokens.css";
 
-  /* Semantic */
-  --color-destructive: #f87171;
-  --color-input: #2a2d35;
-  --color-ring: #e09f3e80;
+@theme {
+  /* D22's ladder (D37 confirmed it): the phone bar to 479, the collapsed rail
+     from 480, the expanded rail from 900, and a fourth pane from 1280 — with
+     the rule that a four-pane screen needs 1440. `md:` stays Tailwind's 768 for
+     content paddings; navigation and panes key on these. */
+  --breakpoint-tablet: 480px;
+  --breakpoint-laptop: 900px;
+  --breakpoint-desktop: 1280px;
+  --breakpoint-wide: 1440px;
 
   /* Radius */
   --radius: 0.5rem;
@@ -49,15 +36,80 @@
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
 }
 
+/*
+ * Colour. Every utility colour is the kit's token, and nothing else: the
+ * tokens are `light-dark()` pairs switched by `color-scheme` under
+ * `[data-theme]` (kit D32), so a literal hex here would be the one colour
+ * in the app that stays dark on paper — which is exactly what these were
+ * until the app shell was checked in light. `@theme inline` makes each
+ * utility carry `var(--bk-*)` itself rather than a `--color-*` alias on
+ * `:root`, so the token resolves where it is used and a light subtree
+ * inside a dark page keeps working.
+ *
+ * Two names per accent, because the kit has two: the INK (`--bk-color-amber`,
+ * a dark amber on paper) is for text, borders and rings — `text-primary`,
+ * `border-primary` — and the FILL (`--bk-amber-fill`, the same amber in
+ * both themes) is for solid or tinted backgrounds — `bg-primary-fill`,
+ * `bg-primary-fill/10` — with `--bk-on-fill` as the foreground that sits
+ * on it. One name serving both is how a solid amber button turned into dark
+ * brown on paper.
+ *
+ * `tests/theme-neutral.test.ts` holds this file to the rule: no hex, no
+ * rgb literal, only `var(--bk-*)` or a `color-mix()` of one.
+ */
+@theme inline {
+  /* Surfaces, from the canvas up */
+  --color-background: var(--bk-color-canvas);
+  --color-surface: var(--bk-color-surface);
+  --color-surface-raised: var(--bk-color-raised);
+  --color-surface-overlay: var(--bk-color-raised);
+
+  /* Borders */
+  --color-border: var(--bk-color-edge);
+  --color-border-subtle: var(--bk-color-line);
+
+  /* Text hierarchy */
+  --color-foreground: var(--bk-color-ink);
+  --color-muted: var(--bk-color-surface);
+  --color-muted-foreground: var(--bk-color-ink-mute);
+  --color-card: var(--bk-color-surface);
+  --color-card-foreground: var(--bk-color-ink);
+
+  /* Primary: amber. The MARK is the kit's third weight, for a dot of six
+     to eight pixels: a fill that small falls under 3:1 on paper, so the
+     kit darkens it (`--bk-amber-mark`) and the app uses it for status dots. */
+  --color-primary: var(--bk-color-amber);
+  --color-primary-fill: var(--bk-amber-fill);
+  --color-primary-mark: var(--bk-amber-mark);
+  --color-primary-foreground: var(--bk-on-fill);
+
+  /* Secondary */
+  --color-secondary: var(--bk-color-raised);
+  --color-secondary-foreground: var(--bk-color-ink);
+
+  /* Accent: teal */
+  --color-accent: var(--bk-color-teal);
+  --color-accent-fill: var(--bk-teal-fill);
+  --color-accent-mark: var(--bk-teal-mark);
+  --color-accent-foreground: var(--bk-on-fill);
+
+  /* Semantic */
+  --color-destructive: var(--bk-color-red);
+  --color-destructive-fill: var(--bk-red-fill);
+  --color-destructive-mark: var(--bk-red-mark);
+  --color-input: var(--bk-color-edge);
+  --color-ring: color-mix(in srgb, var(--bk-color-amber) 50%, transparent);
+}
+
 /* Amber filament line */
 .filament {
   height: 1px;
   background: linear-gradient(
     to right,
     transparent 0%,
-    #e09f3e 30%,
-    #eab354 50%,
-    #e09f3e 70%,
+    var(--bk-filament-edge) 30%,
+    var(--bk-filament-core) 50%,
+    var(--bk-filament-edge) 70%,
     transparent 100%
   );
   opacity: 0.7;
@@ -68,13 +120,13 @@
   opacity: 1;
   height: 2px;
   background:
-    radial-gradient(circle at center, #eab354 0%, transparent 40%) no-repeat,
+    radial-gradient(circle at center, var(--bk-filament-core) 0%, transparent 40%) no-repeat,
     linear-gradient(
       to right,
       transparent 0%,
-      #e09f3e 30%,
-      #eab354 50%,
-      #e09f3e 70%,
+      var(--bk-filament-edge) 30%,
+      var(--bk-filament-core) 50%,
+      var(--bk-filament-edge) 70%,
       transparent 100%
     );
   background-size:
@@ -96,28 +148,20 @@
   }
 }
 
-/* Breathing animation for streaming indicators */
-@keyframes breathe {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(224, 159, 62, 0.15);
-    opacity: 1;
-  }
-  50% {
-    box-shadow: 0 0 8px 2px rgba(224, 159, 62, 0.15);
-    opacity: 0.6;
-  }
-}
+/* `breathe`, the one ambient keyframe, comes from the kit's tokens.css
+ * (imported after this file in styles.css), which also carries its
+ * reduced-motion override. Declaring it here as well would sit BEFORE that
+ * override in source order and cancel it, so the app declares nothing. */
 
 /* Whatsup briefing styling */
 .whatsup-briefing {
   font-family: var(--font-body);
   font-size: 0.875rem;
   line-height: 1.7;
-  color: #e8e4df;
+  color: var(--bk-color-ink);
 }
 .whatsup-briefing h2 {
-  color: #5bb5a2;
+  color: var(--bk-color-teal);
   font-family: var(--font-display);
   font-size: 0.9rem;
   font-weight: 400;
@@ -125,7 +169,7 @@
   padding-bottom: 0.375rem;
   margin-bottom: 0.5rem;
   margin-top: 1.5rem;
-  border-bottom: 1px solid #2a2d35;
+  border-bottom: 1px solid var(--bk-color-edge);
 }
 .whatsup-briefing h2:first-child {
   margin-top: 0;
@@ -133,39 +177,48 @@
 
 /* Entity color-coding */
 .whatsup-briefing .entity-co {
-  color: #67b8e3;
+  color: var(--bk-color-blue);
   font-weight: 600;
 }
 .whatsup-briefing .entity-p {
-  color: #5bb5a2;
+  color: var(--bk-color-teal);
   font-weight: 600;
 }
 .whatsup-briefing .entity-proj {
-  color: #b197d4;
+  color: var(--bk-color-purple);
   font-weight: 600;
 }
 .whatsup-briefing .entity-ev {
-  color: #e09f3e;
+  color: var(--bk-color-amber);
   font-weight: 600;
 }
 .whatsup-briefing .entity-d {
-  color: #67b8e3;
+  color: var(--bk-color-blue);
 }
 .whatsup-briefing .entity-st {
-  color: #eab354;
+  color: var(--bk-color-gold);
 }
 .whatsup-briefing .entity-f {
-  color: #8a8691;
+  color: var(--bk-color-ink-mute);
   font-family: var(--font-mono);
   font-size: 0.85em;
 }
 
-/* ── Brain prose: unified markdown styles ── */
+/* ── Brain prose: unified markdown styles ──
+ *
+ * The tints below are derived from the kit's tokens by the kit's own rule
+ * (seventh drop, ruling 3): a GROUND takes the FILL hue (`--bk-amber-fill`,
+ * `--bk-teal-fill` — a table row's hover at 3%, a blockquote's ground at 4%,
+ * a file link's hover ground at 10%), and a LINE takes the INK hue
+ * (`--bk-color-amber`, `--bk-color-teal` — a link's underline at 30% resting
+ * and 80% hovered, the file link's dotted underline at 40% / 80%). The ink
+ * hue at low alpha reads as dirt on paper; the fill hue at full alpha is a
+ * 1.9:1 line. */
 .brain-prose {
   font-family: var(--font-body);
   font-size: 0.875rem;
   line-height: 1.7;
-  color: #e8e4df;
+  color: var(--bk-color-ink);
 }
 
 /* Headings */
@@ -173,7 +226,7 @@
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 400;
-  color: #e8e4df;
+  color: var(--bk-color-ink);
   margin-top: 2rem;
   margin-bottom: 0.75rem;
 }
@@ -181,17 +234,17 @@
   font-family: var(--font-display);
   font-size: 1.15rem;
   font-weight: 400;
-  color: #e09f3e;
+  color: var(--bk-color-amber);
   margin-top: 1.75rem;
   margin-bottom: 0.5rem;
   padding-bottom: 0.375rem;
-  border-bottom: 1px solid #2a2d35;
+  border-bottom: 1px solid var(--bk-color-edge);
 }
 .brain-prose h3 {
   font-family: var(--font-body);
   font-size: 0.95rem;
   font-weight: 600;
-  color: #e8e4df;
+  color: var(--bk-color-ink);
   margin-top: 1.5rem;
   margin-bottom: 0.375rem;
 }
@@ -199,7 +252,7 @@
   font-family: var(--font-body);
   font-size: 0.875rem;
   font-weight: 600;
-  color: #8a8691;
+  color: var(--bk-color-ink-mute);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-top: 1.25rem;
@@ -218,23 +271,23 @@
 /* Bold / italic */
 .brain-prose strong {
   font-weight: 600;
-  color: #e8e4df;
+  color: var(--bk-color-ink);
 }
 .brain-prose em {
   font-style: italic;
-  color: #c0bcb5;
+  color: var(--bk-color-ink-dim);
 }
 
 /* Links */
 .brain-prose a {
-  color: #e09f3e;
+  color: var(--bk-color-amber);
   text-decoration: underline;
-  text-decoration-color: rgba(224, 159, 62, 0.3);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-amber) 30%, transparent);
   text-underline-offset: 2px;
   transition: color 0.15s;
 }
 .brain-prose a:hover {
-  color: rgba(224, 159, 62, 0.8);
+  color: color-mix(in srgb, var(--bk-color-amber) 80%, transparent);
 }
 
 /* Lists */
@@ -256,7 +309,7 @@
   padding-left: 0.25rem;
 }
 .brain-prose li::marker {
-  color: #5bb5a2;
+  color: var(--bk-color-teal);
 }
 
 /* Tables */
@@ -273,28 +326,28 @@
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #8a8691;
+  color: var(--bk-color-ink-mute);
   padding: 0.5rem 0.75rem;
-  border-bottom: 2px solid #2a2d35;
-  background: #141619;
+  border-bottom: 2px solid var(--bk-color-edge);
+  background: var(--bk-color-surface);
 }
 .brain-prose tbody td {
   padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid #1f2229;
+  border-bottom: 1px solid var(--bk-color-line);
   vertical-align: top;
 }
 .brain-prose tbody tr:hover {
-  background: rgba(224, 159, 62, 0.03);
+  background: color-mix(in srgb, var(--bk-amber-fill) 3%, transparent);
 }
 
 /* Code - inline */
 .brain-prose :not(pre) > code {
   font-family: var(--font-mono);
   font-size: 0.8em;
-  background: #1a1d22;
+  background: var(--bk-color-raised);
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
-  color: #e8e4df;
+  color: var(--bk-color-ink);
 }
 
 /* Code - blocks */
@@ -302,8 +355,8 @@
   font-family: var(--font-mono);
   font-size: 0.8125rem;
   line-height: 1.6;
-  background: #141619;
-  border: 1px solid #2a2d35;
+  background: var(--bk-color-surface);
+  border: 1px solid var(--bk-color-edge);
   border-radius: 0.5rem;
   padding: 1rem;
   overflow-x: auto;
@@ -328,14 +381,14 @@
 
 /* Blockquotes */
 .brain-prose blockquote {
-  border-left: 3px solid #e09f3e;
-  background: rgba(224, 159, 62, 0.04);
+  border-left: 3px solid var(--bk-color-amber);
+  background: color-mix(in srgb, var(--bk-amber-fill) 4%, transparent);
   padding: 0.75rem 1rem;
   margin: 0.75rem 0;
   border-radius: 0 0.375rem 0.375rem 0;
 }
 .brain-prose blockquote p {
-  color: #c0bcb5;
+  color: var(--bk-color-ink-dim);
   font-style: italic;
 }
 
@@ -343,7 +396,7 @@
 .brain-prose hr {
   border: none;
   height: 1px;
-  background: linear-gradient(to right, transparent, #2a2d35 20%, #2a2d35 80%, transparent);
+  background: linear-gradient(to right, transparent, var(--bk-color-edge) 20%, var(--bk-color-edge) 80%, transparent);
   margin: 1.5rem 0;
 }
 
@@ -359,7 +412,7 @@
   color: var(--color-accent);
   text-decoration: underline;
   text-decoration-style: dotted;
-  text-decoration-color: rgba(91, 181, 162, 0.4);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-teal) 40%, transparent);
   text-underline-offset: 3px;
   font-family: var(--font-mono);
   font-size: 0.95em;
@@ -370,30 +423,30 @@
 }
 .brain-file-link:hover {
   color: var(--color-foreground);
-  background-color: rgba(91, 181, 162, 0.1);
-  text-decoration-color: rgba(91, 181, 162, 0.8);
+  background-color: color-mix(in srgb, var(--bk-teal-fill) 10%, transparent);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-teal) 80%, transparent);
 }
 /* Override .brain-prose a styling when it's a file link */
 .brain-prose a.brain-file-link {
   color: var(--color-accent);
-  text-decoration-color: rgba(91, 181, 162, 0.4);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-teal) 40%, transparent);
 }
 .brain-prose a.brain-file-link:hover {
   color: var(--color-foreground);
-  text-decoration-color: rgba(91, 181, 162, 0.8);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-teal) 80%, transparent);
 }
 
 /* Directory links read slightly differently — italic + folder-cue color */
 .brain-file-link--dir,
 .brain-prose a.brain-file-link--dir {
   color: var(--color-primary);
-  text-decoration-color: rgba(224, 159, 62, 0.4);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-amber) 40%, transparent);
 }
 .brain-file-link--dir:hover,
 .brain-prose a.brain-file-link--dir:hover {
   color: var(--color-foreground);
-  background-color: rgba(224, 159, 62, 0.1);
-  text-decoration-color: rgba(224, 159, 62, 0.8);
+  background-color: color-mix(in srgb, var(--bk-amber-fill) 10%, transparent);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-amber) 80%, transparent);
 }
 
 /* Wikilinks — match file-link styling but use a subtle bracket cue */
@@ -408,7 +461,7 @@
   color: var(--color-muted-foreground);
   text-decoration: underline;
   text-decoration-style: dotted;
-  text-decoration-color: rgba(138, 134, 145, 0.5);
+  text-decoration-color: color-mix(in srgb, var(--bk-color-ink-mute) 50%, transparent);
   text-underline-offset: 3px;
   cursor: help;
 }
@@ -422,8 +475,8 @@
 /* Tree node highlight flash for openDir() navigation */
 @keyframes brain-tree-flash {
   0% {
-    background-color: rgba(91, 181, 162, 0.35);
-    box-shadow: inset 0 0 0 1px rgba(91, 181, 162, 0.6);
+    background-color: color-mix(in srgb, var(--bk-teal-fill) 35%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-color-teal) 60%, transparent);
   }
   100% {
     background-color: transparent;

package/src/voice/asr-clients.ts

@@ -1,26 +1,26 @@
 // Register the built-in ASR clients into the @schlessera/brain-ui-sdk registry.
-// Registration is idempotent and wires the store-side extras (audio-level
-// meter, end-of-stream -> idle) that fall outside the neutral AsrClient
-// interface. use-dictation then resolves a client via createAsrClient().
+// Registration wires the store-side extras (audio-level meter, end-of-stream ->
+// idle) that fall outside the neutral AsrClient interface. use-dictation then
+// resolves a client via createAsrClient().
+//
+// Idempotent because the registry is keyed by providerId, NOT because this
+// module latches: a latch survives `resetAsrClients()`, which would leave the
+// registry permanently empty for everything that ran after the first reset.
 
-import { registerAsrClient } from "@schlessera/brain-ui-sdk/client";
+import type { BrainUiRoot } from "../root.js";
+import { defaultRoot } from "../default-root.js";
 import { DeepgramClient } from "./asr-deepgram.js";
 import { WebSpeechClient } from "./asr-webspeech.js";
-import { useVoiceStore } from "./voice-store.js";
 
-let registered = false;
-
-function endToIdle() {
-  if (useVoiceStore.getState().mode === "dictate") {
-    useVoiceStore.getState().setMode("idle");
+export function registerAsrClients(root: BrainUiRoot = defaultRoot): void {
+  function endToIdle() {
+    if (root.stores.voice.getState().mode === "dictate") {
+      root.stores.voice.getState().setMode("idle");
+    }
   }
-}
 
-export function registerAsrClients(): void {
-  if (registered) return;
-  registered = true;
 
-  registerAsrClient(
+  root.asr.register(
     "deepgram",
     (opts) =>
       new DeepgramClient({
@@ -28,12 +28,12 @@ export function registerAsrClients(): void {
         token: opts.session.token ?? "",
         onEvent: opts.onEvent,
         onError: opts.onError,
-        onAudioLevel: (level) => useVoiceStore.getState().setAudioLevel(level),
+        onAudioLevel: (level) => root.stores.voice.getState().setAudioLevel(level),
         onClose: endToIdle,
       })
   );
 
-  registerAsrClient(
+  root.asr.register(
     "webspeech",
     (opts) =>
       new WebSpeechClient({

package/src/voice/use-dictation.ts

@@ -1,12 +1,11 @@
+import { useBrainUiRoot } from "../root-context.js";
 import { useCallback, useEffect, useRef } from "react";
 import { useVoiceStore } from "./voice-store.js";
 import {
-  createAsrClient,
   speechUiHints,
   type AsrClient,
 } from "@schlessera/brain-ui-sdk/client";
 import type { PronunciationOverride } from "@schlessera/brain-ui-sdk/protocol";
-import { api } from "../lib/api-client.js";
 import { registerAsrClients } from "./asr-clients.js";
 
 /** Apply pronunciation overrides client-side to a finalized transcript. */
@@ -25,8 +24,10 @@ function applyOverrides(
 }
 
 export function useDictation() {
+  const root = useBrainUiRoot();
   // start() may resolve a client before this hook's effects have run.
-  registerAsrClients();
+  registerAsrClients(root);
+  const api = root.api;
 
   const clientRef = useRef<AsrClient | null>(null);
   const overridesRef = useRef<PronunciationOverride[]>([]);
@@ -81,7 +82,7 @@ export function useDictation() {
       setProviderId(session.providerId);
 
       const hints = speechUiHints(session.capabilities);
-      const client = createAsrClient({
+      const client = root.asr.create({
         session,
         onEvent: (evt) => {
           if (evt.type === "partial") {
@@ -119,6 +120,8 @@ export function useDictation() {
       setMode("idle");
     }
   }, [
+    root,
+    api,
     resetCapture,
     setMode,
     setConnecting,
@@ -139,7 +142,7 @@ export function useDictation() {
       const client = clientRef.current;
       clientRef.current = null;
 
-      const setDraining = useVoiceStore.getState().setDraining;
+      const setDraining = root.stores.voice.getState().setDraining;
       if (client) {
         if (commitToReview) {
           setDraining(true);
@@ -153,7 +156,7 @@ export function useDictation() {
         }
       }
 
-      const { finalText, partial, reviewText } = useVoiceStore.getState();
+      const { finalText, partial, reviewText } = root.stores.voice.getState();
       const merged = [finalText, partial].filter(Boolean).join(" ").trim();
       setConnecting(false);
       setMode("idle");
@@ -164,7 +167,7 @@ export function useDictation() {
       }
       resetCapture();
     },
-    [resetCapture, setMode, setConnecting, setReviewText]
+    [resetCapture, setMode, setConnecting, setReviewText, root]
   );
 
   const cancel = useCallback(() => {
@@ -181,7 +184,7 @@ export function useDictation() {
       clientRef.current?.stop();
       clientRef.current = null;
     };
-  }, []);
+  }, [root]);
 
   return { start, stop, cancel };
 }

package/src/voice/voice-state.ts

@@ -0,0 +1,57 @@
+import { createStore } from "zustand/vanilla";
+import type { VoiceMode } from "@schlessera/brain-ui-sdk/protocol";
+
+export interface VoiceState {
+  mode: VoiceMode;
+  connecting: boolean;      // session fetch / mic open in progress (mic not yet live)
+  draining: boolean;        // post-Done flush in progress
+  partial: string;
+  finalText: string;        // accumulated final transcript for current capture
+  audioLevel: number;       // 0..1 RMS level for waveform
+  reviewText: string;       // text waiting in the review card (post-stop)
+  providerId: string | null; // active speech provider (from the session response)
+  error: string | null;
+
+  setMode: (mode: VoiceMode) => void;
+  setConnecting: (connecting: boolean) => void;
+  setDraining: (draining: boolean) => void;
+  setPartial: (text: string) => void;
+  appendFinal: (text: string) => void;
+  setAudioLevel: (level: number) => void;
+  setReviewText: (text: string) => void;
+  clearReview: () => void;
+  setProviderId: (providerId: string | null) => void;
+  setError: (err: string | null) => void;
+  resetCapture: () => void;
+}
+
+export function createVoiceStore() {
+  return createStore<VoiceState>((set) => ({
+    mode: "idle",
+    connecting: false,
+    draining: false,
+    partial: "",
+    finalText: "",
+    audioLevel: 0,
+    reviewText: "",
+    providerId: null,
+    error: null,
+
+    setMode: (mode) => set({ mode }),
+    setConnecting: (connecting) => set({ connecting }),
+    setDraining: (draining) => set({ draining }),
+    setPartial: (partial) => set({ partial }),
+    appendFinal: (text) =>
+      set((s) => ({
+        finalText: (s.finalText ? s.finalText + " " : "") + text.trim(),
+        partial: "",
+      })),
+    setAudioLevel: (audioLevel) => set({ audioLevel }),
+    setReviewText: (reviewText) => set({ reviewText }),
+    clearReview: () => set({ reviewText: "" }),
+    setProviderId: (providerId) => set({ providerId }),
+    setError: (error) => set({ error }),
+    resetCapture: () =>
+      set({ partial: "", finalText: "", audioLevel: 0, error: null }),
+  }));
+}