@popcraft/kit 0.31.0 → 0.32.1

package/dist/chunks/chunk-V3N4OUHQ.js

@@ -1,122 +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 {
-  CAPS,
-  decoBrand,
-  divider,
-  marquee,
-  stage
-} from "./chunk-VNJBY5WB.js";
-import {
-  SERIF
-} from "./chunk-PFCHOCEN.js";
-import {
-  place
-} from "./chunk-YHBAWSDX.js";
-import {
-  outro,
-  pill,
-  postVariants
-} from "./chunk-LEKU2ZW3.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/social/art-deco-premiere-post.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 7e3;
-var cues = [
-  { layer: "Marquee", preset: "drop-in", at: 0, params: { duration: 600 } },
-  { layer: "Headline", preset: "blur-in", at: 700, params: { duration: 900, amount: 30 } },
-  { layer: "Headline rule", preset: "wipe-in", at: 1300, params: { duration: 700 } },
-  { layer: "Sub", preset: "rise-in", at: 1500, params: { duration: 700 } },
-  { layer: "Chip", preset: "pop-in", at: 2300, params: { duration: 420 } },
-  { layer: "Site", preset: "fade-in", at: 2600, params: { duration: 500 } },
-  { layer: "Marquee", preset: "pulse", at: 3600, params: { duration: 800, amount: 0.03 } },
-  outro(["Marquee", "Headline", "Headline rule", "Sub", "Chip", "Site"], 6300)
-];
-var art_deco_premiere_post_default = defineTemplate({
-  id: "motion-art-deco-premiere-post",
-  meta: {
-    name: "Deco feature premiere post (animated)",
-    description: "A feature announcement as a picture-house premiere: a marquee sign drops in with its bulbs chasing round NOW PLAYING, a brass sunburst opens like a fan behind a skyline of setback towers, and the feature\u2019s name comes into focus across the sky \u2014 a seven-second art deco loop, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "art deco", "deco", "marquee", "now playing", "premiere", "sunburst", "skyscraper", "brass", "emerald", "feature", "changelog", "saas", "finance", "post", "loop"],
-    platforms: ["instagram", "linkedin", "x", "threads"],
-    formats: ["post", "portrait-post", "story"],
-    useCases: ["announcement", "changelog", "launch"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit("Deco feature premiere post (animated)", preset("ig-post"));
-    k.quantizeGeometry = true;
-    decoBrand(k, { feature: "Heirloom" });
-    k.textStyle("Sign 44", { ...CAPS, size: 44, fontWeight: 800, letterSpacing: 10, lineHeight: 50, textAlign: "CENTER" });
-    k.textStyle("Sign small 18", { ...CAPS, size: 18, fontWeight: 700, letterSpacing: 5, lineHeight: 24, textAlign: "CENTER" });
-    k.textStyle("Display 150", { ...CAPS, size: 150, fontWeight: 200, letterSpacing: 8, lineHeight: 156, textAlign: "CENTER" });
-    k.textStyle("Sub 38", { ...SERIF, size: 38, fontStyle: "italic", fontWeight: 500, lineHeight: 48, textAlign: "CENTER" });
-    k.textStyle("Chip 24", { ...CAPS, size: 24, fontWeight: 700, letterSpacing: 2.5, lineHeight: 30 });
-    k.textStyle("Site 24", { size: 24, fontWeight: 600, letterSpacing: 1, lineHeight: 30 });
-    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 24", label: "On every plan from 14 October", pad: [18, 28], radius: 2 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, 64, "paper", "SPACE_BETWEEN", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    stage(k, sheet, 1080, 2400, {
-      base: 1920,
-      hero: 410,
-      span: 800,
-      reach: 1500,
-      loopMs: DURATION,
-      blades: 20,
-      footlights: 40,
-      rims: [1.07, 1.12],
-      grain: false,
-      open: { at: 200, duration: 1400 },
-      rise: { at: 500, gap: 220 },
-      at: { x: 0, y: -840 }
-    });
-    const sign = marquee(k, sheet, 700, 150, { bulb: 13, loopMs: DURATION, cycles: 7 });
-    k.text(sign.plate, "{{brand.name}} presents", { style: "Sign small 18", color: "onCard", name: "Presents" });
-    k.text(sign.plate, "Now playing", { style: "Sign 44", color: "onCard", name: "Now playing" });
-    const mid = k.stack(sheet, { gap: 20, align: "CENTER", padding: { top: 0, right: 0, bottom: 250, left: 0 }, name: "Middle" });
-    k.text(mid, "{{brand.feature}}", { style: "Display 150", color: "text", name: "Headline" });
-    divider(k, mid, { width: 360, name: "Headline rule" });
-    k.text(mid, "Who inherits what, drawn as one family tree: every heir, every asset, every condition.", { style: "Sub 38", color: "text", width: 780, name: "Sub" });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 6, align: "CENTER", justify: "CENTER", name: "Foot" });
-    k.instance(foot, "Chip", { Label: "On every plan from 14 October" }, { name: "Chip" });
-    const stub = k.stack(foot, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 2, padding: { top: 18, right: 24, bottom: 18, left: 24 }, name: "Site" });
-    k.text(stub, "{{brand.site}}", { style: "Site 24", color: "onCard", autoWidth: true, name: "Site words" });
-    k.cues(sheet, cues);
-    k.variants(sheet, postVariants({ portrait: 72 }, {
-      portrait: (kit, id) => {
-        place(kit, id, "Stage", 0, -570, 1);
-        for (const n of kit.named(id, "Middle")) kit.patch(n, { padding: { top: 0, right: 0, bottom: 300, left: 0 } });
-      },
-      vertical: (kit, id) => {
-        place(kit, id, "Stage", -162, -1056, 1.3);
-        for (const n of kit.named(id, "Middle")) kit.patch(n, { padding: { top: 0, right: 0, bottom: 420, left: 0 } });
-        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 6 });
-      }
-    }));
-    return k.finish();
-  }
-});
-
-export {
-  art_deco_premiere_post_default
-};

