makersclaw 0.2.0 → 0.3.0

package/registry/blocks/audio-player/colors.js

@@ -0,0 +1,109 @@
+// The waveform's colours are the workspace's tokens.
+//
+// wavesurfer.js paints a <canvas>, and a canvas needs a concrete colour —
+// it cannot read var(--color-primary). So the colours are read from the
+// CSS variables in effect where the player sits, at run time, and read
+// again when the theme or the scheme changes (the player watches for
+// that). No colour value is written in this file: every one comes from
+// the page. Same method as sketch-canvas's palette.js.
+//
+// Everything but readTokens() is a plain function, so it runs in node.
+
+const byte = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+
+/** [r, g, b, a(0-255)] → "#rrggbb", or "#rrggbbaa" when not opaque. */
+export function toHex([r, g, b, a = 255]) {
+  return "#" + byte(r) + byte(g) + byte(b) + (a >= 255 ? "" : byte(a));
+}
+
+/** The same colour at `alpha` (0-1) of its own opacity. */
+export function withAlpha(rgba, alpha) {
+  if (!rgba) return null;
+  const [r, g, b, a = 255] = rgba;
+  return toHex([r, g, b, a * Math.max(0, Math.min(1, alpha))]);
+}
+
+/** The waveform's colours from the slots read off the page. */
+export function waveColours(slots) {
+  const fg = slots?.foreground;
+  const muted = slots?.["muted-foreground"] ?? fg;
+  const primary = slots?.primary ?? fg;
+  return {
+    waveColor: withAlpha(muted, 0.55),
+    progressColor: primary ? toHex(primary) : null,
+    cursorColor: primary ? toHex(primary) : null,
+  };
+}
+
+// ---- the browser half -------------------------------------------------------
+
+/** Read `slots` (token names: "primary", "muted-foreground"…) from the CSS
+ *  variables in effect at `root`, as [r, g, b, a] bytes. A probe takes
+ *  `color: var(--color-<slot>)`; the browser resolves var(), color-mix()
+ *  and light-dark() into its computed colour, and a 1×1 canvas turns that
+ *  into bytes whatever syntax it came back in. */
+export function readTokens(root, slots) {
+  const out = {};
+  if (typeof document === "undefined" || !root) return out;
+  const probe = document.createElement("span");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  root.appendChild(probe);
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  try {
+    for (const slot of slots) {
+      probe.style.color = "";
+      probe.style.color = `var(--color-${slot})`;
+      const computed = getComputedStyle(probe).color;
+      if (!computed || !ctx) continue;
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = "transparent";
+      ctx.fillStyle = computed;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+      if (a === 0) continue;
+      out[slot] = [r, g, b, a];
+    }
+  } finally {
+    probe.remove();
+  }
+  return out;
+}
+
+/** Call `fn` (soon, once) whenever something that sets the tokens may have
+ *  changed: a data-theme / class / style on <html> or the nearest themed
+ *  ancestor, a stylesheet added to <head>, the OS scheme. Returns the
+ *  cleanup. */
+export function watchTheme(root, fn) {
+  if (typeof document === "undefined") return () => {};
+  let t = 0;
+  const soon = () => {
+    clearTimeout(t);
+    t = setTimeout(fn, 30);
+  };
+  const obs = new MutationObserver((records) => {
+    for (const r of records) for (const n of r.addedNodes ?? []) if (n.tagName === "LINK") n.addEventListener("load", soon, { once: true });
+    soon();
+  });
+  const attrs = { attributes: true, attributeFilter: ["data-theme", "class", "style"] };
+  obs.observe(document.documentElement, attrs);
+  obs.observe(document.head, { childList: true });
+  const scoped = root?.closest?.("[data-theme]");
+  if (scoped && scoped !== document.documentElement) {
+    obs.observe(scoped, attrs);
+    obs.observe(scoped, { childList: true });
+  }
+  const mq = typeof matchMedia !== "undefined" ? matchMedia("(prefers-color-scheme: dark)") : null;
+  mq?.addEventListener("change", soon);
+  soon();
+  return () => {
+    clearTimeout(t);
+    obs.disconnect();
+    mq?.removeEventListener("change", soon);
+  };
+}

package/registry/blocks/audio-player/demo.jsx

