@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-VS53WX7T.js

@@ -0,0 +1,101 @@
+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 {
+  PIGEON,
+  addressLines,
+  desk,
+  envelope,
+  fitStage,
+  petals,
+  postmark,
+  stage,
+  stamp,
+  valentinesBrand,
+  waxSeal
+} from "./chunk-EWO5TJWE.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-572QBW5I.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/valentines-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4800;
+var STAGE = { w: 760, h: 700 };
+var cues = [
+  { layer: "Seal", preset: "pulse", at: 900, params: { duration: 800, amount: 0.08 } },
+  { layer: "Second stamp", preset: "wobble", at: 1900, params: { duration: 800 } },
+  { layer: "Button", preset: "pulse", at: 3200, params: { duration: 800, amount: 0.06 } }
+];
+var valentines_header_default = defineTemplate({
+  id: "email-valentines-header",
+  meta: {
+    name: "Valentine email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a Valentine\u2019s two-for-one email: the offer, the code and the button are all on the first frame (for Outlook), beside an airmail envelope with two pigeon stamps, a 14 February postmark and a wax seal; then petals rock, the second stamp wobbles and the seal swells \u2014 a seamless 4.8-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "valentine", "valentines day", "offer", "two for one", "airmail", "wax seal", "saas", "seasonal"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["sale", "newsletter", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Valentine email header", HEADER);
+    k.quantizeGeometry = true;
+    valentinesBrand(k, { offer: "Two for one,\nfor two." });
+    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 700, letterSpacing: 2.4, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Offer 40", { ...SERIF, size: 40, fontWeight: 900, letterSpacing: -1.2, lineHeight: 42 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 21 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Mark 30", { ...MONO, size: 30, fontWeight: 800, letterSpacing: 2, lineHeight: 36, textAlign: "CENTER" });
+    k.textStyle("Value 44", { ...SERIF, size: 44, fontWeight: 900, lineHeight: 46, textAlign: "CENTER" });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Invite a teammate", pad: [9, 20], radius: 5 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 9, { top: 24, right: 300, bottom: 24, left: 30 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    desk(k, sheet, { x: 0.74, y: 0.5 }, 0.6);
+    const st = stage(k, sheet, { ...STAGE, name: "Desk", absolute: { x: 0, y: 0 } });
+    const env = envelope(k, st, { x: 20, y: 110, w: 720, h: 480, tilt: -6, band: 30 });
+    stamp(k, env, { x: 330, y: 62, w: 150, style: "Value 44", value: "14", name: "First stamp", tilt: -3 });
+    stamp(k, env, { x: 500, y: 70, w: 150, style: "Value 44", value: "14", name: "Second stamp", tilt: 5, field: "inkRed" });
+    postmark(k, env, { x: 150, y: 96, size: 200, style: "Mark 30", tilt: -10, waves: 0 });
+    addressLines(k, env, { x: 90, y: 330, w: 330, gap: 44 });
+    waxSeal(k, st, { x: 500, y: 400, size: 230, tilt: -12 });
+    petals(k, st, [[40, 40, 80, 30], [650, 20, 70, -40], [300, 610, 76, 110], [0, 520, 60, -70]], { loopMs: DURATION });
+    fitStage(k, st, STAGE.w, STAGE.h, 0.4, 452, 150);
+    k.text(sheet, "Until 14 February", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 40", color: "text", name: "Offer" });
+    k.text(sheet, `Bring a teammate to {{brand.name}}: their seat is free for a year with code ${PIGEON.code}.`, { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "Invite a teammate" }, { name: "Button" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  valentines_header_default
+};

package/dist/chunks/chunk-VSWLSC6K.js

@@ -0,0 +1,282 @@
+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 {
+  defineLibrary
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  contrastRatio
+} from "./chunk-OPRSPQL6.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/libraries/motion-essentials.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var INK = hex("#101828");
+var PAPER = hex("#F5F7FB");
+var ACCENT = hex("#2F6BFF");
+var SUCCESS = hex("#12B76A");
+var PRESSED = hex("#2358D6");
+var onInk = (surface) => [hex("#FFFFFF"), INK, PAPER, hex("#000000")].find((c) => contrastRatio(c, surface) >= 4.5) ?? hex("#000000");
+var FPS = 60;
+var marks = (shown, out, end) => [{ id: "in", t: 0, label: "In" }, { id: "shown", t: shown, label: "Shown" }, { id: "out", t: out, label: "Out" }, { id: "end", t: end, label: "End" }];
+var motion_essentials_default = defineLibrary({
+  id: "lib-motion-essentials",
+  version: 1,
+  meta: {
+    name: "Motion essentials",
+    description: "A library of nine motion components \u2014 animated button states, lower third, stat counter, progress ring, loader, toast, badge pop, subscribe CTA and social handle \u2014 with text, number and colour inputs and per-instance timing.",
+    tags: ["animation", "motion", "components", "library", "video", "social"],
+    created: "2026-09-28",
+    updated: "2026-09-29",
+    aliases: ["kit-motion-essentials"]
+  },
+  build() {
+    const k = new Kit("Motion essentials", preset("web-desktop"));
+    k.patch(k.pageId, { name: "Motion essentials" });
+    k.brand({
+      // `text` and `onPaper` are the showcase's inks on the paper: a kit's text, and the muted grey where it still reads.
+      primary: INK,
+      text: INK,
+      onPaper: "#667085",
+      accent: ACCENT,
+      paper: PAPER,
+      card: "#FFFFFF",
+      muted: "#667085",
+      track: "#E4E7EC",
+      success: SUCCESS,
+      // The pressed button's own fill: a role of its own, so its paint binds to what it shows.
+      accentPressed: PRESSED,
+      onAccent: onInk(ACCENT),
+      onSuccess: onInk(SUCCESS),
+      onAccentPressed: onInk(PRESSED)
+    }, { handle: "@popcraft" });
+    k.textStyle("Display 40", { size: 40, fontWeight: 800, lineHeight: 48, letterSpacing: -1 });
+    k.textStyle("Stat 44", { size: 44, fontWeight: 800, lineHeight: 52, letterSpacing: -1 });
+    k.textStyle("Title 18", { size: 18, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Label 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Body 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Caption 12", { size: 12, fontWeight: 700, lineHeight: 16, letterSpacing: 0.6 });
+    const shadow = (blur, y, a = 0.14) => ({ id: "e1", type: "DROP_SHADOW", color: { ...INK, a }, offset: { x: 0, y }, blur, spread: 0, visible: true });
+    const hug = { width: "HUG", align: "CENTER" };
+    const label = (parent, prop, style, color) => k.propText(parent, prop, { style, color, autoWidth: true });
+    const glyph = (parent, chars, color, name) => k.text(parent, chars, { style: "Label 15", color, align: "CENTER", autoWidth: true, name });
+    const badge = (parent, size, fill, name) => k.stack(parent, { direction: "HORIZONTAL", width: size, height: size, justify: "CENTER", align: "CENTER", fill, radius: size / 2, name });
+    k.variantSet("Button", "State", ["Idle", "Hover", "Pressed"], {
+      direction: "HORIZONTAL",
+      ...hug,
+      description: "A call to action with idle, hover and pressed states that animate between each other.",
+      props: { Label: "Get started", "Plays on": { motion: "trigger", value: "manual" } }
+    }, (state, id) => {
+      const bg = k.stack(id, {
+        direction: "HORIZONTAL",
+        ...hug,
+        justify: "CENTER",
+        fill: state === "Pressed" ? "accentPressed" : "accent",
+        radius: 12,
+        padding: { top: 14, right: 28, bottom: 14, left: 28 },
+        effects: [shadow(state === "Hover" ? 22 : 10, state === "Hover" ? 10 : 4, state === "Pressed" ? 0.08 : 0.16)],
+        name: "Background"
+      });
+      const text = label(bg, "Label", "Label 15", state === "Pressed" ? "onAccentPressed" : "onAccent");
+      if (state === "Hover") {
+        k.animate(bg, "translateY", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 220, v: -3 }]);
+        k.animate(bg, "effects[@e1].blur", [{ t: 0, v: 10, ease: ease.out("expo") }, { t: 600, v: 22 }]);
+        k.animate(text, "translateX", [{ t: 0, v: 0, ease: ease.back(1.9) }, { t: 320, v: 2 }]);
+      }
+      if (state === "Pressed") for (const axis of ["scaleX", "scaleY"]) k.animate(bg, axis, [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
+    }, (state) => ({ timeline: { duration: state === "Hover" ? 600 : 400, fps: FPS } }));
+    k.changeTo("Button/Idle", "ON_HOVER", "Button/Hover", 180);
+    k.changeTo("Button/Hover", "ON_PRESS", "Button/Pressed", 90);
+    k.component("Lower third", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 4e3, fps: FPS, markers: marks(700, 3300, 4e3) },
+      description: "A name and title for video: slides in, holds, slides out. Play a range (In, Out) to use just one part.",
+      props: { Name: "Ada Lovelace", Title: "Head of Research", "Plays on": { motion: "trigger", value: "load" } }
+    }, (id) => {
+      const bar = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 14, fill: "card", radius: 10, padding: { top: 12, right: 22, bottom: 12, left: 12 }, effects: [shadow(24, 8)], name: "Bar" });
+      const accent = k.rect(bar, 6, 52, "accent", { radius: 3, name: "Accent" });
+      k.patch(accent, { anchorX: 0.5, anchorY: 1 });
+      const copy = k.stack(bar, { width: "HUG", gap: 2, name: "Copy" });
+      const name = label(copy, "Name", "Title 18", "primary"), title = label(copy, "Title", "Body 14", "muted");
+      k.animate(bar, "translateX", [{ t: 0, v: -48, ease: ease.out("expo") }, { t: 600, v: 0, ease: ease.named("cubic", "in") }, { t: 3300, v: 0 }, { t: 3900, v: -48 }]);
+      k.animate(bar, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 300, v: 1 }, { t: 3600, v: 1 }, { t: 3950, v: 0 }]);
+      k.animate(accent, "scaleY", [{ t: 100, v: 0, ease: ease.back(1.9) }, { t: 560, v: 1 }]);
+      k.animate(name, "opacity", [{ t: 180, v: 0, ease: ease.out("cubic") }, { t: 520, v: 1 }]);
+      k.animate(title, "opacity", [{ t: 300, v: 0, ease: ease.out("cubic") }, { t: 660, v: 1 }]);
+      k.animate(title, "translateY", [{ t: 300, v: 6, ease: ease.out("cubic") }, { t: 660, v: 0 }]);
+    });
+    k.component("Stat counter", {
+      ...hug,
+      timeline: { duration: 1400, fps: FPS },
+      description: "A figure with its label and a bar that fills to Percent (0\u2013100). The figure is text: counting up waits for text animators.",
+      props: { Value: "72%", Label: "Weekly active users", Percent: { number: 72, min: 0, max: 100, step: 1 } }
+    }, (id) => {
+      const card = k.stack(id, { width: "HUG", gap: 8, fill: "card", radius: 16, padding: { top: 20, right: 24, bottom: 24, left: 24 }, effects: [shadow(24, 8, 0.1)], name: "Card" });
+      const value = label(card, "Value", "Stat 44", "primary"), caption = label(card, "Label", "Body 14", "muted");
+      const track = k.stack(card, { direction: "HORIZONTAL", width: 240, height: 8, align: "CENTER", fill: "track", radius: 4, name: "Track" });
+      const fill = k.rect(track, 172.8, 8, "accent", { radius: 4, name: "Fill" });
+      k.animate(value, "translateY", [{ t: 0, v: 16, ease: ease.out("expo") }, { t: 700, v: 0 }]);
+      k.animate(value, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 300, v: 1 }]);
+      k.animate(caption, "opacity", [{ t: 150, v: 0, ease: ease.out("quad") }, { t: 500, v: 1 }]);
+      k.animate(fill, "width", [{ t: 200, v: 0, ease: ease.out("expo") }, { t: 1300, v: 172.8 }]);
+      k.bindKey(fill, "width", 1300, { prop: "Percent", mul: 2.4 });
+    });
+    const D = 132, W = 12;
+    k.component("Progress ring", {
+      ...hug,
+      timeline: { duration: 1200, fps: FPS },
+      description: "A ring that fills clockwise to Percent (0\u2013100), with a caption and a label.",
+      props: { Percent: { number: 72, min: 0, max: 100, step: 1 }, Caption: "72%", Label: "Storage used" }
+    }, (id) => {
+      const card = k.stack(id, { ...hug, gap: 12, fill: "card", radius: 16, padding: { top: 20, right: 28, bottom: 20, left: 28 }, effects: [shadow(24, 8, 0.1)], name: "Card" });
+      const dial = k.stack(card, { direction: "HORIZONTAL", width: D, height: D, align: "CENTER", name: "Dial" });
+      const ring = (parent, color, name) => k.ellipse(parent, D, [], { stroke: { color, width: W, align: "INSIDE", cap: "NONE", join: "MITER" }, absolute: { x: 0, y: 0 }, name });
+      const half = (parent, x, name) => k.stack(parent, { direction: "HORIZONTAL", width: D / 2, height: D, align: "CENTER", clip: true, absolute: { x, y: 0 }, name });
+      ring(dial, "track", "Track");
+      const arcB = half(half(dial, 0, "Left half"), 0, "Arc B");
+      ring(arcB, "accent", "Ring B");
+      const arcA = half(half(dial, D / 2, "Right half"), -D / 2, "Arc A");
+      ring(arcA, "accent", "Ring A");
+      k.patch(arcA, { anchorX: 1, anchorY: 0.5, rotation: 180 });
+      k.patch(arcB, { anchorX: 1, anchorY: 0.5, rotation: -100.8 });
+      const caption = k.propText(dial, "Caption", { style: "Title 18", color: "primary", width: D, align: "CENTER", absolute: { x: 0, y: D / 2 - 12 } });
+      label(card, "Label", "Body 14", "muted");
+      k.animate(arcA, "rotation", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 1100, v: 259.2 }]);
+      k.bindKey(arcA, "rotation", 1100, { prop: "Percent", mul: 3.6 });
+      k.behave(arcA, "rotation", [{ kind: "clamp", min: 0, max: 180 }]);
+      k.animate(arcB, "rotation", [{ t: 0, v: -360, ease: ease.out("cubic") }, { t: 1100, v: -100.8 }]);
+      k.bindKey(arcB, "rotation", 1100, { prop: "Percent", mul: 3.6, add: -360 });
+      k.behave(arcB, "rotation", [{ kind: "clamp", min: -180, max: 0 }]);
+      k.animate(caption, "opacity", [{ t: 300, v: 0, ease: ease.out("quad") }, { t: 700, v: 1 }]);
+    });
+    k.component("Loader", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 900, fps: FPS },
+      description: "Three dots that bounce in turn, for as long as something loads.",
+      props: { Loop: { motion: "loop", value: "loop" }, Speed: { motion: "speed", value: 1 }, Start: { motion: "start", value: 0 } }
+    }, (id) => {
+      const row2 = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 8, padding: { top: 14, right: 4, bottom: 4, left: 4 }, name: "Dots" });
+      for (const i of [1, 2, 3]) {
+        const dot = k.ellipse(row2, 12, "accent", { name: `Dot ${i}` });
+        k.animate(dot, "translateY", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 220, v: -12, ease: ease.named("quad", "in") }, { t: 440, v: 0 }]);
+        k.animate(dot, "opacity", [{ t: 0, v: 0.45, ease: ease.out("quad") }, { t: 220, v: 1, ease: ease.named("quad", "in") }, { t: 440, v: 0.45 }]);
+      }
+      k.stagger(row2, 140);
+    });
+    k.component("Toast", {
+      ...hug,
+      timeline: { duration: 3400, fps: FPS, markers: marks(500, 2800, 3400) },
+      description: "A notification that rises in, stays, and leaves. Play In \u2192 Shown to leave it up.",
+      props: { Title: "Changes saved", Message: "Everyone on the file sees the new version.", "Plays on": { motion: "trigger", value: "load" } }
+    }, (id) => {
+      const card = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 12, fill: "card", radius: 12, padding: { top: 14, right: 20, bottom: 14, left: 14 }, effects: [shadow(28, 12, 0.16)], name: "Card" });
+      const icon = badge(card, 28, "success", "Icon");
+      glyph(icon, "\u2713", "onSuccess", "Check");
+      const copy = k.stack(card, { width: "HUG", gap: 2, name: "Copy" });
+      label(copy, "Title", "Label 15", "primary");
+      label(copy, "Message", "Body 14", "muted");
+      k.animate(card, "translateY", [{ t: 0, v: 28, ease: ease.back(1.9) }, { t: 480, v: 0, ease: ease.named("cubic", "in") }, { t: 2800, v: 0 }, { t: 3300, v: 20 }]);
+      k.animate(card, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 220, v: 1 }, { t: 3e3, v: 1 }, { t: 3300, v: 0 }]);
+      for (const axis of ["scaleX", "scaleY"]) k.animate(icon, axis, [{ t: 160, v: 0, ease: ease.back(2.2) }, { t: 520, v: 1 }]);
+    });
+    k.component("Badge pop", {
+      direction: "HORIZONTAL",
+      ...hug,
+      padding: 12,
+      timeline: { duration: 900, fps: FPS },
+      description: "A label that pops in with overshoot and a spreading glow. Color sets the badge.",
+      props: { Label: "NEW", Color: { color: "accent" } }
+    }, (id) => {
+      const pill = k.stack(id, { direction: "HORIZONTAL", ...hug, fill: "accent", radius: 999, padding: { top: 6, right: 12, bottom: 6, left: 12 }, effects: [shadow(0, 0, 0)], name: "Badge" });
+      k.bindPath(pill, "fills[#0].color", "Color");
+      label(pill, "Label", "Caption 12", "onAccent");
+      for (const axis of ["scaleX", "scaleY"]) k.animate(pill, axis, [{ t: 0, v: 0, ease: ease.back(2.4) }, { t: 450, v: 1 }]);
+      k.animate(pill, "effects[@e1].spread", [{ t: 150, v: 0, ease: ease.out("expo") }, { t: 850, v: 10 }]);
+      k.animate(pill, "effects[@e1].blur", [{ t: 150, v: 0, ease: ease.out("expo") }, { t: 850, v: 12 }]);
+      k.animate(pill, "effects[@e1].color", [{ t: 150, v: { ...INK, a: 0.3 }, ease: ease.out("quad") }, { t: 850, v: { ...INK, a: 0 } }]);
+    });
+    k.component("Subscribe CTA", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 1e3, fps: FPS },
+      description: "A subscribe button: its badge wiggles and the pill swells when it plays (on hover by default).",
+      props: { Label: "Subscribe", Count: "12.4K", Accent: { color: "accent" }, "Plays on": { motion: "trigger", value: "hover" } }
+    }, (id) => {
+      const pill = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 10, fill: "accent", radius: 999, padding: { top: 12, right: 22, bottom: 12, left: 18 }, effects: [shadow(18, 6, 0.18)], name: "Pill" });
+      k.bindPath(pill, "fills[#0].color", "Accent");
+      const bell = badge(pill, 22, "card", "Icon");
+      glyph(bell, "+", "primary", "Plus");
+      label(pill, "Label", "Label 15", "onAccent");
+      const count = label(pill, "Count", "Caption 12", "onAccent");
+      const wiggle = [0, 18, -14, 9, -5];
+      k.animate(bell, "rotation", [...wiggle.map((v, i) => ({ t: [0, 120, 260, 400, 540][i], v, ease: ease.inOut("sine") })), { t: 680, v: 0 }]);
+      for (const axis of ["scaleX", "scaleY"]) k.animate(pill, axis, [{ t: 0, v: 1, ease: ease.out("cubic") }, { t: 180, v: 1.06, ease: ease.inOut("cubic") }, { t: 520, v: 1 }]);
+      k.animate(count, "translateY", [{ t: 200, v: -6, ease: ease.back(1.9) }, { t: 560, v: 0 }]);
+    });
+    k.component("Social handle", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 1100, fps: FPS },
+      description: "Your handle as a tag: the @ drops in and the name unrolls, when it comes into view.",
+      props: { Handle: "{{brand.handle}}", "Plays on": { motion: "trigger", value: "inView" } }
+    }, (id) => {
+      const tag = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 10, fill: "card", radius: 999, padding: { top: 6, right: 18, bottom: 6, left: 6 }, effects: [shadow(16, 6, 0.12)], name: "Tag" });
+      k.patch(tag, { anchorX: 0, anchorY: 0.5 });
+      const mark = badge(tag, 30, "accent", "Mark");
+      glyph(mark, "@", "onAccent", "At");
+      const handle = label(tag, "Handle", "Label 15", "primary");
+      k.animate(tag, "scaleX", [{ t: 0, v: 0.2, ease: ease.out("expo") }, { t: 700, v: 1 }]);
+      k.animate(tag, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 200, v: 1 }]);
+      k.animate(mark, "translateY", [{ t: 100, v: -24, ease: ease.named("bounce", "out") }, { t: 700, v: 0 }]);
+      k.animate(handle, "opacity", [{ t: 350, v: 0, ease: ease.out("cubic") }, { t: 800, v: 1 }]);
+      k.animate(handle, "translateX", [{ t: 350, v: -8, ease: ease.out("cubic") }, { t: 800, v: 0 }]);
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Motion essentials");
+    k.flowSheet(sheet, 40, { top: 72, right: 80, bottom: 80, left: 80 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { width: 1440, height: 880 });
+    k.timeline(sheet, { duration: 4e3, fps: FPS });
+    k.text(sheet, "Motion essentials", { style: "Display 40", color: "text", autoWidth: true, name: "Title" });
+    k.text(sheet, "Nine motion components. Each instance plays its own timeline \u2014 its own start, speed, loop and trigger \u2014 with its own words, numbers and colours.", { style: "Body 14", color: "onPaper", name: "Intro" });
+    const row = (name) => k.stack(sheet, { direction: "HORIZONTAL", ...hug, gap: 32, name });
+    const buttons = row("Buttons");
+    k.instance(buttons, "Button", { Label: "Get started" });
+    k.instance(buttons, "Subscribe CTA", { Label: "Subscribe", Count: "12.4K", Accent: hex("#E5484D") });
+    k.instance(buttons, "Subscribe CTA", { Label: "Follow", Count: "3.1K" }, { playback: { trigger: "load", start: 900 } });
+    k.instance(buttons, "Badge pop", { Label: "NEW" }, { playback: { start: 300 } });
+    k.instance(buttons, "Badge pop", { Label: "LIVE", Color: hex("#E5484D") }, { playback: { start: 700 } });
+    k.instance(buttons, "Social handle", { Handle: "{{brand.handle}}" });
+    const video = row("Video");
+    k.instance(video, "Lower third", { Name: "Ada Lovelace", Title: "Head of Research" }, { playback: { range: ["in", "shown"] } });
+    k.instance(video, "Toast", {}, { playback: { start: 400 } });
+    const data = row("Data");
+    k.instance(data, "Stat counter", { Value: "72%", Label: "Weekly active users", Percent: 72 });
+    k.instance(data, "Stat counter", { Value: "38%", Label: "Trial conversion", Percent: 38 }, { playback: { start: 250 } });
+    k.instance(data, "Progress ring", { Percent: 72, Caption: "72%", Label: "Storage used" });
+    k.instance(data, "Progress ring", { Percent: 45, Caption: "45%", Label: "Course progress" }, { playback: { start: 300, speed: 0.7 } });
+    const loading = row("Loading");
+    k.instance(loading, "Loader");
+    k.instance(loading, "Loader", {}, { playback: { speed: 1.6 } });
+    k.instance(loading, "Loader", {}, { playback: { start: 450, loop: "pingpong" } });
+    return k.finish();
+  }
+});
+
+export {
+  motion_essentials_default
+};

