@anvpx/motion-scenes 0.0.0-stage → 0.1.0

package/dist/runtime-files.js

@@ -0,0 +1,15 @@
+import { readText } from "./text-file.js";
+const RUNTIME_MODULES = ["easing.js", "timeline.js", "mount.js"];
+/** Pure helpers shared with emit time; they import `../runtime/easing.js`, so they sit beside it. */
+const SHARED_MODULES = ["motion.js", "format.js"];
+/** Shared browser modules; the build emits them once under `runtime/` and `shared/`. */
+export const runtimeFiles = () => new Map([
+    ...RUNTIME_MODULES.map((name) => [
+        `runtime/${name}`,
+        readText(`./runtime/${name}`, import.meta.url),
+    ]),
+    ...SHARED_MODULES.map((name) => [
+        `shared/${name}`,
+        readText(`./shared/${name}`, import.meta.url),
+    ]),
+]);

package/dist/scene-contract.d.ts

@@ -0,0 +1,7 @@
+import type { ScenePlugin } from "@anvpx/motion-schema";
+export interface ContractFixture {
+    readonly valid: Record<string, unknown>;
+    /** Valid props whose every text field contains markup and quotes. */
+    readonly hostile: Record<string, unknown>;
+}
+export declare const describeSceneContract: (plugin: ScenePlugin, fixture: ContractFixture) => void;

package/dist/scene-contract.js

