@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-5FW6SHUP.js

@@ -1,135 +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 {
-  confirms,
-  field,
-  formStyles,
-  select,
-  submit
-} from "./chunk-HHXQEOXO.js";
-import {
-  buttons,
-  nav,
-  page,
-  webResponsive
-} from "./chunk-YKXCPYWJ.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/launch-waitlist.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: "Waitlist card", preset: "rise-in", at: 650, params: { duration: 700 } },
-  { layer: "Proof", preset: "fade-in", at: 1100, params: { duration: 500 } },
-  { layer: "Spend card", preset: "slide-in", at: 500, params: { direction: "right" }, stagger: { delay: 180 } },
-  { layer: "Ring", preset: "pop-in", at: 1300 },
-  { layer: "Ring", preset: "pulse", at: 2400, params: { amount: 0.08 } }
-];
-var SPEND = [["Groceries", "$312 of $400", "ok"], ["Eating out", "$148 of $120", "over"], ["Transport", "$64 of $150", "ok"]];
-var launch_waitlist_default = defineTemplate({
-  id: "web-launch-waitlist",
-  meta: {
-    name: "Animated launch page with a working waitlist",
-    description: "A launch page that builds itself \u2014 headline and lead rise in, the waitlist form follows, spending cards slide in \u2014 and whose waitlist works: name, email and a goal, then a thank-you message in its place. Attach a database when you publish and every sign-up is saved",
-    category: "web",
-    tags: ["animation", "waitlist", "launch", "form", "database", "landing page", "sign-up", "entrance", "app launch", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["launch", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  breakpoints: true,
-  motion: { cues },
-  build() {
-    const k = new Kit("Launch page with a waitlist", preset("web-desktop"));
-    k.brand(
-      { paper: "#F4F1FB", text: "#17132B", onPaper: "#544E70", primary: "#5B3FD6", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#17132B", cardMuted: "#6B6585", field: "#FFFFFF", onField: "#6B6585", line: "#D9D3EE", tint: "#E6DFFB", onTint: "#3F2A9E", good: "#1E8F5E", over: "#C8472B", track: "#E9E5F5" },
-      { name: "Tally" }
-    );
-    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 68", { size: 68, fontWeight: 800, letterSpacing: -2.2, lineHeight: 72 });
-    k.textStyle("Display 56", { size: 56, fontWeight: 800, letterSpacing: -1.8, lineHeight: 60 });
-    k.textStyle("Display 44", { size: 44, fontWeight: 800, letterSpacing: -1.2, lineHeight: 50 });
-    k.textStyle("Display 36", { size: 36, fontWeight: 800, letterSpacing: -0.9, 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("Card title 16", { size: 16, fontWeight: 700, lineHeight: 22 });
-    k.textStyle("Card meta 14", { size: 14, fontWeight: 500, lineHeight: 20 });
-    k.textStyle("Ring 28", { size: 28, fontWeight: 800, letterSpacing: -0.6, lineHeight: 32, textAlign: "CENTER" });
-    formStyles(k);
-    buttons(k, { style: "Button 16" });
-    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 });
-    });
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 40, top: 32 });
-    k.timeline(sheet, { duration: 4e3, fps: 30 });
-    nav(k, sheet, { links: ["How it works", "Pricing", "Security"], cta: "Join the waitlist", style: "Nav 16", brandStyle: "Brand 20", quiet: true });
-    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", padding: { top: 32, right: 0, bottom: 48, left: 0 }, name: "Hero" });
-    const copy = k.stack(hero, { gap: 22, name: "Copy" });
-    k.instance(copy, "Badge", { Label: "Opening in November \xB7 4,200 people waiting" }, { name: "Eyebrow" });
-    k.text(copy, "Know where the month went before it is gone.", { style: "Display 68", color: "text", name: "Headline" });
-    k.text(copy, "Tally sorts what you spend as you spend it and tells you, in one line a day, what is left for the things you care about. No spreadsheets, no bank passwords.", { style: "Lead 20", color: "onPaper", name: "Lead" });
-    const panel = k.stack(copy, { fill: "card", radius: 18, stroke: { color: "line", width: 1 }, padding: 24, name: "Waitlist card" });
-    const form = k.stack(panel, { gap: 14, name: "Waitlist form" });
-    const row = k.stack(form, { direction: "HORIZONTAL", gap: 12, name: "Name and email" });
-    field(k, row, { card: true, label: "First name", name: "name", placeholder: "Sam", required: true });
-    field(k, row, { card: true, label: "Email", name: "email", placeholder: "sam@example.com", type: "email", required: true });
-    select(k, form, { card: true, label: "What do you want help with first?", name: "goal", options: ["Spending less on eating out", "Saving for something", "Paying off a card", "Just seeing where it goes"] });
-    submit(k, form, "Join the waitlist");
-    k.text(copy, "Free for the first year for everyone on the list. One email when it opens.", { style: "Proof 15", color: "onPaper", name: "Proof" });
-    const visual = k.stack(hero, { width: 380, gap: 14, name: "Visual" });
-    for (const [what, amount, state] of SPEND) {
-      const c = k.stack(visual, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "card", radius: 16, padding: { top: 16, right: 18, bottom: 16, left: 18 }, effects: [{ type: "DROP_SHADOW", color: k.color("text", 0.1), offset: { x: 0, y: 10 }, blur: 26, spread: 0, visible: true }], name: "Spend card" });
-      const words = k.stack(c, { gap: 2, name: "Spend words" });
-      k.text(words, what, { style: "Card title 16", color: "onCard", name: "Spend name" });
-      k.text(words, amount, { style: "Card meta 14", color: "cardMuted", name: "Spend amount" });
-      k.ellipse(c, 14, state === "over" ? "over" : "good", { name: "Spend state" });
-    }
-    const ring = k.stack(visual, { direction: "HORIZONTAL", width: "HUG", gap: 16, align: "CENTER", fill: "card", radius: 16, padding: { top: 16, right: 22, bottom: 16, left: 16 }, name: "Ring" });
-    const dial = k.stack(ring, { width: 84, height: 84, radius: 42, stroke: { color: "primary", width: 8 }, fill: "track", align: "CENTER", justify: "CENTER", name: "Dial" });
-    k.text(dial, "62%", { style: "Ring 28", color: "onCard", autoWidth: true, name: "Ring value" });
-    const ringWords = k.stack(ring, { width: "HUG", gap: 2, name: "Ring words" });
-    k.text(ringWords, "$1,140 left", { style: "Card title 16", color: "onCard", autoWidth: true, name: "Left" });
-    k.text(ringWords, "12 days to go this month", { style: "Card meta 14", color: "cardMuted", autoWidth: true, name: "Days" });
-    k.cues(sheet, cues);
-    confirms(k, panel, form, { title: "You are on the list.", body: "We will email you once, the day Tally opens, with your first year free. Until then: nothing from us.", titleStyle: "Thanks 24", bodyStyle: "Field 16", card: true });
-    webResponsive(k, sheet, {
-      stack: ["Hero"],
-      stackMobile: ["Name and email"],
-      restyle: { "Display 68": { laptop: "Display 56", tablet: "Display 44", mobile: "Display 36" }, "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: 48 });
-        if (size === "tablet" || size === "mobile") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40 });
-        if (size === "mobile") for (const n of kit.named(id, "Waitlist card")) kit.patch(n, { padding: { top: 18, right: 18, bottom: 18, left: 18 } });
-      }
-    });
-    return k.finish();
-  }
-});
-
-export {
-  launch_waitlist_default
-};

