@anvpx/motion-scenes 0.0.0-stage → 0.1.0

package/dist/scenes/steps/index.js

@@ -0,0 +1,147 @@
+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 { textWidth } from "../../shared/measure.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const COUNT_MESSAGE = "need 2-6 steps";
+const CHECK_SIZE = 56;
+const stepSchema = z.strictObject({
+    label: text,
+    value: text.optional(),
+    detail: text.optional(),
+});
+const configSchema = limitWords(z
+    .strictObject({
+    title: text.optional(),
+    steps: z.array(stepSchema).min(2, COUNT_MESSAGE).max(6, COUNT_MESSAGE),
+    layout: z.enum(["path", "ladder", "stairs"]).default("path"),
+    active: z.number().int().min(1).optional(),
+})
+    .superRefine((props, ctx) => {
+    if (props.active !== undefined && props.active > props.steps.length) {
+        ctx.addIssue({
+            code: "custom",
+            path: ["active"],
+            message: `must be 1-${props.steps.length}`,
+        });
+    }
+}), (props) => props.steps
+    .flatMap((step) => present(step.label, step.value, step.detail))
+    .concat(present(props.title)));
+/** Progress state of step `index` (0-based) against the 1-based `active` step. */
+const stateOf = (index, active) => {
+    if (active === undefined)
+        return "on";
+    if (index + 1 < active)
+        return "done";
+    return index + 1 === active ? "active" : "todo";
+};
+const textBlock = (step) => {
+    const value = step.value ? `\n<p class="mk-value">${esc(step.value)}</p>` : "";
+    const detail = step.detail ? `\n<p class="mk-detail">${esc(step.detail)}</p>` : "";
+    return `<p class="mk-label">${esc(step.label)}</p>${value}${detail}`;
+};
+/** Marker of a path step: a check for finished steps, otherwise its number. */
+const marker = (index, state) => state === "done"
+    ? sceneIcon("check", { at: `props.steps[${index}]`, size: CHECK_SIZE })
+    : String(index + 1);
+const item = (props, step, index, offset) => {
+    const state = stateOf(index, props.active);
+    const rank = ((index + 1) / props.steps.length).toFixed(3);
+    const attrs = animAttrs("rise", index + offset, `step-${index + 1}`);
+    const open = `<li class="mk-step mk-${state}" style="--rank:${rank}" ${attrs}>`;
+    if (props.layout === "path") {
+        return `${open}\n<span class="mk-marker">${marker(index, state)}</span>\n${textBlock(step)}\n</li>`;
+    }
+    if (props.layout === "stairs") {
+        return `${open}\n<div class="mk-tread">${textBlock(step)}</div>\n<span class="mk-block">${index + 1}</span>\n</li>`;
+    }
+    return `${open}\n${textBlock(step)}\n</li>`;
+};
+/** Tall frames: the ladder becomes ascending rows (label left, value right); words never break. */
+const TALL_CSS = `#scene-root .mk-label, #scene-root .mk-value, #scene-root .mk-detail { overflow-wrap: normal; hyphens: none; }
+#scene-root .mk-ladder { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; gap: var(--mk-space-md); }
+#scene-root .mk-ladder .mk-step { width: calc(62% + 38% * var(--rank)); height: auto; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--mk-space-lg); row-gap: var(--mk-space-xs); padding: var(--mk-space-lg) var(--mk-space-xl); border-top-width: var(--mk-stroke-card, 2px); border-left: 10px solid var(--mk-color-accent); }
+#scene-root .mk-ladder .mk-todo { border-left-color: var(--mk-color-divider); }
+#scene-root .mk-ladder .mk-label { grid-column: 1; }
+#scene-root .mk-ladder .mk-value { grid-column: 2; grid-row: 1 / span 2; }
+#scene-root .mk-ladder .mk-detail { grid-column: 1; }`;
+/** Square: four rows must fit the height, so type and padding shrink one step. */
+const SQUARE_CSS = `#scene-root { gap: var(--mk-space-lg); }
+#scene-root .mk-ladder { gap: var(--mk-space-sm); }
+#scene-root .mk-ladder .mk-step { padding: var(--mk-space-md) var(--mk-space-lg); }
+#scene-root .mk-ladder .mk-label { font-size: var(--mk-font-size-md); }
+#scene-root .mk-ladder .mk-value { font-size: var(--mk-font-size-lg); }`;
+/** Landscape has room: type grows as the step count falls (details stay above the 28px floor). */
+const LANDSCAPE_CSS = `#scene-root .mk-n2 .mk-label, #scene-root .mk-n3 .mk-label { font-size: var(--mk-font-size-xl); }
+#scene-root .mk-n2 .mk-value, #scene-root .mk-n3 .mk-value { font-size: var(--mk-font-size-title); }
+#scene-root .mk-n2 .mk-detail, #scene-root .mk-n3 .mk-detail { font-size: var(--mk-font-size-lg); line-height: 1.25; }
+#scene-root .mk-n4 .mk-value { font-size: var(--mk-font-size-title); }
+#scene-root .mk-n4 .mk-detail { font-size: var(--mk-font-size-md); line-height: 1.3; }
+#scene-root .mk-path { margin-top: var(--mk-space-xl); }
+#scene-root .mk-path .mk-step { gap: var(--mk-space-lg); }`;
+const FIT_SIDES = 0.84;
+const FIT_MARGIN = 0.92;
+const FALLBACK_GAP_PX = 32;
+/** Largest step whose longest text fits one column (themes scale their steps differently). */
+const fitStep = (ctx, texts, steps, width) => steps.find((step) => texts.every((text) => textWidth(text, ctx.theme.fontSizes[step] ?? 0) <= width * FIT_MARGIN)) ??
+    steps[steps.length - 1] ??
+    "sm";
+/** Tall frames with 4+ columns of path/stairs: type steps down until each word fits its column. */
+const columnCss = (props, ctx, root) => {
+    const n = props.steps.length;
+    if (props.layout === "ladder" || n < 4 || frameOf(ctx) === "landscape")
+        return "";
+    const gap = props.layout === "stairs" ? 0 : (ctx.theme.spacing.lg ?? FALLBACK_GAP_PX);
+    const col = (ctx.width * FIT_SIDES - gap * (n - 1)) / n;
+    const label = fitStep(ctx, props.steps.map((step) => step.label), ["lg", "md", "sm"], col);
+    const value = fitStep(ctx, props.steps.flatMap((step) => (step.value ? [step.value] : [])), ["xl", "lg", "md", "sm"], col);
+    return [
+        `${root} .mk-steps .mk-label { font-size: var(--mk-font-size-${label}); }`,
+        `${root} .mk-steps .mk-value { font-size: var(--mk-font-size-${value}); }`,
+        "",
+    ].join("\n");
+};
+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 steps = props.steps.map((step, index) => item(props, step, index, offset));
+    const cls = `mk-steps mk-${props.layout} mk-n${props.steps.length}`;
+    return `${head}<ol class="${cls}">\n${steps.join("\n")}\n</ol>`;
+};
+export const stepsScene = defineScene({
+    type: "steps",
+    configSchema,
+    meta: {
+        purpose: "Ordered progression of 2-6 steps: a process path, or ascending ladder/stairs tiers with value labels (pricing, levels).",
+        example: {
+            title: "Plans",
+            layout: "ladder",
+            steps: [
+                { label: "Starter", value: "$0" },
+                { label: "Team", value: "$29" },
+                { label: "Scale", value: "$99" },
+            ],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props),
+        css: frameOf(ctx) === "landscape"
+            ? `
+/* landscape */
+${LANDSCAPE_CSS.replaceAll("#scene-root", root)}
+`
+            : frameCss(ctx, root, { tall: TALL_CSS, square: SQUARE_CSS }) + columnCss(props, ctx, root),
+    }),
+});

