@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/scenes/icon-grid/style.css

@@ -0,0 +1,74 @@
+#scene-root {
+  gap: var(--mk-space-xl);
+}
+#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-grid {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  gap: var(--mk-space-xl);
+  align-items: stretch;
+}
+#scene-root .mk-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+#scene-root .mk-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+#scene-root .mk-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+#scene-root .mk-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mk-space-md);
+  padding: 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-chip {
+  display: grid;
+  place-items: center;
+  width: 112px;
+  height: 112px;
+  margin-bottom: var(--mk-space-sm);
+  border-radius: var(--mk-radius-lg);
+  background: var(--mk-color-accentSoft);
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-lg);
+  font-weight: 700;
+  line-height: 1.12;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+#scene-root .mk-dense .mk-label {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-detail {
+  font-size: var(--mk-font-size-sm);
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+  text-wrap: pretty;
+}

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

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

package/dist/scenes/kinetic/index.js

@@ -0,0 +1,62 @@
+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, text } from "../../words.js";
+const MAX_WORDS = 8;
+const MAX_CHARS = 18;
+/** Share of the frame a word may fill. */
+const FILL_WIDTH = 0.8;
+const FILL_HEIGHT = 0.74;
+const STACK_LINE = 1.08;
+/** 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`),
+    mode: z.enum(["slam", "stack", "swap"]).default("slam"),
+    emphasis: z.int().min(1).max(MAX_WORDS).optional(),
+})
+    .superRefine((props, ctx) => {
+    if (props.emphasis !== undefined && props.emphasis > props.words.length) {
+        ctx.addIssue({
+            code: "custom",
+            path: ["emphasis"],
+            message: `emphasis ${props.emphasis} does not exist; words are numbered 1-${props.words.length}`,
+        });
+    }
+}), (props) => props.words);
+const px = (ctx, step) => ctx.theme.fontSizes[step] ?? 0;
+/** Largest step at which `fits(px)` holds; falls back to the smallest. */
+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 stacked = props.mode === "stack";
+    const shared = largest(ctx, (size) => props.words.length * size * STACK_LINE <= ctx.height * FILL_HEIGHT &&
+        props.words.every((word) => textWidth(word, size) <= maxWidth));
+    const words = props.words.map((word, index) => {
+        const step = stacked ? shared : largest(ctx, (size) => textWidth(word, size) <= maxWidth);
+        const em = props.emphasis === index + 1 ? " mk-em" : "";
+        return `<p class="mk-word mk-sz-${step}${em}" data-i="${index}">${esc(word)}</p>`;
+    });
+    const beats = props.words.map(() => '<i class="mk-beat"><b></b></i>').join("");
+    return `<div class="mk-stage mk-mode-${props.mode}" data-mode="${props.mode}">
+${words.join("\n")}
+</div>
+<div class="mk-beats" aria-hidden="true" ${animAttrs("fade", 0)}>${beats}</div>`;
+};
+export const kineticScene = defineScene({
+    type: "kinetic",
+    configSchema,
+    meta: {
+        purpose: "One word or short phrase per beat at full screen (slam, stack or swap); for hooks, rules of three and key messages.",
+        example: { words: ["Plan", "Build", "Ship"], mode: "slam", emphasis: 3 },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => ({ body: render(props, ctx) }),
+});

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

@@ -0,0 +1,98 @@
+// @ts-check
+import { clamp01, ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+const IN_SECONDS = 0.28;
+const IN_SHARE = 0.4;
+const OUT_SECONDS = 0.22;
+const OUT_SHARE = 0.3;
+const SLAM_FROM = 1.7;
+const SWAP_RISE_EM = 0.55;
+const STACK_RISE_EM = 0.3;
+const STACK_DIM = 0.55;
+/**
+ * @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 mode = /** @type {HTMLElement} */ (root.querySelector(".mk-stage")).dataset.mode;
+    const words = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll(".mk-word")));
+    const fills = /** @type {HTMLElement[]} */ (Array.from(root.querySelectorAll(".mk-beat b")));
+    const count = words.length;
+    const duration = ctx.duration ?? (Number(root.dataset.duration) || 6);
+    const beat = duration / count;
+    const inSpan = Math.min(IN_SECONDS, beat * IN_SHARE);
+    const outSpan = Math.min(OUT_SECONDS, beat * OUT_SHARE);
+    /**
+     * @param {HTMLElement} el
+     * @param {number} opacity
+     * @param {string} transform
+     */
+    const paint = (el, opacity, transform) => {
+        el.style.opacity = String(opacity);
+        el.style.transform = transform;
+    };
+    /**
+     * @param {HTMLElement} el
+     * @param {number} i
+     * @param {number} t
+     */
+    const slam = (el, i, t) => {
+        // A slam is a hard cut: opaque from the first frame, so no blank frame between words.
+        const live = t >= i * beat && (i === count - 1 || t < (i + 1) * beat);
+        if (!live)
+            return paint(el, 0, "");
+        const local = within(t, i * beat, inSpan);
+        const scale = 1 + (SLAM_FROM - 1) * (1 - ease("spring-snappy", local));
+        paint(el, 1, `scale(${scale})`);
+    };
+    /**
+     * @param {HTMLElement} el
+     * @param {number} i
+     * @param {number} t
+     */
+    const swap = (el, i, t) => {
+        const enter = within(t, i * beat, inSpan);
+        const leave = i === count - 1 ? 0 : within(t, (i + 1) * beat, outSpan);
+        if (t < i * beat || leave >= 1)
+            return paint(el, 0, "");
+        const rise = (1 - ease("out", enter)) * SWAP_RISE_EM - ease("in", leave) * SWAP_RISE_EM;
+        paint(el, enter * (1 - leave), `translateY(${rise}em)`);
+    };
+    /**
+     * @param {HTMLElement} el
+     * @param {number} i
+     * @param {number} t
+     */
+    const stack = (el, i, t) => {
+        const enter = within(t, i * beat, inSpan);
+        const older = i === count - 1 ? 0 : within(t, (i + 1) * beat, inSpan);
+        const keep = el.classList.contains("mk-em") ? 1 : 1 - (1 - STACK_DIM) * ease("out", older);
+        paint(el, enter * keep, `translateY(${(1 - ease("out", enter)) * STACK_RISE_EM}em)`);
+    };
+    const draw = mode === "stack" ? stack : mode === "swap" ? swap : slam;
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        words.forEach((el, i) => {
+            draw(el, i, t);
+        });
+        fills.forEach((fill, i) => {
+            fill.style.transform = `scaleX(${within(t, i * beat, beat)})`;
+        });
+    };
+    const dispose = () => {
+        inner.dispose();
+        for (const el of words) {
+            el.style.removeProperty("opacity");
+            el.style.removeProperty("transform");
+        }
+        for (const fill of fills)
+            fill.style.removeProperty("transform");
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/kinetic/style.css

@@ -0,0 +1,94 @@
+#scene-root {
+  align-items: center;
+  text-align: center;
+}
+#scene-root .mk-stage {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+}
+#scene-root .mk-mode-stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+#scene-root .mk-word {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  grid-area: 1 / 1;
+  max-width: 100%;
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+  white-space: nowrap;
+  color: var(--mk-color-fg);
+  opacity: 0;
+  will-change: transform, opacity;
+}
+#scene-root .mk-mode-stack .mk-word {
+  grid-area: auto;
+}
+#scene-root .mk-em {
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-mode-slam .mk-em,
+#scene-root .mk-mode-swap .mk-em {
+  position: relative;
+}
+#scene-root .mk-mode-slam .mk-em::after,
+#scene-root .mk-mode-swap .mk-em::after {
+  content: "";
+  position: absolute;
+  left: 16%;
+  right: 16%;
+  bottom: -0.06em;
+  height: 0.07em;
+  border-radius: var(--mk-radius-full);
+  background: linear-gradient(90deg, var(--mk-color-accent), var(--mk-color-accent2));
+}
+#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);
+}
+#scene-root .mk-beats {
+  flex: none;
+  display: flex;
+  gap: var(--mk-space-md);
+  justify-content: center;
+  padding-top: var(--mk-space-md);
+}
+#scene-root .mk-beat {
+  display: block;
+  width: 72px;
+  height: 10px;
+  overflow: hidden;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-beat b {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--mk-color-accent);
+  transform-origin: left center;
+  transform: scaleX(0);
+}