package/dist/chunks/chunk-VUFFLAWP.js

@@ -0,0 +1,172 @@
+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,
+  board as board2,
+  boardHead,
+  change,
+  chart,
+  fitListings,
+  floorBrand,
+  ledWell,
+  listings,
+  row,
+  stamp,
+  tape
+} from "./chunk-6KGS32FI.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  board,
+  put,
+  reboard,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  glow
+} from "./chunk-M6VTXO6F.js";
+import {
+  pill
+} 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/black-friday-ticker-ads.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Black Friday ticker display ad set";
+var CHART = { w: 424, h: 170 };
+var black_friday_ticker_ads_default = defineTemplate({
+  id: "social-black-friday-ticker-display-ads",
+  meta: {
+    name: NAME,
+    description: "Display ads for a SaaS Black Friday sale, drawn as a trading floor: the offer in heavy serif on salmon newspaper paper, a ticker tape of the plans, and an LED board with the crashed annual price, its 60% fall and a candlestick chart off a cliff. 1200 \xD7 628 and 1200 \xD7 1200, with 4:5 and LinkedIn cuts",
+    category: "social",
+    tags: ["black friday", "cyber monday", "sale", "ad", "display ad", "google ads", "saas", "stock ticker", "trading floor", "chart", "pricing", "annual plan"],
+    platforms: ["web", "facebook", "linkedin", "instagram"],
+    formats: ["ad", "banner", "post", "portrait-post"],
+    useCases: ["sale", "pricing"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("ad-landscape"));
+    k.quantizeGeometry = true;
+    floorBrand(k, { name: DEAL.product, symbol: DEAL.symbol, offer: "Our prices crashed. Buy the dip.", pitch: `Every annual plan ${DEAL.off}% off. ${DEAL.pitch}` }, ["paper", "text", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    k.textStyle("Tape 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 0.8, lineHeight: 24 });
+    k.textStyle("Marker 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 22 });
+    k.textStyle("Display 54", { ...SERIF, size: 54, fontWeight: 900, letterSpacing: -1.8, lineHeight: 56 });
+    k.textStyle("Display 96", { ...SERIF, size: 96, fontWeight: 900, letterSpacing: -3.2, lineHeight: 94 });
+    k.textStyle("Figure 130", { ...MONO, size: 130, fontWeight: 800, letterSpacing: -4, lineHeight: 138, fontFeatures: { tnum: 1 } });
+    k.textStyle("Display 112", { ...SERIF, size: 112, fontWeight: 900, letterSpacing: -3.8, lineHeight: 108 });
+    k.textStyle("Pitch 22", { size: 22, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Pitch 30", { size: 30, fontWeight: 500, lineHeight: 40 });
+    k.textStyle("Button 22", { size: 22, fontWeight: 800, lineHeight: 28 });
+    k.textStyle("Label 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.2, lineHeight: 20 });
+    k.textStyle("Label 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Figure 96", { ...MONO, size: 96, fontWeight: 800, letterSpacing: -3, lineHeight: 104, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 180", { ...MONO, size: 180, fontWeight: 800, letterSpacing: -6, lineHeight: 190, fontFeatures: { tnum: 1 } });
+    k.textStyle("Change 28", { ...MONO, size: 28, fontWeight: 800, lineHeight: 32 });
+    k.textStyle("Change 56", { ...MONO, size: 56, fontWeight: 800, lineHeight: 62 });
+    k.textStyle("Axis 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Row 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 22, fontFeatures: { tnum: 1 } });
+    k.textStyle("Row 30", { ...MONO, size: 30, fontWeight: 700, lineHeight: 40, fontFeatures: { tnum: 1 } });
+    k.textStyle("Stamp 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 18 });
+    k.textStyle("Stamp 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.4, lineHeight: 28 });
+    k.textStyle("Marker 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.4, lineHeight: 30 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 38 });
+    pill(k, "Marker", { fill: "accent", ink: "onAccent", style: "Marker 16", label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV", pad: [6, 12], radius: 3 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 22", label: `Buy the dip, ${DEAL.off}% off`, pad: [14, 28], radius: 8 });
+    pill(k, "Marker large", { fill: "accent", ink: "onAccent", style: "Marker 24", label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV", pad: [9, 18], radius: 4 });
+    pill(k, "Button large", { fill: "primary", ink: "onPrimary", style: "Button 32", label: `Buy the dip, ${DEAL.off}% off`, pad: [22, 40], radius: 12 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 92, right: 56, bottom: 44, left: 56 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    listings(k, sheet, 1200, 628, { u: 0.8 });
+    glow(k, sheet, { x: 220, y: 200, w: 1200, role: "light", alpha: 0.2, name: "Page light" });
+    tape(k, sheet, { item: 372, height: 52, style: "Tape 20", width: 1200, absolute: { x: 0, y: 0 }, offset: 40, span: 1200 });
+    const ad = k.stack(sheet, { direction: "HORIZONTAL", gap: 52, align: "CENTER", name: "Ad" });
+    const copy = k.stack(ad, { gap: 18, name: "Copy" });
+    k.instance(copy, "Marker", { Label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV" }, { name: "Dates" });
+    k.text(copy, "{{brand.offer}}", { style: "Display 54", color: "text", name: "Offer" });
+    k.text(copy, "{{brand.pitch}}", { style: "Pitch 22", color: "onPaper", name: "Pitch" });
+    k.instance(copy, "Button", { Label: `Buy the dip, ${DEAL.off}% off` }, { name: "Buy button" });
+    const b = board2(k, ad, { width: 480, pad: 28, gap: 12, radius: 22, u: 0.8 });
+    boardHead(k, b, { label: "{{brand.symbol}}.TEAM \xB7 ANNUAL", note: "BLACK FRIDAY", style: "Label 16", lamp: 10 });
+    const main = k.stack(b, { gap: 12, name: "Board main" });
+    ledWell(k, main, { height: 126, step: 5, weight: 1, pad: 18, align: "SPACE_BETWEEN", name: "Price well" }, (well) => {
+      k.text(well, `$${DEAL.teamNow}`, { style: "Figure 96", color: "led", autoWidth: true, name: "Price figure" });
+      const side = k.stack(well, { width: "HUG", gap: 4, align: "MAX", name: "Change" });
+      change(k, side, `${DEAL.off}%`, { style: "Change 28", size: 20, name: "Fall", glow: 8 });
+      k.text(side, `LIST $${DEAL.teamWas}`, { style: "Label 16", color: "cardMuted", autoWidth: true, name: "List price" });
+    });
+    const c = chart(k, board(k, main, CHART.w, CHART.h, 1, "Chart board"), { ...CHART, u: 0.6, was: `$${DEAL.teamWas}`, now: `$${DEAL.teamNow}`, style: "Axis 16", absolute: { x: 0, y: 0 } });
+    row(k, b, "YOU KEEP, THIS YEAR", `$${DEAL.teamWas - DEAL.teamNow}`, { style: "Row 16", color: "onCard", figureColor: "led", name: "Keep row" });
+    stamp(k, c.frame, "SELL-OFF", { style: "Stamp 24", pad: [5, 12], rotation: 5, absolute: { x: c.room.x - 8, y: c.room.y - 2 } });
+    const tall = (kit, id, w, h) => {
+      fitListings(kit, id);
+      put(kit, id, "Tape", 0, 0, { width: w });
+      put(kit, id, "Page light", w * 0.2 - 600, h * 0.2 - 600);
+      for (const n of kit.named(id, "Ad")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 40, counterAxisSpacing: 40, counterAxisAlignItems: "MIN", primaryAxisAlignItems: "MIN" });
+      for (const n of kit.named(id, "Copy")) kit.patch(n, { layoutSizingHorizontal: "FILL", itemSpacing: 20, counterAxisSpacing: 20 });
+      restyle(kit, id, "Pitch", "Pitch 30");
+      for (const [name, comp] of [["Dates", "Marker large"], ["Buy button", "Button large"]]) for (const n of kit.named(id, name)) kit.patch(n, { mainComponentId: kit.componentIdOf(comp) });
+      restyle(kit, id, "Stamp words", "Stamp 16");
+      for (const n of kit.named(id, "Board")) kit.patch(n, { layoutSizingHorizontal: "FILL", padding: { top: 36, right: 36, bottom: 36, left: 36 }, itemSpacing: 18, counterAxisSpacing: 18 });
+      restyle(kit, id, "Fall figure", "Change 56");
+      restyle(kit, id, "List price", "Label 22");
+      for (const name of ["Board label", "Board note"]) restyle(kit, id, name, "Label 22");
+      for (const name of ["Keep row label", "Keep row figure"]) restyle(kit, id, name, "Row 30");
+    };
+    k.variants(sheet, [
+      {
+        // The square: the price beside its chart.
+        preset: "ad-square",
+        adjust: (kit, id) => {
+          kit.patch(id, { padding: { top: 108, right: 72, bottom: 56, left: 72 }, primaryAxisAlignItems: "CENTER" });
+          tall(kit, id, 1200, 1200);
+          restyle(kit, id, "Offer", "Display 112");
+          restyle(kit, id, "Price figure", "Figure 130");
+          for (const n of kit.named(id, "Board main")) kit.patch(n, { layoutMode: "HORIZONTAL", itemSpacing: 18, counterAxisSpacing: 18 });
+          for (const n of kit.named(id, "Price well")) kit.patch(n, { layoutMode: "VERTICAL", height: 230, primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", itemSpacing: 6, padding: { top: 0, right: 0, bottom: 0, left: 0 } });
+          for (const n of kit.named(id, "Change")) kit.patch(n, { counterAxisAlignItems: "CENTER" });
+          reboard(kit, id, "Chart board", 1.35);
+        }
+      },
+      {
+        preset: "ig-portrait",
+        adjust: (kit, id) => {
+          kit.patch(id, { padding: { top: 92, right: 64, bottom: 44, left: 64 }, primaryAxisAlignItems: "CENTER" });
+          tall(kit, id, 1080, 1350);
+          restyle(kit, id, "Offer", "Display 96");
+          restyle(kit, id, "Price figure", "Figure 180");
+          for (const n of kit.named(id, "Price well")) kit.patch(n, { height: 200, padding: { top: 0, right: 28, bottom: 0, left: 28 } });
+          reboard(kit, id, "Chart board", 2.07);
+        }
+      },
+      { preset: "linkedin-post", adjust: (kit, id) => {
+        fitListings(kit, id, 0.8);
+        put(kit, id, "Tape", 0, 0, { width: 1200 });
+      } }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_ticker_ads_default
+};

package/dist/chunks/chunk-VUI34P2Z.js

@@ -0,0 +1,52 @@
+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 {
+  AI_LIMITS,
+  init_limits,
+  str
+} from "./chunk-4VICNBUI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/ai/context.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_limits();
+function joinWithin(lines, maxChars) {
+  let out = "";
+  for (const line of lines) {
+    const next = out ? `${out}
+${line}` : line;
+    if (next.length > maxChars) break;
+    out = next;
+  }
+  return out;
+}
+var hex = (c) => "#" + [c.r, c.g, c.b].map((v) => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, "0")).join("");
+function buildDesignContext(doc, maxChars = AI_LIMITS.maxContextChars) {
+  const lines = [];
+  const paints = Object.values(doc.styles ?? {}).filter((s) => s.type === "PAINT").slice(0, 24);
+  const solid = paints.map((s) => {
+    const p = s.type === "PAINT" ? s.paints.find((x) => x.type === "SOLID" && x.color) : void 0;
+    return p?.color ? `${s.name} ${hex(p.color)}` : null;
+  }).filter(Boolean);
+  if (solid.length) lines.push(`Color styles: ${solid.join("; ")}`);
+  const texts = Object.values(doc.styles ?? {}).filter((s) => s.type === "TEXT").slice(0, 12);
+  if (texts.length) lines.push(`Text styles: ${texts.map((t) => `${t.name} ${t.fontFamily} ${t.fontWeight} ${t.fontSize}px`).join("; ")}`);
+  const colorVars = Object.values(doc.variables ?? {}).filter((v) => v.type === "COLOR").slice(0, 24).map((v) => {
+    const col = doc.variableCollections?.[v.variableCollectionId];
+    const val = col ? v.valuesByMode[col.defaultModeId] : Object.values(v.valuesByMode)[0];
+    return val && typeof val === "object" && "r" in val ? `${v.name} ${hex(val)}` : null;
+  }).filter(Boolean);
+  if (colorVars.length) lines.push(`Color variables: ${colorVars.join("; ")}`);
+  return joinWithin(lines.map((l) => str(l, maxChars)), maxChars);
+}
+
+export {
+  joinWithin,
+  buildDesignContext
+};