@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/scenes/code/style.css

@@ -0,0 +1,155 @@
+#scene-root {
+  align-items: center;
+}
+#scene-root .mk-window {
+  min-width: 56%;
+  max-width: 100%;
+  overflow: hidden;
+  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 32px 72px -32px color-mix(in srgb, var(--mk-color-fg) 45%, transparent)
+  );
+}
+#scene-root .mk-size-lg {
+  font-size: var(--mk-font-size-lg);
+}
+#scene-root .mk-size-md {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-size-sm {
+  font-size: var(--mk-font-size-sm);
+}
+#scene-root .mk-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-lg);
+  padding: var(--mk-space-md) var(--mk-space-lg);
+  min-height: 72px;
+  background: var(--mk-color-surface);
+  border-bottom: 2px solid var(--mk-color-divider);
+}
+#scene-root .mk-dots {
+  display: flex;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-dots i {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-file {
+  font-family: var(--mk-font-mono);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 600;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-body {
+  display: flex;
+  flex-direction: column;
+  padding: var(--mk-space-lg) 0;
+  font-family: var(--mk-font-mono);
+  line-height: 1.6;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-line {
+  display: grid;
+  grid-template-columns: 2ch 2ch auto;
+  column-gap: 1ch;
+  align-items: baseline;
+  padding: 0 var(--mk-space-lg) 0 var(--mk-space-md);
+  white-space: pre;
+  min-height: 1.6em;
+}
+#scene-root .mk-bare .mk-line {
+  grid-template-columns: 0 2ch auto;
+  column-gap: 0;
+}
+#scene-root .mk-num {
+  text-align: right;
+  color: var(--mk-color-muted);
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  opacity: 0.7;
+}
+#scene-root .mk-sign {
+  text-align: center;
+  font-weight: 800;
+}
+#scene-root .mk-code {
+  position: relative;
+  display: block;
+}
+#scene-root .mk-text {
+  display: inline-block;
+  min-width: 1px;
+}
+#scene-root .mk-caret {
+  position: absolute;
+  top: 0.15em;
+  bottom: 0.15em;
+  left: 0;
+  width: 0.5ch;
+  background: var(--mk-color-accent);
+  opacity: 0;
+}
+#scene-root .mk-add {
+  background: color-mix(in srgb, var(--mk-chart-3) 18%, var(--mk-color-card));
+}
+#scene-root .mk-add .mk-sign {
+  color: var(--mk-chart-3);
+}
+#scene-root .mk-del {
+  background: color-mix(in srgb, var(--mk-chart-5) 16%, var(--mk-color-card));
+}
+#scene-root .mk-del .mk-sign {
+  color: var(--mk-chart-5);
+}
+#scene-root .mk-hl {
+  background: var(--mk-color-accentSoft);
+  box-shadow: inset 8px 0 0 var(--mk-color-accent);
+}
+#scene-root .mk-t-kw {
+  color: var(--mk-color-accent);
+  font-weight: 700;
+}
+#scene-root .mk-t-str {
+  color: var(--mk-color-accent2);
+}
+#scene-root .mk-t-num {
+  color: var(--mk-chart-2);
+}
+#scene-root .mk-t-com {
+  color: var(--mk-color-muted);
+  font-style: italic;
+}
+#scene-root .mk-t-fn {
+  color: var(--mk-chart-6);
+  font-weight: 700;
+}
+#scene-root .mk-t-type {
+  color: var(--mk-chart-4);
+}
+#scene-root .mk-t-key {
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-t-pun {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-wrap {
+  width: 100%;
+}
+#scene-root .mk-wrap .mk-line {
+  grid-template-columns: 2ch 2ch minmax(0, 1fr);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+#scene-root .mk-wrap.mk-bare .mk-line {
+  grid-template-columns: 0 2ch minmax(0, 1fr);
+}
+#scene-root .mk-wrap .mk-text {
+  display: block;
+}

package/dist/scenes/code/tokenize.d.ts

@@ -0,0 +1,8 @@
+export type Lang = "js" | "ts" | "json" | "py" | "sh" | "plain";
+export type TokenKind = "plain" | "kw" | "str" | "num" | "com" | "fn" | "type" | "key" | "pun";
+export interface Token {
+    readonly kind: TokenKind;
+    readonly text: string;
+}
+/** Splits one line into classified tokens; lossless, deterministic, no highlight library. */
+export declare const tokenize: (line: string, lang: Lang) => Token[];

package/dist/scenes/code/tokenize.js

