@supersuit/artifacts 0.31.0 → 0.32.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 `@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.32.0
+
+**The page's owner and the hub's admins always get past a locked page's door** (Gary, 2026-10-11).
+Before, an admin who set a page to "only the list" without being on it landed on the door at their
+next reload. `decide()` takes a fourth argument, `staff`, which opens the page with
+`why: 'staff'`; the page, the agreement, the reading heartbeat and the state API all pass it.
+
+**Play from here stays inside the page's text column.** 0.31.1 bounded the bar by clipping
+ancestors, but the company host's card does not clip that way, so the pill still ran 2px past the
+card's edge at iPhone width. It is now also bounded by the narration root, the page as the reader
+sees it.
+
+- DETECTOR: as a hub admin not on a list-only page's list, open it: the door means 0.31.1. At iPhone
+  width on the company host, tap a word at the right edge: a pill past the card's edge means 0.31.1.
+- REMEDY: update the dependency. A host passing `admins` or `ownerEmail` needs nothing else.
+- Tests: `reader.test.ts` (staff opens signed in, never signed out), `gated.test.tsx` (an admin and
+  the owner read a list-only page they are not on; anyone else is still refused),
+  `artifact-reader-controls.test.tsx` (the bar stays 8px inside the text column).
+
+## 0.31.1
+
+**Play from here stays inside the page card, not only the screen.** 0.30.2 kept the bar inside
+the screen, but the company host draws the page in a rounded card that clips its content, so the
+bar's right end was still cut off at the card's edge.
+
+- The bar is bounded by every ancestor that clips (any overflow other than visible) as well as the
+  screen.
+- DETECTOR: at iPhone width on the company host, pause and tap a word at the right edge. A pill
+  whose right end is cut off means 0.30.2.
+- REMEDY: update the dependency.
+- Tests: `artifact-reader-controls.test.tsx` (a clipping card 10 to 380px keeps the bar's right edge
+  at 372px or less).
+
 ## 0.31.0
 
 **The owner and admins change a page's share and comment settings from the page menu, and a later

package/lib/artifacts/reader.d.ts

@@ -38,6 +38,10 @@ export type Decision = {
     open: true;
     why: 'member';
     reason: string;
+} | {
+    open: true;
+    why: 'staff';
+    reason: string;
 } | {
     open: false;
     why: 'signed-out';
@@ -48,10 +52,13 @@ export type Decision = {
 };
 export declare const MEMBER_REASON = "you are a Freedom user";
 export declare const LISTED_REASON = "you were given access to it by name";
+export declare const STAFF_REASON = "you are its owner or an admin of this hub";
 /** Whether this reader may open a page with this access level. The allowlist opens both
  *  levels; `freedom` also opens to any active Freedom account. A listed person's own reason
  *  wins over the membership one, because it is the truer account of why they are reading. */
-export declare function decide(access: Access, reader: Reader | null, allow: AllowEntry[]): Decision;
+/** `staff`: the reader is the page's owner or one of the hub's admins, who always get in, so an
+ *  admin who narrows a page to its list can never lock themselves out of it. */
+export declare function decide(access: Access, reader: Reader | null, allow: AllowEntry[], staff?: boolean): Decision;
 /** The name the banner addresses: the allowlist's name, then the account's, first word only. */
 export declare function firstName(reader: Reader, allow: AllowEntry[]): string | null;
 /** Where a reader goes to sign in, carrying the page they asked for. `switchAccount` tells the

package/lib/artifacts/reader.js

@@ -92,12 +92,17 @@ export function verifyGrant(secret, grant, now = Date.now()) {
 }
 export const MEMBER_REASON = 'you are a Freedom user';
 export const LISTED_REASON = 'you were given access to it by name';
+export const STAFF_REASON = 'you are its owner or an admin of this hub';
 /** Whether this reader may open a page with this access level. The allowlist opens both
  *  levels; `freedom` also opens to any active Freedom account. A listed person's own reason
  *  wins over the membership one, because it is the truer account of why they are reading. */
-export function decide(access, reader, allow) {
+/** `staff`: the reader is the page's owner or one of the hub's admins, who always get in, so an
+ *  admin who narrows a page to its list can never lock themselves out of it. */
+export function decide(access, reader, allow, staff = false) {
     if (!reader)
         return { open: false, why: 'signed-out' };
+    if (staff)
+        return { open: true, why: 'staff', reason: STAFF_REASON };
     const listed = allow.find((a) => a.email.trim().toLowerCase() === reader.email);
     if (listed)
         return { open: true, why: 'listed', reason: listed.reason?.trim() || LISTED_REASON };

package/lib/reader/artifact-reader.js

@@ -173,13 +173,32 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
         const el = offerRef.current;
         if (!offer || !el || offer.nudged)
             return;
-        const vw = document.documentElement.clientWidth || window.innerWidth;
+        // Inside the screen AND inside whatever box clips the bar (a host's rounded page card).
+        let lo = 0;
+        let hi = document.documentElement.clientWidth || window.innerWidth;
+        for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+            const o = getComputedStyle(p);
+            if (o.overflowX !== 'visible' || o.overflow !== 'visible') {
+                const b = p.getBoundingClientRect();
+                if (b.width > 0) {
+                    lo = Math.max(lo, b.left);
+                    hi = Math.min(hi, b.right);
+                }
+            }
+        }
+        // And inside the page's own text column, which is what a reader sees as the page.
+        const col = document.getElementById(rootId)?.getBoundingClientRect();
+        if (col && col.width > 0) {
+            lo = Math.max(lo, col.left);
+            hi = Math.min(hi, col.right);
+        }
+        const vw = hi;
         const r = el.getBoundingClientRect();
         // No layout to measure (a server render, a test DOM): leave the placement as computed.
-        const shift = r.width === 0 ? 0 : r.right > vw - 8 ? vw - 8 - r.right : r.left < 8 ? 8 - r.left : 0;
+        const shift = r.width === 0 ? 0 : r.right > vw - 8 ? vw - 8 - r.right : r.left < lo + 8 ? lo + 8 - r.left : 0;
         // Once per tap: measured again, an element with no layout would move forever.
         setOffer({ ...offer, left: offer.left + (Math.abs(shift) >= 1 ? shift : 0), nudged: true });
-    }, [offer]);
+    }, [offer, rootId]);
     useEffect(() => {
         const root = document.getElementById(rootId);
         if (!root)

package/lib/routes/artifacts.js

@@ -314,7 +314,7 @@ export function createArtifactRoutes(config) {
         // Only a host that signs readers in can know one; the read never fails the page.
         const reader = readerSecret() ? verifyGrant(readerSecret(), await readCookie(GRANT_COOKIE).catch(() => undefined)) : null;
         const allow = config.readers && reader ? await config.readers.allowList(id) : [];
-        const d = config.readers ? decide(a.access, reader, allow) : { open: false, why: 'signed-out' };
+        const d = config.readers ? decide(a.access, reader, allow, isAdmin(reader)) : { open: false, why: 'signed-out' };
         const header = (_jsxs("div", { className: "mx-auto max-w-2xl px-6 pt-24 pb-8 text-center sm:pt-28", children: [_jsx(Kicker, { to: a.to, brand: brand }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary })] }));
         if (!d.open) {
             if (d.why === 'not-allowed' && config.readers) {
@@ -455,7 +455,7 @@ export function createArtifactRoutes(config) {
         const a = await store.get(id);
         if (!reader || !a?.access)
             return back;
-        if (!decide(a.access, reader, await config.readers.allowList(id)).open)
+        if (!decide(a.access, reader, await config.readers.allowList(id), isAdmin(reader)).open)
             return back;
         await config.readers.acknowledge({ artifactId: id, reader, text: ackText(owner), country: request.headers.get('x-vercel-ip-country') ?? undefined });
         return back;
@@ -487,7 +487,7 @@ export function createArtifactRoutes(config) {
         if (!a?.access)
             return new NextResponse(null, { status: 404 });
         const allow = await config.readers.allowList(id);
-        if (!decide(a.access, reader, allow).open)
+        if (!decide(a.access, reader, allow, isAdmin(reader)).open)
             return new NextResponse(null, { status: 403 });
         const country = request.headers.get('x-vercel-ip-country') ?? undefined;
         if (b.kind === 'beat') {

package/lib/routes/state-routes.js

@@ -73,7 +73,7 @@ export function createStateRoutes(ctx) {
                 return { error: json({ error: 'this page is closed' }, 403) };
             if (!reader)
                 return { error: json({ error: 'sign in to answer', signIn }, 401) };
-            if (!decide(a.access, reader, await ctx.readers.allowList(id)).open)
+            if (!decide(a.access, reader, await ctx.readers.allowList(id), isOwner(reader)).open)
                 return { error: json({ error: 'this page is not open to you' }, 403) };
             // The page shows its body only after the agreement, so its answers wait for it too.
             if (!(await ctx.readers.acknowledged(id, reader.email)))

package/package.json

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