@supersuit/artifacts 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 `@supersuit/artifacts`. One entry per version, newest first. Each entry says what changed, how a
 host can tell whether it is affected (DETECTOR), what a host does about it (REMEDY), and the tests.
 
+## 0.19.0 (2026-09-30)
+
+**A code block has a copy button, and it wraps.** Both were found on one page: an operator
+published a setup page to open on somebody else's laptop, where a paste-in briefing WAS the page,
+and there was nothing to press and nothing readable to select. The block rendered 9,089px wide
+with every line clipped at the right edge, because a fence here usually holds prose written as
+one long line per paragraph and `white-space: pre` does not wrap those.
+
+`render.test.tsx` had a case called *gives fenced code a copy affordance* that only ever checked
+for the `data-artifact-code` attribute the affordance would hang on, so the host shipped with the
+hook and no button and the suite stayed green.
+
+- New client component `CodeCopy` (`reader/code-copy.js`), mounted by `ArtifactMarkdown` only when
+  the markdown holds a fence. It reads the `<code>`, never `pre.textContent`, so its own label
+  does not land in the paste, and it falls back to a hidden textarea where `navigator.clipboard`
+  is undefined, which is any page served over plain http.
+- Fences render `whitespace-pre-wrap [overflow-wrap:anywhere]` with `pr-16` to clear the button.
+  Soft wrapping inserts no characters, so what a reader copies is byte for byte what was written.
+- DETECTOR: open any page with a fenced block. No button in its top-right corner, or a long line
+  running off the right edge, means this version is not deployed.
+- REMEDY: bump.
+- Tests: one copy button per block and it copies that block; the label stays out of the paste;
+  the no-clipboard fallback; nothing added twice and everything removed on unmount; the fence
+  carries `whitespace-pre-wrap`; and the mount happens only when a fence is present. The wrap
+  test is red against 0.18.1.
+
+## 0.18.1 (2026-09-29)
+
+**On a phone, the Comment button sits at the top of the screen.** It used to appear just under
+the selection, which is exactly where iOS draws its own Copy / Look Up menu, so the two fought for
+the same tap (the operator, on an iPhone: *"I keep trying to fight with the Apple pop-up"*). With a
+coarse pointer the button is fixed at the top, below the safe area; a mouse keeps it by the text.
+
+- New export `onTouch()` from the comment layer (the `(pointer: coarse)` test it uses).
+- DETECTOR: on a phone, the Comment button appears beside the selection.
+- REMEDY: bump.
+- Tests: a GUARD that a coarse pointer puts the button at the top (`data-comment-chip-at="top"`,
+  fixed, below `safe-area-inset-top`); the mouse test asserts `selection`.
+
 ## 0.18.0 (2026-09-29)
 
 **No page is ever read by the browser's own voice, and a page can turn its audio off.** 0.10.0

package/lib/artifacts/render.js

@@ -13,6 +13,7 @@ import { unified } from 'unified';
 import { blocksOf, hasNotesWidget, headingsOf } from './widgets.js';
 import { HeadingNotes, NoteToggle, NotesEarlier, NotesProvider } from '../widgets/notes.js';
 import { VideoAutoplay } from '../reader/video-autoplay.js';
+import { CodeCopy } from '../reader/code-copy.js';
 import { DefinitionLayer } from '../reader/definition-layer.js';
 import { remarkDefinitions } from './definitions.js';
 // Every colour is a theme variable (brand/theme.ts), so a page follows its light, dark or system mode.
