@anvpx/motion-scenes 0.0.0-stage → 0.1.1

package/dist/scenes/flow/plan.js

@@ -0,0 +1,117 @@
+import { DEFAULT_FONTS, EDGE_SAMPLES, edgeGeometry, edgeLabelRoom, layoutFlow, } from "./layout.js";
+import { textWidth } from "./measure.js";
+/** Room (px) around an edge label's text for its background halo. */
+const HALO = 8;
+/** Extra clearance used when testing a label against nodes and other edges. */
+const CLEARANCE = 4;
+const LINE_HEIGHT = 1.2;
+/**
+ * Sample positions along an edge tried for its label, middle outwards (never within the first
+ * and last tenth, where the card and the arrow head are).
+ */
+const POSITIONS = Array.from({ length: EDGE_SAMPLES + 1 }, (_, i) => i)
+    .filter((i) => i >= EDGE_SAMPLES * 0.1 && i <= EDGE_SAMPLES * 0.85)
+    .sort((a, b) => Math.abs(a - EDGE_SAMPLES / 2) - Math.abs(b - EDGE_SAMPLES / 2) || a - b);
+/** Sideways shifts (in label heights) tried after the label sat on its own edge found no clear spot. */
+const SHIFTS = [0, -1, 1];
+/** A clash with a card or another label costs this many clashes with a bare edge. */
+const HARD_COST = 10;
+const cornersOverlap = (a, b) => Math.abs(a.x - b.x) * 2 < a.w + b.w && Math.abs(a.y - b.y) * 2 < a.h + b.h;
+const nodeBox = (node) => ({
+    x: node.x + node.w / 2,
+    y: node.y + node.h / 2,
+    w: node.w + 2 * CLEARANCE,
+    h: node.h + 2 * CLEARANCE,
+});
+const hitsPoint = (box, point) => Math.abs(point.x - box.x) * 2 <= box.w + CLEARANCE &&
+    Math.abs(point.y - box.y) * 2 <= box.h + CLEARANCE;
+const labelBox = (text, font, at) => ({
+    x: at.x,
+    y: at.y,
+    w: textWidth(text, font) + 2 * HALO,
+    h: Math.ceil(font * LINE_HEIGHT) + HALO,
+});
+const isHard = (overlap) => !overlap.startsWith("edge ");
+/** A label box at `sample`, moved `shift` label sizes sideways (across the edge's main direction). */
+const shiftedBox = (text, font, sample, shift, direction) => {
+    const probe = labelBox(text, font, sample);
+    const side = Math.round(shift * ((direction === "lr" ? probe.h : probe.w) + CLEARANCE));
+    return labelBox(text, font, direction === "lr" ? { x: sample.x, y: sample.y + side } : { x: sample.x + side, y: sample.y });
+};
+/** Label boxes in order of preference: on the edge from the middle outwards, then to either side. */
+function* candidates(text, font, around) {
+    const own = around.edges[around.index]?.geometry.samples ?? [];
+    for (const shift of SHIFTS) {
+        for (const position of POSITIONS) {
+            const sample = own[position] ?? { x: 0, y: 0 };
+            yield shiftedBox(text, font, sample, shift, around.direction);
+        }
+    }
+}
+/** What a label box still touches: cards, earlier labels and the other edges. */
+const overlapsOf = (box, around) => [
+    ...around.nodes
+        .filter((node) => cornersOverlap(box, nodeBox(node)))
+        .map((node) => `node ${node.id}`),
+    ...around.placed.flatMap((other, i) => other !== undefined && cornersOverlap(box, other) ? [`label ${i + 1}`] : []),
+    ...around.edges.flatMap((other, i) => i !== around.index && other.geometry.samples.some((point) => hitsPoint(box, point))
+        ? [`edge ${i + 1}`]
+        : []),
+];
+const costOf = (overlaps) => overlaps.reduce((sum, overlap) => sum + (isHard(overlap) ? HARD_COST : 1), 0);
+/**
+ * Where one label sits: the first candidate clear of every card, earlier label and other edge
+ * wins; otherwise the cheapest one (cards and labels weigh more than a crossing edge).
+ */
+const placeLabel = (text, font, around) => {
+    let best;
+    let bestCost = Number.POSITIVE_INFINITY;
+    for (const box of candidates(text, font, around)) {
+        const overlaps = overlapsOf(box, around);
+        const cost = costOf(overlaps);
+        if (cost === 0)
+            return { ...box, text, overlaps };
+        if (cost < bestCost) {
+            best = { ...box, text, overlaps };
+            bestCost = cost;
+        }
+    }
+    return best ?? { ...labelBox(text, font, { x: 0, y: 0 }), text, overlaps: [] };
+};
+/**
+ * The whole diagram layout: cards sized from their labels, edge geometry, and edge labels
+ * placed along their edges so they avoid cards, other edges and each other. Pure and
+ * deterministic; the scene renders it and `mk validate` lints it.
+ */
+export const planFlow = (graph, size, fonts = DEFAULT_FONTS) => {
+    const room = edgeLabelRoom(graph.edges, graph.direction, fonts.sm);
+    const minRoom = edgeLabelRoom(graph.edges, graph.direction, fonts.sm, 1);
+    const nodes = layoutFlow(graph.nodes, graph.edges, graph.direction, size, room, fonts, minRoom);
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const geometries = graph.edges.map((edge) => {
+        const from = byId.get(edge.from);
+        const to = byId.get(edge.to);
+        if (!from || !to)
+            return undefined;
+        return { edge, geometry: edgeGeometry(from, to, graph.direction, to.layer > from.layer) };
+    });
+    const known = geometries.flatMap((row) => (row === undefined ? [] : [row]));
+    const placed = [];
+    const edges = known.map((row, index) => {
+        const text = row.edge.label;
+        if (text === undefined || text === "") {
+            placed.push(undefined);
+            return row;
+        }
+        const label = placeLabel(text, fonts.sm, {
+            index,
+            direction: graph.direction,
+            edges: known,
+            nodes,
+            placed,
+        });
+        placed.push(label);
+        return { ...row, label };
+    });
+    return { nodes, edges, font: nodes[0]?.font ?? fonts.md, edgeFont: fonts.sm };
+};

