@unoverse-platform/studio 0.1.103 → 0.1.104

package/vendor/sdk/lib/orb/presets.ts

@@ -6,7 +6,7 @@
 import type { ModeOpts } from './engine/profiles';
 import { BASE_PROFILES, scaleCounts, scaleRadii } from './engine/profiles';
 import { RING_PROFILES } from './engine/rings';
-import type { OrbSize, OrbState } from './types';
+import type { OrbSize, OrbState } from './states';
 
 export type ModeKey =
   | 'orbits'

package/vendor/sdk/lib/orb/{types.ts → states.ts}

@@ -1,4 +1,3 @@
-import type { CSSProperties, CanvasHTMLAttributes } from 'react';
 
 /**
  * The nine shipped states — each a hand-tuned animation:
@@ -59,26 +58,3 @@ export type OrbSize = 64 | 20;
  * backgrounds); light renders dark ink (for light backgrounds).
  */
 export type OrbTheme = 'auto' | 'dark' | 'light';
-
-/** Props for the ThinkingOrb React component. */
-export interface ThinkingOrbProps extends Omit<CanvasHTMLAttributes<HTMLCanvasElement>, 'style'> {
-  /** Which animation to show. @default 'working' */
-  state?: OrbState;
-
-  /** Tuned size preset — 64 or 20 CSS px. @default 64 */
-  size?: OrbSize;
-
-  /** Theme mode; `auto` detects from the host project. @default 'auto' */
-  theme?: OrbTheme;
-
-  /**
-   * Animation speed multiplier on top of the preset's baked speed.
-   * @default 1
-   */
-  speed?: number;
-
-  /** Freeze the animation on the current frame. @default false */
-  paused?: boolean;
-
-  style?: CSSProperties;
-}

package/vendor/sdk/lib/realtime/capture.ts

