@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/scenes/table/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/table/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: 28 });
+}

package/dist/scenes/table/style.css

@@ -0,0 +1,102 @@
+#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-table {
+  flex: 0 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  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 24px 56px -28px color-mix(in srgb, var(--mk-color-fg) 40%, transparent)
+  );
+  font-variant-numeric: var(--mk-numeric, tabular-nums);
+}
+#scene-root .mk-trow {
+  flex: 1 1 auto;
+  min-height: 88px;
+  display: grid;
+  align-items: center;
+  column-gap: var(--mk-space-lg);
+  padding: var(--mk-space-md) var(--mk-space-xl);
+  border-top: 2px solid var(--mk-color-divider);
+  font-size: var(--mk-font-size-md);
+  font-weight: 600;
+  line-height: 1.2;
+}
+#scene-root .mk-thead {
+  flex: none;
+  border-top: 0;
+  background: var(--mk-color-surface);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-cell {
+  min-width: 0;
+  text-wrap: balance;
+}
+#scene-root .mk-l {
+  text-align: left;
+}
+#scene-root .mk-r {
+  text-align: right;
+  white-space: nowrap;
+}
+#scene-root .mk-rankh {
+  text-align: center;
+}
+#scene-root .mk-rank {
+  display: grid;
+  place-items: center;
+}
+#scene-root .mk-rank b {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-surface);
+  font-weight: 800;
+}
+#scene-root .mk-rank.mk-first b {
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+}
+#scene-root .mk-hi {
+  background: var(--mk-color-accentSoft);
+  box-shadow: inset 10px 0 0 var(--mk-color-accent);
+  font-weight: 800;
+}
+#scene-root .mk-roomy .mk-trow:not(.mk-thead) {
+  font-size: var(--mk-font-size-lg);
+  min-height: 132px;
+}
+#scene-root .mk-roomy .mk-thead {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-roomy .mk-rank b {
+  width: 72px;
+  height: 72px;
+}

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

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

package/dist/scenes/timeline/index.js