@@ -0,0 +1,104 @@
+import { resolveTheme, THEME_NAMES, toCssVars } from "@anvpx/motion-themes";
+import { describe, expect, it } from "vitest";
+import { runtimeFiles } from "./runtime-files.js";
+import { emitContext, entryOf } from "./test-fixtures.js";
+const MIN_TEXT_PX = 28;
+const HEX_COLOR = /#[0-9a-fA-F]{3,8}\b/;
+const FUNCTION_COLOR = /\b(?:rgb|rgba|hsl|hsla)\(/;
+const files = (plugin, props, extra = {}) => {
+    const id = `${plugin.type}-1`;
+    const out = plugin.emit(entryOf(plugin.type, props, extra), emitContext());
+    const get = (name) => out.get(`scenes/${id}/${name}`) ?? "";
+    return { id, out, html: get("fragment.html"), css: get("style.css"), js: get("scene.js") };
+};
+const declared = (css) => new Set([...css.matchAll(/(--mk-[\w-]+):/g)].map((m) => m[1] ?? ""));
+const referenced = (css) => [...css.matchAll(/var\((--mk-[\w-]+)\)/g)].map((m) => m[1] ?? "");
+const themeVars = (name) => declared(toCssVars(resolveTheme(name)));
+export const describeSceneContract = (plugin, fixture) => {
+    describe(`${plugin.type} emit contract`, () => {
+        it("emits fragment, style and script under scenes/<id>/", () => {
+            const { out, id } = files(plugin, fixture.valid);
+            expect([...out.keys()]).toEqual([
+                `scenes/${id}/fragment.html`,
+                `scenes/${id}/style.css`,
+                `scenes/${id}/scene.js`,
+            ]);
+        });
+        it("fragment is one root element with id scene-<id> and no clip class", () => {
+            const { html, id } = files(plugin, fixture.valid);
+            expect(html.startsWith(`<section id="scene-${id}" `)).toBe(true);
+            expect(html.trimEnd().endsWith("</section>")).toBe(true);
+            expect(html.match(/<section/g)).toHaveLength(1);
+            expect(html).not.toMatch(/class="[^"]*\bclip\b/);
+        });
+        it("matches the golden output", () => {
+            const { out } = files(plugin, fixture.valid, { move: "push-in", focus: "title" });
+            const text = [...out].map(([path, body]) => `=== ${path}\n${body}`).join("\n");
+            expect(text).toMatchSnapshot();
+        });
+        it("is byte-identical when run twice", () => {
+            expect([...files(plugin, fixture.valid).out]).toEqual([...files(plugin, fixture.valid).out]);
+        });
+        it("escapes all prop text", () => {
+            const { html } = files(plugin, fixture.hostile);
+            expect(html).not.toContain("<script");
+            expect(html).toContain("&lt;script&gt;");
+            expect(html).toContain("&quot;");
+        });
+        it("has no inline handlers or external urls", () => {
+            const { html, css, js } = files(plugin, fixture.valid);
+            expect(html + css + js).not.toMatch(/\son[a-z]+\s*=|https?:\/\/|javascript:/);
+        });
+        it("css uses only theme custom properties and no hard-coded colours", () => {
+            const { css } = files(plugin, fixture.valid);
+            expect(css).not.toMatch(HEX_COLOR);
+            expect(css).not.toMatch(FUNCTION_COLOR);
+            for (const theme of THEME_NAMES) {
+                const defined = themeVars(theme);
+                for (const name of referenced(css))
+                    expect(defined.has(name), `${theme} ${name}`).toBe(true);
+            }
+        });
+        it("text is >= 28px and uses one theme font family", () => {
+            const { css } = files(plugin, fixture.valid);
+            const sizes = [...css.matchAll(/(?<![-\w])font-size:\s*([^;]+);/g)].map((m) => m[1] ?? "");
+            expect(sizes.length).toBeGreaterThan(0);
+            for (const size of sizes) {
+                const step = /^var\(--mk-font-size-(\w+)\)$/.exec(size)?.[1] ?? "";
+                const px = emitContext().theme.fontSizes[step] ?? 0;
+                expect(px, size).toBeGreaterThanOrEqual(MIN_TEXT_PX);
+            }
+            const families = [...css.matchAll(/font-family:\s*([^;]+);/g)].map((m) => m[1]);
+            // Sans everywhere; code-like scenes may add the theme mono stack.
+            const allowed = new Set([
+                "var(--mk-font-sans)",
+                "var(--mk-font-mono)",
+                "var(--mk-font-display, var(--mk-font-sans))",
+            ]);
+            expect(families.every((family) => allowed.has(family ?? ""))).toBe(true);
+            expect(families).toContain("var(--mk-font-sans)");
+        });
+        it("keeps the safe margin from the context size", () => {
+            expect(files(plugin, fixture.valid).css).toContain("padding: 54px 96px;");
+        });
+        it("carries ease (default out), fps and duration on the root", () => {
+            const { html } = files(plugin, fixture.valid);
+            expect(html).toContain('data-ease="out"');
+            expect(html).toContain('data-fps="30"');
+            expect(html).toContain('data-duration="6"');
+            expect(files(plugin, fixture.valid, { ease: "in-out" }).html).toContain('data-ease="in-out"');
+        });
+        it("script is an ES module importing only emitted runtime files", () => {
+            const { js } = files(plugin, fixture.valid);
+            expect(js).toMatch(/export function createScene\(root, config, ctx\)/);
+            const runtime = runtimeFiles();
+            const imports = [...js.matchAll(/from "\.\.\/\.\.\/(runtime\/[\w-]+\.js)"/g)];
+            expect(imports.length).toBeGreaterThan(0);
+            for (const match of imports)
+                expect(runtime.has(match[1] ?? "")).toBe(true);
+        });
+        it("rejects invalid props on emit", () => {
+            expect(() => plugin.emit(entryOf(plugin.type, { bogus: 1 }), emitContext())).toThrow();
+        });
+    });
+};

package/dist/scene3d/post.d.ts

@@ -0,0 +1,12 @@
+export declare const POST_PRESETS: readonly ["clean", "bloom", "cinematic", "vintage"];
+export type PostPreset = (typeof POST_PRESETS)[number];
+export interface PostParams {
+    readonly bloom: number;
+    readonly grain: number;
+    readonly vignette: number;
+    readonly toneMapping: "none" | "agx";
+}
+export declare const isPostPreset: (value: unknown) => value is PostPreset;
+export declare const resolvePost: (preset: PostPreset) => PostParams;
+/** Seeded film-grain frame: pure function of t (30 fps lattice, spike receipt). */
+export declare const grainSeed: (t: number) => number;

