@supersuit/artifacts 0.4.4 → 0.4.6

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.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.**
+
+- The palette and layout changes of 0.4.3 and 0.4.4 are reverted: the six original pastels, the
+  original stacking and gradient. What stays is the performance fix, done differently: each bubble
+  carries its own `filter: blur(40px)` on its own layer (`will-change: transform`), so it is
+  rasterised once and slid, instead of one blur over the whole screen re-rasterised every frame.
+  The hard-light blend stays off; side by side the render is indistinguishable.
+- **DETECTOR:** the ground shows saturated magenta, teal or pink bubbles (0.4.3/0.4.4).
+- **REMEDY:** update the dependency.
+- **Tests:** the blur sits on the bubble, never on a full-screen wrapper; no blend; one bubble per
+  default colour.
+
 ## 0.4.4 (2026-09-26)
 
 **The glow stays on the cool-to-magenta arc.**

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/brand/backdrop.d.ts

@@ -1,7 +1,6 @@
 import type { Backdrop } from './pack.js';
-/** The Freedom Glow: blue light moving through the cool-to-magenta arc, one bubble per colour.
- *  Never the warm half (no red, orange, yellow or green), so no frame can read as a rainbow.
- *  Saturated rather than pastel; the veil is what keeps a light page reading as light. */
+/** The Freedom Glow's colours (a blue core and the spectrum it separates into), mixed most of
+ *  the way to cream so a light page still reads as light. */
 export declare const GLOW_PASTELS: string[];
 export declare function Bubbles({ backdrop }: {
     backdrop: Backdrop;

package/lib/brand/backdrop.js

@@ -1,19 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** The Freedom Glow: blue light moving through the cool-to-magenta arc, one bubble per colour.
- *  Never the warm half (no red, orange, yellow or green), so no frame can read as a rainbow.
- *  Saturated rather than pastel; the veil is what keeps a light page reading as light. */
-export const GLOW_PASTELS = [
-    '31,107,255', // brand blue
-    '224,82,196', // magenta
-    '25,181,201', // teal
-    '156,92,240', // purple
-    '255,111,174', // pink
-    '34,195,230', // cyan
-    '123,107,230', // violet
-    '90,162,255', // sky
-    '199,125,255', // lavender
-];
-// [animation, duration s, transform-origin] per bubble, after animate-ui's six plus three more.
+/** The Freedom Glow's colours (a blue core and the spectrum it separates into), mixed most of
+ *  the way to cream so a light page still reads as light. */
+export const GLOW_PASTELS = ['150,190,255', '215,185,240', '160,225,220', '250,195,180', '250,215,160', '190,210,255'];
+// [animation, duration s, transform-origin] per bubble, after the original's six.
 const MOTION = [
     ['a-bubble-v', 30, 'center center'],
     ['a-bubble-c', 20, 'calc(50% - 400px) center'],
@@ -21,24 +10,17 @@ const MOTION = [
     ['a-bubble-h', 40, 'calc(50% - 200px) center'],
     ['a-bubble-c', 20, 'calc(50% - 800px) calc(50% + 200px)'],
     ['a-bubble-v', 35, 'calc(50% + 300px) calc(50% - 200px)'],
-    ['a-bubble-h', 45, 'calc(50% + 200px) calc(50% + 300px)'],
-    ['a-bubble-c', 30, 'calc(50% + 600px) calc(50% - 300px)'],
-    ['a-bubble-v', 25, 'calc(50% - 300px) calc(50% + 400px)'],
-];
-// [top %, left %] per bubble: spread over the page so neighbours overlap at their edges only.
-// Stacked in the middle, nine translucent hues average to grey.
-const HOME = [
-    [-10, -15], [-15, 45], [15, 20], [30, -20], [35, 50], [55, 10], [65, 45], [80, -15], [85, 35],
 ];
-// Only `transform` animates, on its own layer, so the browser moves finished bitmaps and never
-// repaints. The first version put a 40px blur over the whole viewport and hard-light blended every
-// bubble, which re-rasterised the full screen each frame and stuttered on a phone; the radial
-// gradients already fade to nothing, so neither was buying softness.
+// Each bubble is blurred on its OWN layer and only `transform` animates, so the browser rasterises
+// it once and slides the bitmap. The first version blurred a full-screen parent and hard-light
+// blended every bubble, which re-rasterised the whole viewport each frame and stuttered on a
+// phone (2026-09-26). The colours and layout are unchanged from that version on purpose: an
+// attempt to also widen the palette was reverted the same night ("really not a fan").
 const CSS = `
 @keyframes a-bubble-v{0%,100%{transform:translate3d(0,-50%,0)}50%{transform:translate3d(0,50%,0)}}
 @keyframes a-bubble-c{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
 @keyframes a-bubble-h{0%,100%{transform:translate3d(-50%,-10%,0)}50%{transform:translate3d(50%,10%,0)}}
-[data-artifact-backdrop] .a-bubble{position:absolute;width:70%;height:60%;border-radius:9999px;will-change:transform;backface-visibility:hidden;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
+[data-artifact-backdrop] .a-bubble{position:absolute;width:80%;height:80%;top:10%;left:10%;border-radius:9999px;filter:blur(40px);will-change:transform;backface-visibility:hidden;animation-timing-function:ease;animation-iteration-count:infinite}
 @media (prefers-reduced-motion: reduce){[data-artifact-backdrop] .a-bubble{animation:none!important}}
 `;
 export function Bubbles({ backdrop }) {
@@ -47,13 +29,11 @@ export function Bubbles({ backdrop }) {
     return (_jsxs("div", { "data-artifact-backdrop": "bubbles", "aria-hidden": true, style: { position: 'fixed', inset: 0, zIndex: -1, overflow: 'hidden', background: 'var(--a-ground)', pointerEvents: 'none' }, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: CSS } }), _jsx("div", { style: { position: 'absolute', inset: 0 }, children: colors.map((c, i) => {
                     const [name, secs, origin] = MOTION[i % MOTION.length];
                     return (_jsx("div", { className: "a-bubble", style: {
-                            background: `radial-gradient(closest-side, rgba(${c},0.9) 0%, rgba(${c},0.6) 35%, rgba(${c},0.2) 70%, rgba(${c},0) 100%)`,
+                            background: `radial-gradient(circle at center, rgba(${c},0.8) 0, rgba(${c},0) 50%)`,
                             animationName: name,
                             animationDuration: `${secs}s`,
                             animationDirection: i % 2 ? 'reverse' : 'normal',
                             transformOrigin: origin,
-                            top: `${HOME[i % HOME.length][0]}%`,
-                            left: `${HOME[i % HOME.length][1]}%`,
                         } }, i));
                 }) }), _jsx("div", { style: { position: 'absolute', inset: 0, background: `color-mix(in srgb, var(--a-ground) ${veil}%, transparent)` } })] }));
 }

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.4",
+  "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",