@withpotter/components 0.13.0-next.101

package/dist/voice/voice-composer.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { Mic, Square, Trash2, TriangleAlert } from "lucide-react";
+import { durations, eases, springs, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import {
+  LIVE_PEAK_COUNT
+} from "@withpotter/hooks/use-voice-recorder";
+import { Waveform } from "./waveform";
+import { TranscriptPlayer } from "@withpotter/ui-kit/transcript-player";
+function clock(total) {
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+function VoiceComposer({
+  recorder,
+  disabled,
+  hint
+}) {
+  const { state, recording, start, discard, reset, isBusy } = recorder;
+  if (state === "unsupported") return null;
+  return /* @__PURE__ */ jsx("div", { className: "rounded-ios-md border border-[var(--border-default)] bg-[var(--bg-subtle)] px-3 py-3", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: state === "recorded" && recording ? /* @__PURE__ */ jsx(
+    ClipRow,
+    {
+      recording,
+      onDiscard: discard,
+      disabled
+    },
+    "clip"
+  ) : state === "denied" || state === "failed" ? /* @__PURE__ */ jsx(ProblemRow, { kind: state, onRetry: reset }, "problem") : /* @__PURE__ */ jsx(
+    IdleRow,
+    {
+      busy: isBusy || state === "recording",
+      disabled,
+      hint,
+      onStart: () => void start()
+    },
+    "idle"
+  ) }) });
+}
+function VoiceDock({ recorder }) {
+  const { state, seconds, livePeaksRef, stop, discard, maxSeconds } = recorder;
+  const active = state === "recording" || state === "stopping";
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: active && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 24 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 24 },
+      transition: springs.gentle,
+      className: "fixed inset-x-0 bottom-0 z-[60] flex justify-center p-4",
+      style: { paddingBottom: "max(1rem, env(safe-area-inset-bottom))" },
+      children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto w-full max-w-lg rounded-2xl border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-3 shadow-[var(--shadow-lg)]", children: [
+        /* @__PURE__ */ jsx(
+          RecordingRow,
+          {
+            seconds,
+            maxSeconds,
+            peaksRef: livePeaksRef,
+            onStop: stop,
+            onDiscard: discard,
+            stopping: state === "stopping"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 px-1 text-center text-2xs text-[var(--text-tertiary)]", children: "Go ahead \u2014 the screen stays visible while you talk." })
+      ] })
+    }
+  ) });
+}
+const row = {
+  initial: { opacity: 0, y: 4 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -4 },
+  transition: { duration: durations.normal, ease: eases.quart }
+};
+function IdleRow({
+  onStart,
+  busy,
+  disabled,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      ...row,
+      type: "button",
+      onClick: onStart,
+      disabled: busy || disabled,
+      className: "group flex w-full items-center gap-3 text-left disabled:opacity-60",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--bg-muted)] text-[var(--text-secondary)] transition-colors group-hover:bg-[var(--interactive-active)] group-hover:text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(Mic, { className: "h-[17px] w-[17px]" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-[var(--text-primary)]", children: busy ? "Waiting for the microphone\u2026" : "Record a voice note" }),
+          /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-tertiary)]", children: busy ? "Allow access to start" : hint ?? "Easier than typing it out. We listen and reply by email." })
+        ] })
+      ]
+    }
+  );
+}
+function RecordingRow({
+  seconds,
+  maxSeconds,
+  peaksRef,
+  onStop,
+  onDiscard,
+  stopping
+}) {
+  const left = maxSeconds - seconds;
+  const endingSoon = left <= 15;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onDiscard,
+        "aria-label": "Discard recording",
+        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-active)] hover:text-[var(--text-primary)]",
+        children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "h-2 w-2 shrink-0 rounded-full bg-[var(--error)] motion-safe:animate-pulse",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+      Waveform,
+      {
+        peaks: peaksRef,
+        slots: LIVE_PEAK_COUNT,
+        color: "var(--error)",
+        height: 30
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `shrink-0 font-mono text-sm tabular-nums transition-colors ${endingSoon ? "text-[var(--error)]" : "text-[var(--text-primary)]"}`,
+        "aria-live": "off",
+        children: endingSoon ? `${left}s left` : clock(seconds)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        type: "button",
+        onClick: onStop,
+        disabled: stopping,
+        "aria-label": "Stop recording",
+        whileTap: { scale: PRESS_SCALE_LARGE },
+        transition: springs.snappy,
+        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--error)] text-white disabled:opacity-70",
+        children: /* @__PURE__ */ jsx(Square, { className: "fill-current" })
+      }
+    )
+  ] });
+}
+function ClipRow({
+  recording,
+  onDiscard,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(motion.div, { ...row, children: /* @__PURE__ */ jsx(
+    TranscriptPlayer,
+    {
+      url: recording.url,
+      seconds: recording.seconds,
+      peaks: recording.peaks,
+      onDiscard: disabled ? void 0 : onDiscard
+    }
+  ) });
+}
+function ProblemRow({
+  kind,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs(motion.div, { ...row, className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "mt-[2px] flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--bg-muted)] text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-[17px] w-[17px]" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: kind === "denied" ? "Box can\u2019t reach your microphone" : "That recording didn\u2019t start" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-[var(--text-tertiary)]", children: kind === "denied" ? "Allow microphone access for this site in your browser settings, then try again. You can type your message instead." : "Something else may be using the microphone. You can try again, or type your message instead." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "mt-2 text-xs font-medium text-[var(--accent-primary)] hover:underline",
+          children: "Try again"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  RecordingRow,
+  VoiceComposer,
+  VoiceDock
+};
+//# sourceMappingURL=voice-composer.js.map

package/dist/voice/voice-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/voice/voice-composer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { Mic, Pause, Play, Square, Trash2, TriangleAlert } from 'lucide-react';\nimport { durations, eases, springs, PRESS_SCALE_LARGE } from '@withpotter/lib/motion';\nimport {\n  CLIP_PEAK_COUNT,\n  LIVE_PEAK_COUNT,\n  useVoiceRecorder,\n  type VoiceRecording,\n} from '@withpotter/hooks/use-voice-recorder';\nimport { Waveform } from './waveform';\nimport { TranscriptPlayer } from '@withpotter/ui-kit/transcript-player';\n\n/**\n * Say it instead of typing it.\n *\n * One control that changes shape rather than three that swap places: the mic\n * becomes the recorder becomes the clip, in the same slot, at the same height.\n * Nothing below it moves while a merchant is mid-sentence.\n *\n * The strip is driven by the microphone, not by a keyframe. That matters for a\n * reason beyond polish: a decorative animation looks identical whether the mic\n * is picking you up or the phone is face-down on the counter, and someone who\n * has just recorded ninety seconds of silence has no way to know until support\n * writes back. Bars that only move when you speak are the feedback.\n */\n\nfunction clock(total: number): string {\n  const m = Math.floor(total / 60);\n  const s = total % 60;\n  return `${m}:${String(s).padStart(2, '0')}`;\n}\n\nexport type Recorder = ReturnType<typeof useVoiceRecorder>;\n\n/**\n * The recorder lives in the widget, not in here.\n *\n * Recording has to survive the dialog closing — while you are talking, the\n * sheet gets out of the way so you can see the screen you are describing, and\n * Radix unmounts dialog content when it closes. If the hook lived in this\n * component, that unmount would run its cleanup and kill the microphone\n * mid-sentence. So the hook is owned above and these are views over it.\n */\ninterface VoiceComposerProps {\n  recorder: Recorder;\n  disabled?: boolean;\n  /**\n   * The line under \"Record a voice note\". Defaults to the sheet's wording,\n   * which promises a reply — pass something truthful anywhere nobody is going\n   * to write back. See `IdleRow`.\n   */\n  hint?: string;\n}\n\n/** The panel form: sits under the message box inside the sheet. */\nexport function VoiceComposer({\n  recorder,\n  disabled,\n  hint,\n}: VoiceComposerProps) {\n  const { state, recording, start, discard, reset, isBusy } = recorder;\n\n  if (state === 'unsupported') return null;\n\n  return (\n    <div className=\"rounded-ios-md border border-[var(--border-default)] bg-[var(--bg-subtle)] px-3 py-3\">\n      <AnimatePresence mode=\"wait\" initial={false}>\n        {state === 'recorded' && recording ? (\n          <ClipRow\n            key=\"clip\"\n            recording={recording}\n            onDiscard={discard}\n            disabled={disabled}\n          />\n        ) : state === 'denied' || state === 'failed' ? (\n          <ProblemRow key=\"problem\" kind={state} onRetry={reset} />\n        ) : (\n          <IdleRow\n            key=\"idle\"\n            busy={isBusy || state === 'recording'}\n            disabled={disabled}\n            hint={hint}\n            onStart={() => void start()}\n          />\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\n/**\n * The docked form: a bar pinned to the bottom of the viewport while recording,\n * with the sheet closed behind it.\n *\n * A modal is the right container for composing a written message and the wrong\n * one for recording. The most useful voice note a merchant sends is the one\n * recorded while looking at the thing that is broken — \"this order won't let\n * me refund it\" is a different message when the order is on screen. A dialog\n * covers exactly the context being described.\n */\nexport function VoiceDock({ recorder }: { recorder: Recorder }) {\n  const { state, seconds, livePeaksRef, stop, discard, maxSeconds } = recorder;\n  const active = state === 'recording' || state === 'stopping';\n\n  return (\n    <AnimatePresence>\n      {active && (\n        <motion.div\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: 24 }}\n          transition={springs.gentle}\n          className=\"fixed inset-x-0 bottom-0 z-[60] flex justify-center p-4\"\n          style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}\n        >\n          <div className=\"pointer-events-auto w-full max-w-lg rounded-2xl border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-3 shadow-[var(--shadow-lg)]\">\n            <RecordingRow\n              seconds={seconds}\n              maxSeconds={maxSeconds}\n              peaksRef={livePeaksRef}\n              onStop={stop}\n              onDiscard={discard}\n              stopping={state === 'stopping'}\n            />\n            <p className=\"mt-2 px-1 text-center text-2xs text-[var(--text-tertiary)]\">\n              Go ahead — the screen stays visible while you talk.\n            </p>\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nconst row = {\n  initial: { opacity: 0, y: 4 },\n  animate: { opacity: 1, y: 0 },\n  exit: { opacity: 0, y: -4 },\n  transition: { duration: durations.normal, ease: eases.quart },\n};\n\nfunction IdleRow({\n  onStart,\n  busy,\n  disabled,\n  hint,\n}: {\n  onStart: () => void;\n  busy: boolean;\n  disabled?: boolean;\n  /**\n   * The line under \"Record a voice note\".\n   *\n   * Overridable because the default PROMISES A REPLY — true of the feedback\n   * sheet, which files a ticket a person answers, and false of a thumb on a\n   * help answer, where nobody is going to write back. A recorder that says\n   * \"we reply by email\" wherever it is dropped makes a promise the surface\n   * cannot keep, and the merchant only finds out by waiting.\n   */\n  hint?: string;\n}) {\n  return (\n    <motion.button\n      {...row}\n      type=\"button\"\n      onClick={onStart}\n      disabled={busy || disabled}\n      className=\"group flex w-full items-center gap-3 text-left disabled:opacity-60\"\n    >\n      <span className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--bg-muted)] text-[var(--text-secondary)] transition-colors group-hover:bg-[var(--interactive-active)] group-hover:text-[var(--text-primary)]\">\n        <Mic className=\"h-[17px] w-[17px]\" />\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-sm font-medium text-[var(--text-primary)]\">\n          {busy ? 'Waiting for the microphone…' : 'Record a voice note'}\n        </span>\n        <span className=\"block text-xs text-[var(--text-tertiary)]\">\n          {busy\n            ? 'Allow access to start'\n            : (hint ??\n              'Easier than typing it out. We listen and reply by email.')}\n        </span>\n      </span>\n    </motion.button>\n  );\n}\n\nexport function RecordingRow({\n  seconds,\n  maxSeconds,\n  peaksRef,\n  onStop,\n  onDiscard,\n  stopping,\n}: {\n  seconds: number;\n  maxSeconds: number;\n  peaksRef: { current: number[] };\n  onStop: () => void;\n  onDiscard: () => void;\n  stopping: boolean;\n}) {\n  // Only surfaced once it means something: a countdown running from two\n  // minutes is noise, but being cut off mid-sentence with no warning is worse.\n  const left = maxSeconds - seconds;\n  const endingSoon = left <= 15;\n  return (\n    <div className=\"flex items-center gap-3\">\n      <button\n        type=\"button\"\n        onClick={onDiscard}\n        aria-label=\"Discard recording\"\n        className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-active)] hover:text-[var(--text-primary)]\"\n      >\n        <Trash2 className=\"size-4\" />\n      </button>\n\n      <span\n        className=\"h-2 w-2 shrink-0 rounded-full bg-[var(--error)] motion-safe:animate-pulse\"\n        aria-hidden=\"true\"\n      />\n\n      <div className=\"min-w-0 flex-1\">\n        <Waveform\n          peaks={peaksRef}\n          slots={LIVE_PEAK_COUNT}\n          color=\"var(--error)\"\n          height={30}\n        />\n      </div>\n\n      <span\n        className={`shrink-0 font-mono text-sm tabular-nums transition-colors ${\n          endingSoon ? 'text-[var(--error)]' : 'text-[var(--text-primary)]'\n        }`}\n        aria-live=\"off\"\n      >\n        {endingSoon ? `${left}s left` : clock(seconds)}\n      </span>\n\n      <motion.button\n        type=\"button\"\n        onClick={onStop}\n        disabled={stopping}\n        aria-label=\"Stop recording\"\n        whileTap={{ scale: PRESS_SCALE_LARGE }}\n        transition={springs.snappy}\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--error)] text-white disabled:opacity-70\"\n      >\n        <Square className=\"fill-current\" />\n      </motion.button>\n    </div>\n  );\n}\n\n/**\n * A finished clip, which is now the shared player wearing this row's motion.\n *\n * It used to be its own eighty lines — play button, waveform, clock, bin — and\n * that copy was one of five ways this app drew a voice note. `TranscriptPlayer`\n * is the one, and it took this row's waveform with it, so nothing here is lost\n * except the duplication.\n */\nfunction ClipRow({\n  recording,\n  onDiscard,\n  disabled,\n}: {\n  recording: VoiceRecording;\n  onDiscard: () => void;\n  disabled?: boolean;\n}) {\n  return (\n    <motion.div {...row}>\n      <TranscriptPlayer\n        url={recording.url}\n        seconds={recording.seconds}\n        peaks={recording.peaks}\n        onDiscard={disabled ? undefined : onDiscard}\n      />\n    </motion.div>\n  );\n}\n\nfunction ProblemRow({\n  kind,\n  onRetry,\n}: {\n  kind: 'denied' | 'failed';\n  onRetry: () => void;\n}) {\n  return (\n    <motion.div {...row} className=\"flex items-start gap-3\">\n      <span className=\"mt-[2px] flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--bg-muted)] text-[var(--text-tertiary)]\">\n        <TriangleAlert className=\"h-[17px] w-[17px]\" />\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n          {kind === 'denied'\n            ? 'Box can’t reach your microphone'\n            : 'That recording didn’t start'}\n        </p>\n        <p className=\"mt-0.5 text-xs leading-relaxed text-[var(--text-tertiary)]\">\n          {kind === 'denied'\n            ? 'Allow microphone access for this site in your browser settings, then try again. You can type your message instead.'\n            : 'Something else may be using the microphone. You can try again, or type your message instead.'}\n        </p>\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          className=\"mt-2 text-xs font-medium text-[var(--accent-primary)] hover:underline\"\n        >\n          Try again\n        </button>\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/voice/waveform.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The bar strip, drawn on a canvas.
+ *
+ * DOM was the obvious choice and the wrong one: fifty-odd elements each taking
+ * a new transform twenty times a second is fifty style recalculations per
+ * frame, and it stutters on the mid-range Android these merchants actually
+ * use. One canvas is one paint.
+ *
+ * Bars are drawn from the right so a live strip reads as sound arriving and
+ * scrolling away, which is the direction every voice UI has taught people to
+ * expect.
+ */
+interface WaveformProps {
+    /**
+     * Normalised 0..1. Either a fixed array (a finished clip) or a ref the
+     * recorder mutates in place (a live strip) — the ref form is what keeps
+     * recording at zero React re-renders, since only this canvas reads it.
+     */
+    peaks: number[] | {
+        current: number[];
+    };
+    /** Slots to draw. Fewer peaks than this leaves the left end empty. */
+    slots: number;
+    color: string;
+    /** Bars left of this fraction render in `color`, the rest in `trackColor`. */
+    progress?: number;
+    trackColor?: string;
+    /** Live strips fill from the right; a finished clip fills from the left. */
+    align?: 'left' | 'right';
+    height?: number;
+    className?: string;
+}
+export declare function Waveform({ peaks, slots, color, progress, trackColor, align, height, className, }: WaveformProps): import("react").JSX.Element;
+export {};

package/dist/voice/waveform.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function resolveColor(el, value) {
+  if (!el || !value.startsWith("var(")) return value;
+  const name = value.slice(4, -1).split(",")[0].trim();
+  const resolved = getComputedStyle(el).getPropertyValue(name).trim();
+  return resolved || value;
+}
+function Waveform({
+  peaks,
+  slots,
+  color,
+  progress,
+  trackColor,
+  align = "right",
+  height = 28,
+  className
+}) {
+  const ref = useRef(null);
+  const [paint, setPaint] = useState({ fill: color, track: trackColor });
+  useEffect(() => {
+    const sync = () => setPaint({
+      fill: resolveColor(ref.current, color),
+      track: trackColor ? resolveColor(ref.current, trackColor) : void 0
+    });
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"]
+    });
+    return () => observer.disconnect();
+  }, [color, trackColor]);
+  const latest = useRef({ peaks, progress, paint, align, slots });
+  useEffect(() => {
+    latest.current = { peaks, progress, paint, align, slots };
+  }, [peaks, progress, paint, align, slots]);
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let frame = 0;
+    let shown = [];
+    const draw = () => {
+      frame = requestAnimationFrame(draw);
+      const {
+        peaks: source,
+        progress: prog,
+        paint: { fill: c, track: tc },
+        align: al,
+        slots: n
+      } = latest.current;
+      const p = Array.isArray(source) ? source : source.current;
+      const dpr = window.devicePixelRatio || 1;
+      const cssW = canvas.clientWidth;
+      const cssH = canvas.clientHeight;
+      if (!cssW || !cssH) return;
+      if (canvas.width !== cssW * dpr || canvas.height !== cssH * dpr) {
+        canvas.width = cssW * dpr;
+        canvas.height = cssH * dpr;
+      }
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, cssW, cssH);
+      const target = new Array(n).fill(0);
+      const take = Math.min(p.length, n);
+      for (let i = 0; i < take; i++) {
+        const src = p[p.length - take + i];
+        target[al === "right" ? n - take + i : i] = src;
+      }
+      if (shown.length !== n) shown = new Array(n).fill(0);
+      for (let i = 0; i < n; i++) {
+        shown[i] += (target[i] - shown[i]) * 0.35;
+      }
+      const gap = cssW / n < 4 ? 1 : 2;
+      const barW = Math.max(1.5, cssW / n - gap);
+      const mid = cssH / 2;
+      const minH = 2;
+      for (let i = 0; i < n; i++) {
+        const h = Math.max(minH, shown[i] * (cssH - 2));
+        const x = i * (barW + gap);
+        const filled = prog === void 0 || i / n <= prog;
+        ctx.fillStyle = filled ? c : tc ?? c;
+        const r = Math.min(barW / 2, h / 2);
+        ctx.beginPath();
+        ctx.roundRect(x, mid - h / 2, barW, h, r);
+        ctx.fill();
+      }
+    };
+    frame = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref,
+      "aria-hidden": "true",
+      className,
+      style: { width: "100%", height, display: "block" }
+    }
+  );
+}
+export {
+  Waveform
+};
+//# sourceMappingURL=waveform.js.map

package/dist/voice/waveform.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/voice/waveform.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/**\n * Canvas cannot read CSS custom properties. `ctx.fillStyle = 'var(--error)'`\n * is not an error — the assignment is simply ignored, fillStyle stays at its\n * default black, and on a dark surface the bars become invisible while every\n * \"did it draw?\" check still passes. So the token is resolved to a real colour\n * against a live element before it ever reaches the context.\n */\nfunction resolveColor(el: Element | null, value: string): string {\n  if (!el || !value.startsWith('var(')) return value;\n  const name = value.slice(4, -1).split(',')[0].trim();\n  const resolved = getComputedStyle(el).getPropertyValue(name).trim();\n  return resolved || value;\n}\n\n/**\n * The bar strip, drawn on a canvas.\n *\n * DOM was the obvious choice and the wrong one: fifty-odd elements each taking\n * a new transform twenty times a second is fifty style recalculations per\n * frame, and it stutters on the mid-range Android these merchants actually\n * use. One canvas is one paint.\n *\n * Bars are drawn from the right so a live strip reads as sound arriving and\n * scrolling away, which is the direction every voice UI has taught people to\n * expect.\n */\n\ninterface WaveformProps {\n  /**\n   * Normalised 0..1. Either a fixed array (a finished clip) or a ref the\n   * recorder mutates in place (a live strip) — the ref form is what keeps\n   * recording at zero React re-renders, since only this canvas reads it.\n   */\n  peaks: number[] | { current: number[] };\n  /** Slots to draw. Fewer peaks than this leaves the left end empty. */\n  slots: number;\n  color: string;\n  /** Bars left of this fraction render in `color`, the rest in `trackColor`. */\n  progress?: number;\n  trackColor?: string;\n  /** Live strips fill from the right; a finished clip fills from the left. */\n  align?: 'left' | 'right';\n  height?: number;\n  className?: string;\n}\n\nexport function Waveform({\n  peaks,\n  slots,\n  color,\n  progress,\n  trackColor,\n  align = 'right',\n  height = 28,\n  className,\n}: WaveformProps) {\n  const ref = useRef<HTMLCanvasElement | null>(null);\n\n  // Resolved once, then again whenever the theme flips — getComputedStyle\n  // forces a style recalc, which is not something to do sixty times a second.\n  const [paint, setPaint] = useState({ fill: color, track: trackColor });\n  useEffect(() => {\n    const sync = () =>\n      setPaint({\n        fill: resolveColor(ref.current, color),\n        track: trackColor ? resolveColor(ref.current, trackColor) : undefined,\n      });\n    sync();\n    // The theme is a class on <html>, so that is what has to be watched.\n    const observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'style'],\n    });\n    return () => observer.disconnect();\n  }, [color, trackColor]);\n\n  // The draw loop reads these without listing them as dependencies: restarting\n  // the rAF loop on every peak push (20x a second) would drop the eased\n  // interpolation each time and make the bars snap.\n  const latest = useRef({ peaks, progress, paint, align, slots });\n  useEffect(() => {\n    latest.current = { peaks, progress, paint, align, slots };\n  }, [peaks, progress, paint, align, slots]);\n\n  useEffect(() => {\n    const canvas = ref.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    let frame = 0;\n    // Eased toward the target each frame rather than snapped, so a bar that\n    // jumps from silence to a shout still travels there. This is the whole\n    // difference between \"responsive\" and \"twitchy\".\n    let shown: number[] = [];\n\n    const draw = () => {\n      frame = requestAnimationFrame(draw);\n      const {\n        peaks: source,\n        progress: prog,\n        paint: { fill: c, track: tc },\n        align: al,\n        slots: n,\n      } = latest.current;\n      const p = Array.isArray(source) ? source : source.current;\n\n      const dpr = window.devicePixelRatio || 1;\n      const cssW = canvas.clientWidth;\n      const cssH = canvas.clientHeight;\n      if (!cssW || !cssH) return;\n      if (canvas.width !== cssW * dpr || canvas.height !== cssH * dpr) {\n        canvas.width = cssW * dpr;\n        canvas.height = cssH * dpr;\n      }\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n      ctx.clearRect(0, 0, cssW, cssH);\n\n      // Target array, padded to `n` on whichever side is not being filled.\n      const target = new Array<number>(n).fill(0);\n      const take = Math.min(p.length, n);\n      for (let i = 0; i < take; i++) {\n        const src = p[p.length - take + i];\n        target[al === 'right' ? n - take + i : i] = src;\n      }\n\n      if (shown.length !== n) shown = new Array<number>(n).fill(0);\n      for (let i = 0; i < n; i++) {\n        shown[i] += (target[i] - shown[i]) * 0.35;\n      }\n\n      const gap = cssW / n < 4 ? 1 : 2;\n      const barW = Math.max(1.5, cssW / n - gap);\n      const mid = cssH / 2;\n      const minH = 2;\n\n      for (let i = 0; i < n; i++) {\n        const h = Math.max(minH, shown[i] * (cssH - 2));\n        const x = i * (barW + gap);\n        const filled = prog === undefined || i / n <= prog;\n        ctx.fillStyle = filled ? c : (tc ?? c);\n        // Rounded caps, because a square-ended bar at 2px reads as a tick.\n        const r = Math.min(barW / 2, h / 2);\n        ctx.beginPath();\n        ctx.roundRect(x, mid - h / 2, barW, h, r);\n        ctx.fill();\n      }\n    };\n\n    frame = requestAnimationFrame(draw);\n    return () => cancelAnimationFrame(frame);\n  }, []);\n\n  return (\n    <canvas\n      ref={ref}\n      aria-hidden=\"true\"\n      className={className}\n      style={{ width: '100%', height, display: 'block' }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/workspace-setup/step-intent.d.ts

@@ -0,0 +1,16 @@
+export interface IntentCard {
+    id: string;
+    label: string;
+    description: string;
+    icon: React.ElementType;
+    color: string;
+    behaviors: string[];
+}
+export declare const INTENT_CARDS: IntentCard[];
+interface StepIntentProps {
+    selectedIntents: string[];
+    onToggle: (intentId: string) => void;
+    onContinue: () => void;
+}
+export declare function StepIntent({ selectedIntents, onToggle, onContinue, }: StepIntentProps): import("react").JSX.Element;
+export {};

package/dist/workspace-setup/step-intent.js

@@ -0,0 +1,176 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ShoppingBag,
+  CalendarCheck,
+  RefreshCw,
+  Download,
+  Ticket,
+  ChevronRight,
+  Check
+} from "lucide-react";
+const INTENT_CARDS = [
+  {
+    id: "sell-products",
+    label: "Sell products online",
+    description: "Physical goods, fashion, retail items",
+    icon: ShoppingBag,
+    color: "#F59E0B",
+    behaviors: ["sellable", "shippable"]
+  },
+  {
+    id: "take-bookings",
+    label: "Take bookings or appointments",
+    description: "Services, consultations, sessions",
+    icon: CalendarCheck,
+    color: "#E91E8C",
+    behaviors: ["bookable"]
+  },
+  {
+    id: "subscriptions",
+    label: "Offer subscriptions or memberships",
+    description: "Recurring plans, membership access",
+    icon: RefreshCw,
+    color: "#10B981",
+    behaviors: ["subscribable"]
+  },
+  {
+    id: "digital-products",
+    label: "Sell digital products",
+    description: "Downloads, files, digital content",
+    icon: Download,
+    color: "#3B82F6",
+    behaviors: ["sellable", "downloadable"]
+  },
+  {
+    id: "event-tickets",
+    label: "Sell tickets to events",
+    description: "Events, shows, conferences",
+    icon: Ticket,
+    color: "#6366F1",
+    behaviors: ["sellable", "ticketed"]
+  }
+];
+function StepIntent({
+  selectedIntents,
+  onToggle,
+  onContinue
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "lg:hidden pb-28", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)] mb-4", children: "Select everything that applies" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: INTENT_CARDS.map((intent) => {
+        const Icon = intent.icon;
+        const isSelected = selectedIntents.includes(intent.id);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggle(intent.id),
+            className: `w-full flex items-center gap-3.5 p-4 rounded-[var(--radius-ios-lg)] text-left transition-all active:scale-[0.98] ${isSelected ? "bg-brand-500/15 ring-2 ring-brand-500" : "bg-[var(--bg-base)] active:bg-[var(--bg-muted)]"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-10 h-10 rounded-[var(--radius-ios-sm)] flex items-center justify-center flex-shrink-0",
+                  style: { backgroundColor: `${intent.color}15` },
+                  children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5", style: { color: intent.color } })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[15px] font-medium text-[var(--text-primary)] block", children: intent.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-tertiary)]", children: intent.description })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `w-[22px] h-[22px] rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors ${isSelected ? "border-brand-500 bg-brand-500" : "border-[var(--border-strong)] bg-transparent"}`,
+                  children: isSelected && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-white" })
+                }
+              )
+            ]
+          },
+          intent.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-40 px-5 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] bg-[var(--bg-subtle)] border-t border-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onContinue,
+          disabled: selectedIntents.length === 0,
+          className: "w-full py-3.5 text-[15px] font-semibold text-[var(--text-inverse)] bg-brand-500 rounded-[var(--radius-ios-lg)] active:scale-[0.98] disabled:opacity-40 transition-all flex items-center justify-center gap-2",
+          children: [
+            "Continue",
+            /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hidden lg:block space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-base)] rounded-md border border-[var(--border-default)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b border-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--text-primary)]", children: "What do you want to do?" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)] mt-0.5", children: "Select everything that applies \u2014 we'll set up the right tools for you" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: INTENT_CARDS.map((intent) => {
+        const Icon = intent.icon;
+        const isSelected = selectedIntents.includes(intent.id);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggle(intent.id),
+            className: `group relative p-5 rounded-md border-2 text-left transition-all cursor-pointer ${isSelected ? "border-brand-500 bg-brand-500/5" : "border-[var(--border-default)] bg-[var(--bg-base)] hover:border-[var(--border-strong)]"}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-10 h-10 rounded-sm flex items-center justify-center flex-shrink-0",
+                    style: { backgroundColor: `${intent.color}15` },
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        className: "w-5 h-5",
+                        style: { color: intent.color }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm text-[var(--text-primary)] mb-0.5", children: intent.label }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] line-clamp-2", children: intent.description })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute top-4 right-4 w-5 h-5 rounded-sm border-2 flex items-center justify-center transition-colors ${isSelected ? "border-brand-500 bg-brand-500" : "border-[var(--border-strong)] bg-[var(--bg-base)]"}`,
+                  children: isSelected && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-white" })
+                }
+              )
+            ]
+          },
+          intent.id
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 bg-[var(--bg-subtle)] border-t border-[var(--border-subtle)] flex justify-end", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onContinue,
+          disabled: selectedIntents.length === 0,
+          className: "px-5 py-2.5 bg-brand-500 hover:bg-brand-600 disabled:bg-[var(--border-strong)] disabled:cursor-not-allowed text-[var(--text-inverse)] text-sm font-medium rounded-md transition-colors flex items-center gap-2 cursor-pointer",
+          children: [
+            "Continue",
+            /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+}
+export {
+  INTENT_CARDS,
+  StepIntent
+};
+//# sourceMappingURL=step-intent.js.map

package/dist/workspace-setup/step-intent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/workspace-setup/step-intent.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ShoppingBag,\n  CalendarCheck,\n  RefreshCw,\n  Download,\n  Ticket,\n  ChevronRight,\n  Check,\n} from 'lucide-react';\n\nexport interface IntentCard {\n  id: string;\n  label: string;\n  description: string;\n  icon: React.ElementType;\n  color: string;\n  behaviors: string[];\n}\n\nexport const INTENT_CARDS: IntentCard[] = [\n  {\n    id: 'sell-products',\n    label: 'Sell products online',\n    description: 'Physical goods, fashion, retail items',\n    icon: ShoppingBag,\n    color: '#F59E0B',\n    behaviors: ['sellable', 'shippable'],\n  },\n  {\n    id: 'take-bookings',\n    label: 'Take bookings or appointments',\n    description: 'Services, consultations, sessions',\n    icon: CalendarCheck,\n    color: '#E91E8C',\n    behaviors: ['bookable'],\n  },\n  {\n    id: 'subscriptions',\n    label: 'Offer subscriptions or memberships',\n    description: 'Recurring plans, membership access',\n    icon: RefreshCw,\n    color: '#10B981',\n    behaviors: ['subscribable'],\n  },\n  {\n    id: 'digital-products',\n    label: 'Sell digital products',\n    description: 'Downloads, files, digital content',\n    icon: Download,\n    color: '#3B82F6',\n    behaviors: ['sellable', 'downloadable'],\n  },\n  {\n    id: 'event-tickets',\n    label: 'Sell tickets to events',\n    description: 'Events, shows, conferences',\n    icon: Ticket,\n    color: '#6366F1',\n    behaviors: ['sellable', 'ticketed'],\n  },\n];\n\ninterface StepIntentProps {\n  selectedIntents: string[];\n  onToggle: (intentId: string) => void;\n  onContinue: () => void;\n}\n\nexport function StepIntent({\n  selectedIntents,\n  onToggle,\n  onContinue,\n}: StepIntentProps) {\n  return (\n    <>\n      {/* ── Mobile ── */}\n      <div className=\"lg:hidden pb-28\">\n        <p className=\"text-sm text-[var(--text-tertiary)] mb-4\">\n          Select everything that applies\n        </p>\n\n        <div className=\"space-y-2.5\">\n          {INTENT_CARDS.map((intent) => {\n            const Icon = intent.icon;\n            const isSelected = selectedIntents.includes(intent.id);\n            return (\n              <button\n                key={intent.id}\n                type=\"button\"\n                onClick={() => onToggle(intent.id)}\n                className={`w-full flex items-center gap-3.5 p-4 rounded-[var(--radius-ios-lg)] text-left transition-all active:scale-[0.98] ${\n                  isSelected\n                    ? 'bg-brand-500/15 ring-2 ring-brand-500'\n                    : 'bg-[var(--bg-base)] active:bg-[var(--bg-muted)]'\n                }`}\n              >\n                <div\n                  className=\"w-10 h-10 rounded-[var(--radius-ios-sm)] flex items-center justify-center flex-shrink-0\"\n                  style={{ backgroundColor: `${intent.color}15` }}\n                >\n                  <Icon className=\"w-5 h-5\" style={{ color: intent.color }} />\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                  <span className=\"text-[15px] font-medium text-[var(--text-primary)] block\">\n                    {intent.label}\n                  </span>\n                  <span className=\"text-xs text-[var(--text-tertiary)]\">\n                    {intent.description}\n                  </span>\n                </div>\n                {/* Checkbox */}\n                <div\n                  className={`w-[22px] h-[22px] rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors ${\n                    isSelected\n                      ? 'border-brand-500 bg-brand-500'\n                      : 'border-[var(--border-strong)] bg-transparent'\n                  }`}\n                >\n                  {isSelected && <Check className=\"w-3 h-3 text-white\" />}\n                </div>\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Fixed bottom bar */}\n        <div className=\"fixed bottom-0 left-0 right-0 z-40 px-5 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] bg-[var(--bg-subtle)] border-t border-[var(--border-subtle)]\">\n          <button\n            type=\"button\"\n            onClick={onContinue}\n            disabled={selectedIntents.length === 0}\n            className=\"w-full py-3.5 text-[15px] font-semibold text-[var(--text-inverse)] bg-brand-500 rounded-[var(--radius-ios-lg)] active:scale-[0.98] disabled:opacity-40 transition-all flex items-center justify-center gap-2\"\n          >\n            Continue\n            <ChevronRight className=\"w-4 h-4\" />\n          </button>\n        </div>\n      </div>\n\n      {/* ── Desktop (unchanged) ── */}\n      <div className=\"hidden lg:block space-y-6\">\n        <div className=\"bg-[var(--bg-base)] rounded-md border border-[var(--border-default)]\">\n          <div className=\"px-6 py-4 border-b border-[var(--border-subtle)]\">\n            <h2 className=\"text-base font-semibold text-[var(--text-primary)]\">\n              What do you want to do?\n            </h2>\n            <p className=\"text-sm text-[var(--text-tertiary)] mt-0.5\">\n              Select everything that applies — we&apos;ll set up the right tools\n              for you\n            </p>\n          </div>\n\n          <div className=\"p-6\">\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3\">\n              {INTENT_CARDS.map((intent) => {\n                const Icon = intent.icon;\n                const isSelected = selectedIntents.includes(intent.id);\n                return (\n                  <button\n                    key={intent.id}\n                    type=\"button\"\n                    onClick={() => onToggle(intent.id)}\n                    className={`group relative p-5 rounded-md border-2 text-left transition-all cursor-pointer ${\n                      isSelected\n                        ? 'border-brand-500 bg-brand-500/5'\n                        : 'border-[var(--border-default)] bg-[var(--bg-base)] hover:border-[var(--border-strong)]'\n                    }`}\n                  >\n                    <div className=\"flex items-start gap-3\">\n                      <div\n                        className=\"w-10 h-10 rounded-sm flex items-center justify-center flex-shrink-0\"\n                        style={{ backgroundColor: `${intent.color}15` }}\n                      >\n                        <Icon\n                          className=\"w-5 h-5\"\n                          style={{ color: intent.color }}\n                        />\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <h3 className=\"font-semibold text-sm text-[var(--text-primary)] mb-0.5\">\n                          {intent.label}\n                        </h3>\n                        <p className=\"text-xs text-[var(--text-tertiary)] line-clamp-2\">\n                          {intent.description}\n                        </p>\n                      </div>\n                    </div>\n                    <div\n                      className={`absolute top-4 right-4 w-5 h-5 rounded-sm border-2 flex items-center justify-center transition-colors ${\n                        isSelected\n                          ? 'border-brand-500 bg-brand-500'\n                          : 'border-[var(--border-strong)] bg-[var(--bg-base)]'\n                      }`}\n                    >\n                      {isSelected && <Check className=\"w-3 h-3 text-white\" />}\n                    </div>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          <div className=\"px-6 py-4 bg-[var(--bg-subtle)] border-t border-[var(--border-subtle)] flex justify-end\">\n            <button\n              onClick={onContinue}\n              disabled={selectedIntents.length === 0}\n              className=\"px-5 py-2.5 bg-brand-500 hover:bg-brand-600 disabled:bg-[var(--border-strong)] disabled:cursor-not-allowed text-[var(--text-inverse)] text-sm font-medium rounded-md transition-colors flex items-center gap-2 cursor-pointer\"\n            >\n              Continue\n              <ChevronRight className=\"w-4 h-4\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}