package/dist/scenes/steps/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/steps/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: 4, rise: 36 });
+}

package/dist/scenes/steps/style.css

@@ -0,0 +1,190 @@
+#scene-root {
+  gap: var(--mk-space-xxl);
+}
+#scene-root .mk-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mk-space-md);
+}
+#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-steps {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-lg);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+#scene-root .mk-value {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-xl);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-detail {
+  font-size: var(--mk-font-size-sm);
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+  text-wrap: pretty;
+}
+#scene-root .mk-n5 .mk-label,
+#scene-root .mk-n6 .mk-label {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-n5 .mk-value,
+#scene-root .mk-n6 .mk-value {
+  font-size: var(--mk-font-size-lg);
+}
+
+/* path: numbered nodes on a connector */
+#scene-root .mk-path .mk-step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mk-space-md);
+  text-align: center;
+}
+#scene-root .mk-path .mk-step::before {
+  content: "";
+  position: absolute;
+  top: 52px;
+  right: calc(50% + 80px);
+  width: calc(100% + var(--mk-space-lg) - 160px);
+  height: 8px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+}
+#scene-root .mk-path .mk-step:first-child::before {
+  display: none;
+}
+#scene-root .mk-path .mk-todo::before {
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-path .mk-marker {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 112px;
+  height: 112px;
+  margin-bottom: var(--mk-space-md);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  font-size: var(--mk-font-size-lg);
+  font-weight: 800;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-path .mk-active .mk-marker {
+  box-shadow:
+    0 0 0 10px var(--mk-color-bg),
+    0 0 0 18px var(--mk-color-accent);
+}
+#scene-root .mk-path .mk-todo .mk-marker {
+  background: var(--mk-color-card);
+  border: 6px solid var(--mk-color-divider);
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-path .mk-todo .mk-label {
+  color: var(--mk-color-muted);
+}
+
+/* ladder: ascending tier cards, value labels */
+#scene-root .mk-ladder {
+  align-items: flex-end;
+  height: 640px;
+}
+#scene-root .mk-ladder .mk-step {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: var(--mk-space-md);
+  height: calc(34% + 66% * var(--rank));
+  padding: var(--mk-space-xl);
+  background: var(--mk-color-card);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  border-top: 10px solid var(--mk-color-accent);
+  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-ladder .mk-active {
+  background: var(--mk-color-accent);
+  border-color: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+}
+#scene-root .mk-ladder .mk-active .mk-value,
+#scene-root .mk-ladder .mk-active .mk-detail {
+  color: var(--mk-color-onAccent);
+}
+#scene-root .mk-ladder .mk-todo {
+  border-top-color: var(--mk-color-divider);
+}
+
+/* stairs: treads with the label on top of each rising block */
+#scene-root .mk-stairs {
+  align-items: flex-end;
+  gap: 0;
+  height: 700px;
+}
+#scene-root .mk-stairs .mk-step {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+#scene-root .mk-stairs .mk-tread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-sm);
+  padding: 0 var(--mk-space-md) var(--mk-space-lg);
+}
+#scene-root .mk-stairs .mk-block {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: calc(120px + var(--rank) * 280px);
+  padding: var(--mk-space-lg);
+  border-radius: var(--mk-radius-lg) var(--mk-radius-lg) 0 0;
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+  font-size: var(--mk-font-size-xl);
+  font-weight: 800;
+  line-height: 1;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-stairs .mk-active .mk-block {
+  background: var(--mk-color-accent2);
+  color: var(--mk-color-onAccent2);
+}
+#scene-root .mk-stairs .mk-todo .mk-block {
+  background: var(--mk-color-card);
+  border: var(--mk-stroke-card, 2px) solid var(--mk-color-divider);
+  border-bottom: 0;
+  color: var(--mk-color-muted);
+}

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

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

