@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-E4IXK2AC.js

@@ -1,287 +0,0 @@
-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,
-  chip,
-  code,
-  display,
-  figure,
-  fitAurora,
-  float as float2,
-  glassBrand,
-  glassButton,
-  glassFx,
-  label,
-  pane,
-  paneArt,
-  passThrough,
-  sheen,
-  surface,
-  swell,
-  ts
-} from "./chunk-BYGL33YQ.js";
-import {
-  camera,
-  float,
-  reelSheet,
-  section,
-  wideCut
-} from "./chunk-24GVH2SQ.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-SJ7465NW.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-ERLSOXU6.js";
-import {
-  board,
-  boxesOf,
-  hide,
-  reboard,
-  restyle
-} from "./chunk-YHBAWSDX.js";
-import {
-  defineTemplate
-} from "./chunk-PMGFSLPU.js";
-import {
-  Kit,
-  preset
-} from "./chunk-OFAIOFJQ.js";
-import {
-  ease
-} from "./chunk-MFBWT2Y7.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/motion/style-glass-feature-demo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("calm", 0, 5);
-var { beat } = S;
-var NAME = "Glass SaaS feature demo";
-var WIN = { w: 800, h: 772 };
-var APP = beat(2);
-var PICK = beat(4);
-var DRAG = beat(7);
-var DRAG_LEN = beat(2);
-var TOGGLE = beat(10);
-var CALL = beat(12);
-var ASK = beat(13);
-var DENY = beat(15);
-var CLOSE = beat(17);
-var STEPS = ["Step 1 of 3 \xB7 pick the agent", "Step 2 of 3 \xB7 set the limit", "Step 3 of 3 \xB7 watch it hold", `New in ${VITRINE.name} ${VITRINE.version}`];
-var AGENTS = ["support-agent", "refund-agent", "ops-agent"];
-var SLIDER = { w: 744, knob: 34, from: 0.8, to: 0.2 };
-var cues = [
-  { layer: "Hook plate", preset: "blur-in", at: 0, params: { duration: 800, amount: 30 } },
-  { layer: "Hook", preset: "words-in", at: 100, params: { duration: 700 } },
-  { layer: "Step line", preset: "fade-in", at: 300, params: { duration: 600 } },
-  { layer: "Depth", preset: "fade-in", at: beat(1), params: { duration: 2400 } },
-  // The glass is up under the hook from the start, so the frame is never only aurora.
-  { layer: "Stage", preset: "blur-in", at: 200, params: { duration: 1400, amount: 40 } },
-  { layer: "App section", preset: "rise-in", at: 600, stagger: { delay: 180, order: "selection" }, params: { duration: 1e3, distance: 24 } },
-  { layer: "Incoming", preset: "rise-in", at: CALL, params: { duration: 1e3, distance: 30 } },
-  { layer: "Ask card", preset: "blur-in", at: ASK, params: { duration: 1200, amount: 30 } },
-  { layer: "Call", preset: "pulse", at: CLOSE + beat(1), params: { duration: 1600, amount: 0.05 } }
-];
-var counts = [
-  { layer: "Limit figure", at: DRAG, duration: DRAG_LEN, counter: { from: 2e3, to: 500, prefix: "$" } },
-  { layer: "Kept figure", at: DENY + 300, duration: beat(2), counter: { from: VITRINE.keptBefore, to: VITRINE.keptAfter, prefix: "$" } }
-];
-var swaps = [captionSwap(["Pick the agent to cap.", "Set its limit per call.", "Over the limit? Ask first.", "Spend panes, live in Vitrine."], 0, S.duration - 30, { stagger: 60, in: 320, out: 240, rise: 14 })];
-var style_glass_feature_demo_default = defineTemplate({
-  id: "motion-saas-style-glass-feature-demo",
-  meta: {
-    name: NAME,
-    description: "A 17-second feature demo in the glass look: a pointer sets a spend limit for an AI agent on a pane of smoked glass over a slowly moving aurora. It picks the agent while the camera eases in, drags the per-call limit as the figure resolves from $2,000 to $500, turns on approval in Slack, then the next $4,800 refund is stopped, an approval request drifts up out of depth and the pointer denies it while the kept figure counts. Step line, travelling highlight, music and burned-in captions. 9:16 with square and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "glass", "glassmorphism", "aurora", "shader", "ai", "security", "agents", "b2b", "feature", "demo", "tutorial", "pointer", "counter", "captions", "music", "audio", "tiktok", "shorts"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "video"],
-    useCases: ["changelog", "education", "announcement"],
-    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;
-    glassBrand(k);
-    ts(k, "Step 24", code(24));
-    ts(k, "Hook 60", display(60));
-    ts(k, "Hook 48", display(48));
-    ts(k, "View 22", label(22));
-    ts(k, "Label 21", label(21));
-    ts(k, "Agent 22", code(22, 500));
-    ts(k, "Ui 23", body(23, 500));
-    ts(k, "Ui 21", body(21, 400));
-    ts(k, "Tool 22", code(22));
-    ts(k, "Verdict 22", code(22, 600));
-    ts(k, "Figure 64", figure(64));
-    ts(k, "Figure 32", figure(32));
-    ts(k, "Small btn 22", display(22));
-    ts(k, "Caption 34", display(34, { lead: 1.3 }));
-    ts(k, "Button 30", display(30));
-    glassButton(k, "Call", { style: "Button 30", label: "Try Spend panes free", pad: [22, 36] });
-    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 12, justify: "SPACE_BETWEEN" });
-    const sky = aurora(k, sheet, { duration: S.duration });
-    swell(k, sky, CALL, 1400, 4e3);
-    const depth = board(k, sheet, PANE_ART.w, PANE_ART.h, 1.05, "Depth", { absolute: { x: 36, y: 1440 } });
-    passThrough(k, paneArt(k, depth, { name: "Pane art" }), CALL - 1200, { travel: 2100 });
-    float2(k, k.node(depth).parentId, S.duration, { amp: 7, phase: 0.1 });
-    const hookPlate = pane(k, sheet, { gap: 12, padding: { top: 30, right: 40, bottom: 34, left: 40 }, name: "Hook plate" });
-    const stepLine = k.text(hookPlate, STEPS[3], { style: "Step 24", color: "stop", name: "Step line" });
-    k.text(hookPlate, "Cap what any agent can spend.", { style: "Hook 60", color: "onGlass", name: "Hook" });
-    sheen(k, hookPlate, WIN.w, 220, [CLOSE]);
-    const stage = k.stack(sheet, { width: WIN.w, height: WIN.h, clip: true, radius: 30, name: "Stage" });
-    const lens = k.frame(stage, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Lens" });
-    const cam = k.frame(lens, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Camera" });
-    const win = pane(k, cam, { width: WIN.w, height: WIN.h, radius: 30, absolute: { x: 0, y: 0 }, name: "App" });
-    const top = k.stack(win, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 20, right: 28, bottom: 20, left: 28 }, name: "Title row" });
-    const tl = k.stack(top, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 12, name: "Title left" });
-    k.ellipse(tl, 12, "stop", { name: "Pane dot" });
-    k.text(tl, "Spend pane", { style: "View 22", color: "onGlass", autoWidth: true, name: "View title" });
-    k.text(top, "Panes \u203A Spend", { style: "View 22", color: "glassMuted", autoWidth: true, name: "View path" });
-    k.rect(win, "FILL", 1, k.tint("rim", 0.14), { name: "Title rule" });
-    const bodyCol = k.stack(win, { gap: 22, padding: { top: 22, right: 28, bottom: 24, left: 28 }, name: "App body" });
-    const a = k.stack(bodyCol, { gap: 10, name: "App section" });
-    k.text(a, "AGENT", { style: "Label 21", color: "glassMuted", name: "Section label" });
-    const agents = k.stack(a, { direction: "HORIZONTAL", gap: 12, name: "Agents" });
-    for (const name of AGENTS) {
-      const c2 = chip(k, agents, name, { style: "Agent 22", name: name === "refund-agent" ? "Picked agent" : "Agent chip", pad: [12, 18], radius: 16, alpha: 0.5 });
-      void c2;
-    }
-    const b = k.stack(bodyCol, { gap: 10, name: "App section" });
-    const bHead = k.stack(b, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Limit head" });
-    const bl = k.stack(bHead, { gap: 4, width: "HUG", name: "Limit words" });
-    k.text(bl, "LIMIT PER CALL", { style: "Label 21", color: "glassMuted", autoWidth: true, name: "Section label" });
-    k.text(bl, "Refunds, credits and transfers", { style: "Ui 21", color: "glassMuted", autoWidth: true, name: "Limit scope" });
-    k.text(bHead, "$500", { style: "Figure 64", color: "onGlass", width: 220, align: "RIGHT", name: "Limit figure" });
-    const track = k.stack(b, { height: SLIDER.knob, name: "Slider" });
-    k.rect(track, SLIDER.w, 8, k.tint("rim", 0.16), { name: "Slider track", radius: 4, absolute: { x: 0, y: (SLIDER.knob - 8) / 2 } });
-    const fill = k.rect(track, SLIDER.w, 8, "pass", { name: "Slider fill", radius: 4, absolute: { x: 0, y: (SLIDER.knob - 8) / 2 } });
-    k.patch(fill, { scaleX: SLIDER.to, anchorX: 0 });
-    const knob = k.ellipse(track, SLIDER.knob, "onGlass", { name: "Slider knob", absolute: { x: Math.round(SLIDER.w * SLIDER.to - SLIDER.knob / 2), y: 0 }, effects: [{ type: "DROP_SHADOW", color: k.color("pass", 0.7), offset: { x: 0, y: 0 }, blur: 16, spread: 0, visible: true }] });
-    const ticks = k.stack(b, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Slider ticks" });
-    for (const t of ["$0", "$1,250", "$2,500"]) k.text(ticks, t, { style: "Ui 21", color: "glassMuted", autoWidth: true, name: "Tick" });
-    const c = k.stack(bodyCol, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", name: "App section" });
-    const cw = k.stack(c, { gap: 2, width: "HUG", name: "Toggle words" });
-    k.text(cw, "Ask #payments-ops first", { style: "Ui 23", color: "onGlass", autoWidth: true, name: "Toggle label" });
-    k.text(cw, "Over the limit, the call waits for a person", { style: "Ui 21", color: "glassMuted", autoWidth: true, name: "Toggle note" });
-    const sw = k.stack(c, { width: 76, height: 42, radius: 21, fill: k.tint("rim", 0.16), name: "Toggle" });
-    const swOn = k.rect(sw, 76, 42, "pass", { name: "Toggle on", radius: 21, absolute: { x: 0, y: 0 } });
-    const swKnob = k.ellipse(sw, 34, "onGlass", { name: "Toggle knob", absolute: { x: 38, y: 4 } });
-    k.rect(bodyCol, "FILL", 1, k.tint("rim", 0.14), { name: "Section rule" });
-    const d = k.stack(bodyCol, { gap: 12, name: "Next call" });
-    const inc = k.stack(d, { direction: "HORIZONTAL", align: "CENTER", gap: 14, height: 56, padding: { top: 0, right: 14, bottom: 0, left: 14 }, radius: 14, fill: k.tint("stop", 0.1), name: "Incoming" });
-    k.ellipse(inc, 12, "stop", { name: "Verdict dot" });
-    k.text(inc, `${VITRINE.tool}  ${VITRINE.amount}`, { style: "Tool 22", color: "onGlass", width: "FILL", name: "Call tool" });
-    k.text(inc, "stopped \xB7 Spend", { style: "Verdict 22", color: "stop", autoWidth: true, name: "Incoming verdict" });
-    const ask = pane(k, d, { gap: 14, padding: 20, radius: 22, alpha: 0.72, lift: 1.4, name: "Ask card" });
-    const askTop = k.stack(ask, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Ask top" });
-    k.text(askTop, "#payments-ops \xB7 Vitrine", { style: "Label 21", color: "glassMuted", autoWidth: true, name: "Ask from" });
-    const kept = k.stack(askTop, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Kept" });
-    k.text(kept, "kept this week", { style: "Ui 21", color: "glassMuted", autoWidth: true, name: "Kept label" });
-    k.text(kept, "$61,240", { style: "Figure 32", color: "onGlass", width: 150, align: "RIGHT", name: "Kept figure" });
-    k.text(ask, "refund-agent wants to refund $4,800 to Lumen Outfitters. Your limit is $500 a call.", { style: "Ui 21", color: "onGlass", name: "Ask words" });
-    const btns = k.stack(ask, { direction: "HORIZONTAL", gap: 12, name: "Ask buttons" });
-    const approve = k.stack(btns, { direction: "HORIZONTAL", width: "HUG", radius: 999, padding: { top: 10, right: 20, bottom: 10, left: 20 }, fill: k.tint("rim", 0.12), name: "Approve" });
-    k.text(approve, "Approve once", { style: "Small btn 22", color: "onGlass", autoWidth: true, name: "Approve words" });
-    const deny = k.stack(btns, { direction: "HORIZONTAL", width: "HUG", radius: 999, padding: { top: 10, right: 20, bottom: 10, left: 20 }, fill: "primary", name: "Deny" });
-    k.text(deny, "Deny", { style: "Small btn 22", color: "onPrimary", autoWidth: true, name: "Deny words" });
-    const denied = k.text(btns, "Denied by Mara \xB7 nothing sent", { style: "Ui 21", color: "pass", autoWidth: true, name: "Denied" });
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: k.tint("glass", 0.72), ink: "onGlass", radius: 26, pad: [20, 28], effects: glassFx(k, { lift: 0.6 }) });
-    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Close row" });
-    k.instance(call, "Call", { Label: "Try Spend panes free" }, { name: "Call" });
-    const site = pane(k, call, { width: "HUG", radius: 999, padding: { top: 14, right: 24, bottom: 14, left: 24 }, lift: 0.4, frost: 14, alpha: 0.7, name: "Site plate" });
-    k.text(site, "{{brand.site}}", { style: "Step 24", color: "onGlass", autoWidth: true, name: "Site" });
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    for (const c2 of k.named(cam, "Picked agent")) k.rect(c2, k.node(c2).width, k.node(c2).height, [], { name: "Pick ring", radius: 16, absolute: { x: 0, y: 0 }, stroke: { color: "pass", width: 2.5, align: "INSIDE" } });
-    const at = (name) => {
-      const r = boxesOf(k, cam, [name])[0];
-      return { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2), box: r };
-    };
-    const pick = at("Picked agent"), knobAt = at("Slider knob"), tog = at("Toggle"), den = at("Deny");
-    const sliderBox = at("Slider").box;
-    const fromX = Math.round(sliderBox.x + SLIDER.w * SLIDER.from), toX = Math.round(sliderBox.x + SLIDER.w * SLIDER.to);
-    const REST = { x: 560, y: WIN.h - 60 };
-    const p = pointer(k, cam, { ...REST, size: 64, fill: "onGlass", edge: "glass", ring: "pass" });
-    glide(k, p, [
-      { t: APP + 600, dx: 0, dy: 0 },
-      { t: PICK, dx: pick.x - REST.x + 10, dy: pick.y - REST.y + 6 },
-      { t: DRAG - 300, dx: fromX - REST.x, dy: knobAt.y - REST.y + 4 },
-      { t: DRAG + DRAG_LEN, dx: toX - REST.x, dy: knobAt.y - REST.y + 4 },
-      { t: TOGGLE, dx: tog.x - REST.x + 14, dy: tog.y - REST.y + 6 },
-      { t: DENY, dx: den.x - REST.x + 6, dy: den.y - REST.y + 6 },
-      { t: CLOSE, dx: 0, dy: 0 }
-    ]);
-    clicks(k, p, [PICK, DRAG - 200, TOGGLE, DENY]);
-    k.patch(p.arrow, { opacity: 0 });
-    k.animate(p.arrow, "opacity", [{ t: APP + 400, v: 0, ease: ease.inOut("sine") }, { t: APP + 1e3, v: 1, ease: ease.hold }, { t: CLOSE - 600, v: 1, ease: ease.inOut("sine") }, { t: CLOSE, v: 0 }]);
-    choreograph(k, sheet, { stepLine, hookPlate, stage, fill, knob, swOn, swKnob, denied, approve, deny, sliderX: sliderBox.x });
-    const SHOTS = [
-      // Pushes no further than the window's 26 px inner margin allows, centred across, so no word is cut at a side.
-      { t: PICK - beat(1), duration: 1400, zoom: 1.06, x: WIN.w / 2, y: pick.y + 40 },
-      { t: DRAG - beat(1), duration: 1400, zoom: 1.06, x: WIN.w / 2, y: knobAt.y - 30 },
-      { t: TOGGLE - 600, duration: 1200, zoom: 1.06, x: WIN.w / 2, y: tog.y },
-      { t: CALL - 400, duration: 1600, zoom: 1 }
-    ];
-    camera(k, cam, WIN.w, WIN.h, SHOTS);
-    k.variants(sheet, [
-      { preset: "ig-post", adjust: (kit, id) => {
-        kit.patch(id, { itemSpacing: 14, counterAxisSpacing: 14, padding: { top: 52, right: 140, bottom: 52, left: 140 }, counterAxisAlignItems: "CENTER" });
-        fitAurora(kit, id);
-        hide(kit, id, ["Step line", "Depth stage"]);
-        restyle(kit, id, "Hook", "Hook 48");
-        const s = 0.74;
-        for (const st of kit.named(id, "Stage")) kit.patch(st, { width: Math.round(WIN.w * s), height: Math.round(WIN.h * s) });
-        for (const l of kit.named(id, "Lens")) kit.patch(l, { scaleX: s, scaleY: s, anchorX: 0, anchorY: 0 });
-      } },
-      wideCut(660, (kit, id, right) => {
-        fitAurora(kit, id);
-        kit.patch(id, { primaryAxisAlignItems: "MIN" });
-        for (const d2 of kit.named(id, "Depth stage")) kit.patch(d2, { x: 70, y: 560 });
-        reboard(kit, id, "Depth", 0.74);
-        const s = Math.min(right.width / WIN.w, right.height / WIN.h);
-        float(kit, id, "Stage", right.x + Math.round((right.width - WIN.w * s) / 2), right.y + Math.round((right.height - WIN.h * s) / 2), { scale: s });
-      })
-    ]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-function choreograph(k, sheet, o) {
-  k.animate(o.stepLine, "text.content", [{ t: 0, v: STEPS[0], ease: ease.hold }, { t: DRAG - beat(1), v: STEPS[1], ease: ease.hold }, { t: CALL - beat(1), v: STEPS[2], ease: ease.hold }, { t: CLOSE, v: STEPS[3] }]);
-  surface(k, o.hookPlate, 0, { from: 0.94, duration: 1400 });
-  surface(k, o.stage, APP, { from: 0.9, duration: 1800 });
-  float2(k, o.hookPlate, S.duration, { amp: 4, phase: 0.6 });
-  float2(k, o.stage, S.duration, { amp: 5, phase: 0.3 });
-  for (const id of k.named(sheet, "Pick ring")) k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: PICK, v: 0, ease: ease.out("cubic") }, { t: PICK + 500, v: 1 }]);
-  const dx = SLIDER.w * (SLIDER.from - SLIDER.to);
-  k.animate(o.knob, "translateX", [{ t: DRAG, v: Math.round(dx), ease: ease.out("cubic") }, { t: DRAG + DRAG_LEN, v: 0 }]);
-  k.animate(o.fill, "scaleX", [{ t: DRAG, v: SLIDER.from, ease: ease.out("cubic") }, { t: DRAG + DRAG_LEN, v: SLIDER.to }]);
-  k.animate(o.swOn, "opacity", [{ t: TOGGLE, v: 0, ease: ease.inOut("sine") }, { t: TOGGLE + 500, v: 1 }]);
-  k.animate(o.swKnob, "translateX", [{ t: TOGGLE, v: -34, ease: ease.inOut("sine") }, { t: TOGGLE + 500, v: 0 }]);
-  k.animate(o.approve, "opacity", [{ t: DENY + 200, v: 1, ease: ease.inOut("sine") }, { t: DENY + 900, v: 0.4 }]);
-  k.animate(o.denied, "text.content", [{ t: 0, v: "Waiting for a person\u2026", ease: ease.hold }, { t: DENY + 500, v: "Denied by Mara \xB7 nothing sent" }]);
-  k.animate(o.denied, "opacity", [{ t: DENY + 200, v: 1, ease: ease.inOut("sine") }, { t: DENY + 450, v: 0, ease: ease.hold }, { t: DENY + 500, v: 0, ease: ease.out("cubic") }, { t: DENY + 1300, v: 1 }]);
-  for (const id of k.named(sheet, "Incoming verdict")) k.animate(id, "text.content", [{ t: 0, v: "checking\u2026", ease: ease.hold }, { t: CALL + 900, v: "stopped \xB7 Spend" }]);
-  for (const id of k.named(sheet, "Ask card")) sheen(k, id, WIN.w - 56, 200, [DENY + 600]);
-}
-
-export {
-  style_glass_feature_demo_default
-};