package/dist/scenes/kpi-grid/index.d.ts

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

package/dist/scenes/kpi-grid/index.js

@@ -0,0 +1,161 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { fmt } from "../../shared/format.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";
+import { countsExactly, MAX_COUNT_DIGITS } from "../stat/index.js";
+const COUNT_MESSAGE = "need 2-6 items";
+const TRENDS = ["up", "down", "flat"];
+const TREND_ICON = {
+    up: "trending-up",
+    down: "trending-down",
+    flat: "minus",
+};
+const itemSchema = z.strictObject({
+    value: z.union([text, z.number()]),
+    label: text,
+    unit: text.optional(),
+    delta: text.optional(),
+    trend: z.enum(TRENDS).optional(),
+    /** Which direction is good news; default up. A fall in churn is good. */
+    good: z.enum(["up", "down"]).optional(),
+});
+const configSchema = limitWords(z
+    .strictObject({
+    title: text.optional(),
+    items: z.array(itemSchema).min(2, COUNT_MESSAGE).max(6, COUNT_MESSAGE),
+    cols: z.number().int().min(2).max(3).optional(),
+})
+    .superRefine((props, ctx) => {
+    props.items.forEach((item, index) => {
+        if (!countsExactly(item.value)) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["items", index, "value"],
+                message: `too large to count up exactly (max ${MAX_COUNT_DIGITS} digits)`,
+            });
+        }
+        if (item.trend !== undefined && item.delta === undefined) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["items", index, "trend"],
+                message: "trend needs a delta to show",
+            });
+        }
+        if (item.good !== undefined && item.trend === undefined) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["items", index, "good"],
+                message: "good needs a trend to colour",
+            });
+        }
+    });
+}), (props) => [
+    ...present(props.title),
+    ...props.items.flatMap((item) => present(item.value, item.unit, item.label, item.delta)),
+]);
+/** Value sizes, largest first; a single row of cards may use the display size. */
+const VALUE_STEPS = ["display", "title", "xl", "lg"];
+const UNIT_STEP = "lg";
+const FALLBACK_PX = { display: 128, title: 96, xl: 72, lg: 48 };
+const GAP_PX = 32;
+/** Card padding (2 x space.xl) plus border. */
+const CARD_PAD_PX = 2 * 64 + 4;
+const WIDTH_MARGIN = 0.92;
+const SAFE_SIDES = 0.1;
+/** Portrait reads best as one column of wide cards; a square frame keeps pairs. */
+const colsOf = (props, ctx) => {
+    if (props.cols !== undefined)
+        return props.cols;
+    const n = props.items.length;
+    const frame = frameOf(ctx);
+    if (frame === "portrait")
+        return n <= 4 ? 1 : 2;
+    return n <= 3 ? n : n === 4 ? 2 : 3;
+};
+/** Tall frames have narrow cards: the change pill never wraps. */
+const TALL_CSS = `#scene-root .mk-delta { white-space: nowrap; padding: var(--mk-space-xs) var(--mk-space-md); }
+#scene-root .mk-delta svg { width: 24px; height: 24px; }`;
+/** Square frames keep the landscape grid but with shorter cards so two rows fit. */
+const SQUARE_CSS = `#scene-root .mk-card { padding: var(--mk-space-lg); }
+#scene-root .mk-rows-1 .mk-card { min-height: 300px; }
+#scene-root .mk-rows-2 .mk-card { min-height: 260px; }`;
+const px = (ctx, step) => ctx.theme.fontSizes[step] ?? FALLBACK_PX[step] ?? 48;
+const MAX_DECIMALS = 2;
+const decimalsOf = (value) => Math.min(MAX_DECIMALS, (String(value).split(".")[1] ?? "").length);
+const shown = (value) => typeof value === "number" ? fmt(value, { decimals: decimalsOf(value) }) : value;
+/** Largest value size whose value and unit fit one line of the card. */
+const valueStep = (ctx, items, cols) => {
+    const rows = Math.ceil(items.length / cols);
+    const inner = (ctx.width * (1 - SAFE_SIDES) - GAP_PX * (cols - 1)) / cols - CARD_PAD_PX;
+    const steps = rows > 1 && !(cols === 1 && rows <= 3) ? VALUE_STEPS.slice(1) : VALUE_STEPS;
+    const fits = (step) => items.every((item) => {
+        const unit = item.unit ? textWidth(item.unit, px(ctx, UNIT_STEP)) + GAP_PX / 2 : 0;
+        return textWidth(shown(item.value), px(ctx, step)) + unit <= inner * WIDTH_MARGIN;
+    });
+    return steps.find(fits) ?? VALUE_STEPS[VALUE_STEPS.length - 1] ?? "lg";
+};
+const toneOf = (item) => {
+    if (item.trend === undefined)
+        return "none";
+    if (item.trend === "flat")
+        return "flat";
+    return item.trend === (item.good ?? "up") ? "good" : "bad";
+};
+const deltaHtml = (item, index) => {
+    if (item.delta === undefined)
+        return "";
+    const trend = item.trend ?? "none";
+    const icon = item.trend === undefined
+        ? ""
+        : sceneIcon(TREND_ICON[item.trend], { at: `props.items[${index}].trend`, size: 32 });
+    return `<p class="mk-delta mk-trend-${trend} mk-tone-${toneOf(item)}">${icon}<span>${esc(item.delta)}</span></p>`;
+};
+const cardHtml = (item, index, step, size) => {
+    const value = esc(shown(item.value));
+    const unit = item.unit ? `<span class="mk-unit">${esc(item.unit)}</span>` : "";
+    return `<li class="mk-card" ${animAttrs("rise", step, `item-${index + 1}`)}>
+<p class="mk-label">${esc(item.label)}</p>
+<p class="mk-figure"><span class="mk-value mk-v-${size}" data-step="${step}" data-count="${value}">${value}</span>${unit}</p>
+${deltaHtml(item, index)}
+</li>`;
+};
+const render = (props, ctx) => {
+    const offset = props.title ? 1 : 0;
+    const cols = colsOf(props, ctx);
+    const size = valueStep(ctx, props.items, cols);
+    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 cards = props.items.map((item, index) => cardHtml(item, index, index + offset, size));
+    const rows = Math.ceil(props.items.length / cols);
+    return `${head}<ul class="mk-grid mk-cols-${cols} mk-rows-${rows}">\n${cards.join("\n")}\n</ul>`;
+};
+export const kpiGridScene = defineScene({
+    type: "kpi-grid",
+    configSchema,
+    meta: {
+        purpose: "2-6 headline numbers side by side, each with label, unit, change and trend arrow (good=down when a fall is good); values count up.",
+        example: {
+            title: "Quarter at a glance",
+            items: [
+                { value: "$4.2M", label: "Revenue", delta: "+12%", trend: "up" },
+                { value: 86, unit: "%", label: "Retention", delta: "-2 pts", trend: "down" },
+            ],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props, ctx),
+        css: frameCss(ctx, root, { tall: TALL_CSS, square: SQUARE_CSS }),
+    }),
+});