@@ -0,0 +1,68 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { sceneIcon } from "../../shared/icon.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const COUNT_MESSAGE = "need 2-7 items";
+const itemSchema = z.strictObject({
+    when: text,
+    label: text,
+    detail: text.optional(),
+    state: z.enum(["done", "now", "next"]).optional(),
+});
+const configSchema = limitWords(z.strictObject({
+    title: text.optional(),
+    items: z.array(itemSchema).min(2, COUNT_MESSAGE).max(7, COUNT_MESSAGE),
+    orient: z.enum(["h", "v"]).default("h"),
+}), (props) => props.items
+    .flatMap((item) => present(item.when, item.label, item.detail))
+    .concat(present(props.title)));
+/** State is shown by shape (check / ringed dot / hollow dot), never by colour alone. */
+const node = (item, index) => {
+    const state = item.state ?? "plain";
+    const inner = item.state === "done" ? sceneIcon("check", { at: `props.items[${index}]` }) : "";
+    return `<span class="mk-node mk-state-${state}">${inner}</span>`;
+};
+const entry = (item, index, offset) => {
+    const detail = item.detail ? `\n<p class="mk-detail">${esc(item.detail)}</p>` : "";
+    const attrs = animAttrs("rise", index + offset, `item-${index + 1}`);
+    return `<li class="mk-item mk-state-${item.state ?? "plain"}" ${attrs}>
+<p class="mk-when">${esc(item.when)}</p>
+${node(item, index)}
+<div class="mk-body">
+<p class="mk-label">${esc(item.label)}</p>${detail}
+</div>
+</li>`;
+};
+const render = (props) => {
+    const offset = props.title ? 1 : 0;
+    const head = props.title
+        ? `<div class="mk-head">
+<h1 class="mk-heading" ${animAttrs("rise", 0, "title")}>${esc(props.title)}</h1>
+<span class="mk-rule" ${animAttrs("grow", 0, "title")}></span>
+</div>
+`
+        : "";
+    const items = props.items.map((item, index) => entry(item, index, offset));
+    const cls = `mk-track mk-${props.orient} mk-n${props.items.length}`;
+    return `${head}<ol class="${cls}">\n${items.join("\n")}\n</ol>`;
+};
+export const timelineScene = defineScene({
+    type: "timeline",
+    configSchema,
+    meta: {
+        purpose: "Dated milestones, history or a now/next roadmap: 2-7 items on a horizontal or vertical axis with done/now/next states.",
+        example: {
+            title: "Roadmap",
+            items: [
+                { when: "Q1", label: "Beta", state: "done" },
+                { when: "Q2", label: "Launch", state: "now" },
+                { when: "Q3", label: "Scale", state: "next" },
+            ],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

package/dist/scenes/timeline/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/timeline/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/timeline/style.css

@@ -0,0 +1,161 @@
+#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:has(.mk-v) {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--mk-space-xxl);
+}
+#scene-root:has(.mk-v) .mk-head {
+  flex: 0 0 30%;
+}
+#scene-root .mk-track {
+  --node: 72px;
+  --when: var(--mk-font-size-lg);
+  list-style: none;
+  padding: 0;
+}
+#scene-root .mk-n6,
+#scene-root .mk-n7 {
+  --node: 56px;
+  --when: var(--mk-font-size-md);
+}
+#scene-root .mk-when {
+  font-size: var(--mk-font-size-lg);
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-label {
+  font-size: var(--mk-font-size-lg);
+  font-weight: 700;
+  line-height: 1.15;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+#scene-root .mk-detail {
+  margin-top: var(--mk-space-xs);
+  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 {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-n6 .mk-when,
+#scene-root .mk-n7 .mk-when,
+#scene-root .mk-n6 .mk-label,
+#scene-root .mk-n7 .mk-label {
+  font-size: var(--mk-font-size-md);
+}
+#scene-root .mk-node {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: var(--node);
+  height: var(--node);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  color: var(--mk-color-onAccent);
+}
+#scene-root .mk-node svg {
+  width: 60%;
+  height: 60%;
+}
+#scene-root .mk-node.mk-state-now {
+  box-shadow:
+    0 0 0 8px var(--mk-color-bg),
+    0 0 0 16px var(--mk-color-accent);
+}
+#scene-root .mk-node.mk-state-next {
+  background: var(--mk-color-card);
+  border: 6px solid var(--mk-color-divider);
+}
+#scene-root .mk-item.mk-state-next .mk-label,
+#scene-root .mk-item.mk-state-next .mk-when {
+  color: var(--mk-color-muted);
+}
+
+/* horizontal: dates above, axis, labels below */
+#scene-root .mk-h {
+  display: flex;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-h .mk-item {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-md);
+}
+#scene-root .mk-h .mk-item::before {
+  content: "";
+  position: absolute;
+  top: calc(var(--when) * 1.2 + var(--mk-space-md) + var(--node) / 2 - 4px);
+  left: calc(var(--node) / 2);
+  width: calc(100% + var(--mk-space-md));
+  height: 8px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+}
+#scene-root .mk-h .mk-item.mk-state-now::before,
+#scene-root .mk-h .mk-item.mk-state-next::before {
+  background: var(--mk-color-divider);
+}
+#scene-root .mk-h .mk-item:last-child::before {
+  display: none;
+}
+#scene-root .mk-h .mk-body {
+  padding-right: var(--mk-space-sm);
+}
+
+/* vertical: date | node on a rail | label */
+#scene-root .mk-v {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-lg);
+}
+#scene-root .mk-v .mk-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 200px var(--node) 1fr;
+  align-items: center;
+  column-gap: var(--mk-space-lg);
+}
+#scene-root .mk-v .mk-item .mk-when {
+  text-align: right;
+}
+#scene-root .mk-v .mk-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: calc(200px + var(--mk-space-lg) + var(--node) / 2 - 4px);
+  top: 50%;
+  width: 8px;
+  height: calc(100% + var(--mk-space-lg));
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+}
+#scene-root .mk-v .mk-item.mk-state-now::after,
+#scene-root .mk-v .mk-item.mk-state-next::after {
+  background: var(--mk-color-divider);
+}

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

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

package/dist/scenes/title/index.js

