@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/scenes/chart/style.css

@@ -0,0 +1,425 @@
+#scene-root {
+  gap: var(--mk-space-lg);
+  justify-content: flex-start;
+}
+#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-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--mk-space-lg) 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-caption {
+  flex: none;
+  font-size: var(--mk-font-size-md);
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-chart {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+#scene-root .mk-s1 {
+  --c: var(--mk-chart-1);
+}
+#scene-root .mk-s2 {
+  --c: var(--mk-chart-2);
+}
+#scene-root .mk-s3 {
+  --c: var(--mk-chart-3);
+}
+#scene-root .mk-c1 {
+  --c: var(--mk-chart-1);
+}
+#scene-root .mk-c2 {
+  --c: var(--mk-chart-2);
+}
+#scene-root .mk-c3 {
+  --c: var(--mk-chart-3);
+}
+#scene-root .mk-c4 {
+  --c: var(--mk-chart-4);
+}
+#scene-root .mk-c5 {
+  --c: var(--mk-chart-5);
+}
+#scene-root .mk-c6 {
+  --c: var(--mk-chart-6);
+}
+#scene-root .mk-c7 {
+  --c: var(--mk-chart-7);
+}
+#scene-root .mk-c8 {
+  --c: var(--mk-chart-8);
+}
+
+/* bars: one fill colour; with a highlight the other bars step back to a neutral */
+#scene-root .mk-fill {
+  background: var(--mk-color-accent);
+  border-radius: var(--mk-radius-full);
+}
+#scene-root .mk-fill.mk-lo {
+  background: color-mix(in srgb, var(--mk-color-muted) 62%, var(--mk-color-card));
+}
+#scene-root .mk-name {
+  font-size: var(--mk-font-size-md);
+  font-weight: 600;
+  line-height: 1.15;
+  text-wrap: balance;
+}
+#scene-root .mk-lo .mk-name,
+#scene-root .mk-lo.mk-leg {
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-val {
+  display: inline-block;
+  transform-origin: left center;
+  font-size: var(--mk-font-size-lg);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  white-space: nowrap;
+}
+#scene-root .mk-bars.mk-h {
+  flex-direction: column;
+  justify-content: space-evenly;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-h .mk-row {
+  flex: 1 1 0;
+  min-height: 0;
+  max-height: 120px;
+  display: grid;
+  grid-template-columns: minmax(0, 24%) minmax(0, 1fr) var(--vw);
+  align-items: center;
+  column-gap: var(--mk-space-lg);
+}
+#scene-root .mk-h.mk-noval .mk-row {
+  grid-template-columns: minmax(0, 24%) minmax(0, 1fr);
+}
+#scene-root .mk-h .mk-name {
+  text-align: right;
+}
+#scene-root .mk-h .mk-track {
+  height: 64px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-surface);
+}
+#scene-root .mk-h .mk-fill {
+  display: block;
+  width: 0;
+  height: 100%;
+  min-width: 12px;
+}
+#scene-root .mk-bars.mk-v {
+  display: grid;
+  align-items: stretch;
+  column-gap: var(--mk-space-lg);
+}
+#scene-root .mk-v .mk-col {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-v .mk-well {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-top: 64px;
+  border-bottom: 3px solid var(--mk-color-divider);
+}
+#scene-root .mk-v .mk-stack {
+  position: relative;
+  width: 68%;
+  max-width: 220px;
+  height: 0;
+}
+#scene-root .mk-v .mk-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--mk-radius-lg) var(--mk-radius-lg) 0 0;
+}
+#scene-root .mk-v .mk-val {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  translate: -50% 0;
+  padding-bottom: var(--mk-space-sm);
+  transform-origin: center bottom;
+}
+#scene-root .mk-v .mk-name {
+  text-align: center;
+}
+
+/* line */
+#scene-root .mk-lines {
+  flex-direction: column;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-legend {
+  flex: none;
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mk-space-lg);
+  font-size: var(--mk-font-size-md);
+  font-weight: 600;
+}
+#scene-root .mk-legend li {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-key {
+  width: 40px;
+  height: 10px;
+  border-radius: var(--mk-radius-full);
+  background: var(--c);
+}
+#scene-root .mk-frame {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: var(--yw) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) 56px;
+}
+#scene-root .mk-yaxis {
+  position: relative;
+}
+#scene-root .mk-tick {
+  position: absolute;
+  right: var(--mk-space-md);
+  translate: 0 50%;
+  font-size: var(--mk-font-size-sm);
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  color: var(--mk-color-muted);
+  white-space: nowrap;
+}
+#scene-root .mk-plot {
+  position: relative;
+  margin-right: var(--mr);
+}
+#scene-root .mk-gls {
+  position: absolute;
+  inset: 0;
+}
+#scene-root .mk-gl {
+  position: absolute;
+  left: 0;
+  right: calc(var(--mr) * -1);
+  height: 2px;
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-curve {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+#scene-root .mk-stroke {
+  fill: none;
+  stroke: var(--c);
+  stroke-width: 7px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+#scene-root .mk-area {
+  fill: color-mix(in srgb, var(--c) 14%, transparent);
+  stroke: none;
+}
+#scene-root .mk-dot {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  translate: -50% 50%;
+  border-radius: var(--mk-radius-full);
+  background: var(--c);
+  border: 4px solid var(--mk-color-card);
+  box-sizing: border-box;
+  opacity: 0;
+}
+#scene-root .mk-pv {
+  position: absolute;
+  padding: 0 var(--mk-space-sm);
+  border-radius: var(--mk-radius-md);
+  background: color-mix(in srgb, var(--mk-color-card) 88%, transparent);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 800;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  white-space: nowrap;
+  opacity: 0;
+}
+#scene-root .mk-above {
+  margin-bottom: 20px;
+  translate: -50% 0;
+}
+#scene-root .mk-right {
+  margin-left: 22px;
+  translate: 0 50%;
+}
+#scene-root .mk-xaxis {
+  grid-column: 2;
+  position: relative;
+  margin-right: var(--mr);
+}
+#scene-root .mk-xl {
+  position: absolute;
+  top: var(--mk-space-md);
+  translate: -50% 0;
+  font-size: var(--mk-font-size-sm);
+  color: var(--mk-color-muted);
+  white-space: nowrap;
+}
+
+/* donut */
+#scene-root .mk-donut {
+  align-items: center;
+  justify-content: center;
+  gap: var(--mk-space-xxl);
+}
+#scene-root .mk-ring {
+  position: relative;
+  flex: none;
+  width: 640px;
+  height: 640px;
+}
+#scene-root .mk-ring svg {
+  width: 100%;
+  height: 100%;
+}
+#scene-root .mk-bg {
+  fill: none;
+  stroke: var(--mk-color-surface);
+  stroke-width: 17;
+}
+#scene-root .mk-arc {
+  fill: none;
+  stroke: var(--c);
+  stroke-width: 17;
+  stroke-dasharray: 0 100;
+}
+#scene-root .mk-arc.mk-lo {
+  opacity: 0.3;
+}
+#scene-root .mk-core {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mk-space-sm);
+  padding: 0 130px;
+  text-align: center;
+}
+#scene-root .mk-total {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  display: inline-block;
+  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);
+}
+#scene-root .mk-core-label {
+  font-size: var(--mk-font-size-sm);
+  font-weight: 600;
+  line-height: 1.15;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-legend-list {
+  flex: 1;
+  max-width: 760px;
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-sm);
+}
+#scene-root .mk-leg {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) var(--vw) 112px;
+  align-items: center;
+  column-gap: var(--mk-space-md);
+  padding: var(--mk-space-sm) var(--mk-space-md);
+  border-radius: var(--mk-radius-lg);
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-donut.mk-nopct .mk-leg {
+  grid-template-columns: 28px minmax(0, 1fr) var(--vw);
+}
+#scene-root .mk-donut.mk-noval .mk-leg {
+  grid-template-columns: 28px minmax(0, 1fr);
+}
+#scene-root .mk-leg.mk-hi {
+  background: var(--mk-color-accentSoft);
+  font-weight: 800;
+}
+#scene-root .mk-sw {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--mk-radius-md);
+  background: var(--c);
+}
+#scene-root .mk-lname {
+  font-weight: 600;
+  line-height: 1.15;
+  text-wrap: balance;
+}
+#scene-root .mk-leg.mk-hi .mk-lname {
+  font-weight: 800;
+}
+#scene-root .mk-lval {
+  display: inline-block;
+  transform-origin: right center;
+  text-align: right;
+  font-weight: 700;
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  white-space: nowrap;
+}
+#scene-root .mk-pct {
+  text-align: right;
+  font-size: var(--mk-font-size-sm);
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+  color: var(--mk-color-muted);
+}
+
+/* 7-8 slices: tighter legend rows */
+#scene-root .mk-donut.mk-dense .mk-legend-list {
+  gap: var(--mk-space-xs);
+}
+#scene-root .mk-donut.mk-dense .mk-leg {
+  padding: var(--mk-space-xs) var(--mk-space-md);
+  font-size: var(--mk-font-size-sm);
+}

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

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

