@popcraft/kit 0.27.0 → 0.28.0

package/dist/chunks/chunk-WBZ6O2YF.js

@@ -0,0 +1,185 @@
+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 {
+  finishTemplate,
+  timelineFacets,
+  withShowDefaults
+} from "./chunk-D53OL26O.js";
+import {
+  templateFromDocument
+} from "./chunk-HP3PE2Z5.js";
+import {
+  deriveLibraryMotion,
+  motionFacets
+} from "./chunk-BPWCDUIR.js";
+import {
+  applyLibrary,
+  buildLibraryPayload,
+  libraryPrefix,
+  namespacePayload,
+  rewriteIds,
+  subtree
+} from "./chunk-2VVK55LY.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/build.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+import { createHash } from "crypto";
+var defineTemplate = (s) => s;
+var officialId = (id) => `popcraft.${id}`;
+var UUID = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g;
+function stableUuid(seed, n) {
+  const h = createHash("sha256").update(`${seed}#${n}`).digest("hex");
+  return `${h.slice(0, 8)}-${h.slice(8, 12)}-4${h.slice(13, 16)}-${"89ab"[parseInt(h[16], 16) % 4]}${h.slice(17, 20)}-${h.slice(20, 32)}`;
+}
+function withStableIds(value, seed) {
+  const map = /* @__PURE__ */ new Map();
+  return JSON.parse(JSON.stringify(value).replace(UUID, (m) => {
+    let v = map.get(m);
+    if (!v) {
+      v = stableUuid(seed, map.size);
+      map.set(m, v);
+    }
+    return v;
+  }));
+}
+var stableIds = (t) => withStableIds(t, t.meta.id);
+var day = (iso) => {
+  const ms = Date.parse(`${iso}T00:00:00.000Z`);
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso) || Number.isNaN(ms)) throw new Error(`"${iso}" is not a YYYY-MM-DD date`);
+  return ms;
+};
+function buildSource(src, o) {
+  const m = src.meta;
+  const id = o.official ? officialId(src.id) : src.id;
+  const motion = src.motion;
+  const finished = finishTemplate(src.build(), { id, name: m.name, description: m.description, category: m.category, tags: m.tags, platforms: m.platforms, formats: m.formats, useCases: m.useCases, ...o.official ? { source: "builtin", license: "popcraft" } : {} }, { sequence: src.sequence, breakpoints: !!src.breakpoints, playsCues: !!motion && "cues" in motion, inScenes: !!motion && "scenes" in motion });
+  const t = {
+    meta: {
+      ...finished.meta,
+      ...o.official && m.featured ? { featured: m.featured } : {},
+      ...o.official && m.pinned ? { pinned: true } : {},
+      ...m.aliases?.length ? { aliases: o.official ? m.aliases.map(officialId) : m.aliases } : {},
+      createdAt: day(m.created),
+      updatedAt: day(m.updated)
+    },
+    payload: finished.payload
+  };
+  const stable = stableIds(t);
+  return src.stableNumbers ? stableNumbers(stable) : stable;
+}
+var buildTemplate = (src) => buildSource(src, { official: true });
+function stableNumbers(value) {
+  return JSON.parse(JSON.stringify(value, (_k, v) => typeof v === "number" && Number.isFinite(v) && !Number.isInteger(v) ? Math.round(v * 1e6) / 1e6 + 0 : typeof v === "number" && Object.is(v, -0) ? 0 : v));
+}
+var withShowDefaults2 = (doc, src) => withShowDefaults(doc, !!src.motion && "cues" in src.motion, !!src.motion && "scenes" in src.motion);
+var SHOW_ONLY = /* @__PURE__ */ new Set(["show", "showAdvance", "showLoop", "advance"]);
+var pictured = (t) => JSON.stringify(withoutThumbnails(t).payload, (k, v) => SHOW_ONLY.has(k) ? void 0 : v);
+function withoutThumbnails(t) {
+  const { thumbnail: _thumb, ...meta } = t.meta;
+  void _thumb;
+  return { meta, payload: { ...t.payload, variants: t.payload.variants.map(({ thumbnail: _t, ...v }) => {
+    void _t;
+    return v;
+  }) } };
+}
+function withThumbnails(built, committed) {
+  if (!committed || pictured(committed) !== pictured(built)) return withoutThumbnails(built);
+  const byVariant = new Map(committed.payload.variants.map((v) => [v.sizeId, v.thumbnail]));
+  const { thumbnail: _own, ...meta } = built.meta;
+  void _own;
+  return {
+    meta: { ...meta, ...committed.meta.thumbnail ? { thumbnail: committed.meta.thumbnail } : {} },
+    payload: { ...built.payload, variants: built.payload.variants.map(({ thumbnail: _t, ...v }) => {
+      void _t;
+      const th = byVariant.get(v.sizeId);
+      return th ? { ...v, thumbnail: th } : v;
+    }) }
+  };
+}
+var indexRow = (t) => ({
+  id: t.meta.id,
+  name: t.meta.name,
+  kind: t.meta.kind,
+  category: t.meta.category,
+  ...t.meta.animated ? { animated: true } : {},
+  ...t.meta.aliases?.length ? { aliases: t.meta.aliases } : {},
+  bytes: JSON.stringify(withoutThumbnails(t)).length
+});
+var indexOf = (all) => all.map(indexRow).sort((a, b) => a.id.localeCompare(b.id));
+var defineLibrary = (s) => s;
+function buildLibrary(src) {
+  const id = officialId(src.id);
+  const doc = src.build();
+  const isComponent = (nid) => ["COMPONENT", "COMPONENT_SET"].includes(doc.nodes[nid]?.type);
+  const componentIds = doc.pages.flatMap((p) => doc.nodes[p].childIds.filter(isComponent));
+  const payload = buildLibraryPayload(doc, { componentIds, styleIds: Object.keys(doc.styles ?? {}), variableIds: Object.keys(doc.variables ?? {}) });
+  const motion = deriveLibraryMotion(payload);
+  const facets = motionFacets(motion.components.length > 0, { category: null, tags: src.meta.tags });
+  const version = src.version;
+  const namespaced = namespacePayload(id, payload);
+  const map = new Map([...Object.keys(payload.components.nodes), ...Object.keys(payload.styles), ...Object.keys(payload.variables), ...Object.keys(payload.variableCollections)].map((k) => [k, libraryPrefix(id) + k]));
+  const kept = doc.pages.filter((p) => !doc.nodes[p].childIds.every(isComponent));
+  const nodes = {};
+  for (const p of kept) subtree(doc.nodes, p, nodes);
+  const drop = (rec) => Object.fromEntries(Object.entries(rec ?? {}).filter(([k]) => !map.has(k)));
+  const docsDoc = {
+    ...doc,
+    pages: kept,
+    nodes: rewriteIds(nodes, map),
+    styles: drop(doc.styles),
+    variables: drop(doc.variables),
+    variableCollections: drop(doc.variableCollections),
+    thumbnailNodeId: doc.thumbnailNodeId ? map.get(doc.thumbnailNodeId) ?? doc.thumbnailNodeId : void 0
+  };
+  const linked = applyLibrary(docsDoc, id, { name: src.meta.name, version, importedAt: day(src.meta.updated) }, namespaced);
+  const captured = templateFromDocument(linked, { id: `${id}.docs`, name: src.meta.name, description: src.meta.description, category: "components", tags: facets.tags, source: "builtin", license: "popcraft" });
+  const docs = { meta: { ...captured.meta, ...timelineFacets(captured), createdAt: day(src.meta.created), updatedAt: day(src.meta.updated) }, payload: captured.payload };
+  const counts = { components: payload.components.rootIds.length, styles: Object.keys(payload.styles).length, variables: Object.keys(payload.variables).length, motion: motion.components.length };
+  const lib = {
+    meta: {
+      id,
+      name: src.meta.name,
+      description: src.meta.description,
+      tags: facets.tags,
+      category: facets.category,
+      version,
+      ...src.meta.aliases?.length ? { aliases: src.meta.aliases.map(officialId) } : {},
+      counts,
+      createdAt: day(src.meta.created),
+      updatedAt: day(src.meta.updated)
+    },
+    payload,
+    motion,
+    docs
+  };
+  return withStableIds(lib, id);
+}
+function withLibraryThumbnails(built, committed) {
+  return { ...built, docs: withThumbnails(built.docs, committed?.docs) };
+}
+var libraryIndexOf = (all) => all.map((l) => ({ id: l.meta.id, name: l.meta.name, version: l.meta.version, ...l.meta.aliases ? { aliases: l.meta.aliases } : {}, counts: l.meta.counts })).sort((a, b) => a.id.localeCompare(b.id));
+
+export {
+  defineTemplate,
+  officialId,
+  withStableIds,
+  buildSource,
+  buildTemplate,
+  stableNumbers,
+  withShowDefaults2 as withShowDefaults,
+  withoutThumbnails,
+  withThumbnails,
+  indexRow,
+  indexOf,
+  defineLibrary,
+  buildLibrary,
+  withLibraryThumbnails,
+  libraryIndexOf
+};