package/dist/scene3d/post.js

@@ -0,0 +1,16 @@
+// Clean-room post chain for the scene3d base scene.
+// MIT attribution: three.js (MIT), postprocessing (MIT). Behaviour reimplemented
+// from projects/spike-scene3d/src/main.js (do not copy); diorama concept follows
+// MIT-licensed three.js examples (e.g. RoomEnvironment). No CDN, no copied code.
+// Curated post presets: small, spike-proven combos (bloom / AgX / vignette / grain).
+export const POST_PRESETS = ["clean", "bloom", "cinematic", "vintage"];
+const POST_TABLE = {
+    clean: { bloom: 0, grain: 0.01, vignette: 0, toneMapping: "none" },
+    bloom: { bloom: 1.1, grain: 0.02, vignette: 0.3, toneMapping: "none" },
+    cinematic: { bloom: 1.1, grain: 0.035, vignette: 0.55, toneMapping: "agx" },
+    vintage: { bloom: 0.6, grain: 0.06, vignette: 0.7, toneMapping: "agx" },
+};
+export const isPostPreset = (value) => typeof value === "string" && POST_PRESETS.includes(value);
+export const resolvePost = (preset) => POST_TABLE[preset];
+/** Seeded film-grain frame: pure function of t (30 fps lattice, spike receipt). */
+export const grainSeed = (t) => Math.floor(t * 30) % 1000;

package/dist/scene3d/reflector.d.ts

@@ -0,0 +1,9 @@
+export declare const REFLECTOR_PRESETS: readonly ["off", "gloss", "mirror"];
+export type ReflectorPreset = (typeof REFLECTOR_PRESETS)[number];
+export interface ReflectorParams {
+    readonly reflectivity: number;
+    readonly roughness: number;
+}
+export declare const resolveReflector: (preset: ReflectorPreset) => ReflectorParams;
+/** Fresnel-ish mix: 0 when off, otherwise reflectivity faded by surface roughness. */
+export declare const reflectorMix: (roughness: number, preset: ReflectorPreset) => number;

package/dist/scene3d/reflector.js

@@ -0,0 +1,17 @@
+// Clean-room planar reflector preset for scene3d (MIT: three.js).
+// Pure math; no DOM, no clock.
+export const REFLECTOR_PRESETS = ["off", "gloss", "mirror"];
+const TABLE = {
+    off: { reflectivity: 0, roughness: 1 },
+    gloss: { reflectivity: 0.4, roughness: 0.35 },
+    mirror: { reflectivity: 0.9, roughness: 0.05 },
+};
+export const resolveReflector = (preset) => TABLE[preset];
+/** Fresnel-ish mix: 0 when off, otherwise reflectivity faded by surface roughness. */
+export const reflectorMix = (roughness, preset) => {
+    const { reflectivity } = TABLE[preset];
+    if (reflectivity === 0)
+        return 0;
+    const clamped = Math.min(1, Math.max(0, roughness));
+    return Math.min(1, reflectivity * (1 - clamped));
+};

package/dist/scene3d/textures.d.ts

@@ -0,0 +1,9 @@
+export declare const HDRI_PRESETS: readonly ["neutral", "studio", "sunset", "night"];
+export type HdriPreset = (typeof HDRI_PRESETS)[number];
+export interface HdriParams {
+    readonly intensity: number;
+    readonly background: number;
+    readonly exposure: number;
+}
+export declare const resolveHdri: (preset: HdriPreset) => HdriParams;
+export declare const hdriEnv: (preset: HdriPreset) => HdriParams;

package/dist/scene3d/textures.js

