@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/useDictation.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/useDictation.ts
+/**
+* Dictation in the composer: a press opens the microphone, the next one closes it and hands the
+* recording to the host's `dictate`, whose words go to `onWords`. Without `dictate`, or in a
+* browser that cannot record, it is not `available`. Leaving mid-recording stops the microphone.
+*/
+function useDictation(dictate, onWords) {
+	const [state, setState] = useState("idle");
+	const recorder = useRef(null);
+	const said = useRef(onWords);
+	said.current = onWords;
+	const available = dictate !== void 0 && typeof MediaRecorder !== "undefined" && typeof navigator !== "undefined" && navigator.mediaDevices !== void 0;
+	useEffect(() => () => {
+		const open = recorder.current;
+		recorder.current = null;
+		if (open !== null && open.state !== "inactive") {
+			open.onstop = null;
+			open.stop();
+			open.stream.getTracks().forEach((track) => {
+				track.stop();
+			});
+		}
+	}, []);
+	const start = useCallback(async () => {
+		if (dictate === void 0) return;
+		let stream;
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		} catch {
+			setState("failed");
+			return;
+		}
+		const open = new MediaRecorder(stream);
+		const chunks = [];
+		open.ondataavailable = (event) => {
+			if (event.data.size > 0) chunks.push(event.data);
+		};
+		open.onstop = () => {
+			stream.getTracks().forEach((track) => {
+				track.stop();
+			});
+			recorder.current = null;
+			setState("writing");
+			dictate(new Blob(chunks, { type: open.mimeType || "audio/webm" })).then((words) => {
+				if (words !== "") said.current(words);
+				setState("idle");
+			}).catch(() => {
+				setState("failed");
+			});
+		};
+		recorder.current = open;
+		open.start();
+		setState("listening");
+	}, [dictate]);
+	return {
+		available,
+		state,
+		toggle: useCallback(() => {
+			if (state === "listening") recorder.current?.stop();
+			else if (state === "idle" || state === "failed") start();
+		}, [state, start])
+	};
+}
+//#endregion
+export { useDictation };
+
+//# sourceMappingURL=useDictation.js.map

package/dist/useDictation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDictation.js","names":[],"sources":["../src/useDictation.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/** Turns a recording into words: the host's (its server's speech to text). */\nexport type Dictate = (audio: Blob) => Promise<string>;\n\n/** Where a dictation is: nothing, the microphone open, the words on their way, or refused. */\nexport type Dictation = \"idle\" | \"listening\" | \"writing\" | \"failed\";\n\n/**\n * Dictation in the composer: a press opens the microphone, the next one closes it and hands the\n * recording to the host's `dictate`, whose words go to `onWords`. Without `dictate`, or in a\n * browser that cannot record, it is not `available`. Leaving mid-recording stops the microphone.\n */\nexport function useDictation(\n  dictate: Dictate | undefined,\n  onWords: (words: string) => void,\n): { available: boolean; state: Dictation; toggle: () => void } {\n  const [state, setState] = useState<Dictation>(\"idle\");\n  const recorder = useRef<MediaRecorder | null>(null);\n  const said = useRef(onWords);\n  said.current = onWords;\n  const available =\n    dictate !== undefined &&\n    typeof MediaRecorder !== \"undefined\" &&\n    typeof navigator !== \"undefined\" &&\n    navigator.mediaDevices !== undefined;\n\n  useEffect(\n    () => () => {\n      const open = recorder.current;\n      recorder.current = null;\n      if (open !== null && open.state !== \"inactive\") {\n        open.onstop = null;\n        open.stop();\n        open.stream.getTracks().forEach((track) => {\n          track.stop();\n        });\n      }\n    },\n    [],\n  );\n\n  const start = useCallback(async () => {\n    if (dictate === undefined) return;\n    let stream: MediaStream;\n    try {\n      stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n    } catch {\n      setState(\"failed\");\n      return;\n    }\n    const open = new MediaRecorder(stream);\n    const chunks: Blob[] = [];\n    open.ondataavailable = (event) => {\n      if (event.data.size > 0) chunks.push(event.data);\n    };\n    open.onstop = () => {\n      stream.getTracks().forEach((track) => {\n        track.stop();\n      });\n      recorder.current = null;\n      setState(\"writing\");\n      dictate(new Blob(chunks, { type: open.mimeType || \"audio/webm\" }))\n        .then((words) => {\n          if (words !== \"\") said.current(words);\n          setState(\"idle\");\n        })\n        .catch(() => {\n          setState(\"failed\");\n        });\n    };\n    recorder.current = open;\n    open.start();\n    setState(\"listening\");\n  }, [dictate]);\n\n  const toggle = useCallback(() => {\n    if (state === \"listening\") recorder.current?.stop();\n    else if (state === \"idle\" || state === \"failed\") void start();\n  }, [state, start]);\n\n  return { available, state, toggle };\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,aACd,SACA,SAC8D;CAC9D,MAAM,CAAC,OAAO,YAAY,SAAoB,MAAM;CACpD,MAAM,WAAW,OAA6B,IAAI;CAClD,MAAM,OAAO,OAAO,OAAO;CAC3B,KAAK,UAAU;CACf,MAAM,YACJ,YAAY,KAAA,KACZ,OAAO,kBAAkB,eACzB,OAAO,cAAc,eACrB,UAAU,iBAAiB,KAAA;CAE7B,sBACc;EACV,MAAM,OAAO,SAAS;EACtB,SAAS,UAAU;EACnB,IAAI,SAAS,QAAQ,KAAK,UAAU,YAAY;GAC9C,KAAK,SAAS;GACd,KAAK,KAAK;GACV,KAAK,OAAO,UAAU,CAAC,CAAC,SAAS,UAAU;IACzC,MAAM,KAAK;GACb,CAAC;EACH;CACF,GACA,CAAC,CACH;CAEA,MAAM,QAAQ,YAAY,YAAY;EACpC,IAAI,YAAY,KAAA,GAAW;EAC3B,IAAI;EACJ,IAAI;GACF,SAAS,MAAM,UAAU,aAAa,aAAa,EAAE,OAAO,KAAK,CAAC;EACpE,QAAQ;GACN,SAAS,QAAQ;GACjB;EACF;EACA,MAAM,OAAO,IAAI,cAAc,MAAM;EACrC,MAAM,SAAiB,CAAC;EACxB,KAAK,mBAAmB,UAAU;GAChC,IAAI,MAAM,KAAK,OAAO,GAAG,OAAO,KAAK,MAAM,IAAI;EACjD;EACA,KAAK,eAAe;GAClB,OAAO,UAAU,CAAC,CAAC,SAAS,UAAU;IACpC,MAAM,KAAK;GACb,CAAC;GACD,SAAS,UAAU;GACnB,SAAS,SAAS;GAClB,QAAQ,IAAI,KAAK,QAAQ,EAAE,MAAM,KAAK,YAAY,aAAa,CAAC,CAAC,CAAC,CAC/D,MAAM,UAAU;IACf,IAAI,UAAU,IAAI,KAAK,QAAQ,KAAK;IACpC,SAAS,MAAM;GACjB,CAAC,CAAC,CACD,YAAY;IACX,SAAS,QAAQ;GACnB,CAAC;EACL;EACA,SAAS,UAAU;EACnB,KAAK,MAAM;EACX,SAAS,WAAW;CACtB,GAAG,CAAC,OAAO,CAAC;CAOZ,OAAO;EAAE;EAAW;EAAO,QALZ,kBAAkB;GAC/B,IAAI,UAAU,aAAa,SAAS,SAAS,KAAK;QAC7C,IAAI,UAAU,UAAU,UAAU,UAAU,MAAW;EAC9D,GAAG,CAAC,OAAO,KAAK,CAEgB;CAAE;AACpC"}