package/dist/scenes/flow/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/flow/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: 6, rise: 24 });
+}

package/dist/scenes/flow/schema.d.ts

@@ -0,0 +1,49 @@
+import { z } from "zod";
+declare const graphSchema: z.ZodObject<{
+    nodes: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        label: z.ZodString;
+    }, z.core.$strict>>;
+    edges: z.ZodArray<z.ZodObject<{
+        from: z.ZodString;
+        to: z.ZodString;
+        label: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    direction: z.ZodDefault<z.ZodEnum<{
+        lr: "lr";
+        tb: "tb";
+    }>>;
+}, z.core.$strict>;
+export type Graph = z.output<typeof graphSchema>;
+/** A valid flow graph (ids, edges, node count) without the word budget. */
+export declare const flowGraphSchema: z.ZodObject<{
+    nodes: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        label: z.ZodString;
+    }, z.core.$strict>>;
+    edges: z.ZodArray<z.ZodObject<{
+        from: z.ZodString;
+        to: z.ZodString;
+        label: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    direction: z.ZodDefault<z.ZodEnum<{
+        lr: "lr";
+        tb: "tb";
+    }>>;
+}, z.core.$strict>;
+export declare const configSchema: z.ZodObject<{
+    nodes: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        label: z.ZodString;
+    }, z.core.$strict>>;
+    edges: z.ZodArray<z.ZodObject<{
+        from: z.ZodString;
+        to: z.ZodString;
+        label: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    direction: z.ZodDefault<z.ZodEnum<{
+        lr: "lr";
+        tb: "tb";
+    }>>;
+}, z.core.$strict>;
+export {};

package/dist/scenes/flow/schema.js

