@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-7ZY4ADN7.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-IUUXJSAI.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-A64TXRHT.js

@@ -1,266 +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 {
-  body,
-  dress,
-  edge,
-  figure,
-  label,
-  redress,
-  shout,
-  shove,
-  slab,
-  slam,
-  stamp,
-  sticker,
-  tag,
-  thump,
-  ticketStub,
-  titleBar,
-  tollBrand
-} from "./chunk-OFJ6KDD2.js";
-import {
-  COLUMN,
-  camera,
-  float,
-  reelSheet,
-  section,
-  seenAt,
-  wideCut
-} from "./chunk-UD3JVCFG.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-DYNJDZ4J.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-C7BYFVZT.js";
-import {
-  cutOn
-} from "./chunk-PMVMC75G.js";
-import {
-  hide,
-  patchAll,
-  restyle
-} from "./chunk-QLV6445V.js";
-import {
-  logoBadge,
-  pill
-} from "./chunk-EK5CFFJO.js";
-import {
-  box
-} from "./chunk-BNVLVZUT.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-IUUXJSAI.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/style-brutalist-feature-demo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = section("launch", 8, 6);
-var { beat } = S;
-var STAGE = { width: COLUMN, height: 580 };
-var BAR = 52;
-var SCREEN = { width: STAGE.width, height: STAGE.height - BAR };
-var PAD = 24;
-var INNER = SCREEN.width - 2 * PAD;
-var SWITCH_ROW = { y: 24, height: 100 };
-var FLOOR_ROW = { y: 148, height: 168 };
-var RESULT_ROW = { y: 340, height: 164 };
-var TRACK = { x: 20, y: 122, width: INNER - 40, height: 14 };
-var FLOOR = 9;
-var CEILING = 40;
-var handleAt = (price) => Math.round(TRACK.x + TRACK.width * price / CEILING);
-var DRAG = handleAt(FLOOR) - handleAt(1);
-var KNOB = { track: 116, size: 44 };
-var PAID = [22, 13, 9, 7, 5, 4, 2, 2];
-var HIST = { width: 300, height: 92, gap: 8 };
-var histBar = (i) => {
-  const bw = (HIST.width - HIST.gap * (PAID.length - 1)) / PAID.length, bh = Math.round(HIST.height * PAID[i] / 22);
-  return { x: Math.round(i * (bw + HIST.gap)), y: HIST.height - bh, width: Math.round(bw), height: bh };
-};
-var STEP = [4, 9, 14, 20];
-var REST = { x: 700, y: 560 };
-var KNOB_AT = { x: PAD + INNER - 24 - KNOB.track / 2, y: BAR + SWITCH_ROW.y + SWITCH_ROW.height / 2 };
-var HANDLE_Y = BAR + FLOOR_ROW.y + TRACK.y + 10;
-var HANDLE_FROM = { x: PAD + handleAt(1), y: HANDLE_Y };
-var HANDLE_TO = { x: PAD + handleAt(FLOOR), y: HANDLE_Y };
-var SHOTS = [
-  { t: beat(STEP[0]) - 250, duration: 400, zoom: 1.5, x: 560, y: BAR + SWITCH_ROW.y + 50 },
-  { t: beat(STEP[1]) - 250, duration: 400, zoom: 1.45, x: 290, y: BAR + FLOOR_ROW.y + 84 },
-  { t: beat(STEP[2]) - 250, duration: 400, zoom: 1.2, x: 400, y: BAR + RESULT_ROW.y + 82 },
-  { t: beat(STEP[3]) - 250, duration: 400, zoom: 1 }
-];
-var swaps = [captionSwap(["Flip one switch on.", "Set the lowest price.", "Fans pay more anyway.", "Try it free today."], 0, S.duration - 30)];
-var counts = [
-  { layer: "Floor", at: beat(STEP[1] + 1), duration: beat(2), tick: beat(0.25), counter: { from: 1, to: FLOOR, prefix: "$" } },
-  { layer: "Average", at: beat(STEP[2]), duration: beat(4), counter: { from: 9, to: 14.2, decimals: 2, prefix: "$" }, ease: ease.inOut("cubic") }
-];
-var cues = [
-  ...slam("Hook top", 0, { distance: 300 }),
-  ...stamp("Hook block", 240, { from: 1.8 }),
-  { layer: "Caption strip", preset: "fade-in", at: 0, params: { duration: 150 } },
-  shove("Brand row", beat(1), "left"),
-  ...slam("Stage", beat(1.5), { distance: 420, shake: 14 }),
-  shove("Steps", beat(2.5), "right"),
-  cutOn("On fill", beat(STEP[0] + 1)),
-  ...stamp("On tag", beat(STEP[0] + 1) + 60, { rock: 8 }),
-  { layer: "Step fill", preset: "wipe-in", at: beat(STEP[0] + 1), params: { duration: 260, direction: "right", ease: ease.out("expo") }, stagger: { delay: beat(5), order: "selection" } },
-  thump("Floor", beat(STEP[1] + 3), 0.1),
-  { layer: "Hist bar", preset: "wipe-in", at: beat(STEP[2]), params: { duration: 300, direction: "up", ease: ease.back(2.2) }, stagger: { delay: beat(0.5), order: "selection" } },
-  thump("Average", beat(STEP[2] + 4), 0.08),
-  ...stamp("Sticker", beat(STEP[2] + 4.5), { from: 1.9, rock: 9 }),
-  ...slam("Call row", beat(STEP[3]), { distance: 260, shake: 12 }),
-  thump("Call row", beat(22), 0.06),
-  { layer: "Sticker", preset: "wobble", at: beat(22.5), params: { duration: 600, amount: 10 } }
-];
-var style_brutalist_feature_demo_default = defineTemplate({
-  id: "motion-saas-style-brutalist-feature-demo",
-  meta: {
-    name: "Brutalist SaaS feature demo short",
-    description: "A 12-second demo of one feature in the neo-brutalist look: the hook slams on, then an enlarged pointer flips a switch, drags a slider while the price ticks up under it, and the result prints (a counting figure and a histogram that rises bar by bar) as the camera zooms to each step; a step counter fills and a sticker is stamped on. Music, burned-in captions, 9:16 with square and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "demo", "feature", "screen recording", "zoom", "cursor", "slider", "counter", "neo-brutalist", "brutalism", "bold", "captions", "music", "audio", "reel", "shorts", "build in public"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "demo", "video"],
-    useCases: ["launch", "changelog", "education"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit("Brutalist SaaS feature demo short", preset("ig-story"));
-    k.quantizeGeometry = true;
-    tollBrand(k, ["paper", "text", "onText", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
-    k.textStyle("Shout 104", shout(104));
-    k.textStyle("Shout 76", shout(76));
-    k.textStyle("Brand 40", shout(40, { leading: 1.1 }));
-    k.textStyle("Sticker 54", shout(54, { center: true }));
-    k.textStyle("Sticker 18", label(18, { center: true }));
-    k.textStyle("Window 20", label(20));
-    k.textStyle("UI label 20", label(20));
-    k.textStyle("UI label 26", label(26));
-    k.textStyle("Floor 64", figure(64));
-    k.textStyle("Average 64", figure(64));
-    k.textStyle("Caption 40", body(40, 800));
-    k.textStyle("Button 32", shout(32, { leading: 1.25 }));
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "TURN IT ON: tollbooth.example", pad: [18, 24], radius: 0 });
-    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 20 });
-    dress(k, sheet);
-    ticketStub(k, sheet, { x: 230, y: 1560 }, 5);
-    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brand row" });
-    logoBadge(k, brand, { fill: "text", size: 34, pad: 11, radius: 0 });
-    k.text(brand, "{{brand.name}}", { style: "Brand 40", color: "text", width: 380, name: "Brand name" });
-    tag(k, brand, "NEW: PAY WHAT YOU WANT", { style: "UI label 20", fill: "accent", ink: "onAccent", pad: [8, 12], rule: 4, name: "Feature tag" });
-    const hook = k.stack(sheet, { gap: 8, name: "Hook" });
-    k.text(hook, "LET THEM", { style: "Shout 104", color: "text", name: "Hook top" });
-    const block = slab(k, hook, { width: "HUG", fill: "primary", shadow: 12, padding: { top: 6, right: 22, bottom: 10, left: 20 }, name: "Hook block" });
-    k.text(block, "PAY MORE.", { style: "Shout 104", color: "onPrimary", autoWidth: true, name: "Hook words" });
-    k.patch(block, { rotation: -2 });
-    const stage = slab(k, sheet, { width: STAGE.width, height: STAGE.height, clip: true, fill: "card", shadow: 14, name: "Stage" });
-    const cam = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Camera", fill: "card" });
-    const bar = titleBar(k, cam, { title: "{{brand.site}}/fieldnotes/price", style: "Window 20", height: BAR });
-    k.patch(bar, { layoutPositioning: "ABSOLUTE", x: 0, y: 0, width: STAGE.width, layoutSizingHorizontal: "FIXED" });
-    const screen = k.frame(cam, { x: 0, y: BAR, ...SCREEN }, { name: "Price screen", fill: "card" });
-    const sw = slab(k, screen, { direction: "HORIZONTAL", width: INNER, height: SWITCH_ROW.height, fill: "card", rule: 5, shadow: 8, align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 24, bottom: 0, left: 22 }, name: "Switch row", absolute: { x: PAD, y: SWITCH_ROW.y } });
-    k.text(sw, "PAY WHAT YOU WANT", { style: "UI label 26", color: "onCard", name: "Switch label" });
-    const track = k.stack(sw, { width: KNOB.track, height: 56, fill: "card", name: "Switch track" });
-    k.rect(track, KNOB.track, 56, "primary", { name: "On fill", absolute: { x: 0, y: 0 } });
-    k.rect(track, KNOB.track, 56, [], { name: "Switch rule", stroke: edge(5), absolute: { x: 0, y: 0 } });
-    const knob = k.rect(track, KNOB.size, KNOB.size, "text", { name: "Knob", absolute: { x: KNOB.track - KNOB.size - 6, y: 6 } });
-    const on = tag(k, screen, "ON", { style: "UI label 26", fill: "accent", ink: "onAccent", pad: [6, 14], rule: 5, shadow: 6, name: "On tag", absolute: { x: PAD + INNER - 250, y: SWITCH_ROW.y - 12 } });
-    k.patch(on, { rotation: -8 });
-    const floor = slab(k, screen, { width: INNER, height: FLOOR_ROW.height, fill: "paper", rule: 5, shadow: 8, name: "Floor row", absolute: { x: PAD, y: FLOOR_ROW.y } });
-    k.text(floor, "LOWEST PRICE", { style: "UI label 20", color: "text", autoWidth: true, name: "Floor label", absolute: { x: 20, y: 18 } });
-    k.text(floor, `$${FLOOR}`, { style: "Floor 64", color: "text", width: 160, name: "Floor", absolute: { x: 20, y: 46 } });
-    k.text(floor, "BUYERS CAN ALWAYS PAY MORE", { style: "UI label 20", color: "text", autoWidth: true, name: "Floor note", absolute: { x: 330, y: 18 } });
-    k.rect(floor, TRACK.width, TRACK.height, "text", { name: "Slider track", absolute: { x: TRACK.x, y: TRACK.y + 3 } });
-    k.vector(floor, TRACK.width, 16, [0, 10, 20, 30, 40].map((v) => box(Math.round(TRACK.width * v / CEILING) - (v === 40 ? 4 : 0), 0, 4, 16)), "text", { name: "Slider ticks", absolute: { x: TRACK.x, y: TRACK.y + 24 } });
-    const handle = k.rect(floor, 32, 52, "primary", { name: "Slider handle", stroke: edge(5), absolute: { x: handleAt(FLOOR) - 16, y: TRACK.y - 16 } });
-    const result = slab(k, screen, { width: 360, height: RESULT_ROW.height, fill: "primary", rule: 5, shadow: 8, gap: 6, padding: { top: 16, right: 20, bottom: 14, left: 20 }, justify: "CENTER", name: "Result", absolute: { x: PAD, y: RESULT_ROW.y } });
-    k.text(result, "AVERAGE PAID", { style: "UI label 20", color: "onPrimary", name: "Average label" });
-    k.text(result, "$14.20", { style: "Average 64", color: "onPrimary", name: "Average" });
-    k.text(result, "64 SALES, FLOOR $9", { style: "UI label 20", color: "onPrimary", name: "Average note" });
-    const hist = slab(k, screen, { width: INNER - 384, height: RESULT_ROW.height, fill: "card", rule: 5, shadow: 8, name: "Histogram", absolute: { x: PAD + 384, y: RESULT_ROW.y } });
-    k.text(hist, "THEY CHOSE", { style: "UI label 20", color: "onCard", autoWidth: true, name: "Histogram label", absolute: { x: 18, y: 14 } });
-    const plot = k.frame(hist, { x: 18, y: 54, width: HIST.width, height: HIST.height }, { name: "Plot" });
-    PAID.forEach((_, i) => {
-      const b = histBar(i);
-      k.rect(plot, b.width, b.height, i === 0 ? "text" : "primary", { name: "Hist bar", stroke: edge(4), absolute: { x: b.x, y: b.y } });
-    });
-    const badge = sticker(k, screen, { size: 150, teeth: 14, fill: "accent", ink: "onAccent", big: "+58%", small: "PER SALE", bigStyle: "Sticker 54", smallStyle: "Sticker 18", tilt: 10, shadow: 7, absolute: { x: 604, y: 284 } });
-    void badge;
-    k.rect(stage, STAGE.width, STAGE.height, [], { name: "Stage rule", stroke: edge(6), absolute: { x: 0, y: 0 } });
-    const p = pointer(k, stage, { ...REST, size: 96, fill: "card", edge: "text", ring: "primary" });
-    const steps = k.stack(sheet, { direction: "HORIZONTAL", gap: 12, name: "Steps" });
-    for (let i = 0; i < 3; i++) {
-      const lane = k.stack(steps, { width: "FILL", height: 22, fill: "card", stroke: edge(4), clip: true, name: "Step lane" });
-      k.rect(lane, "FILL", 22, "text", { name: "Step fill" });
-    }
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 40", fill: "text", ink: "onText", pad: [14, 24] });
-    const call = slab(k, sheet, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "primary", shadow: 12, gap: 0, name: "Call row" });
-    logoBadge(k, call, { fill: "text", size: 40, pad: 22, radius: 0 });
-    k.instance(call, "Button", { Label: "TURN IT ON: {{brand.site}}" }, { name: "Call" });
-    camera(k, cam, STAGE.width, STAGE.height, SHOTS);
-    const at = (shot, pnt) => {
-      const s = seenAt(STAGE.width, STAGE.height, SHOTS[shot], pnt);
-      return { dx: s.x - REST.x, dy: s.y - REST.y };
-    };
-    glide(k, p, [
-      { t: beat(STEP[0] - 1), dx: 0, dy: 0 },
-      { t: beat(STEP[0] + 0.8), ...at(0, KNOB_AT) },
-      { t: beat(STEP[1]) - 250, ...at(0, KNOB_AT) },
-      { t: beat(STEP[1] + 0.8), ...at(1, HANDLE_FROM) },
-      { t: beat(STEP[1] + 1), ...at(1, HANDLE_FROM) },
-      { t: beat(STEP[1] + 3), ...at(1, HANDLE_TO) },
-      { t: beat(STEP[2]) - 250, ...at(1, HANDLE_TO) },
-      { t: beat(STEP[2] + 1), dx: 40, dy: 0 }
-    ]);
-    clicks(k, p, [beat(STEP[0] + 1), beat(STEP[1] + 1)]);
-    k.animate(knob, "translateX", [{ t: 0, v: -(KNOB.track - KNOB.size - 12), ease: ease.hold }, { t: beat(STEP[0] + 1), v: -(KNOB.track - KNOB.size - 12), ease: ease.back(2.6) }, { t: beat(STEP[0] + 1) + 200, v: 0 }]);
-    k.animate(handle, "translateX", [{ t: 0, v: -DRAG, ease: ease.hold }, { t: beat(STEP[1] + 1), v: -DRAG, ease: ease.inOut("cubic") }, { t: beat(STEP[1] + 3), v: 0 }]);
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    k.variants(sheet, [
-      { preset: "ig-post", adjust: (kit, id) => {
-        kit.patch(id, { itemSpacing: 14, counterAxisSpacing: 14, padding: { top: 30, right: 140, bottom: 30, left: 140 } });
-        hide(kit, id, ["Brand row", "Ticket", "Top band", "Foot band", "Steps"]);
-        for (const n of ["Hook top", "Hook words"]) restyle(kit, id, n, "Shout 76");
-        patchAll(kit, id, "Hook", { layoutMode: "HORIZONTAL", itemSpacing: 18, counterAxisAlignItems: "CENTER" });
-        patchAll(kit, id, "Hook top", { layoutSizingHorizontal: "HUG", textAutoResize: "WIDTH_AND_HEIGHT" });
-        redress(kit, id);
-      } },
-      wideCut(720, (kit, id, right) => {
-        const scale = Math.min(right.width / STAGE.width, (right.height - 60) / STAGE.height), top = right.y + Math.round((right.height - STAGE.height * scale - 50) / 2);
-        hide(kit, id, ["Ticket"]);
-        float(kit, id, "Stage", right.x, top, { scale });
-        float(kit, id, "Steps", right.x, top + Math.round(STAGE.height * scale) + 34, { scale });
-        patchAll(kit, id, "Brand row", { layoutMode: "VERTICAL", itemSpacing: 14, counterAxisAlignItems: "MIN" });
-        redress(kit, id);
-      }, { spacing: 26 })
-    ]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_brutalist_feature_demo_default
-};