@supersuit/artifacts 0.21.0 → 0.23.0

package/lib/widgets/checklist.js

@@ -0,0 +1,127 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The checklist widget in the reader's browser. Each tick is kept in localStorage under the page
+// and the item id (checklist.ts, checklistStorageKey), so it survives a reload, a republish and a
+// reworded item, and never leaves the device unless the reader presses Send. Storage that throws
+// (a private window, blocked site data) costs the reader only the memory: ticks still work for
+// the visit.
+//
+// The item text and description arrive already drawn on the server, as markdown with raw HTML
+// escaped, so this file draws no author content itself. Everything here is data-nospeak: the
+// narrator reads the prose, never the checklist.
+//
+// With `sync`, the ticks are the page's, not the reader's: every checklist block on the page reads
+// and writes one shared set through ./checklist-sync.ts, and falls back to the localStorage path
+// below when the host keeps no answers.
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { CHECKLIST_SLOT, checklistStorageKey } from '../artifacts/checklist.js';
+import { SERVER_SYNC_SNAPSHOT, syncStoreFor } from './checklist-sync.js';
+function readTick(key) {
+    if (!key)
+        return false;
+    try {
+        return globalThis.localStorage?.getItem(key) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeTick(key, on) {
+    if (!key)
+        return;
+    try {
+        if (on)
+            globalThis.localStorage?.setItem(key, '1');
+        else
+            globalThis.localStorage?.removeItem(key);
+    }
+    catch {
+        // Storage blocked: the tick lives for this visit only.
+    }
+}
+const noopSubscribe = () => () => { };
+const nullSnapshot = () => null;
+const serverSnapshot = () => SERVER_SYNC_SNAPSHOT;
+const SYNC_WORDS = { loading: 'Connecting…', synced: 'Synced', saving: 'Saving…' };
+/** The quiet word after the count: where the shared set stands. */
+function SyncLabel({ s, color }) {
+    const words = s.status === 'error' ? (s.message ?? 'not saved') : s.status === 'sign-in' ? null : SYNC_WORDS[s.status];
+    return (_jsxs("span", { "data-checklist-sync": s.status, className: "normal-case tracking-normal opacity-70", children: [' · ', s.status === 'sign-in'
+                ? (s.signIn ? _jsx("a", { href: s.signIn, className: "underline", style: { color }, children: "Sign in to tick" }) : 'Ticking is open to signed-in readers')
+                : words] }));
+}
+export function Checklist({ items, artifactId, send, sync, owner, accent, }) {
+    const key = useCallback((id) => (artifactId ? checklistStorageKey(artifactId, id) : null), [artifactId]);
+    const [local, setDone] = useState({});
+    const [sent, setSent] = useState({ status: 'idle' });
+    const store = useMemo(() => (sync && artifactId ? syncStoreFor(artifactId) : null), [sync, artifactId]);
+    const shared = useSyncExternalStore(store ? store.subscribe : noopSubscribe, store ? store.snapshot : nullSnapshot, store ? serverSnapshot : nullSnapshot);
+    // Read after mount, never during render: the server has no storage, and reading it while
+    // hydrating would draw a page that disagrees with the server's.
+    const ids = items.map((it) => it.id).join('\n');
+    useEffect(() => {
+        if (store)
+            return;
+        const next = {};
+        for (const id of ids.split('\n'))
+            if (readTick(key(id)))
+                next[id] = true;
+        setDone(next);
+    }, [ids, key, store]);
+    // A synced block hands the page's store the ids it draws; the store reads and polls while any
+    // block on the page is mounted.
+    useEffect(() => {
+        if (!store)
+            return;
+        const block = {};
+        store.register(block, ids.split('\n'));
+        return () => store.unregister(block);
+    }, [store, ids]);
+    const done = shared ? Object.fromEntries([...shared.done].map((id) => [id, true])) : local;
+    const toggle = (id) => {
+        if (store)
+            return store.toggle(id);
+        setDone((d) => {
+            const on = !d[id];
+            writeTick(key(id), on);
+            const next = { ...d };
+            if (on)
+                next[id] = true;
+            else
+                delete next[id];
+            return next;
+        });
+        setSent((s) => (s.status === 'sent' ? { status: 'idle' } : s));
+    };
+    const count = items.filter((it) => done[it.id]).length;
+    const color = accent ?? 'var(--a-accent)';
+    const doSend = async () => {
+        if (!artifactId)
+            return;
+        setSent({ status: 'busy' });
+        try {
+            const r = await fetch(`/api/artifacts/${artifactId}/state`, {
+                method: 'POST',
+                credentials: 'same-origin',
+                cache: 'no-store',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ slot: CHECKLIST_SLOT, op: 'set', value: { done: items.filter((it) => done[it.id]).map((it) => it.id) } }),
+            });
+            const body = (await r.json().catch(() => ({})));
+            if (r.ok)
+                setSent({ status: 'sent' });
+            else if (r.status === 401)
+                setSent({ status: 'sign-in', signIn: typeof body.signIn === 'string' ? body.signIn : null });
+            else
+                setSent({ status: 'error', message: typeof body.error === 'string' ? body.error : 'that did not send; try again' });
+        }
+        catch {
+            setSent({ status: 'error', message: 'that did not reach the page; try again' });
+        }
+    };
+    return (_jsxs("div", { "data-nospeak": true, "data-artifact-checklist": true, className: "my-6 rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-surface)]", children: [_jsxs("p", { "data-checklist-count": true, "aria-live": "polite", className: "m-0 border-b border-[color:var(--a-line)] px-4 py-2 text-[11px] uppercase tracking-[0.2em]", style: { color }, children: [`${count} of ${items.length} done`, shared && shared.status !== 'local' ? _jsx(SyncLabel, { s: shared, color: color }) : null] }), _jsx("ul", { className: "m-0 list-none p-0", children: items.map((it) => {
+                    const on = !!done[it.id];
+                    const inputId = `checklist-${artifactId ?? 'page'}-${it.id}`;
+                    return (_jsxs("li", { "data-checklist-item": it.id, "data-done": on ? 'yes' : 'no', className: "m-0 border-b border-[color:var(--a-line)] px-4 py-1 last:border-b-0", children: [_jsxs("label", { htmlFor: inputId, className: "flex cursor-pointer items-start gap-3 py-2", style: { minHeight: 44 }, children: [_jsx("input", { id: inputId, type: "checkbox", checked: on, onChange: () => toggle(it.id), className: "mt-0.5 shrink-0 cursor-pointer", style: { accentColor: color, width: 24, height: 24 } }), _jsx("span", { className: on ? 'text-[color:var(--a-muted)] line-through' : 'text-[color:var(--a-strong)]', children: it.title })] }), it.description ? _jsx("div", { className: "pb-2 pl-9 text-[15px] text-[color:var(--a-body)]", children: it.description }) : null] }, it.id));
+                }) }), send && artifactId ? (_jsxs("div", { className: "border-t border-[color:var(--a-line)] px-4 py-3", children: [_jsx("button", { type: "button", "data-checklist-send": true, disabled: sent.status === 'busy', onClick: () => void doSend(), className: "rounded-full px-5 text-sm font-medium disabled:opacity-40", style: { background: color, color: 'var(--a-on-accent, #111)', minHeight: 44 }, children: owner ? `Send my progress to ${owner}` : 'Send my progress' }), sent.status === 'sent' ? _jsx("p", { "data-checklist-sent": true, className: "mt-2 text-sm opacity-80", children: `Sent: ${count} of ${items.length} done.` }) : null, sent.status === 'error' ? _jsx("p", { className: "mt-2 text-sm text-amber-500", children: sent.message }) : null, sent.status === 'sign-in' ? (sent.signIn ? (_jsx("p", { className: "mt-2 text-sm", children: _jsx("a", { href: sent.signIn, className: "underline", style: { color }, children: "Sign in to send" }) })) : (_jsx("p", { className: "mt-2 text-sm opacity-70", children: "Sending is open to signed-in readers." }))) : null] })) : null] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Publish markdown as branded, read-aloud pages from a Next.js app: the artifacts store, the route factory, the read-along reader, brand packs, password and confidential pages, and share cards.",
   "license": "MIT",
   "type": "module",