@supersuit/artifacts 0.4.5 → 0.4.6

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.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

@@ -45,6 +45,18 @@ 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 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 autoplay a video whose markup is not muted. `playsinline` keeps
+// iPhone from going full screen.
+function InlineVideo({ src, label }) {
+    const html = `<video src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" autoplay muted loop playsinline preload="auto" 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 +65,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] })),

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.6",
   "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",