package/dist/scenes/sticker/index.js

@@ -0,0 +1,48 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { esc } from "../../html.js";
+import { textWidth } from "../../shared/measure.js";
+import { readText } from "../../text-file.js";
+import { limitWords, text } from "../../words.js";
+const MAX_WORDS = 5;
+const MAX_CHARS = 16;
+/** Share of the frame a sticker may fill. */
+const FILL_WIDTH = 0.86;
+const FILL_HEIGHT = 0.8;
+/** Theme font steps, largest first; every one is >= 28 px. */
+const STEPS = ["hero", "heroMd", "heroSm", "display", "title", "xl", "lg"];
+const configSchema = limitWords(z.strictObject({
+    words: z
+        .array(text.max(MAX_CHARS))
+        .min(1, `need 1-${MAX_WORDS} words`)
+        .max(MAX_WORDS, `need 1-${MAX_WORDS} words`),
+    burst: z.boolean().default(true),
+}), (props) => props.words);
+const px = (ctx, step) => ctx.theme.fontSizes[step] ?? 0;
+/** Largest step at which every word fits the frame. */
+const largest = (ctx, fits) => STEPS.find((step) => px(ctx, step) > 0 && fits(px(ctx, step))) ?? "lg";
+const render = (props, ctx) => {
+    const maxWidth = ctx.width * FILL_WIDTH;
+    const step = largest(ctx, (size) => props.words.every((word) => textWidth(word, size) <= maxWidth) &&
+        props.words.length * size * 1.2 <= ctx.height * FILL_HEIGHT);
+    const stickers = props.words.map((word, index) => {
+        const tilt = index % 2 === 0 ? -4 : 3;
+        return `<p class="mk-sticker mk-sz-${step}" data-i="${index}" data-tilt="${tilt}">${esc(word)}</p>`;
+    });
+    const burst = props.burst ? '<div class="mk-burst" aria-hidden="true"></div>' : "";
+    return `<div class="mk-stage">
+${burst}
+${stickers.join("\n")}
+</div>`;
+};
+export const stickerScene = defineScene({
+    type: "sticker",
+    configSchema,
+    meta: {
+        purpose: "Pop-comic sticker slam: 1-5 short phrases slam in with outline type, tilt and a starburst; for hooks, myth-vs-fact and punchy shorts.",
+        example: { words: ["Myth", "Busted"], burst: true },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => ({ body: render(props, ctx) }),
+});

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

@@ -0,0 +1,57 @@
+// @ts-check
+import { clamp01, ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+const IN_SECONDS = 0.3;
+const IN_SHARE = 0.45;
+const SLAM_FROM = 1.8;
+const SETTLE_SPIN = 8;
+/**
+ * @param {number} t
+ * @param {number} from
+ * @param {number} span
+ */
+const within = (t, from, span) => clamp01(span > 0 ? (t - from) / span : t >= from ? 1 : 0);
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.1, staggerFrames: 4, rise: 0 });
+    const words = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll(".mk-sticker")));
+    const count = words.length;
+    const duration = ctx.duration ?? (Number(root.dataset.duration) || 6);
+    const beat = duration / Math.max(count, 1);
+    const inSpan = Math.min(IN_SECONDS, beat * IN_SHARE);
+    /**
+     * @param {HTMLElement} el
+     * @param {number} i
+     * @param {number} t
+     */
+    const slam = (el, i, t) => {
+        if (t < i * beat) {
+            el.style.opacity = "0";
+            el.style.transform = "";
+            return;
+        }
+        const tilt = Number(el.dataset.tilt ?? 0);
+        const local = within(t, i * beat, inSpan);
+        const eased = ease("spring-snappy", local);
+        const scale = 1 + (SLAM_FROM - 1) * (1 - eased);
+        const spin = tilt + SETTLE_SPIN * (1 - eased);
+        el.style.opacity = "1";
+        el.style.transform = `scale(${scale}) rotate(${spin}deg)`;
+    };
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        words.forEach((el, i) => {
+            slam(el, i, t);
+        });
+    };
+    const dispose = () => {
+        inner.dispose();
+        for (const el of words) {
+            el.style.removeProperty("opacity");
+            el.style.removeProperty("transform");
+        }
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/sticker/style.css

@@ -0,0 +1,88 @@
+#scene-root {
+  align-items: center;
+  text-align: center;
+}
+#scene-root .mk-stage {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+}
+#scene-root .mk-burst {
+  grid-area: 1 / 1;
+  width: 130vmin;
+  height: 130vmin;
+  background: var(--mk-color-accentSoft);
+  clip-path: polygon(
+    50% 0%,
+    55% 12%,
+    68% 6%,
+    68% 20%,
+    82% 18%,
+    78% 31%,
+    92% 34%,
+    84% 45%,
+    97% 52%,
+    85% 59%,
+    94% 71%,
+    80% 72%,
+    83% 86%,
+    69% 83%,
+    65% 97%,
+    55% 87%,
+    50% 100%,
+    45% 87%,
+    35% 97%,
+    31% 83%,
+    17% 86%,
+    20% 72%,
+    6% 71%,
+    15% 59%,
+    3% 52%,
+    16% 45%,
+    8% 34%,
+    22% 31%,
+    18% 18%,
+    32% 20%,
+    32% 6%,
+    45% 12%
+  );
+  opacity: 0.35;
+}
+#scene-root .mk-sticker {
+  grid-area: 1 / 1;
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  color: var(--mk-color-fg);
+  -webkit-text-stroke: 0.035em var(--mk-color-accent);
+  paint-order: stroke fill;
+  opacity: 0;
+  will-change: transform, opacity;
+}
+#scene-root .mk-sz-hero {
+  font-size: var(--mk-font-size-hero);
+}
+#scene-root .mk-sz-heroMd {
+  font-size: var(--mk-font-size-heroMd);
+}
+#scene-root .mk-sz-heroSm {
+  font-size: var(--mk-font-size-heroSm);
+}
+#scene-root .mk-sz-display {
+  font-size: var(--mk-font-size-display);
+}
+#scene-root .mk-sz-title {
+  font-size: var(--mk-font-size-title);
+}
+#scene-root .mk-sz-xl {
+  font-size: var(--mk-font-size-xl);
+}
+#scene-root .mk-sz-lg {
+  font-size: var(--mk-font-size-lg);
+}

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

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