@@ -0,0 +1,60 @@
+import { z } from "zod";
+import { limitWords, text } from "../../words.js";
+const NODE_COUNT_MESSAGE = "need 2-8 nodes";
+const nodeSchema = z.strictObject({
+    id: z.string().regex(/^[a-z0-9_-]+$/i, "id must be a-z, 0-9, _ or -"),
+    label: text,
+});
+const edgeSchema = z.strictObject({ from: z.string(), to: z.string(), label: text.optional() });
+const graphSchema = z.strictObject({
+    nodes: z.array(nodeSchema).min(2, NODE_COUNT_MESSAGE).max(8, NODE_COUNT_MESSAGE),
+    edges: z.array(edgeSchema),
+    direction: z.enum(["lr", "tb"]).default("lr"),
+});
+const checkGraph = (graph, ctx) => {
+    const known = new Set();
+    const edgeKeys = new Set();
+    graph.nodes.forEach((node, index) => {
+        if (known.has(node.id)) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["nodes", index, "id"],
+                message: `duplicate node id "${node.id}"`,
+            });
+        }
+        known.add(node.id);
+    });
+    graph.edges.forEach((edge, index) => {
+        for (const end of ["from", "to"]) {
+            if (!known.has(edge[end])) {
+                ctx.addIssue({
+                    code: "custom",
+                    path: ["edges", index, end],
+                    message: `unknown node "${edge[end]}"`,
+                });
+            }
+        }
+        const key = JSON.stringify([edge.from, edge.to]);
+        if (edgeKeys.has(key)) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["edges", index, "to"],
+                message: `duplicate edge "${edge.from}" -> "${edge.to}"`,
+            });
+        }
+        edgeKeys.add(key);
+        if (edge.from === edge.to) {
+            ctx.addIssue({
+                code: "custom",
+                path: ["edges", index, "to"],
+                message: "edge needs two nodes",
+            });
+        }
+    });
+};
+/** A valid flow graph (ids, edges, node count) without the word budget. */
+export const flowGraphSchema = graphSchema.superRefine(checkGraph);
+export const configSchema = limitWords(flowGraphSchema, (props) => [
+    ...props.nodes.map((node) => node.label),
+    ...props.edges.flatMap((edge) => (edge.label ? [edge.label] : [])),
+]);

package/dist/scenes/flow/style.css

@@ -0,0 +1,54 @@
+#scene-root {
+  padding: 0;
+}
+#scene-root .mk-edges {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+#scene-root .mk-edge-line {
+  fill: none;
+  stroke: var(--mk-color-accent);
+  stroke-width: 4px;
+  stroke-linecap: round;
+}
+#scene-root .mk-edge-head {
+  fill: var(--mk-color-accent);
+}
+#scene-root .mk-edge-label {
+  font-size: var(--mk-font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  fill: var(--mk-color-fg);
+  text-anchor: middle;
+  dominant-baseline: central;
+  paint-order: stroke;
+  stroke: var(--mk-color-bg);
+  stroke-width: 14px;
+  stroke-linejoin: round;
+}
+#scene-root .mk-node {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 24px;
+  text-align: center;
+  white-space: nowrap;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--mk-color-fg);
+  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 -24px color-mix(in srgb, var(--mk-color-fg) 40%, transparent)
+  );
+}
+#scene-root .mk-node.mk-src {
+  color: var(--mk-color-onAccent);
+  background: var(--mk-color-accent);
+  border-color: var(--mk-color-accent);
+}

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

@@ -0,0 +1,3 @@
+/** Shorter headlines get the next size up, so the type fills the frame instead of floating in it. */
+export declare const sizeClass: (visible: number) => string;
+export declare const heroScene: import("@anvpx/motion-schema").ScenePlugin;

package/dist/scenes/hero/index.js

