@popcraft/kit 0.29.0 → 0.30.0

package/dist/chunks/chunk-D6VGJK6W.js

@@ -0,0 +1,157 @@
+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 {
+  WRECK,
+  caseBrand,
+  caseLid,
+  caseType,
+  clockCell,
+  fitCaseLid,
+  handle,
+  placeTapeList,
+  soldStamp,
+  strip,
+  tapeRoll
+} from "./chunk-J6A6EC5V.js";
+import {
+  mover,
+  pruneStyles
+} from "./chunk-NQEPYDMT.js";
+import {
+  hardShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/tour-tickets-wreck-city.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var T = WRECK;
+var LOOP = 1e4;
+var NIGHT1 = T.dates[1];
+var NIGHT2 = T.dates[2];
+var counts = [{ layer: "Seconds figure", at: 0, duration: 9e3, tick: 1e3, counter: { from: 39, to: 30 } }];
+var cues = [
+  { layer: "Kicker", preset: "wobble", at: 400, params: { duration: 700, amount: 3 } },
+  { layer: "Sold stamp", preset: "shake", at: 2500, params: { duration: 500, distance: 6 } },
+  { layer: "Link", preset: "pulse", at: 5e3, params: { duration: 600, amount: 0.06 } },
+  { layer: "Kicker", preset: "wobble", at: 7400, params: { duration: 700, amount: 3 } }
+];
+var NAME = `Tour tickets city on-sale story: ${T.act}`;
+function lay(k, id, w, h) {
+  const { at, scaled } = mover(k, id);
+  if (h === 1920) {
+    at("Kicker", 140, 254);
+    at("City", 140, 330, { width: 800 });
+    at("Night", 140, 470, { width: 800 });
+    [0, 1, 2].forEach((i) => scaled(`Cell ${i}`, 140 + i * 275, 600, 1));
+    at("On sale", 140, 880, { width: 800 });
+    at("Prices", 140, 940, { width: 800 });
+    placeTapeList(k, id, [NIGHT1], { x: 84, y: 1090, scale: 1.08, gap: 0 });
+    at("Link", 140, 1300, { width: 800 });
+    scaled("Handle", 300, 1560, 1.2, { visible: true });
+    at("Roll cream", 50, 1600);
+    at("Roll orange", 840, 1660);
+  } else if (w === h) {
+    at("Kicker", 72, 70);
+    at("City", 72, 140, { width: 936 });
+    at("Night", 72, 290, { width: 936 });
+    [0, 1, 2].forEach((i) => scaled(`Cell ${i}`, 72 + i * 236, 380, 0.86));
+    at("On sale", 72, 590, { width: 936 });
+    at("Prices", 72, 650, { width: 936 });
+    placeTapeList(k, id, [NIGHT1], { x: 76, y: 740, scale: 1.16, gap: 0 });
+    at("Link", 72, 900, { width: 936 });
+    scaled("Handle", 0, 0, 1, { visible: false });
+    at("Roll cream", 940, -80);
+    at("Roll orange", -70, 960);
+  } else {
+    at("Kicker", 72, 80);
+    at("City", 72, 156, { width: 936 });
+    at("Night", 72, 310, { width: 936 });
+    [0, 1, 2].forEach((i) => scaled(`Cell ${i}`, 72 + i * 316, 410, 1.15));
+    at("On sale", 72, 690, { width: 936 });
+    at("Prices", 72, 770, { width: 936 });
+    placeTapeList(k, id, [NIGHT1], { x: 76, y: 900, scale: 1.16, gap: 0 });
+    at("Link", 72, 1080, { width: 936 });
+    scaled("Handle", 0, 0, 1, { visible: false });
+    at("Roll cream", 940, -70);
+    at("Roll orange", -70, 1230);
+  }
+}
+var tour_tickets_wreck_city_default = defineTemplate({
+  id: "motion-tour-tickets-wreck-city",
+  meta: {
+    name: NAME,
+    description: "A looping on-sale story for one city of an arena rock tour, on the lid of a flight case: the city stencilled huge, the added second night and its venue, a countdown written on blocks of console tape with the seconds ticking, the sold-out first night under a SOLD OUT spray, prices and the link. Ten seconds, 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "tour", "tickets", "on sale", "countdown", "concert", "arena", "rock", "new date", "sold out", "road case", "story", "loop"],
+    platforms: ["instagram", "facebook", "tiktok"],
+    formats: ["story", "post", "portrait-post"],
+    useCases: ["countdown", "event", "presale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    caseBrand(k, { name: "HALCYON WRECK" });
+    caseType(k);
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const lid = k.frame(sheet, { x: 0, y: 0, width: 1080, height: 1920 }, { name: "Lid" });
+    k.patch(lid, { layoutPositioning: "ABSOLUTE" });
+    caseLid(k, lid, 1080, 1920);
+    handle(k, lid, 400);
+    tapeRoll(k, lid, 200, "card", { x: 0, y: 0, name: "Roll cream" });
+    tapeRoll(k, lid, 170, "primary", { x: 0, y: 0, name: "Roll orange" });
+    const kick = k.stack(lid, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 3, padding: { top: 8, right: 16, bottom: 8, left: 16 }, name: "Kicker", absolute: { x: 0, y: 0 } });
+    k.text(kick, "SECOND NIGHT ADDED", { style: "Label 22", color: "onPrimary", autoWidth: true, name: "Kicker words" });
+    k.text(lid, NIGHT2.city, { style: "Stencil 118", color: "text", width: 800, name: "City", absolute: { x: 0, y: 0 }, effects: [hardShadow(k, "primary", 7, 7)] });
+    k.text(lid, `${NIGHT2.day} \xB7 ${NIGHT2.venue}`, { style: "Tour 30", color: "text", width: 800, name: "Night", absolute: { x: 0, y: 0 } });
+    [["14", "HRS", "Hours"], ["07", "MIN", "Minutes"], ["39", "SEC", "Seconds"]].forEach(([v, u, n], i) => {
+      const c = clockCell(k, lid, v, u, { name: n, w: 250, h: 230, style: "Clock 150", seed: 60 + i * 9, ...i === 2 ? { fill: "primary", ink: "onPrimary" } : {} });
+      k.patch(c, { name: `Cell ${i}` });
+    });
+    k.text(lid, `ON SALE ${T.presale.general}`, { style: "Tour 30", color: "text", width: 800, name: "On sale", absolute: { x: 0, y: 0 } });
+    k.text(lid, `Standing ${T.price.from} \xB7 Seated \xA355 to ${T.price.to} \xB7 four tickets a person`, { style: "Body 26", color: "onPaper", width: 800, name: "Prices", absolute: { x: 0, y: 0 } });
+    strip(k, lid, { ...NIGHT1, day: "NIGHT 1 \xB7 SAT 06" }, 1);
+    soldStamp(k, lid, { absolute: { x: 0, y: 0 } });
+    const link = k.stack(lid, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 4, padding: { top: 14, right: 24, bottom: 14, left: 24 }, name: "Link", absolute: { x: 0, y: 0 } });
+    k.text(link, `${T.site}/tour`, { style: "Code 40", color: "onCard", autoWidth: true, name: "Link words" });
+    lay(k, lid, 1080, 1920);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    const size = (kit, id, w, h) => {
+      for (const l of kit.named(id, "Lid")) {
+        kit.patch(l, { x: 0, y: 0, width: w, height: h });
+        fitCaseLid(kit, l, w, h);
+        lay(kit, l, w, h);
+      }
+    };
+    k.variants(sheet, [
+      { preset: "ig-post", adjust: (kit, id) => size(kit, id, 1080, 1080) },
+      { preset: "ig-portrait", adjust: (kit, id) => size(kit, id, 1080, 1350) }
+    ]);
+    pruneStyles(k);
+    return k.finish();
+  }
+});
+
+export {
+  tour_tickets_wreck_city_default
+};