package/dist/chunks/chunk-WCOWVSVF.js

@@ -0,0 +1,340 @@
+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 {
+  scanPaths
+} from "./chunk-BZAXF2QM.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  blackShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-37IU3FCE.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/saas/style-terminal-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SHARD = {
+  name: "Shardline",
+  site: "shardline.example",
+  cli: "shard",
+  version: "1.0",
+  pitch: "Split your test suite across 64 machines. A 14 minute CI run comes back in 52 seconds.",
+  tests: 2418,
+  runners: 64,
+  region: "us-east-2",
+  before: "14m08s",
+  after: "52.3s",
+  saved: "13m16s",
+  install: "npx shard init",
+  run: "shard run --runners 64",
+  /** A month per seat; a year is billed at the second figure a month. */
+  team: 20,
+  teamYear: 16,
+  scale: 60,
+  scaleYear: 48,
+  freeMinutes: "2,000"
+};
+var DARK = {
+  paper: "#090C0A",
+  text: "#E4F1E7",
+  onPaper: "#A9C6B1",
+  primary: "#3BE37D",
+  onPrimary: "#03150A",
+  card: "#0E1310",
+  onCard: "#E4F1E7",
+  cardMuted: "#97B6A0"
+};
+var DARK_SCENERY = { green: "#3BE37D", red: "#FF6F61", cyan: "#5AD6E8", amber: "#FFC753", line: "#1B261F", edge: "#2F4236", well: "#060807", scan: "#000000", ink: "#03150A" };
+var LIGHT = {
+  paper: "#F1EFE6",
+  text: "#121712",
+  onPaper: "#3F4B42",
+  primary: "#0B7A38",
+  onPrimary: "#F2FFF6",
+  card: "#FBFAF5",
+  onCard: "#121712",
+  cardMuted: "#4D5B51"
+};
+var LIGHT_SCENERY = { green: "#0B7A38", red: "#C3352A", cyan: "#0B7787", amber: "#8F5B00", line: "#DCD9CD", edge: "#B5B1A1", well: "#E9E6DA", scan: "#000000", ink: "#F2FFF6" };
+function termBrand(k, fields, o = {}) {
+  k.brand({ ...o.light ? LIGHT : DARK }, { name: SHARD.name, site: SHARD.site, ...fields });
+  k.palette({ ...o.light ? LIGHT_SCENERY : DARK_SCENERY });
+}
+function mono(k, name, size, o = {}) {
+  k.textStyle(name, { ...MONO, size, fontWeight: o.weight ?? 500, lineHeight: Math.round(size * (o.lead ?? 1.5)), letterSpacing: o.spacing ?? 0 });
+  return name;
+}
+var cell = (size) => size * 0.6;
+var gridDots = (w, h, cw, lh) => {
+  const out = [];
+  for (let y = lh; y < h; y += lh) for (let x = cw; x < w; x += cw * 2) out.push(box(Math.round(x), Math.round(y), 2, 2));
+  return out;
+};
+function ground(k, sheet, w, h, o = {}) {
+  k.vector(sheet, w, h, gridDots(w, h, o.cw ?? 24, o.lh ?? 40), k.tint("text", 0.09), { name: "Cell grid", absolute: { x: 0, y: 0 } });
+}
+function scan(k, sheet, opacity = 0.16) {
+  const { width: w, height: h } = k.node(sheet);
+  k.vector(sheet, w, h, scanPaths(w, h), "scan", { name: "Scanlines", opacity, absolute: { x: 0, y: 0 } });
+}
+function fitGround(k, sheet, o = {}) {
+  const { width: w, height: h } = k.node(sheet);
+  for (const id of k.named(sheet, "Cell grid")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: gridDots(w, h, o.cw ?? 24, o.lh ?? 40) });
+  for (const id of k.named(sheet, "Scanlines")) k.patch(id, { x: 0, y: 0, width: w, height: h, paths: scanPaths(w, h) });
+}
+function minimap(k, parent, o) {
+  const cw = o.cw ?? 14, lh = o.lh ?? 28, h = o.rows * lh;
+  const f = k.frame(parent, { x: o.x, y: o.y, width: o.width, height: h }, { name: o.name ?? "Minimap", clip: true });
+  let s = o.seed ?? 7;
+  const r = () => {
+    s = s * 16807 % 2147483647;
+    return s / 2147483647;
+  };
+  const dim = [], lit = [], key = [];
+  const cols = Math.floor(o.width / cw);
+  for (let i = 0; i < o.rows * 2; i++) {
+    let x = Math.floor(r() * 4) * 2;
+    const words = 1 + Math.floor(r() * 5);
+    for (let w = 0; w < words && x < cols - 2; w++) {
+      const len = Math.min(cols - x, 2 + Math.floor(r() * 9));
+      const p = box(x * cw, i * lh + lh * 0.3, len * cw - cw * 0.4, lh * 0.4);
+      (w === 0 ? key : r() > 0.8 ? lit : dim).push(p);
+      x += len + 1;
+    }
+  }
+  k.vector(f, o.width, h * 2, dim, k.tint("text", 0.13), { name: "Code marks", absolute: { x: 0, y: 0 } });
+  k.vector(f, o.width, h * 2, key, k.tint("cyan", 0.32), { name: "Code keys", absolute: { x: 0, y: 0 } });
+  k.vector(f, o.width, h * 2, lit, k.tint("primary", 0.4), { name: "Code lit", absolute: { x: 0, y: 0 } });
+  if (o.scroll) {
+    const steps2 = Math.floor(o.scroll.duration / o.scroll.every);
+    for (const id of k.named(f, "Code marks").concat(k.named(f, "Code keys"), k.named(f, "Code lit"))) {
+      k.animate(id, "translateY", Array.from({ length: steps2 + 1 }, (_, i) => ({ t: i * o.scroll.every, v: -(i % o.rows * lh), ...i < steps2 ? { ease: ease.hold } : {} })));
+    }
+  }
+  return f;
+}
+function tuiBox(k, parent, o) {
+  const wt = o.weight ?? 2, half = wt / 2, inset = o.inset ?? 12;
+  const frame = k.stack(parent, { width: o.w, height: o.h, name: o.name ?? "Box", ...o.absolute ? { absolute: o.absolute } : {} });
+  if (o.fill) k.rect(frame, o.w, o.h, o.fill, { name: "Box ground", absolute: { x: 0, y: 0 } });
+  const top = inset + 6;
+  const lw = o.label ? (o.labelWidth ?? 0) + 24 : 0;
+  const ry = top;
+  const paths = [{ closed: false, points: [
+    { x: inset + 24 + lw, y: ry },
+    { x: o.w - inset - half, y: ry },
+    { x: o.w - inset - half, y: o.h - inset - half },
+    { x: inset + half, y: o.h - inset - half },
+    { x: inset + half, y: ry },
+    { x: inset + 24, y: ry }
+  ] }];
+  k.vector(frame, o.w, o.h, paths, [], { name: "Box line", absolute: { x: 0, y: 0 }, stroke: { color: o.color ?? "edge", width: wt, cap: "NONE", join: "MITER" } });
+  if (o.label) k.text(frame, o.label, { style: o.style, color: o.ink ?? "cardMuted", autoWidth: true, name: "Box label", absolute: { x: inset + 36, y: 0 } });
+  const pad = o.pad ?? 24;
+  const body = k.stack(frame, { width: o.w - inset * 2 - pad * 2, gap: o.gap ?? 0, absolute: { x: inset + pad, y: top + pad }, name: "Box body" });
+  return { frame, body };
+}
+function dashRule(k, parent, w, o = {}) {
+  const cw = o.cw ?? 14;
+  return k.vector(parent, w, o.weight ?? 2, [{ closed: false, points: [{ x: 0, y: (o.weight ?? 2) / 2 }, { x: w, y: (o.weight ?? 2) / 2 }] }], [], { name: o.name ?? "Rule", stroke: { color: o.color ?? "edge", width: o.weight ?? 2, dash: [cw * 0.7, cw * 0.3], cap: "NONE" }, ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function termLine(k, parent, segs, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: o.gap ?? 0, name: o.name ?? "Line", ...o.height ? { height: o.height } : {} });
+  for (const s of segs) {
+    if (s.tag) {
+      const t = k.stack(row, { direction: "HORIZONTAL", width: "HUG", fill: s.c ?? "green", padding: { top: 0, right: 8, bottom: 0, left: 8 }, name: s.name ?? "Tag" });
+      k.text(t, s.t, { style: o.style, color: s.tag, autoWidth: true, name: `${s.name ?? "Tag"} words` });
+    } else if (s.width) k.text(row, s.t, { style: o.style, color: s.c ?? "onCard", width: s.width, name: s.name ?? "Words" });
+    else k.text(row, s.t, { style: o.style, color: s.c ?? "onCard", autoWidth: true, name: s.name ?? "Words" });
+  }
+  return row;
+}
+function promptLine(k, parent, command, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: 0, align: "CENTER", name: o.name ?? "Prompt line" });
+  if (o.dir) k.text(row, `${o.dir} `, { style: o.style, color: "cyan", autoWidth: true, name: "Prompt dir" });
+  k.text(row, "$ ", { style: o.style, color: "green", autoWidth: true, name: "Prompt sign" });
+  const box2 = k.stack(row, { width: o.width, height: Math.round(o.size * 1.5), name: "Command box" });
+  k.text(box2, command, { style: o.style, color: "onCard", width: o.width, name: o.text ?? "Command" });
+  k.rect(box2, Math.round(cell(o.size)), Math.round(o.size * 1.2), "primary", { name: o.caret ?? "Command caret", absolute: { x: 0, y: 0 } });
+  return row;
+}
+function cursor(k, parent, size, o = {}) {
+  return k.rect(parent, Math.round(cell(size)), Math.round(size * 1.2), o.role ?? "primary", { name: o.name ?? "Cursor", ...o.absolute ? { absolute: o.absolute } : {} });
+}
+function blinking(k, id, freq) {
+  k.patch(id, { opacity: 0.5 });
+  k.behave(id, "opacity", [{ kind: "sine", amp: 12, freq }, { kind: "clamp", min: 0, max: 1 }]);
+}
+var SPIN = ["[|]", "[/]", "[-]", "[\\]"];
+function spinner(k, id, from, to, o = {}) {
+  const every = o.every ?? 100, keys = [];
+  if (o.before !== void 0 && from > 0) keys.push({ t: 0, v: o.before, ease: ease.hold });
+  for (let t = from, i = 0; t < to; t += every, i++) keys.push({ t, v: SPIN[i % SPIN.length], ease: ease.hold });
+  k.animate(id, "text.content", [...keys, { t: to, v: o.done ?? "[+]" }]);
+}
+function steps(k, id, values) {
+  k.animate(id, "text.content", values.map(([t, v], i) => i < values.length - 1 ? { t, v, ease: ease.hold } : { t, v }));
+}
+function clockFrames(at, duration, fromS, toS, n) {
+  const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.round(s % 60)).padStart(2, "0")}`;
+  return Array.from({ length: n + 1 }, (_, i) => {
+    const u = i / n, e = 1 - (1 - u) ** 3;
+    return [Math.round(at + duration * u), fmt(Math.round(fromS + (toS - fromS) * e))];
+  });
+}
+function blocks(k, parent, o) {
+  const w = Math.round(o.cells * o.cw);
+  const bar = k.stack(parent, { width: w, height: o.h, name: o.name ?? "Bar" });
+  const dots = [];
+  for (let y = 2; y < o.h - 1; y += 4) for (let x = 1; x < w; x += 4) dots.push(box(x, y, 2, 2));
+  k.vector(bar, w, o.h, dots, k.tint("cardMuted", 0.45), { name: "Bar track", absolute: { x: 0, y: 0 } });
+  for (let i = 0; i < o.cells; i++) k.rect(bar, Math.ceil(o.cw), o.h, o.role ?? "green", { name: "Block", absolute: { x: Math.round(i * o.cw), y: 0 } });
+  return bar;
+}
+function runnerGrid(k, parent, o) {
+  const rows = Math.ceil(o.n / o.cols), w = o.cols * (o.size + o.gap) - o.gap, h = rows * (o.size + o.gap) - o.gap;
+  const f = k.stack(parent, { width: w, height: h, name: o.name ?? "Runners" });
+  const cells = [];
+  for (let i = 0; i < o.n; i++) cells.push(box(i % o.cols * (o.size + o.gap), Math.floor(i / o.cols) * (o.size + o.gap), o.size, o.size));
+  k.vector(f, w, h, cells, "line", { name: "Runner slots", absolute: { x: 0, y: 0 } });
+  const order = Array.from({ length: o.n }, (_, i) => i);
+  let s = o.seed ?? 11;
+  for (let i = order.length - 1; i > 0; i--) {
+    s = s * 16807 % 2147483647;
+    const j = s % (i + 1);
+    [order[i], order[j]] = [order[j], order[i]];
+  }
+  for (const i of order) k.rect(f, o.size, o.size, "green", { name: "Runner", absolute: { x: i % o.cols * (o.size + o.gap), y: Math.floor(i / o.cols) * (o.size + o.gap) } });
+  return f;
+}
+var lift = (y = 30, blur = 80, a = 0.6) => blackShadow(a, y, blur);
+function termWindow(k, parent, o) {
+  const bar = o.bar ?? 52, pad = o.pad ?? 28;
+  const win = k.stack(parent, { width: o.w, height: o.h, fill: "card", radius: 6, clip: true, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: o.name ?? "Terminal", ...o.shadow === false ? {} : { effects: [lift()] }, ...o.absolute ? { absolute: o.absolute } : {} });
+  const top = k.stack(win, { direction: "HORIZONTAL", height: bar, fill: "well", align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 20, bottom: 0, left: 0 }, name: "Title strip" });
+  const tab = k.stack(top, { direction: "HORIZONTAL", width: "HUG", height: bar, fill: "card", align: "CENTER", gap: 12, padding: { top: 0, right: 20, bottom: 0, left: 20 }, name: "Tab" });
+  k.rect(tab, 10, 10, "green", { name: "Tab mark" });
+  k.text(tab, o.left, { style: o.style, color: "onCard", autoWidth: true, name: "Tab title" });
+  if (o.right) k.text(top, o.right, { style: o.style, color: "cardMuted", autoWidth: true, name: "Shell" });
+  k.rect(win, "FILL", 2, "edge", { name: "Title rule" });
+  const body = k.stack(win, { height: o.h - bar - 2, padding: pad, gap: o.gap ?? 0, clip: true, name: "Session" });
+  return { win, body, bar };
+}
+function lockup(k, parent, o) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(o.size * 0.45), align: "CENTER", name: o.name ?? "Lockup" });
+  const tile = k.stack(row, { width: "HUG", fill: "primary", radius: 2, padding: Math.round(o.size * 0.18), name: "Logo tile" });
+  k.logo(tile, o.size, o.size);
+  const words = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 4, align: "CENTER", name: "Brand words" });
+  k.text(words, "{{brand.name}}", { style: o.style, color: o.ink ?? "text", autoWidth: true, name: "Brand name" });
+  if (o.cursor !== false) k.rect(words, Math.round(o.size * 0.42), Math.round(o.size * 0.72), "primary", { name: "Brand cursor" });
+  return row;
+}
+var M = (size, weight, lead, spacing = 0) => ({ ...MONO, size, fontWeight: weight, lineHeight: Math.round(size * lead), letterSpacing: spacing });
+var WEB_TYPE = {
+  "Nav 15": M(15, 500, 1.5),
+  "Brand 18": M(18, 700, 1.4),
+  "Button 15": M(15, 700, 1.5),
+  "Label 13": M(13, 500, 1.5, 0.5),
+  "Term 15": M(15, 500, 1.6),
+  "Term 13": M(13, 500, 1.6),
+  "Display 60": M(60, 800, 1.1, -2.4),
+  "Display 50": M(50, 800, 1.1, -2),
+  "Display 40": M(40, 800, 1.12, -1.4),
+  "Display 32": M(32, 800, 1.15, -1),
+  "Section 36": M(36, 700, 1.2, -1),
+  "Section 30": M(30, 700, 1.2, -0.8),
+  "Section 24": M(24, 700, 1.25, -0.5),
+  "Lead 18": M(18, 400, 1.6),
+  "Lead 16": M(16, 400, 1.6),
+  "Body 15": M(15, 400, 1.6),
+  "Small 13": M(13, 400, 1.6),
+  "Figure 64": M(64, 800, 1.05, -2),
+  "Figure 44": M(44, 800, 1.05, -1.4),
+  "Quote 24": M(24, 500, 1.5, -0.3),
+  "Quote 18": M(18, 500, 1.5),
+  "Price 40": M(40, 800, 1.1, -1.2),
+  "Price 32": M(32, 800, 1.1, -1)
+};
+var WEB_STEPS = {
+  "Display 60": { laptop: "Display 50", tablet: "Display 50", mobile: "Display 32" },
+  "Section 36": { tablet: "Section 30", mobile: "Section 24" },
+  "Lead 18": { mobile: "Lead 16" },
+  "Figure 64": { mobile: "Figure 44" },
+  "Quote 24": { mobile: "Quote 18" },
+  "Price 40": { mobile: "Price 32" }
+};
+function sectionHead(k, parent, o) {
+  const head = k.stack(parent, { gap: 14, name: o.name });
+  k.text(head, `## ${o.label}`, { style: o.s("Label 13"), color: "onPaper", name: `${o.name} label` });
+  k.text(head, o.title, { style: o.s(o.titleStyle ?? "Section 36"), color: "text", name: `${o.name} title` });
+  if (o.body) k.text(head, o.body, { style: o.s("Body 15"), color: "onPaper", name: `${o.name} body` });
+  return head;
+}
+function marquee(k, parent, o) {
+  const period = o.names.length * o.item;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", height: o.height, clip: true, name: o.name ?? "Marquee" });
+  const n = Math.floor(o.duration / o.every);
+  o.names.forEach((label, i) => {
+    const cellId = k.stack(strip, { direction: "HORIZONTAL", width: o.item, height: o.height, align: "CENTER", absolute: { x: 0, y: 0 }, name: "Wordmark" });
+    k.text(cellId, `[ ${label} ]`, { style: o.style, color: "onPaper", autoWidth: true, name: "Wordmark name" });
+    const at = (j) => {
+      const raw = i * o.item - j * o.step;
+      return ((raw + o.item) % period + period) % period - o.item;
+    };
+    k.patch(cellId, { translateX: at(0) });
+    k.animate(cellId, "translateX", Array.from({ length: n + 1 }, (_, j) => ({ t: j * o.every, v: at(j), ...j < n ? { ease: ease.hold } : {} })));
+  });
+  return strip;
+}
+function panel(k, parent, o) {
+  const p = k.stack(parent, { width: o.width ?? "FILL", fill: "card", stroke: { color: "edge", width: 2, align: "INSIDE" }, radius: 4, clip: true, name: o.name });
+  const head = k.stack(p, { direction: "HORIZONTAL", fill: "well", align: "CENTER", gap: 10, padding: { top: 8, right: 16, bottom: 8, left: 16 }, name: "Panel head" });
+  k.rect(head, 8, 8, "green", { name: "Panel mark" });
+  k.text(head, o.label, { style: o.style, color: "cardMuted", name: "Panel label" });
+  k.rect(p, "FILL", 2, "edge", { name: "Panel rule" });
+  const body = k.stack(p, { padding: o.pad ?? 20, gap: o.gap ?? 0, name: "Panel body" });
+  return { panel: p, body };
+}
+
+export {
+  SHARD,
+  termBrand,
+  mono,
+  cell,
+  ground,
+  scan,
+  fitGround,
+  minimap,
+  tuiBox,
+  dashRule,
+  termLine,
+  promptLine,
+  cursor,
+  blinking,
+  SPIN,
+  spinner,
+  steps,
+  clockFrames,
+  blocks,
+  runnerGrid,
+  lift,
+  termWindow,
+  lockup,
+  WEB_TYPE,
+  WEB_STEPS,
+  sectionHead,
+  marquee,
+  panel
+};

