@supersuit/artifacts 0.44.0 → 0.44.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 `@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.44.1
+
+**Highlighting text works like any page again.** A press in the gap between paragraphs, in a line's
+empty end, around a table or a list used to start the dashed comment box, so dragging to highlight
+or copy drew a box instead of selecting. A box now starts only on content with no text to select:
+an image, an SVG diagram, a canvas, a video, an iframe, a rule, an empty block, or anything marked
+`data-boxable`. Everywhere else the browser's own selection runs untouched, and a selection still
+shows the Comment chip as before.
+
+- DETECTOR: on a page with comments on, drag from the space between two paragraphs. Before, a
+  dashed box drew; now the text highlights.
+- REMEDY: update the dependency. A host that wants boxes on a custom element marks it
+  `data-boxable`.
+- Tests: `startsBox` in comment-layer.test.tsx, text and gaps select natively, image, diagram and
+  empty block start a box.
+
 ## 0.44.0
 
 **Voice notes with their own words, lit as they are spoken.** An audio line followed directly by a

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

@@ -3,6 +3,13 @@ import { type VoiceHost } from './voice-recorder.js';
 import { type DeviceAudio } from './device-audio.js';
 /** The line a resolved thread collapses to. */
 export declare const resolvedLine: (r: CommentResolution) => string;
+/**
+ * Whether a press here starts a comment box rather than the browser's own selection. Only on
+ * content with no text to select: a press in the gap between paragraphs, in a line's empty end,
+ * or anywhere in a text block is the start of a normal highlight, and a box there stole it
+ * (Gary, 2026-10-15: "it should also just allow people to do normal copying functionality").
+ */
+export declare function startsBox(el: Element): boolean;
 /** 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, closesAt, requireName, knownName, }: {

package/lib/reader/comment-layer.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Comments on any part of a page, Figma style. Select text and a "Comment" chip appears; hold and
-// drag over anything that is not text (an image, a table, the gap between paragraphs) and a box
-// draws. Either opens the card (comment-card.tsx), which says before anything is typed whether
+// drag on something that is not text (an image, a diagram, a video, an empty block) and a box
+// draws. Everywhere else the browser's own selection runs untouched, gaps between paragraphs
+// included, so copying and highlighting work as on any page. Either opens the card (comment-card.tsx), which says before anything is typed whether
 // the owner will ever read it.
 //
 // Two kinds, kept apart all the way down:
@@ -51,13 +52,21 @@ const resolvedOf = (item) => (item.kind === 'shared' ? resolutionOf(item.value)
 const DRAG_PX = 8;
 /** Where a drag never starts a box: controls, and anything that is somebody's words. */
 const NOT_FOR_BOXES = 'a, button, input, textarea, select, audio, video[controls], summary, label, [data-comment-ui], [data-note-toggle], [data-heading-notes], [data-artifact-notes], .artifact-defined-term, .artifact-word';
-function isTextTarget(el) {
-    if (el.closest(NOT_FOR_BOXES))
+/** What a box may start on: things a native selection cannot highlight. */
+const BOX_TARGETS = 'img, svg, canvas, picture, video, iframe, hr, [data-boxable]';
+/**
+ * Whether a press here starts a comment box rather than the browser's own selection. Only on
+ * content with no text to select: a press in the gap between paragraphs, in a line's empty end,
+ * or anywhere in a text block is the start of a normal highlight, and a box there stole it
+ * (Gary, 2026-10-15: "it should also just allow people to do normal copying functionality").
+ */
+export function startsBox(el) {
+    if (el.closest(NOT_FOR_BOXES) || el.closest('figcaption'))
+        return false;
+    if (el.closest(BOX_TARGETS))
         return true;
-    for (const c of Array.from(el.childNodes))
-        if (c.nodeType === Node.TEXT_NODE && c.textContent?.trim())
-            return true;
-    return false;
+    const block = el.closest('[data-block]');
+    return !!block && !block.textContent?.trim();
 }
 function sharedFrom(body) {
     const slot = body?.slots?.[COMMENTS_SLOT];
@@ -279,7 +288,7 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
         document.addEventListener('selectionchange', settle);
         return () => { clearTimeout(timer); root.removeEventListener('mouseup', check); root.removeEventListener('keyup', check); document.removeEventListener('selectionchange', settle); };
     }, [rootId]);
-    // Hold and drag over anything that is not text draws a box. A mouse starts after 8px of travel;
+    // Hold and drag on content with no text (startsBox) draws a box. A mouse starts after 8px of travel;
     // a finger after a 400 ms long-press, so an ordinary swipe still scrolls.
     const dragRef = useRef(null);
     useEffect(() => {
@@ -287,7 +296,7 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
         if (!root)
             return;
         const down = (e) => {
-            if (e.button !== 0 || !(e.target instanceof Element) || isTextTarget(e.target))
+            if (e.button !== 0 || !(e.target instanceof Element) || !startsBox(e.target))
                 return;
             const d = { x: e.clientX, y: e.clientY, armed: e.pointerType !== 'touch', drawing: false };
             if (e.pointerType === 'touch')
@@ -561,7 +570,7 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
             // 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: share, closed: closed, requireName: requireName, knownName: knownName, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo, by) => saveNew(body, share, draft, memo, by), 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' && share, awaiting: closesAt != null, askName: requireName && !knownName, onJump: jump, canResolve: openItem.kind === 'shared' && isOwner, startExpanded: expanded === openItem.id, accent: accent, audioDb: audioDb, onClose: () => { setThread(null); setExpanded(null); }, onRemove: remove, onEdit: edit, onReply: reply, onResolve: resolveThread }, openItem.id) })) : 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;
+            _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: share, closed: closed, requireName: requireName, knownName: knownName, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo, by) => saveNew(body, share, draft, memo, by), 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' && share, awaiting: closesAt != null, askName: requireName && !knownName, onJump: jump, canResolve: openItem.kind === 'shared' && isOwner, startExpanded: expanded === openItem.id, accent: accent, audioDb: audioDb, onClose: () => { setThread(null); setExpanded(null); }, onRemove: remove, onEdit: edit, onReply: reply, onResolve: resolveThread }, openItem.id) })) : 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 an image, 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": share ? '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: [resolvedOf(item) ? _jsxs("span", { "data-comment-resolved-line": true, className: "block text-[13px] font-medium", style: { color: accent }, children: ["\u2713 ", resolvedLine(resolvedOf(item))] }) : null, 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.44.0",
+  "version": "0.44.1",
   "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",