package/dist/useLive.d.ts

@@ -0,0 +1,26 @@
+import { Client } from "./client.js";
+import { Frame, UpFrame } from "./frames.js";
+//#region src/useLive.d.ts
+export interface LiveHandlers {
+  /** Every frame the socket sends, as it comes. */
+  onFrame: (frame: Frame) => void;
+  /** The socket is open; `again` when it had been before, so what was stored meanwhile can be read. */
+  onOpen?: ((again: boolean) => void) | undefined;
+}
+/** A conversation's socket: whether it is open, and the way to speak up it. */
+export interface Live {
+  open: boolean;
+  /** Sends a frame up; false when the socket is not open. */
+  send: (frame: UpFrame) => boolean;
+}
+/**
+ * The socket of conversation `conversationId`, held for as long as the component lives: frames
+ * down to `onFrame`, `send` up. A turn runs on the server apart from the socket, so a socket that
+ * drops opens again, waiting longer each time; `onOpen` then says it is not the first time, and a
+ * turn still running is told again from its start. A socket that could not open may have carried
+ * a token that expired: the next try asks the client for a fresh one, once until one opens. The
+ * raw layer: what a host draws its own things over.
+ */
+export declare function useLive(client: Client, conversationId: string, { onFrame, onOpen }: LiveHandlers): Live;
+//#endregion
+//# sourceMappingURL=useLive.d.ts.map

package/dist/useLive.js

@@ -0,0 +1,88 @@
+import { frameOf } from "./frames.js";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+//#region src/useLive.ts
+/** How long to wait before trying again after the nth failure in a row: 1s, 2s, 4s, 8s, then 10s. */
+function retryDelay(failures) {
+	return Math.min(1e3 * 2 ** failures, 1e4);
+}
+/**
+* The socket of conversation `conversationId`, held for as long as the component lives: frames
+* down to `onFrame`, `send` up. A turn runs on the server apart from the socket, so a socket that
+* drops opens again, waiting longer each time; `onOpen` then says it is not the first time, and a
+* turn still running is told again from its start. A socket that could not open may have carried
+* a token that expired: the next try asks the client for a fresh one, once until one opens. The
+* raw layer: what a host draws its own things over.
+*/
+function useLive(client, conversationId, { onFrame, onOpen }) {
+	const [open, setOpen] = useState(false);
+	const socket = useRef(null);
+	const frame = useEffectEvent(onFrame);
+	const opened = useEffectEvent((again) => onOpen?.(again));
+	useEffect(() => {
+		let current = null;
+		let failures = 0;
+		let before = false;
+		let stopped = false;
+		let fresh = false;
+		let renewed = false;
+		let retry;
+		const again = () => {
+			setOpen(false);
+			retry = setTimeout(connect, retryDelay(failures));
+			failures += 1;
+		};
+		const open = (url) => {
+			const live = new WebSocket(url);
+			let opens = false;
+			current = live;
+			socket.current = live;
+			live.onopen = () => {
+				opens = true;
+				failures = 0;
+				renewed = false;
+				setOpen(true);
+				opened(before);
+				before = true;
+			};
+			live.onmessage = (event) => {
+				const next = frameOf(event.data);
+				if (next) frame(next);
+			};
+			live.onclose = () => {
+				if (stopped) return;
+				fresh = !opens && !renewed;
+				again();
+			};
+		};
+		function connect() {
+			renewed ||= fresh;
+			client.liveUrl(conversationId, { fresh }).then((url) => {
+				if (!stopped) open(url);
+			}, () => {
+				if (!stopped) again();
+			});
+			fresh = false;
+		}
+		connect();
+		return () => {
+			stopped = true;
+			clearTimeout(retry);
+			socket.current = null;
+			current?.close();
+		};
+	}, [client, conversationId]);
+	const send = (up) => {
+		const live = socket.current;
+		if (live?.readyState !== WebSocket.OPEN) return false;
+		live.send(JSON.stringify(up));
+		return true;
+	};
+	return {
+		open,
+		send
+	};
+}
+//#endregion
+export { retryDelay, useLive };
+
+//# sourceMappingURL=useLive.js.map