@@ -0,0 +1,152 @@
+/**
+ * Continuous microphone capture for full-duplex voice. Streams raw mic audio while a call is
+ * active; the remote provider (Grok / Nova) does VAD server-side, so nothing is gated here.
+ * Audio is downsampled to 16 kHz mono Int16 PCM and emitted in ~80 ms chunks.
+ */
+import { float32ToInt16, downsampleFloat32 } from "./audioUtils";
+
+const TARGET_SAMPLE_RATE = 16000;
+// ~80 ms of audio at 16 kHz: 1280 samples
+const CHUNK_SAMPLES = 1280;
+
+export class AudioCapture {
+  isCapturing = false;
+  /** Server-driven (Grok / Nova VAD); the service learns speech from the audio-state events. */
+  readonly isSpeaking = false;
+  error: string | null = null;
+  private stream: MediaStream | null = null;
+  private context: AudioContext | null = null;
+  private source: MediaStreamAudioSourceNode | null = null;
+  private worklet: AudioWorkletNode | null = null;
+  private script: ScriptProcessorNode | null = null;
+  private pending: number[] = [];
+  private muted = false;
+
+  /** `onChange` hears each change of `isCapturing` or `error`. */
+  constructor(private readonly onAudioData: (audioData: ArrayBuffer) => void, private readonly onChange: () => void = () => {}) {}
+
+  /** Mute or unmute outgoing mic frames (the stream stays open). */
+  setMuted(muted: boolean): void {
+    this.muted = muted;
+  }
+
+  // A Float32 frame at the source rate → 16 kHz Int16 chunks, flushed per CHUNK_SAMPLES.
+  private frame(frame: Float32Array, fromRate: number): void {
+    if (this.muted) return;
+    const downsampled = fromRate === TARGET_SAMPLE_RATE ? frame : downsampleFloat32(frame, fromRate, TARGET_SAMPLE_RATE);
+    const pending = this.pending;
+    for (let i = 0; i < downsampled.length; i++) pending.push(downsampled[i]);
+    while (pending.length >= CHUNK_SAMPLES) {
+      const int16 = float32ToInt16(new Float32Array(pending.splice(0, CHUNK_SAMPLES)));
+      this.onAudioData(int16.buffer.slice(int16.byteOffset, int16.byteOffset + int16.byteLength) as ArrayBuffer);
+    }
+  }
+
+  private async teardown(): Promise<void> {
+    try {
+      if (this.worklet) {
+        this.worklet.port.onmessage = null;
+        this.worklet.disconnect();
+        this.worklet = null;
+      }
+      if (this.script) {
+        this.script.onaudioprocess = null;
+        this.script.disconnect();
+        this.script = null;
+      }
+      if (this.source) {
+        this.source.disconnect();
+        this.source = null;
+      }
+      if (this.stream) {
+        this.stream.getTracks().forEach((t) => t.stop());
+        this.stream = null;
+      }
+      if (this.context && this.context.state !== "closed") await this.context.close();
+      this.context = null;
+      this.pending = [];
+    } catch (err) {
+      console.warn("[AudioCapture] teardown error:", err);
+    }
+  }
+
+  async start(): Promise<{ success: boolean; reason?: string }> {
+    if (this.isCapturing || this.stream) return { success: true };
+    this.error = null;
+    this.onChange();
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+      });
+      this.stream = stream;
+      const AudioContextClass =
+        (window as unknown as { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext }).AudioContext ||
+        (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+      const audioContext: AudioContext = new (AudioContextClass as typeof AudioContext)();
+      this.context = audioContext;
+      const fromRate = audioContext.sampleRate;
+      const source = audioContext.createMediaStreamSource(stream);
+      this.source = source;
+      // Prefer AudioWorklet (modern). Fall back to ScriptProcessor.
+      let usedWorklet = false;
+      if (audioContext.audioWorklet) {
+        try {
+          const workletCode = `
+            class CaptureProcessor extends AudioWorkletProcessor {
+              process(inputs) {
+                const ch = inputs[0] && inputs[0][0];
+                if (ch && ch.length) {
+                  this.port.postMessage(new Float32Array(ch));
+                }
+                return true;
+              }
+            }
+            registerProcessor('gravity-capture-processor', CaptureProcessor);
+          `;
+          const url = URL.createObjectURL(new Blob([workletCode], { type: "application/javascript" }));
+          await audioContext.audioWorklet.addModule(url);
+          URL.revokeObjectURL(url);
+          const node = new AudioWorkletNode(audioContext, "gravity-capture-processor");
+          node.port.onmessage = (ev: MessageEvent<Float32Array>) => this.frame(ev.data, fromRate);
+          source.connect(node);
+          // The worklet must connect to destination to keep ticking: through a muted gain,
+          // so the mic is not played back.
+          const sink = audioContext.createGain();
+          sink.gain.value = 0;
+          node.connect(sink).connect(audioContext.destination);
+          this.worklet = node;
+          usedWorklet = true;
+        } catch (err) {
+          console.warn("[AudioCapture] AudioWorklet unavailable, falling back to ScriptProcessor:", err);
+        }
+      }
+      if (!usedWorklet) {
+        const node = audioContext.createScriptProcessor(4096, 1, 1);
+        node.onaudioprocess = (ev) => this.frame(new Float32Array(ev.inputBuffer.getChannelData(0)), fromRate);
+        source.connect(node);
+        const sink = audioContext.createGain();
+        sink.gain.value = 0;
+        node.connect(sink).connect(audioContext.destination);
+        this.script = node;
+      }
+      this.isCapturing = true;
+      this.onChange();
+      return { success: true };
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error("[AudioCapture] Failed to start:", err);
+      this.error = msg;
+      this.onChange();
+      await this.teardown();
+      return { success: false, reason: msg };
+    }
+  }
+
+  async stop(): Promise<{ success: boolean; reason?: string }> {
+    if (!this.stream && !this.context) return { success: false, reason: "not_running" };
+    await this.teardown();
+    this.isCapturing = false;
+    this.onChange();
+    return { success: true };
+  }
+}