@@ -66,6 +67,9 @@ const VIDEO = /\.mp4(?:[?#].*)?$/i;
  *  nothing until one is pressed. The alt is its caption, shown above the player. */
 const AUDIO = /\.mp3(?:[?#].*)?$/i;
 const VIDEO_IN_MD = /\]\([^)\s]+\.mp4(?:[?#][^)]*)?\)/i;
+// A fenced block, which `links` and `notes` fences are too; mounting for those costs one
+// no-op effect and is cheaper than parsing the markdown twice to find out.
+const CODE_IN_MD = /^```/m;
 const escapeAttr = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 // Written as markup, not JSX: React renders `muted` as a property and leaves it out of server
 // HTML, and iOS refuses to play a video unprompted whose markup is not muted. `playsinline` keeps
@@ -134,7 +138,13 @@ function baseComponents(block, figure) {
             const cls = inner?.props?.className ?? '';
             if (/language-(links|notes)/.test(cls))
                 return _jsx(_Fragment, { children: children });
-            return (_jsx("pre", { ...block(node), "data-artifact-code": true, className: "my-6 overflow-x-auto rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-code)] p-4 text-sm text-[color:var(--a-strong)]", children: children }));
+            return (_jsx("pre", { ...block(node), "data-artifact-code": true, 
+                // whitespace-pre-wrap, because a fence here usually holds PROSE meant to be pasted
+                // somewhere, written as one long line per paragraph. Under `pre` those lines do not
+                // wrap: a 7 KB briefing rendered as a box 9,089px wide with every line clipped at the
+                // right edge (2026-09-30). Soft wrapping inserts no characters, so what the reader
+                // copies is still byte for byte what the author wrote.
+                className: "my-6 overflow-x-auto whitespace-pre-wrap [overflow-wrap:anywhere] rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-code)] p-4 pr-16 text-sm text-[color:var(--a-strong)]", children: children }));
         },
         blockquote: ({ node, children }) => {
             const t = textOf(children).trim();
@@ -268,5 +278,5 @@ export function ArtifactMarkdown({ markdown, notes, definitions, Section, figure
     const body = (_jsx(ReactMarkdown, { remarkPlugins: plugins, components: components, children: markdown }));
     return (
     // break-words: a bare URL in prose is one unbreakable word and pushed phones 7px sideways (2026-09-26).
-    _jsxs("div", { className: "break-words text-[17px] text-[color:var(--a-body)]", children: [on ? (_jsx(NotesProvider, { artifactId: notes.artifactId, headings: headings.map(({ slug, text }) => ({ slug, text })), accent: notes.accent, children: body })) : body, VIDEO_IN_MD.test(markdown) ? _jsx(VideoAutoplay, {}) : null, defined ? (_jsxs(_Fragment, { children: [_jsx("style", { children: DEFINED_TERM_CSS }), _jsx(DefinitionLayer, {})] })) : null] }));
+    _jsxs("div", { className: "break-words text-[17px] text-[color:var(--a-body)]", children: [on ? (_jsx(NotesProvider, { artifactId: notes.artifactId, headings: headings.map(({ slug, text }) => ({ slug, text })), accent: notes.accent, children: body })) : body, VIDEO_IN_MD.test(markdown) ? _jsx(VideoAutoplay, {}) : null, CODE_IN_MD.test(markdown) ? _jsx(CodeCopy, {}) : null, defined ? (_jsxs(_Fragment, { children: [_jsx("style", { children: DEFINED_TERM_CSS }), _jsx(DefinitionLayer, {})] })) : null] }));
 }

package/lib/reader/code-copy.d.ts

@@ -0,0 +1 @@
+export declare function CodeCopy(): null;

package/lib/reader/code-copy.js

@@ -0,0 +1,77 @@
+'use client';
+// A copy button on every code block, and it is the point of a code block here rather than a
+// convenience on top of it. This host's fences mostly hold something the reader is meant to
+// PUT somewhere: a command to run, a prompt to paste into their own agent. Until now the only
+// way to take one was to select it by hand, and on a phone, inside a horizontally scrolling
+// box, that is most of a minute of fighting the selection handles.
+//
+// Earned 2026-09-30: an operator published a setup page to open on somebody else's laptop,
+// with the paste-in block as the whole reason the page existed, and there was nothing to press.
+import { useEffect } from 'react';
+const COPY = 'Copy';
+const DONE = 'Copied';
+export function CodeCopy() {
+    useEffect(() => {
+        const pres = Array.from(document.querySelectorAll('pre[data-artifact-code]'));
+        const timers = [];
+        const added = [];
+        for (const pre of pres) {
+            if (pre.querySelector('[data-artifact-copy]'))
+                continue;
+            // The button is positioned against the pre, so the pre becomes the containing block. It
+            // is set here rather than in the class list because the server render must stay valid
+            // with no JavaScript: a page with this component disabled shows a plain block.
+            pre.style.position = 'relative';
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.dataset.artifactCopy = 'true';
+            btn.textContent = COPY;
+            btn.setAttribute('aria-label', 'Copy this block');
+            btn.className =
+                'absolute right-2 top-2 rounded-md border px-2 py-1 text-xs opacity-70 ' +
+                    'transition hover:opacity-100 focus-visible:opacity-100';
+            btn.style.borderColor = 'var(--a-line)';
+            btn.style.color = 'var(--a-strong)';
+            btn.style.background = 'var(--a-code)';
+            btn.addEventListener('click', () => {
+                // The button lives inside the pre, so its own label would be copied with the code.
+                const code = pre.querySelector('code');
+                const text = (code ?? pre).textContent ?? '';
+                const done = () => {
+                    btn.textContent = DONE;
+                    timers.push(setTimeout(() => { btn.textContent = COPY; }, 1600));
+                };
+                // navigator.clipboard is undefined on a page served over plain http, which is every
+                // local preview, so the textarea path is a real fallback rather than old-browser
+                // defensiveness.
+                if (navigator.clipboard?.writeText) {
+                    navigator.clipboard.writeText(text).then(done, () => { btn.textContent = 'Press to select'; });
+                    return;
+                }
+                const ta = document.createElement('textarea');
+                ta.value = text;
+                ta.style.position = 'fixed';
+                ta.style.opacity = '0';
+                document.body.appendChild(ta);
+                ta.select();
+                try {
+                    document.execCommand('copy');
+                    done();
+                }
+                catch {
+                    btn.textContent = 'Press to select';
+                }
+                ta.remove();
+            });
+            pre.appendChild(btn);
+            added.push(btn);
+        }
+        return () => {
+            for (const t of timers)
+                clearTimeout(t);
+            for (const b of added)
+                b.remove();
+        };
+    }, []);
+    return null;
+}

package/lib/reader/comment-layer.d.ts

@@ -1,6 +1,8 @@
 import { type CommentsMode } from '../artifacts/comments.js';
 import { type VoiceHost } from './voice-recorder.js';
 import { type DeviceAudio } from './device-audio.js';
+/** A finger rather than a mouse: the comment button then goes where the OS menu is not. */
+export declare function onTouch(): boolean;
 export declare function CommentLayer({ artifactId, rootId, ownerName, comments, canShare, signedIn, isOwner, version, accent, ground, signIn, voice, audioStore, }: {
     artifactId: string;
     /** The element holding the page's prose, the same root the read-aloud lights. */

package/lib/reader/comment-layer.js

@@ -74,6 +74,10 @@ const personalFrom = (notes, where) => notes.filter((n) => isValue(n.value)).map
     id: n.id, kind: 'personal', where, value: n.value, name: 'You', mine: true, at: n.at,
     ...(typeof n.audioUrl === 'string' ? { audioUrl: n.audioUrl } : {}),
 }));
+/** A finger rather than a mouse: the comment button then goes where the OS menu is not. */
+export function onTouch() {
+    return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
+}
 export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare, signedIn, isOwner, version, accent, ground, signIn, voice, audioStore, }) {
     const host = useMemo(() => voice ?? hostVoice(artifactId), [voice, artifactId]);
     const audioDb = useMemo(() => audioStore ?? defaultDeviceAudio, [audioStore]);
@@ -464,7 +468,11 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
     const open = layout.placed.find((p) => p.item.id === thread);
     const openItem = open?.item ?? layout.earlier.find((i) => i.id === thread);
     const count = tops.length;
-    const overlay = mounted ? (_jsxs("div", { "data-comment-ui": true, "data-nospeak": true, className: "font-sans", style: theme, children: [showPins ? layout.placed.map(({ item, left, top, box }) => (_jsxs("div", { children: [box ? (_jsx("div", { "data-comment-box": item.id, "aria-hidden": true, className: "pointer-events-none absolute z-30 rounded-md border-2", style: { left: box.left, top: box.top, width: box.width, height: box.height, borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', opacity: thread === item.id ? 1 : 0.55 } })) : null, _jsx(Pin, { item: item, left: left, top: top, accent: accent, ground: ground, onOpen: () => setThread(thread === item.id ? null : item.id) })] }, item.id))) : null, chip && !draft ? (_jsx("button", { type: "button", "data-comment-chip": true, className: "absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg", style: { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo) => saveNew(body, share, draft, memo), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, accent: accent, audioDb: audioDb, onClose: () => setThread(null), onRemove: remove, onEdit: edit, onReply: reply }) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
+    const overlay = mounted ? (_jsxs("div", { "data-comment-ui": true, "data-nospeak": true, className: "font-sans", style: theme, children: [showPins ? layout.placed.map(({ item, left, top, box }) => (_jsxs("div", { children: [box ? (_jsx("div", { "data-comment-box": item.id, "aria-hidden": true, className: "pointer-events-none absolute z-30 rounded-md border-2", style: { left: box.left, top: box.top, width: box.width, height: box.height, borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', opacity: thread === item.id ? 1 : 0.55 } })) : null, _jsx(Pin, { item: item, left: left, top: top, accent: accent, ground: ground, onOpen: () => setThread(thread === item.id ? null : item.id) })] }, item.id))) : null, chip && !draft ? (
+            // On a phone the button sits at the TOP of the screen, never beside the selection: that is
+            // where iOS draws its own Copy / Look Up menu, and the two fought for the same tap (Gary,
+            // 2026-09-29: "I keep trying to fight with the Apple pop-up"). A mouse keeps it by the text.
+            _jsx("button", { type: "button", "data-comment-chip": true, "data-comment-chip-at": onTouch() ? 'top' : 'selection', className: onTouch() ? 'fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-5 py-2 text-sm font-medium shadow-lg' : 'absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg', style: onTouch() ? { top: 'calc(env(safe-area-inset-top, 0px) + 12px)', background: accent, color: 'var(--a-on-accent, #111)' } : { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo) => saveNew(body, share, draft, memo), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, accent: accent, audioDb: audioDb, onClose: () => setThread(null), onRemove: remove, onEdit: edit, onReply: reply }) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
     return (_jsxs(_Fragment, { children: [_jsx("span", { hidden: true, "data-comment-layer": comments, "data-comment-can-share": canShare ? 'yes' : 'no' }), mounted && layout.earlier.length ? (_jsxs("section", { "data-comments-earlier": true, "data-comment-ui": true, "data-nospeak": true, className: "mx-auto max-w-2xl px-6 pb-16 text-sm", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: "Comments on earlier versions" }), _jsx("ul", { className: "m-0 mt-2 grid list-none gap-3 p-0", children: layout.earlier.map((item) => (_jsxs("li", { "data-comment-earlier-id": item.id, ...(highlight === item.id ? { 'data-comment-highlight': '' } : {}), className: "m-0 border-l-2 py-1 pl-3", style: { borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', ...(highlight === item.id ? { background: `color-mix(in srgb, ${accent} 14%, transparent)` } : {}) }, children: [item.value.anchor.kind === 'text' ? _jsxs("span", { className: "block text-[13px] italic opacity-70", children: ["\u201C", item.value.anchor.quote, "\u201D"] }) : _jsx("span", { className: "block text-[13px] italic opacity-70", children: "A box on part of the page that has changed" }), _jsx("span", { className: "block whitespace-pre-wrap text-[15px] text-[color:var(--a-strong)]", children: item.value.body }), _jsxs("span", { className: "block text-xs opacity-60", children: [item.kind === 'personal' ? 'only you' : item.name, ` · version ${item.value.version}`, item.mine ? _jsx("button", { type: "button", onClick: () => void remove(item), className: "ml-2 underline", children: "delete" }) : null] })] }, item.id))) })] })) : null, overlay ? createPortal(overlay, document.body) : null] }));
 }
 function Pin({ item, left, top, accent, ground, onOpen }) {

package/package.json

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