package/dist/useLive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLive.js","names":[],"sources":["../src/useLive.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from \"react\";\n\nimport type { Client } from \"./client\";\nimport { frameOf, type Frame, type UpFrame } from \"./frames\";\n\nexport interface LiveHandlers {\n  /** Every frame the socket sends, as it comes. */\n  onFrame: (frame: Frame) => void;\n  /** The socket is open; `again` when it had been before, so what was stored meanwhile can be read. */\n  onOpen?: ((again: boolean) => void) | undefined;\n}\n\n/** A conversation's socket: whether it is open, and the way to speak up it. */\nexport interface Live {\n  open: boolean;\n  /** Sends a frame up; false when the socket is not open. */\n  send: (frame: UpFrame) => boolean;\n}\n\n/** How long to wait before trying again after the nth failure in a row: 1s, 2s, 4s, 8s, then 10s. */\nexport function retryDelay(failures: number): number {\n  return Math.min(1000 * 2 ** failures, 10_000);\n}\n\n/**\n * The socket of conversation `conversationId`, held for as long as the component lives: frames\n * down to `onFrame`, `send` up. A turn runs on the server apart from the socket, so a socket that\n * drops opens again, waiting longer each time; `onOpen` then says it is not the first time, and a\n * turn still running is told again from its start. A socket that could not open may have carried\n * a token that expired: the next try asks the client for a fresh one, once until one opens. The\n * raw layer: what a host draws its own things over.\n */\nexport function useLive(\n  client: Client,\n  conversationId: string,\n  { onFrame, onOpen }: LiveHandlers,\n): Live {\n  const [open, setOpen] = useState(false);\n  const socket = useRef<WebSocket | null>(null);\n  // The handlers as the host last gave them, without the socket opening again for each render.\n  const frame = useEffectEvent(onFrame);\n  const opened = useEffectEvent((again: boolean) => onOpen?.(again));\n\n  useEffect(() => {\n    let current: WebSocket | null = null;\n    let failures = 0;\n    let before = false;\n    let stopped = false;\n    // Whether the next try asks for a fresh credential: once after a socket that never opened.\n    let fresh = false;\n    let renewed = false;\n    let retry: ReturnType<typeof setTimeout> | undefined;\n\n    const again = () => {\n      setOpen(false);\n      retry = setTimeout(connect, retryDelay(failures));\n      failures += 1;\n    };\n\n    const open = (url: string) => {\n      const live = new WebSocket(url);\n      let opens = false;\n      current = live;\n      socket.current = live;\n      live.onopen = () => {\n        opens = true;\n        failures = 0;\n        renewed = false;\n        setOpen(true);\n        opened(before);\n        before = true;\n      };\n      live.onmessage = (event: MessageEvent) => {\n        const next = frameOf(event.data);\n        if (next) frame(next);\n      };\n      live.onclose = () => {\n        if (stopped) return;\n        fresh = !opens && !renewed;\n        again();\n      };\n    };\n\n    function connect() {\n      renewed ||= fresh;\n      client.liveUrl(conversationId, { fresh }).then(\n        (url) => {\n          if (!stopped) open(url);\n        },\n        // No address (the host's backend gave no token): tried again like a socket that dropped.\n        () => {\n          if (!stopped) again();\n        },\n      );\n      fresh = false;\n    }\n\n    connect();\n    return () => {\n      stopped = true;\n      clearTimeout(retry);\n      socket.current = null;\n      current?.close();\n    };\n  }, [client, conversationId]);\n\n  const send = (up: UpFrame): boolean => {\n    const live = socket.current;\n    if (live?.readyState !== WebSocket.OPEN) return false;\n    live.send(JSON.stringify(up));\n    return true;\n  };\n\n  return { open, send };\n}\n"],"mappings":";;;;AAoBA,SAAgB,WAAW,UAA0B;CACnD,OAAO,KAAK,IAAI,MAAO,KAAK,UAAU,GAAM;AAC9C;;;;;;;;;AAUA,SAAgB,QACd,QACA,gBACA,EAAE,SAAS,UACL;CACN,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,SAAS,OAAyB,IAAI;CAE5C,MAAM,QAAQ,eAAe,OAAO;CACpC,MAAM,SAAS,gBAAgB,UAAmB,SAAS,KAAK,CAAC;CAEjE,gBAAgB;EACd,IAAI,UAA4B;EAChC,IAAI,WAAW;EACf,IAAI,SAAS;EACb,IAAI,UAAU;EAEd,IAAI,QAAQ;EACZ,IAAI,UAAU;EACd,IAAI;EAEJ,MAAM,cAAc;GAClB,QAAQ,KAAK;GACb,QAAQ,WAAW,SAAS,WAAW,QAAQ,CAAC;GAChD,YAAY;EACd;EAEA,MAAM,QAAQ,QAAgB;GAC5B,MAAM,OAAO,IAAI,UAAU,GAAG;GAC9B,IAAI,QAAQ;GACZ,UAAU;GACV,OAAO,UAAU;GACjB,KAAK,eAAe;IAClB,QAAQ;IACR,WAAW;IACX,UAAU;IACV,QAAQ,IAAI;IACZ,OAAO,MAAM;IACb,SAAS;GACX;GACA,KAAK,aAAa,UAAwB;IACxC,MAAM,OAAO,QAAQ,MAAM,IAAI;IAC/B,IAAI,MAAM,MAAM,IAAI;GACtB;GACA,KAAK,gBAAgB;IACnB,IAAI,SAAS;IACb,QAAQ,CAAC,SAAS,CAAC;IACnB,MAAM;GACR;EACF;EAEA,SAAS,UAAU;GACjB,YAAY;GACZ,OAAO,QAAQ,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC,MACvC,QAAQ;IACP,IAAI,CAAC,SAAS,KAAK,GAAG;GACxB,SAEM;IACJ,IAAI,CAAC,SAAS,MAAM;GACtB,CACF;GACA,QAAQ;EACV;EAEA,QAAQ;EACR,aAAa;GACX,UAAU;GACV,aAAa,KAAK;GAClB,OAAO,UAAU;GACjB,SAAS,MAAM;EACjB;CACF,GAAG,CAAC,QAAQ,cAAc,CAAC;CAE3B,MAAM,QAAQ,OAAyB;EACrC,MAAM,OAAO,OAAO;EACpB,IAAI,MAAM,eAAe,UAAU,MAAM,OAAO;EAChD,KAAK,KAAK,KAAK,UAAU,EAAE,CAAC;EAC5B,OAAO;CACT;CAEA,OAAO;EAAE;EAAM;CAAK;AACtB"}