package/vendor/sdk/lib/realtime/playback.ts

@@ -0,0 +1,129 @@
+/**
+ * LPCM audio playback with timeline-based scheduling (Web Audio API, low latency). Audio from
+ * the server (Nova / Grok): LPCM Int16, 24 kHz, mono.
+ */
+
+/** How far ahead the first frame is scheduled when nothing is queued. */
+const START_LEAD_SECONDS = 0.2;
+
+/** Decode LPCM (Int16, 24 kHz, mono) → AudioBuffer. */
+function decodeLPCM(audioContext: AudioContext, data: ArrayBuffer): AudioBuffer {
+  const int16 = new Int16Array(data);
+  const audioBuffer = audioContext.createBuffer(1, int16.length, 24000);
+  const channelData = audioBuffer.getChannelData(0);
+  for (let i = 0; i < int16.length; i++) channelData[i] = int16[i] / 32768;
+  return audioBuffer;
+}
+
+export class AudioPlayback {
+  isPlaying = false;
+  private context: AudioContext | null = null;
+  private gain: GainNode | null = null;
+  private queue: ArrayBuffer[] = [];
+  private nextTime = 0;
+  private processing = false;
+  private active = new Set<AudioBufferSourceNode>();
+  private started = false;
+  private lastChunk = false;
+
+  /** `onChange` hears each change of `isPlaying`. */
+  constructor(private readonly onChange: () => void = () => {}) {}
+
+  private setPlaying(v: boolean): void {
+    if (this.isPlaying === v) return;
+    this.isPlaying = v;
+    this.onChange();
+  }
+
+  private audioContext(): AudioContext {
+    if (!this.context) {
+      this.context = new AudioContext({ sampleRate: 24000 });
+      this.gain = this.context.createGain();
+      this.gain.connect(this.context.destination);
+    }
+    if (this.context.state === "suspended") void this.context.resume();
+    return this.context;
+  }
+
+  private process(): void {
+    if (this.processing || this.queue.length === 0) return;
+    this.processing = true;
+    const ctx = this.audioContext();
+    const gain = this.gain!;
+    while (this.queue.length > 0) {
+      const data = this.queue.shift()!;
+      try {
+        const audioBuffer = decodeLPCM(ctx, data);
+        const now = ctx.currentTime;
+        // A CUSHION WHEN THE QUEUE IS EMPTY: a vendor streaming at speaking pace (GPT-Live)
+        // sends each frame just as the last ends, so a late frame would leave a gap, heard as a
+        // click. Starting a little ahead absorbs it; once playing, frames join end to end.
+        const startTime = this.nextTime > now ? this.nextTime : now + START_LEAD_SECONDS;
+        const source = ctx.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(gain);
+        this.active.add(source);
+        if (!this.started) {
+          this.started = true;
+          this.setPlaying(true);
+        }
+        source.start(startTime);
+        this.nextTime = startTime + audioBuffer.duration;
+        source.onended = () => {
+          this.active.delete(source);
+          if (this.lastChunk && this.active.size === 0 && this.queue.length === 0) {
+            this.setPlaying(false);
+            this.started = false;
+            this.lastChunk = false;
+          }
+        };
+      } catch (error) {
+        console.error("[AudioPlayback] Failed to decode audio:", error);
+      }
+    }
+    this.processing = false;
+  }
+
+  play(audioData: ArrayBuffer): void {
+    this.queue.push(audioData);
+    this.process();
+  }
+
+  stopAll(): void {
+    this.active.forEach((source) => {
+      try {
+        source.stop();
+      } catch {
+        // already stopped
+      }
+    });
+    this.active.clear();
+    this.queue = [];
+    this.nextTime = 0;
+    this.started = false;
+    this.processing = false;
+    this.lastChunk = false;
+    this.setPlaying(false);
+  }
+
+  /** No more chunks are coming: `isPlaying` clears when the last one finishes. */
+  markAsLastChunk(): void {
+    this.lastChunk = true;
+    if (this.active.size === 0 && this.queue.length === 0 && this.started) {
+      this.setPlaying(false);
+      this.started = false;
+      this.lastChunk = false;
+    }
+  }
+
+  /** Wake the speaker, inside a click: a browser plays nothing it was not woken for. */
+  unlock(): void {
+    this.audioContext();
+  }
+
+  close(): void {
+    this.stopAll();
+    void this.context?.close();
+    this.context = null;
+  }
+}

