@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-W7HQG4RP.js

@@ -1,220 +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 {
-  COMIC,
-  balloon,
-  bandDots,
-  benday,
-  captionBox,
-  comicBrand,
-  hero,
-  impact,
-  inkShadow,
-  issueBox,
-  panel,
-  rays,
-  restage,
-  stage,
-  streaks,
-  villain,
-  windowCard
-} from "./chunk-C6LLB7PF.js";
-import {
-  background,
-  refill
-} from "./chunk-HAK2G6YB.js";
-import {
-  MONO
-} from "./chunk-PFCHOCEN.js";
-import {
-  bed
-} from "./chunk-42LEBOKV.js";
-import {
-  sizeOf
-} from "./chunk-YHBAWSDX.js";
-import {
-  feedVariants,
-  pill,
-  verticalPadding
-} from "./chunk-LEKU2ZW3.js";
-import {
-  defineTemplate
-} from "./chunk-PMGFSLPU.js";
-import {
-  Kit,
-  preset
-} from "./chunk-OFAIOFJQ.js";
-import {
-  ease
-} from "./chunk-MFBWT2Y7.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/motion/comic-book-issue-reel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var MUSIC = bed("launch", 32);
-var beat = MUSIC.beat;
-var DURATION = MUSIC.duration;
-var VIEW = { w: 800, h: 620 };
-var PAGE = { w: VIEW.w * 2, h: VIEW.h * 2 };
-var P1 = { x: 0, y: 0, w: 780, h: 600 };
-var P2 = { x: 820, y: 0, w: 780, h: 600 };
-var P3 = { x: 0, y: 640, w: 1600, h: 600 };
-var look = (x, y, zoom) => ({ zoom, tx: -zoom * (x - PAGE.w / 2), ty: -zoom * (y - PAGE.h / 2) });
-var whip = ease.inOut("expo");
-var SHOTS = [
-  { t: 0, at: look(390, 300, 1), ease: ease.linear },
-  { t: beat(8), at: look(390, 300, 1.08), ease: whip },
-  { t: beat(9), at: look(1210, 300, 1), ease: ease.linear },
-  { t: beat(16), at: look(1210, 300, 1.08), ease: whip },
-  { t: beat(17), at: look(800, 940, 0.74), ease: ease.linear },
-  { t: beat(23), at: look(800, 940, 0.8), ease: ease.inOut("cubic") },
-  { t: beat(25), at: look(800, 620, 0.5) }
-];
-var swaps = [
-  { layer: "Caption", words: ["3:07 a.m. A deploy just broke checkout.", "Backstop sees the error rate jump.", "It rolls the deploy back in 9 seconds.", "You sleep. Customers pay."], at: beat(1), hold: 1900, stagger: 60, in: 350, out: 250, unit: "word", rise: 24 }
-];
-var cues = [
-  { layer: "Hook", preset: "pop-in", at: 0, params: { duration: 260, amount: 1.25 } },
-  { layer: "Head", preset: "fade-in", at: 0, params: { duration: 250 } },
-  { layer: "Panel one", preset: "pop-in", at: 120, params: { duration: 300, amount: 1.3 } },
-  { layer: "Narration", preset: "pop-in", at: beat(1) - 150, params: { duration: 280 } },
-  { layer: "Bug", preset: "pop-in", at: beat(2), params: { duration: 320 } },
-  { layer: "Bug says", preset: "pop-in", at: beat(3), params: { duration: 260 } },
-  { layer: "Crash", preset: "pop-in", at: beat(5), params: { duration: 240, amount: 1.6 } },
-  { layer: "Stage", preset: "camera-shake", at: beat(5), params: { duration: 400, distance: 14 } },
-  { layer: "Panel two", preset: "pop-in", at: beat(9), params: { duration: 300, amount: 1.3 } },
-  { layer: "Hero", preset: "slide-in", at: beat(10), params: { duration: 420, direction: "left" } },
-  { layer: "Hero says", preset: "pop-in", at: beat(11), params: { duration: 260 } },
-  { layer: "Spotted", preset: "pop-in", at: beat(13), params: { duration: 260 } },
-  { layer: "Panel three", preset: "pop-in", at: beat(17), params: { duration: 300, amount: 1.3 } },
-  { layer: "Rolled back", preset: "pop-in", at: beat(18), params: { duration: 260, amount: 1.7 } },
-  { layer: "Stage", preset: "camera-shake", at: beat(18), params: { duration: 500, distance: 22 } },
-  { layer: "Restored", preset: "pop-in", at: beat(20), params: { duration: 260 } },
-  { layer: "Rolled back", preset: "pulse", at: beat(22), params: { duration: 600, amount: 0.06 } },
-  { layer: "Call", preset: "pop-in", at: beat(26), params: { duration: 320 } },
-  { layer: "Site box", preset: "pop-in", at: beat(27), params: { duration: 300 } },
-  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 600, amount: 0.05 } }
-];
-function furnish(k, sheet) {
-  const { w, h } = sizeOf(k, sheet);
-  const pad = k.node(sheet).padding;
-  refill(k, sheet);
-  bandDots(k, sheet, "Top dots", { x: 0, y: 0, w, h: pad.top - 16 });
-  bandDots(k, sheet, "Foot dots", { x: 0, y: h - pad.bottom + 16, w, h: pad.bottom - 16 });
-}
-var comic_book_issue_reel_default = defineTemplate({
-  id: "motion-comic-book-issue-reel",
-  meta: {
-    name: "Comic launch reel",
-    description: 'A 16-second feature launch told as issue no. 12 of a comic: the complaint lands on the first frame, a panel slams in with the bug that broke checkout, the camera whips across the page to the hero on focus lines and down to a full-width hit with "ROLLED BACK!" in an impact burst, then pulls out to the whole page. Speech balloons pop, a narrator\u2019s box carries burned-in captions, and every slam lands on a beat of a 128 BPM loop (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts',
-    category: "animation",
-    tags: ["animation", "comic book", "panels", "speech balloon", "halftone", "ben-day dots", "speed lines", "impact", "launch", "feature", "saas", "devtools", "reel", "captions", "music", "audio"],
-    platforms: ["instagram", "tiktok", "youtube", "x"],
-    formats: ["reel", "short", "story", "post", "portrait-post"],
-    useCases: ["launch", "announcement", "comic"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, swaps },
-  build() {
-    const k = new Kit("Comic launch reel", preset("ig-story"));
-    k.quantizeGeometry = true;
-    comicBrand(k);
-    k.textStyle("Masthead 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 1.5, lineHeight: 26, textCase: "UPPER" });
-    k.textStyle("Issue 26", { size: 26, fontWeight: 900, letterSpacing: -0.5, lineHeight: 28 });
-    k.textStyle("Issue small 13", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 0.5, lineHeight: 18 });
-    k.textStyle("Hook 92", { size: 92, fontWeight: 900, letterSpacing: -4, lineHeight: 86 });
-    k.textStyle("Hook 66", { size: 66, fontWeight: 900, letterSpacing: -2.8, lineHeight: 62 });
-    k.textStyle("Balloon 38", { size: 38, fontWeight: 800, letterSpacing: -0.5, lineHeight: 42, textAlign: "CENTER" });
-    k.textStyle("Box 26", { size: 26, fontWeight: 800, letterSpacing: 0.4, lineHeight: 32 });
-    k.textStyle("Window 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 26 });
-    k.textStyle("Error 110", { size: 110, fontWeight: 900, letterSpacing: -5, lineHeight: 100 });
-    k.textStyle("Sound 72", { size: 72, fontWeight: 900, letterSpacing: -2.5, lineHeight: 70, textAlign: "CENTER" });
-    k.textStyle("Sound 150", { size: 150, fontWeight: 900, letterSpacing: -6, lineHeight: 132, textAlign: "CENTER" });
-    k.textStyle("Caption 32", { size: 32, fontWeight: 800, lineHeight: 40 });
-    k.textStyle("Caption 26", { size: 26, fontWeight: 800, lineHeight: 34 });
-    k.textStyle("Button 30", { size: 30, fontWeight: 900, lineHeight: 38 });
-    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 30 });
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "READ ISSUE NO. 12", pad: [18, 30], radius: 0 });
-    const sheet = k.sheet;
-    k.nameSheet(sheet, "Launch reel");
-    k.flowSheet(sheet, 20, verticalPadding(), "paper", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
-    background(k, sheet, "paper");
-    benday(k, sheet, 1080, 620, { role: "accent", dot: 30, angle: 270, from: 0.05, to: 0.8, name: "Top dots" });
-    benday(k, sheet, 1080, 520, { role: "primary", dot: 30, angle: 90, from: 0.02, to: 0.62, name: "Foot dots" });
-    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Head" });
-    issueBox(k, head, { number: "Issue 26", small: "Issue small 13", price: "OCT \xB7 FREE" });
-    k.text(head, "{{brand.name}} \xB7 the auto-rollback issue", { style: "Masthead 20", color: "text", name: "Masthead" });
-    k.text(sheet, "A DEPLOY JUST BROKE CHECKOUT.", { style: "Hook 92", color: "text", name: "Hook", effects: inkShadow(k, 6, "primary") });
-    const row = k.stack(sheet, { align: "CENTER", name: "Stage row" });
-    const { art } = stage(k, row, VIEW.w, VIEW.h, { clip: true, fill: "card", stroke: { color: "text", width: 8, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 12, "text") });
-    const cam = k.frame(art, { x: -VIEW.w / 2, y: -VIEW.h / 2, width: PAGE.w, height: PAGE.h }, { name: "Camera" });
-    panel(k, cam, P1, "night", (p) => {
-      benday(k, p, P1.w, P1.h, { role: "nightDeep", dot: 18, angle: 90, from: 0.1, to: 0.8 });
-      rays(k, p, P1.w, P1.h, { cx: 560, cy: 360, role: "nightDeep", n: 22, inner: 200, seed: 4 });
-      windowCard(k, p, 330, "checkout", (body) => {
-        k.text(body, "500", { style: "Error 110", color: "primary", name: "Error code" });
-        k.text(body, "Payment failed. Try again later.", { style: "Window 20", color: "onCard", name: "Error line" });
-      }, { style: "Window 20", name: "Checkout window", absolute: { x: 36, y: 270 }, deg: -4 });
-      villain(k, p, 440, { name: "Bug", absolute: { x: 340, y: 170 }, deg: 8 });
-      captionBox(k, p, "3:07 a.m. \xB7 production", { style: "Box 26", name: "Clock", absolute: { x: 26, y: 26 } });
-      balloon(k, p, "I ate your checkout!", { style: "Balloon 38", width: 330, tail: "left", name: "Bug says", absolute: { x: 420, y: 28 } });
-      impact(k, p, 250, 190, "Crash!", { style: "Sound 72", fill: "primary", ink: "onPrimary", deg: -10, name: "Crash", seed: 5, absolute: { x: 30, y: 96 } });
-    }, { name: "Panel one" });
-    panel(k, cam, P2, "sky", (p) => {
-      rays(k, p, P2.w, P2.h, { cx: 300, cy: 330, role: "skyDeep", n: 34, inner: 230, seed: 8 });
-      benday(k, p, P2.w, 260, { role: "dot", dot: 16, angle: 270, from: 0, to: 0.5, opacity: 0.35 });
-      streaks(k, p, 360, 300, { role: "card", n: 9, seed: 2, x: 0, y: 250 });
-      hero(k, p, 520, { name: "Hero", absolute: { x: 60, y: 96 }, deg: 6 });
-      balloon(k, p, "Not on my watch.", { style: "Balloon 38", width: 300, tail: "left", name: "Hero says", absolute: { x: 452, y: 34 } });
-      captionBox(k, p, "Error rate up 40\xD7.\nSpotted in 4 seconds.", { style: "Box 26", width: 330, name: "Spotted", absolute: { x: 424, y: 470 } });
-    }, { name: "Panel two" });
-    panel(k, cam, P3, "accent", (p) => {
-      rays(k, p, P3.w, P3.h, { cx: 800, cy: 300, role: "primary", n: 44, inner: 300, seed: 12, thick: 0.9 });
-      benday(k, p, 520, P3.h, { role: "primary", dot: 20, angle: 180, from: 0, to: 0.7 });
-      hero(k, p, 560, { name: "Hero hits", absolute: { x: 40, y: 40 }, deg: 14 });
-      villain(k, p, 300, { name: "Bug out", absolute: { x: 1270, y: 30 }, deg: 152 });
-      streaks(k, p, 330, 200, { role: "ink", n: 7, seed: 9, dir: -1, x: 1010, y: 190 });
-      impact(k, p, 820, 500, "Rolled back!", { style: "Sound 150", fill: "primary", ink: "onPrimary", deg: -5, name: "Rolled back", seed: 21, points: 18, depth: 0.26, shadow: 16, line: 8, absolute: { x: 420, y: 50 } });
-      captionBox(k, p, "v4.11 restored in 9 seconds. Nobody was paged.", { style: "Box 26", width: 470, name: "Restored", absolute: { x: 1090, y: 470 } });
-    }, { name: "Panel three" });
-    k.patch(cam, { scaleX: 0.5, scaleY: 0.5 });
-    k.animate(cam, "scaleX", SHOTS.map((s) => ({ t: s.t, v: s.at.zoom, ...s.ease ? { ease: s.ease } : {} })));
-    k.animate(cam, "scaleY", SHOTS.map((s) => ({ t: s.t, v: s.at.zoom, ...s.ease ? { ease: s.ease } : {} })));
-    k.animate(cam, "translateX", SHOTS.map((s) => ({ t: s.t, v: s.at.tx, ...s.ease ? { ease: s.ease } : {} })));
-    k.animate(cam, "translateY", SHOTS.map((s) => ({ t: s.t, v: s.at.ty, ...s.ease ? { ease: s.ease } : {} })));
-    const box = k.stack(sheet, { height: 116, justify: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "accent", stroke: { color: "text", width: 5, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 8, "text"), name: "Narration" });
-    k.text(box, swaps[0].words[0], { style: "Caption 32", color: "onAccent", name: "Caption" });
-    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Foot" });
-    k.instance(foot, "Button", { Label: `READ ISSUE NO. ${COMIC.issue}` }, { name: "Call" });
-    k.text(k.stack(foot, { direction: "HORIZONTAL", width: "HUG", fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, padding: { top: 16, right: 18, bottom: 16, left: 18 }, name: "Site box" }), "{{brand.site}}", { style: "Site 24", color: "onCard", autoWidth: true, name: "Site" });
-    furnish(k, sheet);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    const cut = (scale, hook, caption) => (kit, id) => {
-      restage(kit, id, VIEW.w, VIEW.h, scale);
-      if (hook) for (const n of kit.named(id, "Hook")) kit.restyle(n, hook);
-      if (caption) {
-        for (const c of kit.named(id, "Caption")) kit.restyle(c, caption);
-        for (const b of kit.named(id, "Narration")) kit.patch(b, { height: 92 });
-      }
-      furnish(kit, id);
-    };
-    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, { post: cut(0.92, "Hook 66", "Caption 26"), portrait: cut(1.17) }));
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  comic_book_issue_reel_default
-};