@@ -0,0 +1,209 @@
+"use client";
+
+// AudioPlayer three ways — the gallery's and the smoke test's surface. Not
+// installed into apps.
+//   Call        a short sales call with topics (regions) and moments
+//               (markers); add a marker, drag to mark a clip (a switch makes
+//               the saves fail); beside it, the topic playing now and the
+//               moments as a list that jumps through the handle.
+//   Voice note  the player bare: no title, no regions, one line.
+//   States      nothing to play yet, and a file that will not decode.
+//
+// The audio is made here, in memory: a 45-second WAV synthesised from two
+// "voices" (harmonic tones in syllable-shaped bursts, one lower, one
+// higher, taking turns) at 8 kHz. No file ships with the demo.
+import { useCallback, useMemo, useState } from "react";
+import { Badge, Button, Switch, TabPanel, Tabs } from "../components/ui";
+import { AudioPlayer, formatTime, useAudioPlayer } from "../components/blocks/audio-player";
+
+// Who speaks when, in seconds: [start, end, voice]. Voice 0 is lower.
+const TURNS = [
+  [0.4, 6.4, 0],
+  [7.0, 11.8, 1],
+  [12.6, 15.0, 0],
+  [15.6, 25.4, 1],
+  [26.0, 32.8, 0],
+  [33.5, 37.0, 1],
+  [37.6, 44.2, 0],
+];
+
+/** A mono 16-bit PCM WAV of two voices taking turns, as an ArrayBuffer. */
+function synthCall(seconds = 45, rate = 8000) {
+  const n = Math.round(seconds * rate);
+  const out = new Float32Array(n);
+  let seed = 7;
+  const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
+  for (const [start, end, voice] of TURNS) {
+    const base = voice ? 205 : 132;
+    let t = start;
+    while (t < end) {
+      const len = 0.11 + rnd() * 0.17;
+      const amp = 0.22 + rnd() * 0.38;
+      const pitch = base * (0.92 + rnd() * 0.16);
+      const s0 = Math.round(t * rate);
+      const s1 = Math.min(n, Math.round(Math.min(t + len, end) * rate));
+      let phase = 0;
+      for (let i = s0; i < s1; i++) {
+        const x = (i - s0) / (s1 - s0);
+        const env = Math.pow(Math.sin(Math.PI * x), 0.8);
+        const f = pitch * (1 + 0.05 * Math.sin(2 * Math.PI * 4 * (i / rate)));
+        phase += (2 * Math.PI * f) / rate;
+        let v = 0;
+        for (let h = 1; h <= 5; h++) v += Math.sin(h * phase) / h;
+        out[i] += amp * env * v * 0.45;
+      }
+      t += len + (rnd() < 0.18 ? 0.22 + rnd() * 0.2 : 0.03 + rnd() * 0.08);
+    }
+  }
+  const buf = new ArrayBuffer(44 + n * 2);
+  const v = new DataView(buf);
+  const str = (o, s) => [...s].forEach((c, i) => v.setUint8(o + i, c.charCodeAt(0)));
+  str(0, "RIFF");
+  v.setUint32(4, 36 + n * 2, true);
+  str(8, "WAVE");
+  str(12, "fmt ");
+  v.setUint32(16, 16, true);
+  v.setUint16(20, 1, true); // PCM
+  v.setUint16(22, 1, true); // mono
+  v.setUint32(24, rate, true);
+  v.setUint32(28, rate * 2, true);
+  v.setUint16(32, 2, true);
+  v.setUint16(34, 16, true);
+  str(36, "data");
+  v.setUint32(40, n * 2, true);
+  for (let i = 0; i < n; i++) {
+    const s = Math.max(-1, Math.min(1, out[i] + (rnd() - 0.5) * 0.01));
+    v.setInt16(44 + i * 2, s * 32767, true);
+  }
+  return buf;
+}
+
+const TOPICS = [
+  { id: "intro", start: 0, end: 12.2, label: "Introductions", tone: "chart-2" },
+  { id: "pricing", start: 12.4, end: 25.6, label: "Pricing and SSO", tone: "chart-3" },
+  { id: "security", start: 25.8, end: 33.2, label: "Security review", tone: "chart-5" },
+  { id: "next", start: 33.4, end: 44.5, label: "Next steps", tone: "chart-4" },
+];
+
+const MOMENTS = [
+  { id: "m1", time: 17.2, label: "Asked whether SSO is on every plan", tone: "warning" },
+  { id: "m2", time: 23.8, label: "Budget confirmed: 40 seats", tone: "success" },
+  { id: "m3", time: 40.5, label: "Send the security questionnaire", tone: "primary" },
+];
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+function CallDemo({ audio }) {
+  const player = useAudioPlayer();
+  const [markers, setMarkers] = useState(MOMENTS);
+  const [regions, setRegions] = useState(TOPICS);
+  const [now, setNow] = useState(null);
+  const [fail, setFail] = useState(false);
+
+  // Optimistic in the parent too: add, save, take back if the save fails.
+  const addMarker = useCallback(
+    async ({ time }) => {
+      await wait(500);
+      if (fail) return { ok: false, error: "The server didn't answer." };
+      setMarkers((m) => [...m, { id: `m-${Date.now()}`, time, label: `Note at ${formatTime(time)}`, tone: "primary" }]);
+      return { ok: true };
+    },
+    [fail],
+  );
+  const addClip = useCallback(
+    async ({ start, end }) => {
+      await wait(500);
+      if (fail) return { ok: false, error: "The server didn't answer." };
+      setRegions((r) => [...r, { id: `c-${Date.now()}`, start, end, label: "Clip", tone: "primary" }]);
+      return { ok: true };
+    },
+    [fail],
+  );
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_16rem]">
+      <AudioPlayer
+        src={audio}
+        title="Discovery call · Northwind Logistics"
+        description="Maya Chen and Leo Park · Sep 18"
+        regions={regions}
+        markers={markers}
+        onAddMarker={addMarker}
+        onRegionCreate={addClip}
+        onActiveRegionChange={setNow}
+        playerRef={player}
+      />
+      <div className="grid min-w-0 content-start gap-4 rounded-lg border border-border bg-card p-4">
+        <div>
+          <p className="text-xs text-muted-foreground">Playing now</p>
+          <p className="mt-1 truncate text-sm font-medium">{now ? now.label : "Between topics"}</p>
+        </div>
+        <div>
+          <p className="text-xs text-muted-foreground">Moments</p>
+          <ul className="mt-1 grid gap-0.5">
+            {[...markers]
+              .sort((a, b) => a.time - b.time)
+              .map((m) => (
+                <li key={m.id} className="min-w-0">
+                  <Button variant="nav" size="sm" className="w-full min-w-0" onClick={() => player.current?.seek(m.time)}>
+                    <span className="w-9 shrink-0 text-xs text-muted-foreground tabular-nums">{formatTime(m.time)}</span>
+                    <span className="min-w-0 truncate">{m.label}</span>
+                  </Button>
+                </li>
+              ))}
+          </ul>
+        </div>
+        <Switch id="audio-fail" checked={fail} onChange={(e) => setFail(e.target.checked)} label="Make saves fail" />
+      </div>
+    </div>
+  );
+}
+
+export default function AudioPlayerDemo() {
+  const [tab, setTab] = useState("call");
+  // One recording for the whole page, made once (on the server too: the
+  // player renders its skeleton until the browser has decoded it).
+  const audio = useMemo(() => new Blob([synthCall()], { type: "audio/wav" }), []);
+
+  return (
+    <div>
+      <Tabs
+        id="audio-demo"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "call", label: "Call" },
+          { key: "note", label: "Voice note" },
+          { key: "states", label: "States" },
+        ]}
+      />
+      <TabPanel id="audio-demo" tab="call" value={tab}>
+        <CallDemo audio={audio} />
+      </TabPanel>
+      <TabPanel id="audio-demo" tab="note" value={tab}>
+        <div className="max-w-xl">
+          <div className="mb-2 flex items-center gap-2">
+            <p className="text-sm font-medium">Voicemail from Priya Raman</p>
+            <Badge variant="soft" tone="info">
+              New
+            </Badge>
+          </div>
+          <AudioPlayer src={audio} rates={[1, 1.5, 2]} defaultRate={1.5} />
+        </div>
+      </TabPanel>
+      <TabPanel id="audio-demo" tab="states" value={tab}>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <AudioPlayer
+            title="Onboarding call · Halden & Co"
+            emptyAction={
+              <Button size="sm" variant="secondary" icon="upload">
+                Upload a recording
+              </Button>
+            }
+          />
+          <AudioPlayer src="data:audio/wav;base64,AAAAAAAA" title="Renewal call · Brightline" description="Sep 12" />
+        </div>
+      </TabPanel>
+    </div>
+  );
+}