@@ -0,0 +1,77 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { frameCss } from "../../shared/frame.js";
+import { accentHtml, stripAccent } from "../../shared/markup.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const LAYOUTS = ["bento", "center"];
+/** One glass tile: a number, a label and an optional detail line. */
+const tile = z.strictObject({
+    value: text.max(10).optional(),
+    label: text.max(24),
+    detail: text.max(32).optional(),
+});
+const configSchema = limitWords(z.strictObject({
+    title: text.max(70),
+    subtitle: text.max(120).optional(),
+    kicker: text.max(28).optional(),
+    tiles: z.array(tile).max(4).optional(),
+    layout: z.enum(LAYOUTS).default("bento"),
+}), (props) => [
+    ...present(stripAccent(props.title), props.subtitle, props.kicker),
+    ...(props.tiles ?? []).flatMap((item) => present(item.value, item.label, item.detail)),
+]);
+/** Shorter headlines get the next size up, so the type fills the frame instead of floating in it. */
+export const sizeClass = (visible) => {
+    if (visible <= 26)
+        return "mk-size-1";
+    return visible <= 46 ? "mk-size-2" : "mk-size-3";
+};
+const tileHtml = (item, step, index) => {
+    const value = item.value ? `<span class="mk-tile-value">${esc(item.value)}</span>` : "";
+    const detail = item.detail ? `<span class="mk-tile-detail">${esc(item.detail)}</span>` : "";
+    return `<div class="mk-tile" ${animAttrs("rise", step, `tile-${index}`)}>
+${value}<span class="mk-tile-label">${esc(item.label)}</span>${detail}
+</div>`;
+};
+const render = (props) => {
+    const lines = [];
+    let step = 0;
+    if (props.kicker) {
+        lines.push(`<p class="mk-kicker" ${animAttrs("rise", step, "kicker")}><i class="mk-kicker-dot"></i>${esc(props.kicker)}</p>`);
+        step += 1;
+    }
+    lines.push(`<h1 class="mk-title" ${animAttrs("rise", step, "title")}>${accentHtml(props.title)}</h1>`);
+    step += 1;
+    if (props.subtitle) {
+        lines.push(`<p class="mk-sub" ${animAttrs("rise", step, "subtitle")}>${esc(props.subtitle)}</p>`);
+        step += 1;
+    }
+    const tiles = (props.tiles ?? []).map((item, index) => tileHtml(item, step + index, index));
+    const grid = tiles.length > 0 ? `<div class="mk-tiles">\n${tiles.join("\n")}\n</div>` : "";
+    return `<div class="mk-hero ${sizeClass(stripAccent(props.title).length)}" data-layout="${props.layout}">
+<div class="mk-mesh" aria-hidden="true"></div>
+<div class="mk-copy">
+${lines.join("\n")}
+</div>
+${grid}
+</div>`;
+};
+/** Tall frames stack the copy above the tiles and drop the two-column bento. */
+const TALL_CSS = `#scene-root .mk-hero { grid-template-columns: minmax(0, 1fr); align-content: center; }
+#scene-root .mk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }`;
+export const heroScene = defineScene({
+    type: "hero",
+    configSchema,
+    meta: {
+        purpose: "Landing-page hero: kicker, big headline with [x] accents, subline and up to 4 glass tiles; bento or centered.",
+        example: { title: "Design at the [speed] of thought", layout: "bento" },
+    },
+    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 }),
+    }),
+});

package/dist/scenes/hero/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/hero/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.25, staggerFrames: 5, rise: 44 });
+}

package/dist/scenes/hero/style.css

@@ -0,0 +1,143 @@
+#scene-root .mk-hero {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--mk-space-xl);
+  width: 100%;
+}
+#scene-root .mk-hero[data-layout="center"] {
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  gap: var(--mk-space-lg);
+  text-align: center;
+}
+#scene-root .mk-mesh {
+  position: absolute;
+  inset: -22%;
+  z-index: -1;
+  pointer-events: none;
+  filter: blur(30px);
+  transform: translate3d(calc(var(--drift, 0) * 7px), calc(var(--drift, 0) * -5px), 0);
+  background:
+    radial-gradient(
+      40% 44% at 16% 10%,
+      color-mix(in srgb, var(--mk-color-accent) 40%, transparent) 0%,
+      transparent 70%
+    ),
+    radial-gradient(
+      36% 40% at 88% 82%,
+      color-mix(in srgb, var(--mk-color-accent2) 32%, transparent) 0%,
+      transparent 72%
+    ),
+    radial-gradient(
+      48% 52% at 64% 4%,
+      color-mix(in srgb, var(--mk-color-deep) 58%, transparent) 0%,
+      transparent 76%
+    );
+}
+#scene-root .mk-copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-md);
+  max-width: 100%;
+}
+#scene-root .mk-hero[data-layout="center"] .mk-copy {
+  align-items: center;
+}
+#scene-root .mk-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mk-space-sm);
+  align-self: flex-start;
+  padding: 10px 20px;
+  border-radius: var(--mk-radius-full);
+  border: 1px solid color-mix(in srgb, var(--mk-color-fg) 16%, transparent);
+  background: color-mix(in srgb, var(--mk-color-surface) 55%, transparent);
+  color: var(--mk-color-muted);
+  font-size: var(--mk-font-size-sm);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+#scene-root .mk-hero[data-layout="center"] .mk-kicker {
+  align-self: center;
+}
+#scene-root .mk-kicker-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-color-accent2);
+}
+#scene-root .mk-title {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: -0.03em;
+  color: var(--mk-color-fg);
+  text-wrap: balance;
+}
+#scene-root .mk-size-1 .mk-title {
+  font-size: var(--mk-font-size-display);
+}
+#scene-root .mk-size-2 .mk-title {
+  font-size: var(--mk-font-size-title);
+}
+#scene-root .mk-size-3 .mk-title {
+  font-size: var(--mk-font-size-xl);
+}
+#scene-root .mk-title .accent {
+  background: linear-gradient(96deg, var(--mk-color-accent), var(--mk-color-accent2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+#scene-root .mk-sub {
+  max-width: 34ch;
+  color: var(--mk-color-muted);
+  font-size: var(--mk-font-size-lg);
+  line-height: 1.32;
+}
+#scene-root .mk-hero[data-layout="center"] .mk-sub {
+  max-width: 48ch;
+}
+#scene-root .mk-tiles {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--mk-space-md);
+  width: 100%;
+}
+#scene-root .mk-hero[data-layout="center"] .mk-tiles {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  max-width: 100%;
+}
+#scene-root .mk-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mk-space-xs);
+  padding: var(--mk-space-lg);
+  border-radius: var(--mk-radius-lg);
+  border: 1px solid color-mix(in srgb, var(--mk-color-fg) 13%, transparent);
+  background: color-mix(in srgb, var(--mk-color-surface) 60%, transparent);
+  backdrop-filter: blur(18px) saturate(140%);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--mk-color-fg) 14%, transparent),
+    0 24px 48px -32px color-mix(in srgb, var(--mk-color-bg) 85%, transparent);
+}
+#scene-root .mk-tile-value {
+  font-family: var(--mk-font-display, var(--mk-font-sans));
+  font-size: var(--mk-font-size-lg);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--mk-color-accent2);
+}
+#scene-root .mk-tile-label {
+  font-size: var(--mk-font-size-md);
+  font-weight: 600;
+  color: var(--mk-color-fg);
+}
+#scene-root .mk-tile-detail {
+  font-size: var(--mk-font-size-sm);
+  line-height: 1.3;
+  color: var(--mk-color-muted);
+}

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

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

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