package/dist/chunks/chunk-E4WIVJNU.js

@@ -1,119 +0,0 @@
-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 {
-  logoBadge,
-  pill
-} from "./chunk-LEKU2ZW3.js";
-import {
-  defineTemplate
-} from "./chunk-PMGFSLPU.js";
-import {
-  Kit,
-  preset
-} from "./chunk-OFAIOFJQ.js";
-import {
-  ease
-} from "./chunk-MFBWT2Y7.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/web/coming-soon.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var TILES = [{ name: "Days", from: 21, to: 9, label: "days" }, { name: "Hours", from: 23, to: 14, label: "hours" }, { name: "Minutes", from: 59, to: 32, label: "min" }];
-var counts = [
-  ...TILES.map((t, i) => ({ layer: `${t.name} figure`, at: 900 + i * 100, duration: 1300, counter: { from: t.from, to: t.to }, ease: ease.out("quart") })),
-  { layer: "Seconds figure", at: 2200, duration: 6e3, tick: 1e3, counter: { from: 48, to: 42 } }
-];
-var cues = [
-  { layer: "Nav", preset: "fade-in", at: 0 },
-  { layer: "Badge", preset: "pop-in", at: 200 },
-  { layer: "Headline", preset: "words-in", at: 300, params: { duration: 600, amount: 90 } },
-  { layer: "Lede", preset: "fade-in", at: 900 },
-  { layer: "Tile", preset: "pop-in", at: 800, params: { duration: 500 }, stagger: { delay: 100 } },
-  { layer: "Sign-up", preset: "rise-in", at: 1600 }
-];
-var coming_soon_default = defineTemplate({
-  id: "motion-web-coming-soon",
-  meta: {
-    name: "Coming-soon hero with countdown",
-    description: "The top of a coming-soon page for a bakery\u2019s second shop: the headline arrives word by word, a days-to-seconds countdown ticks and the sign-up row rises \u2014 desktop 1440 with a mobile layout",
-    category: "animation",
-    tags: ["animation", "web", "coming soon", "countdown", "hero", "landing page", "bakery"],
-    platforms: ["web"],
-    formats: ["page", "screen"],
-    useCases: ["countdown", "launch", "announcement"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  motion: { cues, counts },
-  build() {
-    const k = new Kit("Coming-soon hero with countdown", preset("web-desktop"));
-    k.brand(
-      { paper: "#FFF7EE", text: "#2E1F14", onPaper: "#6A5443", primary: "#B4441F", onPrimary: "#FFFFFF", card: "#2E1F14", onCard: "#FFE3C2", field: "#FFFFFF", onField: "#6A5443", badge: "#B4441F" },
-      { name: "Crumb & Co.", headline: "Our second bakery opens on Canal Street", lede: "Sourdough, cardamom buns and the good coffee, a short walk from the station. Be first through the door: we\u2019ll email you the morning we open." }
-    );
-    k.textStyle("Nav 18", { size: 18, fontWeight: 600, lineHeight: 24 });
-    k.textStyle("Brand 22", { size: 22, fontWeight: 800, lineHeight: 28 });
-    k.textStyle("Headline 84", { size: 84, fontWeight: 900, letterSpacing: -3, lineHeight: 88, textAlign: "CENTER" });
-    k.textStyle("Headline 44", { size: 44, fontWeight: 900, letterSpacing: -1, lineHeight: 48, textAlign: "CENTER" });
-    k.textStyle("Lede 22", { size: 22, fontWeight: 500, lineHeight: 32, textAlign: "CENTER" });
-    k.textStyle("Figure 72", { size: 72, fontWeight: 900, letterSpacing: -2, lineHeight: 76, textAlign: "CENTER" });
-    k.textStyle("Figure 40", { size: 40, fontWeight: 900, letterSpacing: -1, lineHeight: 44, textAlign: "CENTER" });
-    k.textStyle("Unit 16", { size: 16, fontWeight: 700, letterSpacing: 2, lineHeight: 20, textAlign: "CENTER", textCase: "UPPER" });
-    k.textStyle("Field 18", { size: 18, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Button 18", { size: 18, fontWeight: 800, lineHeight: 24 });
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 18", label: "Tell me first", pad: [16, 28], radius: 12 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 56, { top: 32, right: 120, bottom: 96, left: 120 }, "paper", "MIN", "CENTER");
-    k.timeline(sheet, { duration: 9e3, fps: 30 });
-    const nav = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Nav" });
-    const brand = k.stack(nav, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Brand" });
-    logoBadge(k, brand, { fill: "badge", size: 28, name: "Logo", pad: 8 });
-    k.text(brand, "{{brand.name}}", { style: "Brand 22", color: "text", name: "Brand name", autoWidth: true });
-    const links = k.stack(nav, { direction: "HORIZONTAL", width: "HUG", gap: 32, name: "Links" });
-    for (const l of ["Our bread", "Visit", "Wholesale"]) k.text(links, l, { style: "Nav 18", color: "onPaper", name: "Link", autoWidth: true });
-    const hero = k.stack(sheet, { width: 1e3, gap: 28, align: "CENTER", padding: { top: 56, right: 0, bottom: 0, left: 0 }, name: "Hero" });
-    k.stack(hero, { width: 120, height: 8, fill: "primary", radius: 4, name: "Badge" });
-    k.text(hero, "{{brand.headline}}", { style: "Headline 84", color: "text", name: "Headline" });
-    k.text(hero, "{{brand.lede}}", { style: "Lede 22", color: "onPaper", name: "Lede", width: 760 });
-    const grid = k.stack(hero, { direction: "HORIZONTAL", gap: 16, width: "HUG", name: "Countdown" });
-    for (const t of [...TILES, { name: "Seconds", from: 48, to: 42, label: "sec" }]) {
-      const tile = k.stack(grid, { width: 168, fill: "card", radius: 20, padding: { top: 20, right: 8, bottom: 18, left: 8 }, gap: 2, align: "CENTER", name: "Tile" });
-      k.text(tile, String(t.to), { style: "Figure 72", color: "onCard", name: `${t.name} figure` });
-      k.text(tile, t.label, { style: "Unit 16", color: "onCard", name: `${t.name} unit` });
-    }
-    const signup = k.stack(hero, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Sign-up" });
-    const field = k.stack(signup, { width: 360, fill: "field", radius: 12, padding: { top: 16, right: 20, bottom: 16, left: 20 }, stroke: { color: "onField", width: 1 }, name: "Email field" });
-    k.text(field, "you@example.com", { style: "Field 18", color: "onField", name: "Placeholder" });
-    k.instance(signup, "Button", { Label: "Tell me first" }, { name: "Submit" });
-    const sheets = [sheet, ...k.variants(sheet, [{
-      preset: "web-mobile",
-      adjust: (kit, id) => {
-        kit.patch(id, { padding: { top: 20, right: 20, bottom: 48, left: 20 }, itemSpacing: 32 });
-        for (const n of kit.named(id, "Links")) kit.patch(n, { visible: false });
-        for (const n of kit.named(id, "Hero")) kit.patch(n, { layoutSizingHorizontal: "FILL", itemSpacing: 20, padding: { top: 24, right: 0, bottom: 0, left: 0 } });
-        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Headline 44");
-        for (const n of kit.named(id, "Lede")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-        for (const n of kit.named(id, "Countdown")) kit.patch(n, { itemSpacing: 8 });
-        for (const n of kit.named(id, "Tile")) kit.patch(n, { width: 78, padding: { top: 12, right: 4, bottom: 10, left: 4 } });
-        for (const t of [...TILES.map((x) => x.name), "Seconds"]) for (const n of kit.named(id, `${t} figure`)) kit.restyle(n, "Figure 40");
-        for (const n of kit.named(id, "Sign-up")) kit.patch(n, { layoutMode: "VERTICAL", layoutSizingHorizontal: "FILL", counterAxisAlignItems: "MIN" });
-        for (const n of kit.named(id, "Email field")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
-      }
-    }])];
-    for (const id of sheets) {
-      k.counts(id, counts);
-      k.cues(id, cues);
-    }
-    return k.finish();
-  }
-});
-
-export {
-  coming_soon_default
-};