package/dist/usePolled.js

@@ -0,0 +1,68 @@
+import { ApiError } from "./client.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/usePolled.ts
+/** How often something still moving (a run under way) is read again. */
+const POLL_MS = 3e3;
+/**
+* Reads `load` when `key` changes, and again every `POLL_MS` while `moving` says what it gave is
+* still moving (a run under way). What was read stays while a new read is on its way, so nothing
+* flickers; a 404 reads as gone.
+*/
+function usePolled(load, key, moving) {
+	const [polled, setPolled] = useState({
+		key,
+		value: null,
+		problem: null,
+		gone: false
+	});
+	const latest = useRef({
+		load,
+		moving
+	});
+	useEffect(() => {
+		latest.current = {
+			load,
+			moving
+		};
+	});
+	useEffect(() => {
+		let stopped = false;
+		let timer;
+		const read = async () => {
+			try {
+				const value = await latest.current.load();
+				if (stopped) return;
+				setPolled({
+					key,
+					value,
+					problem: null,
+					gone: false
+				});
+				if (latest.current.moving(value)) timer = setTimeout(() => void read(), POLL_MS);
+			} catch (error) {
+				if (stopped) return;
+				const gone = error instanceof ApiError && error.status === 404;
+				setPolled((last) => ({
+					...last,
+					key,
+					problem: gone ? null : error,
+					gone
+				}));
+			}
+		};
+		read();
+		return () => {
+			stopped = true;
+			clearTimeout(timer);
+		};
+	}, [key]);
+	return polled.key === key ? polled : {
+		value: null,
+		problem: null,
+		gone: false
+	};
+}
+//#endregion
+export { POLL_MS, usePolled };
+
+//# sourceMappingURL=usePolled.js.map

package/dist/usePolled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePolled.js","names":[],"sources":["../src/usePolled.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { ApiError } from \"./client\";\n\n/** What a read gave: the value once it came, why it failed, or that it is no longer there. */\nexport interface Polled<T> {\n  value: T | null;\n  problem: unknown;\n  gone: boolean;\n}\n\n/** How often something still moving (a run under way) is read again. */\nexport const POLL_MS = 3000;\n\n/**\n * Reads `load` when `key` changes, and again every `POLL_MS` while `moving` says what it gave is\n * still moving (a run under way). What was read stays while a new read is on its way, so nothing\n * flickers; a 404 reads as gone.\n */\nexport function usePolled<T>(\n  load: () => Promise<T>,\n  key: string,\n  moving: (value: T) => boolean,\n): Polled<T> {\n  const [polled, setPolled] = useState<Polled<T> & { key: string }>({\n    key,\n    value: null,\n    problem: null,\n    gone: false,\n  });\n  const latest = useRef({ load, moving });\n  useEffect(() => {\n    latest.current = { load, moving };\n  });\n\n  useEffect(() => {\n    let stopped = false;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const read = async () => {\n      try {\n        const value = await latest.current.load();\n        if (stopped) return;\n        setPolled({ key, value, problem: null, gone: false });\n        if (latest.current.moving(value)) timer = setTimeout(() => void read(), POLL_MS);\n      } catch (error) {\n        if (stopped) return;\n        const gone = error instanceof ApiError && error.status === 404;\n        setPolled((last) => ({ ...last, key, problem: gone ? null : error, gone }));\n      }\n    };\n    void read();\n    return () => {\n      stopped = true;\n      clearTimeout(timer);\n    };\n  }, [key]);\n\n  // Another key's value is not this one's: until its own comes, nothing is shown.\n  return polled.key === key ? polled : { value: null, problem: null, gone: false };\n}\n"],"mappings":";;;;AAYA,MAAa,UAAU;;;;;;AAOvB,SAAgB,UACd,MACA,KACA,QACW;CACX,MAAM,CAAC,QAAQ,aAAa,SAAsC;EAChE;EACA,OAAO;EACP,SAAS;EACT,MAAM;CACR,CAAC;CACD,MAAM,SAAS,OAAO;EAAE;EAAM;CAAO,CAAC;CACtC,gBAAgB;EACd,OAAO,UAAU;GAAE;GAAM;EAAO;CAClC,CAAC;CAED,gBAAgB;EACd,IAAI,UAAU;EACd,IAAI;EACJ,MAAM,OAAO,YAAY;GACvB,IAAI;IACF,MAAM,QAAQ,MAAM,OAAO,QAAQ,KAAK;IACxC,IAAI,SAAS;IACb,UAAU;KAAE;KAAK;KAAO,SAAS;KAAM,MAAM;IAAM,CAAC;IACpD,IAAI,OAAO,QAAQ,OAAO,KAAK,GAAG,QAAQ,iBAAiB,KAAK,KAAK,GAAG,OAAO;GACjF,SAAS,OAAO;IACd,IAAI,SAAS;IACb,MAAM,OAAO,iBAAiB,YAAY,MAAM,WAAW;IAC3D,WAAW,UAAU;KAAE,GAAG;KAAM;KAAK,SAAS,OAAO,OAAO;KAAO;IAAK,EAAE;GAC5E;EACF;EACA,KAAU;EACV,aAAa;GACX,UAAU;GACV,aAAa,KAAK;EACpB;CACF,GAAG,CAAC,GAAG,CAAC;CAGR,OAAO,OAAO,QAAQ,MAAM,SAAS;EAAE,OAAO;EAAM,SAAS;EAAM,MAAM;CAAM;AACjF"}