package/dist/chunks/chunk-V534BI5Q.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-UB2CW3JK.js";
-import {
-  camera,
-  float,
-  reelSheet,
-  section,
-  wideCut
-} from "./chunk-UA7OECXL.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-F3TA2VS2.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-ERLSOXU6.js";
-import {
-  board,
-  boxesOf,
-  hide,
-  reboard,
-  restyle
-} from "./chunk-YHBAWSDX.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  ease
-} from "./chunk-YYQUCS6P.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-V5CPTZAT.js

@@ -1,100 +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 {
-  E,
-  around,
-  lottieTemplate,
-  sparkle
-} from "./chunk-SFLOYGZM.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/lottie/education.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var EDU = { paper: "#F3FAF7", ink: "#123C33", accent: "#FFB020", green: "#1FA37A", soft: "#D9F2E8", white: "#FFFFFF", page: "#FFFDF7", shade: "#E9E4D6" };
-var eduOpenBook = lottieTemplate({
-  slug: "open-book",
-  sector: "education",
-  role: "onboarding",
-  size: "spot",
-  duration: 3e3,
-  loop: true,
-  name: "Open book",
-  description: "An onboarding illustration for a learning app: an open book turns a page while sparkles rise from it \u2014 a three-second seamless loop, 800\xD7600",
-  colors: EDU,
-  useCases: ["onboarding", "education"],
-  tags: ["book", "learning", "reading", "illustration"],
-  build(l) {
-    l.circle(l.sheet, 400, 300, 240, "soft", { name: "Backdrop" });
-    l.shape(l.sheet, [[160, 250], [400, 290], [640, 250], [640, 450], [400, 490], [160, 450]], "green", { name: "Cover" });
-    const lines = (x0, dir) => {
-      for (let i = 0; i < 4; i++) l.rect(l.sheet, dir > 0 ? x0 + 30 : x0 - 30 - 150, 300 + i * 30, 150 - i * 10, 8, "shade", { radius: 4, name: "Text line" });
-    };
-    l.shape(l.sheet, [[180, 240], [400, 276], [400, 470], [180, 434]], "page", { name: "Left page" });
-    l.shape(l.sheet, [[400, 276], [620, 240], [620, 434], [400, 470]], "page", { name: "Right page" });
-    lines(400, -1);
-    lines(400, 1);
-    const leaf = l.box(l.sheet, 400, 240, 220, 230, "Turning page");
-    l.shape(leaf, [[0, 36], [220, 0], [220, 194], [0, 230]], "page", { name: "Leaf" });
-    for (let i = 0; i < 4; i++) l.rect(leaf, 30, 60 + i * 30, 150 - i * 10, 8, "shade", { radius: 4, name: "Leaf line" });
-    const shaded = l.shape(leaf, [[0, 36], [220, 0], [220, 194], [0, 230]], "shade", { name: "Leaf shade", opacity: 0 });
-    l.pivot(leaf, 0, 0.5);
-    l.keys(leaf, "scaleX", [[0, 1, E.hold], [600, 1, E.inOut], [1500, -1, E.hold], [2900, -1, E.hold], [3e3, 1]]);
-    l.opacity(shaded, [[0, 0, E.hold], [600, 0, E.in], [1050, 1, E.out], [1500, 0, E.hold], [3e3, 0]]);
-    l.opacity(leaf, [[0, 1, E.hold], [1500, 1, E.in], [1700, 0, E.hold], [2950, 0, E.hold], [3e3, 1]]);
-    for (const [x, t, r] of [[330, 1300, 16], [460, 1450, 22], [400, 1650, 12]]) {
-      const s = l.shape(l.sheet, sparkle(x, 230, r), "accent", { name: "Sparkle" });
-      l.keys(s, "translateY", [[0, 0, E.hold], [t, 0, E.out], [t + 1e3, -110]]);
-      l.scale(s, [[0, 0, E.hold], [t, 0, E.pop], [t + 300, 1, E.inOut], [t + 1e3, 0.3]]);
-      l.opacity(s, [[0, 0, E.hold], [t, 0, E.out], [t + 150, 1, E.hold], [t + 700, 1, E.in], [t + 1e3, 0]]);
-    }
-  }
-});
-var eduBadge = lottieTemplate({
-  slug: "lesson-badge",
-  sector: "education",
-  role: "success",
-  size: "icon",
-  duration: 1800,
-  loop: false,
-  name: "Lesson complete badge",
-  description: "The reward at the end of a lesson: a medal swings in on its ribbon, its star spins into place and rays burst behind it \u2014 1.8 seconds that rest on the earned badge, 512\xD7512",
-  colors: EDU,
-  useCases: ["education"],
-  tags: ["badge", "achievement", "reward", "gamification"],
-  build(l) {
-    const rays = l.box(l.sheet, 56, 76, 400, 400, "Rays");
-    for (let i = 0; i < 12; i++) {
-      const arm = l.box(rays, 0, 0, 400, 400, "Ray arm");
-      l.k.patch(arm, { rotation: i * 30 });
-      l.line(arm, [[200, 50], [200, 12]], "accent", 12, { name: "Ray" });
-    }
-    l.scale(rays, [[0, 0.6, E.hold], [500, 0.6, E.out], [1100, 1]]);
-    l.opacity(rays, [[0, 0, E.hold], [500, 0, E.out], [700, 1, E.hold], [1100, 1, E.in], [1500, 0]]);
-    l.keys(rays, "rotation", [[0, 0, E.hold], [500, 0, E.out], [1500, 30]]);
-    const medal = l.box(l.sheet, 136, 40, 240, 420, "Medal");
-    l.shape(medal, [[70, 0], [120, 0], [150, 150], [100, 170]], "green", { name: "Ribbon" });
-    l.shape(medal, [[170, 0], [120, 0], [90, 150], [140, 170]], "ink", { name: "Ribbon" });
-    l.circle(medal, 120, 276, 110, "accent", { name: "Medal disc" });
-    l.circle(medal, 120, 276, 84, "white", { name: "Medal face" });
-    const star = l.shape(medal, around(120, 280, 60, 5, 0, 26), "accent", { name: "Star" });
-    l.pivot(medal, 0.5, 0);
-    l.keys(medal, "rotation", [[0, -24, E.out], [500, 10, E.inOut], [850, -4, E.inOut], [1150, 0]]);
-    l.keys(medal, "translateY", [[0, -80, E.out], [450, 0]]);
-    l.opacity(medal, [[0, 0, E.out], [200, 1]]);
-    l.scale(star, [[0, 0, E.hold], [400, 0, E.pop], [800, 1]]);
-    l.keys(star, "rotation", [[0, -144, E.hold], [400, -144, E.out], [900, 0]]);
-  }
-});
-var EDUCATION_PACK = [eduOpenBook, eduBadge];
-
-export {
-  eduOpenBook,
-  eduBadge,
-  EDUCATION_PACK
-};

