@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-F7TQZRXN.js

@@ -1,260 +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 {
-  SHARD,
-  blinking,
-  cell,
-  clockFrames,
-  cursor,
-  fitGround,
-  ground,
-  lockup,
-  minimap,
-  mono,
-  scan,
-  steps,
-  termBrand,
-  termLine,
-  termWindow,
-  tuiBox
-} from "./chunk-6CCYEZ3Z.js";
-import {
-  camera,
-  float,
-  reelCuts,
-  reelSheet,
-  seenAt,
-  wideCut
-} from "./chunk-UA7OECXL.js";
-import {
-  clicks,
-  glide,
-  pointer
-} from "./chunk-F3TA2VS2.js";
-import {
-  captionStrip,
-  captionSwap
-} from "./chunk-ERLSOXU6.js";
-import {
-  score
-} from "./chunk-42LEBOKV.js";
-import {
-  cutOn,
-  hz
-} from "./chunk-WV6ZTKE7.js";
-import {
-  hide,
-  restyle
-} from "./chunk-YHBAWSDX.js";
-import {
-  pill
-} from "./chunk-LEKU2ZW3.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  ease
-} from "./chunk-YYQUCS6P.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/motion/style-terminal-feature-demo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = score("edm");
-var { beat } = S;
-var NAME = "Terminal SaaS feature demo short";
-var W = { w: 800, h: 720 };
-var SIZE = 22;
-var CW = cell(SIZE);
-var LH = 30;
-var STEP = [4, 10, 16, 21, 26];
-var CLICK1 = beat(STEP[0] + 2);
-var CLICK2 = beat(STEP[3] + 1);
-var REST = { x: 640, y: 640 };
-var TARGETS = [{ x: 196, y: 100 }, { x: 150, y: 520 }];
-var SHOTS = [
-  { t: beat(STEP[0]), duration: 1, zoom: 1.7, x: 260, y: 130 },
-  { t: beat(STEP[1]), duration: 1, zoom: 1.3, x: 330, y: 230 },
-  { t: beat(STEP[2]), duration: 1, zoom: 1.55, x: 250, y: 390 },
-  { t: beat(STEP[3]), duration: 1, zoom: 1.35, x: 360, y: 590 },
-  { t: beat(STEP[4]), duration: 1, zoom: 1 }
-];
-var SHARDS = [
-  ["01", "3:34", "0:52", 0.245],
-  ["02", "3:31", "0:51", 0.24],
-  ["03", "3:29", "0:52", 0.245],
-  ["04", "3:34", "0:50", 0.236]
-];
-var BAR = 400;
-var JSON_LINES = [
-  ['  "id": ', '"run_7Hq2"', "amber"],
-  ['  "status": ', '"passed"', "green"],
-  ['  "tests": ', "2418", "amber"],
-  ['  "runners": ', "64", "amber"],
-  ['  "duration_s": ', "52.3", "amber"]
-];
-var cues = [
-  { layer: "Hook", preset: "typewriter", at: 0, params: { duration: 700 } },
-  // The window is on with the hook's first letters, so the frame is never a bare ground.
-  cutOn("Stage", 120),
-  cutOn("Steps bar", beat(1)),
-  ...[1, 2, 3].map((n, i) => ({ layer: `Step fill ${n}`, preset: "wipe-in", at: beat(STEP[i]), params: { duration: beat(STEP[i + 1] - STEP[i]), ease: ease.linear } })),
-  cutOn("Field ring", CLICK1),
-  cutOn("New shard", beat(STEP[1] + 2), beat(1)),
-  cutOn("More line", beat(STEP[1] + 4)),
-  cutOn("Diff del", beat(STEP[2] + 1)),
-  cutOn("Diff add", beat(STEP[2] + 2)),
-  cutOn("Json line", CLICK2 + 120, 180),
-  cutOn("Json close", CLICK2 + 120 + 180 * 5),
-  { layer: "Call", preset: "flash", at: beat(STEP[4]), params: { duration: 400, ease: ease.hold } },
-  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 400, amount: 0.04 } }
-];
-var counts = [
-  { layer: "Runners figure", at: CLICK1 + 100, duration: 900, tick: 60, counter: { from: 4, to: 64 } }
-];
-var swaps = [captionSwap(["One shard holds everyone.", "Bump runners to 64.", "Shards rebalance by timing.", "One line in ci.yml."], 0, S.duration - 30, { stagger: 60, in: 200, out: 160, rise: 0 })];
-var style_terminal_feature_demo_default = defineTemplate({
-  id: "motion-saas-style-terminal-feature-demo",
-  meta: {
-    name: NAME,
-    description: "A 15-second feature demo in the terminal look: a pointer works a terminal dashboard step by step while the view cuts in to each click. A runners field ticks from 4 to 64, shard bars step down and an estimate rolls from 14:08 to 00:52, the change lands as a red and green diff, and a folded JSON response opens a line at a time. Step bar, burned-in captions and music, 9:16 with square and 16:9 cuts",
-    category: "animation",
-    tags: ["animation", "saas", "terminal", "monospace", "cli", "tui", "developer tools", "demo", "feature", "cursor", "zoom", "counter", "diff", "json", "captions", "music", "audio", "reel", "shorts"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "demo", "video"],
-    useCases: ["launch", "education", "onboarding"],
-    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;
-    termBrand(k, {});
-    const term = mono(k, "Term 22", SIZE, { lead: LH / SIZE });
-    mono(k, "Brand 30", 30, { weight: 700, lead: 1.2 });
-    mono(k, "Label 22", 22, { weight: 500, lead: 1.4 });
-    mono(k, "Hook 66", 66, { weight: 800, lead: 1.15, spacing: -2 });
-    mono(k, "Hook 52", 52, { weight: 800, lead: 1.15, spacing: -1.5 });
-    mono(k, "Caption 34", 34, { weight: 600, lead: 1.35 });
-    mono(k, "Button 30", 30, { weight: 700, lead: 1.3 });
-    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `$ ${SHARD.install}`, pad: [16, 26], radius: 4 });
-    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 16 });
-    ground(k, sheet, 1080, 1920, { cw: 18, lh: 36 });
-    minimap(k, sheet, { x: 140, y: 1476, width: 800, rows: 16, seed: 23, scroll: { duration: S.duration, every: beat(1) } });
-    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
-    lockup(k, top, { size: 30, style: "Brand 30" });
-    const tag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 12, bottom: 4, left: 12 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Feature tag" });
-    k.text(tag, "shard top --rebalance", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Feature words" });
-    k.text(sheet, "Slow shard?\nSplit it live.", { style: "Hook 66", color: "text", name: "Hook" });
-    const stage = k.stack(sheet, { width: W.w, height: W.h, clip: true, radius: 6, name: "Stage" });
-    const cam = k.frame(stage, { x: 0, y: 0, width: W.w, height: W.h }, { name: "Camera" });
-    const t = termWindow(k, cam, { w: W.w, h: W.h, left: "shard top", right: "run 7Hq2 \xB7 main", style: "Label 22", absolute: { x: 0, y: 0 }, shadow: false, pad: 24, gap: 12 });
-    const inner = W.w - 48;
-    const head = k.stack(t.body, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", height: 44, name: "Head" });
-    const field = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 10, name: "Field" });
-    k.text(field, "runners", { style: term, color: "cardMuted", autoWidth: true, name: "Field label" });
-    const box = k.stack(field, { direction: "HORIZONTAL", width: Math.round(CW * 5), height: 40, align: "CENTER", justify: "CENTER", stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Field box" });
-    k.text(box, "64", { style: term, color: "amber", width: Math.round(CW * 3), align: "CENTER", name: "Runners figure" });
-    k.rect(field, 4, 40, "primary", { name: "Field ring" });
-    const est = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: "Estimate" });
-    k.text(est, "est ", { style: term, color: "cardMuted", autoWidth: true, name: "Estimate label" });
-    const clock = k.text(est, "00:52", { style: term, color: "green", width: Math.ceil(CW * 5), name: "Estimate figure" });
-    const rows = k.stack(t.body, { gap: 0, name: "Shards" });
-    const barFills = [], times = [];
-    const shardRow = (n, time, frac, name) => {
-      const row = k.stack(rows, { direction: "HORIZONTAL", align: "CENTER", gap: Math.round(CW), height: LH, name });
-      k.text(row, `shard ${n}`, { style: term, color: "cardMuted", autoWidth: true, name: "Shard label" });
-      const track = k.stack(row, { width: BAR, height: 14, fill: "line", name: "Shard track" });
-      const fill = k.rect(track, Math.round(BAR * frac), 14, "green", { name: "Shard bar" });
-      const tx = k.text(row, time, { style: term, color: "amber", width: Math.ceil(CW * 5), name: "Shard time" });
-      return { fill, tx };
-    };
-    for (const [n, from, to2, frac] of SHARDS) {
-      const r = shardRow(n, to2, frac, "Shard");
-      barFills.push({ id: r.fill, ratio: 0.97 / frac });
-      times.push({ id: r.tx, from, to: to2 });
-    }
-    shardRow("05", "0:51", 0.24, "New shard");
-    shardRow("06", "0:52", 0.245, "New shard");
-    termLine(k, rows, [{ t: "+ 58 more shards, all under 0:53", c: "cardMuted" }], { style: term, name: "More line", height: LH });
-    const diff = tuiBox(k, t.body, { w: inner, h: 108, label: "ci.yml", labelWidth: Math.round(CW * 6), style: term, pad: 18, inset: 2 });
-    termLine(k, diff.body, [{ t: "-   runners: 4", c: "red" }], { style: term, name: "Diff del" });
-    termLine(k, diff.body, [{ t: "+   runners: 64", c: "green" }], { style: term, name: "Diff add" });
-    const json = tuiBox(k, t.body, { w: inner, h: 252, label: `GET /v1/runs/run_7Hq2`, labelWidth: Math.round(CW * 21), style: term, pad: 18, inset: 2 });
-    const open = k.text(json.body, "{", { style: term, color: "onCard", name: "Json open" });
-    for (const [key, value, c] of JSON_LINES) termLine(k, json.body, [{ t: key, c: "cyan" }, { t: value, c }, { t: ",", c: "cardMuted" }], { style: term, name: "Json line" });
-    const close = k.stack(json.body, { direction: "HORIZONTAL", align: "CENTER", name: "Json close" });
-    k.text(close, "} ", { style: term, color: "onCard", autoWidth: true, name: "Json brace" });
-    blinking(k, cursor(k, close, SIZE, { name: "Cursor" }), hz(16, S.duration));
-    const p = pointer(k, stage, { ...REST, size: 72, fill: "onCard", edge: "well", ring: "primary" });
-    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 8, name: "Steps bar" });
-    for (let i = 1; i <= 3; i++) {
-      const track = k.stack(bars, { height: 8, fill: "line", clip: true, name: "Step track" });
-      k.rect(track, "FILL", 8, "primary", { name: `Step fill ${i}` });
-    }
-    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "card", ink: "onCard", radius: 4, pad: [16, 24], stroke: { color: "edge", width: 2, align: "INSIDE" } });
-    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
-    k.instance(call, "Call", { Label: `$ ${SHARD.install}` }, { name: "Call" });
-    k.text(call, "{{brand.site}}", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Site" });
-    scan(k, sheet);
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    const S2 = beat(STEP[1]) + 200;
-    for (const b of barFills) {
-      k.patch(b.id, { anchorX: 0 });
-      k.animate(b.id, "scaleX", [0, 1, 2, 3, 4].map((i) => ({ t: S2 + i * 160, v: Math.round((b.ratio + (1 - b.ratio) * (i / 4)) * 1e3) / 1e3, ...i < 4 ? { ease: ease.hold } : {} })));
-    }
-    for (const x of times) steps(k, x.id, [[0, x.from], [S2 + 640, x.to]]);
-    steps(k, clock, [[0, "14:08"], ...clockFrames(S2, 900, 848, 52, 14)]);
-    steps(k, open, [[0, "{ ... 5 keys }"], [CLICK2 + 120, "{"]]);
-    camera(k, cam, W.w, W.h, SHOTS);
-    const to = (i, s) => {
-      const at = seenAt(W.w, W.h, SHOTS[s], TARGETS[i]);
-      return { dx: at.x - REST.x, dy: at.y - REST.y };
-    };
-    glide(k, p, [
-      { t: beat(STEP[0]), dx: 0, dy: 0 },
-      { t: CLICK1 - 150, ...to(0, 0) },
-      { t: beat(STEP[1]), ...to(0, 0) },
-      { t: beat(STEP[1]) + 400, dx: 0, dy: 0 },
-      { t: beat(STEP[3]), dx: 0, dy: 0 },
-      { t: CLICK2 - 150, ...to(1, 3) },
-      { t: beat(STEP[4]), ...to(1, 3) },
-      { t: beat(STEP[4]) + 400, dx: 0, dy: 0 }
-    ]);
-    clicks(k, p, [CLICK1, CLICK2]);
-    k.variants(sheet, [...reelCuts({ post: 36, portrait: 60 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 12, counterAxisSpacing: 12, padding: { top: 30, right: 140, bottom: 30, left: 140 } });
-        fitGround(kit, id, { cw: 18, lh: 36 });
-        hide(kit, id, ["Brand row", "Minimap", "Steps bar"]);
-        restyle(kit, id, "Hook", "Hook 52");
-        for (const n of kit.named(id, "Hook")) kit.patch(n, { characters: "Slow shard? Split it live." });
-      }
-    }).slice(0, 1), wideCut(640, (kit, id, right) => {
-      const scale = Math.min(right.width / W.w, (right.height - 30) / W.h), x = right.x + Math.round((right.width - W.w * scale) / 2), y = right.y + Math.round((right.height - 30 - W.h * scale) / 2);
-      fitGround(kit, id, { cw: 18, lh: 36 });
-      float(kit, id, "Stage", x, y, { scale });
-      float(kit, id, "Steps bar", x, y + Math.round(W.h * scale) + 22, { width: Math.round(W.w * scale) });
-      hide(kit, id, ["Minimap"]);
-    })]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_terminal_feature_demo_default
-};