@@ -0,0 +1,11 @@
+// Clean-room procedural environment for scene3d (MIT: three.js incl. RoomEnvironment).
+// No fetches, no HDRI downloads: curated studio gradients resolved offline.
+export const HDRI_PRESETS = ["neutral", "studio", "sunset", "night"];
+const TABLE = {
+    neutral: { intensity: 0.6, background: 0x0a0c12, exposure: 1.0 },
+    studio: { intensity: 1.2, background: 0x111318, exposure: 1.1 },
+    sunset: { intensity: 0.9, background: 0x1a1210, exposure: 1.0 },
+    night: { intensity: 0.4, background: 0x05070c, exposure: 0.9 },
+};
+export const resolveHdri = (preset) => TABLE[preset];
+export const hdriEnv = (preset) => TABLE[preset];

package/dist/scene3d/volumetric.d.ts

@@ -0,0 +1,9 @@
+export declare const VOLUMETRIC_PRESETS: readonly ["off", "soft", "dense"];
+export type VolumetricPreset = (typeof VOLUMETRIC_PRESETS)[number];
+export interface VolumetricParams {
+    readonly density: number;
+    readonly steps: number;
+}
+export declare const resolveVolumetric: (preset: VolumetricPreset) => VolumetricParams;
+/** Gentle breathing of the shaft: deterministic in t, zero when off. */
+export declare const volumetricIntensity: (t: number, preset: VolumetricPreset) => number;

package/dist/scene3d/volumetric.js

@@ -0,0 +1,16 @@
+// Clean-room volumetric preset for scene3d (MIT: three.js, postprocessing).
+// Pure function of t; no clock, no random.
+export const VOLUMETRIC_PRESETS = ["off", "soft", "dense"];
+const TABLE = {
+    off: { density: 0, steps: 0 },
+    soft: { density: 0.35, steps: 32 },
+    dense: { density: 0.7, steps: 64 },
+};
+export const resolveVolumetric = (preset) => TABLE[preset];
+/** Gentle breathing of the shaft: deterministic in t, zero when off. */
+export const volumetricIntensity = (t, preset) => {
+    const { density } = TABLE[preset];
+    if (density === 0)
+        return 0;
+    return density * (0.9 + 0.1 * Math.cos(t));
+};

package/dist/scenes/bug/index.d.ts

@@ -0,0 +1 @@
+export declare const bugScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/bug/index.js

@@ -0,0 +1,45 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { cornerSchema, positionClass, positionCss } from "../../position.js";
+import { readText } from "../../text-file.js";
+import { text } from "../../words.js";
+const configSchema = z
+    .strictObject({
+    text: text.max(32).optional(),
+    image: text.optional(),
+    position: cornerSchema.default("top-right"),
+    opacity: z.enum(["subtle", "medium", "full"]).default("medium"),
+})
+    .superRefine((props, ctx) => {
+    if ((props.text === undefined) === (props.image === undefined)) {
+        ctx.addIssue({
+            code: "custom",
+            message: "give exactly one of text or image",
+            params: { suggestion: "set text for a word mark, or image for a ledger asset" },
+        });
+    }
+});
+const mark = (props, resolve) => props.image === undefined
+    ? `<span class="mk-text">${esc(props.text ?? "")}</span>`
+    : `<img class="mk-image" src="${esc(resolve(props.image))}" alt="" />`;
+const render = (props, resolve) => [
+    `<div class="mk-op-${props.opacity} ${positionClass(props.position)}">`,
+    `<div class="mk-bug" ${animAttrs("fade", 0)}>${mark(props, resolve)}</div>`,
+    "</div>",
+].join("\n");
+export const bugScene = defineScene({
+    type: "bug",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Corner word mark or ledger image; give exactly one of text or image.",
+        example: { text: "ACME" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props, ctx.assetResolver),
+        css: positionCss(root),
+    }),
+});

package/dist/scenes/bug/scene.d.ts

@@ -0,0 +1,2 @@
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export declare function createScene(root: HTMLElement, config: import("../../runtime/mount.js").SceneConfig, ctx: import("../../runtime/mount.js").RuntimeContext): import("../../runtime/mount.js").Runtime;