package/dist/chunks/chunk-V5NM5KTY.js

@@ -1,128 +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 {
-  SERVICES,
-  SPANWISE,
-  body,
-  code,
-  dataBrand,
-  dataButton,
-  display,
-  figure,
-  heatMap,
-  label,
-  lockup,
-  panel,
-  servicesTable,
-  ts
-} from "./chunk-G3YVVHCF.js";
-import {
-  EMAIL_FPS,
-  HEADER
-} from "./chunk-572QBW5I.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  ease
-} from "./chunk-YYQUCS6P.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/email/style-data-header.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Data SaaS email header";
-var DURATION = 6e3;
-var ROW_H = 36;
-var ROWS = SERVICES.slice(1, 5);
-var FLAG = ROWS.findIndex((s) => s.anomaly);
-var cues = [
-  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 800, amount: 0.05 } },
-  { layer: "Anomaly p99", preset: "pulse", at: 1300, params: { duration: 800, amount: 0.08 } },
-  { layer: "Strip cell", preset: "pulse", at: 3e3, stagger: { delay: 50, order: "selection" }, params: { duration: 500, amount: 0.3 } }
-];
-var style_data_header_default = defineTemplate({
-  id: "email-saas-style-data-header",
-  meta: {
-    name: `${NAME} (animated GIF)`,
-    description: "A 600 \xD7 300 animated header for a launch email in a data-dense enterprise look for an observability platform: the sender, the news, the button and a small console of services with a sparkline each, one flagged red, all on the first frame; then a cobalt scan bar runs down the rows and settles on the anomaly, its figure pulses and latency cells light in a wave, all returning to where they began. A seamless 6-second GIF",
-    category: "email",
-    tags: ["email", "gif", "animated", "header", "banner", "saas", "data", "dashboard", "enterprise", "observability", "devops", "launch", "announcement", "newsletter", "loop"],
-    platforms: ["email"],
-    formats: ["email", "banner"],
-    useCases: ["announcement", "launch", "newsletter"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit(NAME, HEADER);
-    k.quantizeGeometry = true;
-    dataBrand(k);
-    ts(k, "Brand 16", display(16));
-    ts(k, "Label 12", label(12));
-    ts(k, "Offer 28", display(28, { lead: 1.08 }));
-    ts(k, "When 13", body(13));
-    ts(k, "Button 13", display(13));
-    ts(k, "Mono 12", code(12));
-    ts(k, "Name 13", code(13, 600));
-    ts(k, "Fig 13", figure(13, 500));
-    dataButton(k, "Button", { style: "Button 13", label: "See what changed", pad: [9, 14] });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, { top: 0, right: 24, bottom: 0, left: 24 }, "paper", "CENTER", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
-    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Band" });
-    const words = k.stack(band, { width: 236, gap: 10, name: "Words" });
-    const top = k.stack(words, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
-    lockup(k, top, { size: 22, style: "Brand 16" });
-    k.text(top, `Release ${SPANWISE.version}`, { style: "Mono 12", color: "onPaper", autoWidth: true, name: "Release" });
-    k.text(words, "Every anomaly\nnames its deploy.", { style: "Offer 28", color: "text", name: "Offer" });
-    k.text(words, "Change correlation lines each regression up with the deploy behind it, in seconds.", { style: "When 13", color: "onPaper", name: "When" });
-    k.instance(words, "Button", { Label: "See what changed" }, { name: "Open button" });
-    const con = panel(k, band, { width: 296, name: "Console", lift: 0.5 });
-    const bar = k.stack(con, { direction: "HORIZONTAL", height: 30, align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 12, bottom: 0, left: 12 }, name: "Title bar" });
-    k.text(bar, "SERVICES \xB7 PROD", { style: "Label 12", color: "onCard", autoWidth: true, name: "Panel title" });
-    const lv = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Live" });
-    const live = k.ellipse(lv, 7, "up", { name: "Live dot" });
-    k.text(lv, "LIVE", { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Live word" });
-    k.rect(con, "FILL", 1, "line", { name: "Bar rule" });
-    const t = servicesTable(k, con, { w: 296, rowH: ROW_H, rows: ROWS, cols: ["service", "p99", "trend"], widths: { p99: 66, trend: 70 }, styles: { head: "Label 12", name: "Name 13", sub: "Mono 12", fig: "Fig 13" }, pad: 12, headH: 24 });
-    const an = t.rows[FLAG];
-    if (an.glow) k.patch(an.glow, { opacity: 1 });
-    if (an.flag) k.patch(an.flag, { visible: false });
-    k.patch(an.p99, { characters: "2,340 ms" });
-    for (const r of t.rows) for (const reg of k.named(r.row, "Service region")) k.patch(reg, { visible: false });
-    const scan = k.rect(t.body, 4, ROW_H, "primary", { name: "Scan edge", absolute: { x: 0, y: FLAG * ROW_H } });
-    const sb = k.stack(con, { padding: { top: 8, right: 12, bottom: 10, left: 12 }, fill: "well", name: "Strip box" });
-    const st = heatMap(k, sb, { cols: 17, rows: 1, cell: 14, gap: 2.5, seed: 9, name: "Strip" });
-    for (const c of st.cells) k.patch(c, { name: "Strip cell" });
-    k.cues(sheet, cues);
-    const dy = (row) => (row - FLAG) * ROW_H;
-    k.animate(scan, "translateY", [
-      { t: 0, v: dy(0), ease: ease.hold },
-      { t: 300, v: dy(0), ease: ease.inOut("cubic") },
-      { t: 1100, v: dy(FLAG), ease: ease.hold },
-      { t: 5e3, v: dy(FLAG), ease: ease.inOut("cubic") },
-      { t: 5800, v: dy(0), ease: ease.hold },
-      { t: DURATION, v: dy(0) }
-    ]);
-    const keys = Array.from({ length: 13 }, (_, i) => ({ t: i * 500, v: i % 2 ? 0.3 : 1, ease: ease.hold }));
-    delete keys[keys.length - 1].ease;
-    k.animate(live, "opacity", keys);
-    return k.finish();
-  }
-});
-
-export {
-  style_data_header_default
-};