package/vendor/sdk/lib/realtime/socket.ts

@@ -0,0 +1,117 @@
+/**
+ * The audio lane: a binary WebSocket on `/ws/gravity` for real-time audio. Binary PCM Int16
+ * 16 kHz goes up, binary LPCM Int16 24 kHz comes back, plus JSON control messages for the
+ * audio-state events. The audio-state events ride this lane WITH the frames so they stay
+ * frame-synchronized; they never go on the MCP component stream (docs/VOICE_STREAMING_GUIDE).
+ */
+import type { ControlMessage, AudioStateEvent } from "./types";
+
+export interface RealtimeSocketOptions {
+  /** Conversation ID for the WebSocket session. */
+  sessionId: string;
+  userId?: string;
+  chatId?: string;
+  /** WebSocket base URL (e.g. ws://localhost:4100). Defaults to the current origin. */
+  wsUrl?: string;
+  /** A fresh access token, asked for on each connect. */
+  getAccessToken?: () => Promise<string | null> | string | null;
+  onAudioReceived?: (audioData: ArrayBuffer) => void;
+  onConnectionChange?: (connected: boolean) => void;
+  onControlMessage?: (message: ControlMessage) => void;
+  onAudioState?: (event: AudioStateEvent) => void;
+}
+
+export class RealtimeSocket {
+  private ws: WebSocket | null = null;
+  isConnected = false;
+
+  constructor(private readonly o: RealtimeSocketOptions) {}
+
+  private async url(): Promise<string> {
+    const { wsUrl, getAccessToken } = this.o;
+    let baseUrl: string;
+    if (wsUrl) baseUrl = `${wsUrl}/ws/gravity`;
+    else {
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      baseUrl = `${protocol}//${window.location.host}/ws/gravity`;
+    }
+    let token: string | null = null;
+    if (getAccessToken) {
+      try {
+        token = await getAccessToken();
+      } catch (error) {
+        console.warn("[RealtimeWebSocket] Failed to get access token:", error);
+      }
+    }
+    return token ? `${baseUrl}?token=${encodeURIComponent(token)}` : baseUrl;
+  }
+
+  async connect(): Promise<void> {
+    if (this.ws?.readyState === WebSocket.OPEN) return;
+    if (this.ws?.readyState === WebSocket.CONNECTING) {
+      return new Promise((resolve) => {
+        const check = setInterval(() => {
+          if (this.ws?.readyState === WebSocket.OPEN) {
+            clearInterval(check);
+            resolve();
+          }
+        }, 50);
+      });
+    }
+    const url = await this.url();
+    console.log("[RealtimeWebSocket] Connecting to:", url.replace(/token=[^&]+/, "token=***"));
+    const { sessionId, userId, chatId, onAudioReceived, onConnectionChange, onControlMessage, onAudioState } = this.o;
+    return new Promise((resolve, reject) => {
+      const ws = new WebSocket(url);
+      ws.binaryType = "arraybuffer";
+      const timeout = setTimeout(() => reject(new Error("WebSocket connection timeout")), 10000);
+      ws.onopen = () => {
+        clearTimeout(timeout);
+        ws.send(JSON.stringify({ type: "INIT_SESSION", conversationId: sessionId, userId: userId || "anonymous", chatId: chatId || `chat_${sessionId}` }));
+        this.isConnected = true;
+        onConnectionChange?.(true);
+        resolve();
+      };
+      ws.onmessage = (event) => {
+        if (event.data instanceof ArrayBuffer) {
+          onAudioReceived?.(event.data);
+          return;
+        }
+        try {
+          const message: ControlMessage = JSON.parse(event.data as string);
+          onControlMessage?.(message);
+          // Only control-channel state events (`message.state`); `message.audioState` is
+          // per-chunk metadata on audio publishes.
+          if (message.state && onAudioState) onAudioState({ state: message.state, metadata: message.metadata });
+        } catch (error) {
+          console.error("[RealtimeWebSocket] Failed to parse control message:", error);
+        }
+      };
+      ws.onerror = (error) => {
+        clearTimeout(timeout);
+        console.error("[RealtimeWebSocket] Error:", error);
+        reject(error);
+      };
+      ws.onclose = () => {
+        this.isConnected = false;
+        onConnectionChange?.(false);
+      };
+      this.ws = ws;
+    });
+  }
+
+  disconnect(): void {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  sendAudio(audioData: ArrayBuffer): void {
+    if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(audioData);
+  }
+
+  sendControl(type: string, data?: Record<string, unknown>): void {
+    if (this.ws?.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify({ type, ...data }));
+  }
+}

package/vendor/sdk/lib/style.ts

@@ -4,8 +4,16 @@
  * px/rem/em, no recipes); every value lives in design/styles and is served. See
  * FRAMEWORK.md and render.tsx's header. Enforced by test/golden-rule.test.mjs.
  */
