@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-4Y7SXYC4.js

@@ -1,172 +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 {
-  brand,
-  caption,
-  captionCues,
-  captionParts,
-  column,
-  glow,
-  rig,
-  sizes,
-  stage,
-  typeStep
-} from "./chunk-ZPQYHYFA.js";
-import {
-  key
-} from "./chunk-FAAVZ2GX.js";
-import {
-  PHONE,
-  deviceShadow
-} from "./chunk-SKMGZGNY.js";
-import {
-  HOME_PARTS,
-  PHONE_SCREEN,
-  appScreens,
-  homePart
-} from "./chunk-7LNASDR7.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  contextFrame,
-  init_scene3d,
-  sceneLayers
-} from "./chunk-MF4NUZBE.js";
-import {
-  init_transform3d,
-  mul4,
-  transform4
-} from "./chunk-7ECF2YL5.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion3d/exploded-ui.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-init_scene3d();
-init_transform3d();
-var DURATION = 8e3;
-var FPS = 30;
-var SIZES = ["video-square", "video-1080p"];
-var BEZEL = (PHONE.width - PHONE_SCREEN.width) / 2;
-var LIFT = 70;
-var PLATE = 10;
-var OPEN = 900;
-var OPENED = 2300;
-var CLOSE = 6300;
-var CLOSED = 7500;
-var LABELS = { Greeting: "Personal greeting", Balance: "Live balance", Shortcuts: "One-tap shortcuts", Activity: "Every transaction", "Tab bar": "Four tabs, that\u2019s all" };
-var CAPTION = { name: "Caption", kicker: "Inside Fern", title: "Everything you need. Nothing you don\u2019t.", body: "Your balance, shortcuts, activity and navigation \u2014 each one tap away." };
-var CUES = [
-  ...captionCues(CAPTION, 300),
-  { layer: "Caption", preset: "fade-out", at: CLOSED, params: { duration: 400 } }
-];
-function build(k, sheet, s) {
-  k.nameSheet(sheet, `Exploded UI \xB7 ${preset(s.preset).name}`);
-  glow(k, sheet, "primary", Math.round(1100 * s.u), s.wide ? s.W * 0.66 : s.W / 2, s.wide ? s.H * 0.55 : s.H * 0.64, 0.5);
-  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 3200 * s.u });
-  const iso = rig(k, scene, s, "Isometric", PHONE.width, PHONE.height, s.wide ? s.W * 0.7 : s.W * 0.61, s.wide ? s.H * 0.62 : s.H * 0.8);
-  const zoom = s.wide ? 0.8 : 0.54;
-  k.patch(iso, { rotateX: 58, scaleX: zoom, scaleY: zoom });
-  const turn = k.group(iso, { x: 0, y: 0, width: PHONE.width, height: PHONE.height }, { name: "Turn" });
-  k.patch(turn, { rotation: -42 });
-  const home = k.finish().nodes[k.componentIdOf("Screen / Home")];
-  const place = (name) => {
-    const n = Object.values(k.doc.nodes).find((x) => x.parentId === home.id && x.name === name);
-    return { x: BEZEL + n.x, y: BEZEL + n.y };
-  };
-  const layers = [];
-  layers.push({ id: k.rect(turn, PHONE.width, PHONE.height, "device", { radius: PHONE.radius, name: "Phone", stroke: { color: "deviceEdge", width: 3, align: "INSIDE" } }) });
-  const glass = k.rect(turn, PHONE_SCREEN.width, PHONE_SCREEN.height, "screen", { radius: PHONE_SCREEN.radius, name: "Screen" });
-  k.patch(glass, { x: BEZEL, y: BEZEL });
-  layers.push({ id: glass });
-  for (const part of HOME_PARTS) {
-    const card = k.stack(turn, { width: PHONE_SCREEN.width - 48 + 2 * PLATE, fill: "screen", radius: 18, padding: PLATE, name: `${part} layer`, effects: [deviceShadow(0.18, 12, 30)] });
-    homePart(k, card, part);
-    const at = place(part);
-    k.patch(card, { x: at.x - PLATE, y: at.y - PLATE });
-    layers.push({ id: card, label: LABELS[part] });
-  }
-  const tabs = k.instance(turn, "Tab bar/Home", {}, { name: "Tab bar" });
-  k.patch(tabs, { x: BEZEL, y: BEZEL + PHONE_SCREEN.height - 84 });
-  layers.push({ id: tabs, label: LABELS["Tab bar"] });
-  const RANK = [0, 1, 7, 6, 5, 4, 3, 2];
-  layers.forEach(({ id }, i) => {
-    const z = RANK[i] * LIFT, d = RANK[i] * 60;
-    k.patch(id, { z });
-    key(k, id, "z", [[OPEN + d, 0, ease.back(1.4)], [OPENED + d, z, ease.hold], [CLOSE - d, z, ease.inOut("cubic")], [CLOSED - d, 0]]);
-  });
-  const doc = k.finish();
-  const frame = contextFrame(doc.nodes[scene]);
-  const cards = sceneLayers(doc.nodes, scene);
-  const seen = (id, x, y) => {
-    const c = cards.find((l) => l.id === id);
-    const p = transform4(mul4(frame.projection, mul4(frame.view, c.model)), x, y, 0);
-    return { x: p[0] / p[3], y: p[1] / p[3] };
-  };
-  const phone = layers[0].id;
-  const left = Math.min(...[[0, 0], [PHONE.width, 0], [0, PHONE.height], [PHONE.width, PHONE.height]].map(([x, y]) => seen(phone, x, y).x));
-  const labelStyle = typeStep(k, s, "label");
-  const gap = Math.round(14 * s.u);
-  layers.forEach(({ id, label }, i) => {
-    if (!label) return;
-    const n = k.node(id);
-    const at = seen(id, 0, Math.min(n.height, 90) / 2);
-    const edge = Math.min(left, at.x) - Math.round(40 * s.u);
-    const tag = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap, align: "CENTER", name: `${label} label` });
-    k.text(tag, label, { style: labelStyle, color: "text", autoWidth: true, name: "Label" });
-    k.rect(tag, Math.max(Math.round(24 * s.u), Math.round(at.x - edge - gap)), 3, "accent", { radius: 2, name: "Rule" });
-    const box = k.finish().nodes[tag];
-    const text = k.node(k.node(tag).childIds[0]);
-    k.patch(tag, { layoutPositioning: "ABSOLUTE", x: Math.round(edge - text.width), y: Math.round(at.y - box.height / 2) });
-    const d = RANK[i] * 60;
-    key(k, tag, "opacity", [[OPENED + d - 200, 0, ease.out("cubic")], [OPENED + d + 200, 1, ease.hold], [CLOSE - d - 300, 1, ease.out("cubic")], [CLOSE - d, 0]]);
-    key(k, tag, "translateX", [[OPENED + d - 200, Math.round(-30 * s.u), ease.out("cubic")], [OPENED + d + 200, 0]]);
-  });
-  const col = column(s, s.wide ? 120 : 90);
-  captionParts(k, s, { kicker: CAPTION.kicker });
-  const width = s.wide ? Math.round(460 * s.u) : col.width;
-  const block = caption(k, sheet, s, { ...CAPTION, step: "subtitle", width, align: s.wide ? "LEFT" : "CENTER", at: { x: s.wide ? Math.round(130 * s.u) : col.x, y: 0 } });
-  const laid = k.finish().nodes[block];
-  k.patch(block, { y: Math.round(s.wide ? (s.H - laid.height) / 2 - 40 * s.u : 70 * s.u) });
-  k.cues(sheet, CUES);
-}
-var exploded_ui_default = defineTemplate({
-  id: "motion-3d-exploded-ui",
-  meta: {
-    name: "Exploded UI",
-    description: "An app screen seen from above in isometric 3D comes apart into its layers \u2014 screen, greeting, balance, shortcuts, activity, tab bar \u2014 each labelled, then snaps back together. An 8-second loop, square and 16:9 at 30 fps; the layers are your screen's own components",
-    category: "animation",
-    tags: ["animation", "3d", "app", "isometric", "exploded", "layers", "ui", "features", "case study"],
-    platforms: ["instagram", "linkedin", "x", "youtube", "web"],
-    formats: ["post", "video", "ad"],
-    useCases: ["launch", "announcement"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  motion: { cues: CUES },
-  build() {
-    const k = new Kit("Exploded UI", preset(SIZES[0]));
-    brand(k, "dark");
-    appScreens(k, ["Home"]);
-    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
-    k.setCover(cover);
-    return k.finish();
-  }
-});
-
-export {
-  exploded_ui_default
-};

package/dist/chunks/chunk-4YFMC6OS.js

@@ -1,142 +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 {
-  ARIAL,
-  COURIER,
-  MAIL_W,
-  callToAction,
-  finishMail,
-  mailButton,
-  mailFooter,
-  mailHeader,
-  mailRow,
-  mailSheet,
-  section,
-  swell
-} from "./chunk-NHOHED2C.js";
-import {
-  dotPaths,
-  tick
-} from "./chunk-YNOCYFZ4.js";
-import {
-  MONO
-} from "./chunk-X23ZWFW2.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/email/saas-mail-sign-in-code.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 4e3;
-var HEADER_H = 148;
-var DIAL = { size: 92, r: 38, ticks: 10 };
-var cues = [
-  { layer: "Minutes", preset: "pulse", at: 600, params: { duration: 700, amount: 0.08 } }
-];
-var ASKED = [
-  ["When", "Friday 2 October 2026, 14:02 UTC"],
-  ["Where", "Chrome on macOS, near Lisbon, Portugal"],
-  ["For", "mara@haldenstudio.example"]
-];
-function dialTicks(from, to) {
-  const c = DIAL.size / 2;
-  return Array.from({ length: to - from }, (_, i) => {
-    const a = (from + i) / DIAL.ticks * Math.PI * 2;
-    const sx = Math.sin(a), sy = -Math.cos(a);
-    return { closed: false, points: [{ x: c + sx * (DIAL.r - 9), y: c + sy * (DIAL.r - 9) }, { x: c + sx * DIAL.r, y: c + sy * DIAL.r }] };
-  });
-}
-var saas_mail_sign_in_code_default = defineTemplate({
-  id: "email-saas-mail-sign-in-code",
-  meta: {
-    name: "SaaS lifecycle email: password reset and sign-in code",
-    description: "A whole 600 px password reset or magic-link email, plain and fast to read: a thin brand strip with a ten-minute dial, then the six-digit code as large live text with its expiry, the same code as a one-click button, and who asked and from where, with what to do if it was not you. The strip loops for four seconds (export it as a GIF); the body is table-safe type",
-    category: "email",
-    tags: ["email", "saas", "lifecycle", "password reset", "magic link", "sign in", "verification code", "one-time code", "security", "transactional", "monochrome", "animated", "gif", "html"],
-    platforms: ["email"],
-    formats: ["email"],
-    useCases: ["onboarding"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit("SaaS lifecycle email: password reset and sign-in code", preset("email-body"));
-    k.quantizeGeometry = true;
-    k.brand(
-      { paper: "#FFFFFF", text: "#0E0F0C", onPaper: "#43463F", primary: "#0E0F0C", onPrimary: "#FFFFFF", accent: "#1F8A54", onAccent: "#FFFFFF", tint: "#F1F2EC", onTint: "#0E0F0C" },
-      { company: "Ferry", address: "Rua da Boavista 73, 1200-066 Lisboa", code: "418 207" }
-    );
-    k.palette({ strip: "#0E0F0C", onStrip: "#FFFFFF", stripSoft: "#B9BDB1", dot: "#FFFFFF", spent: "#3A3D36", safe: "#4FD08D" });
-    k.textStyle("Brand 26", { size: 26, fontWeight: 800, letterSpacing: -0.8, lineHeight: 30 });
-    k.textStyle("Strip 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16 });
-    k.textStyle("Minutes 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: -1, lineHeight: 28, textAlign: "CENTER" });
-    k.textStyle("Heading 26", { ...ARIAL, size: 26, fontWeight: 700, lineHeight: 32 });
-    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
-    k.textStyle("Label 12", { ...COURIER, size: 12, fontWeight: 700, letterSpacing: 1.5, lineHeight: 16 });
-    k.textStyle("Code 56", { ...COURIER, size: 56, fontWeight: 700, letterSpacing: 4, lineHeight: 64 });
-    k.textStyle("Strong 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
-    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
-    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
-    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Sign in with one click", width: 280, height: 52 });
-    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
-    const head = mailHeader(k, sheet, HEADER_H, "strip");
-    k.vector(head, MAIL_W, HEADER_H, dotPaths(MAIL_W, HEADER_H, 16, 2), "dot", { name: "Dots", opacity: 0.1, absolute: { x: 0, y: 0 } });
-    k.text(head, "{{brand.company}}", { style: "Brand 26", color: "onStrip", width: 380, name: "Brand", absolute: { x: 40, y: 44 } });
-    const line = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "What this is", absolute: { x: 40, y: 84 } });
-    tick(k, line, 13, "safe");
-    k.text(line, "SIGN-IN CODE \xB7 WORKS ONCE", { style: "Strip 12", color: "stripSoft", autoWidth: true, name: "What" });
-    const dial = k.stack(head, { width: DIAL.size, height: DIAL.size, align: "CENTER", justify: "CENTER", name: "Dial", absolute: { x: MAIL_W - 40 - DIAL.size, y: (HEADER_H - DIAL.size) / 2 } });
-    k.vector(dial, DIAL.size, DIAL.size, dialTicks(1, DIAL.ticks), "spent", { name: "Minutes left", strokeWidth: 4, absolute: { x: 0, y: 0 } });
-    const lit = k.vector(dial, DIAL.size, DIAL.size, dialTicks(0, 1), "safe", { name: "This minute", strokeWidth: 4, absolute: { x: 0, y: 0 } });
-    swell(k, lit, "opacity", { amp: 0.3, loopMs: DURATION, cycles: 2 });
-    k.patch(lit, { opacity: 0.7 });
-    const hand = k.stack(dial, { width: DIAL.size, height: DIAL.size, name: "Hand", absolute: { x: 0, y: 0 } });
-    k.ellipse(hand, 7, "safe", { name: "Hand tip", absolute: { x: DIAL.size / 2 - 3.5, y: DIAL.size / 2 - DIAL.r - 14 } });
-    k.behave(hand, "rotation", [{ kind: "spin", rate: 36e4 / DURATION }]);
-    k.text(dial, "10", { style: "Minutes 26", color: "onStrip", name: "Minutes" });
-    k.text(dial, "MIN", { style: "Strip 12", color: "stripSoft", align: "CENTER", name: "Minutes label" });
-    const intro = section(k, sheet, { name: "Intro", pad: [36, 40, 16, 40], gap: 10 });
-    k.text(intro, "Your sign-in code", { style: "Heading 26", color: "text", name: "Heading" });
-    k.text(intro, "Type it into the page you just left. It signs you in, and you can choose a new password from there.", { style: "Body 16", color: "onPaper", name: "Intro words" });
-    const code = section(k, sheet, { name: "Code", pad: [4, 40, 8, 40] });
-    const box = k.stack(code, { fill: "tint", padding: { top: 22, right: 28, bottom: 24, left: 28 }, gap: 6, name: "Code box" });
-    k.text(box, "CODE", { style: "Label 12", color: "onTint", name: "Code label" });
-    k.text(box, "{{brand.code}}", { style: "Code 56", color: "onTint", name: "Code figure" });
-    k.text(box, "Expires at 14:12 UTC, ten minutes after you asked.", { style: "Strong 16", color: "onTint", name: "Expiry" });
-    callToAction(k, sheet, { button: "Mail button", label: "Sign in with one click", pad: [24, 40, 28, 40], note: "The button carries the same code and expires at the same time.", noteStyle: "Small 15", noteInk: "onPaper" });
-    const asked = section(k, sheet, { name: "Who asked", pad: [4, 40, 8, 40] });
-    for (const [label, value] of ASKED) {
-      k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
-      const row = mailRow(k, asked, { name: "Asked row", gap: 16, padding: { top: 12, right: 0, bottom: 12, left: 0 } });
-      const left = k.stack(row, { width: 72, name: "Asked cell" });
-      k.text(left, label.toUpperCase(), { style: "Label 12", color: "text", name: "Asked label" });
-      const right = k.stack(row, { width: "FILL", name: "Asked value cell" });
-      k.text(right, value, { style: "Small 15", color: "onPaper", name: "Asked value" });
-    }
-    k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
-    const safe = section(k, sheet, { name: "Not you", pad: [20, 40, 28, 40], gap: 4 });
-    k.text(safe, "Didn\u2019t ask for this?", { style: "Strong 16", color: "text", name: "Not you heading" });
-    k.text(safe, "Ignore this email and nothing changes: the code is useless without the page that asked for it. Nobody at {{brand.company}} will ever ask you to read it out, by phone, chat or email.", { style: "Small 15", color: "onPaper", name: "Not you words" });
-    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "tint", pad: [8, 40, 32, 40], why: "You are getting this because someone asked to sign in to {{brand.company}} with this address.", links: "Security emails are part of your account and cannot be switched off." });
-    k.cues(sheet, cues);
-    return finishMail(k, sheet);
-  }
-});
-
-export {
-  saas_mail_sign_in_code_default
-};

package/dist/chunks/chunk-4ZLRNUKR.js

@@ -1,231 +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 {
-  KONTOR,
-  drawLine,
-  extend,
-  fitGrid,
-  glideIn,
-  grot,
-  kontorWindow,
-  laneTable,
-  lockup,
-  routeMap,
-  rule,
-  swissBrand,
-  swissGrid
-} from "./chunk-WM7TGYRJ.js";
-import {
-  camera,
-  float,
-  reelCuts,
-  reelSheet,
-  section,
-  wideCut
-} from "./chunk-UD3JVCFG.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-C7BYFVZT.js";
-import {
-  cutOn
-} from "./chunk-PMVMC75G.js";
-import {
-  hide,
-  restyle
-} from "./chunk-QLV6445V.js";
-import {
-  pill
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/style-swiss-launch-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("launch", 4, 8);
-var { beat } = S;
-var NAME = "Swiss SaaS launch reel";
-var WIN = { w: 800, h: 560 };
-var GRID = { cols: 6, margin: 140, gutter: 24, row: 120, top: 250 };
-var WATCH = beat(1) + 100;
-var FLAG = beat(8);
-var REROUTE = beat(12);
-var DROP = beat(16);
-var CALL = beat(24);
-var FIELD_Y = 1468;
-var SHOTS = [
-  { t: FLAG + beat(1), duration: 420, zoom: 1.4, x: 230, y: 310 },
-  { t: DROP, duration: 420, zoom: 1 }
-];
-var cues = [
-  cutOn("Top row", 120),
-  { layer: "Hook side", preset: "slide-in", at: 200, params: { direction: "down", duration: 420 } },
-  { layer: "Step cell", preset: "slide-in", at: beat(1) + 120, stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 380 } },
-  { layer: "Kpi", preset: "slide-in", at: WATCH + 250, stagger: { delay: 80, order: "selection" }, params: { direction: "up", duration: 380 } },
-  { layer: ["Lane head", "Late row", "Lane row"], preset: "slide-in", at: beat(4), stagger: { delay: 110, order: "selection" }, params: { direction: "left", duration: 380 } },
-  cutOn("Station", beat(3), 120),
-  { layer: "Flag", preset: "wipe-in", at: FLAG + beat(1) + 200, params: { direction: "right", duration: 360 } },
-  { layer: "Late forecast", preset: "flash", at: FLAG, params: { duration: 500, ease: ease.hold } },
-  { layer: "Call row", preset: "slide-in", at: CALL, params: { direction: "left", duration: 450 } }
-];
-var counts = [
-  { layer: "On time figure", at: DROP, duration: beat(4), counter: { from: KONTOR.before, to: KONTOR.after, decimals: 1, suffix: "%" } }
-];
-var swaps = [captionSwap(["Late shipments cost you customers.", "Kontor sees them coming early.", "Forty-eight hours before the delay.", "Reroute, and arrive on time."], 0, S.duration - 30, { stagger: 50, in: 220, out: 160, rise: 0 })];
-var style_swiss_launch_reel_default = defineTemplate({
-  id: "motion-saas-style-swiss-launch-reel",
-  meta: {
-    name: NAME,
-    description: "A 16-second launch video in the Swiss typographic style: a giant 48h slides into the first column, then a freight analytics window works on a visible grid. A route diagram draws itself, the late stretch turns red, the camera cuts in to the flag, a rail reroute draws in dashes and the on-time rate counts to 96.1 percent on the drop. One signal red, rules that extend, blocks that slide on the grid, music and burned-in captions. 9:16 with square, 4:5 and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "analytics", "logistics", "launch", "reel", "counter", "diagram", "captions", "music", "audio", "tiktok", "shorts"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
-    useCases: ["launch", "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;
-    swissBrand(k, {});
-    grot(k, "Brand 30", 30, { weight: 700, lead: 1.1, spacing: -0.02 });
-    grot(k, "Label 22", 22, { weight: 500, lead: 1.3 });
-    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
-    grot(k, "Giant 330", 310, { weight: 700, lead: 0.84, spacing: -0.07 });
-    grot(k, "Giant 230", 230, { weight: 700, lead: 0.84, spacing: -0.07 });
-    grot(k, "Side 30", 30, { weight: 500, lead: 1.2, spacing: -0.01 });
-    grot(k, "Ui 21", 21, { weight: 500, lead: 1.25 });
-    grot(k, "Ui head 18", 18, { weight: 600, lead: 1.25 });
-    grot(k, "Figure 46", 46, { weight: 700, lead: 1, spacing: -0.04 });
-    grot(k, "Flag 18", 18, { weight: 700, lead: 1.2 });
-    grot(k, "Caption 34", 34, { weight: 600, lead: 1.3, spacing: -0.01 });
-    grot(k, "Button 30", 30, { weight: 700, lead: 1.2 });
-    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "Start free for 14 days", pad: [20, 28], radius: 0 });
-    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 18, justify: "MIN" });
-    swissGrid(k, sheet, GRID);
-    k.rect(sheet, 1080, 1920 - FIELD_Y, "primary", { name: "Field", absolute: { x: 0, y: FIELD_Y } });
-    const big = routeMap(k, sheet, { w: 800, h: 420, pad: 30, weight: 14, ink: "onPrimary", late: "text", ground: "primary", labels: false, name: "Field route", absolute: { x: 140, y: FIELD_Y + 30 } });
-    const top = k.stack(sheet, { gap: 14, name: "Top row" });
-    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
-    lockup(k, bar, { size: 30, style: "Brand 30" });
-    k.text(bar, `${KONTOR.version}  ${KONTOR.feature}`, { style: "Label 22", color: "text", autoWidth: true, name: "Version" });
-    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
-    const hook = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Hook" });
-    const giant = k.text(hook, "48h", { style: "Giant 330", color: "text", autoWidth: true, name: "Giant" });
-    const side = k.stack(hook, { gap: 12, width: 186, padding: { top: 0, right: 0, bottom: 26, left: 0 }, name: "Hook side" });
-    const tag = k.stack(side, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Hook tag" });
-    k.text(tag, KONTOR.feature, { style: "Label 24", color: "onPrimary", autoWidth: true, name: "Hook kicker" });
-    k.text(side, "before a shipment is late, Kontor tells you.", { style: "Side 30", color: "text", name: "Hook line" });
-    const steps = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, height: 52, name: "Steps" });
-    for (const [no, label] of [["01", "Watch"], ["02", "Flag"], ["03", "Reroute"]]) {
-      const c = k.stack(steps, { gap: 10, width: "FILL", name: "Step cell" });
-      rule(k, c, "FILL", { weight: 2, name: "Step rule" });
-      const r = k.stack(c, { direction: "HORIZONTAL", gap: 14, name: "Step words" });
-      k.text(r, no, { style: "Label 22", color: "onPaper", autoWidth: true, name: "Step no" });
-      k.text(r, label, { style: "Label 22", color: "text", autoWidth: true, name: "Step label" });
-    }
-    const cellW = Math.round((800 - 48) / 3);
-    const marker = k.rect(steps, cellW, 6, "primary", { name: "Step marker", absolute: { x: 0, y: -2 } });
-    const stage = k.stack(sheet, { width: WIN.w, height: WIN.h, clip: true, name: "Stage" });
-    const cam = k.frame(stage, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Camera" });
-    const w = kontorWindow(k, cam, { w: WIN.w, h: WIN.h, title: "Lanes, week 40", right: "Forecast 48 h", style: "Ui head 18", absolute: { x: 0, y: 0 }, pad: 26, gap: 18 });
-    const kpis = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Kpis" });
-    for (const [label, value, name] of [["On time, 30 days", `${KONTOR.after}%`, "On time figure"], ["Lanes", "1,240", "Lanes figure"], ["Flagged today", "3", "Flagged figure"]]) {
-      const c = k.stack(kpis, { gap: 6, width: name === "On time figure" ? 260 : "FILL", name: "Kpi" });
-      k.text(c, label, { style: "Ui head 18", color: "cardMuted", name: "Kpi label" });
-      k.text(c, value, { style: "Figure 46", color: name === "On time figure" ? "onCard" : "onCard", width: name === "On time figure" ? 240 : "FILL", name });
-    }
-    k.rect(w.body, "FILL", 2, "onCard", { name: "Kpi rule" });
-    const split = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Split" });
-    const mapBox = k.stack(split, { width: 320, height: 330, name: "Map box" });
-    const map = routeMap(k, mapBox, { w: 320, h: 330, pad: 26, weight: 8, labels: "Ui head 18", name: "Route", absolute: { x: 0, y: 0 } });
-    const flag = k.stack(mapBox, { direction: "HORIZONTAL", width: "HUG", fill: "late", padding: { top: 6, right: 10, bottom: 6, left: 10 }, name: "Flag", absolute: { x: 0, y: 236 } });
-    const flagWords = k.text(flag, `${KONTOR.shipment}  +${KONTOR.slip} h`, { style: "Flag 18", color: "onPrimary", autoWidth: true, name: "Flag words" });
-    laneTable(k, split, { style: "Ui 21", head: "Ui head 18", cols: [150, 104], rowH: 52, show: ["lane", "onTime", "forecast"] });
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "text", ink: "paper", radius: 0, pad: [18, 24] });
-    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
-    k.instance(call, "Call", { Label: "Start free for 14 days" }, { name: "Call" });
-    k.text(call, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    glideIn(k, w.win, 120, { dy: WIN.h, duration: 520 });
-    choreograph(k, sheet, { giant, topRule, marker, cellW, map, big, flagWords });
-    camera(k, cam, WIN.w, WIN.h, SHOTS);
-    k.variants(sheet, [...reelCuts({ post: 48, portrait: 60 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 48, right: 140, bottom: 48, left: 140 } });
-        fitGrid(kit, id, { ...GRID, top: 48 });
-        hide(kit, id, ["Field", "Field route", "Steps", "Hook side"]);
-        restyle(kit, id, "Giant", "Giant 230");
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 60, right: 140, bottom: 60, left: 140 } });
-        fitGrid(kit, id, { ...GRID, top: 60 });
-        hide(kit, id, ["Field", "Field route"]);
-        restyle(kit, id, "Giant", "Giant 230");
-      }
-    }), wideCut(640, (kit, id, right) => {
-      fitGrid(kit, id, { cols: 12, margin: 110, gutter: 24, row: 120, top: 80 });
-      hide(kit, id, ["Field", "Field route"]);
-      kit.patch(id, { primaryAxisAlignItems: "CENTER" });
-      for (const n of kit.named(id, "Hook")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
-      for (const n of kit.named(id, "Hook side")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 520 });
-      const scale = Math.min(right.width / WIN.w, (right.height - 76) / WIN.h);
-      const x = right.x + Math.round((right.width - WIN.w * scale) / 2);
-      float(kit, id, "Steps", x, right.y, { width: Math.round(WIN.w * scale) });
-      float(kit, id, "Stage", x, right.y + 76, { scale });
-    })]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-function choreograph(k, sheet, o) {
-  k.animate(o.giant, "translateX", [{ t: 0, v: -520, ease: ease.out("expo") }, { t: 520, v: 0, ease: ease.hold }, { t: DROP - 1, v: 0, ease: ease.out("expo") }, { t: DROP, v: -520, ease: ease.out("expo") }, { t: DROP + 520, v: 0 }]);
-  k.animate(o.giant, "text.content", [{ t: 0, v: "48h", ease: ease.hold }, { t: DROP, v: "96%" }]);
-  for (const id of k.named(sheet, "Hook kicker")) k.animate(id, "text.content", [{ t: 0, v: KONTOR.feature, ease: ease.hold }, { t: DROP, v: "Quarter 3" }]);
-  for (const id of k.named(sheet, "Hook line")) k.animate(id, "text.content", [{ t: 0, v: "before a shipment is late, Kontor tells you.", ease: ease.hold }, { t: DROP, v: "on time, up from 87 a quarter ago." }]);
-  k.animate(o.giant, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 30, v: 1 }]);
-  extend(k, o.topRule, 80, 600);
-  const step = (i) => i * (o.cellW + 24);
-  k.animate(o.marker, "translateX", [
-    { t: FLAG, v: step(0), ease: ease.out("expo") },
-    { t: FLAG + 380, v: step(1), ease: ease.hold },
-    { t: REROUTE, v: step(1), ease: ease.out("expo") },
-    { t: REROUTE + 380, v: step(2) }
-  ]);
-  extend(k, o.marker, WATCH, 380);
-  const line = (root, name) => k.named(root, name)[0];
-  drawLine(k, line(o.map, "Road"), WATCH + 200, beat(3));
-  drawLine(k, line(o.map, "Late stretch"), FLAG, 500);
-  drawLine(k, line(o.map, "Rail"), REROUTE, beat(2));
-  k.animate(line(o.map, "Stops"), "opacity", [{ t: WATCH + 200, v: 0, ease: ease.linear }, { t: WATCH + 500, v: 1 }]);
-  for (const id of k.named(sheet, "Late forecast")) k.animate(id, "text.content", [{ t: 0, v: `+${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: "rail, on time" }]);
-  k.animate(o.flagWords, "text.content", [{ t: 0, v: `${KONTOR.shipment}  +${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + beat(2), v: `${KONTOR.shipment}  by rail` }]);
-  drawLine(k, line(o.big, "Road"), 0, beat(6));
-  drawLine(k, line(o.big, "Late stretch"), FLAG, 600);
-  drawLine(k, line(o.big, "Rail"), REROUTE, beat(3));
-  k.animate(line(o.big, "Stops"), "opacity", [{ t: 200, v: 0, ease: ease.linear }, { t: 600, v: 1 }]);
-}
-
-export {
-  style_swiss_launch_reel_default
-};