@@ -0,0 +1,52 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { frameCss } from "../../shared/frame.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const configSchema = limitWords(z.strictObject({ title: text, subtitle: text.optional(), kicker: text.optional() }), (props) => present(props.kicker, props.title, props.subtitle));
+const ART = [
+    '<div class="mk-art" aria-hidden="true">',
+    '<i class="mk-ring mk-ring-1"></i>',
+    '<i class="mk-ring mk-ring-2"></i>',
+    '<i class="mk-ring mk-ring-3"></i>',
+    '<i class="mk-disc"></i>',
+    '<i class="mk-dot"></i>',
+    "</div>",
+].join("\n");
+/** Tall frames: text first; the orb sits below/behind it and never under a word. */
+const TALL_CSS = `#scene-root { justify-content: flex-start; }
+#scene-root .mk-stack { max-width: 100%; }
+#scene-root .mk-art { top: auto; margin-top: 0; width: 1000px; height: 1000px; }`;
+const PORTRAIT_CSS = `#scene-root { padding-top: 16%; }
+#scene-root .mk-art { right: -30%; bottom: -300px; }`;
+const SQUARE_CSS = `#scene-root { padding-top: 7%; }
+#scene-root .mk-art { right: -4%; bottom: -260px; transform: translateX(calc(var(--drift, 0) * -14px)) scale(0.62); transform-origin: right bottom; }`;
+const render = (props) => {
+    const lines = [];
+    const add = (tag, cls, value, key) => {
+        const attrs = animAttrs("rise", lines.length, key);
+        lines.push(`<${tag} class="${cls}" ${attrs}>${esc(value)}</${tag}>`);
+    };
+    if (props.kicker)
+        add("p", "mk-kicker", props.kicker, "kicker");
+    add("h1", "mk-heading", props.title, "title");
+    lines.push(`<span class="mk-rule" ${animAttrs("grow", lines.length, "title")}></span>`);
+    if (props.subtitle)
+        add("p", "mk-sub", props.subtitle, "subtitle");
+    return `${ART}\n<div class="mk-stack">\n${lines.join("\n")}\n</div>`;
+};
+export const titleScene = defineScene({
+    type: "title",
+    configSchema,
+    meta: {
+        purpose: "Opening or section title card with optional kicker and subtitle.",
+        example: { title: "Hello" },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx, root) => ({
+        body: render(props),
+        css: frameCss(ctx, root, { tall: TALL_CSS, portrait: PORTRAIT_CSS, square: SQUARE_CSS }),
+    }),
+});

package/dist/scenes/title/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/title/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.3, staggerFrames: 6, rise: 48 });
+}

package/dist/scenes/title/style.css

@@ -0,0 +1,80 @@
+#scene-root .mk-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mk-space-lg);
+  max-width: 56%;
+}
+#scene-root .mk-kicker {
+  display: flex;
+  align-items: center;
+  gap: var(--mk-space-md);
+  font-size: var(--mk-font-size-md);
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--mk-color-accent);
+}
+#scene-root .mk-kicker::before {
+  content: "";
+  width: 72px;
+  height: 4px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+}
+#scene-root .mk-heading {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-display);
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+#scene-root .mk-sub {
+  max-width: 24em;
+  font-size: var(--mk-font-size-lg);
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+}
+#scene-root .mk-art {
+  position: absolute;
+  z-index: -1;
+  right: -9%;
+  top: 50%;
+  width: 1000px;
+  height: 1000px;
+  margin-top: -500px;
+  transform: translateX(calc(var(--drift, 0) * -14px));
+  pointer-events: none;
+}
+#scene-root .mk-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid var(--mk-color-divider);
+}
+#scene-root .mk-ring-1 {
+  inset: 0;
+}
+#scene-root .mk-ring-2 {
+  inset: 130px;
+}
+#scene-root .mk-ring-3 {
+  inset: 260px;
+  border-color: var(--mk-color-accent);
+}
+#scene-root .mk-disc {
+  position: absolute;
+  inset: 350px;
+  border-radius: 50%;
+  background: linear-gradient(145deg, var(--mk-color-accent), var(--mk-color-deep));
+  box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--mk-color-accent) 70%, transparent);
+}
+#scene-root .mk-dot {
+  position: absolute;
+  left: 118px;
+  top: 276px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--mk-color-accent2);
+}

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

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

package/dist/scenes/waveform/index.js