@@ -0,0 +1,69 @@
+import { z } from "zod";
+import { defineScene } from "../../define-scene.js";
+import { animAttrs, esc } from "../../html.js";
+import { iconProblem, sceneIcon } from "../../shared/icon.js";
+import { readText } from "../../text-file.js";
+import { limitWords, present, text } from "../../words.js";
+const COUNT_MESSAGE = "need 2-8 items";
+const ICON_SIZE = 64;
+const itemSchema = z.strictObject({
+    icon: text.superRefine((name, ctx) => {
+        const problem = iconProblem(name);
+        if (problem !== undefined)
+            ctx.addIssue({ code: "custom", message: problem });
+    }),
+    label: text,
+    detail: text.optional(),
+});
+const configSchema = limitWords(z.strictObject({
+    title: text.optional(),
+    items: z.array(itemSchema).min(2, COUNT_MESSAGE).max(8, COUNT_MESSAGE),
+    cols: z.number().int().min(2).max(4).optional(),
+}), (props) => props.items.flatMap((item) => present(item.label, item.detail)).concat(present(props.title)));
+/** Balanced default: one row up to 4 items, then 3 or 4 columns. */
+const defaultCols = (count) => {
+    if (count <= 4)
+        return Math.max(2, count);
+    return count <= 6 ? 3 : 4;
+};
+const card = (item, index, offset) => {
+    const icon = sceneIcon(item.icon, { at: `props.items[${index}].icon`, size: ICON_SIZE });
+    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-card" ${attrs}>
+<span class="mk-chip">${icon}</span>
+<p class="mk-label">${esc(item.label)}</p>${detail}
+</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 cols = props.cols ?? defaultCols(props.items.length);
+    const cards = props.items.map((item, index) => card(item, index, offset));
+    const dense = cols === 4 && props.items.length > 4 ? " mk-dense" : "";
+    return `${head}<ul class="mk-grid mk-cols-${cols}${dense}">\n${cards.join("\n")}\n</ul>`;
+};
+export const iconGridScene = defineScene({
+    type: "icon-grid",
+    configSchema,
+    meta: {
+        purpose: "Features, benefits or categories as 2-8 icon cards with a short label and optional detail.",
+        example: {
+            title: "Why teams switch",
+            items: [
+                { icon: "zap", label: "Fast setup", detail: "Live in a day" },
+                { icon: "shield", label: "Secure by default" },
+                { icon: "globe", label: "Works worldwide" },
+            ],
+        },
+    },
+    style: readText("./style.css", import.meta.url),
+    script: readText("./scene.js", import.meta.url),
+    render: (props) => ({ body: render(props) }),
+});

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