package/dist/chunks/chunk-WEWXG2CE.js

@@ -0,0 +1,131 @@
+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 {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/hero-animated.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 150 },
+  { layer: "Headline", preset: "rise-in", at: 300, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 450 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 600, stagger: { delay: 100 } },
+  { layer: "Proof", preset: "fade-in", at: 900, params: { duration: 500 } },
+  { layer: "Phone", preset: "scale-in", at: 350, params: { duration: 800 } },
+  { layer: "Pin", preset: "pop-in", at: 1100 },
+  { layer: "Stat card", preset: "slide-in", at: 1300, params: { direction: "right" }, stagger: { delay: 200 } },
+  { layer: "Pin", preset: "pulse", at: 2400, params: { amount: 0.15 } }
+];
+var hero_animated_default = defineTemplate({
+  id: "web-hero-animated",
+  meta: {
+    name: "Animated website hero",
+    description: "A website hero that builds itself: the headline and lead rise in, the store buttons follow, the phone scales up and stat cards slide in \u2014 entrance presets at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["animation", "hero", "landing page", "website", "entrance", "app launch", "responsive"],
+    platforms: ["web"],
+    formats: ["page", "banner"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Animated website hero", preset("web-desktop"));
+    k.brand(
+      { paper: "#F3F6F1", text: "#16211B", onPaper: "#4A574F", primary: "#1F6F4A", onPrimary: "#FFFFFF", device: "#18201C", map: "#DCE8D5", water: "#9CC3D5", contour: "#AFC6A5", card: "#FFFFFF", onCard: "#16211B", cardMuted: "#56645B", tint: "#DDEBDD", onTint: "#185A3C", star: "#D99A1E" },
+      { name: "Fieldnote" }
+    );
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Display 72", { size: 72, fontWeight: 800, letterSpacing: -2.4, lineHeight: 76 });
+    k.textStyle("Display 60", { size: 60, fontWeight: 800, letterSpacing: -2, lineHeight: 64 });
+    k.textStyle("Display 48", { size: 48, fontWeight: 800, letterSpacing: -1.4, lineHeight: 52 });
+    k.textStyle("Display 38", { size: 38, fontWeight: 800, letterSpacing: -1, lineHeight: 42 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Proof 15", { size: 15, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Trail 16", { size: 16, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Trail meta 13", { size: 13, fontWeight: 500, lineHeight: 18 });
+    k.textStyle("Stat label 12", { size: 12, fontWeight: 600, letterSpacing: 0.4, lineHeight: 16 });
+    k.textStyle("Stat value 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 26 });
+    buttons(k, { style: "Button 16", pad: [15, 26] });
+    k.component("Badge", { direction: "HORIZONTAL", width: "HUG", fill: "tint", radius: 999, padding: { top: 7, right: 14, bottom: 7, left: 14 }, props: { Label: "New" } }, (id) => {
+      k.propText(id, "Label", { style: "Eyebrow 14", color: "onTint", autoWidth: true });
+    });
+    k.component("Stat card", { width: "HUG", gap: 2, fill: "card", radius: 14, padding: { top: 12, right: 18, bottom: 12, left: 18 }, effects: [{ type: "DROP_SHADOW", color: k.color("text", 0.14), offset: { x: 0, y: 12 }, blur: 30, spread: 0, visible: true }], props: { Label: "Elevation", Value: "+640 m" } }, (id) => {
+      k.propText(id, "Label", { style: "Stat label 12", color: "cardMuted", autoWidth: true });
+      k.propText(id, "Value", { style: "Stat value 20", color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 40, top: 32 });
+    k.timeline(sheet, { duration: 4e3, fps: 30 });
+    nav(k, sheet, { links: ["Maps", "Trails", "Safety", "Pricing"], cta: "Get the app", style: "Nav 16", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", padding: { top: 40, right: 0, bottom: 40, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.instance(copy, "Badge", { Label: "New \xB7 Offline maps for 42 national parks" }, { name: "Eyebrow" });
+    k.text(copy, "Every trail, even where the signal ends.", { style: "Display 72", color: "text", name: "Headline" });
+    k.text(copy, "Download a park before you go and Fieldnote keeps your route, your pace and the way back on your phone \u2014 no bars needed. Share your plan with someone at home in one tap.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Download for iPhone" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Get it on Android" }, { name: "CTA quiet" });
+    const proof = k.stack(copy, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Proof" });
+    const stars = k.stack(proof, { direction: "HORIZONTAL", width: "HUG", gap: 2, name: "Stars" });
+    for (let i = 0; i < 5; i++) k.star(stars, 16, "star", { name: "Star" });
+    k.text(proof, "4.9 on the App Store \xB7 trusted by 280,000 hikers", { style: "Proof 15", color: "onPaper", name: "Rating" });
+    const visual = k.stack(hero, { width: "HUG", name: "Visual" });
+    const phone = k.stack(visual, { width: 300, height: 600, radius: 46, fill: "device", padding: 12, name: "Phone" });
+    const screen = k.stack(phone, { height: "FILL", radius: 36, fill: "map", clip: true, justify: "MAX", padding: 14, name: "Screen" });
+    k.ellipse(screen, 220, "water", { name: "Lake", absolute: { x: 120, y: 60 } });
+    for (const [i, [x, y, d]] of [[-60, 200, 300], [-20, 240, 220], [20, 280, 140], [150, 320, 260]].entries()) k.ellipse(screen, d, [], { name: `Contour ${i + 1}`, stroke: { color: "contour", width: 2 }, absolute: { x, y } });
+    k.ellipse(screen, 22, "primary", { name: "Pin", stroke: { color: "card", width: 4 }, absolute: { x: 118, y: 230 } });
+    const trail = k.stack(screen, { gap: 4, fill: "card", radius: 16, padding: 16, name: "Trail card" });
+    k.text(trail, "Eagle Lake Loop", { style: "Trail 16", color: "onCard", name: "Trail name" });
+    k.text(trail, "12.4 km \xB7 3 h 10 min \xB7 saved offline", { style: "Trail meta 13", color: "cardMuted", name: "Trail meta" });
+    k.instance(visual, "Stat card", { Label: "ELEVATION GAIN", Value: "+640 m" }, { name: "Stat card", absolute: { x: -110, y: 140 } });
+    k.instance(visual, "Stat card", { Label: "MAPS ON THIS PHONE", Value: "3 parks" }, { name: "Stat card", absolute: { x: 200, y: 400 } });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero"],
+      restyle: { "Display 72": { laptop: "Display 60", tablet: "Display 48", mobile: "Display 38" }, "Lead 20": { mobile: "Lead 17" } },
+      hide: { mobile: ["Nav links"] },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 56 });
+        if (size === "tablet" || size === "mobile") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48, counterAxisAlignItems: "CENTER", padding: { top: 16, right: 0, bottom: 16, left: 0 } });
+        if (size === "mobile") {
+          const [a, b] = kit.named(id, "Stat card");
+          kit.patch(a, { x: -8 });
+          kit.patch(b, { x: 150 });
+        }
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "HUG" });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  hero_animated_default
+};