@@ -0,0 +1,145 @@
+const words = (list) => new Set(list.split(" "));
+const JS_KEYWORDS = words("const let var function return if else for while do switch case break continue new class extends import export from default async await try catch finally throw typeof instanceof in of void yield this null undefined true false");
+const C_COMMENT = /\/\/.*|\/\*.*?(?:\*\/|$)/y;
+const HASH_COMMENT = /#.*/y;
+const RULES = {
+    js: {
+        keywords: JS_KEYWORDS,
+        comment: C_COMMENT,
+        quotes: "\"'`",
+        types: false,
+        declares: words("function class"),
+    },
+    ts: {
+        keywords: new Set([
+            ...JS_KEYWORDS,
+            ...words("interface type enum implements readonly public private protected as satisfies keyof"),
+        ]),
+        comment: C_COMMENT,
+        quotes: "\"'`",
+        types: true,
+        declares: words("function class"),
+    },
+    json: {
+        keywords: words("true false null"),
+        comment: undefined,
+        quotes: '"',
+        types: false,
+        declares: words(""),
+    },
+    py: {
+        keywords: words("def class return if elif else for while in not and or is import from as with try except finally raise lambda pass break continue yield async await None True False"),
+        comment: HASH_COMMENT,
+        quotes: "\"'",
+        types: false,
+        declares: words("def class"),
+    },
+    sh: {
+        keywords: words("if then else elif fi for while do done case esac in function export"),
+        comment: HASH_COMMENT,
+        quotes: "\"'",
+        types: false,
+        declares: words(""),
+    },
+};
+const NUMBER = /-?\d+(?:\.\d+)?(?:e[+-]?\d+)?/iy;
+const IDENT = /[A-Za-z_$@][\w$]*/y;
+const FLAG = /--?[A-Za-z][\w-]*/y;
+const SH_VAR = /\$[A-Za-z_]\w*|\$\{[^}]*\}/y;
+const PROMPT = /^\s*[$>] /;
+const matchAt = (re, text, at) => {
+    re.lastIndex = at;
+    return re.exec(text)?.[0];
+};
+/** Index just past the closing quote, or the end of the line when unterminated. */
+const stringEnd = (line, at) => {
+    const quote = line[at];
+    let i = at + 1;
+    while (i < line.length) {
+        if (line[i] === "\\")
+            i += 2;
+        else if (line[i] === quote)
+            return i + 1;
+        else
+            i += 1;
+    }
+    return line.length;
+};
+const nextChar = (line, from) => line.slice(from).trimStart()[0] ?? "";
+const push = (out, kind, text) => {
+    const last = out[out.length - 1];
+    if (last && last.kind === kind)
+        out[out.length - 1] = { kind, text: last.text + text };
+    else
+        out.push({ kind, text });
+};
+const wordKind = (lang, rules, word, after, at) => {
+    if (rules.keywords.has(word))
+        return "kw";
+    if (lang === "sh")
+        return at.first ? "fn" : "plain";
+    if (lang === "py" && word.startsWith("@"))
+        return "fn";
+    if (rules.declares.has(at.prev) || nextChar(after, 0) === "(")
+        return "fn";
+    return rules.types && /^[A-Z]/.test(word) ? "type" : "plain";
+};
+const quoted = (line, i, lang) => {
+    const end = stringEnd(line, i);
+    const key = lang === "json" && nextChar(line, end) === ":";
+    return { kind: key ? "key" : "str", text: line.slice(i, end) };
+};
+/** Shell variables and flags (a flag must follow whitespace). */
+const shellPiece = (line, i) => {
+    const variable = matchAt(SH_VAR, line, i);
+    if (variable !== undefined)
+        return variable;
+    return /\s/.test(line[i - 1] ?? " ") ? matchAt(FLAG, line, i) : undefined;
+};
+/** A number never starts inside a word (v2, a1). */
+const numeric = (line, i) => /\w/.test(line[i - 1] ?? " ") ? undefined : matchAt(NUMBER, line, i);
+const word = (line, i, lang, rules, at) => {
+    const ident = matchAt(IDENT, line, i);
+    if (ident === undefined)
+        return undefined;
+    const kind = wordKind(lang, rules, ident, line.slice(i + ident.length), at);
+    at.prev = ident;
+    at.first = false;
+    return { kind, text: ident };
+};
+/** One step: the token starting at `i`, or a single plain character. */
+const step = (line, i, lang, rules, at) => {
+    const char = line[i] ?? "";
+    const comment = rules.comment && matchAt(rules.comment, line, i);
+    if (comment)
+        return { kind: "com", text: comment };
+    if (rules.quotes.includes(char))
+        return quoted(line, i, lang);
+    const shell = lang === "sh" ? shellPiece(line, i) : undefined;
+    if (shell)
+        return { kind: "type", text: shell };
+    const number = lang === "sh" ? undefined : numeric(line, i);
+    if (number)
+        return { kind: "num", text: number };
+    return word(line, i, lang, rules, at) ?? { kind: "plain", text: char };
+};
+/** Splits one line into classified tokens; lossless, deterministic, no highlight library. */
+export const tokenize = (line, lang) => {
+    if (lang === "plain")
+        return [{ kind: "plain", text: line }];
+    const rules = RULES[lang];
+    const out = [];
+    const at = { prev: "", first: true };
+    let i = 0;
+    const prompt = lang === "sh" ? PROMPT.exec(line)?.[0] : undefined;
+    if (prompt !== undefined) {
+        push(out, "pun", prompt);
+        i = prompt.length;
+    }
+    while (i < line.length) {
+        const token = step(line, i, lang, rules, at);
+        push(out, token.kind, token.text);
+        i += token.text.length;
+    }
+    return out;
+};

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

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