package/registry/blocks/audio-player/index.js

@@ -0,0 +1,6 @@
+// The AudioPlayer block — `makersclaw add audio-player`. Fixed: compose it
+// through its props (README.md beside this file). The blocks built on this
+// one (call-review…) import it, never wavesurfer.js directly. The time
+// helpers are plain functions and work on the server.
+export { AudioPlayer, useAudioPlayer } from "./audio-player";
+export { formatTime, formatRange, spokenTime, regionAt, TONES, RATES } from "./time";

package/registry/blocks/audio-player/time.js

@@ -0,0 +1,67 @@
+// Plain helpers for the player: time labels, where a moment falls, the
+// tones a region or a marker can wear. No DOM, so they run anywhere (a
+// server surface formatting a timestamp, a transcript lining up with the
+// audio).
+
+/** Seconds → "0:07", "12:03", "1:02:09". Negative and NaN read as 0. */
+export function formatTime(seconds) {
+  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const r = String(s % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${r}` : `${m}:${r}`;
+}
+
+/** "0:14–0:26" */
+export const formatRange = (start, end) => `${formatTime(start)}–${formatTime(end)}`;
+
+/** "1 minute 24 seconds" — what a screen reader says for a time. */
+export function spokenTime(seconds) {
+  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const r = s % 60;
+  const part = (n, w) => (n ? `${n} ${w}${n === 1 ? "" : "s"}` : "");
+  return [part(h, "hour"), part(m, "minute"), part(r, "second")].filter(Boolean).join(" ") || "0 seconds";
+}
+
+export const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+
+/** The region playing at `time`: the one that started last among those
+ *  that hold it (so a short region inside a long one wins). Null if none. */
+export function regionAt(regions, time) {
+  let hit = null;
+  for (const r of regions ?? []) {
+    if (!(time >= r.start && time < r.end)) continue;
+    if (!hit || r.start >= hit.start) hit = r;
+  }
+  return hit;
+}
+
+/** Regions and markers as given, cleaned: numbers, end after start,
+ *  inside the audio when its length is known, sorted by time. */
+export function cleanRegions(regions, duration) {
+  const max = duration > 0 ? duration : Infinity;
+  return (regions ?? [])
+    .filter((r) => r && Number.isFinite(+r.start) && Number.isFinite(+r.end))
+    .map((r) => ({ ...r, start: clamp(+r.start, 0, max), end: clamp(+r.end, 0, max) }))
+    .filter((r) => r.end > r.start)
+    .sort((a, b) => a.start - b.start);
+}
+
+export function cleanMarkers(markers, duration) {
+  const max = duration > 0 ? duration : Infinity;
+  return (markers ?? [])
+    .filter((m) => m && Number.isFinite(+m.time))
+    .map((m) => ({ ...m, time: clamp(+m.time, 0, max) }))
+    .sort((a, b) => a.time - b.time);
+}
+
+/** The tones a region or a marker can wear: theme tokens, never colours. */
+export const TONES = ["primary", "chart-2", "chart-3", "chart-4", "chart-5", "success", "warning", "info", "destructive", "muted"];
+
+/** The default playback speeds. */
+export const RATES = [0.75, 1, 1.25, 1.5, 2];
+
+/** "1.25×" */
+export const formatRate = (r) => `${r}×`;

package/registry/blocks/audio-player/wavesurfer.js

@@ -0,0 +1,9 @@
+// The one door to wavesurfer.js (BSD-3-Clause) and its React hook
+// (@wavesurfer/react, BSD-3-Clause). Every file in this block reaches the
+// library through here, and the blocks built on this one (call-review…)
+// reach it through AudioPlayer — never the packages directly.
+//
+// No shim is needed: both packages load on the server without touching
+// `window` (checked in node); the instance is only created in an effect,
+// so nothing runs until the browser.
+export { useWavesurfer } from "@wavesurfer/react";

package/registry/blocks/auth-form/README.md

@@ -0,0 +1,126 @@
+# AuthForm
+
+The screens around an account, as one form: sign in, sign up, a magic
+link, a password-reset link, and changing a password. It draws the
+fields, provider buttons, links and states, and holds what is typed. The
+auth is yours: each submit goes out through an async callback that
+returns `{ ok: true }` or `{ ok: false, error }`, and the form shows the
+error under the fields. It never signs anyone in by itself.
+
+```jsx
+import { AuthForm } from "../components/blocks/auth-form";   // a Makersclaw app ("./blocks/auth-form" from components/)
+import { AuthForm } from "@/components/makersclaw/blocks/auth-form";   // a shadcn project
+```
+
+A client component: render it from a `"use client"` component.
+
+## Modes
+
+- `sign-in` — email and password (or email only with `password={false}`),
+  "Forgot password?" beside the password label when `links.reset` is set,
+  optional "Remember me".
+- `sign-up` — your `fields` (default: full name), email, password and a
+  confirm, optional news and terms checkboxes, optional password `rules`.
+- `magic-link` — email only. After `{ ok: true }` it shows "Check your
+  email" with the address, and "Use a different email".
+- `reset` — email only; the same "Check your email" screen after it
+  sends. It never says whether the account exists.
+- `change-password` — current, new and confirm, with the rules as a live
+  checklist beside them (under them on a phone). On `{ ok: true }` the
+  fields clear and a success line shows.
+
+## Props
+
+- `mode` — one of the modes above. Default `"sign-in"`.
+- `onSubmit(values, mode)` — async; return `{ ok: true }` or
+  `{ ok: false, error }` (a throw counts as failed, its message shown).
+  `values` holds only what this mode asks: `email`, `password`,
+  `remember`, each of your `fields` by `name`, `newsletter`, `terms`,
+  `currentPassword`, `newPassword`. The form is busy (spinner, fields
+  off) until it answers.
+- `providers` — buttons for other ways in: `"google"`, `"github"`,
+  `"apple"`, `"microsoft"`, `"sso"`, or `{ id, label, icon }` for another
+  one (`icon` a kit Icon name). Default none.
+- `onProvider(id)` — async, same `{ ok, error }` answer. Start your OAuth
+  redirect here.
+- `providersFirst` — the buttons above the form ("or with email" under
+  them) instead of under it. Two of them sit side by side from 640px.
+- `password` — `false`: sign in by email only. Default `true`.
+- `remember` — `true` ("Remember me") or your label ("Remember me for 30
+  days"). Sign in only. Default off.
+- `fields` — sign up's extra fields, before the email:
+  `[{ name, label, type?, options?, placeholder?, autoComplete?, required?, hint?, half? }]`.
+  `type` is an input type or `"select"` (with `options: [{ value, label }]`);
+  `half` puts two side by side from 640px. Default one field, `name`
+  ("Full name").
+- `confirm` — ask for the new password twice. Default `true`.
+- `rules` — what a new password must meet: `[{ label, test(value) }]`.
+  Default: none on sign up, `PASSWORD_RULES` on change password (8
+  characters, upper, lower, a number, a symbol). `false` turns them off.
+  Submit is held, with a message, until each one passes.
+- `requireCurrent` — change password asks for the current one. Default
+  `true`; `false` for the page a reset link opens.
+- `acceptTerms` — sign up needs a ticked "I agree to the Terms of
+  Service and Privacy Policy" box. Default off.
+- `newsletter` — sign up shows an opt-in box: `true`, or your label.
+- `links` — where the small links go, each an href or a function
+  (switch screens in place): `"sign-in"`, `"sign-up"`, `reset`,
+  `"magic-link"`, `terms`, `privacy`. A link shows only when it is given.
+  With `terms` or `privacy` and no `acceptTerms`, a "By continuing…" line
+  sits at the foot.
+- `onCancel` — change password gets a Cancel button.
+- `logo` — a node above the title (your mark).
+- `title`, `description` — override the mode's words. `description={null}`
+  drops the line.
+- `submitLabel` — the main button's words.
+- `layout` — `card` (default, a 384px card) · `plain` (no card: your own
+  column) · `page` (the card centred in the window, for a route of its
+  own). Change password with rules is 768px wide.
+- `defaultEmail` — prefill the email.
+- `tips` — change password: short lines under the rules ("Use a password
+  manager").
+- `className` — on the outer box.
+
+`PASSWORD_RULES` is exported too, to extend: `rules={[...PASSWORD_RULES, { label: "Not your email", test: (v) => !v.includes("@") }]}`.
+
+## Example
+
+```jsx
+"use client";
+import { useRouter } from "next/navigation";
+import { AuthForm } from "../components/blocks/auth-form";
+
+export function SignIn({ signIn, startOAuth }) {
+  const router = useRouter();
+  return (
+    <AuthForm
+      mode="sign-in"
+      layout="page"
+      providers={["google", "github"]}
+      providersFirst
+      remember
+      links={{ "sign-up": "/sign-up", reset: "/reset", terms: "/terms", privacy: "/privacy" }}
+      onSubmit={async ({ email, password, remember }) => {
+        const r = await signIn(email, password, remember);   // your server action
+        if (r.ok) router.push("/");
+        return r;   // { ok: false, error: "Wrong email or password." } shows under the form
+      }}
+      onProvider={(id) => startOAuth(id)}
+    />
+  );
+}
+```
+
+## What it will not do
+
+- Authenticate. No session, no token, no OAuth: those are the callbacks'.
+- Rate-limit, add a CAPTCHA or hide whether an email is registered — the
+  server does that (reset already says "if an account exists").
+- Send the email. `magic-link` and `reset` only show that it went.
+- Two-step codes: put the kit's `InputOTP` on the next screen.
+- Draw a colourful brand logo: provider marks are the kit's one-colour
+  icons, in the text colour.
+
+## Credits
+
+Ported from blocks.so (https://blocks.so, login 01–09, MIT) and Creative Tim UI (https://github.com/creativetimofficial/ui, account-change-password-01, MIT), rewritten on the Makersclaw kit.