package/dist/chunks/chunk-WCNRSB6K.js

@@ -1,304 +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 {
-  Kit,
-  preset
-} from "./chunk-OFAIOFJQ.js";
-import {
-  presetPaint,
-  shaderPreset
-} from "./chunk-PD6JKRYP.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/game/shared.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var W = 1920;
-var H = 1080;
-function gameKit(name, presetId = "game-1080p") {
-  const k = new Kit(name, preset(presetId));
-  k.quantizeGeometry = true;
-  k.doc = { ...k.doc, settings: { ...k.doc.settings, showAdvance: { on: "click" }, showLoop: false } };
-  return k;
-}
-var vn = (k, id) => {
-  const v = k.doc.variables?.[id];
-  if (!v) throw new Error(`no variable ${id}`);
-  return v.name;
-};
-function gameVar(k, collection, name, type, value) {
-  const id = k.variable(collection, name, type, value);
-  return { id, n: vn(k, id) };
-}
-var SHEET_COLUMNS = 4;
-function screen(k, name, o) {
-  const id = o.first ? k.sheet : k.addScreen(name);
-  k.nameSheet(id, name);
-  const page = k.doc.nodes[k.pageId];
-  const index = page.childIds.filter((c) => k.doc.nodes[c]?.type === "FRAME").indexOf(id);
-  const f = k.node(id);
-  k.patch(id, { x: index % SHEET_COLUMNS * (f.width + 120), y: Math.floor(index / SHEET_COLUMNS) * (f.height + 200) });
-  k.patch(id, {
-    fills: o.fills ?? k.paint(o.ground),
-    clipsContent: true,
-    layoutMode: "VERTICAL",
-    padding: { top: 0, right: 0, bottom: 0, left: 0 },
-    itemSpacing: 0,
-    primaryAxisAlignItems: "MIN",
-    counterAxisAlignItems: "MIN",
-    layoutSizingHorizontal: "FIXED",
-    layoutSizingVertical: "FIXED"
-  });
-  k.timeline(id, { duration: o.duration ?? 4e3, fps: 30 });
-  return id;
-}
-function box(k, parent, x, y, w, h, o = {}) {
-  return k.stack(parent, { ...o, width: w, height: h, absolute: { x, y } });
-}
-function label(k, parent, text, style, color, x, y, o = {}) {
-  return k.text(parent, text, { style, color, absolute: { x, y }, ...o.w ? { width: o.w } : { autoWidth: true }, ...o.align ? { align: o.align } : {}, ...o.name ? { name: o.name } : {}, ...o.effects ? { effects: o.effects } : {} });
-}
-function readout(k, parent, expression, rest, style, color, x, y, o = {}) {
-  const id = label(k, parent, rest, style, color, x, y, { w: o.w ?? 200, align: o.align, name: o.name ?? "Readout", effects: o.effects });
-  k.bindExpression(id, "characters", expression);
-  return id;
-}
-function shaderLayer(k, parent, shader, params, o = {}) {
-  const p = shaderPreset(shader);
-  if (!p) throw new Error(`no shader preset "${shader}"`);
-  const f = k.node(parent);
-  const fill = presetPaint({ id: "f1", type: "SHADER", visible: true, opacity: 1 }, p, params);
-  return k.rect(parent, o.w ?? f.width, o.h ?? f.height, [fill], { name: o.name ?? `${shader} backdrop`, absolute: { x: o.x ?? 0, y: o.y ?? 0 }, ...o.opacity !== void 0 ? { opacity: o.opacity } : {} });
-}
-var set = Kit.set;
-var when = Kit.when;
-var go = Kit.go;
-var back = () => Kit.go(null, "DISSOLVE", { navigation: "BACK", duration: 250 });
-var close = () => Kit.go(null, "INSTANT", { navigation: "CLOSE" });
-var overlay = (frame) => Kit.go(frame, "DISSOLVE", { navigation: "OVERLAY", duration: 200, overlay: { overlayPosition: "CENTER" } });
-function onAll(k, id, actions, o = {}) {
-  for (const a of actions) k.on(id, a, o);
-}
-var FOCUS_GLIDE = 140;
-function menu(k, screenId, items, o) {
-  const n = items.length;
-  const f = o.focus.n;
-  const ih = o.itemHeight ?? o.pitch - 12;
-  const w = o.horizontal ? o.width * n + o.pitch * (n - 1) : o.width;
-  const h = o.horizontal ? ih : o.pitch * (n - 1) + ih;
-  const list = box(k, screenId, o.x, o.y, w, h, { name: o.name ?? "Menu" });
-  items.forEach((it, i) => {
-    const x = o.horizontal ? i * (o.width + o.pitch) : 0;
-    const y = o.horizontal ? 0 : i * o.pitch;
-    const item = box(k, list, x, y, o.horizontal ? o.width : w, ih, { name: "Menu item" });
-    const plate = k.rect(item, o.horizontal ? o.width : w, ih, typeof o.plate === "string" ? o.plate : o.plate, { name: "Focus plate", radius: o.radius ?? 0, absolute: { x: 0, y: 0 } });
-    const near = `max(0, 1 - abs(${f} - ${i}))`;
-    k.bindExpression(plate, "opacity", near);
-    const lx = o.marker ? 64 : 28;
-    const t = label(k, item, it.label, o.style, o.color, lx, 0, { name: "Item label" });
-    const tn = k.node(t);
-    k.patch(t, { y: Math.round((ih - tn.height) / 2) });
-    k.bindExpression(t, "opacity", `0.62 + 0.38 * ${near}`);
-    if (o.nudge !== 0) k.bindExpression(t, "translateX", `${near} * ${o.nudge ?? 14}`);
-    if (o.marker) {
-      const z = o.marker.size ?? 22, my = Math.round(ih / 2);
-      const m = poly(k, item, [[24, my - z / 2], [24 + z * 0.8, my], [24, my + z / 2]], o.marker.color, { name: "Focus marker" });
-      k.bindExpression(m, "opacity", near);
-      k.bindExpression(m, "translateX", `(${near} - 1) * 12`);
-    }
-    if (it.hint) {
-      const hint = label(k, item, it.hint, o.hintStyle ?? o.style, o.color, lx, 0, { name: "Item hint", w: 360, align: "RIGHT" });
-      k.patch(hint, { x: (o.horizontal ? o.width : w) - 388, y: Math.round((ih - k.node(hint).height) / 2) });
-      k.bindExpression(hint, "opacity", `0.72 + 0.28 * ${near}`);
-    }
-    onAll(k, item, [set(o.focus.id, { value: i, glide: FOCUS_GLIDE }), ...o.onFocus?.(i) ?? []], { trigger: "MOUSE_ENTER" });
-    onAll(k, item, it.actions);
-  });
-  const guard = (c) => o.guard ? `(${o.guard}) && ${c}` : c;
-  const next = o.horizontal ? ["ArrowRight", "d"] : ["ArrowDown", "s"];
-  const prev = o.horizontal ? ["ArrowLeft", "a"] : ["ArrowUp", "w"];
-  const focused = o.onFocus ? [when(items.map((_, i) => ({ if: `${f} == ${i}`, then: o.onFocus(i) })))] : [];
-  for (const key of next) k.on(list, when([{ if: guard("true"), then: [set(o.focus.id, { expression: `(${f} + 1) % ${n}`, glide: FOCUS_GLIDE }), ...focused] }]), { key });
-  for (const key of prev) k.on(list, when([{ if: guard("true"), then: [set(o.focus.id, { expression: `(${f} + ${n - 1}) % ${n}`, glide: FOCUS_GLIDE }), ...focused] }]), { key });
-  const choose = when(items.map((it, i) => ({ if: guard(`${f} == ${i}`), then: it.actions })));
-  for (const key of ["Enter", " "]) k.on(list, choose, { key });
-  if (o.escape) for (const a of o.escape) k.on(list, a, { key: "Escape" });
-  return list;
-}
-function slider(k, parent, o) {
-  const min = o.min ?? 0, max = o.max ?? 100, step = o.step ?? 10;
-  const v = o.variable.n;
-  const trackX = 360, trackW = o.width - trackX - 200;
-  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.label} slider` });
-  label(k, row, o.label, o.labelStyle, o.ink, 0, 12, { name: "Setting name" });
-  const minus = box(k, row, trackX - 60, 8, 40, 40, { name: "Step down", radius: 20, stroke: { color: o.track, width: 2 }, align: "CENTER", justify: "CENTER" });
-  k.text(minus, "\u2212", { style: o.valueStyle, color: o.ink, autoWidth: true, name: "Minus" });
-  const plus = box(k, row, trackX + trackW + 20, 8, 40, 40, { name: "Step up", radius: 20, stroke: { color: o.track, width: 2 }, align: "CENTER", justify: "CENTER" });
-  k.text(plus, "+", { style: o.valueStyle, color: o.ink, autoWidth: true, name: "Plus" });
-  const track = box(k, row, trackX, 22, trackW, 12, { name: "Track", radius: 6, fill: o.track });
-  const frac = `clamp((${v} - ${min}) / ${max - min}, 0, 1)`;
-  const fill = k.rect(track, trackW, 12, o.fill, { name: "Fill", radius: 6, absolute: { x: 0, y: 0 } });
-  k.bindExpression(fill, "width", `${frac} * ${trackW}`);
-  const knob = k.ellipse(row, 28, o.knob, { name: "Knob", absolute: { x: trackX - 14, y: 14 } });
-  k.bindExpression(knob, "x", `${trackX - 14} + ${frac} * ${trackW}`);
-  const notches = Math.round((max - min) / step);
-  for (let i = 0; i <= notches; i++) {
-    const hit = box(k, row, trackX + i / notches * trackW - trackW / notches / 2, 8, trackW / notches, 40, { name: "Notch" });
-    k.on(hit, set(o.variable.id, { value: min + i * step, glide: o.glide ?? 160 }));
-  }
-  readout(k, row, `round(${v}) + "${o.suffix ?? ""}"`, `${k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"]}${o.suffix ?? ""}`, o.valueStyle, o.ink, trackX + trackW + 80, 12, { w: 120, align: "RIGHT", name: "Value" });
-  const down = set(o.variable.id, { expression: `max(${min}, ${v} - ${step})`, glide: o.glide ?? 160 });
-  const up = set(o.variable.id, { expression: `min(${max}, ${v} + ${step})`, glide: o.glide ?? 160 });
-  k.on(minus, down);
-  k.on(plus, up);
-  if (o.focus) {
-    const here = `${o.focus.n} == ${o.focus.index}`;
-    for (const key of ["ArrowLeft", "a"]) k.on(row, when([{ if: here, then: [down] }]), { key });
-    for (const key of ["ArrowRight", "d"]) k.on(row, when([{ if: here, then: [up] }]), { key });
-  }
-  return row;
-}
-function toggleComponent(k, o) {
-  if (k.hasComponent("Toggle")) return;
-  k.variantSet("Toggle", "State", ["Off", "On"], { direction: "HORIZONTAL", width: 132, height: 40, gap: 12, align: "CENTER", description: "A switch: click (or Enter while its row is focused) to flip the variable it drives; the knob glides across." }, (state, id) => {
-    const track = k.stack(id, { direction: "HORIZONTAL", width: 68, height: 36, radius: 18, padding: 4, fill: state === "On" ? o.on : o.track, justify: state === "On" ? "MAX" : "MIN", align: "CENTER", name: "Track" });
-    k.ellipse(track, 28, o.knob, { name: "Knob" });
-    k.text(id, state === "On" ? "ON" : "OFF", { style: o.stateStyle, color: o.ink, autoWidth: true, name: "State word" });
-  });
-}
-function toggle(k, parent, o) {
-  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.label} toggle` });
-  label(k, row, o.label, o.labelStyle, o.ink, 0, 12, { name: "Setting name" });
-  const on = k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"] === 1;
-  const sw = k.instance(row, on ? "Toggle/On" : "Toggle/Off", {}, { name: "Switch", absolute: { x: 300, y: 8 } });
-  const flip = [set(o.variable.id, { expression: `1 - ${o.variable.n}` }), when([{ if: `${o.variable.n} == 1`, then: [k.changeAction("Toggle/On", 220, "EASE_IN_OUT")] }, { then: [k.changeAction("Toggle/Off", 220, "EASE_IN_OUT")] }])];
-  onAll(k, sw, flip);
-  if (o.focus) k.on(sw, when([{ if: `${o.focus.n} == ${o.focus.index}`, then: flip }]), { key: "Enter" });
-  return row;
-}
-function keybind(k, parent, o) {
-  const row = box(k, parent, o.x, o.y, o.width, 56, { name: `${o.action} binding` });
-  label(k, row, o.action, o.labelStyle, o.ink, 0, 12, { name: "Action name" });
-  const cap = box(k, row, 300, 4, 180, 48, { name: "Key cap", radius: 8, fill: o.cap, align: "CENTER", justify: "CENTER" });
-  const key = k.text(cap, String(k.doc.variables?.[o.variable.id]?.valuesByMode["Mode 1"] ?? ""), { style: o.capStyle, color: o.onCap, width: 172, align: "CENTER", name: "Key" });
-  k.bindExpression(key, "characters", `${o.rebind.n} == "${o.slot}" ? "PRESS A KEY" : ${o.variable.n}`);
-  const ring = k.rect(row, 188, 56, o.listening, { name: "Listening ring", radius: 12, absolute: { x: 296, y: 0 }, opacity: 0.35 });
-  k.bindExpression(ring, "visible", `${o.rebind.n} == "${o.slot}"`);
-  k.on(row, set(o.rebind.id, { value: o.slot }));
-  if (o.focus) k.on(row, when([{ if: `${o.focus.n} == ${o.focus.index} && ${o.rebind.n} == ""`, then: [set(o.rebind.id, { value: o.slot })] }]), { key: "Enter" });
-  return row;
-}
-function rebindListener(k, screenId, rebind, slots) {
-  k.on(screenId, when([
-    { if: `${rebind.n} != "" && $key == "Escape"`, then: [set(rebind.id, { value: "" })] },
-    ...slots.map((s) => ({ if: `${rebind.n} == "${s.slot}" && $key != "Enter"`, then: [set(s.variable.id, { expression: `$key == " " ? "SPACE" : upper($key)` }), set(rebind.id, { value: "" })] }))
-  ]), { key: "*" });
-}
-function bar(k, parent, o) {
-  const frame = box(k, parent, o.x, o.y, o.w, o.h, { name: o.name ?? "Bar", radius: o.radius ?? 0, fill: o.back, clip: true });
-  const width = (e) => `clamp((${e}) / (${o.max}), 0, 1) * ${o.w}`;
-  const place = (id, e) => {
-    k.bindExpression(id, "width", width(e));
-    if (o.fromRight) k.bindExpression(id, "x", `${o.w} - ${width(e)}`);
-  };
-  const name = o.name ?? "Bar";
-  if (o.chip) place(k.rect(frame, o.w, o.h, o.chip.color, { name: `${name} chip`, radius: o.radius ?? 0, absolute: { x: 0, y: 0 } }), o.chip.expression);
-  place(k.rect(frame, o.w, o.h, o.fill, { name: `${name} fill`, radius: o.radius ?? 0, absolute: { x: 0, y: 0 } }), o.value);
-  return frame;
-}
-function oneShot(k, name, o, build) {
-  const state = o.state ?? "Hit";
-  return k.variantSet(name, "State", ["Idle", state], { width: o.width, height: o.height, description: o.description }, build, (s) => s === state ? { timeline: { duration: o.duration } } : {});
-}
-var keys = (k, id, path, ks) => k.animate(id, path, ks);
-function drift(k, id, path, amp, freq, phase = 0) {
-  k.behave(id, path, [{ kind: "sine", amp, freq, phase }]);
-}
-function spin(k, id, rate) {
-  k.behave(id, "rotation", [{ kind: "spin", rate }]);
-}
-function glow(k, role, blur, a = 0.9) {
-  return { id: `g${blur}`, type: "DROP_SHADOW", color: k.color(role, a), offset: { x: 0, y: 0 }, blur, spread: 0, visible: true, showBehindTransparent: true };
-}
-function focusColumn(k, parent, o) {
-  const f = o.focus.n;
-  const plate = k.rect(parent, o.w, o.pitch - 8, o.plate, { name: "Row focus", radius: o.radius ?? 8, absolute: { x: o.x, y: o.y } });
-  k.bindExpression(plate, "y", `${o.y} + ${f} * ${o.pitch}`);
-  const g = (c) => o.guard ? `(${o.guard}) && ${c}` : c;
-  for (const key of ["ArrowDown", "s"]) k.on(parent, when([{ if: g("true"), then: [set(o.focus.id, { expression: `(${f} + 1) % ${o.count}`, glide: FOCUS_GLIDE })] }]), { key });
-  for (const key of ["ArrowUp", "w"]) k.on(parent, when([{ if: g("true"), then: [set(o.focus.id, { expression: `(${f} + ${o.count - 1}) % ${o.count}`, glide: FOCUS_GLIDE })] }]), { key });
-  if (o.escape) k.on(parent, when([{ if: g("true"), then: o.escape }]), { key: "Escape" });
-  return plate;
-}
-function focusRow(k, row, focus, index) {
-  k.on(row, set(focus.id, { value: index, glide: FOCUS_GLIDE }), { trigger: "MOUSE_ENTER" });
-}
-function poly(k, parent, pts, color, o = {}) {
-  const xs = pts.map((p) => p[0]), ys = pts.map((p) => p[1]);
-  const x0 = Math.min(...xs), y0 = Math.min(...ys);
-  const w = Math.max(1, Math.max(...xs) - x0), h = Math.max(1, Math.max(...ys) - y0);
-  const path = { closed: o.closed ?? o.stroke === void 0, points: pts.map(([x, y]) => ({ x: x - x0, y: y - y0 })) };
-  return k.vector(parent, w, h, [path], color, { name: o.name ?? "Shape", absolute: { x: x0, y: y0 }, ...o.stroke !== void 0 ? { strokeWidth: o.stroke } : {}, ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, ...o.effects ? { effects: o.effects } : {} });
-}
-var blurFx = (radius) => ({ id: `b${radius}`, type: "LAYER_BLUR", radius, visible: true });
-function arcPoints(cx, cy, r, a0, a1, steps = 48) {
-  const out = [];
-  for (let i = 0; i <= steps; i++) {
-    const a = a0 + (a1 - a0) * i / steps;
-    out.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
-  }
-  return out;
-}
-function sector(k, parent, cx, cy, outer, inner, a0, a1, color, o = {}) {
-  const pts = inner > 0 ? [...arcPoints(cx, cy, outer, a0, a1), ...arcPoints(cx, cy, inner, a1, a0)] : [[cx, cy], ...arcPoints(cx, cy, outer, a0, a1)];
-  return poly(k, parent, pts, color, { name: o.name ?? "Sector", opacity: o.opacity, effects: o.effects });
-}
-function arc(k, parent, cx, cy, r, a0, a1, color, width, o = {}) {
-  return poly(k, parent, arcPoints(cx, cy, r, a0, a1), color, { name: o.name ?? "Arc", stroke: width, closed: false, opacity: o.opacity, effects: o.effects });
-}
-
-export {
-  W,
-  H,
-  gameKit,
-  vn,
-  gameVar,
-  SHEET_COLUMNS,
-  screen,
-  box,
-  label,
-  readout,
-  shaderLayer,
-  set,
-  when,
-  go,
-  back,
-  close,
-  overlay,
-  onAll,
-  FOCUS_GLIDE,
-  menu,
-  slider,
-  toggleComponent,
-  toggle,
-  keybind,
-  rebindListener,
-  bar,
-  oneShot,
-  keys,
-  drift,
-  spin,
-  glow,
-  focusColumn,
-  focusRow,
-  poly,
-  blurFx,
-  arcPoints,
-  sector,
-  arc
-};