@anvpx/motion-scenes 0.0.0-stage → 0.1.1

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;

package/dist/scenes/callout/index.js

@@ -0,0 +1,95 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { sceneIcon } from "../../shared/icon.js";
+import { accentSegments, stripAccent } from "../../shared/markup.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const MAX_CHARS = 120;
+const ICON_SIZE = 48;
+const KINDS = ["formula", "statement", "definition", "warning", "tip"];
+const KIND_ICON = {
+    formula: "sigma",
+    statement: "quote",
+    definition: "book-open",
+    warning: "triangle-alert",
+    tip: "lightbulb",
+};
+/** Text of at most this many characters (accent brackets excluded) gets the next size up. */
+const SIZE_STEPS = {
+    formula: [16, 40],
+    statement: [28, 70],
+    definition: [28, 70],
+    warning: [28, 70],
+    tip: [28, 70],
+};
+const capped = (max) => text.max(max, `max ${max} characters`);
+const configSchema = limitWords(z.strictObject({
+    text: capped(MAX_CHARS),
+    kind: z.enum(KINDS).default("statement"),
+    label: capped(30).optional(),
+    note: capped(80).optional(),
+}), (props) => [...present(stripAccent(props.text), props.label, props.note)]);
+const OPERATOR = /^[+\-−–×÷*/=<>≈≠≤≥·^%→⇒±∑∏√]+$/;
+/** Words of accent markup as tokens: split at spaces, adjacent pieces (`[c]²`) stay together. */
+export const tokenize = (source) => {
+    const tokens = [];
+    let pieces = [];
+    const flush = () => {
+        if (pieces.length === 0)
+            return;
+        const plain = pieces.every((p) => !p.accent);
+        const joined = pieces.map((p) => p.text).join("");
+        tokens.push({ pieces, op: plain && OPERATOR.test(joined) });
+        pieces = [];
+    };
+    for (const segment of accentSegments(source)) {
+        segment.text.split(/(\s+)/).forEach((part, index) => {
+            if (index % 2 === 1)
+                flush();
+            else if (part !== "")
+                pieces.push({ text: part, accent: segment.accent });
+        });
+    }
+    flush();
+    return tokens;
+};
+const termHtml = (token, index) => {
+    const inner = token.pieces
+        .map((p) => (p.accent ? `<span class="accent">${esc(p.text)}</span>` : esc(p.text)))
+        .join("");
+    return `<span class="mk-term${token.op ? " mk-op" : ""}" data-term="${index}">${inner}</span>`;
+};
+/** Size class by visible length so the text fills the card without crowding it. */
+const sizeClass = (kind, visible) => {
+    const [big, mid] = SIZE_STEPS[kind];
+    if (visible <= big)
+        return "mk-size-1";
+    return visible <= mid ? "mk-size-2" : "mk-size-3";
+};
+const render = (props) => {
+    const plain = stripAccent(props.text);
+    const terms = tokenize(props.text).map(termHtml).join(" ");
+    const icon = sceneIcon(KIND_ICON[props.kind], { at: "props.kind", size: ICON_SIZE });
+    const label = props.label ? `<span class="mk-label">${esc(props.label)}</span>` : "";
+    const note = props.note
+        ? `<p class="mk-note" ${animAttrs("rise", 6, "note")}>${esc(props.note)}</p>`
+        : "";
+    return `<div class="mk-card mk-${props.kind} ${sizeClass(props.kind, plain.length)}">
+<div class="mk-kind" ${animAttrs("rise", 0, "label")}><span class="mk-icon">${icon}</span>${label}</div>
+<p class="mk-text" aria-label="${esc(plain)}">${terms}</p>
+<span class="mk-rule" data-rule></span>
+${note}
+</div>`;
+};
+export const calloutScene = defineScene({
+    type: "callout",
+    configSchema,
+    meta: {
+        purpose: "One formula, rule, definition, warning or tip made big; [x] marks accent terms, revealed term by term.",
+        example: { text: "[Profit] = [Revenue] − [Costs]", kind: "formula" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

package/dist/scenes/callout/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/callout/scene.js

@@ -0,0 +1,43 @@
+// @ts-check
+import { ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+import { progress, revealProgress } from "../../shared/motion.js";
+const DEFAULT_DURATION = 6;
+const START = 0.25;
+const MAX_SPAN = 2.4;
+const SPAN_SHARE = 0.4;
+/** Opacity of a term before its reveal, so the frame is never blank. */
+const FLOOR = 0.12;
+const RISE_PX = 24;
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.1, staggerFrames: 5, rise: 28 });
+    const duration = ctx.duration || Number(root.dataset.duration) || DEFAULT_DURATION;
+    const span = Math.min(MAX_SPAN, duration * SPAN_SHARE);
+    const terms = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll("[data-term]")));
+    const rule = /** @type {HTMLElement | null} */ (root.querySelector("[data-rule]"));
+    const dimmed = terms.map((el) => el.classList.contains("mk-op"));
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        const shown = revealProgress(terms.length, Math.max(0, t - START), span);
+        terms.forEach((el, i) => {
+            const p = shown[i] ?? 0;
+            const target = dimmed[i] ? 0.45 : 1;
+            el.style.opacity = String(FLOOR + (target - FLOOR) * p);
+            el.style.transform = `translateY(${(1 - p) * RISE_PX}px)`;
+        });
+        if (rule)
+            rule.style.transform = `scaleX(${ease("out", progress(t, START, START + span))})`;
+    };
+    const dispose = () => {
+        inner.dispose();
+        for (const el of terms) {
+            el.style.removeProperty("opacity");
+            el.style.removeProperty("transform");
+        }
+        rule?.style.removeProperty("transform");
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/callout/style.css

@@ -0,0 +1,97 @@
+#scene-root .mk-card {
+  --k: var(--mk-color-accent);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mk-space-lg);
+  padding: var(--mk-space-xl) var(--mk-space-xxl);
+  background: var(--mk-color-card);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  border-radius: var(--mk-radius-xl);
+  box-shadow:
+    inset 16px 0 0 var(--k),
+    0 24px 56px -28px color-mix(in srgb, var(--mk-color-fg) 40%, transparent);
+}
+#scene-root .mk-warning {
+  --k: var(--mk-chart-2);
+}
+#scene-root .mk-tip {
+  --k: var(--mk-color-accent2);
+}
+#scene-root .mk-formula {
+  align-items: center;
+  text-align: center;
+  box-shadow:
+    inset 0 16px 0 var(--k),
+    0 24px 56px -28px color-mix(in srgb, var(--mk-color-fg) 40%, transparent);
+  background: color-mix(in srgb, var(--mk-color-accentSoft) 45%, var(--mk-color-card));
+}
+#scene-root .mk-kind {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-md);
+  color: var(--k);
+}
+#scene-root .mk-icon {
+  display: grid;
+  place-items: center;
+  width: 80px;
+  height: 80px;
+  border-radius: var(--mk-radius-full);
+  background: color-mix(in srgb, var(--k) 16%, var(--mk-color-card));
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-md);
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+#scene-root .mk-text {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-weight: 800;
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-formula .mk-text {
+  font-weight: 700;
+}
+#scene-root .mk-definition .mk-text,
+#scene-root .mk-tip .mk-text {
+  font-weight: 600;
+}
+#scene-root .mk-size-1 .mk-text {
+  font-size: var(--mk-font-size-display);
+}
+#scene-root .mk-size-2 .mk-text {
+  font-size: var(--mk-font-size-title);
+}
+#scene-root .mk-size-3 .mk-text {
+  font-size: var(--mk-font-size-xl);
+}
+#scene-root .mk-term {
+  display: inline-block;
+}
+#scene-root .mk-op {
+  color: var(--mk-color-muted);
+  font-weight: 500;
+}
+#scene-root .accent {
+  color: var(--k);
+}
+#scene-root .mk-rule {
+  background: linear-gradient(90deg, var(--k), var(--mk-color-accent2));
+  transform: scaleX(0);
+}
+#scene-root .mk-formula .mk-rule {
+  transform-origin: center;
+}
+#scene-root .mk-note {
+  font-size: var(--mk-font-size-md);
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+  max-width: 90%;
+}

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

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