package/dist/voice/Orb.d.ts

@@ -1,11 +1,12 @@
-import type { OrbProps } from "../host.js";
+import { OrbProps } from "./orbs.js";
+//#region src/voice/Orb.d.ts
 /**
- * Our orb, the default of the `Orb` primitive: the `circle` theme of `orb-ui` (MIT, drawn from a
- * signal, so there is no shader of our own to keep), in our colors. The microphone's level drives
- * it while listening and the voice's while speaking.
- *
- * Under `prefers-reduced-motion` the library is not drawn at all: a still disc inside a ring,
- * which says the state by its outline (thin at rest, solid while listening, dashed while
- * thinking, double while speaking) and by the words the window puts under it, never by movement.
+ * The orb of a voice conversation with an agent: a shape that shows where it stands and how loud
+ * it is, in one of two styles (`wave`, the default; `fluid-dots`). Both follow the level while
+ * listening and speaking, rest when nothing happens, and stand still under
+ * `prefers-reduced-motion`, one frame per state. They are shaders: each paints its own colours,
+ * on a transparent canvas. Where WebGL is missing or lost, a still disc in a ring takes its place.
  */
-export declare function Orb({ state, level, size, label, className }: OrbProps): import("react").JSX.Element;
+export declare function Orb({ style, ...props }: OrbProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Orb.d.ts.map

package/dist/voice/Orb.js

@@ -1,42 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Orb as OrbArt } from "orb-ui";
-import { useMemo, useState } from "react";
-import { useParts } from "../SignalcoreProvider.js";
-import { FALLBACK_COLORS, resolveColor } from "./orbColors.js";
-import { useReducedMotion } from "./useReducedMotion.js";
-/** The diameter when the voice window does not say: room for the orb and the glow it gives off. */
-const SIZE = 200;
+import { joined, useParts } from "../kit/context.js";
+import { DEFAULT_ORB } from "./orbs.js";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/voice/Orb.tsx
 /**
- * Our orb, the default of the `Orb` primitive: the `circle` theme of `orb-ui` (MIT, drawn from a
- * signal, so there is no shader of our own to keep), in our colors. The microphone's level drives
- * it while listening and the voice's while speaking.
- *
- * Under `prefers-reduced-motion` the library is not drawn at all: a still disc inside a ring,
- * which says the state by its outline (thin at rest, solid while listening, dashed while
- * thinking, double while speaking) and by the words the window puts under it, never by movement.
- */
-export function Orb({ state, level, size = SIZE, label, className }) {
-    const part = useParts();
-    const still = useReducedMotion();
-    const box = {
-        ...part("orb", [state, still && "still"], className),
-        style: { width: size, height: size },
-    };
-    if (still) {
-        return (_jsxs("div", { role: "img", "aria-label": label, ...box, children: [_jsx("span", { "aria-hidden": true, ...part("orb__ring") }), _jsx("span", { "aria-hidden": true, ...part("orb__core") })] }));
-    }
-    return _jsx(MovingOrb, { box: box, state: state, level: level, size: size, label: label });
+* Each style is a module of its own, loaded when an orb of that style is first drawn: a host that
+* never calls loads none of them, and one that does loads the one it uses (a fragment shader
+* each, and the little WebGL they share).
+*/
+const STYLES = {
+	wave: lazy(() => import("./wave.js")),
+	"fluid-dots": lazy(() => import("./fluidDots.js"))
+};
+/**
+* The orb of a voice conversation with an agent: a shape that shows where it stands and how loud
+* it is, in one of two styles (`wave`, the default; `fluid-dots`). Both follow the level while
+* listening and speaking, rest when nothing happens, and stand still under
+* `prefers-reduced-motion`, one frame per state. They are shaders: each paints its own colours,
+* on a transparent canvas. Where WebGL is missing or lost, a still disc in a ring takes its place.
+*/
+function Orb({ style = DEFAULT_ORB, ...props }) {
+	const Style = STYLES[style] ?? STYLES["wave"];
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Waiting, { ...props }),
+		children: /* @__PURE__ */ jsx(Style, { ...props })
+	});
 }
