@seams/voiceid 0.0.0-stage → 0.24.0

package/dist/esm/react/VoiceAssistantCard.css

@@ -0,0 +1,313 @@
+.voice-assistant-card {
+  --voice-surface: #1d1d1d;
+  --voice-foreground: #f2f2f2;
+  --voice-muted: rgb(202 202 202 / 70%);
+  --voice-bubble: #303030;
+  --voice-divider: rgb(255 255 255 / 4%);
+  --voice-button: rgb(255 255 255 / 10%);
+  --voice-button-shadow:
+    0 1px 1px rgb(0 0 0 / 24%), inset 0 0 0 1px rgb(255 255 255 / 4%),
+    inset 0 1px 0 rgb(255 255 255 / 6%);
+  display: grid;
+  inline-size: 360px;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  border-radius: 24px;
+  background: var(--voice-surface);
+  color: var(--voice-foreground);
+  font: 400 14px / 20px var(--seams-fonts-sans, Inter, system-ui, sans-serif);
+  -webkit-font-smoothing: antialiased;
+  color-scheme: dark;
+}
+
+.voice-assistant-card[data-theme='light'] {
+  --voice-surface: #fff;
+  --voice-foreground: #0d0d0d;
+  --voice-muted: #6c6c6c;
+  --voice-bubble: #f0f0f0;
+  --voice-divider: rgb(0 0 0 / 4%);
+  --voice-button: rgb(255 255 255 / 40%);
+  --voice-button-shadow:
+    0 1px 3px rgb(0 0 0 / 4%), inset 0 0 0 1px rgb(0 0 0 / 8%), inset 0 -1px 0 rgb(0 0 0 / 8%);
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 4%),
+    0 8px 32px -4px rgb(0 0 0 / 6%),
+    0 1px 3px rgb(0 0 0 / 4%);
+  color-scheme: light;
+}
+
+.voice-assistant-card,
+.voice-assistant-card * {
+  box-sizing: border-box;
+}
+
+.voice-assistant-beam {
+  margin: -1px;
+  border-radius: 25px;
+  min-inline-size: 0;
+}
+
+.voice-assistant-content {
+  position: relative;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  min-block-size: 342px;
+  border-radius: 25px;
+}
+
+.voice-assistant-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+}
+
+.voice-assistant-avatar {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: 32px;
+  block-size: 32px;
+  border-radius: 50%;
+  background: #27272e;
+  color: #e6dfec;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.voice-assistant-card[data-theme='light'] .voice-assistant-avatar {
+  background: #eee9f2;
+  color: #37364f;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 2%);
+}
+
+.voice-assistant-identity {
+  min-inline-size: 0;
+}
+
+.voice-assistant-identity h2,
+.voice-assistant-identity p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.voice-assistant-identity h2 {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.voice-assistant-identity p {
+  color: var(--voice-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.voice-assistant-divider {
+  flex: none;
+  block-size: 1px;
+  background: linear-gradient(90deg, transparent, var(--voice-divider) 20% 80%, transparent);
+}
+
+.voice-assistant-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 24px 0;
+  overflow-wrap: anywhere;
+}
+
+.voice-assistant-bubble-row {
+  padding-inline-start: 8px;
+  animation: voice-assistant-float 4s ease-in-out infinite;
+}
+
+.voice-assistant-bubble {
+  position: relative;
+  display: inline-block;
+  max-inline-size: 240px;
+  margin: 0;
+  padding: 8px 12px;
+  border-radius: 18px;
+  background: var(--voice-bubble);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.voice-assistant-bubble span {
+  position: relative;
+  z-index: 1;
+}
+
+.voice-assistant-bubble::before {
+  content: '';
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: -7px;
+  inline-size: 20px;
+  block-size: 20px;
+  border-end-end-radius: 16px 14px;
+  background: var(--voice-bubble);
+}
+
+.voice-assistant-bubble::after {
+  content: '';
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: -26px;
+  inline-size: 26px;
+  block-size: 20px;
+  border-end-end-radius: 10px;
+  background: var(--voice-surface);
+}
+
+.voice-assistant-transcript {
+  padding-inline-start: 32px;
+  text-align: end;
+  text-wrap: pretty;
+}
+
+.voice-assistant-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-block-start: auto;
+  padding: 24px;
+}
+
+.voice-assistant-caption {
+  display: grid;
+  color: var(--voice-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.voice-assistant-caption > span {
+  grid-area: 1 / 1;
+  text-align: center;
+  opacity: 0;
+  transform: translateY(4px);
+  transition:
+    opacity var(--seams-voice-transition, 150ms ease-out),
+    transform var(--seams-voice-transition, 150ms ease-out);
+}
+
+.voice-assistant-caption > span[data-visible='true'] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.voice-assistant-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.voice-assistant-mic {
+  display: grid;
+  place-items: center;
+  inline-size: 48px;
+  block-size: 48px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--voice-button);
+  box-shadow: var(--voice-button-shadow);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  transition: transform var(--seams-voice-transition, 150ms ease-out);
+}
+
+.voice-assistant-mic:active {
+  transform: scale(0.95);
+}
+
+.voice-assistant-mic:focus-visible {
+  outline: 2px solid var(--voice-foreground);
+  outline-offset: 3px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .voice-assistant-mic:hover {
+    background-image: linear-gradient(rgb(128 128 128 / 4%) 0 100%);
+  }
+}
+
+.voice-assistant-wave {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  block-size: 20px;
+}
+
+.voice-assistant-wave i {
+  inline-size: 2px;
+  block-size: 6px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+.voice-assistant-wave i:nth-child(2),
+.voice-assistant-wave i:nth-child(4) {
+  block-size: 12px;
+}
+
+.voice-assistant-wave i:nth-child(3) {
+  block-size: 18px;
+}
+
+.voice-assistant-card[data-state='listening'] .voice-assistant-wave i {
+  animation: voice-assistant-wave 900ms ease-in-out infinite;
+}
+
+.voice-assistant-wave i:nth-child(2) {
+  animation-delay: -270ms;
+}
+
+.voice-assistant-wave i:nth-child(3) {
+  animation-delay: -540ms;
+}
+
+.voice-assistant-wave i:nth-child(4) {
+  animation-delay: -135ms;
+}
+
+.voice-assistant-wave i:nth-child(5) {
+  animation-delay: -405ms;
+}
+
+@keyframes voice-assistant-wave {
+  50% {
+    transform: scaleY(0.35);
+  }
+}
+
+@keyframes voice-assistant-float {
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .voice-assistant-bubble-row,
+  .voice-assistant-card[data-state='listening'] .voice-assistant-wave i {
+    animation: none;
+  }
+
+  .voice-assistant-caption > span,
+  .voice-assistant-mic {
+    transition: none;
+    transform: none;
+  }
+}

package/dist/esm/react/VoiceAssistantCard.js

@@ -0,0 +1,147 @@
+import { VoiceBeam } from "voice-glow";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/VoiceAssistantCard.tsx
+/** Controlled presentation. The caller owns audio, transcripts, and work. */
+function VoiceAssistantCard(props) {
+	const titleId = React.useId();
+	const drive = beamDrive(props.state);
+	const listening = props.state.kind === "listening";
+	return /* @__PURE__ */ jsx("section", {
+		className: `voice-assistant-card ${props.className ?? ""}`,
+		style: props.style,
+		"data-theme": props.theme,
+		"data-state": props.state.kind,
+		"aria-labelledby": titleId,
+		children: /* @__PURE__ */ jsx(VoiceBeam, {
+			className: "voice-assistant-beam",
+			theme: props.theme,
+			level: drive.level,
+			stream: drive.stream,
+			processing: drive.processing,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "voice-assistant-content",
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "voice-assistant-header",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "voice-assistant-avatar",
+							"aria-hidden": "true",
+							children: props.initials
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "voice-assistant-identity",
+							children: [/* @__PURE__ */ jsx("h2", {
+								id: titleId,
+								children: props.name
+							}), /* @__PURE__ */ jsx("p", { children: props.description })]
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "voice-assistant-divider",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "voice-assistant-body",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "voice-assistant-bubble-row",
+							children: /* @__PURE__ */ jsx("p", {
+								className: "voice-assistant-bubble",
+								children: /* @__PURE__ */ jsx("span", { children: props.message })
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "voice-assistant-transcript",
+							children: props.transcript
+						})]
+					}),
+					/* @__PURE__ */ jsxs("footer", {
+						className: "voice-assistant-footer",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "voice-assistant-caption",
+								"aria-hidden": "true",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										"data-visible": props.state.kind === "idle",
+										children: "Tap to speak"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										"data-visible": listening,
+										children: "Listening…"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										"data-visible": props.state.kind === "processing",
+										children: "One moment"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "voice-assistant-status",
+								role: "status",
+								children: stateCaption(props.state)
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "voice-assistant-mic",
+								"aria-label": listening ? "Stop speaking" : "Start speaking",
+								"aria-pressed": listening,
+								onClick: props.onToggle,
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "voice-assistant-wave",
+									"aria-hidden": "true",
+									children: [
+										/* @__PURE__ */ jsx("i", {}),
+										/* @__PURE__ */ jsx("i", {}),
+										/* @__PURE__ */ jsx("i", {}),
+										/* @__PURE__ */ jsx("i", {}),
+										/* @__PURE__ */ jsx("i", {})
+									]
+								})
+							})
+						]
+					})
+				]
+			})
+		})
+	});
+}
+function stateCaption(state) {
+	switch (state.kind) {
+		case "idle": return "Tap to speak";
+		case "listening": return "Listening…";
+		case "processing": return "One moment";
+		default: return assertNeverVoiceAssistantVariant(state);
+	}
+}
+function beamDrive(state) {
+	switch (state.kind) {
+		case "idle": return {
+			level: .06,
+			stream: null,
+			processing: false
+		};
+		case "processing": return {
+			level: .06,
+			stream: null,
+			processing: true
+		};
+		case "listening": switch (state.input.kind) {
+			case "level": return {
+				level: state.input.level,
+				stream: null,
+				processing: false
+			};
+			case "microphone": return {
+				level: 0,
+				stream: state.input.stream,
+				processing: false
+			};
+			default: return assertNeverVoiceAssistantVariant(state.input);
+		}
+		default: return assertNeverVoiceAssistantVariant(state);
+	}
+}
+function assertNeverVoiceAssistantVariant(value) {
+	throw new Error(`Unexpected voice assistant variant: ${String(value)}`);
+}
+//#endregion
+export { VoiceAssistantCard };