-import type { CSSProperties } from "react";
-import { resolveValue, matches, type ResolvedTheme, type StyleVariant } from "./core";
+import { resolveValue } from "./core/actions";
+import { matches } from "./core/conditions";
+import type { ResolvedTheme, StyleVariant } from "./core/types";
+
+/**
+ * A resolved style: CSS property names in camelCase (`flexDirection`), each a CSS value. A
+ * number is a length in px unless the property takes plain numbers (`zIndex`, `flex`,
+ * `fontWeight`, `lineHeight`, `opacity`); the element layer applies that rule.
+ */
+export type CssStyle = { [property: string]: string | number | undefined };
 
 
 // Resolution cache: style objects come from CACHED definitions, so they are
@@ -14,7 +22,7 @@ import { resolveValue, matches, type ResolvedTheme, type StyleVariant } from "./
 // styles ({{field}} bindings or `when` variants) resolve against the live data scope
 // and bypass the cache; the one-time dependency check is itself memoized per object.
 // WeakMaps throughout — nothing here pins a def or theme in memory.
-const styleCache = new WeakMap<ResolvedTheme, WeakMap<Record<string, unknown>, CSSProperties>>();
+const styleCache = new WeakMap<ResolvedTheme, WeakMap<Record<string, unknown>, CssStyle>>();
 const dataDependent = new WeakMap<Record<string, unknown>, boolean>();
 // Stable default so styleless nodes hit the cache instead of keying a fresh {} per call.
 const EMPTY_STYLE: Record<string, unknown> = Object.freeze({});