-function MovingOrb({ box, state, level, size, label, }) {
-    const [stage, setStage] = useState(null);
-    // The library blends colors it is given as hex, so ours are read where the orb stands (our
-    // tokens, the host's, the page's scheme) when the orb is drawn and when its state changes,
-    // which is also when a theme switched in between is picked up.
-    const color = useMemo(() => (stage ? resolveColor(stage, state) : FALLBACK_COLORS[state]), [stage, state]);
-    const theme = useMemo(() => ({ name: "circle", appearance: { colors: { [state]: color } } }), [state, color]);
-    return (_jsx("div", { ref: setStage, ...box, children: _jsx(OrbArt, { signal: {
-                state,
-                inputVolume: state === "listening" ? level : 0,
-                outputVolume: state === "speaking" ? level : 0,
-            }, theme: theme, size: size, role: "img", "aria-label": label }) }));
+/** What stands where the orb will be while its style loads: its box, named, with nothing in it. */
+function Waiting({ state, size = 200, label, className }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": label,
+		part: "orb",
+		className: joined(part("sc-orb", `sc-orb--${state}`, "sc-orb--loading"), className),
+		style: {
+			width: size,
+			height: size
+		}
+	});
 }
+//#endregion
+export { Orb };
+
+//# sourceMappingURL=Orb.js.map

package/dist/voice/Orb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Orb.js","names":[],"sources":["../../src/voice/Orb.tsx"],"sourcesContent":["import { lazy, Suspense, type ComponentType } from \"react\";\n\nimport { joined, useParts } from \"../kit/context\";\nimport { DEFAULT_ORB, ORB_SIZE, type OrbProps, type OrbStyle } from \"./orbs\";\n\n/**\n * Each style is a module of its own, loaded when an orb of that style is first drawn: a host that\n * never calls loads none of them, and one that does loads the one it uses (a fragment shader\n * each, and the little WebGL they share).\n */\nconst STYLES: Readonly<Record<OrbStyle, ComponentType<OrbProps>>> = {\n  wave: lazy(() => import(\"./wave\")),\n  \"fluid-dots\": lazy(() => import(\"./fluidDots\")),\n};\n\n/**\n * The orb of a voice conversation with an agent: a shape that shows where it stands and how loud\n * it is, in one of two styles (`wave`, the default; `fluid-dots`). Both follow the level while\n * listening and speaking, rest when nothing happens, and stand still under\n * `prefers-reduced-motion`, one frame per state. They are shaders: each paints its own colours,\n * on a transparent canvas. Where WebGL is missing or lost, a still disc in a ring takes its place.\n */\nexport function Orb({ style = DEFAULT_ORB, ...props }: OrbProps) {\n  // A style the package does not have (a host's data, say) is drawn as the default.\n  const Style = STYLES[style] ?? STYLES[DEFAULT_ORB];\n  return (\n    <Suspense fallback={<Waiting {...props} />}>\n      <Style {...props} />\n    </Suspense>\n  );\n}\n\n/** What stands where the orb will be while its style loads: its box, named, with nothing in it. */\nfunction Waiting({ state, size = ORB_SIZE, label, className }: Omit<OrbProps, \"style\">) {\n  const part = useParts();\n  return (\n    <div\n      role=\"img\"\n      aria-label={label}\n      part=\"orb\"\n      className={joined(part(\"sc-orb\", `sc-orb--${state}`, \"sc-orb--loading\"), className)}\n      style={{ width: size, height: size }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,SAA8D;CAClE,MAAM,WAAW,OAAO,YAAS;CACjC,cAAc,WAAW,OAAO,iBAAc;AAChD;;;;;;;;AASA,SAAgB,IAAI,EAAE,QAAQ,aAAa,GAAG,SAAmB;CAE/D,MAAM,QAAQ,OAAO,UAAU,OAAA;CAC/B,OACE,oBAAC,UAAD;EAAU,UAAU,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA;EACvC,UAAA,oBAAC,OAAD,EAAO,GAAI,MAAQ,CAAA;CACX,CAAA;AAEd;;AAGA,SAAS,QAAQ,EAAE,OAAO,OAAA,KAAiB,OAAO,aAAsC;CACtF,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,MAAK;EACL,WAAW,OAAO,KAAK,UAAU,WAAW,SAAS,iBAAiB,GAAG,SAAS;EAClF,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CACpC,CAAA;AAEL"}

package/dist/voice/StillOrb.js

@@ -0,0 +1,33 @@
+import { joined, useParts } from "../kit/context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/voice/StillOrb.tsx
+/**
+* An orb that does not move: a disc inside a ring, which says the state by its outline (thin at
+* rest, solid while listening, dashed while thinking, double while speaking) and by the words
+* around it, never by movement. It is what the shader styles are where WebGL is not there (no
+* context, a shader that does not compile, a context the browser took away).
+*/
+function StillOrb({ state, size = 200, label, className }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "img",
+		"aria-label": label,
+		part: "orb",
+		className: joined(part("sc-orb", `sc-orb--${state}`, "sc-orb--still"), className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: part("sc-orb__ring")
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: part("sc-orb__core")
+		})]
+	});
+}
+//#endregion
+export { StillOrb };
+
+//# sourceMappingURL=StillOrb.js.map