package/dist/esm/react.js

@@ -0,0 +1,3 @@
+import { VoiceAssistantCard } from "./react/VoiceAssistantCard.js";
+import { VoiceBeam } from "voice-glow";
+export { VoiceAssistantCard, VoiceBeam };

package/dist/hosting.d.mts

@@ -0,0 +1,4 @@
+export function composeVoiceIdWalletAssets(input: {
+  walletPublicDirectory: string;
+  outputDirectory: string;
+}): Promise<string>;

package/dist/hosting.mjs

@@ -0,0 +1,91 @@
+import { access, cp, mkdir, readFile, readdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const voicePublic = fileURLToPath(new URL('./public/', import.meta.url));
+
+/** Compose a new deployment directory without changing either source asset tree. */
+export async function composeVoiceIdWalletAssets({ walletPublicDirectory, outputDirectory }) {
+  const walletPublic = path.resolve(walletPublicDirectory);
+  const output = path.resolve(outputDirectory);
+  if (
+    containsPath(walletPublic, output) ||
+    containsPath(voicePublic, output) ||
+    containsPath(output, walletPublic) ||
+    containsPath(output, voicePublic)
+  ) {
+    throw new Error('Compose VoiceID into a separate deployment directory.');
+  }
+  await access(path.join(walletPublic, 'sdk/voiceid-host.js'));
+  const manifest = JSON.parse(
+    await readFile(path.join(walletPublic, 'wallet-assets.manifest.json'), 'utf8'),
+  );
+  if (
+    manifest.schemaVersion !== 1 ||
+    manifest.packageName !== '@seams/wallet' ||
+    !Array.isArray(manifest.assets)
+  ) {
+    throw new Error('Expected the static asset manifest from a compatible @seams/wallet package.');
+  }
+  // An existing directory is never overwritten, including either package's dist tree.
+  await mkdir(output);
+  for (const entry of await readdir(walletPublic)) {
+    await cp(path.join(walletPublic, entry), path.join(output, entry), {
+      recursive: true,
+      force: false,
+      errorOnExist: true,
+    });
+  }
+  await cp(path.join(voicePublic, 'sdk/voiceid'), path.join(output, 'sdk/voiceid'), {
+    recursive: true,
+    force: false,
+    errorOnExist: true,
+  });
+  const voiceFiles = await readdir(path.join(voicePublic, 'sdk/voiceid'));
+  for (const filename of voiceFiles) manifest.assets.push(assetEntry(filename));
+  manifest.assets.sort(compareAssets);
+  await writeFile(
+    path.join(output, 'wallet-assets.manifest.json'),
+    JSON.stringify(manifest, null, 2) + '\n',
+  );
+  return output;
+}
+
+function containsPath(parent, child) {
+  const relative = path.relative(parent, child);
+  return relative === '' || (
+    relative !== '..' && !relative.startsWith(`..${path.sep}`) && !path.isAbsolute(relative)
+  );
+}
+
+function compareAssets(left, right) {
+  return left.sourceFile.localeCompare(right.sourceFile);
+}
+
+function assetEntry(filename) {
+  const sourceFile = `sdk/voiceid/${filename}`;
+  const extension = path.extname(filename);
+  let routeClass = 'binary';
+  let contentType = 'application/octet-stream';
+  if (extension === '.js' || extension === '.mjs') {
+    routeClass = 'javascript';
+    contentType = 'text/javascript; charset=utf-8';
+  } else if (extension === '.wasm') {
+    routeClass = 'wasm';
+    contentType = 'application/wasm';
+  }
+  const cachePolicy = 'public, max-age=300, must-revalidate';
+  return {
+    route: `/${sourceFile}`,
+    sourceFile,
+    owner: 'wallet_sdk_asset',
+    routeClass,
+    contentType,
+    cachePolicy,
+    requiredHeaders: [
+      { name: 'Content-Type', value: contentType },
+      { name: 'Cache-Control', value: cachePolicy },
+      { name: 'Access-Control-Allow-Origin', value: '*' },
+    ],
+  };
+}