package/dist/scenes/kpi-grid/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/kpi-grid/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: 40 });
+}

package/dist/scenes/kpi-grid/style.css

@@ -0,0 +1,141 @@
+#scene-root {
+  gap: var(--mk-space-xl);
+}
+#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-xl);
+  font-weight: 800;
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+#scene-root .mk-grid {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  gap: var(--mk-space-lg);
+  align-items: stretch;
+}
+#scene-root .mk-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+#scene-root .mk-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+#scene-root .mk-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--mk-space-md);
+  padding: var(--mk-space-xl) var(--mk-space-xl) var(--mk-space-lg);
+  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-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 8px;
+  background: linear-gradient(90deg, var(--mk-color-accent), var(--mk-color-accent2));
+}
+#scene-root .mk-rows-1 .mk-card {
+  min-height: 380px;
+}
+#scene-root .mk-rows-2 .mk-card {
+  min-height: 320px;
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-md);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--mk-color-muted);
+  text-wrap: balance;
+}
+#scene-root .mk-figure {
+  display: flex;
+  align-items: baseline;
+  gap: var(--mk-space-sm);
+  white-space: nowrap;
+}
+#scene-root .mk-value {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  display: inline-block;
+  transform-origin: left bottom;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-v-display {
+  font-size: var(--mk-font-size-display);
+}
+#scene-root .mk-v-title {
+  font-size: var(--mk-font-size-title);
+}
+#scene-root .mk-v-xl {
+  font-size: var(--mk-font-size-xl);
+}
+#scene-root .mk-v-lg {
+  font-size: var(--mk-font-size-lg);
+}
+#scene-root .mk-unit {
+  font-size: var(--mk-font-size-lg);
+  font-weight: 700;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mk-space-sm);
+  padding: var(--mk-space-sm) var(--mk-space-md);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accentSoft);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-delta svg {
+  width: 32px;
+  height: 32px;
+  flex: none;
+}
+#scene-root .mk-tone-good {
+  /* 6% tint keeps the status arrow at >= 4.5:1; the ring carries the visible hue */
+  background: color-mix(in srgb, var(--mk-status-good, var(--mk-chart-3)) 6%, var(--mk-color-card));
+  box-shadow: inset 0 0 0 2px
+    color-mix(in srgb, var(--mk-status-good, var(--mk-chart-3)) 40%, var(--mk-color-card));
+}
+#scene-root .mk-tone-good svg {
+  color: var(--mk-status-good, var(--mk-chart-3));
+}
+#scene-root .mk-tone-bad {
+  /* 6% tint keeps the status arrow at >= 4.5:1; the ring carries the visible hue */
+  background: color-mix(in srgb, var(--mk-status-bad, var(--mk-chart-5)) 6%, var(--mk-color-card));
+  box-shadow: inset 0 0 0 2px
+    color-mix(in srgb, var(--mk-status-bad, var(--mk-chart-5)) 40%, var(--mk-color-card));
+}
+#scene-root .mk-tone-bad svg {
+  color: var(--mk-status-bad, var(--mk-chart-5));
+}
+#scene-root .mk-tone-flat {
+  background: var(--mk-color-surface);
+}
+#scene-root .mk-tone-flat svg {
+  color: var(--mk-color-muted);
+}

package/dist/scenes/lower-third/index.d.ts

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