@supersuit/artifacts 0.7.1 → 0.9.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.9.0 (2026-09-27)
+
+**A host can word its own sign-in door.** `signInNote` on `createArtifactRoutes` replaces the
+door's line on a gated page. The default still names the Freedom account, so every host that
+passes nothing reads exactly as before. A host that signs readers in itself, rather than through
+a Freedom account, needs the door to say so, or readers are told to use an account they do not
+have.
+
+- DETECTOR: a host whose `signInOrigin` is not a Freedom account service, and whose door still
+  says "your Freedom account".
+- REMEDY: bump and pass `signInNote`.
+- Tests: `gated.test.tsx` pins the default line and a host's own line replacing it.
+
+## 0.8.0 (2026-09-27)
+
+**Pages play audio clips.** `![caption](clip.mp3)` renders a captioned player with native
+controls, the way `![alt](x.mp4)` already renders a video. An annotated conversation, a voice
+note, or a quote meant to be heard can now sit in the prose it belongs to, instead of on a
+second page or a download link. mp3 was already an accepted asset type; nothing rendered it.
+
+- `preload="none"`, never `autoplay`: a page of twenty clips fetches nothing until one is pressed.
+- The alt is the clip's caption, shown above the player and escaped as text.
+- DETECTOR: a page with an `.mp3` in image syntax that renders a broken image.
+- REMEDY: bump; republishing is not needed, the markdown is rendered on request.
+- Tests: `render.test.tsx` pins the audio element, its attributes, the caption and the escaping.
+
 ## 0.7.1 (2026-09-27)
 
 **The narrator reads the subtitle.** `narrationText` built the spoken text from the title, the

package/lib/artifacts/confidential.d.ts

@@ -25,9 +25,13 @@ export declare function Watermark({ email }: {
 }): import("react").JSX.Element;
 /** Printing shows this and nothing else, whichever way the print dialog was reached. */
 export declare const NO_PRINT_CSS = "@media print { body * { visibility: hidden !important; } body::after { content: \"This page is confidential and cannot be printed.\"; visibility: visible; position: fixed; top: 40%; left: 0; right: 0; text-align: center; font: 16px sans-serif; color: #000; } }";
