@supersuit/artifacts 0.2.0 → 0.4.0

package/lib/widgets/notes.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The notes widget in the reader's browser. One provider per page reads the page's state once
+// (GET /api/artifacts/<id>/state), places every note under the heading it was left under, and
+// sets aside the ones whose heading is gone. A small "note" control sits in each heading; the
+// panel after the heading lists its notes and, when open, takes a new one.
+//
+// Everything drawn here carries data-nospeak: narration reads the prose, never the notes, and
+// the read-along highlighter skips the same nodes. Notes are shown as text, never as markup.
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { MAX_NOTE_CHARS, NOTES_SLOT, placeNotes } from '../artifacts/notes-place.js';
+const NotesContext = createContext(null);
+const isNote = (v) => !!v && typeof v === 'object' && typeof v.slug === 'string' &&
+    typeof v.heading === 'string' && typeof v.note === 'string';
+function notesFrom(body) {
+    const slot = body?.slots?.[NOTES_SLOT];
+    if (!slot)
+        return [];
+    const rows = Array.isArray(slot.shared) ? slot.shared : Array.isArray(slot.mine) ? slot.mine.map((e) => ({ ...e, mine: true })) : [];
+    const out = [];
+    for (const r of rows) {
+        if (!isNote(r.value))
+            continue;
+        out.push({
+            id: String(r.id ?? ''), slug: r.value.slug, heading: r.value.heading, note: r.value.note,
+            name: r.mine ? 'You' : typeof r.name === 'string' ? r.name : 'a reader', at: String(r.at ?? ''), mine: r.mine === true,
+        });
+    }
+    return out;
+}
+export function NotesProvider({ artifactId, headings, accent, children }) {
+    const endpoint = `/api/artifacts/${artifactId}/state`;
+    const [notes, setNotes] = useState([]);
+    const [off, setOff] = useState(false);
+    const [canWrite, setCanWrite] = useState(false);
+    const [signIn, setSignIn] = useState(null);
+    const [open, setOpen] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const apply = useCallback((status, body) => {
+        if (status === 200) {
+            setNotes(notesFrom(body));
+            setCanWrite(body.canWrite === true);
+            setSignIn(typeof body.signIn === 'string' ? body.signIn : null);
+            setError(null);
+            return true;
+        }
+        if (status === 401) {
+            setCanWrite(false);
+            setSignIn(typeof body.signIn === 'string' ? body.signIn : null);
+            return false;
+        }
+        // No state store, no such page, or no slot: the page takes no notes here, so draw nothing.
+        if (status === 404 || status === 501) {
+            setOff(true);
+            return false;
+        }
+        setError(typeof body.error === 'string' ? body.error : 'that did not save; try again');
+        return false;
+    }, []);
+    const call = useCallback(async (init) => {
+        try {
+            const r = await fetch(endpoint, { credentials: 'same-origin', cache: 'no-store', ...init });
+            const body = (await r.json().catch(() => ({})));
+            return apply(r.status, body);
+        }
+        catch {
+            setError('that did not reach the page; try again');
+            return false;
+        }
+    }, [endpoint, apply]);
+    useEffect(() => { void call(); }, [call]);
+    const post = useCallback(async (slug, heading, note) => {
+        setBusy(true);
+        const done = await call({
+            method: 'POST', headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ slot: NOTES_SLOT, op: 'append', value: { slug, heading, note } }),
+        });
+        setBusy(false);
+        if (done)
+            setOpen(null);
+        return done;
+    }, [call]);
+    const remove = useCallback(async (id) => {
+        await call({ method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ slot: NOTES_SLOT, op: 'remove', entry: id }) });
+    }, [call]);
+    const placed = useMemo(() => placeNotes(headings, notes), [headings, notes]);
+    const value = { off, accent: accent ?? 'currentColor', ...placed, canWrite, signIn, open, setOpen, error, busy, post, remove };
+    return _jsx(NotesContext.Provider, { value: value, children: children });
+}
+/** The small control inside a heading. */
+export function NoteToggle({ slug }) {
+    const c = useContext(NotesContext);
+    if (!c || c.off)
+        return null;
+    const n = c.bySlug[slug]?.length ?? 0;
+    return (_jsx("button", { type: "button", "data-nospeak": true, "data-note-toggle": slug, "aria-expanded": c.open === slug, onClick: () => c.setOpen(c.open === slug ? null : slug), className: "ml-3 inline-block rounded-full border px-2 py-0.5 align-middle font-sans text-[11px] font-medium uppercase tracking-[0.15em] opacity-70 transition-opacity hover:opacity-100", style: { borderColor: c.accent, color: c.accent }, children: n ? `note · ${n}` : 'note' }));
+}
+function NoteItem({ n, c, under }) {
+    return (_jsxs("li", { className: "m-0 border-l-2 py-1 pl-3", style: { borderColor: c.accent }, children: [_jsx("span", { className: "block whitespace-pre-wrap text-[15px] text-[color:var(--a-strong)]", children: n.note }), _jsxs("span", { className: "block text-xs opacity-60", children: [n.name, under ? _jsxs(_Fragment, { children: [" \u00B7 under \u201C", n.heading, "\u201D"] }) : null, n.mine && n.id ? (_jsx("button", { type: "button", "data-note-remove": n.id, onClick: () => void c.remove(n.id), className: "ml-2 underline opacity-80 hover:opacity-100", children: "remove" })) : null] })] }));
+}
+function NoteForm({ slug, heading, c }) {
+    const [text, setText] = useState('');
+    const submit = async (e) => {
+        e.preventDefault();
+        const note = text.trim();
+        if (!note)
+            return;
+        if (await c.post(slug, heading, note))
+            setText('');
+    };
+    if (!c.canWrite) {
+        return c.signIn ? (_jsx("p", { className: "my-2 text-sm", children: _jsx("a", { href: c.signIn, className: "underline", style: { color: c.accent }, children: "Sign in to leave a note" }) })) : (_jsx("p", { className: "my-2 text-sm opacity-70", children: "Notes here are open to signed-in readers." }));
+    }
+    return (_jsxs("form", { onSubmit: submit, className: "my-2", children: [_jsx("textarea", { value: text, onChange: (e) => setText(e.target.value), maxLength: MAX_NOTE_CHARS, rows: 3, "aria-label": `A note on ${heading}`, placeholder: `A note on “${heading}”`, className: "w-full rounded-lg border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-[15px] text-[color:var(--a-strong)]" }), c.error ? _jsx("p", { className: "mt-1 text-xs text-amber-500", children: c.error }) : null, _jsxs("div", { className: "mt-2 flex gap-3", children: [_jsx("button", { type: "submit", disabled: c.busy || !text.trim(), className: "rounded-full px-4 py-1 text-sm font-medium disabled:opacity-40", style: { background: c.accent, color: 'var(--a-on-accent, #111)' }, children: "Save note" }), _jsx("button", { type: "button", onClick: () => c.setOpen(null), className: "text-sm opacity-70 hover:opacity-100", children: "Cancel" })] })] }));
+}
+/** After each heading: its notes, and the box when its control is open. */
+export function HeadingNotes({ slug, text }) {
+    const c = useContext(NotesContext);
+    if (!c || c.off)
+        return null;
+    const list = c.bySlug[slug] ?? [];
+    const isOpen = c.open === slug;
+    if (!list.length && !isOpen)
+        return null;
+    return (_jsxs("div", { "data-nospeak": true, "data-heading-notes": slug, className: "my-3", children: [list.length ? _jsx("ul", { className: "m-0 grid list-none gap-2 p-0", children: list.map((n) => _jsx(NoteItem, { n: n, c: c }, n.id)) }) : null, isOpen ? _jsx(NoteForm, { slug: slug, heading: text, c: c }) : null] }));
+}
+/** Where the ```notes fence sits: a line saying notes are on, and the notes whose heading is gone. */
+export function NotesEarlier() {
+    const c = useContext(NotesContext);
+    if (!c || c.off)
+        return null;
+    return (_jsxs("section", { "data-nospeak": true, "data-artifact-notes": true, className: "my-8 text-sm", children: [_jsx("p", { className: "opacity-60", children: "Leave a note beside any heading." }), c.earlier.length ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-4 text-[11px] uppercase tracking-[0.2em]", style: { color: c.accent }, children: "Notes on earlier versions" }), _jsx("ul", { className: "m-0 mt-2 grid list-none gap-2 p-0", children: c.earlier.map((n) => _jsx(NoteItem, { n: n, c: c, under: true }, n.id)) })] })) : null] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.2.0",
+  "version": "0.4.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",