package/dist/scenes/compare/index.js

@@ -0,0 +1,128 @@
+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-5 points";
+const MARK_SIZE = 36;
+const BADGE_SIZE = 32;
+/** Above this many points a side uses the compact point size. */
+const DENSE_POINTS = 3;
+const capped = (max) => text.max(max, `max ${max} characters`);
+const sideSchema = z.strictObject({
+    label: capped(30),
+    points: z.array(capped(40)).min(1, COUNT_MESSAGE).max(5, COUNT_MESSAGE),
+    value: capped(12).optional(),
+    tag: capped(20).optional(),
+});
+const configSchema = limitWords(z.strictObject({
+    title: capped(60).optional(),
+    left: sideSchema,
+    right: sideSchema,
+    mode: z.enum(["split", "wipe"]).default("split"),
+    verdict: capped(80).optional(),
+    winner: z.enum(["left", "right"]).optional(),
+    winnerLabel: capped(20).default("Winner"),
+}), (props) => [
+    ...present(props.title, props.verdict, props.winner && props.winnerLabel),
+    ...[props.left, props.right].flatMap((s) => present(s.tag, s.label, s.value, ...s.points)),
+]);
+const badge = (label) => `<span class="mk-badge">${sceneIcon("trophy", { at: "props.winner", size: BADGE_SIZE })}<span>${esc(label)}</span></span>`;
+const point = (props, pos, label) => {
+    const lost = props.winner !== undefined && props.winner !== pos;
+    const icon = sceneIcon(lost ? "minus" : "check", { at: `props.${pos}.points`, size: MARK_SIZE });
+    return `<li class="mk-point"><span class="mk-mark">${icon}</span><span>${esc(label)}</span></li>`;
+};
+const card = (props, pos, attrs, wrap = false, badged = true) => {
+    const side = props[pos];
+    const cls = ["mk-side", `mk-${pos}`];
+    if (props.winner === pos)
+        cls.push("mk-win");
+    if (props.winner !== undefined && props.winner !== pos)
+        cls.push("mk-lose");
+    const tag = side.tag ? `<span class="mk-tag">${esc(side.tag)}</span>` : "";
+    const value = side.value ? `<p class="mk-value">${esc(side.value)}</p>` : "";
+    const win = badged && props.winner === pos ? badge(props.winnerLabel) : "";
+    const head = `<header class="mk-side-head">${tag}${win}</header>
+<h2 class="mk-label">${esc(side.label)}</h2>
+${value}`;
+    return `<article class="${cls.join(" ")}"${attrs ? ` ${attrs}` : ""}>
+${wrap ? `<div class="mk-col">${head}</div>` : head}
+<ul class="mk-points">
+${side.points.map((p) => point(props, pos, p)).join("\n")}
+</ul>
+</article>`;
+};
+/** Wipe mode hides the left card at the end, so the winner is flagged by name below both layers. */
+const flag = (props) => props.winner === undefined
+    ? ""
+    : `
+<span class="mk-flag" data-late>${badge(`${props.winnerLabel}: ${props[props.winner].label}`)}</span>`;
+const verdict = (props, wipe, step) => {
+    if (!props.verdict)
+        return "";
+    const attrs = wipe ? "data-late" : animAttrs("rise", step, "verdict");
+    return `<p class="mk-verdict" ${attrs}>${esc(props.verdict)}</p>`;
+};
+/** Tall frames: panels stack in one column; the wipe sweeps top to bottom. */
+const TALL_CSS = `#scene-root .mk-split { grid-template-columns: minmax(0, 1fr); }
+#scene-root .mk-over { clip-path: inset(0 0 100% 0); }
+#scene-root .mk-bar { top: 0; bottom: auto; left: calc(-1 * var(--mk-space-md)); right: calc(-1 * var(--mk-space-md)); width: auto; height: 6px; margin: -3px 0 0; }
+#scene-root .mk-side { padding: var(--mk-space-lg); }`;
+/** Tall wipe cards stack heading over points (two columns are too narrow at 1080 px). */
+const WIPE_STACK_CSS = `#scene-root .mk-wipe .mk-side { grid-template-columns: minmax(0, 1fr); row-gap: var(--mk-space-md); align-items: start; }
+#scene-root .mk-wipe .mk-points { padding: var(--mk-space-md) 0 0; border-left: 0; border-top: 2px solid var(--mk-color-divider); }`;
+/** Square: each stacked split panel puts its points beside the heading to stay short. */
+const SQUARE_CSS = `#scene-root .mk-split .mk-side { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--mk-space-lg); row-gap: var(--mk-space-sm); align-content: center; padding: var(--mk-space-md) var(--mk-space-lg); }
+#scene-root .mk-split .mk-side > :not(.mk-points) { grid-column: 1; }
+#scene-root .mk-split .mk-points { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding-left: var(--mk-space-lg); border-left: 2px solid var(--mk-color-divider); justify-content: center; }
+#scene-root .mk-split .mk-label { overflow-wrap: normal; }
+#scene-root .mk-compare .mk-split .mk-point, #scene-root .mk-compare .mk-wipe .mk-point { font-size: var(--mk-font-size-md); }
+#scene-root .mk-wipe .mk-side { row-gap: var(--mk-space-sm); padding: var(--mk-space-md) var(--mk-space-lg); }
+#scene-root .mk-wipe .mk-points { gap: var(--mk-space-sm); }
+#scene-root .mk-split .mk-value { font-size: var(--mk-font-size-xl); }`;
+const render = (props, tall) => {
+    const wipe = props.mode === "wipe";
+    const dense = [props.left, props.right].some((s) => s.points.length > DENSE_POINTS);
+    const head = props.title
+        ? `<div class="mk-head"><h1 class="mk-heading" ${animAttrs("rise", 0, "title")}>${esc(props.title)}</h1></div>\n`
+        : "";
+    const stage = wipe
+        ? `<div class="mk-stage mk-wipe">
+<div class="mk-layer" ${animAttrs("rise", 1, "left")}>${card(props, "left", "", true, false)}</div>
+<div class="mk-layer mk-over" data-wipe${tall ? ' data-axis="y"' : ""}>${card(props, "right", "", true, false)}</div>
+<span class="mk-bar" data-bar aria-hidden="true"></span>
+</div>${flag(props)}`
+        : `<div class="mk-stage mk-split">
+${card(props, "left", animAttrs("rise", 1, "left"))}
+${card(props, "right", animAttrs("rise", 2, "right"))}
+</div>`;
+    return `<div class="mk-compare${dense ? " mk-dense" : ""}">
+${head}${stage}
+${verdict(props, wipe, 4)}
+</div>`;
+};
+export const compareScene = defineScene({
+    type: "compare",
+    configSchema,
+    meta: {
+        purpose: "Two options side by side or wiped before/after, 1-5 points each; the winner is marked by icon and text.",
+        example: {
+            left: { label: "Before", points: ["Manual"] },
+            right: { label: "After", points: ["Automated"] },
+            winner: "right",
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props, frameOf(ctx) !== "landscape"),
+        css: frameCss(ctx, root, {
+            tall: `${TALL_CSS}
+${WIPE_STACK_CSS}`,
+            square: SQUARE_CSS,
+        }),
+    }),
+});

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

