@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-TC4AZFMQ.js

@@ -0,0 +1,107 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  PANE_ART,
+  VITRINE,
+  aurora,
+  body,
+  code,
+  display,
+  fitAurora,
+  glassBrand,
+  label,
+  lockup,
+  pane,
+  paneArt,
+  paneTrack,
+  sitePill,
+  ts
+} from "./chunk-ORDVTAMO.js";
+import {
+  board,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-glass-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Glass SaaS link preview";
+var style_glass_link_preview_default = defineTemplate({
+  id: "social-saas-style-glass-link-preview",
+  meta: {
+    name: NAME,
+    description: "A link preview card in the glass look for an AI-agent guardrail product: the name, the promise and the address on smoked glass beside four panes of glass a beam of light stops at, over an aurora in teal, ocean blue and amber. Open Graph 1200 \xD7 630 with GitHub social preview and X post sizes",
+    category: "social",
+    tags: ["social", "link preview", "open graph", "og image", "github", "x", "saas", "glass", "glassmorphism", "aurora", "ai", "security", "launch"],
+    platforms: ["web", "x", "linkedin", "github"],
+    formats: ["banner", "post"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("og-image"));
+    k.quantizeGeometry = true;
+    glassBrand(k);
+    ts(k, "Brand 26", display(26));
+    ts(k, "Head 56", display(56, { lead: 1.04 }));
+    ts(k, "Sub 22", body(22));
+    ts(k, "Track 18", label(18));
+    ts(k, "Site 22", code(22));
+    ts(k, "Head 88", display(88, { lead: 1.02 }));
+    ts(k, "Sub 34", body(34));
+    ts(k, "Track 28", label(28));
+    sitePill(k, { style: "Site 22", label: "{{brand.site}}" });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Link preview");
+    k.flowSheet(sheet, 0, { top: 56, right: 56, bottom: 56, left: 56 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    aurora(k, sheet, { duration: 1, still: true });
+    const card = k.stack(sheet, { direction: "HORIZONTAL", gap: 36, align: "CENTER", name: "Card row" });
+    const words = pane(k, card, { width: 560, gap: 22, padding: 40, radius: 32, name: "Words" });
+    lockup(k, words, { size: 42, style: "Brand 26" });
+    k.text(words, VITRINE.tagline, { style: "Head 56", color: "onGlass", name: "Headline" });
+    k.text(words, `Guardrails for AI agents in production. Adds ${VITRINE.p50} ms at p50.`, { style: "Sub 22", color: "glassMuted", name: "Sub" });
+    k.instance(words, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
+    const right = k.stack(card, { gap: 18, align: "CENTER", name: "Right" });
+    paneArt(k, board(k, right, PANE_ART.w, PANE_ART.h, 0.55, "Pane board"), { name: "Pane art" });
+    paneTrack(k, right, { style: "Track 18", gap: 8, pad: [7, 12] });
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        fitAurora(kit, id);
+        reboard(kit, id, "Pane board", 0.6);
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        fitAurora(kit, id);
+        kit.patch(id, { padding: { top: 80, right: 80, bottom: 80, left: 80 } });
+        for (const n of kit.named(id, "Card row")) kit.patch(n, { itemSpacing: 48 });
+        restyle(kit, id, "Sub", "Sub 34");
+        for (const n of kit.named(id, "Words")) kit.patch(n, { width: 820, padding: { top: 60, right: 60, bottom: 60, left: 60 } });
+        restyle(kit, id, "Headline", "Head 88");
+        reboard(kit, id, "Pane board", 0.85);
+        for (const t of kit.named(id, "Track chip words")) kit.restyle(t, "Track 28");
+      } }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_glass_link_preview_default
+};

package/dist/chunks/chunk-TCBAN3ZG.js

@@ -0,0 +1,150 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  brand,
+  caption,
+  captionCues,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage,
+  typeStep
+} from "./chunk-5RBWERLP.js";
+import {
+  key
+} from "./chunk-FAAVZ2GX.js";
+import {
+  deviceShadow
+} from "./chunk-SKMGZGNY.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion3d/feature-flip.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 1e4;
+var FPS = 30;
+var SIZES = ["video-square", "video-1080p"];
+var FEATURES = [
+  ["Budgets", "A monthly budget per category, with a nudge before you go over."],
+  ["Bills", "Every bill and subscription, with a reminder three days out."],
+  ["Goals", "Save toward a trip or a laptop and watch it fill."],
+  ["Insights", "See where it went, by week, month or merchant."],
+  ["Split", "Split any purchase with friends in two taps."],
+  ["Widgets", "Your balance and budgets on your Home Screen."],
+  ["Face ID", "Only you can open your money."],
+  ["Offline", "Works without signal and syncs when you\u2019re back."],
+  ["Export", "CSV and PDF statements for tax time."]
+];
+var FLIP_AT = 1600;
+var BACK_AT = 6600;
+var WAVE = 130;
+var TURN = 800;
+var CAPTION = { name: "Headline", title: "Everything your money needs." };
+var CUES = [...captionCues(CAPTION, 200), { layer: "Headline", preset: "fade-out", at: 9300, params: { duration: 500 } }];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Feature flip wall \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1200 * s.u), s.W / 2, s.H * 0.58, 0.45);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2600 * s.u });
+  const cols = s.wide ? 4 : 3, rows = s.wide ? 2 : 3;
+  const tile = s.wide ? { w: 360, h: 300 } : { w: 262, h: 236 };
+  const gap = Math.round(24 * s.u);
+  const W = cols * tile.w + (cols - 1) * gap, H = rows * tile.h + (rows - 1) * gap;
+  const col = column(s, 120);
+  const top = Math.round((s.wide ? 200 : 190) * s.u);
+  const grid = rig(k, scene, s, "Grid", W, H, s.W / 2, top + (s.H - top - 60 * s.u) / 2);
+  k.patch(grid, { rotateX: 8 });
+  k.behave(grid, "rotateY", [{ kind: "sine", amp: 4, freq: 0.1 }]);
+  const pad = Math.round(26 * s.u);
+  const faceName = `Feature tile ${tile.w}`, backName = `Feature detail ${tile.w}`;
+  if (!k.hasComponent(faceName)) {
+    const name = `Tile ${Math.round(44 * s.u)}`;
+    k.textStyle(name, { size: Math.round(44 * s.u), fontWeight: 800, letterSpacing: -1, lineHeight: Math.round(50 * s.u) });
+    k.textStyle("Tile detail 20", { size: 20, fontWeight: 500, lineHeight: 27 });
+    const label = typeStep(k, s, "label");
+    k.component(faceName, {
+      width: tile.w,
+      height: tile.h,
+      fill: "primary",
+      radius: 30,
+      padding: pad,
+      justify: "SPACE_BETWEEN",
+      effects: [deviceShadow(0.3, 20, 50)],
+      description: "The front of a feature tile: its number and its name.",
+      props: { Number: "01", Feature: FEATURES[0][0] }
+    }, (id) => {
+      k.propText(id, "Number", { style: label, color: "onPrimary" });
+      k.propText(id, "Feature", { style: name, color: "onPrimary" });
+    });
+    k.component(backName, {
+      width: tile.w,
+      height: tile.h,
+      fill: "surface",
+      radius: 30,
+      padding: pad,
+      gap: 10,
+      justify: "CENTER",
+      effects: [deviceShadow(0.3, 20, 50)],
+      description: "The back of a feature tile: what the feature does.",
+      props: { Feature: FEATURES[0][0], Detail: FEATURES[0][1] }
+    }, (id) => {
+      k.propText(id, "Feature", { style: label, color: "primary" });
+      k.propText(id, "Detail", { style: "Tile detail 20", color: "onScreen" });
+    });
+  }
+  FEATURES.slice(0, cols * rows).forEach(([title, text], i) => {
+    const c = i % cols, r = Math.floor(i / cols);
+    const g = k.group(grid, { x: c * (tile.w + gap), y: r * (tile.h + gap), width: tile.w, height: tile.h }, { name: title });
+    const face = k.instance(g, faceName, { Number: String(i + 1).padStart(2, "0"), Feature: title }, { name: "Face" });
+    k.patch(face, { z: 1 });
+    const back = k.instance(g, backName, { Feature: title, Detail: text }, { name: "Back" });
+    k.patch(back, { z: -1, rotateY: 180 });
+    const d = (c + r) * WAVE;
+    key(k, g, "rotateY", [[FLIP_AT + d, 0, ease.inOut("cubic")], [FLIP_AT + d + TURN, 180, ease.hold], [BACK_AT + d, 180, ease.inOut("cubic")], [BACK_AT + d + TURN, 360]]);
+    key(k, g, "z", [[FLIP_AT + d, 0, ease.out("cubic")], [FLIP_AT + d + TURN / 2, 120, ease.inOut("cubic")], [FLIP_AT + d + TURN, 0, ease.hold], [BACK_AT + d, 0, ease.out("cubic")], [BACK_AT + d + TURN / 2, 120, ease.inOut("cubic")], [BACK_AT + d + TURN, 0]]);
+    if (c + r < (cols + rows - 2) / 2) k.patch(g, { rotateY: 180 });
+  });
+  caption(k, sheet, s, { ...CAPTION, step: "subtitle", width: col.width, align: "CENTER", at: { x: col.x, y: Math.round(70 * s.u) } });
+  k.cues(sheet, CUES);
+}
+var feature_flip_default = defineTemplate({
+  id: "motion-3d-feature-flip",
+  meta: {
+    name: "Feature flip wall",
+    description: "A grid of feature tiles in your colour flips over in a 3D wave to show what each feature does on its back, holds, and flips home \u2014 a 10-second loop at 30 fps, square (nine features) and 16:9 (eight), for launch and feature videos",
+    category: "animation",
+    tags: ["animation", "3d", "features", "grid", "flip", "cards", "app", "launch", "loop"],
+    platforms: ["instagram", "linkedin", "x", "youtube", "web"],
+    formats: ["post", "video", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Feature flip wall", preset(SIZES[0]));
+    brand(k, "dark");
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  feature_flip_default
+};

package/dist/chunks/chunk-TCSFTSSR.js

@@ -0,0 +1,260 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  SHARD,
+  blinking,
+  cell,
+  clockFrames,
+  cursor,
+  fitGround,
+  ground,
+  lockup,
+  minimap,
+  mono,
+  scan,
+  steps,
+  termBrand,
+  termLine,
+  termWindow,
+  tuiBox
+} from "./chunk-42X4TCTL.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  seenAt,
+  wideCut
+} from "./chunk-D7LV62QH.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-L23WDECU.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  score
+} from "./chunk-52GCV7N5.js";
+import {
+  cutOn,
+  hz
+} from "./chunk-Z2UPJTSZ.js";
+import {
+  hide,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/style-terminal-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("edm");
+var { beat } = S;
+var NAME = "Terminal SaaS feature demo short";
+var W = { w: 800, h: 720 };
+var SIZE = 22;
+var CW = cell(SIZE);
+var LH = 30;
+var STEP = [4, 10, 16, 21, 26];
+var CLICK1 = beat(STEP[0] + 2);
+var CLICK2 = beat(STEP[3] + 1);
+var REST = { x: 640, y: 640 };
+var TARGETS = [{ x: 196, y: 100 }, { x: 150, y: 520 }];
+var SHOTS = [
+  { t: beat(STEP[0]), duration: 1, zoom: 1.7, x: 260, y: 130 },
+  { t: beat(STEP[1]), duration: 1, zoom: 1.3, x: 330, y: 230 },
+  { t: beat(STEP[2]), duration: 1, zoom: 1.55, x: 250, y: 390 },
+  { t: beat(STEP[3]), duration: 1, zoom: 1.35, x: 360, y: 590 },
+  { t: beat(STEP[4]), duration: 1, zoom: 1 }
+];
+var SHARDS = [
+  ["01", "3:34", "0:52", 0.245],
+  ["02", "3:31", "0:51", 0.24],
+  ["03", "3:29", "0:52", 0.245],
+  ["04", "3:34", "0:50", 0.236]
+];
+var BAR = 400;
+var JSON_LINES = [
+  ['  "id": ', '"run_7Hq2"', "amber"],
+  ['  "status": ', '"passed"', "green"],
+  ['  "tests": ', "2418", "amber"],
+  ['  "runners": ', "64", "amber"],
+  ['  "duration_s": ', "52.3", "amber"]
+];
+var cues = [
+  { layer: "Hook", preset: "typewriter", at: 0, params: { duration: 700 } },
+  // The window is on with the hook's first letters, so the frame is never a bare ground.
+  cutOn("Stage", 120),
+  cutOn("Steps bar", beat(1)),
+  ...[1, 2, 3].map((n, i) => ({ layer: `Step fill ${n}`, preset: "wipe-in", at: beat(STEP[i]), params: { duration: beat(STEP[i + 1] - STEP[i]), ease: ease.linear } })),
+  cutOn("Field ring", CLICK1),
+  cutOn("New shard", beat(STEP[1] + 2), beat(1)),
+  cutOn("More line", beat(STEP[1] + 4)),
+  cutOn("Diff del", beat(STEP[2] + 1)),
+  cutOn("Diff add", beat(STEP[2] + 2)),
+  cutOn("Json line", CLICK2 + 120, 180),
+  cutOn("Json close", CLICK2 + 120 + 180 * 5),
+  { layer: "Call", preset: "flash", at: beat(STEP[4]), params: { duration: 400, ease: ease.hold } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 400, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Runners figure", at: CLICK1 + 100, duration: 900, tick: 60, counter: { from: 4, to: 64 } }
+];
+var swaps = [captionSwap(["One shard holds everyone.", "Bump runners to 64.", "Shards rebalance by timing.", "One line in ci.yml."], 0, S.duration - 30, { stagger: 60, in: 200, out: 160, rise: 0 })];
+var style_terminal_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-terminal-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 15-second feature demo in the terminal look: a pointer works a terminal dashboard step by step while the view cuts in to each click. A runners field ticks from 4 to 64, shard bars step down and an estimate rolls from 14:08 to 00:52, the change lands as a red and green diff, and a folded JSON response opens a line at a time. Step bar, burned-in captions and music, 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "terminal", "monospace", "cli", "tui", "developer tools", "demo", "feature", "cursor", "zoom", "counter", "diff", "json", "captions", "music", "audio", "reel", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    termBrand(k, {});
+    const term = mono(k, "Term 22", SIZE, { lead: LH / SIZE });
+    mono(k, "Brand 30", 30, { weight: 700, lead: 1.2 });
+    mono(k, "Label 22", 22, { weight: 500, lead: 1.4 });
+    mono(k, "Hook 66", 66, { weight: 800, lead: 1.15, spacing: -2 });
+    mono(k, "Hook 52", 52, { weight: 800, lead: 1.15, spacing: -1.5 });
+    mono(k, "Caption 34", 34, { weight: 600, lead: 1.35 });
+    mono(k, "Button 30", 30, { weight: 700, lead: 1.3 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `$ ${SHARD.install}`, pad: [16, 26], radius: 4 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 16 });
+    ground(k, sheet, 1080, 1920, { cw: 18, lh: 36 });
+    minimap(k, sheet, { x: 140, y: 1476, width: 800, rows: 16, seed: 23, scroll: { duration: S.duration, every: beat(1) } });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 30, style: "Brand 30" });
+    const tag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 12, bottom: 4, left: 12 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Feature tag" });
+    k.text(tag, "shard top --rebalance", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Feature words" });
+    k.text(sheet, "Slow shard?\nSplit it live.", { style: "Hook 66", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { width: W.w, height: W.h, clip: true, radius: 6, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W.w, height: W.h }, { name: "Camera" });
+    const t = termWindow(k, cam, { w: W.w, h: W.h, left: "shard top", right: "run 7Hq2 \xB7 main", style: "Label 22", absolute: { x: 0, y: 0 }, shadow: false, pad: 24, gap: 12 });
+    const inner = W.w - 48;
+    const head = k.stack(t.body, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", height: 44, name: "Head" });
+    const field = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 10, name: "Field" });
+    k.text(field, "runners", { style: term, color: "cardMuted", autoWidth: true, name: "Field label" });
+    const box = k.stack(field, { direction: "HORIZONTAL", width: Math.round(CW * 5), height: 40, align: "CENTER", justify: "CENTER", stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Field box" });
+    k.text(box, "64", { style: term, color: "amber", width: Math.round(CW * 3), align: "CENTER", name: "Runners figure" });
+    k.rect(field, 4, 40, "primary", { name: "Field ring" });
+    const est = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: "Estimate" });
+    k.text(est, "est ", { style: term, color: "cardMuted", autoWidth: true, name: "Estimate label" });
+    const clock = k.text(est, "00:52", { style: term, color: "green", width: Math.ceil(CW * 5), name: "Estimate figure" });
+    const rows = k.stack(t.body, { gap: 0, name: "Shards" });
+    const barFills = [], times = [];
+    const shardRow = (n, time, frac, name) => {
+      const row = k.stack(rows, { direction: "HORIZONTAL", align: "CENTER", gap: Math.round(CW), height: LH, name });
+      k.text(row, `shard ${n}`, { style: term, color: "cardMuted", autoWidth: true, name: "Shard label" });
+      const track = k.stack(row, { width: BAR, height: 14, fill: "line", name: "Shard track" });
+      const fill = k.rect(track, Math.round(BAR * frac), 14, "green", { name: "Shard bar" });
+      const tx = k.text(row, time, { style: term, color: "amber", width: Math.ceil(CW * 5), name: "Shard time" });
+      return { fill, tx };
+    };
+    for (const [n, from, to2, frac] of SHARDS) {
+      const r = shardRow(n, to2, frac, "Shard");
+      barFills.push({ id: r.fill, ratio: 0.97 / frac });
+      times.push({ id: r.tx, from, to: to2 });
+    }
+    shardRow("05", "0:51", 0.24, "New shard");
+    shardRow("06", "0:52", 0.245, "New shard");
+    termLine(k, rows, [{ t: "+ 58 more shards, all under 0:53", c: "cardMuted" }], { style: term, name: "More line", height: LH });
+    const diff = tuiBox(k, t.body, { w: inner, h: 108, label: "ci.yml", labelWidth: Math.round(CW * 6), style: term, pad: 18, inset: 2 });
+    termLine(k, diff.body, [{ t: "-   runners: 4", c: "red" }], { style: term, name: "Diff del" });
+    termLine(k, diff.body, [{ t: "+   runners: 64", c: "green" }], { style: term, name: "Diff add" });
+    const json = tuiBox(k, t.body, { w: inner, h: 252, label: `GET /v1/runs/run_7Hq2`, labelWidth: Math.round(CW * 21), style: term, pad: 18, inset: 2 });
+    const open = k.text(json.body, "{", { style: term, color: "onCard", name: "Json open" });
+    for (const [key, value, c] of JSON_LINES) termLine(k, json.body, [{ t: key, c: "cyan" }, { t: value, c }, { t: ",", c: "cardMuted" }], { style: term, name: "Json line" });
+    const close = k.stack(json.body, { direction: "HORIZONTAL", align: "CENTER", name: "Json close" });
+    k.text(close, "} ", { style: term, color: "onCard", autoWidth: true, name: "Json brace" });
+    blinking(k, cursor(k, close, SIZE, { name: "Cursor" }), hz(16, S.duration));
+    const p = pointer(k, stage, { ...REST, size: 72, fill: "onCard", edge: "well", ring: "primary" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 8, name: "Steps bar" });
+    for (let i = 1; i <= 3; i++) {
+      const track = k.stack(bars, { height: 8, fill: "line", clip: true, name: "Step track" });
+      k.rect(track, "FILL", 8, "primary", { name: `Step fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "card", ink: "onCard", radius: 4, pad: [16, 24], stroke: { color: "edge", width: 2, align: "INSIDE" } });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: `$ ${SHARD.install}` }, { name: "Call" });
+    k.text(call, "{{brand.site}}", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Site" });
+    scan(k, sheet);
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const S2 = beat(STEP[1]) + 200;
+    for (const b of barFills) {
+      k.patch(b.id, { anchorX: 0 });
+      k.animate(b.id, "scaleX", [0, 1, 2, 3, 4].map((i) => ({ t: S2 + i * 160, v: Math.round((b.ratio + (1 - b.ratio) * (i / 4)) * 1e3) / 1e3, ...i < 4 ? { ease: ease.hold } : {} })));
+    }
+    for (const x of times) steps(k, x.id, [[0, x.from], [S2 + 640, x.to]]);
+    steps(k, clock, [[0, "14:08"], ...clockFrames(S2, 900, 848, 52, 14)]);
+    steps(k, open, [[0, "{ ... 5 keys }"], [CLICK2 + 120, "{"]]);
+    camera(k, cam, W.w, W.h, SHOTS);
+    const to = (i, s) => {
+      const at = seenAt(W.w, W.h, SHOTS[s], TARGETS[i]);
+      return { dx: at.x - REST.x, dy: at.y - REST.y };
+    };
+    glide(k, p, [
+      { t: beat(STEP[0]), dx: 0, dy: 0 },
+      { t: CLICK1 - 150, ...to(0, 0) },
+      { t: beat(STEP[1]), ...to(0, 0) },
+      { t: beat(STEP[1]) + 400, dx: 0, dy: 0 },
+      { t: beat(STEP[3]), dx: 0, dy: 0 },
+      { t: CLICK2 - 150, ...to(1, 3) },
+      { t: beat(STEP[4]), ...to(1, 3) },
+      { t: beat(STEP[4]) + 400, dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [CLICK1, CLICK2]);
+    k.variants(sheet, [...reelCuts({ post: 36, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 12, counterAxisSpacing: 12, padding: { top: 30, right: 140, bottom: 30, left: 140 } });
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        hide(kit, id, ["Brand row", "Minimap", "Steps bar"]);
+        restyle(kit, id, "Hook", "Hook 52");
+        for (const n of kit.named(id, "Hook")) kit.patch(n, { characters: "Slow shard? Split it live." });
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      const scale = Math.min(right.width / W.w, (right.height - 30) / W.h), x = right.x + Math.round((right.width - W.w * scale) / 2), y = right.y + Math.round((right.height - 30 - W.h * scale) / 2);
+      fitGround(kit, id, { cw: 18, lh: 36 });
+      float(kit, id, "Stage", x, y, { scale });
+      float(kit, id, "Steps bar", x, y + Math.round(W.h * scale) + 22, { width: Math.round(W.w * scale) });
+      hide(kit, id, ["Minimap"]);
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_terminal_feature_demo_default
+};

package/dist/chunks/chunk-TFWI3EXL.js

@@ -0,0 +1,86 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  blindsWindow,
+  castLight,
+  noirBrand,
+  stamp
+} from "./chunk-IWDKPSQY.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-6EL7PK63.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/noir-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4800;
+var cues = [
+  { layer: "Figure", preset: "pulse", at: 900, params: { duration: 900, amount: 0.04 } },
+  { layer: "Stamp", preset: "pulse", at: 2e3, params: { duration: 700, amount: 0.08 } },
+  { layer: "Button", preset: "pulse", at: 3100, params: { duration: 800, amount: 0.06 } }
+];
+var noir_header_default = defineTemplate({
+  id: "email-noir-header",
+  meta: {
+    name: "Noir email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a weekly report or digest email, as a film-noir case file: the recovered figure, the account of the week and the button are all on the first frame (for Outlook), then rain runs down a window behind venetian blinds and the figure swells \u2014 a seamless 4.8-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "noir", "film noir", "detective", "rain", "report", "digest", "saas", "serif"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["report", "newsletter", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Noir email header", HEADER);
+    k.quantizeGeometry = true;
+    noirBrand(k);
+    k.textStyle("Eyebrow 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Figure 46", { ...SERIF, size: 46, fontWeight: 900, letterSpacing: -1.6, lineHeight: 46 });
+    k.textStyle("Account 15", { ...SERIF, size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Stamp 13", { size: 13, fontWeight: 900, letterSpacing: 1.5, lineHeight: 16, textCase: "UPPER" });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Open this week\u2019s file", pad: [9, 20], radius: 3 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 10, { top: 28, right: 268, bottom: 28, left: 32 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    castLight(k, sheet, 600, 300, { bars: 7, opacity: 0.08, rise: 70 });
+    const win = blindsWindow(k, sheet, 216, 244, { absolute: { x: 356, y: 28 }, rate: 200, slats: 9, figure: 0.74 });
+    stamp(k, win, "3 leaks found", { style: "Stamp 13", solid: true, turn: -7, pad: [3, 8], absolute: { x: 12, y: 150 } });
+    k.text(sheet, "The weekly case report \xB7 no. 31", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "$8,410 recovered", { style: "Figure 46", color: "text", name: "Figure" });
+    k.text(sheet, "Three leaks found, two closed, one suspect still at large. The evidence is inside.", { style: "Account 15", color: "onPaper", name: "Account" });
+    k.stack(sheet, { height: 2, name: "Gap" });
+    k.instance(sheet, "Button pill", { Label: "Open this week\u2019s file" }, { name: "Button" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  noir_header_default
+};