package/dist/chunks/chunk-FCMZFHSX.js

@@ -1,212 +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 {
-  drawn,
-  soft
-} from "./chunk-3QM22WL7.js";
-import {
-  glow
-} from "./chunk-2FDNFAJ3.js";
-import {
-  flatPhone,
-  uiRoles
-} from "./chunk-SCE4YRSR.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-PFCHOCEN.js";
-import {
-  ground
-} from "./chunk-YHBAWSDX.js";
-import {
-  box
-} from "./chunk-6RCDZU4R.js";
-import {
-  defineTemplate
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  preset
-} from "./chunk-PVWIQ6SQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/social/saas-store-panorama.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var W = 1290;
-var H = 2796;
-var N = 6;
-var SCREENS = [
-  { name: "Today", tabs: [4, 0], blocks: [
-    { kind: "title", text: "Praia do Norte", note: "Today" },
-    { kind: "hero", label: "Next high tide", figure: "6:42 am", note: "1.9 m \xB7 rising for 2 h 10 min", share: 0.64 },
-    { kind: "curve", title: "Tide", note: "Metres", values: [0.6, 1.1, 1.7, 1.9, 1.5, 0.9, 0.5, 0.7, 1.3, 1.8, 1.6, 1], mark: 3, height: 120 },
-    { kind: "tiles", items: [["Swell", "1.4 m"], ["Wind", "8 kn"], ["Water", "17\xB0"]] },
-    { kind: "rows", card: true, rows: [{ title: "Sunrise", sub: "First light 6:31", value: "7:02", glyph: "sun", ink: "accent", tile: "onScreen" }, { title: "Low tide", sub: "0.5 m", value: "12:58", glyph: "drop" }] }
-  ] },
-  { name: "Spots", tabs: [4, 1], blocks: [
-    { kind: "title", text: "Near you", note: "12 spots" },
-    { kind: "chips", items: ["Now", "+3 h", "+6 h", "Tomorrow"] },
-    { kind: "rows", card: true, rows: [
-      { title: "Praia do Norte", sub: "Clean \xB7 1.4 m at 11 s", value: "9.1", glyph: "star", ink: "accent", tile: "onScreen" },
-      { title: "Baleal north", sub: "Glassy \xB7 1.1 m at 10 s", value: "8.4", glyph: "drop" },
-      { title: "Supertubos", sub: "Crowded \xB7 1.6 m at 12 s", value: "7.8", glyph: "drop" },
-      { title: "Cantinho da Ba\xEDa", sub: "Small \xB7 0.6 m at 8 s", value: "5.2", glyph: "moon", ink: "onScreenMuted", tile: "track" },
-      { title: "Lagide", sub: "Blown out \xB7 onshore 18 kn", value: "2.9", glyph: "bolt", ink: "onScreenMuted", tile: "track" }
-    ] },
-    { kind: "bars", title: "Best window today", note: "6\u20139 am", values: [3, 7, 9, 8, 6, 4, 3, 2, 3, 5], hi: 2, height: 90 },
-    { kind: "tiles", items: [["Crowd", "Light"], ["Water", "17\xB0"]] }
-  ] },
-  { name: "Week", tabs: [4, 2], blocks: [
-    { kind: "title", text: "Seven days", note: "Praia do Norte" },
-    { kind: "bars", title: "Swell height", note: "Metres", values: [1.4, 1.2, 0.9, 1.6, 2.3, 2.1, 1.5], hi: 4, labels: ["M", "T", "W", "T", "F", "S", "S"], height: 130 },
-    { kind: "hero", label: "Best day this week", figure: "Friday", note: "2.3 m at 14 s, offshore until noon" },
-    { kind: "rows", card: true, rows: [{ title: "Thursday", sub: "Building all day", value: "1.6 m", glyph: "bars" }, { title: "Friday", sub: "Dawn patrol", value: "2.3 m", glyph: "star", ink: "accent", tile: "onScreen" }, { title: "Saturday", sub: "Holding, more wind", value: "2.1 m", glyph: "bars" }] }
-  ] },
-  { name: "Alerts", tabs: [4, 3], blocks: [
-    { kind: "title", text: "Alerts", note: "3 on" },
-    { kind: "text", text: "Saltline watches your spots and tells you the evening before they turn on." },
-    { kind: "checks", rows: [["Praia do Norte above 2 m", true], ["Baleal glassy before work", true], ["Spring low tide for the rock pools", true], ["Water over 19\xB0", false]] },
-    { kind: "hero", label: "Tomorrow, 6:10 am", figure: "It\u2019s on.", note: "Praia do Norte \xB7 2.3 m, offshore", fill: "accent", ink: "onAccent" },
-    { kind: "button", label: "Add an alert" },
-    { kind: "heading", text: "Last week", note: "4 sent" },
-    { kind: "rows", card: true, rows: [{ title: "Baleal was glassy", sub: "Tuesday 6:40 \xB7 you went", glyph: "check", ink: "positive" }, { title: "Spring low, 0.2 m", sub: "Sunday 13:10", glyph: "drop" }] }
-  ] }
-];
-var PHONES = [
-  { cx: 1290, top: 1040, tilt: -6, screen: 0 },
-  { cx: 3225, top: 960, tilt: 0, screen: 1 },
-  { cx: 5160, top: 1040, tilt: 6, screen: 2 },
-  { cx: 7095, top: 960, tilt: 0, screen: 3 }
-];
-var SCALE = 2.12;
-var CAPTIONS = [
-  ["Tides", "Know the tide before you leave the house.", "left"],
-  ["Spots", "Every break near you, scored by the hour.", "right"],
-  ["Now", "Swell, wind and water in one look.", "left"],
-  ["Week", "Seven days out, hour by hour.", "left"],
-  ["Alerts", "A nudge the night before your spot turns on.", "right"],
-  ["Free", "One spot is free. Forever.", "left"]
-];
-var MARKS = [[520, "High 6:42", "1.9 m"], [2e3, "Low 12:58", "0.5 m"], [4240, "High 19:05", "1.8 m"], [6080, "Low 1:14", "0.6 m"]];
-var swell = (x, base, amp, period, phase) => base - amp * Math.sin(x / period * Math.PI * 2 + phase) - amp * 0.22 * Math.sin(x / period * Math.PI * 6.2 + phase * 2);
-var LAYERS = [
-  { role: "sea1", base: 1560, amp: 150, period: 3760, phase: 0.72 },
-  { role: "sea2", base: 1930, amp: 110, period: 2900, phase: 2.2 },
-  { role: "sea3", base: 2330, amp: 90, period: 2300, phase: 4.1 }
-];
-var saas_store_panorama_default = defineTemplate({
-  id: "social-saas-store-panorama",
-  meta: {
-    name: "SaaS store screenshots: panorama",
-    description: "Six App Store screenshots (1290 \xD7 2796) that are one continuous picture: a sea of three swells, a sun on the seam between two frames, a tide line with its high and low marks, and phones cut by the frame edges so every screenshot shows the start of the next and invites the swipe. Drawn from world coordinates, sheet by sheet. Drop your own capture on each phone\u2019s screenshot slot",
-    category: "social",
-    tags: ["saas", "saas store", "app store", "screenshots", "panorama", "panoramic", "continuous", "iphone", "aso", "mobile app", "subscription app", "listing", "swipe"],
-    platforms: ["app-store", "ios"],
-    formats: ["screenshot", "gallery"],
-    useCases: ["launch", "brand-intro"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  sequence: true,
-  build() {
-    const k = new Kit("SaaS store screenshots: panorama", preset("appstore-iphone"));
-    k.quantizeGeometry = true;
-    k.brand(
-      {
-        paper: "#F6E7D3",
-        text: "#0B2E3A",
-        primary: "#0E6E7E",
-        onPrimary: "#FFFFFF",
-        accent: "#FF7A3D",
-        onAccent: "#2A1004",
-        ...uiRoles({ screen: "#F2F6F6", surface: "#FFFFFF", onScreen: "#0B2E3A", onScreenMuted: "#4E666E", line: "#D6E2E4", track: "#DDE8EA", tile: "#DCEFF1", photo: "#BFD9DD", primary: "#0E6E7E", onPrimary: "#FFFFFF", accent: "#FF7A3D", onAccent: "#2A1004" })
-      },
-      { name: "Saltline" }
-    );
-    k.palette({ sea1: "#3FA3A8", sea2: "#16798A", sea3: "#0B4F63", foam: "#F6FBFA", onFoam: "#0B2E3A", sky: "#FFD9A8" });
-    k.textStyle("Caption 132", { ...SERIF, size: 132, fontWeight: 700, letterSpacing: -4.2, lineHeight: 132 });
-    k.textStyle("Kicker 34", { ...MONO, size: 34, fontWeight: 700, letterSpacing: 2.4, lineHeight: 42, textCase: "UPPER" });
-    k.textStyle("Mark 34", { size: 34, fontWeight: 800, letterSpacing: -0.6, lineHeight: 40 });
-    k.textStyle("Mark note 28", { ...MONO, size: 28, fontWeight: 600, lineHeight: 34 });
-    k.component("Tide mark", { width: "HUG", gap: 2, fill: "foam", radius: 22, padding: { top: 16, right: 26, bottom: 16, left: 26 }, effects: [soft(k, "text", 0.22, 16, 40)], description: "A flag on the tide line: high or low, the time and the height.", props: { Label: "High 6:42", Height: "1.9 m" } }, (id) => {
-      k.propText(id, "Label", { style: "Mark 34", color: "onFoam", autoWidth: true });
-      k.propText(id, "Height", { style: "Mark note 28", color: "onFoam", autoWidth: true });
-    });
-    let cover = "";
-    for (let i = 0; i < N; i++) {
-      const sheet = i === 0 ? k.sheet : k.addSheet(preset("appstore-iphone"));
-      ground(k, sheet, `${i + 1} \xB7 ${CAPTIONS[i][0]}`, "paper");
-      k.patch(sheet, { x: i * (W + 120), y: 0 });
-      if (!cover) cover = sheet;
-      const ox = i * W;
-      const near = (x, reach) => x > ox - reach && x < ox + W + reach;
-      k.rect(sheet, W, 940, [k.gradient({ from: "sky", to: "sky", angle: 90, fromOpacity: 0, toOpacity: 0.85 })], { name: "Sky", absolute: { x: 0, y: 860 } });
-      if (near(2580, 900)) {
-        glow(k, sheet, "accent", 1500, 2580 - ox, 1380, 0.5, "Sun glow");
-        k.ellipse(sheet, 620, "accent", { name: "Sun", absolute: { x: 2580 - 310 - ox, y: 1070 } });
-      }
-      if (near(6400, 500)) k.ellipse(sheet, 150, k.tint("foam", 0.9), { name: "Moon", absolute: { x: 6400 - ox, y: 880 } });
-      const gulls = [];
-      for (let g = 0; g < 26; g++) {
-        const gx = 300 + g * 291 + g * 97 % 140, gy = 860 + g * 173 % 330, s = 16 + g * 31 % 18;
-        if (near(gx, 60)) gulls.push({ closed: false, points: [{ x: gx - ox - s, y: gy - s * 0.4 }, { x: gx - ox - s * 0.4, y: gy - s * 0.55 }, { x: gx - ox, y: gy }, { x: gx - ox + s * 0.4, y: gy - s * 0.55 }, { x: gx - ox + s, y: gy - s * 0.4 }] });
-      }
-      drawn(k, sheet, gulls, "text", { name: "Gulls", strokeWidth: 5, opacity: 0.55 });
-      LAYERS.forEach((L, li) => {
-        const pts = [];
-        for (let x = -40; x <= W + 40; x += 30) pts.push({ x, y: swell(x + ox, L.base, L.amp, L.period, L.phase) });
-        drawn(k, sheet, [{ closed: true, points: [...pts, { x: W + 40, y: H + 10 }, { x: -40, y: H + 10 }] }], L.role, { name: `Swell ${li + 1}` });
-        const dashes = [];
-        for (let d = 0; d < 9; d++) {
-          const x = (d * 167 + li * 61 + i * 23) % 1250 + 20, y = swell(x + ox, L.base, L.amp, L.period, L.phase) + 60 + d * 71 % 190;
-          dashes.push(box(x, y, 60 + d * 37 % 90, 7));
-        }
-        drawn(k, sheet, dashes, "foam", { name: `Light ${li + 1}`, opacity: 0.28 - li * 0.06 });
-      });
-      if (near(2580, 700)) {
-        const glints = [];
-        for (let g = 0; g < 14; g++) {
-          const w = 420 - g * 22 + g * 53 % 60;
-          glints.push(box(2580 - ox - w / 2 + g * 41 % 50 - 25, 1620 + g * 78, w, 12));
-        }
-        drawn(k, sheet, glints, "accent", { name: "Sun path", opacity: 0.6 });
-      }
-      const L0 = LAYERS[0];
-      const line = [];
-      for (let x = -40; x <= W + 40; x += 30) line.push({ x, y: swell(x + ox, L0.base, L0.amp, L0.period, L0.phase) });
-      drawn(k, sheet, [{ closed: false, points: line }], "foam", { name: "Tide line", strokeWidth: 10 });
-      for (const [mx, label, height] of MARKS) {
-        if (mx - ox < 20 || mx - ox > W - 340) continue;
-        const my = swell(mx, L0.base, L0.amp, L0.period, L0.phase);
-        k.rect(sheet, 6, 150, "foam", { name: "Mark stem", absolute: { x: mx - ox - 3, y: my - 150 } });
-        k.ellipse(sheet, 44, "accent", { name: "Mark dot", stroke: { color: "foam", width: 8, align: "OUTSIDE" }, absolute: { x: mx - ox - 22, y: my - 22 } });
-        k.instance(sheet, "Tide mark", { Label: label, Height: height }, { name: "Tide mark", absolute: { x: mx - ox - 3, y: my - 270 } });
-      }
-      const [kicker, caption, side] = CAPTIONS[i];
-      const cw = 1010;
-      const words = k.stack(sheet, { width: cw, gap: 30, name: "Caption block", absolute: { x: side === "left" ? 96 : W - 96 - cw, y: 190 } });
-      const tag = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Kicker row" });
-      k.ellipse(tag, 26, "accent", { name: "Kicker dot" });
-      k.text(tag, `${String(i + 1).padStart(2, "0")} \xB7 ${kicker}`, { style: "Kicker 34", color: "text", autoWidth: true, name: "Kicker" });
-      k.text(words, caption, { style: "Caption 132", color: "text", name: "Caption" });
-      for (const p of PHONES) {
-        const pw = Math.round(426 * SCALE);
-        if (!near(p.cx, pw / 2 + 120)) continue;
-        flatPhone(k, sheet, { spec: SCREENS[p.screen], scale: SCALE, x: p.cx - ox - pw / 2, y: p.top, rotation: p.tilt, name: "Phone", shadow: { type: "DROP_SHADOW", color: k.color("sea3", 0.5), offset: { x: 0, y: 24 }, blur: 50, spread: 0, visible: true } });
-      }
-    }
-    k.setCover(cover);
-    return k.finish();
-  }
-});
-
-export {
-  saas_store_panorama_default
-};