@@ -0,0 +1,58 @@
+// @ts-check
+import { ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+import { progress, wipe } from "../../shared/motion.js";
+const DEFAULT_DURATION = 6;
+/** Wipe window as shares of the scene, with an upper bound on its length in seconds. */
+const WIPE_START = 0.38;
+const WIPE_SHARE = 0.28;
+const WIPE_MAX = 1.4;
+const LATE_FADE = 0.5;
+/** Top-to-bottom wipe: the share of the layer still hidden is clipped from the bottom.
+ * @param {number} p */
+const wipeDown = (p) => `inset(0 0 ${Math.round((1 - progress(p, 0, 1)) * 100000) / 1000}% 0)`;
+/**
+ * @param {HTMLElement} bar
+ * @param {"top" | "left"} edge
+ * @param {number} p
+ */
+const placeBar = (bar, edge, p) => {
+    bar.style[edge] = `${p * 100}%`;
+    bar.style.opacity = String(p > 0 && p < 1 ? 1 : 0);
+};
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.2, staggerFrames: 5, rise: 36 });
+    const duration = ctx.duration || Number(root.dataset.duration) || DEFAULT_DURATION;
+    const start = duration * WIPE_START;
+    const end = start + Math.min(WIPE_MAX, duration * WIPE_SHARE);
+    const layer = /** @type {HTMLElement | null} */ (root.querySelector("[data-wipe]"));
+    const bar = /** @type {HTMLElement | null} */ (root.querySelector("[data-bar]"));
+    const vertical = layer?.dataset.axis === "y";
+    const edge = vertical ? "top" : "left";
+    const clipOf = vertical ? wipeDown : wipe;
+    const late = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll("[data-late]")));
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        const p = ease("in-out", progress(t, start, end));
+        if (layer)
+            layer.style.clipPath = clipOf(p);
+        if (bar)
+            placeBar(bar, edge, p);
+        const shown = ease("out", progress(t, end, end + LATE_FADE));
+        for (const el of late)
+            el.style.opacity = String(shown);
+    };
+    const dispose = () => {
+        inner.dispose();
+        layer?.style.removeProperty("clip-path");
+        for (const el of [bar, ...late]) {
+            el?.style.removeProperty("opacity");
+            el?.style.removeProperty("left");
+            el?.style.removeProperty("top");
+        }
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/compare/style.css

@@ -0,0 +1,187 @@
+#scene-root .mk-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-lg);
+  min-height: 0;
+}
+#scene-root .mk-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+#scene-root .mk-heading {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-xl);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+#scene-root .mk-stage {
+  position: relative;
+  display: grid;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-split {
+  grid-template-columns: 1fr 1fr;
+}
+#scene-root .mk-wipe {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+#scene-root .mk-layer {
+  grid-area: 1 / 1;
+  display: grid;
+}
+#scene-root .mk-over {
+  clip-path: inset(0 100% 0 0);
+}
+#scene-root .mk-bar {
+  position: absolute;
+  top: calc(-1 * var(--mk-space-md));
+  bottom: calc(-1 * var(--mk-space-md));
+  left: 0;
+  width: 6px;
+  margin-left: -3px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  opacity: 0;
+}
+#scene-root .mk-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-md);
+  padding: var(--mk-space-lg) var(--mk-space-xl) var(--mk-space-xl);
+  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-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-side-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mk-space-md);
+  min-height: 56px;
+}
+#scene-root .mk-tag {
+  padding: var(--mk-space-xs) var(--mk-space-md);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accentSoft);
+  color: var(--mk-color-fg);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+}
+#scene-root .mk-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mk-space-sm);
+  margin-left: auto;
+  padding: var(--mk-space-xs) 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-sm);
+  font-weight: 800;
+}
+#scene-root .mk-flag {
+  align-self: center;
+  opacity: 0;
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-xl);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+#scene-root .mk-value {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-title);
+  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-points {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-md);
+  margin-top: var(--mk-space-sm);
+}
+#scene-root .mk-point {
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  column-gap: var(--mk-space-md);
+  align-items: start;
+  font-size: var(--mk-font-size-lg);
+  font-weight: 600;
+  line-height: 1.2;
+}
+#scene-root .mk-mark {
+  display: grid;
+  place-items: center;
+  height: 1.2em;
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-verdict {
+  align-self: center;
+  padding: var(--mk-space-md) var(--mk-space-xl);
+  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: 700;
+  text-align: center;
+}
+#scene-root .mk-win {
+  border: 4px solid var(--mk-color-accent);
+  background: color-mix(in srgb, var(--mk-color-accentSoft) 55%, var(--mk-color-card));
+}
+#scene-root .mk-lose .mk-mark {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-lose .mk-label,
+#scene-root .mk-lose .mk-value {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-dense .mk-point {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-wipe .mk-side {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  column-gap: var(--mk-space-xl);
+  align-items: center;
+  box-shadow: none;
+}
+#scene-root .mk-wipe .mk-points {
+  margin: 0;
+  gap: var(--mk-space-lg);
+  padding-left: var(--mk-space-xl);
+  border-left: 2px solid var(--mk-color-divider);
+}
+#scene-root .mk-wipe .mk-left {
+  background: var(--mk-color-surface);
+}
+#scene-root .mk-wipe .mk-right {
+  border-color: var(--mk-color-accent);
+}
+#scene-root .mk-wipe .mk-left .mk-label,
+#scene-root .mk-wipe .mk-left .mk-value {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-compare .mk-wipe .mk-point {
+  font-size: var(--mk-font-size-lg);
+}

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

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