@supersuit/artifacts 0.18.1 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 `@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

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/package.json

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