package/dist/scenes/table/index.js

@@ -0,0 +1,131 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { textWidth } from "../../shared/measure.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const COLUMNS_MESSAGE = "need 2-5 columns";
+const ROWS_MESSAGE = "need 2-8 rows";
+const HEADER_MAX = 32;
+const CELL_MAX = 40;
+const CELL_PX = 32;
+const RANK_COL_PX = 96;
+const WEIGHT_PAD_PX = 160;
+const ROOMY_PX = 48;
+const ROOMY_MAX_ROWS = 5;
+const COL_GAP_PX = 32;
+const TABLE_PAD_PX = 2 * 64 + 4;
+const SAFE_SIDES = 0.1;
+const cell = z.union([text.max(CELL_MAX), z.number()]);
+const configSchema = limitWords(z
+    .strictObject({
+    title: text.optional(),
+    columns: z.array(text.max(HEADER_MAX)).min(2, COLUMNS_MESSAGE).max(5, COLUMNS_MESSAGE),
+    rows: z.array(z.array(cell)).min(2, ROWS_MESSAGE).max(8, ROWS_MESSAGE),
+    rank: z.boolean().optional(),
+    highlight: z.number().int().min(0).optional(),
+    align: z
+        .array(z.enum(["l", "r"]))
+        .max(5)
+        .optional(),
+})
+    .superRefine((props, ctx) => {
+    props.rows.forEach((row, index) => {
+        if (row.length !== props.columns.length) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["rows", index],
+                message: `has ${row.length} cells; needs ${props.columns.length} (one per column)`,
+            });
+        }
+    });
+    if (props.highlight !== undefined && props.highlight >= props.rows.length) {
+        ctx.addIssue({
+            code: "custom",
+            path: ["highlight"],
+            message: `highlight ${props.highlight} is outside rows (0-${props.rows.length - 1})`,
+        });
+    }
+    if ((props.align?.length ?? 0) > props.columns.length) {
+        ctx.addIssue({
+            code: "custom",
+            path: ["align"],
+            message: "more align entries than columns",
+        });
+    }
+}), (props) => [...present(props.title), ...props.columns, ...props.rows.flat().map(String)]);
+/** A number with optional currency, sign, separators and a short suffix ("%", "K", "x"). */
+const NUMERIC = /^[^\p{L}\d]{0,2}\d[\d,.]*\s?(?:%|[KMBkmbx])?$/u;
+const isNumeric = (value) => typeof value === "number" || NUMERIC.test(value);
+/** Per column: right for numbers, left for text, unless `align` says otherwise. */
+const alignments = (props) => props.columns.map((_, col) => {
+    const given = props.align?.[col];
+    if (given !== undefined)
+        return given;
+    return props.rows.every((row) => isNumeric(row[col] ?? "")) ? "r" : "l";
+});
+const widest = (props, col, px) => Math.max(textWidth(props.columns[col] ?? "", CELL_PX), ...props.rows.map((row) => textWidth(String(row[col] ?? ""), CELL_PX))) *
+    (px / CELL_PX);
+/** Column weights follow the widest text in each column, so wide content gets wide columns. */
+const template = (props) => {
+    const cols = props.columns.map((_, col) => `minmax(0, ${Math.round(widest(props, col, CELL_PX) + WEIGHT_PAD_PX)}fr)`);
+    return (props.rank ? [`${RANK_COL_PX}px`, ...cols] : cols).join(" ");
+};
+/** Few rows with short text get the larger size, which fills the frame better. */
+const isRoomy = (props, ctx) => {
+    if (props.rows.length > ROOMY_MAX_ROWS)
+        return false;
+    const text = props.columns.reduce((sum, _, col) => sum + widest(props, col, ROOMY_PX), 0);
+    const fixed = (props.columns.length - 1) * COL_GAP_PX + TABLE_PAD_PX;
+    const rank = props.rank ? RANK_COL_PX + COL_GAP_PX : 0;
+    return text + fixed + rank <= ctx.width * (1 - SAFE_SIDES);
+};
+const cellHtml = (value, role, side) => `<span role="${role}" class="mk-cell mk-${side}">${esc(value)}</span>`;
+const render = (props, ctx) => {
+    const offset = props.title ? 1 : 0;
+    const sides = alignments(props);
+    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 rankHead = props.rank ? `<span role="columnheader" class="mk-cell mk-rankh">#</span>` : "";
+    const header = `<div role="row" class="mk-trow mk-thead" ${animAttrs("fade", offset)}>${rankHead}${props.columns
+        .map((column, col) => cellHtml(column, "columnheader", sides[col] ?? "l"))
+        .join("")}</div>`;
+    const rows = props.rows.map((row, index) => {
+        const cls = `mk-trow${index === props.highlight ? " mk-hi" : ""}`;
+        const attrs = animAttrs("rise", offset + 1 + index, `row-${index + 1}`);
+        const rank = props.rank
+            ? `<span role="cell" class="mk-cell mk-rank${index === 0 ? " mk-first" : ""}"><b>${index + 1}</b></span>`
+            : "";
+        const cells = row.map((value, col) => cellHtml(String(value), "cell", sides[col] ?? "l"));
+        return `<div role="row" class="${cls}" ${attrs}>${rank}${cells.join("")}</div>`;
+    });
+    return `${head}<div role="table" class="mk-table${isRoomy(props, ctx) ? " mk-roomy" : ""}" aria-label="${esc(props.title ?? props.columns.join(", "))}">\n${header}\n${rows.join("\n")}\n</div>`;
+};
+export const tableScene = defineScene({
+    type: "table",
+    configSchema,
+    meta: {
+        purpose: "Small data table or ranked list (2-5 columns, 2-8 rows) with row-by-row reveal and one optional highlighted row.",
+        example: {
+            title: "Top regions",
+            columns: ["Region", "Revenue"],
+            rows: [
+                ["North", "$4.2M"],
+                ["South", "$3.1M"],
+            ],
+            rank: true,
+            highlight: 0,
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props, ctx),
+        css: `${root} .mk-trow { grid-template-columns: ${template(props)}; }\n`,
+    }),
+});