package/dist/scenes/bug/scene.js

@@ -0,0 +1,6 @@
+// @ts-check
+import { mountOverlay } from "../../runtime/mount.js";
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    return mountOverlay(root, config, ctx, { baseDelay: 0.1, staggerFrames: 4, rise: 0 });
+}

package/dist/scenes/bug/style.css

@@ -0,0 +1,30 @@
+#scene-root .mk-op-subtle {
+  opacity: var(--mk-opacity-subtle);
+}
+#scene-root .mk-op-medium {
+  opacity: var(--mk-opacity-medium);
+}
+#scene-root .mk-op-full {
+  opacity: var(--mk-opacity-full);
+}
+#scene-root .mk-bug {
+  display: flex;
+  align-items: center;
+  padding: var(--mk-space-sm) var(--mk-space-lg);
+  border-radius: var(--mk-radius-full);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  background: var(--mk-color-card);
+}
+#scene-root .mk-text {
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-image {
+  display: block;
+  height: var(--mk-space-xl);
+  max-width: 360px;
+  object-fit: contain;
+}

package/dist/scenes/bullets/index.d.ts

@@ -0,0 +1 @@
+export declare const bulletsScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/bullets/index.js

@@ -0,0 +1,128 @@
+import { contrastRatio } from "@anvpx/motion-themes";
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { frameCss, frameOf } from "../../shared/frame.js";
+import { sceneIcon } from "../../shared/icon.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const COUNT_MESSAGE = "need 1-6 items";
+const MARKERS = ["dot", "check", "cross", "number"];
+const ICON_PX = 48;
+const ICON_OF = { check: "check", cross: "x" };
+const configSchema = limitWords(z.strictObject({
+    title: text.optional(),
+    items: z.array(text).min(1, COUNT_MESSAGE).max(6, COUNT_MESSAGE),
+    marker: z.enum(MARKERS).optional(),
+}), (props) => [...present(props.title), ...props.items]);
+/** Marker-specific rules; absent marker keeps the original numbered look and adds nothing. */
+const MIN_CONTRAST = 4.5;
+/** First token (chart colour, then accent, then text) with 4.5:1 on the card; light themes keep their chart colour. */
+const markerColour = (ctx, chart, chartVar) => {
+    const card = ctx.theme.colors.card ?? "#ffffff";
+    const candidates = [
+        [ctx.theme.chart[chart], chartVar],
+        [ctx.theme.colors.accent, "var(--mk-color-accent)"],
+        [ctx.theme.colors.fg, "var(--mk-color-fg)"],
+    ];
+    const pick = candidates.find(([hex]) => hex !== undefined && contrastRatio(hex, card) >= MIN_CONTRAST);
+    return (pick ?? candidates[0])[1];
+};
+/** Tall frames: the heading sits above the list instead of beside it. */
+const TALL_CSS = `#scene-root { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--mk-space-xl); }
+#scene-root .mk-head { flex: none; }
+#scene-root .mk-list { flex: none; }`;
+/** Portrait: a long list gets roomier rows so it fills the tall frame instead of hugging the top. */
+const PORTRAIT_MANY_PX = 56;
+const portraitCss = (ctx) => [
+    "#scene-root .mk-list { gap: var(--mk-space-xl); }",
+    "#scene-root .mk-big .mk-item { padding-block: calc(var(--mk-space-xl) * 1.6); }",
+    "#scene-root .mk-list.mk-many { gap: var(--mk-space-lg); }",
+    `#scene-root .mk-list.mk-many .mk-item { grid-template-columns: 72px 1fr; padding: var(--mk-space-lg); font-size: var(--mk-font-size-${stepWithin(ctx, ["xl", "lg", "md"], PORTRAIT_MANY_PX)}); }`,
+    "#scene-root .mk-list.mk-many .mk-item::before, #scene-root .mk-list.mk-many .mk-item .mk-mark { width: 72px; height: 72px; }",
+].join("\n");
+/** Square: heading over list leaves little height, so big rows keep regular spacing. */
+const SQUARE_CSS = `#scene-root .mk-big { gap: var(--mk-space-lg); }
+#scene-root .mk-big .mk-item { padding: var(--mk-space-lg); }`;
+const markerCss = (root, marker, ctx) => {
+    const item = `${root} .mk-marker-${marker} .mk-item`;
+    if (marker === "number")
+        return `${item}::before { content: counter(item); }\n`;
+    if (marker === "dot") {
+        return `${item}::before { content: ""; width: 32px; height: 32px; justify-self: center; }\n`;
+    }
+    const colour = marker === "check"
+        ? markerColour(ctx, 2, "var(--mk-chart-3)")
+        : markerColour(ctx, 4, "var(--mk-chart-5)");
+    return [
+        `${item}::before { content: none; }`,
+        `${item} .mk-mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--mk-radius-full); background: var(--mk-color-card); border: 4px solid ${colour}; color: ${colour}; }`,
+        "",
+    ].join("\n");
+};
+const markHtml = (props, index) => {
+    const marker = props.marker;
+    if (marker !== "check" && marker !== "cross")
+        return "";
+    const icon = sceneIcon(ICON_OF[marker], { at: `props.items[${index}]`, size: ICON_PX });
+    return `<span class="mk-mark" aria-hidden="true">${icon}</span>`;
+};
+/** Up to 3 brief points read as a big list; longer lists or text keep the regular size. */
+const BIG_MAX_ITEMS = 3;
+const BIG_MAX_CHARS = 84;
+/** From this many items the rows compress so the list never leaves the frame. */
+const MANY_ITEMS = 5;
+/** Largest of the given type steps that stays within `maxPx` for this theme (themes scale their steps differently). */
+const stepWithin = (ctx, steps, maxPx) => steps.find((step) => (ctx.theme.fontSizes[step] ?? 0) <= maxPx) ??
+    steps[steps.length - 1] ??
+    "md";
+const BIG_MAX_PX = 80;
+/** A square frame stacks heading over list in 1080px: big rows must stay smaller. */
+const SQUARE_BIG_MAX_PX = 52;
+const MANY_MAX_PX = 52;
+const sizeCss = (root, ctx) => [
+    `${root} .mk-big .mk-item { font-size: var(--mk-font-size-${stepWithin(ctx, ["xl", "lg", "md"], frameOf(ctx) === "square" ? SQUARE_BIG_MAX_PX : BIG_MAX_PX)}); }`,
+    `${root} .mk-list.mk-many .mk-item { font-size: var(--mk-font-size-${stepWithin(ctx, ["lg", "md"], MANY_MAX_PX)}); }`,
+    "",
+].join("\n");
+const isBig = (props) => props.items.length <= BIG_MAX_ITEMS &&
+    props.items.reduce((sum, item) => sum + item.length, 0) <= BIG_MAX_CHARS;
+const render = (props) => {
+    const offset = props.title ? 1 : 0;
+    const head = props.title
+        ? `<div class="mk-head">
+<h1 class="mk-heading" ${animAttrs("rise", 0, "title")}>${esc(props.title)}</h1>
+<span class="mk-rule" ${animAttrs("grow", 0, "title")}></span>
+</div>
+`
+        : "";
+    const items = props.items.map((item, index) => {
+        const attrs = animAttrs("rise", index + offset, `item-${index + 1}`);
+        return `<li class="mk-item" ${attrs}>${markHtml(props, index)}${esc(item)}</li>`;
+    });
+    const listClass = [
+        "mk-list",
+        props.marker ? `mk-marker-${props.marker}` : "",
+        isBig(props) ? "mk-big" : "",
+        props.items.length >= MANY_ITEMS ? "mk-many" : "",
+    ]
+        .filter((name) => name !== "")
+        .join(" ");
+    return `${head}<ul class="${listClass}">\n${items.join("\n")}\n</ul>`;
+};
+export const bulletsScene = defineScene({
+    type: "bullets",
+    configSchema,
+    meta: {
+        purpose: "Short list of 1-6 points with an optional heading.",
+        example: { items: ["One", "Two"] },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props),
+        css: (props.marker ? markerCss(root, props.marker, ctx) : "") +
+            sizeCss(root, ctx) +
+            frameCss(ctx, root, { tall: TALL_CSS, portrait: portraitCss(ctx), square: SQUARE_CSS }),
+    }),
+});