package/dist/scenes/caption/index.js

@@ -0,0 +1,72 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { readText } from "../../text-file.js";
+import { limitWords, text } from "../../words.js";
+/**
+ * One caption word on the clip clock (seconds). Same shape as the canonical
+ * `WordTiming` (`packages/schema/src/audio.ts`): `kit.reveal(words, t)` and
+ * voice word timings plug in with zero scene changes.
+ */
+const captionWordSchema = z
+    .strictObject({
+    w: text.max(40),
+    start: z.number().min(0),
+    end: z.number().positive(),
+})
+    .refine((word) => word.end > word.start, "end must be after start");
+const captionWordsSchema = z
+    .array(captionWordSchema)
+    .min(1)
+    .max(40)
+    .superRefine((words, ctx) => {
+    words.forEach((word, index) => {
+        const prev = words[index - 1];
+        if (prev && word.start < prev.end) {
+            ctx.addIssue({
+                code: "custom",
+                path: [index, "start"],
+                message: `word "${word.w}" overlaps "${prev.w}"`,
+            });
+        }
+    });
+});
+const configSchema = limitWords(z
+    .strictObject({
+    text: text.max(140).optional(),
+    words: captionWordsSchema.optional(),
+})
+    .superRefine((props, ctx) => {
+    if (props.text === undefined && props.words === undefined) {
+        ctx.addIssue({ code: "custom", message: "give text, words, or both" });
+    }
+}), (props) => [...(props.text ? [props.text] : []), ...(props.words?.map((word) => word.w) ?? [])]);
+const render = (props) => {
+    const line = props.words
+        ? props.words
+            .map((word, index) => `<span class="mk-word" data-i="${index}" data-start="${word.start}" data-end="${word.end}">${esc(word.w)}</span>`)
+            .join(" ")
+        : `<span class="mk-full">${esc(props.text ?? "")}</span>`;
+    return [
+        `<div class="mk-caption" ${animAttrs("fade", 0)}>`,
+        `<p class="mk-line">${line}</p>`,
+        "</div>",
+    ].join("\n");
+};
+export const captionScene = defineScene({
+    type: "caption",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Voice word timings as karaoke captions; falls back to a full-text card.",
+        example: {
+            words: [
+                { w: "Hello", start: 0, end: 0.4 },
+                { w: "world", start: 0.4, end: 0.9 },
+            ],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

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

@@ -0,0 +1,11 @@
+/**
+ * Karaoke captions: each `.mk-word` carries its clip-clock window in
+ * `data-start`/`data-end` (kit.reveal-compatible `WordTiming` shape).
+ * `seek(t)` is a pure function of `t`: the live word gets `mk-now`,
+ * spoken words keep `mk-on`, everything else is dimmed by CSS.
+ * Without `words` the fragment holds a static `.mk-full` card and
+ * seek is a no-op envelope fade.
+ *
+ * @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/caption/scene.js

@@ -0,0 +1,33 @@
+// @ts-check
+import { mountOverlay } from "../../runtime/mount.js";
+/**
+ * Karaoke captions: each `.mk-word` carries its clip-clock window in
+ * `data-start`/`data-end` (kit.reveal-compatible `WordTiming` shape).
+ * `seek(t)` is a pure function of `t`: the live word gets `mk-now`,
+ * spoken words keep `mk-on`, everything else is dimmed by CSS.
+ * Without `words` the fragment holds a static `.mk-full` card and
+ * seek is a no-op envelope fade.
+ *
+ * @type {import("../../runtime/mount.js").CreateScene}
+ */
+export function createScene(root, config, ctx) {
+    const words = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll(".mk-word")));
+    const times = words.map((el) => ({
+        el,
+        start: Number(el.dataset.start),
+        end: Number(el.dataset.end),
+    }));
+    return mountOverlay(root, config, ctx, { baseDelay: 0.1, staggerFrames: 4, rise: 0 }, {
+        /** @param {number} t */
+        update: (t) => {
+            for (const { el, start, end } of times) {
+                el.classList.toggle("mk-now", t >= start && t < end);
+                el.classList.toggle("mk-on", t >= end);
+            }
+        },
+        reset: () => {
+            for (const { el } of times)
+                el.classList.remove("mk-now", "mk-on");
+        },
+    });
+}

package/dist/scenes/caption/style.css

@@ -0,0 +1,33 @@
+#scene-root {
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: calc(var(--mk-space-xxl) + var(--mk-space-lg));
+}
+#scene-root .mk-caption {
+  align-self: center;
+  max-width: min(88ch, 100%);
+  padding: var(--mk-space-md) var(--mk-space-lg);
+  border-radius: var(--mk-radius-lg);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  background: var(--mk-color-card);
+  text-align: center;
+}
+#scene-root .mk-line {
+  font-family: var(--mk-font-sans);
+  font-size: var(--mk-font-size-lg);
+  font-weight: 600;
+  line-height: 1.4;
+  text-wrap: balance;
+}
+#scene-root .mk-word {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-word.mk-on {
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-word.mk-now {
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-full {
+  color: var(--mk-color-fg);
+}

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

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

package/dist/scenes/chapter/index.js

@@ -0,0 +1,29 @@
+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 { limitWords, present, text } from "../../words.js";
+const configSchema = limitWords(z.strictObject({
+    number: z.number().int().min(0).max(99),
+    label: text,
+    position: cornerSchema.default("top-left"),
+}), (props) => present(props.number, props.label));
+const render = (props) => [
+    `<div class="mk-chip ${positionClass(props.position)}" ${animAttrs("fade", 0)}>`,
+    `<span class="mk-number">${props.number}</span>`,
+    `<span class="mk-label">${esc(props.label)}</span>`,
+    "</div>",
+].join("\n");
+export const chapterScene = defineScene({
+    type: "chapter",
+    layer: "overlay",
+    configSchema,
+    meta: {
+        purpose: "Numbered chapter chip in a corner.",
+        example: { number: 1, label: "Intro" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, _ctx, root) => ({ body: render(props), css: positionCss(root) }),
+});

package/dist/scenes/chapter/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;