@popcraft/kit 0.53.6 → 0.53.8

package/dist/chunks/chunk-XBFRJMNI.js

@@ -0,0 +1,202 @@
+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 {
+  ITALIC,
+  cast,
+  dashed,
+  departures,
+  fitBorder,
+  fitPaper,
+  mapBorder,
+  mapPaper,
+  metroBrand,
+  nameplate,
+  routed,
+  suburbs,
+  train,
+  travel
+} from "./chunk-7QJJCKK7.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  appear,
+  drawOn
+} from "./chunk-7V4SQL3C.js";
+import {
+  board
+} from "./chunk-LWSZATOL.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/transit-map-milestone-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8200;
+var OUT = 7200;
+var counts = [{ layer: "Figure", at: 200, duration: 3400, counter: { from: 9e3, to: 1e4, separator: "," } }];
+var cues = [
+  { layer: "Strip", preset: "fade-in", at: 0, params: { duration: 400 } },
+  // The map and the figure come up under their own animation, so the outro can take them away whole.
+  { layer: "Figure", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Board", preset: "fade-in", at: 0, params: { duration: 200 } },
+  { layer: "Figure", preset: "pulse", at: 3650, params: { duration: 600, amount: 0.035 } },
+  { layer: "Next stop", preset: "pop-in", at: 4300, params: { duration: 340 } },
+  { layer: "Thanks", preset: "rise-in", at: 600, params: { duration: 500 } },
+  outro(["Strip", "Figure", "Board", "Thanks"], OUT)
+];
+var U = 93;
+var CHART = { width: 10 * U, height: Math.round(4.6 * U) };
+var ROUTE = [[0.5, 4], [2.9, 4], [4, 2.9], [5.7, 2.9], [6.8, 1.8], [8.2, 1.8], [9.1, 0.9]];
+var STOPS = [
+  { at: [0.5, 4], name: "Opened", when: "Jan" },
+  { at: [2.35, 4], name: "100", when: "Mar" },
+  { at: [4.85, 2.9], name: "1,000", when: "Jun" },
+  { at: [7.5, 1.8], name: "5,000", when: "Aug" }
+];
+var transit_map_milestone_post_default = defineTemplate({
+  id: "motion-transit-map-milestone-post",
+  meta: {
+    name: "Transit map milestone post (animated)",
+    description: "A milestone announced as a metro service update: the figure counts up to 10,000 on a folded pocket map while the Growth line draws itself up the sheet like the chart it is, a stop lands at each milestone passed, a train rides to the interchange at the top, and the line carries on in dashes to the next stop, over a departures board that thanks the passengers. Eight seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "transit map", "metro", "subway", "underground", "tube map", "stations", "departures board", "milestone", "customers", "counter", "chart", "growth", "build in public", "saas", "post"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Transit map milestone post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    metroBrand(k, { milestone: "teams on board." });
+    k.textStyle("Plate 22", { size: 22, fontWeight: 800, letterSpacing: 0.4, lineHeight: 26 });
+    k.textStyle("Strip 20", { size: 20, fontWeight: 600, lineHeight: 26 });
+    k.textStyle("Figure 250", { size: 250, fontWeight: 900, letterSpacing: -13, lineHeight: 236, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 200", { size: 200, fontWeight: 900, letterSpacing: -10, lineHeight: 190, fontFeatures: { tnum: 1 } });
+    k.textStyle("Sub 60", { size: 60, fontWeight: 800, letterSpacing: -2.2, lineHeight: 64 });
+    k.textStyle("Stop 26", { size: 26, fontWeight: 800, letterSpacing: -0.4, lineHeight: 30 });
+    k.textStyle("When 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1, lineHeight: 22, textCase: "UPPER" });
+    k.textStyle("River 20", { ...ITALIC, size: 20, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Board 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 30 });
+    k.textStyle("Bullet 18", { size: 18, fontWeight: 800, lineHeight: 22 });
+    k.textStyle("Ref 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Chip 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 26 });
+    pill(k, "Chip", { fill: "onCard", ink: "card", style: "Chip 20", label: "{{brand.site}}", pad: [5, 12], radius: 4 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Milestone");
+    k.flowSheet(sheet, 20, 76, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    mapPaper(k, sheet, 1080, 1080, { folds: [2, 2], grain: 0.03 });
+    mapBorder(k, sheet, 1080, 1080, { style: "Ref 16" });
+    const top = k.stack(sheet, { gap: 14, name: "Top" });
+    const strip = k.stack(top, { direction: "HORIZONTAL", gap: 16, align: "CENTER", justify: "SPACE_BETWEEN", name: "Strip" });
+    nameplate(k, strip, "{{brand.name}} \xB7 Service update", { style: "Plate 22", pad: [7, 14], textName: "Plate name" });
+    k.text(strip, "2 October 2026", { style: "Strip 20", color: "onPaper", autoWidth: true, name: "Strip date" });
+    k.stack(top, { height: 6, name: "Gap" });
+    k.text(top, "10,000", { style: "Figure 250", color: "text", name: "Figure" });
+    k.text(top, "{{brand.milestone}}", { style: "Sub 60", color: "text", name: "Sub" });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "CENTER", name: "Chart row" });
+    const bd = board(k, row, CHART.width, CHART.height, 1, "Board");
+    const full = { absolute: { x: 0, y: 0 } };
+    const px = ROUTE.map(([x, y]) => [x * U, y * U]);
+    const w = 24;
+    k.vector(bd, CHART.width, CHART.height, [routed([[-6 * U, 2.2 * U], [2.2 * U, 2.2 * U], [4.6 * U, 4.6 * U], [16 * U, 4.6 * U]], U)], "blue", { name: "River", strokeWidth: Math.round(U * 0.6), opacity: 0.2, ...full });
+    k.text(bd, "River Churn", { style: "River 20", color: "onPaper", autoWidth: true, name: "River name", absolute: { x: 8, y: Math.round(2.2 * U - 12) } });
+    const [ex, ey] = px[px.length - 1];
+    const ext = dashed(k, bd, CHART.width, CHART.height, [ex + 34, ey - 34], [ex + 2.4 * U, ey - 2.4 * U], "red", { name: "Line planned", width: w, on: w * 0.5, off: w * 1.6, ...full });
+    const casing = k.vector(bd, CHART.width, CHART.height, [routed(px, U * 0.5)], "paper", { name: "Casing", strokeWidth: w + 12, ...full });
+    const line = k.vector(bd, CHART.width, CHART.height, [routed(px, U * 0.5)], "red", { name: "Growth line", strokeWidth: w, ...full });
+    const stops = STOPS.map((s, i) => {
+      const cx = s.at[0] * U, cy = s.at[1] * U, r = i === 0 ? 19 : 15;
+      const id = k.ellipse(bd, r * 2, "paper", { name: "Stop", stroke: { color: "text", width: 6 }, absolute: { x: cx - r, y: cy - r } });
+      const name = k.text(bd, s.name, { style: "Stop 26", color: "text", autoWidth: true, name: "Stop name", absolute: { x: 0, y: 0 } });
+      const when = k.text(bd, s.when, { style: "When 18", color: "onPaper", autoWidth: true, name: "Stop when", absolute: { x: 0, y: 0 } });
+      const left = i === 0 ? cx - r : cx - k.node(name).width / 2;
+      k.patch(name, { x: Math.round(left), y: Math.round(cy - 28 - 30) });
+      k.patch(when, { x: Math.round(i === 0 ? cx - r : cx - k.node(when).width / 2), y: Math.round(cy + 26) });
+      return { id, name, when };
+    });
+    const R = 30;
+    const hub = k.ellipse(bd, R * 2, "paper", { name: "Hub", stroke: { color: "text", width: 10 }, effects: [cast(k, 14, 0.25, 5)], absolute: { x: ex - R, y: ey - R } });
+    const tr = train(k, bd, px[0][0], px[0][1], 17);
+    nameplate(k, bd, "Next stop \xB7 25,000", { style: "Plate 22", pad: [8, 14], name: "Next stop", absolute: { x: Math.round(ex - 318), y: Math.round(ey - 104) } });
+    const bottom = k.stack(sheet, { gap: 18, name: "Bottom" });
+    const arrivals = departures(k, bottom, [
+      { line: 0, to: "5,000 teams", due: "August" },
+      { line: 0, to: "10,000 teams", due: "Arrived" },
+      { line: 0, to: "25,000 teams", due: "Next stop" }
+    ], { title: "Arrivals \xB7 Growth line", clock: "On time", head: "When 18", cell: "Board 22", bullet: "Bullet 18", size: 30, pad: 24, gap: 12, name: "Arrivals" });
+    k.patch(arrivals, { visible: false });
+    const thanks = k.stack(bottom, { direction: "HORIZONTAL", gap: 14, align: "CENTER", padding: { top: 18, right: 24, bottom: 18, left: 24 }, fill: "card", radius: 14, effects: [cast(k, 36, 0.42, 16)], name: "Thanks" });
+    k.ellipse(thanks, 14, "onCard", { name: "Lamp" });
+    k.text(thanks, "Thank you for travelling with {{brand.name}}.", { style: "Board 22", color: "onCard", name: "Thanks words" });
+    k.instance(thanks, "Chip", { Label: "{{brand.site}}" }, { name: "Thanks site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    const DRAW = { at: 250, over: 2400 };
+    for (const id of [casing, line]) {
+      appear(k, id, DRAW.at, 40);
+      drawOn(k, id, DRAW.at, DRAW.over);
+    }
+    const pop = (id, t, d = 280) => {
+      for (const axis of ["scaleX", "scaleY"]) k.animate(id, axis, [{ t, v: 0, ease: ease.back(2.2) }, { t: t + d, v: 1 }]);
+      appear(k, id, t, 60);
+    };
+    const reach = [0, 0.36, 0.5, 0.63];
+    stops.forEach((s, i) => {
+      const t = DRAW.at + Math.round(DRAW.over * reach[i]);
+      pop(s.id, t);
+      appear(k, s.name, t + 80, 240);
+      appear(k, s.when, t + 160, 240);
+    });
+    travel(k, tr, px, 1500, 2100);
+    pop(hub, 3500, 360);
+    appear(k, ext, 3700, 500);
+    const refit = (kit, id) => {
+      const f = kit.node(id);
+      fitPaper(kit, id, f.width, f.height, { folds: [2, 2] });
+      fitBorder(kit, id, f.width, f.height);
+      for (const n of kit.named(id, "Arrivals")) kit.patch(n, { visible: true });
+    };
+    k.variants(sheet, postVariants({ portrait: 76 }, {
+      portrait: refit,
+      vertical: (kit, id) => {
+        for (const n of kit.named(id, "Figure")) kit.restyle(n, "Figure 200");
+        for (const n of kit.named(id, "Thanks site")) kit.patch(n, { visible: false });
+        refit(kit, id);
+        fitBorder(kit, id, kit.node(id).width, kit.node(id).height, { refs: false });
+        suburbs(kit, id, 1080, 470, 80, { x: 0, y: 1450 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  transit_map_milestone_post_default
+};

package/dist/chunks/chunk-XDW4UK2M.js

@@ -0,0 +1,99 @@
+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 {
+  onColor,
+  scrim,
+  withSong
+} from "./chunk-OA3ZP7MP.js";
+import {
+  bassKick,
+  visualizer,
+  waveform
+} from "./chunk-IO6NGFEM.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/music/lofi-loop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NIGHT = "#1B1426";
+var PLUM = "#4A2B57";
+var AMBER = "#F2A65A";
+var CREAM = "#F6E7D2";
+var VINYL = "#120E18";
+var CUES = [
+  { layer: "Now playing", preset: "fade-in", at: 200, params: { duration: 500 } },
+  { layer: "Song", preset: "rise-in", at: 400, params: { duration: 700, distance: 40 } },
+  { layer: "Artist", preset: "rise-in", at: 650, params: { duration: 700, distance: 30 } },
+  { layer: "Details", preset: "fade-in", at: 1100, params: { duration: 600 } }
+];
+var lofi_loop_default = defineTemplate({
+  id: "motion-music-lofi-loop",
+  meta: {
+    name: "Lo-fi loop visualizer",
+    description: "A 16:9 now-playing loop for a lo-fi track: a spinning record with your cover art that thumps with the kick, the song and artist, a line of dots riding the loudness, over liquid ink stirred by the bass \u2014 every part follows the audio you drop in",
+    category: "animation",
+    tags: ["animation", "music", "music video", "lo-fi", "visualizer", "audio reactive", "waveform", "record", "youtube", "loop"],
+    platforms: ["youtube"],
+    formats: ["video"],
+    useCases: ["launch", "livestream"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Lo-fi loop visualizer", preset("video-1080p"));
+    k.brand(
+      { night: NIGHT, plum: PLUM, accent: AMBER, text: CREAM, vinyl: VINYL, onNight: onColor(NIGHT, [CREAM, "#FFFFFF"]), onAccent: onColor(AMBER, [NIGHT, VINYL]), muted: onColor(NIGHT, ["#BFA8C9", CREAM]) },
+      { song: "Paper Lanterns", artist: "Mira Vale", details: "Side A \xB7 80 BPM \xB7 lo-fi beats" }
+    );
+    k.textStyle("Tag 26", { size: 26, fontWeight: 700, lineHeight: 32, letterSpacing: 6, textCase: "UPPER" });
+    k.textStyle("Song 132", { size: 132, fontFamily: "Source Serif 4", fontWeight: 700, lineHeight: 140, letterSpacing: -3 });
+    k.textStyle("Artist 56", { size: 56, fontWeight: 500, lineHeight: 64 });
+    k.textStyle("Details 28", { size: 28, fontWeight: 500, lineHeight: 36, letterSpacing: 1 });
+    pill(k, "Tag", { fill: "accent", ink: "onAccent", style: "Tag 26", label: "Now playing", pad: [10, 24] });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Lo-fi loop");
+    k.flowSheet(sheet, 0, { top: 0, right: 0, bottom: 0, left: 0 }, "night");
+    k.patch(sheet, { clipsContent: true });
+    withSong(k, sheet, "lofi", 1, 0);
+    visualizer(k, sheet, "liquid-ink", { a: "night", b: "plum", c: "accent" }, { name: "Liquid ink", knobs: { nz_scale: 1.6, fb_decay: 0.45, gain_b: 0.7 } });
+    const R = 300;
+    const record = k.stack(sheet, { width: 2 * R, height: 2 * R, name: "Record", absolute: { x: 190, y: 240 } });
+    k.ellipse(record, 2 * R, "vinyl", { name: "Vinyl", absolute: { x: 0, y: 0 } });
+    for (const [i, r] of [R - 30, R - 70, R - 110].entries()) k.ellipse(record, 2 * r, [], { stroke: { color: "plum", width: 3 - i * 0.5, align: "CENTER" }, name: "Groove", absolute: { x: R - r, y: R - r } });
+    k.photo(record, 250, 250, { radius: 125, ground: "accent", name: "Cover art", absolute: { x: R - 125, y: R - 125 } });
+    k.ellipse(record, 18, "night", { name: "Spindle", absolute: { x: R - 9, y: R - 9 } });
+    k.behave(record, "rotation", [{ kind: "spin", rate: 36 }]);
+    bassKick(k, record, 0.035, 160);
+    const col = scrim(k, sheet, "night", { width: 860, gap: 18, align: "MIN", padding: { top: 40, right: 40, bottom: 40, left: 40 }, name: "Now playing column", absolute: { x: 920, y: 200 } });
+    k.instance(col, "Tag", { Label: "Now playing" }, { name: "Now playing" });
+    k.text(col, "{{brand.song}}", { style: "Song 132", color: "onNight", width: 780, name: "Song" });
+    k.text(col, "{{brand.artist}}", { style: "Artist 56", color: "onNight", width: 780, name: "Artist" });
+    const wave = k.stack(col, { width: 780, height: 170, name: "Waveform row" });
+    waveform(k, wave, { style: "line", width: 780, height: 150, color: "accent", count: 64, history: 2600, at: { x: 0, y: 10 } });
+    k.text(col, "{{brand.details}}", { style: "Details 28", color: "muted", width: 780, name: "Details" });
+    k.cues(sheet, CUES);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  CUES,
+  lofi_loop_default
+};

package/dist/chunks/chunk-XHIGJ55Y.js

@@ -0,0 +1,304 @@
+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-PN2PTI35.js";
+import {
+  presetPaint,
+  shaderPreset
+} from "./chunk-Y7TG6HTD.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.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
+};