-export declare function SignInDoor({ brand, href }: {
+/** The door's default line, for a host whose readers sign in with a Freedom account. A host
+ *  that signs readers in some other way passes `signInNote` to say so in its own words. */
+export declare const DEFAULT_SIGN_IN_NOTE = "This page is confidential. Sign in with the Google account your Freedom account uses, or the address it was shared with.";
+export declare function SignInDoor({ brand, href, note }: {
     brand: BrandPack;
     href?: string;
+    note?: string;
 }): import("react").JSX.Element;
 export declare function NotAllowedDoor({ brand, reader, signOutUrl }: {
     brand: BrandPack;

package/lib/artifacts/confidential.js

@@ -19,12 +19,15 @@ export function Watermark({ email }) {
 }
 /** Printing shows this and nothing else, whichever way the print dialog was reached. */
 export const NO_PRINT_CSS = `@media print { body * { visibility: hidden !important; } body::after { content: "This page is confidential and cannot be printed."; visibility: visible; position: fixed; top: 40%; left: 0; right: 0; text-align: center; font: 16px sans-serif; color: #000; } }`;
-export function SignInDoor({ brand, href }) {
+/** The door's default line, for a host whose readers sign in with a Freedom account. A host
+ *  that signs readers in some other way passes `signInNote` to say so in its own words. */
+export const DEFAULT_SIGN_IN_NOTE = 'This page is confidential. Sign in with the Google account your Freedom account uses, or the address it was shared with.';
+export function SignInDoor({ brand, href, note = DEFAULT_SIGN_IN_NOTE }) {
     // No href means the host configured no sign-in authority: the door stays, with no way through.
     if (!href) {
         return (_jsx("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: _jsx("p", { className: "text-sm opacity-70", children: "This page is confidential, and this site cannot sign readers in yet." }) }));
     }
-    return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: [_jsx("p", { className: "text-sm opacity-70", children: "This page is confidential. Sign in with the Google account your Freedom account uses, or the address it was shared with." }), _jsx("a", { href: href, className: "mt-5 inline-block rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Sign in to read" })] }));
+    return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: [_jsx("p", { className: "text-sm opacity-70", children: note }), _jsx("a", { href: href, className: "mt-5 inline-block rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Sign in to read" })] }));
 }
 export function NotAllowedDoor({ brand, reader, signOutUrl }) {
     return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center text-sm", children: [_jsxs("p", { className: "opacity-80", children: ["You are signed in as ", reader.email, ", and this page has not been shared with that address. If it was sent to a different address of yours, sign out and use that one."] }), _jsx("p", { className: "mt-3 opacity-60", children: "This attempt was recorded." }), _jsx("a", { href: signOutUrl, className: "mt-5 inline-block underline", style: { color: brand.accent }, children: "Sign out" })] }));

package/lib/artifacts/render.js

@@ -52,6 +52,10 @@ export function isReachableHref(href) {
  *  is decoded frame by frame on the CPU and stuttered on an iPhone at 24fps (2026-09-27); video
  *  is decoded in hardware. */
 const VIDEO = /\.mp4(?:[?#].*)?$/i;
+/** `![caption](x.mp3)` is a clip the reader plays: an annotated conversation, a voice note, a
+ *  quote heard rather than read. Native controls, and `preload="none"` so a page of clips fetches
+ *  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;
 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
@@ -62,6 +66,10 @@ function InlineVideo({ src, label }) {
     const html = `<video src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" data-artifact-video muted loop playsinline preload="metadata" disablepictureinpicture class="block w-full"></video>`;
     return _jsx("span", { className: "my-6 block overflow-hidden rounded-lg border border-[color:var(--a-line)]", dangerouslySetInnerHTML: { __html: html } });
 }
+function InlineAudio({ src, label }) {
+    const html = `<audio src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" data-artifact-audio controls preload="none" class="block w-full"></audio>`;
+    return (_jsxs("span", { className: "my-6 block rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-surface)] px-4 py-3", children: [label ? _jsx("span", { className: "mb-2 block text-sm text-[color:var(--a-strong)]", children: label }) : null, _jsx("span", { className: "block", dangerouslySetInnerHTML: { __html: html } })] }));
+}
 const components = {
     p: ({ children }) => _jsx("p", { className: "my-4 leading-relaxed", children: children }),
     ul: ({ children }) => _jsx("ul", { className: "my-4 list-disc space-y-1 pl-6", children: children }),
@@ -70,7 +78,7 @@ const components = {
     table: ({ children }) => (_jsx("div", { className: "my-6 overflow-x-auto", children: _jsx("table", { className: "w-full border-collapse text-sm", children: children }) })),
     th: ({ children }) => (_jsx("th", { className: "border-b border-[color:var(--a-line-strong)] px-3 py-2 text-left font-semibold text-[color:var(--a-strong)]", children: children })),
     td: ({ children }) => _jsx("td", { className: "border-b border-[color:var(--a-line)] px-3 py-2 align-top", children: children }),
-    img: ({ src, alt }) => typeof src === 'string' && VIDEO.test(src) ? (_jsx(InlineVideo, { src: src, label: alt ?? '' })) : (
+    img: ({ src, alt }) => typeof src === 'string' && VIDEO.test(src) ? (_jsx(InlineVideo, { src: src, label: alt ?? '' })) : typeof src === 'string' && AUDIO.test(src) ? (_jsx(InlineAudio, { src: src, label: alt ?? '' })) : (
     // eslint-disable-next-line @next/next/no-img-element
     _jsx("img", { src: typeof src === 'string' ? src : undefined, alt: alt ?? '', className: "my-6 w-full rounded-lg border border-[color:var(--a-line)]" })),
     a: ({ href, children }) => !isReachableHref(href) ? (_jsx("span", { children: children })) : (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-[color:var(--a-strong)] underline decoration-[color:var(--a-line-strong)] underline-offset-4 hover:decoration-[color:var(--a-strong)]", children: [children, href && hostOf(href) ? (_jsxs("span", { "data-nospeak": true, className: "ml-1 text-xs text-[color:var(--a-muted)]", children: ["(", hostOf(href), ")"] })) : null] })),

package/lib/routes/artifacts.d.ts

@@ -32,6 +32,9 @@ export type ArtifactRoutesConfig = {
     /** The sign-in authority's origin; readers go to `<signInOrigin>/artifact/sign-in?to=<page>`.
      *  No default: without it a gated page shows its door with no way through (fails closed). */
     signInOrigin?: string;
+    /** The line on the sign-in door, for a host whose readers do not sign in with a Freedom
+     *  account. Default names the Freedom account. */
+    signInNote?: string;
     /** Who the banner says grants access, e.g. "Example Co". Default the brand name. */
     owner?: string;
     /** The address the state routes' rate limit counts by. Default reads the first hop of

package/lib/routes/artifacts.js

@@ -151,7 +151,7 @@ export function createArtifactRoutes(config) {
                 void config.readers.flag({ artifactId: id, reader: d.reader, kind: 'refused' }).catch(() => { });
             return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [header, d.why === 'not-allowed'
                         ? _jsx(NotAllowedDoor, { brand: brand, reader: d.reader, signOutUrl: signOutUrl(id) })
-                        : _jsx(SignInDoor, { brand: brand, href: signInOrigin ? signInUrl(signInOrigin, here) : undefined })] }));
+                        : _jsx(SignInDoor, { brand: brand, href: signInOrigin ? signInUrl(signInOrigin, here) : undefined, note: config.signInNote })] }));
         }
         const r = reader;
         // The agreement comes before the body, every reader, once per page. No agreement, no body.

package/package.json

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