@@ -36,7 +44,7 @@ function isDataDependent(s: Record<string, unknown>): boolean {
  * charts be DATA (Box + Each), not a primitive: the producer supplies the proportion,
  * the SDK authors nothing. (Same `{{...}}` resolver the action vocab uses.)
  */
-export function styleToCss(s: Record<string, unknown> = EMPTY_STYLE, theme: ResolvedTheme, data?: Record<string, unknown>): CSSProperties {
+export function styleToCss(s: Record<string, unknown> = EMPTY_STYLE, theme: ResolvedTheme, data?: Record<string, unknown>): CssStyle {
   if (!data || !isDataDependent(s)) {
     let byStyle = styleCache.get(theme);
     if (!byStyle) {
@@ -52,7 +60,7 @@ export function styleToCss(s: Record<string, unknown> = EMPTY_STYLE, theme: Reso
   return computeCss(s, theme, data);
 }
 
-function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Record<string, unknown>): CSSProperties {
+function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Record<string, unknown>): CssStyle {
   if (data) {
     const resolved: Record<string, unknown> = {};
     for (const [k, v] of Object.entries(s)) resolved[k] = typeof v === "string" && v.includes("{{") ? resolveValue(v, data) : v;
@@ -71,7 +79,7 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
       s = merged;
     }
   }
-  const css: CSSProperties = {};
+  const css: CssStyle = {};
   // EVERY bucket read below is optional-chained (`theme.x?.[k] ?? k`), never `theme.x[k]`.
   // A bucket is absent whenever the theme was built by an OLDER base than the SDK reading
   // it — a version skew that is normal for an installed Studio or a served app, since the
@@ -86,40 +94,40 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   // A dimension is a scale step ("8") OR a named PAGE WIDTH ("reading"). Both live on
   // the same scale — `layout.*` are aliases onto it — so one lookup order covers both.
   const dim = (v: unknown) =>
-    theme.space?.[v as string] ?? theme.layout?.[v as string] ?? (v === "full" ? "100%" : (v as CSSProperties["width"]));
+    theme.space?.[v as string] ?? theme.layout?.[v as string] ?? (v === "full" ? "100%" : (v as string));
 
   if (s.width != null) css.width = dim(s.width);
   if (s.height != null) css.height = dim(s.height);
-  if (s.maxWidth != null) css.maxWidth = dim(s.maxWidth) as CSSProperties["maxWidth"];
-  if (s.minWidth != null) css.minWidth = dim(s.minWidth) as CSSProperties["minWidth"];
-  if (s.minHeight != null) css.minHeight = dim(s.minHeight) as CSSProperties["minHeight"];
-  if (s.maxHeight != null) css.maxHeight = dim(s.maxHeight) as CSSProperties["maxHeight"];
-  if (s.flex != null) css.flex = s.flex as CSSProperties["flex"];
-  if (s.position) css.position = s.position as CSSProperties["position"];
-  if (s.inset != null) css.inset = s.inset as CSSProperties["inset"];
+  if (s.maxWidth != null) css.maxWidth = dim(s.maxWidth);
+  if (s.minWidth != null) css.minWidth = dim(s.minWidth);
+  if (s.minHeight != null) css.minHeight = dim(s.minHeight);
+  if (s.maxHeight != null) css.maxHeight = dim(s.maxHeight);
+  if (s.flex != null) css.flex = s.flex as string | number;
+  if (s.position) css.position = s.position as string;
+  if (s.inset != null) css.inset = s.inset as string;
   // Edge offsets (with `position`) — generic positioning, e.g. a bottom-anchored overlay
   // panel that floats above without pushing siblings. Resolve like any dimension (`full`→100%).
-  if (s.top != null) css.top = dim(s.top) as CSSProperties["top"];
-  if (s.right != null) css.right = dim(s.right) as CSSProperties["right"];
-  if (s.bottom != null) css.bottom = dim(s.bottom) as CSSProperties["bottom"];
-  if (s.left != null) css.left = dim(s.left) as CSSProperties["left"];
-  if (s.zIndex != null) css.zIndex = s.zIndex as CSSProperties["zIndex"];
+  if (s.top != null) css.top = dim(s.top);
+  if (s.right != null) css.right = dim(s.right);
+  if (s.bottom != null) css.bottom = dim(s.bottom);
+  if (s.left != null) css.left = dim(s.left);
+  if (s.zIndex != null) css.zIndex = s.zIndex as string | number;
   if (s.direction) {
     css.display = "flex";
-    css.flexDirection = s.direction as CSSProperties["flexDirection"];
+    css.flexDirection = s.direction as string;
   }
   // `wrap` — flex-wrap, so a row of content-width items (e.g. FAQ chips, tag pills) sits
   // side-by-side when there's room and wraps to the next line when there isn't. Generic
   // layout vocab (any wrapping flex container); the value ("wrap"/"nowrap") is served/literal.
-  if (s.wrap) css.flexWrap = s.wrap as CSSProperties["flexWrap"];
+  if (s.wrap) css.flexWrap = s.wrap as string;
   if (s.gap) css.gap = space(s.gap as string);
   if (s.padding) css.padding = Array.isArray(s.padding) ? (s.padding as string[]).map(space).join(" ") : space(s.padding as string);
   if (s.margin) css.margin = Array.isArray(s.margin) ? (s.margin as string[]).map(space).join(" ") : space(s.margin as string);
-  if (s.display) css.display = s.display as CSSProperties["display"];
+  if (s.display) css.display = s.display as string;
   // `container` — establish a container-query context (e.g. "inline-size") so descendants
   // can respond to THIS element's width via `hideBelow` (component-relative responsiveness,
   // correct for SDUI: the component reacts to its slot, not the page viewport). Value served.
-  if (s.container) (css as Record<string, unknown>).containerType = s.container;
+  if (s.container) css.containerType = s.container as string;
   // `columns` → an equal-width CSS grid (generic layout; the welcome card grid uses it).
   // A MAP value ({mobile, tablet, ...}) is the RESPONSIVE form — handled in
   // primitives.tsx as an injected rule, since inline styles cannot express the
@@ -132,25 +140,25 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
     // it — which is exactly the direction the stacking rule runs (primitives.tsx). Without
     // this a grid would need a `container` ancestor to stack, and would silently not stack
     // wherever one was missing.
-    (css as Record<string, unknown>).containerType = "inline-size";
+    css.containerType = "inline-size";
     // Pack rows at the top. Without this, a columns-grid inside a flex:1 panel
     // inherits CSS's default align-content:stretch and distributes the panel's
     // leftover height BETWEEN rows — the phantom vertical gap between card rows.
     css.alignContent = "start";
   }
-  if (s.cursor) css.cursor = s.cursor as CSSProperties["cursor"];
+  if (s.cursor) css.cursor = s.cursor as string;
   // `span` — how many of the parent grid's columns this child covers: on a 12-column
   // grid, 6 is a half and 3 is a quarter. The grid owns the gaps, so spans never overflow
   // the way percentage widths in a flex row do. Below the stacking width the child takes
   // the full row instead (the rule injected in primitives.tsx).
   if (s.span) css.gridColumn = `span ${s.span}`;
-  if (s.align) css.alignItems = s.align === "start" ? "flex-start" : (s.align as CSSProperties["alignItems"]);
-  if (s.justify) css.justifyContent = s.justify as CSSProperties["justifyContent"];
+  if (s.align) css.alignItems = s.align === "start" ? "flex-start" : (s.align as string);
+  if (s.justify) css.justifyContent = s.justify as string;
   // Explicit text alignment (inherited by children) — needed because a Button's
   // user-agent stylesheet centers text, which flex `align` can't undo on wrapped lines.
-  if (s.textAlign) css.textAlign = (s.textAlign === "start" ? "left" : s.textAlign) as CSSProperties["textAlign"];
+  if (s.textAlign) css.textAlign = (s.textAlign === "start" ? "left" : s.textAlign) as string;
   // Generic transform passthrough (values are DATA, e.g. a hover lift) — the SDK maps, never authors.
-  if (s.transform) css.transform = s.transform as CSSProperties["transform"];
+  if (s.transform) css.transform = s.transform as string;
   if (s.background) css.background = theme.color?.[s.background as string] ?? (s.background as string);
   // `radial` — a neutral dial/gauge fill: a `fill` token sweeps from 0 to `at` (a value
   // or {{field}} binding, e.g. "72%"), the rest is the `track` token. The WEB realization
@@ -180,7 +188,7 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   if (s.borderBottom) css.borderBottom = borderVal(s.borderBottom as string);
   if (s.borderLeft) css.borderLeft = borderVal(s.borderLeft as string);
   // `outline` — pass-through (e.g. "none" to drop the input focus ring inside a pill).
-  if (s.outline != null) css.outline = s.outline as CSSProperties["outline"];
+  if (s.outline != null) css.outline = s.outline as string;
   if (s.shadow) css.boxShadow = theme.shadow?.[s.shadow as string] ?? (s.shadow as string);
   const rad = (v: string) => theme.radius?.[v] ?? v;
   if (s.radius) css.borderRadius = rad(s.radius as string);
@@ -189,22 +197,22 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   if (s.radiusTopRight) css.borderTopRightRadius = rad(s.radiusTopRight as string);
   if (s.radiusBottomLeft) css.borderBottomLeftRadius = rad(s.radiusBottomLeft as string);
   if (s.radiusBottomRight) css.borderBottomRightRadius = rad(s.radiusBottomRight as string);
-  if (s.overflow) css.overflow = s.overflow as CSSProperties["overflow"];
-  if (s.fit) css.objectFit = s.fit as CSSProperties["objectFit"];
+  if (s.overflow) css.overflow = s.overflow as string;
+  if (s.fit) css.objectFit = s.fit as string;
   if (s.font && theme.text?.[s.font as string]) Object.assign(css, theme.text[s.font as string]);
   // `weight` — a SERVED token like every other value here. This was the one scale the
   // SDK owned outright: a literal four-name map, which meant the foundation's own
   // `light`/`black` were unreachable and an org that added a weight to its tokens got
   // nothing at all (the unknown word reached CSS, CSS dropped the declaration, and the
   // text kept whatever it inherited — silently). A raw number still passes through.
-  if (s.weight) css.fontWeight = (theme.weight?.[s.weight as string] ?? s.weight) as CSSProperties["fontWeight"];
+  if (s.weight) css.fontWeight = (theme.weight?.[s.weight as string] ?? s.weight) as string | number;
   // `lineHeight` — override the text style's line-height (e.g. tighten a single-line
   // card title). Applied AFTER `font` so it wins. Resolves a lineHeight token (tight/…).
-  if (s.lineHeight != null) css.lineHeight = (theme.lineHeight?.[s.lineHeight as string] ?? s.lineHeight) as CSSProperties["lineHeight"];
+  if (s.lineHeight != null) css.lineHeight = (theme.lineHeight?.[s.lineHeight as string] ?? s.lineHeight) as string | number;
   if (s.color) css.color = theme.color?.[s.color as string] ?? (s.color as string);
   // `transition` — smooth state changes (e.g. hover). The value is authored in the
   // definition (e.g. "all 150ms ease"); the SDK passes it through, authoring nothing.
-  if (s.transition) css.transition = s.transition as CSSProperties["transition"];
+  if (s.transition) css.transition = s.transition as string;
   // Animation — GENERIC vocab. `animation` names a served keyframe (theme.keyframes,
   // injected once via keyframesCss); timing comes from the definition. The SDK authors
   // no motion values, and there is NO per-animation primitive — any animated UX is data.
@@ -217,12 +225,12 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
 }
 
 /**
- * Serialize a resolved CSSProperties object → a CSS declaration string ("a-b:v;…").
+ * Serialize a resolved CssStyle object → a CSS declaration string ("a-b:v;…").
  * `important` is needed for injected state rules (hover/active): the base style is
  * applied INLINE, and an inline style beats any class selector — so a `:hover` rule
  * can only override it with `!important`.
  */
-export function cssDecls(css: CSSProperties, important = false): string {
+export function cssDecls(css: CssStyle, important = false): string {
   const flag = important ? " !important" : "";
   return Object.entries(css)
     .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}:${v}${flag}`)