package/dist/chunks/chunk-55L54JVS.js

@@ -1,78 +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 {
-  standardPortfolio
-} from "./chunk-GCZNQTN6.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/portfolio-reel-carousel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var WORK = [
-  { title: "The Tide Giant", client: "Meridian Pictures", year: "2026", kind: "Feature film \xB7 140 shots", cover: "reel-00", summary: "A stone giant rising from the sea beside a lighthouse, for the third act of a fantasy feature.", story: "A full-CG creature with a water simulation for every step; the lighthouse is a plate shot on the Cornish coast.", credits: "VFX supervision, CG, compositing \u2014 Parallax Works" },
-  { title: "Sunflower Landing", client: "Orbital Series", year: "2026", kind: "Streaming series \xB7 62 shots", cover: "reel-01", summary: "A ship setting down in a field of sunflowers at golden hour.", story: "Two days of plates in a real field, the ship and its downdraft added after; every flower bends.", credits: "VFX \u2014 Parallax Works \xB7 Production \u2014 Orbital" },
-  { title: "Blue Flood", client: "Aqualux", year: "2025", kind: "Commercial", cover: "reel-02", summary: "A city street flooding with luminous water in slow motion.", story: "Shot at 1,000 frames a second on a closed street; the water is simulated to match the speed.", credits: "Direction, VFX \u2014 Parallax Works" },
-  { title: "Smoke Dragon", client: "Ironside Games", year: "2025", kind: "Game cinematic", cover: "reel-03", summary: "A dragon of smoke coiling round a tower at night.", story: "The reveal trailer for a game, rendered from the game\u2019s own creature rig.", credits: "Cinematic, CG \u2014 Parallax Works" },
-  { title: "Crystal Canyon", client: "Meridian Pictures", year: "2024", kind: "Feature film \xB7 88 shots", cover: "reel-04", summary: "An astronaut walking a canyon of crystal on another world.", story: "A virtual-production set on an LED stage, extended in post for the wide shots.", credits: "VFX, virtual production \u2014 Parallax Works" },
-  { title: "Fibre Forest", client: "Lightline Telecom", year: "2024", kind: "Brand film", cover: "reel-05", summary: "A forest whose trees are made of glowing fibre optics.", story: "Every strand is a curve that carries a pulse of light timed to the music.", credits: "Direction, CG \u2014 Parallax Works" }
-];
-var portfolio_reel_carousel_default = defineTemplate({
-  id: "web-portfolio-reel-carousel",
-  meta: {
-    name: "Carousel reel portfolio",
-    description: "A visual effects studio\u2019s portfolio whose pages are panels on a 3D ring: open a show and the ring turns to it, go home and it turns back. Wide frames two across on black, a page per show and a studio page. Drawn on the GPU with WebGPU, in CSS 3D elsewhere. The shows are a collection you edit as a table. Desktop, tablet and phone",
-    category: "web",
-    tags: ["portfolio", "3d", "carousel", "transition", "webgpu", "vfx", "film", "reel", "dark", "cms", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["portfolio"],
-    created: "2026-10-05",
-    updated: "2026-10-05"
-  },
-  breakpoints: true,
-  build: () => standardPortfolio({
-    name: "Carousel reel",
-    brand: { paper: "#050608", text: "#F2F4F7", onPaper: "#8E96A3", primary: "#3DDCFF", onPrimary: "#050608", card: "#0E1117", onCard: "#F2F4F7", cardMuted: "#8E96A3", line: "#1C212B" },
-    fields: { name: "Parallax Works", email: "bids@parallax.works" },
-    styles: {
-      "Wordmark 18": { size: 18, fontWeight: 800, letterSpacing: 4, lineHeight: 24 },
-      "Small 13": { size: 13, fontWeight: 600, letterSpacing: 1.6, lineHeight: 18 },
-      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
-      "Title 20": { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 },
-      "Lead 24": { size: 24, fontWeight: 500, lineHeight: 32 },
-      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
-      "Display 84": { size: 84, fontWeight: 800, letterSpacing: -3, lineHeight: 84 },
-      "Display 44": { size: 44, fontWeight: 800, letterSpacing: -1.4, lineHeight: 48 }
-    },
-    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 84", displaySmall: "Display 44" },
-    projects: WORK,
-    go: "CAROUSEL_FROM_RIGHT",
-    back: "CAROUSEL_FROM_LEFT",
-    links: [["work", "REEL"], ["studio", "STUDIO"]],
-    lead: { kicker: "VISUAL EFFECTS \xB7 LONDON \xB7 MONTR\xC9AL", headline: "Impossible shots, delivered on time.", intro: "Parallax Works makes visual effects for features, series, games and commercials: 140 artists across two studios." },
-    grid: { cols: 2, gap: 16, ratio: 0.5625, radius: 0, card: { fill: "card", pad: 0 }, meta: "{{item.client}} \u2014 {{item.kind}}", tablet: 1 },
-    project: { ratio: 0.42, kicker: "SHOW", more: { cols: 3, ratio: 0.5625, label: "MORE FROM THE REEL" } },
-    studio: {
-      statement: "Two studios, one pipeline, and a habit of saying yes to the hard shot.",
-      about: "We started in a London basement in 2011 with three artists and a render farm under a desk. Now we deliver end to end \u2014 supervision on set, CG, simulation and compositing \u2014 from London and Montr\xE9al.",
-      picture: "reel-04",
-      ratio: 0.42,
-      services: ["VFX supervision", "Creatures and simulation", "Virtual production", "Compositing and finishing"],
-      clients: "Meridian Pictures, Orbital Series, Aqualux, Ironside Games and Lightline Telecom.",
-      contact: "Send scripts and storyboards for a bid within five days."
-    },
-    elsewhere: "VIMEO \xB7 LINKEDIN \xB7 INSTAGRAM"
-  })
-});
-
-export {
-  portfolio_reel_carousel_default
-};