package/dist/voice/StillOrb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StillOrb.js","names":[],"sources":["../../src/voice/StillOrb.tsx"],"sourcesContent":["import { joined, useParts } from \"../kit/context\";\nimport { ORB_SIZE, type OrbProps } from \"./orbs\";\n\n/**\n * An orb that does not move: a disc inside a ring, which says the state by its outline (thin at\n * rest, solid while listening, dashed while thinking, double while speaking) and by the words\n * around it, never by movement. It is what the shader styles are where WebGL is not there (no\n * context, a shader that does not compile, a context the browser took away).\n */\nexport function StillOrb({\n  state,\n  size = ORB_SIZE,\n  label,\n  className,\n}: Pick<OrbProps, \"state\" | \"size\" | \"label\" | \"className\">) {\n  const part = useParts();\n  return (\n    <div\n      role=\"img\"\n      aria-label={label}\n      part=\"orb\"\n      className={joined(part(\"sc-orb\", `sc-orb--${state}`, \"sc-orb--still\"), className)}\n      style={{ width: size, height: size }}\n    >\n      <span aria-hidden className={part(\"sc-orb__ring\")} />\n      <span aria-hidden className={part(\"sc-orb__core\")} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,SAAS,EACvB,OACA,OAAA,KACA,OACA,aAC2D;CAC3D,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,MAAK;EACL,WAAW,OAAO,KAAK,UAAU,WAAW,SAAS,eAAe,GAAG,SAAS;EAChF,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EALrC,UAAA,CAOE,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,KAAK,cAAc;EAAI,CAAA,GACpD,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,KAAK,cAAc;EAAI,CAAA,CACjD;;AAET"}

package/dist/voice/WebGLOrb.js