package/dist/scenes/bullets/scene.d.ts

@@ -0,0 +1,2 @@
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export declare function createScene(root: HTMLElement, config: import("../../runtime/mount.js").SceneConfig, ctx: import("../../runtime/mount.js").RuntimeContext): import("../../runtime/mount.js").Runtime;

package/dist/scenes/bullets/scene.js

@@ -0,0 +1,6 @@
+// @ts-check
+import { mountTimeline } from "../../runtime/mount.js";
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    return mountTimeline(root, config, ctx, { baseDelay: 0.2, staggerFrames: 5, rise: 32 });
+}

package/dist/scenes/bullets/style.css

@@ -0,0 +1,91 @@
+#scene-root {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--mk-space-xxl);
+}
+#scene-root .mk-head {
+  flex: 0 0 28%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-heading {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-title);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+#scene-root .mk-list {
+  flex: 1;
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-lg);
+  counter-reset: item;
+}
+#scene-root .mk-item {
+  counter-increment: item;
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  align-items: center;
+  column-gap: var(--mk-space-lg);
+  padding: var(--mk-space-lg) var(--mk-space-xl) var(--mk-space-lg) var(--mk-space-lg);
+  font-size: var(--mk-font-size-lg);
+  font-weight: 600;
+  line-height: 1.25;
+  background: var(--mk-color-card);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  border-radius: var(--mk-radius-xl);
+  box-shadow: var(
+    --mk-shadow-card,
+    0 24px 56px -28px color-mix(in srgb, var(--mk-color-fg) 40%, transparent)
+  );
+}
+#scene-root .mk-item::before {
+  content: counter(item, decimal-leading-zero);
+  display: grid;
+  place-items: center;
+  width: 88px;
+  height: 88px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  font-size: var(--mk-font-size-md);
+  font-weight: 700;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+
+/* short lists: larger type and air so 1-3 points fill the frame */
+#scene-root .mk-big {
+  gap: var(--mk-space-xl);
+}
+#scene-root .mk-big .mk-item {
+  line-height: 1.15;
+  padding: var(--mk-space-xl) var(--mk-space-xl) var(--mk-space-xl) var(--mk-space-lg);
+}
+
+/* 5-6 points: tighter rows so long text still fits the frame */
+#scene-root .mk-list.mk-many {
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-list.mk-many .mk-item {
+  grid-template-columns: 64px 1fr;
+  padding: var(--mk-space-md) var(--mk-space-lg) var(--mk-space-md) var(--mk-space-md);
+  line-height: 1.15;
+}
+#scene-root .mk-list.mk-many .mk-item::before {
+  width: 64px;
+  height: 64px;
+}
+#scene-root .mk-list.mk-many .mk-item .mk-mark {
+  width: 64px;
+  height: 64px;
+}
+#scene-root .mk-list.mk-many .mk-item .mk-mark svg {
+  width: 36px;
+  height: 36px;
+}

package/dist/scenes/callout/index.d.ts

@@ -0,0 +1,9 @@
+import { type AccentSegment } from "../../shared/markup.ts";
+export interface Token {
+    readonly pieces: readonly AccentSegment[];
+    /** A bare operator such as `+`, `=` or `×`; dimmed so the terms carry the reading. */
+    readonly op: boolean;
+}
+/** Words of accent markup as tokens: split at spaces, adjacent pieces (`[c]²`) stay together. */
+export declare const tokenize: (source: string) => Token[];
+export declare const calloutScene: import("@anvpx/motion-schema").ScenePlugin;