package/dist/chunks/chunk-DAF5SK5X.js

@@ -0,0 +1,162 @@
+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 {
+  webVariants
+} from "./chunk-TF2MO3UA.js";
+import {
+  blackShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  pt
+} from "./chunk-6RCDZU4R.js";
+import {
+  casedText,
+  measureTextWidth
+} from "./chunk-CGIPDP5Y.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+import {
+  __export
+} from "./chunk-LJSVREWM.js";
+
+// templates/src/saas/web-shared.ts
+var web_shared_exports = {};
+__export(web_shared_exports, {
+  CONTENT: () => CONTENT,
+  columns: () => columns,
+  compactNav: () => compactNav,
+  followTyping: () => followTyping,
+  footer: () => footer,
+  hard: () => hard,
+  linePath: () => linePath,
+  respond: () => respond,
+  rule: () => rule,
+  soft: () => soft,
+  typeScale: () => typeScale
+});
+init_define_POPCRAFT_COMPONENT_IDS();
+function typeScale(k, defs) {
+  return (name) => {
+    const d = defs[name];
+    if (!d) throw new Error(`No "${name}" in the type scale`);
+    k.textStyle(name, d);
+    return name;
+  };
+}
+function respond(k, sheet, s, r) {
+  const set = /* @__PURE__ */ new Set();
+  const walk = (id) => {
+    const n = k.node(id);
+    if (n.textStyleId) set.add(k.styleName(n.textStyleId) ?? "");
+    for (const c of n.childIds) walk(c);
+  };
+  walk(sheet);
+  const restyle = {};
+  for (const [from, to] of Object.entries(r.restyle ?? {})) {
+    if (!set.has(from)) continue;
+    restyle[from] = to;
+    for (const step of Object.values(to)) if (step) s(step);
+  }
+  const copies = k.variants(sheet, webVariants({ ...r, restyle }));
+  for (const id of [sheet, ...copies]) for (const t of r.typing ?? []) followTyping(k, id, t);
+  k.responsive(sheet, { tablet: copies[1], phone: copies[2] });
+  return copies;
+}
+function followTyping(k, root, t) {
+  const carets = k.named(root, t.caret);
+  k.named(root, t.text).forEach((textId, i) => {
+    const n = k.node(textId), caretId = carets[i];
+    if (!caretId) return;
+    const chars = casedText(n.characters, n.textCase);
+    const w = (str) => measureTextWidth(str, n.fontFamily, n.fontWeight, n.fontSize, n.fontStyle, n.letterSpacing ?? 0, { features: n.fontFeatures, variations: n.fontVariations });
+    const lh = n.lineHeight === "AUTO" || n.lineHeight === void 0 ? n.fontSize * 1.25 : n.lineHeight;
+    const lines = [];
+    const wraps = n.textAutoResize !== "WIDTH_AND_HEIGHT";
+    let cur = "", curW = 0;
+    for (const word of chars.split(" ")) {
+      const ww = w(word), space = curW > 0 ? w(" ") : 0;
+      if (wraps && curW > 0 && curW + space + ww > n.width) {
+        lines.push(`${cur} `);
+        cur = word;
+        curW = ww;
+      } else {
+        cur = cur ? `${cur} ${word}` : word;
+        curW += space + ww;
+      }
+    }
+    lines.push(cur);
+    const caret = k.node(caretId), last = lines.length - 1;
+    const endX = Math.round(n.x + w(lines[last]) + 2), endY = Math.round(n.y + last * lh + (lh - caret.height) / 2);
+    k.patch(caretId, { x: endX, y: endY });
+    const xs = [], ys = [];
+    let done = 0;
+    lines.forEach((line, li) => {
+      const startT = Math.round(t.at + t.duration * done / chars.length) + (li ? 1 : 0);
+      if (last) ys.push({ t: startT, v: (li - last) * lh, ease: ease.hold });
+      for (let j = 0; j <= line.length; j = j === line.length ? j + 1 : Math.min(line.length, j + 3)) {
+        const at = j === 0 ? startT : Math.round(t.at + t.duration * (done + j) / chars.length);
+        xs.push({ t: at, v: Math.round((n.x + w(line.slice(0, j)) + 2 - endX) * 100) / 100, ease: j === line.length ? ease.hold : ease.linear });
+      }
+      done += line.length;
+    });
+    k.animate(caretId, "translateX", xs);
+    if (ys.length) k.animate(caretId, "translateY", ys);
+  });
+}
+function compactNav(k, sheet, drop = [], gap = 20) {
+  for (const id of k.named(sheet, "Nav links")) k.patch(id, { itemSpacing: gap });
+  for (const id of k.named(sheet, "Nav right")) k.patch(id, { itemSpacing: gap });
+  for (const id of k.named(sheet, "Nav link")) if (drop.includes(k.node(id).characters)) k.patch(id, { visible: false });
+}
+var soft = (a = 0.14, y = 16, blur = 40) => blackShadow(a, y, blur);
+var hard = (k, role, d = 6) => ({ type: "DROP_SHADOW", color: k.color(role), offset: { x: d, y: d }, blur: 0, spread: 0, visible: true });
+function linePath(values, w, h, close = false) {
+  const points = values.map((v, i) => pt(i / (values.length - 1) * w, h - v * h));
+  return close ? { closed: true, points: [...points, pt(w, h), pt(0, h)] } : { closed: false, points };
+}
+var rule = (k, parent, color, o = {}) => k.rect(parent, "FILL", o.weight ?? 1, color, { name: o.name ?? "Rule", ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
+function footer(k, sheet, o) {
+  const ink = o.ink ?? "text", quiet = o.quiet ?? "onPaper";
+  const foot = k.stack(sheet, { gap: 28, name: "Footer", ...o.box });
+  rule(k, foot, o.ruleColor, { name: "Footer rule" });
+  const cols = k.stack(foot, { direction: "HORIZONTAL", gap: 48, name: "Footer columns" });
+  const about = k.stack(cols, { gap: 10, name: "Footer about" });
+  k.text(about, "{{brand.name}}", { style: o.brandStyle, color: ink, name: "Footer brand" });
+  k.text(about, o.about, { style: o.linkStyle, color: quiet, name: "Footer line" });
+  const lists = k.stack(cols, { direction: "HORIZONTAL", gap: 32, name: "Footer lists" });
+  for (const [head, links] of o.columns) {
+    const col = k.stack(lists, { gap: 8, name: "Footer list" });
+    k.text(col, head, { style: o.headStyle, color: ink, name: "Footer head" });
+    for (const l of links) k.text(col, l, { style: o.linkStyle, color: quiet, name: "Footer link" });
+  }
+  k.text(foot, o.legal, { style: o.linkStyle, color: quiet, name: "Legal" });
+  return foot;
+}
+var CONTENT = { desktop: 1200, laptop: 1120, tablet: 672, mobile: 335 };
+function columns(k, root, item, cols, gap, inside) {
+  const width = Math.floor((inside - gap * (cols - 1)) / cols);
+  for (const id of k.named(root, item)) k.patch(id, { layoutSizingHorizontal: "FIXED", width });
+}
+
+export {
+  typeScale,
+  respond,
+  followTyping,
+  compactNav,
+  soft,
+  hard,
+  linePath,
+  rule,
+  footer,
+  CONTENT,
+  columns,
+  web_shared_exports
+};

package/dist/chunks/chunk-DBSMVIXL.js

@@ -0,0 +1,266 @@
+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-QEUDZH7J.js";
+import {
+  COLUMN,
+  camera,
+  float,
+  reelSheet,
+  section,
+  seenAt,
+  wideCut
+} from "./chunk-UA7OECXL.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-F3TA2VS2.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  cutOn
+} from "./chunk-WV6ZTKE7.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  box
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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
+};