@@ -0,0 +1,98 @@
+import { joined, useParts } from "../kit/context.js";
+import { animate, drawStill, motionOf } from "./motion.js";
+import { StillOrb } from "./StillOrb.js";
+import { useReducedMotion } from "./useReducedMotion.js";
+import { createRenderer, inkOf } from "./webgl.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/voice/WebGLOrb.tsx
+/** The canvas is drawn at this fraction of its size and scaled up by the browser: the shaders are soft. */
+const RENDER_SCALE = .75;
+/** The level as it is now: given, or read off its meter. */
+const read = (level) => typeof level === "function" ? level() : level;
+/**
+* The body both shader styles share: a box that carries the orb's name and a canvas the shader
+* paints on, frame by frame, from refs. Nothing here renders again in React for a frame: the level
+* and the state are read by the loop (`animate`) when a frame is due.
+*
+* The loop runs only while something moves. It asks for no frame while the tab is hidden, and
+* stops three seconds after the state became `idle`; a new state, the tab coming back or a new
+* size starts it again. Under `prefers-reduced-motion` there is no loop at all: one frame per
+* state, at a fixed moment. Where WebGL is missing, the shader does not compile or the browser
+* takes the context away, the orb is the still one, with the same name. A host's colour
+* (`--sc-orb-color`) is read off the canvas with each state, and the shader paints in it.
+*/
+function WebGLOrb({ shader, state, level, size = 200, label, className }) {
+	const part = useParts();
+	const still = useReducedMotion();
+	const [broken, setBroken] = useState(false);
+	const surface = useRef(null);
+	const renderer = useRef(void 0);
+	const loud = useRef(level);
+	const motion = useRef(null);
+	useEffect(() => {
+		loud.current = level;
+	});
+	useEffect(() => {
+		const canvas = surface.current;
+		if (!canvas) return void 0;
+		const made = createRenderer(canvas, shader.fragment, Math.round(size * RENDER_SCALE), () => {
+			setBroken(true);
+		});
+		if (!made) {
+			setBroken(true);
+			return;
+		}
+		renderer.current = made;
+		return () => {
+			made.dispose();
+			renderer.current = void 0;
+		};
+	}, [shader, size]);
+	useEffect(() => {
+		const gl = renderer.current;
+		const canvas = surface.current;
+		if (!gl || !canvas || broken) return void 0;
+		gl.ink(inkOf(canvas));
+		if (still) {
+			drawStill(gl, state);
+			return;
+		}
+		motion.current ??= motionOf(state, read(loud.current));
+		return animate(gl, shader, state, () => read(loud.current), motion.current);
+	}, [
+		broken,
+		shader,
+		size,
+		state,
+		still
+	]);
+	if (broken) return /* @__PURE__ */ jsx(StillOrb, {
+		state,
+		size,
+		label,
+		className
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": label,
+		part: "orb",
+		className: joined(part("sc-orb", `sc-orb--${state}`, ...still ? ["sc-orb--still"] : []), className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: /* @__PURE__ */ jsx("canvas", {
+			ref: surface,
+			"aria-hidden": true,
+			style: {
+				width: size,
+				height: size
+			}
+		})
+	});
+}
+//#endregion
+export { WebGLOrb };
+
+//# sourceMappingURL=WebGLOrb.js.map

package/dist/voice/WebGLOrb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGLOrb.js","names":[],"sources":["../../src/voice/WebGLOrb.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { joined, useParts } from \"../kit/context\";\nimport { animate, drawStill, motionOf, type Motion } from \"./motion\";\nimport { ORB_SIZE, type OrbProps } from \"./orbs\";\nimport { StillOrb } from \"./StillOrb\";\nimport { useReducedMotion } from \"./useReducedMotion\";\nimport { createRenderer, inkOf, type Renderer, type Shader } from \"./webgl\";\n\n/** The canvas is drawn at this fraction of its size and scaled up by the browser: the shaders are soft. */\nconst RENDER_SCALE = 0.75;\n\n/** The level as it is now: given, or read off its meter. */\nconst read = (level: OrbProps[\"level\"]): number => (typeof level === \"function\" ? level() : level);\n\ntype WebGLOrbProps = Omit<OrbProps, \"style\"> & { shader: Shader };\n\n/**\n * The body both shader styles share: a box that carries the orb's name and a canvas the shader\n * paints on, frame by frame, from refs. Nothing here renders again in React for a frame: the level\n * and the state are read by the loop (`animate`) when a frame is due.\n *\n * The loop runs only while something moves. It asks for no frame while the tab is hidden, and\n * stops three seconds after the state became `idle`; a new state, the tab coming back or a new\n * size starts it again. Under `prefers-reduced-motion` there is no loop at all: one frame per\n * state, at a fixed moment. Where WebGL is missing, the shader does not compile or the browser\n * takes the context away, the orb is the still one, with the same name. A host's colour\n * (`--sc-orb-color`) is read off the canvas with each state, and the shader paints in it.\n */\nexport function WebGLOrb({\n  shader,\n  state,\n  level,\n  size = ORB_SIZE,\n  label,\n  className,\n}: WebGLOrbProps) {\n  const part = useParts();\n  const still = useReducedMotion();\n  const [broken, setBroken] = useState(false);\n  const surface = useRef<HTMLCanvasElement>(null);\n  const renderer = useRef<Renderer | undefined>(undefined);\n  const loud = useRef(level);\n  const motion = useRef<Motion | null>(null);\n\n  useEffect(() => {\n    loud.current = level;\n  });\n\n  // The program is made when the orb appears (once for its shader and size), not for each state.\n  useEffect(() => {\n    const canvas = surface.current;\n    if (!canvas) return undefined;\n    const made = createRenderer(canvas, shader.fragment, Math.round(size * RENDER_SCALE), () => {\n      setBroken(true);\n    });\n    if (!made) {\n      setBroken(true);\n      return undefined;\n    }\n    renderer.current = made;\n    return () => {\n      made.dispose();\n      renderer.current = undefined;\n    };\n  }, [shader, size]);\n\n  useEffect(() => {\n    const gl = renderer.current;\n    const canvas = surface.current;\n    if (!gl || !canvas || broken) return undefined;\n    // The host's colour (`--sc-orb-color`), read again with each state: a theme changed since\n    // shows by the next one.\n    gl.ink(inkOf(canvas));\n    if (still) {\n      drawStill(gl, state);\n      return undefined;\n    }\n    motion.current ??= motionOf(state, read(loud.current));\n    return animate(gl, shader, state, () => read(loud.current), motion.current);\n  }, [broken, shader, size, state, still]);\n\n  if (broken) return <StillOrb state={state} size={size} label={label} className={className} />;\n  return (\n    <div\n      role=\"img\"\n      aria-label={label}\n      part=\"orb\"\n      className={joined(\n        part(\"sc-orb\", `sc-orb--${state}`, ...(still ? ([\"sc-orb--still\"] as const) : [])),\n        className,\n      )}\n      style={{ width: size, height: size }}\n    >\n      <canvas ref={surface} aria-hidden style={{ width: size, height: size }} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe;;AAGrB,MAAM,QAAQ,UAAsC,OAAO,UAAU,aAAa,MAAM,IAAI;;;;;;;;;;;;;AAgB5F,SAAgB,SAAS,EACvB,QACA,OACA,OACA,OAAA,KACA,OACA,aACgB;CAChB,MAAM,OAAO,SAAS;CACtB,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,WAAW,OAA6B,KAAA,CAAS;CACvD,MAAM,OAAO,OAAO,KAAK;CACzB,MAAM,SAAS,OAAsB,IAAI;CAEzC,gBAAgB;EACd,KAAK,UAAU;CACjB,CAAC;CAGD,gBAAgB;EACd,MAAM,SAAS,QAAQ;EACvB,IAAI,CAAC,QAAQ,OAAO,KAAA;EACpB,MAAM,OAAO,eAAe,QAAQ,OAAO,UAAU,KAAK,MAAM,OAAO,YAAY,SAAS;GAC1F,UAAU,IAAI;EAChB,CAAC;EACD,IAAI,CAAC,MAAM;GACT,UAAU,IAAI;GACd;EACF;EACA,SAAS,UAAU;EACnB,aAAa;GACX,KAAK,QAAQ;GACb,SAAS,UAAU,KAAA;EACrB;CACF,GAAG,CAAC,QAAQ,IAAI,CAAC;CAEjB,gBAAgB;EACd,MAAM,KAAK,SAAS;EACpB,MAAM,SAAS,QAAQ;EACvB,IAAI,CAAC,MAAM,CAAC,UAAU,QAAQ,OAAO,KAAA;EAGrC,GAAG,IAAI,MAAM,MAAM,CAAC;EACpB,IAAI,OAAO;GACT,UAAU,IAAI,KAAK;GACnB;EACF;EACA,OAAO,YAAY,SAAS,OAAO,KAAK,KAAK,OAAO,CAAC;EACrD,OAAO,QAAQ,IAAI,QAAQ,aAAa,KAAK,KAAK,OAAO,GAAG,OAAO,OAAO;CAC5E,GAAG;EAAC;EAAQ;EAAQ;EAAM;EAAO;CAAK,CAAC;CAEvC,IAAI,QAAQ,OAAO,oBAAC,UAAD;EAAiB;EAAa;EAAa;EAAkB;CAAY,CAAA;CAC5F,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,MAAK;EACL,WAAW,OACT,KAAK,UAAU,WAAW,SAAS,GAAI,QAAS,CAAC,eAAe,IAAc,CAAC,CAAE,GACjF,SACF;EACA,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;EAEnC,UAAA,oBAAC,UAAD;GAAQ,KAAK;GAAS,eAAA;GAAY,OAAO;IAAE,OAAO;IAAM,QAAQ;GAAK;EAAI,CAAA;CACtE,CAAA;AAET"}