package/dist/chunks/chunk-5G4JERCF.js

@@ -1,304 +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 {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  presetPaint,
-  shaderPreset
-} from "./chunk-E6EMPOWS.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/game/shared.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var W = 1920;
-var H = 1080;
-function gameKit(name, presetId = "game-1080p") {
-  const k = new Kit(name, preset(presetId));
-  k.quantizeGeometry = true;
-  k.doc = { ...k.doc, settings: { ...k.doc.settings, showAdvance: { on: "click" }, showLoop: false } };
-  return k;
-}
-var vn = (k, id) => {
-  const v = k.doc.variables?.[id];
-  if (!v) throw new Error(`no variable ${id}`);
-  return v.name;
-};
-function gameVar(k, collection, name, type, value) {
-  const id = k.variable(collection, name, type, value);
-  return { id, n: vn(k, id) };
-}
-var SHEET_COLUMNS = 4;
-function screen(k, name, o) {
-  const id = o.first ? k.sheet : k.addScreen(name);
-  k.nameSheet(id, name);
-  const page = k.doc.nodes[k.pageId];
-  const index = page.childIds.filter((c) => k.doc.nodes[c]?.type === "FRAME").indexOf(id);
-  const f = k.node(id);
-  k.patch(id, { x: index % SHEET_COLUMNS * (f.width + 120), y: Math.floor(index / SHEET_COLUMNS) * (f.height + 200) });
-  k.patch(id, {
-    fills: o.fills ?? k.paint(o.ground),
-    clipsContent: true,
-    layoutMode: "VERTICAL",
-    padding: { top: 0, right: 0, bottom: 0, left: 0 },
-    itemSpacing: 0,
-    primaryAxisAlignItems: "MIN",
-    counterAxisAlignItems: "MIN",
-    layoutSizingHorizontal: "FIXED",
-    layoutSizingVertical: "FIXED"
-  });
-  k.timeline(id, { duration: o.duration ?? 4e3, fps: 30 });
-  return id;
-}
-function box(k, parent, x, y, w, h, o = {}) {
-  return k.stack(parent, { ...o, width: w, height: h, absolute: { x, y } });
-}
-function label(k, parent, text, style, color, x, y, o = {}) {
-  return k.text(parent, text, { style, color, absolute: { x, y }, ...o.w ? { width: o.w } : { autoWidth: true }, ...o.align ? { align: o.align } : {}, ...o.name ? { name: o.name } : {}, ...o.effects ? { effects: o.effects } : {} });
-}
-function readout(k, parent, expression, rest, style, color, x, y, o = {}) {
-  const id = label(k, parent, rest, style, color, x, y, { w: o.w ?? 200, align: o.align, name: o.name ?? "Readout", effects: o.effects });
-  k.bindExpression(id, "characters", expression);
-  return id;
-}
-function shaderLayer(k, parent, shader, params, o = {}) {
-  const p = shaderPreset(shader);
-  if (!p) throw new Error(`no shader preset "${shader}"`);
-  const f = k.node(parent);
-  const fill = presetPaint({ id: "f1", type: "SHADER", visible: true, opacity: 1 }, p, params);
-  return k.rect(parent, o.w ?? f.width, o.h ?? f.height, [fill], { name: o.name ?? `${shader} backdrop`, absolute: { x: o.x ?? 0, y: o.y ?? 0 }, ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
-}
-var set = Kit.set;
-var when = Kit.when;
-var go = Kit.go;
-var back = () => Kit.go(null, "DISSOLVE", { navigation: "BACK", duration: 250 });
-var close = () => Kit.go(null, "INSTANT", { navigation: "CLOSE" });
-var overlay = (frame) => Kit.go(frame, "DISSOLVE", { navigation: "OVERLAY", duration: 200, overlay: { overlayPosition: "CENTER" } });
-function onAll(k, id, actions, o = {}) {
-  for (const a of actions) k.on(id, a, o);
-}
-var FOCUS_GLIDE = 140;
-function menu(k, screenId, items, o) {
-  const n = items.length;
-  const f = o.focus.n;
-  const ih = o.itemHeight ?? o.pitch - 12;
-  const w = o.horizontal ? o.width * n + o.pitch * (n - 1) : o.width;
-  const h = o.horizontal ? ih : o.pitch * (n - 1) + ih;
-  const list = box(k, screenId, o.x, o.y, w, h, { name: o.name ?? "Menu" });
-  items.forEach((it, i) => {
-    const x = o.horizontal ? i * (o.width + o.pitch) : 0;
-    const y = o.horizontal ? 0 : i * o.pitch;
-    const item = box(k, list, x, y, o.horizontal ? o.width : w, ih, { name: "Menu item" });
-    const plate = k.rect(item, o.horizontal ? o.width : w, ih, typeof o.plate === "string" ? o.plate : o.plate, { name: "Focus plate", radius: o.radius ?? 0, absolute: { x: 0, y: 0 } });
-    const near = `max(0, 1 - abs(${f} - ${i}))`;
-    k.bindExpression(plate, "opacity", near);
-    const lx = o.marker ? 64 : 28;
-    const t = label(k, item, it.label, o.style, o.color, lx, 0, { name: "Item label" });
-    const tn = k.node(t);
-    k.patch(t, { y: Math.round((ih - tn.height) / 2) });
-    k.bindExpression(t, "opacity", `0.62 + 0.38 * ${near}`);
-    if (o.nudge !== 0) k.bindExpression(t, "translateX", `${near} * ${o.nudge ?? 14}`);
-    if (o.marker) {
-      const z = o.marker.size ?? 22, my = Math.round(ih / 2);
-      const m = poly(k, item, [[24, my - z / 2], [24 + z * 0.8, my], [24, my + z / 2]], o.marker.color, { name: "Focus marker" });
-      k.bindExpression(m, "opacity", near);
-      k.bindExpression(m, "translateX", `(${near} - 1) * 12`);
-    }
-    if (it.hint) {
-      const hint = label(k, item, it.hint, o.hintStyle ?? o.style, o.color, lx, 0, { name: "Item hint", w: 360, align: "RIGHT" });
-      k.patch(hint, { x: (o.horizontal ? o.width : w) - 388, y: Math.round((ih - k.node(hint).height) / 2) });
-      k.bindExpression(hint, "opacity", `0.72 + 0.28 * ${near}`);
-    }
-    onAll(k, item, [set(o.focus.id, { value: i, glide: FOCUS_GLIDE }), ...o.onFocus?.(i) ?? []], { trigger: "MOUSE_ENTER" });
-    onAll(k, item, it.actions);
-  });
-  const guard = (c) => o.guard ? `(${o.guard}) && ${c}` : c;
-  const next = o.horizontal ? ["ArrowRight", "d"] : ["ArrowDown", "s"];
-  const prev = o.horizontal ? ["ArrowLeft", "a"] : ["ArrowUp", "w"];
-  const focused = o.onFocus ? [when(items.map((_, i) => ({ if: `${f} == ${i}`, then: o.onFocus(i) })))] : [];
-  for (const key of next) k.on(list, when([{ if: guard("true"), then: [set(o.focus.id, { expression: `(${f} + 1) % ${n}`, glide: FOCUS_GLIDE }), ...focused] }]), { key });
-  for (const key of prev) k.on(list, when([{ if: guard("true"), then: [set(o.focus.id, { expression: `(${f} + ${n - 1}) % ${n}`, glide: FOCUS_GLIDE }), ...focused] }]), { key });
-  const choose = when(items.map((it, i) => ({ if: guard(`${f} == ${i}`), then: it.actions })));
-  for (const key of ["Enter", " "]) k.on(list, choose, { key });
-  if (o.escape) for (const a of o.escape) k.on(list, a, { key: "Escape" });
-  return list;
-}
-function slider(k, parent, o) {
-  const min = o.min ?? 0, max = o.max ?? 100, step = o.step ?? 10;
-  const v = o.variable.n;
-  const trackX = 360, trackW = o.width - trackX - 200;
-  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.label} slider` });
-  label(k, row, o.label, o.labelStyle, o.ink, 0, 12, { name: "Setting name" });
-  const minus = box(k, row, trackX - 60, 8, 40, 40, { name: "Step down", radius: 20, stroke: { color: o.track, width: 2 }, align: "CENTER", justify: "CENTER" });
-  k.text(minus, "\u2212", { style: o.valueStyle, color: o.ink, autoWidth: true, name: "Minus" });
-  const plus = box(k, row, trackX + trackW + 20, 8, 40, 40, { name: "Step up", radius: 20, stroke: { color: o.track, width: 2 }, align: "CENTER", justify: "CENTER" });
-  k.text(plus, "+", { style: o.valueStyle, color: o.ink, autoWidth: true, name: "Plus" });
-  const track = box(k, row, trackX, 22, trackW, 12, { name: "Track", radius: 6, fill: o.track });
-  const frac = `clamp((${v} - ${min}) / ${max - min}, 0, 1)`;
-  const fill = k.rect(track, trackW, 12, o.fill, { name: "Fill", radius: 6, absolute: { x: 0, y: 0 } });
-  k.bindExpression(fill, "width", `${frac} * ${trackW}`);
-  const knob = k.ellipse(row, 28, o.knob, { name: "Knob", absolute: { x: trackX - 14, y: 14 } });
-  k.bindExpression(knob, "x", `${trackX - 14} + ${frac} * ${trackW}`);
-  const notches = Math.round((max - min) / step);
-  for (let i = 0; i <= notches; i++) {
-    const hit = box(k, row, trackX + i / notches * trackW - trackW / notches / 2, 8, trackW / notches, 40, { name: "Notch" });
-    k.on(hit, set(o.variable.id, { value: min + i * step, glide: o.glide ?? 160 }));
-  }
-  readout(k, row, `round(${v}) + "${o.suffix ?? ""}"`, `${k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"]}${o.suffix ?? ""}`, o.valueStyle, o.ink, trackX + trackW + 80, 12, { w: 120, align: "RIGHT", name: "Value" });
-  const down = set(o.variable.id, { expression: `max(${min}, ${v} - ${step})`, glide: o.glide ?? 160 });
-  const up = set(o.variable.id, { expression: `min(${max}, ${v} + ${step})`, glide: o.glide ?? 160 });
-  k.on(minus, down);
-  k.on(plus, up);
-  if (o.focus) {
-    const here = `${o.focus.n} == ${o.focus.index}`;
-    for (const key of ["ArrowLeft", "a"]) k.on(row, when([{ if: here, then: [down] }]), { key });
-    for (const key of ["ArrowRight", "d"]) k.on(row, when([{ if: here, then: [up] }]), { key });
-  }
-  return row;
-}
-function toggleComponent(k, o) {
-  if (k.hasComponent("Toggle")) return;
-  k.variantSet("Toggle", "State", ["Off", "On"], { direction: "HORIZONTAL", width: 132, height: 40, gap: 12, align: "CENTER", description: "A switch: click (or Enter while its row is focused) to flip the variable it drives; the knob glides across." }, (state, id) => {
-    const track = k.stack(id, { direction: "HORIZONTAL", width: 68, height: 36, radius: 18, padding: 4, fill: state === "On" ? o.on : o.track, justify: state === "On" ? "MAX" : "MIN", align: "CENTER", name: "Track" });
-    k.ellipse(track, 28, o.knob, { name: "Knob" });
-    k.text(id, state === "On" ? "ON" : "OFF", { style: o.stateStyle, color: o.ink, autoWidth: true, name: "State word" });
-  });
-}
-function toggle(k, parent, o) {
-  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.label} toggle` });
-  label(k, row, o.label, o.labelStyle, o.ink, 0, 12, { name: "Setting name" });
-  const on = k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"] === 1;
-  const sw = k.instance(row, on ? "Toggle/On" : "Toggle/Off", {}, { name: "Switch", absolute: { x: 300, y: 8 } });
-  const flip = [set(o.variable.id, { expression: `1 - ${o.variable.n}` }), when([{ if: `${o.variable.n} == 1`, then: [k.changeAction("Toggle/On", 220, "EASE_IN_OUT")] }, { then: [k.changeAction("Toggle/Off", 220, "EASE_IN_OUT")] }])];
-  onAll(k, sw, flip);
-  if (o.focus) k.on(sw, when([{ if: `${o.focus.n} == ${o.focus.index}`, then: flip }]), { key: "Enter" });
-  return row;
-}
-function keybind(k, parent, o) {
-  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.action} binding` });
-  label(k, row, o.action, o.labelStyle, o.ink, 0, 12, { name: "Action name" });
-  const cap = box(k, row, 300, 4, 180, 48, { name: "Key cap", radius: 8, fill: o.cap, align: "CENTER", justify: "CENTER" });
-  const key = k.text(cap, String(k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"] ?? ""), { style: o.capStyle, color: o.onCap, width: 172, align: "CENTER", name: "Key" });
-  k.bindExpression(key, "characters", `${o.rebind.n} == "${o.slot}" ? "PRESS A KEY" : ${o.variable.n}`);
-  const ring = k.rect(row, 188, 56, o.listening, { name: "Listening ring", radius: 12, absolute: { x: 296, y: 0 }, opacity: 0.35 });
-  k.bindExpression(ring, "visible", `${o.rebind.n} == "${o.slot}"`);
-  k.on(row, set(o.rebind.id, { value: o.slot }));
-  if (o.focus) k.on(row, when([{ if: `${o.focus.n} == ${o.focus.index} && ${o.rebind.n} == ""`, then: [set(o.rebind.id, { value: o.slot })] }]), { key: "Enter" });
-  return row;
-}
-function rebindListener(k, screenId, rebind, slots) {
-  k.on(screenId, when([
-    { if: `${rebind.n} != "" && $key == "Escape"`, then: [set(rebind.id, { value: "" })] },
-    ...slots.map((s) => ({ if: `${rebind.n} == "${s.slot}" && $key != "Enter"`, then: [set(s.variable.id, { expression: `$key == " " ? "SPACE" : upper($key)` }), set(rebind.id, { value: "" })] }))
-  ]), { key: "*" });
-}
-function bar(k, parent, o) {
-  const frame = box(k, parent, o.x, o.y, o.w, o.h, { name: o.name ?? "Bar", radius: o.radius ?? 0, fill: o.back, clip: true });
-  const width = (e) => `clamp((${e}) / (${o.max}), 0, 1) * ${o.w}`;
-  const place = (id, e) => {
-    k.bindExpression(id, "width", width(e));
-    if (o.fromRight) k.bindExpression(id, "x", `${o.w} - ${width(e)}`);
-  };
-  const name = o.name ?? "Bar";
-  if (o.chip) place(k.rect(frame, o.w, o.h, o.chip.color, { name: `${name} chip`, radius: o.radius ?? 0, absolute: { x: 0, y: 0 } }), o.chip.expression);
-  place(k.rect(frame, o.w, o.h, o.fill, { name: `${name} fill`, radius: o.radius ?? 0, absolute: { x: 0, y: 0 } }), o.value);
-  return frame;
-}
-function oneShot(k, name, o, build) {
-  const state = o.state ?? "Hit";
-  return k.variantSet(name, "State", ["Idle", state], { width: o.width, height: o.height, description: o.description }, build, (s) => s === state ? { timeline: { duration: o.duration } } : {});
-}
-var keys = (k, id, path, ks) => k.animate(id, path, ks);
-function drift(k, id, path, amp, freq, phase = 0) {
-  k.behave(id, path, [{ kind: "sine", amp, freq, phase }]);
-}
-function spin(k, id, rate) {
-  k.behave(id, "rotation", [{ kind: "spin", rate }]);
-}
-function glow(k, role, blur, a = 0.9) {
-  return { id: `g${blur}`, type: "DROP_SHADOW", color: k.color(role, a), offset: { x: 0, y: 0 }, blur, spread: 0, visible: true, showBehindTransparent: true };
-}
-function focusColumn(k, parent, o) {
-  const f = o.focus.n;
-  const plate = k.rect(parent, o.w, o.pitch - 8, o.plate, { name: "Row focus", radius: o.radius ?? 8, absolute: { x: o.x, y: o.y } });
-  k.bindExpression(plate, "y", `${o.y} + ${f} * ${o.pitch}`);
-  const g = (c) => o.guard ? `(${o.guard}) && ${c}` : c;
-  for (const key of ["ArrowDown", "s"]) k.on(parent, when([{ if: g("true"), then: [set(o.focus.id, { expression: `(${f} + 1) % ${o.count}`, glide: FOCUS_GLIDE })] }]), { key });
-  for (const key of ["ArrowUp", "w"]) k.on(parent, when([{ if: g("true"), then: [set(o.focus.id, { expression: `(${f} + ${o.count - 1}) % ${o.count}`, glide: FOCUS_GLIDE })] }]), { key });
-  if (o.escape) k.on(parent, when([{ if: g("true"), then: o.escape }]), { key: "Escape" });
-  return plate;
-}
-function focusRow(k, row, focus, index) {
-  k.on(row, set(focus.id, { value: index, glide: FOCUS_GLIDE }), { trigger: "MOUSE_ENTER" });
-}
-function poly(k, parent, pts, color, o = {}) {
-  const xs = pts.map((p) => p[0]), ys = pts.map((p) => p[1]);
-  const x0 = Math.min(...xs), y0 = Math.min(...ys);
-  const w = Math.max(1, Math.max(...xs) - x0), h = Math.max(1, Math.max(...ys) - y0);
-  const path = { closed: o.closed ?? o.stroke === void 0, points: pts.map(([x, y]) => ({ x: x - x0, y: y - y0 })) };
-  return k.vector(parent, w, h, [path], color, { name: o.name ?? "Shape", absolute: { x: x0, y: y0 }, ...o.stroke !== void 0 ? { strokeWidth: o.stroke } : {}, ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, ...o.effects ? { effects: o.effects } : {} });
-}
-var blurFx = (radius) => ({ id: `b${radius}`, type: "LAYER_BLUR", radius, visible: true });
-function arcPoints(cx, cy, r, a0, a1, steps = 48) {
-  const out = [];
-  for (let i = 0; i <= steps; i++) {
-    const a = a0 + (a1 - a0) * i / steps;
-    out.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
-  }
-  return out;
-}
-function sector(k, parent, cx, cy, outer, inner, a0, a1, color, o = {}) {
-  const pts = inner > 0 ? [...arcPoints(cx, cy, outer, a0, a1), ...arcPoints(cx, cy, inner, a1, a0)] : [[cx, cy], ...arcPoints(cx, cy, outer, a0, a1)];
-  return poly(k, parent, pts, color, { name: o.name ?? "Sector", opacity: o.opacity, effects: o.effects });
-}
-function arc(k, parent, cx, cy, r, a0, a1, color, width, o = {}) {
-  return poly(k, parent, arcPoints(cx, cy, r, a0, a1), color, { name: o.name ?? "Arc", stroke: width, closed: false, opacity: o.opacity, effects: o.effects });
-}
-
-export {
-  W,
-  H,
-  gameKit,
-  vn,
-  gameVar,
-  SHEET_COLUMNS,
-  screen,
-  box,
-  label,
-  readout,
-  shaderLayer,
-  set,
-  when,
-  go,
-  back,
-  close,
-  overlay,
-  onAll,
-  FOCUS_GLIDE,
-  menu,
-  slider,
-  toggleComponent,
-  toggle,
-  keybind,
-  rebindListener,
-  bar,
-  oneShot,
-  keys,
-  drift,
-  spin,
-  glow,
-  focusColumn,
-  focusRow,
-  poly,
-  blurFx,
-  arcPoints,
-  sector,
-  arc
-};

package/dist/chunks/chunk-5II54NUK.js

@@ -1,171 +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 {
-  DEAL,
-  bulbArrow,
-  fitShopfront,
-  lettering,
-  lightbox,
-  neonBrand,
-  neonWord,
-  puddle,
-  shopfront,
-  spark,
-  two,
-  wash
-} from "./chunk-GBUMWUHN.js";
-import {
-  fitRain,
-  rain
-} from "./chunk-57PXFTSD.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  board,
-  patchAll,
-  put,
-  reboard,
-  restyle
-} from "./chunk-QLV6445V.js";
-import {
-  pill,
-  postVariants
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/social/black-friday-neon-countdown.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 8e3;
-var TICKS = 8;
-var RAIN = { color: "ice", opacity: 0.13, rate: 960, seed: 4, count: 20, len: 90 };
-var CAP = 112;
-var TUBE = 10;
-var cues = [
-  { layer: "Tile plate", preset: "pulse", at: 600, params: { duration: 500, amount: 0.04 }, stagger: { delay: 160 } },
-  { layer: "Button", preset: "pulse", at: 3e3, params: { duration: 600, amount: 0.06 } },
-  { layer: "Code plate", preset: "pulse", at: 4200, params: { duration: 600, amount: 0.06 } }
-];
-var counts = [
-  // Rests at the figure it starts from: a still reads the time left as it was set.
-  { layer: "Seconds figure", at: 0, duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS, value: DEAL.seconds } }
-];
-var NAME = "Black Friday neon countdown post";
-var black_friday_neon_countdown_default = defineTemplate({
-  id: "motion-black-friday-neon-countdown-post",
-  meta: {
-    name: NAME,
-    description: "A last-call post for a SaaS Black Friday sale, drawn as a shop sign at night: SALE ENDS IN bent from red and white neon on a wet brick wall, the time left on four lit plates with the seconds ticking, the discount in amber beside an arrow of chasing bulbs, rain, and a power dip where the sign stutters and relights. Eight seconds, looping, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "black friday", "cyber monday", "countdown", "timer", "sale", "saas", "neon", "neon sign", "shopfront", "night", "rain", "flicker", "post", "deadline", "discount code"],
-    platforms: ["instagram", "x", "linkedin", "facebook", "threads"],
-    formats: ["post", "portrait-post", "story", "ad"],
-    useCases: ["countdown", "sale"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, loop: true },
-  build() {
-    const k = new Kit(NAME, preset("ig-post"));
-    k.quantizeGeometry = true;
-    neonBrand(k, { name: DEAL.product, site: DEAL.site });
-    k.textStyle("Clock 150", { ...MONO, size: 150, fontWeight: 800, letterSpacing: -5, lineHeight: 160, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
-    k.textStyle("Clock 230", { ...MONO, size: 230, fontWeight: 800, letterSpacing: -8, lineHeight: 240, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
-    k.textStyle("Unit 30", { ...MONO, size: 30, fontWeight: 700, letterSpacing: 4, lineHeight: 36, textAlign: "CENTER" });
-    k.textStyle("Unit 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 3, lineHeight: 28, textAlign: "CENTER" });
-    k.textStyle("Code 48", { ...MONO, size: 48, fontWeight: 800, letterSpacing: 1.4, lineHeight: 56 });
-    k.textStyle("Code 34", { ...MONO, size: 34, fontWeight: 800, letterSpacing: 1, lineHeight: 42 });
-    k.textStyle("Headline 54", { size: 54, fontWeight: 900, letterSpacing: -1.8, lineHeight: 58, textAlign: "CENTER" });
-    k.textStyle("Headline 76", { size: 76, fontWeight: 900, letterSpacing: -2.6, lineHeight: 78, textAlign: "CENTER" });
-    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
-    pill(k, "Link button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: DEAL.link, pad: [20, 44], radius: 12 });
-    const sheet = k.sheet;
-    const STREET = 968;
-    k.flowSheet(sheet, 24, { top: 52, right: 56, bottom: 132, left: 56 }, "paper", "CENTER", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    shopfront(k, sheet, { street: STREET });
-    wash(k, sheet, "red", { x: 540, y: 120, w: 1300, h: 620, alpha: 0.36, name: "Sign light" });
-    wash(k, sheet, "amber", { x: 540, y: 430, w: 1200, h: 560, alpha: 0.16, name: "Plate light" });
-    rain(k, sheet, 1080, 1080, RAIN);
-    const pad = Math.ceil(TUBE);
-    const sale = lettering("SALE", CAP, { pad }), ends = lettering("ENDS IN", CAP, { pad });
-    const W = Math.round(sale.w + ends.w + CAP * 0.36), H = sale.h;
-    const sb = board(k, sheet, W, H, 1, "Sign board");
-    const saleSign = neonWord(k, sb, "SALE", "red", { cap: CAP, t: TUBE, name: "Sale", absolute: { x: 0, y: 0 } });
-    const endsSign = neonWord(k, sb, "ENDS IN", "ice", { cap: CAP, t: TUBE, name: "Ends", absolute: { x: Math.round(sale.w + CAP * 0.36), y: 0 }, strength: 0.8 });
-    const tiles = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, name: "Clock" });
-    for (const [name, value, unit] of [["Days", DEAL.days, "DAYS"], ["Hours", DEAL.hours, "HOURS"], ["Minutes", DEAL.minutes, "MINUTES"], ["Seconds", DEAL.seconds, "SECONDS"]]) {
-      const tile = k.stack(tiles, { gap: 12, align: "CENTER", name: "Tile" });
-      const plate = lightbox(k, tile, { pad: [26, 0], radius: 16, width: "FILL", direction: "VERTICAL", name: "Tile plate", glow: 44 });
-      k.text(plate, two(value), { style: "Clock 150", color: "onAccent", name: `${name} figure` });
-      k.text(tile, unit, { style: "Unit 22", color: "onPaper", name: `${name} unit` });
-    }
-    const offer = k.stack(sheet, { direction: "HORIZONTAL", gap: 30, align: "CENTER", justify: "CENTER", name: "Offer" });
-    const off = neonWord(k, offer, `${DEAL.off}% OFF`, "amber", { cap: 78, t: 8, name: "Off", flow: true });
-    bulbArrow(k, offer, { w: 150, h: 96, dir: "right", bulb: 11, loopMs: DURATION, laps: 8, name: "Arrow" });
-    for (const id of k.named(offer, "Arrow")) k.patch(id, { layoutPositioning: "AUTO" });
-    const code = k.stack(offer, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 10, padding: { top: 20, right: 26, bottom: 20, left: 26 }, stroke: { color: "steelEdge", width: 4, align: "INSIDE" }, name: "Code plate" });
-    k.text(code, `CODE ${DEAL.code}`, { style: "Code 34", color: "amber", autoWidth: true, name: "Code" });
-    k.text(sheet, "Shutter drops Monday, 23:59 PT.", { style: "Headline 54", color: "text", name: "Headline" });
-    k.instance(sheet, "Link button", { Label: DEAL.link }, { name: "Button" });
-    const pool = puddle(k, sheet, W, H, saleSign.paths, "red", { t: TUBE, name: "Sign puddle", absolute: { x: Math.round((1080 - W) / 2), y: STREET + 20 }, squash: 0.6, opacity: 0.5, blur: 7 });
-    puddle(k, pool, ends.w, H, endsSign.paths, "ice", { t: TUBE, name: "Ends puddle", absolute: { x: Math.round(sale.w + CAP * 0.36), y: 0 }, squash: 0.6, opacity: 0.7, blur: 7 });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    saleSign.tubes.forEach((id, i) => spark(k, [id], [{ buzz: 5200 + i * 150 }]));
-    spark(k, [off.tubes[2]], [{ buzz: 2e3 }]);
-    k.animate(pool, "opacity", [{ t: 0, v: 0.5 }, { t: 5300, v: 0.5 }, { t: 5500, v: 0.22 }, { t: 6300, v: 0.22 }, { t: 6600, v: 0.5 }]);
-    const night = (kit, id, street, w) => {
-      fitShopfront(kit, id, { street });
-      fitRain(kit, id, { name: "Rain", seed: RAIN.seed, count: RAIN.count, len: RAIN.len });
-      put(kit, id, "Sign light", w / 2 - 650, -190);
-    };
-    k.variants(sheet, postVariants({ portrait: 56 }, {
-      portrait: (kit, id) => {
-        night(kit, id, 1218, 1080);
-        kit.patch(id, { padding: { top: 60, right: 56, bottom: 160, left: 56 }, itemSpacing: 34 });
-        patchAll(kit, id, "Tile plate", { padding: { top: 44, right: 0, bottom: 44, left: 0 } });
-        restyle(kit, id, "Headline", "Headline 76");
-        put(kit, id, "Plate light", 540 - 600, 300);
-        put(kit, id, "Sign puddle", Math.round((1080 - W) / 2), 1244);
-      },
-      // Inside the vertical apps' safe area the column is 800 wide: the plates stand two by two, twice the size.
-      vertical: (kit, id) => {
-        night(kit, id, 1490, 1080);
-        kit.patch(id, { itemSpacing: 20 });
-        reboard(kit, id, "Sign board", 800 / W);
-        patchAll(kit, id, "Clock", { layoutWrap: "WRAP", itemSpacing: 20, counterAxisSpacing: 16 });
-        patchAll(kit, id, "Tile", { layoutSizingHorizontal: "FIXED", width: 390 });
-        for (const n of ["Days", "Hours", "Minutes", "Seconds"]) restyle(kit, id, `${n} figure`, "Clock 230");
-        for (const n of ["Days", "Hours", "Minutes", "Seconds"]) restyle(kit, id, `${n} unit`, "Unit 30");
-        patchAll(kit, id, "Tile plate", { padding: { top: 4, right: 0, bottom: 4, left: 0 } });
-        patchAll(kit, id, "Offer", { itemSpacing: 30, layoutWrap: "WRAP", counterAxisSpacing: 14, layoutSizingHorizontal: "FILL" });
-        restyle(kit, id, "Code", "Code 48");
-        patchAll(kit, id, "Code plate", { padding: { top: 18, right: 32, bottom: 18, left: 32 } });
-        restyle(kit, id, "Headline", "Headline 54");
-        put(kit, id, "Plate light", 540 - 600, 500);
-        put(kit, id, "Sign puddle", Math.round((1080 - W) / 2), 1530, { scaleY: 1.5, anchorY: 0 });
-      }
-    }));
-    return k.finish();
-  }
-});
-
-export {
-  black_friday_neon_countdown_default
-};