package/dist/scenes/code/index.js

@@ -0,0 +1,109 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { readText } from "../../text-file.js";
+import { text } from "../../words.js";
+import { tokenize } from "./tokenize.js";
+const MAX_LINES = 14;
+const MAX_COLS = 60;
+const MONO_EM = 0.62;
+const LINE_EM = 1.6;
+/** Window padding, title bar and the frame's safe margin, in px. */
+const WINDOW_PAD = 96;
+const BAR_PX = 110;
+const SAFE = 0.1;
+/** A wrapped line may take this many rows before the text shrinks instead. */
+const MAX_WRAP_ROWS = 2;
+const configSchema = z
+    .strictObject({
+    lines: z
+        .array(text.max(MAX_COLS).regex(/^[^\r\n]*$/, "one line per item"))
+        .min(1, `need 1-${MAX_LINES} lines`)
+        .max(MAX_LINES, `need 1-${MAX_LINES} lines`),
+    lang: z.enum(["js", "ts", "json", "py", "sh", "plain"]).default("plain"),
+    reveal: z.enum(["type", "lines"]).default("lines"),
+    highlight: z.array(z.int().min(1)).max(MAX_LINES).optional(),
+    file: text.max(40).optional(),
+})
+    .superRefine((props, ctx) => {
+    props.highlight?.forEach((line, index) => {
+        if (line > props.lines.length) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["highlight", index],
+                message: `line ${line} does not exist; lines are numbered 1-${props.lines.length}`,
+            });
+        }
+    });
+});
+/** Lines starting with + or - are diff lines: the sign moves to its own column. */
+const rowOf = (line) => {
+    const sign = line.startsWith("+") ? "+" : line.startsWith("-") ? "-" : "";
+    const rest = sign === "" ? line : line.slice(1).replace(/^ /, "");
+    return { sign, code: rest.replaceAll("\t", "  ") };
+};
+const spans = (code, lang) => tokenize(code, lang)
+    .map((token) => token.kind === "plain"
+    ? esc(token.text)
+    : `<span class="mk-t-${token.kind}">${esc(token.text)}</span>`)
+    .join("");
+const SIGN_CLASS = { "+": " mk-add", "-": " mk-del", "": "" };
+const lineHtml = (row, index, props, numbered) => {
+    const hl = props.highlight?.includes(index + 1) ? " mk-hl" : "";
+    const length = [...row.code].length;
+    const number = numbered ? String(index + 1) : "";
+    return `<div class="mk-line${SIGN_CLASS[row.sign]}${hl}" data-len="${length}">
+<span class="mk-num" aria-hidden="true">${number}</span><span class="mk-sign" aria-hidden="true">${row.sign}</span><span class="mk-code"><span class="mk-text">${spans(row.code, props.lang)}</span><span class="mk-caret" aria-hidden="true"></span></span>
+</div>`;
+};
+/** Rows a line takes when it wraps at `usable` px of `px`-sized monospace text. */
+const rowsOf = (row, numbered, px, usable) => {
+    const perRow = Math.max(1, Math.floor(usable / (MONO_EM * px)) - (numbered ? 5 : 2));
+    return Math.max(1, Math.ceil([...row.code].length / perRow));
+};
+/**
+ * Largest theme code size at which every line fits the frame unwrapped; failing that, the largest
+ * size at which the lines fit once long ones wrap (text never drops below the smallest step).
+ */
+const sizeClass = (rows, numbered, ctx) => {
+    const widest = Math.max(...rows.map((row) => [...row.code].length));
+    const cols = widest + (numbered ? 5 : 2);
+    const sizes = ["lg", "md", "sm"];
+    const usableW = ctx.width * (1 - SAFE) - WINDOW_PAD;
+    const usableH = ctx.height * (1 - SAFE) - WINDOW_PAD;
+    const stack = (step, wrapped) => {
+        const px = ctx.theme.fontSizes[step] ?? 0;
+        const counts = rows.map((row) => (wrapped ? rowsOf(row, numbered, px, usableW) : 1));
+        const lines = counts.reduce((sum, count) => sum + count, 0);
+        return Math.max(...counts) <= MAX_WRAP_ROWS && lines * LINE_EM * px + BAR_PX <= usableH;
+    };
+    const plain = sizes.find((step) => cols * MONO_EM * (ctx.theme.fontSizes[step] ?? 0) <= usableW && stack(step, false));
+    if (plain)
+        return `mk-size-${plain}`;
+    return `mk-size-${sizes.find((step) => stack(step, true)) ?? "sm"} mk-wrap`;
+};
+const render = (props, ctx) => {
+    const rows = props.lines.map(rowOf);
+    const numbered = props.lang !== "sh";
+    const file = props.file ? `<span class="mk-file">${esc(props.file)}</span>` : "";
+    const dots = '<span class="mk-dots" aria-hidden="true"><i></i><i></i><i></i></span>';
+    const body = rows.map((row, index) => lineHtml(row, index, props, numbered)).join("\n");
+    const hasHighlight = (props.highlight?.length ?? 0) > 0;
+    return `<div class="mk-window ${sizeClass(rows, numbered, ctx)}${numbered ? "" : " mk-bare"}" ${animAttrs("rise", 0, "code")}>
+<div class="mk-bar">${dots}${file}</div>
+<div class="mk-body" data-reveal="${props.reveal}" data-dim="${hasHighlight ? 1 : 0}">
+${body}
+</div>
+</div>`;
+};
+export const codeScene = defineScene({
+    type: "code",
+    configSchema,
+    meta: {
+        purpose: "Code or terminal text typed or revealed line by line, with highlighted lines and +/- diff lines.",
+        example: { lines: ["const total = price * 2", "- old line", "+ new line"], lang: "js" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => ({ body: render(props, ctx) }),
+});

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

@@ -0,0 +1,108 @@
+// @ts-check
+import { clamp01, ease } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+const START = 0.7;
+const TYPE_CHARS_PER_SECOND = 26;
+const MIN_SPAN = 1;
+const SPAN_SHARE = 0.6;
+const LINE_STEP = 0.45;
+const FADE = 0.35;
+const DIM_AFTER = 0.3;
+const DIM_SECONDS = 0.5;
+const DIM_FLOOR = 0.6;
+const BLINK_HZ = 2.2;
+/**
+ * @param {number} t
+ * @param {number} from
+ * @param {number} to
+ */
+const within = (t, from, to) => clamp01(to > from ? (t - from) / (to - from) : t >= from ? 1 : 0);
+/** @type {import("../../runtime/mount.js").CreateScene} */
+export function createScene(root, config, ctx) {
+    const inner = mountTimeline(root, config, ctx, { baseDelay: 0.2, staggerFrames: 4, rise: 32 });
+    const body = /** @type {HTMLElement} */ (root.querySelector(".mk-body"));
+    const typing = body.dataset.reveal === "type";
+    const dims = body.dataset.dim === "1";
+    const duration = ctx.duration ?? (Number(root.dataset.duration) || 6);
+    const rows = Array.from(body.querySelectorAll(".mk-line"), (node) => {
+        const el = /** @type {HTMLElement} */ (node);
+        return {
+            el,
+            text: /** @type {HTMLElement} */ (el.querySelector(".mk-text")),
+            caret: /** @type {HTMLElement} */ (el.querySelector(".mk-caret")),
+            len: Number(el.dataset.len),
+            lit: el.classList.contains("mk-hl"),
+        };
+    });
+    const total = rows.reduce((sum, row) => sum + row.len, 0);
+    const span = typing
+        ? Math.max(MIN_SPAN, Math.min(total / TYPE_CHARS_PER_SECOND, duration * SPAN_SHARE - START))
+        : Math.max(MIN_SPAN, Math.min(rows.length * LINE_STEP, duration * SPAN_SHARE - START));
+    const revealEnd = START + span;
+    /** @param {number} index */
+    const lengthBefore = (index) => rows.slice(0, index).reduce((sum, row) => sum + row.len, 0);
+    /**
+     * @param {typeof rows[number]} row
+     * @param {number} dim 0..1 progress of dimming the lines that are not highlighted
+     */
+    const keepOf = (row, dim) => (dims && !row.lit ? 1 - (1 - DIM_FLOOR) * ease("out", dim) : 1);
+    /**
+     * @param {typeof rows[number]} row
+     * @param {number} i
+     * @param {number} t
+     * @param {number} dim
+     * @param {number} shown characters of this row that are typed
+     */
+    const paintRow = (row, i, t, dim, shown) => {
+        const from = START + (i * span) / rows.length;
+        const lineIn = typing ? 1 : ease("out", within(t, from, from + FADE));
+        row.el.style.opacity = String(lineIn * keepOf(row, dim));
+        row.el.style.transform = typing ? "" : `translateY(${(1 - lineIn) * 14}px)`;
+        const ratio = row.len === 0 ? 1 : shown / row.len;
+        row.text.style.clipPath = typing ? `inset(0 ${(1 - ratio) * 100}% 0 0)` : "";
+        row.caret.style.opacity = "0";
+    };
+    /**
+     * @param {number} t
+     * @param {number} typed characters typed so far across all rows
+     * @param {number} active index of the row being typed, -1 when none
+     */
+    const paintCaret = (t, typed, active) => {
+        const done = t >= START && active < 0;
+        const at = done ? rows.length - 1 : Math.max(active, 0);
+        const row = rows[at];
+        if (!row)
+            return;
+        row.caret.style.left = `${done ? row.len : Math.round(typed - lengthBefore(at))}ch`;
+        row.caret.style.opacity = done && Math.floor(t * BLINK_HZ) % 2 === 1 ? "0" : "1";
+    };
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        const typed = total * within(t, START, revealEnd);
+        const dim = dims ? within(t, revealEnd + DIM_AFTER, revealEnd + DIM_AFTER + DIM_SECONDS) : 0;
+        let before = 0;
+        let active = -1;
+        rows.forEach((row, i) => {
+            const shown = Math.min(row.len, Math.max(0, typed - before));
+            before += row.len;
+            if (active < 0 && shown < row.len && t >= START)
+                active = i;
+            paintRow(row, i, t, dim, shown);
+        });
+        if (typing)
+            paintCaret(t, typed, active);
+    };
+    const dispose = () => {
+        inner.dispose();
+        for (const row of rows) {
+            row.el.style.removeProperty("opacity");
+            row.el.style.removeProperty("transform");
+            row.text.style.removeProperty("clip-path");
+            row.caret.style.removeProperty("opacity");
+            row.caret.style.removeProperty("left");
+        }
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}