@bitbitpress/client 1.1.3 → 1.1.4

package/dist/react/index.js

@@ -1,5 +1,5 @@
-import { createElement, useEffect, useRef } from 'react';
-import { loadGeneratedModule, mountGeneratedView, } from '../runtime/index.js';
+import { createElement, useCallback, useEffect, useRef, useState } from 'react';
+import { attachHlsMedia, loadGeneratedModule, mountGeneratedView, } from '../runtime/index.js';
 import { useBitBitContext } from '../synthesisUi/context.js';
 export { BitBitProvider } from '../synthesisUi/context.js';
 const noop = () => { };
@@ -12,7 +12,7 @@ const noop = () => { };
  * `mobile` preview in the light DOM). Native delivery renders the same mobile
  * bundle in a WebView via the `react-native-expo` entry.
  */
-export function BitBitView({ client: clientProp, keyName, platform = 'web', onTrack, onEvent, onNavigate, inputs, output, searchOptionsOverrides, synthesisHistoryLimit, }) {
+export function BitBitView({ client: clientProp, keyName, platform = 'web', onTrack, onEvent, onNavigate, onTts, inputs, output, searchOptionsOverrides, synthesisHistoryLimit, }) {
     const contextClient = useBitBitContext()?.client;
     const client = clientProp ?? contextClient;
     const hostRef = useRef(null);
@@ -39,6 +39,8 @@ export function BitBitView({ client: clientProp, keyName, platform = 'web', onTr
             },
             onEvent: onEvent ?? noop,
             navigate: onNavigate,
+            tts: onTts,
+            playMedia: attachHlsMedia,
         });
         void (async () => {
             const stream = await client.user.synthesizeUi({
@@ -90,6 +92,7 @@ export function BitBitView({ client: clientProp, keyName, platform = 'web', onTr
         onTrack,
         onEvent,
         onNavigate,
+        onTts,
         inputs,
         output,
         searchOptionsOverrides,
@@ -97,4 +100,108 @@ export function BitBitView({ client: clientProp, keyName, platform = 'web', onTr
     ]);
     return createElement('div', { ref: hostRef, style: { height: '100%' } });
 }
+/**
+ * Render a generated piece bundle (its `uiWebCode`). Two modes:
+ * - **Direct** (`code` + `data`): mounts the module from source in hand — editor
+ *   previews where code and data are already available (the piece studio).
+ * - **Embed** (`keyName` + `client`): resolves the piece's bundle, field values
+ *   (incl. pre-generated `audioData.url`s), and theme by `keyName` through the
+ *   client (like `<BitBitView keyName>`).
+ *
+ * Either way the module mounts on the host (web: Shadow DOM) and `data` is pushed
+ * in, re-rendering in place when it changes.
+ */
+export function BitBitPiece(props) {
+    const { theme, platform = 'web', colorScheme, onTrack, onEvent, onNavigate, onTts, remountToken, } = props;
+    const keyName = 'keyName' in props ? props.keyName : undefined;
+    const contextClient = useBitBitContext()?.client;
+    const client = ('client' in props ? props.client : undefined) ?? contextClient;
+    // In embed mode, the resolved bundle/data/theme are fetched by keyName.
+    const [fetched, setFetched] = useState(null);
+    useEffect(() => {
+        if (keyName == null || !client)
+            return;
+        let cancelled = false;
+        void (async () => {
+            const payload = await client.user.getSynthesisPiece(keyName);
+            if (cancelled)
+                return;
+            setFetched({ code: payload.uiWebCode, data: payload.fields, theme: payload.theme });
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [keyName, client]);
+    const code = keyName != null ? (fetched?.code ?? null) : props.code;
+    const data = keyName != null ? fetched?.data : props.data;
+    const resolvedTheme = (keyName != null ? fetched?.theme : undefined) ?? theme;
+    // Embed mode wires audio playback through the client automatically; an explicit `onTts`
+    // (or direct `code` mode) always wins. The client-backed URL captures the piece's keyName.
+    const clientTtsUrl = client?.user.synthesisPieceTtsUrl;
+    const resolvedOnTts = onTts ??
+        (keyName != null && clientTtsUrl
+            ? (ref) => clientTtsUrl(keyName, ref)
+            : undefined);
+    const hostRef = useRef(null);
+    const handleRef = useRef(undefined);
+    // Latest props, read at mount/update without re-mounting on identity changes.
+    const propsRef = useRef({
+        data,
+        theme: resolvedTheme,
+        colorScheme,
+        onTrack,
+        onEvent,
+        onNavigate,
+        onTts: resolvedOnTts,
+    });
+    propsRef.current = {
+        data,
+        theme: resolvedTheme,
+        colorScheme,
+        onTrack,
+        onEvent,
+        onNavigate,
+        onTts: resolvedOnTts,
+    };
+    const makeCtx = useCallback(() => {
+        const p = propsRef.current;
+        return {
+            theme: p.theme ?? {},
+            ...(p.colorScheme && { colorScheme: p.colorScheme }),
+            track: p.onTrack ?? noop,
+            onEvent: p.onEvent ?? noop,
+            navigate: p.onNavigate,
+            tts: p.onTts,
+            playMedia: attachHlsMedia,
+        };
+    }, []);
+    // Mount when the bundle source changes (in embed mode, once it has resolved).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: remountToken is a deliberate remount trigger — bumping it re-runs the teardown/mount even though the body never reads it.
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host || !code)
+            return;
+        let cancelled = false;
+        void (async () => {
+            const mod = await loadGeneratedModule(code);
+            if (cancelled || !hostRef.current)
+                return;
+            handleRef.current = mountGeneratedView(hostRef.current, mod, { data: propsRef.current.data, ctx: makeCtx() }, { isolateStyles: platform !== 'mobile' });
+        })();
+        return () => {
+            cancelled = true;
+            handleRef.current?.unmount();
+            handleRef.current = undefined;
+        };
+        // `remountToken` re-runs this to tear down + re-mount cleanly (module is cached).
+    }, [code, platform, makeCtx, remountToken]);
+    // Push fresh data (and ctx) into the mounted view. `colorScheme` is included so a
+    // light/dark toggle re-pushes ctx — `makeCtx` reads props from a ref (stable identity),
+    // so without it a scheme change would sit unflushed until `data` changed.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: colorScheme is a deliberate re-push trigger — makeCtx reads it through a stable ref, so it must stay in deps to flush a scheme toggle.
+    useEffect(() => {
+        handleRef.current?.update({ data, ctx: makeCtx() });
+    }, [data, makeCtx, colorScheme]);
+    return createElement('div', { ref: hostRef, style: { height: '100%' } });
+}
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}

package/dist/react-native-expo/BitBitPiece.d.ts

@@ -0,0 +1,64 @@
+import { WebView } from 'react-native-webview';
+/** What the native `<BitBitPiece keyName>` needs from a client: resolve a
+ *  published piece for embedding. A full `BitBitPressClient` satisfies this. */
+export interface BitBitPieceFetcher {
+    user: {
+        getSynthesisPiece(keyName: string): Promise<{
+            uiWebCode: string;
+            fields: unknown;
+            theme?: Record<string, string>;
+        }>;
+        trackPieceItem?(e: {
+            keyName: string;
+            type: 'VIEW' | 'CLICK';
+            name?: string;
+            payload?: unknown;
+        }): Promise<unknown>;
+        /** Mint an on-demand streaming audio URL for referenced piece content — wired into the
+         *  view's `ctx.tts` so audio players play without host setup. */
+        synthesisPieceTtsUrl?(keyName: string, ref?: {
+            field?: string;
+            index?: number;
+        }): Promise<string>;
+    };
+}
+export interface BitBitPieceProps {
+    /** Client to resolve the piece through. Optional when a `<BitBitProvider
+     *  client>` is in scope. */
+    client?: BitBitPieceFetcher;
+    keyName: string;
+    /** Brand analytics / link tracking. */
+    onTrack?: (event: string, payload?: unknown) => void;
+    /** Host slot callbacks (developer-supplied event handlers). */
+    onEvent?: (name: string, payload?: unknown) => void;
+    /** Navigate a link the view requested (the WebView never navigates itself). */
+    onNavigate?: (href: string) => void;
+    /** Called when the piece fails to resolve, load, or render. Defaults to
+     *  `console.warn` so failures are never silent. */
+    onError?: (message: string) => void;
+    /** Fill the host's height (`flex: 1`) instead of sizing to the piece's own
+     *  content height. Use for a full-screen piece; defaults to false so the piece
+     *  renders at its natural height inside a scrolling host (a feed tile). */
+    fillHeight?: boolean;
+    /** Height (px) to reserve before the content reports its own — avoids a layout
+     *  jump. Ignored when `fillHeight`. Defaults to 240. */
+    initialHeight?: number;
+    /** Force the rendered scheme. Defaults to the device appearance
+     *  (`useColorScheme`) — the WebView can't read it itself, so it's passed in. */
+    colorScheme?: 'light' | 'dark';
+    /** Style for the hosting WebView. */
+    style?: Record<string, unknown>;
+}
+/**
+ * React Native view for a published SynthesisPiece — the native counterpart of
+ * the web `<BitBitPiece keyName>`. Resolves the piece's generated web bundle
+ * (`uiWebCode`), current field values (`fields`), and deployment `theme` by
+ * `keyName`, hosts the bundle (plain DOM: Preact + htm) in a `WebView`, pushes
+ * `fields` in as its data, and relays the view's `track`/`onEvent`/`navigate`
+ * back out (plus auto-beaconing when `client` is a full `BitBitPressClient`).
+ *
+ * Unlike `<BitBitView>` there is no stream — a piece is a single resolved
+ * snapshot, so the data is pushed once the WebView signals `ready`.
+ */
+export declare function BitBitPiece({ client: clientProp, keyName, onTrack, onEvent, onNavigate, onError, fillHeight, initialHeight, colorScheme, style, }: BitBitPieceProps): import("react").CElement<import("react-native-webview").WebViewProps, WebView> | null;
+//# sourceMappingURL=BitBitPiece.d.ts.map

package/dist/react-native-expo/BitBitPiece.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitBitPiece.d.ts","sourceRoot":"","sources":["../../src/react-native-expo/BitBitPiece.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAA4B,MAAM,sBAAsB,CAAC;AAIzE;gFACgF;AAChF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE;QACJ,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;YAC1C,SAAS,EAAE,MAAM,CAAC;YAClB,MAAM,EAAE,OAAO,CAAC;YAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAChC,CAAC,CAAC;QAIH,cAAc,CAAC,CAAC,CAAC,EAAE;YACjB,OAAO,EAAE,MAAM,CAAC;YAChB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;YACvB,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,OAAO,CAAC,EAAE,OAAO,CAAC;SACnB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;QACrB;yEACiE;QACjE,oBAAoB,CAAC,CACnB,OAAO,EAAE,MAAM,EACf,GAAG,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,GACvC,OAAO,CAAC,MAAM,CAAC,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,gBAAgB;IAC/B;gCAC4B;IAC5B,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,+EAA+E;IAC/E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;uDACmD;IACnD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;+EAE2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;4DACwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;oFACgF;IAChF,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAaD;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EAAE,UAAU,EAClB,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,UAAkB,EAClB,aAAmB,EACnB,WAAW,EACX,KAAK,GACN,EAAE,gBAAgB,yFAqKlB"}

package/dist/react-native-expo/BitBitPiece.js

@@ -0,0 +1,164 @@
+import { createElement, useCallback, useEffect, useRef, useState } from 'react';
+import { useColorScheme } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { useBitBitContext } from '../synthesisUi/context.js';
+import { buildBootstrapHtml } from './bootstrapHtml.js';
+/**
+ * React Native view for a published SynthesisPiece — the native counterpart of
+ * the web `<BitBitPiece keyName>`. Resolves the piece's generated web bundle
+ * (`uiWebCode`), current field values (`fields`), and deployment `theme` by
+ * `keyName`, hosts the bundle (plain DOM: Preact + htm) in a `WebView`, pushes
+ * `fields` in as its data, and relays the view's `track`/`onEvent`/`navigate`
+ * back out (plus auto-beaconing when `client` is a full `BitBitPressClient`).
+ *
+ * Unlike `<BitBitView>` there is no stream — a piece is a single resolved
+ * snapshot, so the data is pushed once the WebView signals `ready`.
+ */
+export function BitBitPiece({ client: clientProp, keyName, onTrack, onEvent, onNavigate, onError, fillHeight = false, initialHeight = 240, colorScheme, style, }) {
+    const contextClient = useBitBitContext()?.client;
+    const client = clientProp ?? contextClient;
+    // The WebView can't read the OS appearance, so resolve it here and pass it in.
+    const osScheme = useColorScheme();
+    const scheme = colorScheme ?? (osScheme === 'dark' ? 'dark' : 'light');
+    // Read at (re)build time without making it a build dependency — scheme changes
+    // are pushed live below instead of rebuilding (which would reload the WebView).
+    const schemeRef = useRef(scheme);
+    schemeRef.current = scheme;
+    const reportError = useCallback((message) => {
+        if (onError)
+            onError(message);
+        else
+            console.warn(`[BitBitPiece] ${message}`);
+    }, [onError]);
+    const webRef = useRef(null);
+    const [html, setHtml] = useState(null);
+    // Content height reported by the bundle (auto-height mode); null until first report.
+    const [contentHeight, setContentHeight] = useState(null);
+    // Resolved field values + whether the WebView has loaded the bundle and can
+    // receive them. Refs (not state) so the bridge round-trip doesn't churn renders.
+    const dataRef = useRef(undefined);
+    const readyRef = useRef(false);
+    // A `BitBitPressClient` may be a retry Proxy whose method getters return a NEW
+    // function on every access, so we depend on this stable boolean — never the
+    // function identities — and read the methods fresh from `client` when calling.
+    const hasTts = typeof client?.user.synthesisPieceTtsUrl === 'function';
+    const beacon = useCallback((type, name, payload) => {
+        client?.user
+            .trackPieceItem?.({ keyName, type, ...(name != null && { name }), payload })
+            ?.catch?.(() => { });
+    }, [client, keyName]);
+    const pushData = useCallback((data) => {
+        webRef.current?.injectJavaScript(`window.__bb && window.__bb.update(${JSON.stringify(data)}); true;`);
+    }, []);
+    // Resolve the piece and build the WebView document. Pushes the fields in
+    // immediately if the WebView has already signalled `ready`.
+    useEffect(() => {
+        if (!client)
+            return;
+        let cancelled = false;
+        readyRef.current = false;
+        dataRef.current = undefined;
+        setHtml(null);
+        void (async () => {
+            try {
+                const piece = await client.user.getSynthesisPiece(keyName);
+                if (cancelled)
+                    return;
+                dataRef.current = piece.fields;
+                setHtml(buildBootstrapHtml({
+                    bundle: piece.uiWebCode,
+                    theme: piece.theme ?? {},
+                    autoHeight: !fillHeight,
+                    enableTts: hasTts,
+                    colorScheme: schemeRef.current,
+                }));
+                if (readyRef.current)
+                    pushData(piece.fields);
+            }
+            catch (err) {
+                if (!cancelled)
+                    reportError(err instanceof Error ? err.message : String(err));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, keyName, pushData, fillHeight, hasTts, reportError]);
+    // Push OS appearance changes into the loaded WebView (no reload) so a dual-mode
+    // piece recolors live when the device switches light/dark.
+    useEffect(() => {
+        webRef.current?.injectJavaScript(`window.__bb && window.__bb.setColorScheme(${JSON.stringify(scheme)}); true;`);
+    }, [scheme]);
+    const onMessage = useCallback((e) => {
+        let msg;
+        try {
+            msg = JSON.parse(e.nativeEvent.data);
+        }
+        catch {
+            return;
+        }
+        switch (msg.kind) {
+            case 'ready':
+                readyRef.current = true;
+                if (dataRef.current !== undefined)
+                    pushData(dataRef.current);
+                break;
+            case 'height':
+                if (!fillHeight && msg.px > 0)
+                    setContentHeight(msg.px);
+                break;
+            case 'error':
+                reportError(msg.message);
+                break;
+            case 'tts': {
+                const { id, ref } = msg;
+                const resolve = (url, error) => webRef.current?.injectJavaScript(`window.__bb && window.__bb.resolveTts(${id}, ${JSON.stringify(url)}, ${JSON.stringify(error ?? null)}); true;`);
+                const ttsUrl = client?.user.synthesisPieceTtsUrl;
+                if (!ttsUrl) {
+                    resolve(null, 'Could not load audio');
+                    break;
+                }
+                ttsUrl(keyName, ref)
+                    .then((url) => resolve(url))
+                    .catch((err) => resolve(null, err instanceof Error ? err.message : 'Could not load audio'));
+                break;
+            }
+            case 'view':
+                beacon('VIEW');
+                break;
+            case 'track':
+                onTrack?.(msg.event, msg.payload);
+                beacon('CLICK', msg.event, msg.payload);
+                break;
+            case 'event':
+                onEvent?.(msg.name, msg.payload);
+                break;
+            case 'navigate':
+                onNavigate?.(msg.href);
+                break;
+        }
+    }, [beacon, onTrack, onEvent, onNavigate, pushData, fillHeight, client, keyName, reportError]);
+    if (!html)
+        return null;
+    // Auto-height: the host feed scrolls, so the WebView sizes to the piece's
+    // reported content height and never scrolls itself. Fill mode fills the parent.
+    const sizeStyle = fillHeight
+        ? { flex: 1 }
+        : { width: '100%', height: contentHeight ?? initialHeight };
+    return createElement(WebView, {
+        ref: webRef,
+        source: { html, baseUrl: 'https://localhost/' },
+        originWhitelist: ['*'],
+        onMessage,
+        onError: () => reportError('WebView failed to load'),
+        scrollEnabled: fillHeight,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        // Links go to `onNavigate`, never in-WebView navigation.
+        onShouldStartLoadWithRequest: (request) => request.url === 'https://localhost/' || request.url.startsWith('about:'),
+        style: style ?? { backgroundColor: 'transparent', ...sizeStyle },
+    });
+}
+//# sourceMappingURL=BitBitPiece.js.map

package/dist/react-native-expo/BitBitPiece.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitBitPiece.js","sourceRoot":"","sources":["../../src/react-native-expo/BitBitPiece.ts"],"names":[],"mappings":"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"}

package/dist/react-native-expo/bootstrapHtml.d.ts

@@ -16,5 +16,18 @@
 export declare function buildBootstrapHtml(params: {
     bundle: string;
     theme: Record<string, string>;
+    /** Report content height to native (`{ kind: 'height', px }`) and lay the app
+     *  out at its natural height instead of filling the viewport — for embedding a
+     *  piece at its own size inside a scrolling host (a feed tile). Defaults to
+     *  false: fill the WebView height (a full-screen `<BitBitView>`). */
+    autoHeight?: boolean;
+    /** Expose `ctx.tts(ref)` to the bundle: an audio player calls it on play to mint a streaming
+     *  URL for the referenced piece content. Requests round-trip to native (`{ kind: 'tts', id,
+     *  ref }`) and resolve when native injects `window.__bb.resolveTts(id, …)`. Defaults to false —
+     *  without it `ctx.tts` is undefined and players stay idle. */
+    enableTts?: boolean;
+    /** The color scheme to render in (`ctx.colorScheme`). The WebView can't read the
+     *  OS appearance reliably, so native passes it explicitly. Omit for none. */
+    colorScheme?: 'light' | 'dark';
 }): string;
 //# sourceMappingURL=bootstrapHtml.d.ts.map

package/dist/react-native-expo/bootstrapHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrapHtml.d.ts","sourceRoot":"","sources":["../../src/react-native-expo/bootstrapHtml.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B,GAAG,MAAM,CA8DT"}
+{"version":3,"file":"bootstrapHtml.d.ts","sourceRoot":"","sources":["../../src/react-native-expo/bootstrapHtml.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B;;;yEAGqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;mEAG+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,GAAG,MAAM,CA8JT"}

package/dist/react-native-expo/bootstrapHtml.js

@@ -16,14 +16,12 @@
 export function buildBootstrapHtml(params) {
     const bundle = JSON.stringify(params.bundle);
     const theme = JSON.stringify(params.theme);
-    return `<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
-<style>
-  html, body { margin: 0; padding: 0; }
-  /* Viewport units (not %) so the app fills the WebView height without a
+    const autoHeight = params.autoHeight ?? false;
+    const enableTts = params.enableTts ?? false;
+    const colorScheme = JSON.stringify(params.colorScheme ?? null);
+    const rootLayout = autoHeight
+        ? `#bb-root { display: flex; flex-direction: column; }`
+        : `/* Viewport units (not %) so the app fills the WebView height without a
      definite parent-height chain, which collapses in a WebView. */
   body { min-height: 100vh; min-height: 100dvh; }
   #bb-root {
@@ -33,7 +31,30 @@ export function buildBootstrapHtml(params) {
     flex-direction: column;
   }
   /* Let the mounted app grow to fill the height (still scrolls when taller). */
-  #bb-root > * { flex: 1 0 auto; }
+  #bb-root > * { flex: 1 0 auto; }`;
+    // In auto-height mode, mirror the streamed content's size out to native so the
+    // host tile can size to it (the app's standard embed-sizing contract).
+    const heightReporter = autoHeight
+        ? `
+const root = document.getElementById('bb-root');
+let lastHeight = 0;
+const reportHeight = () => {
+  const px = Math.ceil(root.getBoundingClientRect().height);
+  if (px > 0 && Math.abs(px - lastHeight) >= 2) { lastHeight = px; post({ kind: 'height', px }); }
+};
+if (typeof ResizeObserver !== 'undefined') new ResizeObserver(reportHeight).observe(root);
+if (typeof MutationObserver !== 'undefined')
+  new MutationObserver(reportHeight).observe(root, { childList: true, subtree: true, attributes: true });
+[0, 150, 300, 750, 1500].forEach((d) => setTimeout(reportHeight, d));`
+        : '';
+    return `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
+<style>
+  html, body { margin: 0; padding: 0; }
+  ${rootLayout}
   * { box-sizing: border-box; }
   :root { -webkit-tap-highlight-color: transparent; }
 </style>
@@ -41,18 +62,60 @@ export function buildBootstrapHtml(params) {
 <body>
 <div id="bb-root"></div>
 <script type="module">
-const post = (m) => { try { window.ReactNativeWebView.postMessage(JSON.stringify(m)); } catch (e) {} };
-const bb = (window.__bb = { theme: ${theme}, mod: null, handle: null, pending: null, viewed: false });
+// Transport out: React Native WebView when hosted natively, else the parent window
+// (a web <iframe> preview). Same message shapes both ways.
+const post = (m) => {
+  try { if (window.ReactNativeWebView) { window.ReactNativeWebView.postMessage(JSON.stringify(m)); return; } } catch (e) {}
+  try { if (window.parent && window.parent !== window) window.parent.postMessage(m, '*'); } catch (e) {}
+};
+const bb = (window.__bb = { theme: ${theme}, colorScheme: ${colorScheme}, mod: null, handle: null, pending: null, data: undefined, history: undefined, viewed: false, tts: {}, ttsSeq: 0 });
 const wrap = (h) => (typeof h === 'function' ? { update() {}, unmount: h } : h);
+const applyColorScheme = () => { if (bb.colorScheme) document.documentElement.style.colorScheme = bb.colorScheme; };
+applyColorScheme();
+// An audio player calls ctx.tts(ref) on play; the request round-trips to the host, which mints
+// a streaming URL for the referenced piece content and injects it back via resolveTts.
+const requestTts = (ref) => new Promise((resolve, reject) => {
+  const id = ++bb.ttsSeq;
+  bb.tts[id] = { resolve, reject };
+  post({ kind: 'tts', id, ref });
+});
+bb.resolveTts = (id, url, error) => {
+  const p = bb.tts[id];
+  if (!p) return;
+  delete bb.tts[id];
+  if (error || !url) p.reject(new Error(error || 'Could not load audio'));
+  else p.resolve(url);
+};
+// Play an HLS URL on every platform: native HLS where the WebView supports it (iOS), else
+// hls.js loaded on demand (Android). Handed to the bundle as ctx.playMedia — a plain <audio src>
+// of an HLS playlist only works on iOS.
+const playMedia = (el, url) => {
+  if (el.canPlayType('application/vnd.apple.mpegurl')) {
+    el.src = url;
+    return () => { el.removeAttribute('src'); el.load(); };
+  }
+  let destroyed = false; let hls = null;
+  import('https://esm.sh/hls.js@1').then((m) => {
+    if (destroyed) return;
+    const H = m.default || m;
+    if (!H || !H.isSupported()) { el.src = url; return; }
+    hls = new H(); hls.loadSource(url); hls.attachMedia(el);
+  }).catch(() => { if (!destroyed) el.src = url; });
+  return () => { destroyed = true; if (hls) { try { hls.destroy(); } catch (e) {} } };
+};
 const ctx = () => ({
   theme: bb.theme,
+  ...(bb.colorScheme ? { colorScheme: bb.colorScheme } : {}),
   track: (event, payload) => post({ kind: 'track', event, payload }),
   onEvent: (name, payload) => post({ kind: 'event', name, payload }),
   navigate: (href) => post({ kind: 'navigate', href }),
+  playMedia,
+  ${enableTts ? 'tts: requestTts,' : ''}
 });
 // Called by native (injectJavaScript) with each streamed data payload (+ the
 // optional history array, forwarded into the view's props).
 bb.update = (data, history) => {
+  bb.data = data; bb.history = history;
   if (!bb.mod) { bb.pending = { data, history }; return; }
   const el = document.getElementById('bb-root');
   const props = { data, history, ctx: ctx() };
@@ -60,6 +123,22 @@ bb.update = (data, history) => {
   bb.handle = wrap(bb.mod.mount(el, props));
   if (!bb.viewed) { bb.viewed = true; post({ kind: 'view' }); }
 };
+// Native pushes OS appearance changes here; re-render the mounted view with the
+// new scheme so a dual-mode piece recolors live.
+bb.setColorScheme = (scheme) => {
+  bb.colorScheme = scheme || null;
+  applyColorScheme();
+  if (bb.handle && bb.data !== undefined) bb.handle.update({ data: bb.data, history: bb.history, ctx: ctx() });
+};
+// Transport in for a web <iframe> host (native drives these via injectJavaScript instead).
+window.addEventListener('message', (e) => {
+  const m = e.data;
+  if (!m || typeof m !== 'object') return;
+  if (m.kind === 'update') bb.update(m.data, m.history);
+  else if (m.kind === 'setColorScheme') bb.setColorScheme(m.scheme);
+  else if (m.kind === 'resolveTts') bb.resolveTts(m.id, m.url, m.error);
+});
+${heightReporter}
 (async () => {
   try {
     const src = ${bundle};
@@ -70,8 +149,25 @@ bb.update = (data, history) => {
     if (typeof bb.mod.mount !== 'function') throw new Error('generated bundle has no mount()');
     post({ kind: 'ready' });
     if (bb.pending != null) bb.update(bb.pending.data, bb.pending.history);
-  } catch (e) {}
+  } catch (e) {
+    post({ kind: 'error', message: (e && e.message) ? e.message : String(e) });
+  }
 })();
+// Surface uncaught errors so native can log them (otherwise the WebView fails
+// silently). Capture phase (3rd arg true) so it also catches media element
+// errors (<audio>/<video> load/decode failures), which don't bubble.
+const MEDIA_ERR = ['', 'ABORTED', 'NETWORK', 'DECODE', 'SRC_NOT_SUPPORTED'];
+window.addEventListener('error', (e) => {
+  const t = e.target;
+  if (t && (t.tagName === 'AUDIO' || t.tagName === 'VIDEO')) {
+    const code = t.error && t.error.code;
+    post({ kind: 'error', message: 'media ' + (MEDIA_ERR[code] || 'error') + ' loading ' + (t.currentSrc || t.src || '') });
+    return;
+  }
+  post({ kind: 'error', message: e.message || 'script error' });
+}, true);
+window.addEventListener('unhandledrejection', (e) =>
+  post({ kind: 'error', message: (e.reason && e.reason.message) || String(e.reason) }));
 </script>
 </body>
 </html>`;

package/dist/react-native-expo/bootstrapHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrapHtml.js","sourceRoot":"","sources":["../../src/react-native-expo/bootstrapHtml.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,kBAAkB,CAAC,MAGlC;IACC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;qCA0B4B,KAAK;;;;;;;;;;;;;;;;;;;;kBAoBxB,MAAM;;;;;;;;;;;;QAYhB,CAAC;AACT,CAAC"}
+{"version":3,"file":"bootstrapHtml.js","sourceRoot":"","sources":["../../src/react-native-expo/bootstrapHtml.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,kBAAkB,CAAC,MAgBlC;IACC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,KAAK,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC;IAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,UAAU;QAC3B,CAAC,CAAC,qDAAqD;QACvD,CAAC,CAAC;;;;;;;;;;mCAU6B,CAAC;IAClC,+EAA+E;IAC/E,uEAAuE;IACvE,MAAM,cAAc,GAAG,UAAU;QAC/B,CAAC,CAAC;;;;;;;;;;sEAUgE;QAClE,CAAC,CAAC,EAAE,CAAC;IACP,OAAO;;;;;;;IAOL,UAAU;;;;;;;;;;;;;;qCAcuB,KAAK,kBAAkB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0CnE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BrC,cAAc;;;kBAGE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6BhB,CAAC;AACT,CAAC"}

package/dist/react-native-expo/index.d.ts

@@ -1,4 +1,5 @@
 export { type BitBitContextValue, BitBitProvider } from '../synthesisUi/context.js';
 export type { SynthesisUiPlatform, SynthesisUiStreamEvent, SynthesizeUiFetcher, } from '../synthesisUi/types.js';
+export { BitBitPiece, type BitBitPieceFetcher, type BitBitPieceProps, } from './BitBitPiece.js';
 export { BitBitView, type BitBitViewProps } from './BitBitView.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-native-expo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-native-expo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACpF,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-native-expo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACpF,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/react-native-expo/index.js

@@ -1,3 +1,4 @@
 export { BitBitProvider } from '../synthesisUi/context.js';
+export { BitBitPiece, } from './BitBitPiece.js';
 export { BitBitView } from './BitBitView.js';
 //# sourceMappingURL=index.js.map

package/dist/react-native-expo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react-native-expo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAMpF,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react-native-expo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAMpF,OAAO,EACL,WAAW,GAGZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC"}