@@ -0,0 +1,39 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { esc } from "../../html.js";
+import { readText } from "../../text-file.js";
+import { limitWords, text } from "../../words.js";
+const MIN_PEAKS = 16;
+const MAX_PEAKS = 128;
+const configSchema = limitWords(z.strictObject({
+    peaks: z
+        .array(z.number().min(0).max(1))
+        .min(MIN_PEAKS, `need ${MIN_PEAKS}-${MAX_PEAKS} peaks`)
+        .max(MAX_PEAKS, `need ${MIN_PEAKS}-${MAX_PEAKS} peaks`),
+    label: text.max(40).optional(),
+}), (props) => (props.label === undefined ? [] : [props.label]));
+const render = (props, _ctx) => {
+    const bars = props.peaks
+        .map((peak, index) => `<i class="mk-bar" data-i="${index}" data-h="${peak}"></i>`)
+        .join("");
+    const label = props.label === undefined ? "" : `<p class="mk-label">${esc(props.label)}</p>`;
+    return `<div class="mk-stage">
+  <div class="mk-wave" role="img" aria-label="${esc(props.label ?? "Audio waveform")}">${bars}</div>
+  <div class="mk-playhead" aria-hidden="true"></div>
+  ${label}
+</div>`;
+};
+export const waveformScene = defineScene({
+    type: "waveform",
+    configSchema,
+    meta: {
+        purpose: "Audio waveform from precomputed peaks: bars rise as the playhead sweeps; for voice agents, podcasts and narrated reports. Peaks are storyboard data, never decoded audio.",
+        example: {
+            peaks: [0.2, 0.4, 0.6, 0.8, 0.6, 0.4, 0.3, 0.5, 0.7, 0.9, 0.7, 0.5, 0.4, 0.3, 0.2, 0.1],
+            label: "Intro",
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props, ctx) => ({ body: render(props, ctx) }),
+});

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

@@ -0,0 +1,35 @@
+// @ts-check
+import { clamp01 } from "../../runtime/easing.js";
+import { mountTimeline } from "../../runtime/mount.js";
+/** @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 wave = /** @type {HTMLElement} */ (root.querySelector(".mk-wave"));
+    const bars = /** @type {HTMLElement[]} */ (Array.from(wave.children));
+    const playhead = /** @type {HTMLElement} */ (root.querySelector(".mk-playhead"));
+    const duration = ctx.duration ?? (Number(root.dataset.duration) || 6);
+    const count = bars.length;
+    /** @param {number} t */
+    const seek = (t) => {
+        inner.seek(t);
+        const progress = duration > 0 ? clamp01(t / duration) : 1;
+        const head = progress * count;
+        bars.forEach((bar, i) => {
+            const peak = Number(bar.dataset.h ?? 0);
+            const seen = clamp01(head - i);
+            bar.style.height = `${Math.max(4, peak * 100 * seen)}%`;
+            bar.style.opacity = String(0.35 + 0.65 * seen);
+        });
+        playhead.style.left = `${progress * 100}%`;
+    };
+    const dispose = () => {
+        inner.dispose();
+        for (const bar of bars) {
+            bar.style.removeProperty("height");
+            bar.style.removeProperty("opacity");
+        }
+        playhead.style.removeProperty("left");
+    };
+    seek(0);
+    return { seek, dispose, ready: inner.ready };
+}

package/dist/scenes/waveform/style.css

@@ -0,0 +1,44 @@
+#scene-root {
+  align-items: center;
+  text-align: center;
+}
+#scene-root .mk-stage {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: var(--mk-space-md);
+  position: relative;
+}
+#scene-root .mk-wave {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 40vmin;
+}
+#scene-root .mk-bar {
+  flex: 1 1 0;
+  min-width: 2px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent);
+  height: 4%;
+}
+#scene-root .mk-playhead {
+  position: absolute;
+  top: 8%;
+  bottom: 8%;
+  left: 0;
+  width: 3px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-fg);
+  opacity: 0.85;
+}
+#scene-root .mk-label {
+  font-family: var(--mk-font-sans);
+  font-size: var(--mk-font-size-lg);
+  color: var(--mk-color-muted);
+  margin: 0;
+}

package/dist/shared/fit-text.d.ts

@@ -0,0 +1,24 @@
+export interface FitTextOptions {
+    /** Available line width in px. */
+    readonly boxWidth: number;
+    readonly maxFont: number;
+    readonly minFont: number;
+    readonly maxLines: number;
+    /** Last line must be at least this fraction of the widest line (default 0.35). */
+    readonly minLastLine?: number;
+}
+export interface FittedText {
+    /** Lines, split only at spaces (a word is never broken). */
+    readonly lines: readonly string[];
+    readonly fontPx: number;
+    /** Every line fits `boxWidth`, within `maxLines`, last line not a stub. */
+    readonly fits: boolean;
+    /** Words wider than the box on their own. */
+    readonly overlong: readonly string[];
+}
+/**
+ * Largest font in [minFont, maxFont] whose balanced wrap fits the box in at most `maxLines`
+ * lines, never breaking a word and never leaving a stub last line. When nothing fits, returns the
+ * single-line text at `minFont` with `fits: false` and the offending words.
+ */
+export declare const fitText: (text: string, opts: FitTextOptions) => FittedText;