@supersuit/artifacts 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 `@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.29.0
+
+**The "comment can't be shown" notice is a readable card with a way in.** 0.28.0 drew it as a pill
+across the top of the page, over the title, and told a signed-out reader to sign in with nothing to
+press.
+
+- A card at the top of the screen, inset from the edges, at most 24rem wide, with the message, a
+  close button and, for a signed-out reader, a **Sign in** button.
+- Sign in returns to the exact address, `#comment-<id>` included, so the reader lands on the
+  comment once signed in.
+- DETECTOR: open a link to a comment you cannot see, signed out. A pill with no button means 0.28.0.
+- REMEDY: update the dependency.
+- Tests: `comment-layer.test.tsx` (the Sign in link returns to the comment's address). `test:packed`
+  green.
+
 ## 0.28.0
 
 **A link to a comment opens for the page's admins, and says so when it cannot.** On an owner-only

package/lib/reader/comment-layer.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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
@@ -37,6 +37,18 @@ import { boxOf, headingAt, indexText, offsetAt, placeAnchor, regionFrom } from '
 const isValue = (v) => !!v && typeof v === 'object' && typeof v.body === 'string' && !!v.anchor && typeof v.anchor === 'object';
 const LONG_PRESS_MS = 400;
 const HASH = /^#comment-([A-Za-z0-9_-]{1,128})$/;
+/** The sign-in link, returning to this exact address, hash included, so a reader who signs in to
+ *  see a linked comment lands on it. */
+function signInBack(signIn) {
+    try {
+        const u = new URL(signIn);
+        u.searchParams.set('to', window.location.href);
+        return u.toString();
+    }
+    catch {
+        return signIn;
+    }
+}
 /** The entry id a `#comment-<id>` hash names, or null. */
 const commentHashId = (hash) => HASH.exec(hash)?.[1] ?? null;
 const DRAG_PX = 8;
@@ -480,7 +492,7 @@ 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: [missing ? (_jsxs("div", { "data-comment-missing": true, role: "status", className: "fixed left-1/2 top-4 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] px-4 py-2 text-sm text-[color:var(--a-strong)] shadow-lg", children: [_jsxs("span", { children: ["That comment can't be shown to you. Comments on this page are visible to its owner and admins", signedIn ? '' : '; sign in if that is you', "."] }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setMissing(false), className: "opacity-70", children: "\u00D7" })] })) : null, 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 ? (
+    const overlay = mounted ? (_jsxs("div", { "data-comment-ui": true, "data-nospeak": true, className: "font-sans", style: theme, children: [missing ? (_jsxs("div", { "data-comment-missing": true, role: "status", className: "fixed inset-x-3 top-3 z-50 mx-auto max-w-sm rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-4 font-sans text-sm leading-snug text-[color:var(--a-strong)] shadow-xl", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("p", { className: "m-0 flex-1", children: "That comment can't be shown to you. Comments on this page are visible to its owner and admins." }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setMissing(false), className: "-mr-1 -mt-1 px-1 text-lg leading-none opacity-60", children: "\u00D7" })] }), !signedIn && signIn ? (_jsx("a", { "data-comment-missing-sign-in": true, href: signInBack(signIn), className: "mt-3 inline-block rounded-full px-4 py-1.5 font-medium no-underline", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: "Sign in" })) : null] })) : null, 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.

package/package.json

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