@supersuit/artifacts 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 `@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.4.7 (2026-09-27)
+
+**A page of videos opens as fast as a page of text.**
+
+- 0.4.6 marked every inline video `autoplay`, so all of them downloaded the moment the page opened
+  (21 diagrams, 6.8 MB, competing with the text and narration on a phone). The markup now carries
+  `preload="metadata"` and `data-artifact-video` instead, and a small client component,
+  `VideoAutoplay`, mounted only on pages that embed an `.mp4`, loads and plays each video as it
+  comes within a screen of view and pauses it when it leaves.
+- **DETECTOR:** a page with many inline videos is slow to become readable on cellular.
+- **REMEDY:** update the dependency; no host change.
+- **Tests:** the markup no longer autoplays and preloads only metadata; `VideoAutoplay` plays a
+  video only once it intersects, raises its preload, and pauses it when it leaves.
+
+## 0.4.6 (2026-09-27)
+
+**Pages play video: `![alt](x.mp4)` is a silent, looping, autoplaying inline video.**
+
+- Animated WebP is decoded frame by frame on the CPU and stuttered on an iPhone at 24fps; video
+  is decoded in hardware. Image syntax pointing at an `.mp4` now renders
+  `<video autoplay muted loop playsinline>` with the alt text as its `aria-label`, in the same
+  rounded frame an image gets. It is written as markup because React leaves `muted` out of
+  server HTML, and iOS will not autoplay a video whose markup is not muted.
+- `mp4` (`video/mp4`) joins the allowed asset types for `PUT_ASSET` and `UPLOAD`.
+- **DETECTOR:** a published `.mp4` renders as a broken image, or its upload answers 415.
+- **REMEDY:** update the dependency; no host change.
+- **Tests:** an `.mp4` renders a muted, looping, inline, autoplaying video labelled by its alt
+  text and a `.png` still renders an image; `d.mp4` maps to `video/mp4`.
+
 ## 0.4.5 (2026-09-27)
 
 **The bubble ground looks as it did in 0.4.2, and stays smooth.**

package/lib/artifacts/assets.js

@@ -15,6 +15,7 @@ export const ASSET_TYPES = {
     jpeg: 'image/jpeg',
     gif: 'image/gif',
     mp3: 'audio/mpeg',
+    mp4: 'video/mp4',
     json: 'application/json',
 };
 export function contentTypeFor(name) {

package/lib/artifacts/render.js

@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { hasNotesWidget, headingsOf } from './widgets.js';
 import { HeadingNotes, NoteToggle, NotesEarlier, NotesProvider } from '../widgets/notes.js';
+import { VideoAutoplay } from '../reader/video-autoplay.js';
 // Every colour is a theme variable (brand/theme.ts), so a page follows its light, dark or system mode.
 const GOLD = 'var(--a-accent)';
 function hostOf(url) {
@@ -45,6 +46,20 @@ const REACHABLE = /^(?:[a-z][a-z0-9+.-]*:|\/|#)/i;
 export function isReachableHref(href) {
     return typeof href === 'string' && REACHABLE.test(href);
 }
+/** `![alt](x.mp4)` plays as video: an animation that must stay smooth on a phone. Animated WebP
+ *  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;
+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
+// HTML, and iOS refuses to play a video unprompted whose markup is not muted. `playsinline` keeps
+// iPhone from going full screen. No `autoplay`: VideoAutoplay starts each one as it nears the
+// screen, so a page of videos does not download them all on open.
+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 } });
+}
 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 }),
@@ -53,7 +68,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 }) => (
+    img: ({ src, alt }) => typeof src === 'string' && VIDEO.test(src) ? (_jsx(InlineVideo, { 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] })),
@@ -136,5 +151,5 @@ export function ArtifactMarkdown({ markdown, notes }) {
     const body = (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: on ? notesComponents(headings) : pageComponents(headings), children: markdown }));
     return (
     // break-words: a bare URL in prose is one unbreakable word and pushed phones 7px sideways (2026-09-26).
-    _jsx("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 }));
+    _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] }));
 }

package/lib/reader/video-autoplay.d.ts

@@ -0,0 +1 @@
+export declare function VideoAutoplay(): null;

package/lib/reader/video-autoplay.js

@@ -0,0 +1,31 @@
+'use client';
+// Plays each inline video only while it is near the screen. With `autoplay` in the markup every
+// video on the page downloads the moment it opens (the Freedom whitepaper: 21 diagrams, 6.8 MB,
+// competing with the text and the narration on a phone). Here a video loads and plays as it
+// comes within a screen of view and pauses when it leaves, so opening the page costs the text.
+import { useEffect } from 'react';
+export function VideoAutoplay() {
+    useEffect(() => {
+        const videos = Array.from(document.querySelectorAll('video[data-artifact-video]'));
+        if (!videos.length || typeof IntersectionObserver === 'undefined') {
+            for (const v of videos)
+                void v.play?.().catch(() => { });
+            return;
+        }
+        const io = new IntersectionObserver((entries) => {
+            for (const e of entries) {
+                const v = e.target;
+                if (e.isIntersecting) {
+                    v.preload = 'auto';
+                    void v.play().catch(() => { });
+                }
+                else
+                    v.pause();
+            }
+        }, { rootMargin: '100% 0px' });
+        for (const v of videos)
+            io.observe(v);
+        return () => io.disconnect();
+    }, []);
+    return null;
+}

package/lib/routes/artifacts.js

@@ -349,7 +349,7 @@ export function createArtifactRoutes(config) {
             return NextResponse.json({ error: 'asset name must be one path segment: letters, digits, dot, dash, underscore' }, { status: 400 });
         const type = contentTypeFor(name);
         if (!type)
-            return NextResponse.json({ error: 'asset type not allowed; use webp, png, jpg, gif, mp3 or json' }, { status: 415 });
+            return NextResponse.json({ error: 'asset type not allowed; use webp, png, jpg, gif, mp3, mp4 or json' }, { status: 415 });
         const bytes = Buffer.from(await request.arrayBuffer());
         if (bytes.length === 0)
             return NextResponse.json({ error: 'empty body' }, { status: 400 });
@@ -379,7 +379,7 @@ export function createArtifactRoutes(config) {
             return NextResponse.json({ error: 'asset name must be one path segment: letters, digits, dot, dash, underscore' }, { status: 400 });
         const type = contentTypeFor(name);
         if (!type)
-            return NextResponse.json({ error: 'asset type not allowed; use webp, png, jpg, gif, mp3 or json' }, { status: 415 });
+            return NextResponse.json({ error: 'asset type not allowed; use webp, png, jpg, gif, mp3, mp4 or json' }, { status: 415 });
         const body = (await request.json().catch(() => ({})));
         const digest = typeof body.digest === 'string' ? body.digest : '';
         if (!ASSET_DIGEST.test(digest))

package/package.json

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