@popcraft/kit 0.26.0 → 0.27.0

package/dist/chunks/chunk-26XYYBAW.js

@@ -0,0 +1,220 @@
+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-XVM6A5DD.js";
+import {
+  background,
+  refill
+} from "./chunk-CHL5BU5W.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  sizeOf
+} from "./chunk-QLV6445V.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-GTCLGM63.js";
+import {
+  Kit,
+  preset
+} from "./chunk-6QHAQLJ4.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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-2BALGH5K.js

@@ -0,0 +1,422 @@
+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 {
+  hz
+} from "./chunk-RXG7T7TH.js";
+import {
+  RADIAL,
+  noise
+} from "./chunk-HVK5T4I5.js";
+import {
+  circle,
+  corners,
+  r3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  ease
+} from "./chunk-QFFXZQH5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/solarpunk-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function solarpunkBrand(k, fields = {}) {
+  k.brand(
+    { paper: "#E4F1E6", text: "#12301F", onPaper: "#365843", primary: "#1D6A44", onPrimary: "#F4FAE8", accent: "#D8642F", onAccent: "#2A1206", card: "#FBFBEF", onCard: "#12301F" },
+    { name: "Trellis", site: "trellis.example", ...fields }
+  );
+  k.palette({
+    sun: "#F6C445",
+    sunDeep: "#EE9F2B",
+    sky: "#8FCFDD",
+    day: "#E4F1E6",
+    dawn: "#FFF4CF",
+    cloud: "#FFFFFF",
+    haze: "#A6CDB8",
+    wall: "#F7EAD0",
+    wallShade: "#E0CBA2",
+    roof: "#CE6A3C",
+    roofShade: "#A64D28",
+    glass: "#8CCBD4",
+    glassDark: "#2D6C79",
+    panel: "#21496A",
+    panelLine: "#8CC2DE",
+    tower: "#FDFDF4",
+    towerShade: "#D5DFD0",
+    leaf: "#3F9F63",
+    leafLight: "#96D078",
+    leafDark: "#1B5A3C",
+    stem: "#1B5A3C",
+    bed: "#103B2B",
+    blossom: "#F08E78",
+    cream: "#F8F4DD"
+  });
+}
+var grain = (u, seed, amount = 0.07) => noise({ amount, size: Math.max(1, Math.round(2 * u)), seed });
+var shade = (u, a = 0.22, dy = 10, blur = 30) => ({ type: "DROP_SHADOW", color: { r: 0.04, g: 0.2, b: 0.13, a }, offset: { x: 0, y: r3(dy * u) }, blur: r3(blur * u), spread: 0, visible: true });
+function arched(x, y, w, h, steps = 10) {
+  const r = w / 2;
+  const pts = [{ x, y: y + h }, { x, y: y + r }];
+  for (let i = 1; i < steps; i++) {
+    const a = Math.PI + Math.PI * i / steps;
+    pts.push({ x: x + r + r * Math.cos(a), y: y + r + r * Math.sin(a) });
+  }
+  pts.push({ x: x + w, y: y + r }, { x: x + w, y: y + h });
+  return pts;
+}
+function draw(k, parent, name, shapes, color, o = {}) {
+  const xs = shapes.flat().map((p) => p.x), ys = shapes.flat().map((p) => p.y);
+  const x0 = Math.min(...xs), y0 = Math.min(...ys);
+  const paths = shapes.map((s) => ({ closed: o.stroke === void 0, points: s.map((p) => ({ x: r3(p.x - x0), y: r3(p.y - y0) })) }));
+  return k.vector(parent, r3(Math.max(1, Math.max(...xs) - x0)), r3(Math.max(1, Math.max(...ys) - y0)), paths, color, {
+    name,
+    absolute: { x: r3(x0), y: r3(y0) },
+    ...o.stroke !== void 0 ? { strokeWidth: r3(o.stroke) } : {},
+    ...o.effects ? { effects: o.effects } : {},
+    ...o.opacity !== void 0 ? { opacity: o.opacity } : {}
+  });
+}
+function sun(k, parent, o) {
+  const m = o.size, w = r3(m * 2.4), c = w / 2;
+  const id = k.stack(parent, { width: w, height: w, name: "Sun", absolute: { x: r3(o.x - c), y: r3(o.y - c) } });
+  k.ellipse(id, w, [k.gradient({ from: "sun", to: "sun", kind: "RADIAL", fromOpacity: 0.22, toOpacity: 0, handles: RADIAL })], { name: "Sun glow", absolute: { x: 0, y: 0 } });
+  for (const [scale, tint] of [[1.95, 0.1], [1.5, 0.16]]) k.ellipse(id, r3(m * scale), k.tint("sun", tint), { name: "Sun ring", absolute: { x: r3(c - m * scale / 2), y: r3(c - m * scale / 2) } });
+  const rays = [];
+  for (let i = 0; i < 24; i++) {
+    const a = Math.PI * 2 * i / 24, r0 = m * 0.56, r1 = m * (i % 2 ? 0.7 : 0.82), half = 0.035;
+    rays.push({ closed: true, points: [[r0, a - half], [r1, a], [r0, a + half]].map(([r, t]) => ({ x: r3(m * 0.82 + r * Math.cos(t)), y: r3(m * 0.82 + r * Math.sin(t)) })) });
+  }
+  const wheel = k.vector(id, r3(m * 1.64), r3(m * 1.64), rays, k.tint("sun", 0.5), { name: "Sun rays", absolute: { x: r3(c - m * 0.82), y: r3(c - m * 0.82) } });
+  if (!o.still) k.behave(wheel, "rotation", [{ kind: "spin", rate: 30 * 1e3 / o.loopMs }]);
+  k.ellipse(id, m, [...k.paint("sun"), k.gradient({ from: "sunDeep", to: "sunDeep", angle: 90, fromOpacity: 0, toOpacity: 0.75 })], { name: "Sun disc", absolute: { x: r3(c - m / 2), y: r3(c - m / 2) } });
+  k.ellipse(id, r3(m * 0.8), k.tint("cloud", 0.16), { name: "Sun heart", absolute: { x: r3(c - m * 0.4), y: r3(c - m * 0.4) } });
+  return id;
+}
+function block(k, parent, base, u, b, seed) {
+  const rand = rng(seed * 131 + 7), { w, h } = b;
+  const extra = b.kind === "dome" ? Math.min(w * 0.46, 150 * u) + 22 * u : b.kind === "terrace" ? 190 * u : b.kind === "solar" ? 92 * u : 120 * u;
+  const id = k.frame(parent, { x: r3(b.x), y: r3(base - h - extra), width: r3(w), height: r3(h + extra) }, { name: "Block" });
+  const wy = extra;
+  const walls = [corners(0, wy, w, h)], shades = [corners(w * 0.84, wy, w * 0.16, h)];
+  const glass = [], lit = [], sills = [], pots = [], greens = [], darks = [], lights = [];
+  const tiles = [corners(-7 * u, wy - 7 * u, w + 14 * u, 13 * u)], tileShade = [corners(-3 * u, wy + 6 * u, w + 6 * u, 5 * u)];
+  let ux = 0, uw = 0, uy = wy;
+  if (b.kind === "terrace") {
+    ux = w * 0.2;
+    uw = w * 0.6;
+    uy = wy - 118 * u;
+    walls.push(corners(ux, uy, uw, 118 * u));
+    shades.push(corners(ux + uw * 0.84, uy, uw * 0.16, 118 * u));
+    tiles.push(corners(ux - 6 * u, uy - 6 * u, uw + 12 * u, 11 * u));
+    const ww2 = 30 * u, n = Math.max(1, Math.floor(uw / (62 * u)));
+    for (let i = 0; i < n; i++) glass.push(arched(ux + uw * (i + 0.5) / n - ww2 / 2, uy + 30 * u, ww2, 56 * u));
+  }
+  const ww = 34 * u, wh = 62 * u, gap = 28 * u, margin = 24 * u;
+  const cols = Math.max(1, Math.floor((w - 2 * margin + gap) / (ww + gap)));
+  const rows = Math.max(1, Math.floor((h - 150 * u) / (104 * u)) + 1);
+  const left = (w - (cols * ww + (cols - 1) * gap)) / 2;
+  for (let row = 0; row < rows; row++) for (let col = 0; col < cols; col++) {
+    const x = left + col * (ww + gap), y = wy + 36 * u + row * 104 * u;
+    if (y + wh > wy + h - 20 * u) continue;
+    (rand() < 0.24 ? lit : glass).push(arched(x, y, ww, wh));
+    sills.push(corners(x - 5 * u, y + wh, ww + 10 * u, 5 * u));
+    if (rand() < 0.4) {
+      pots.push(corners(x - 3 * u, y + wh + 5 * u, ww + 6 * u, 9 * u));
+      for (let j = 0; j < 3; j++) (j === 1 ? lights : greens).push(circle(x + ww * (j + 0.5) / 3, y + wh - 2 * u, (8 + 4 * rand()) * u, 10));
+    }
+  }
+  const ribs = [], panels = [], lines = [], trail = [], stalks = [], glints = [];
+  const bushes = (x0, x1, y, big = 1) => {
+    const n = Math.max(2, Math.round((x1 - x0) / (40 * u)));
+    for (let j = 0; j < n; j++) {
+      const r = (20 + 20 * rand()) * u * big, cx = x0 + (x1 - x0) * (j + 0.5) / n + (rand() - 0.5) * 14 * u;
+      [darks, greens, lights][j % 3].push(circle(cx, y - r * 0.55, r));
+      if (j % 3 === 0) greens.push(circle(cx + r * 0.5, y - r * 0.4, r * 0.62));
+    }
+  };
+  if (b.kind === "garden") {
+    bushes(6 * u, w - 6 * u, wy - 4 * u);
+    const tx = w * (0.28 + 0.4 * rand());
+    stalks.push([{ x: tx, y: wy - 6 * u }, { x: tx + 3 * u, y: wy - 76 * u }]);
+    darks.push(circle(tx - 16 * u, wy - 82 * u, 28 * u));
+    greens.push(circle(tx + 14 * u, wy - 90 * u, 30 * u));
+    lights.push(circle(tx + 2 * u, wy - 106 * u, 20 * u));
+    for (const f of [0.08, 0.5, 0.93]) {
+      const len = (50 + 110 * rand()) * u, x = w * f, pts = [];
+      for (let i = 0; i <= 12; i++) pts.push({ x: x + 6 * u * Math.sin(i / 12 * Math.PI * 2.4), y: wy + 4 * u + len * i / 12 });
+      trail.push(pts);
+      for (let i = 3; i <= 12; i += 3) lights.push(circle(pts[i].x + (i % 2 ? 7 : -7) * u, pts[i].y, 6 * u, 8));
+    }
+  } else if (b.kind === "solar") {
+    const n = Math.max(1, Math.round(w / (120 * u))), pw = (w - 24 * u) / n - 10 * u, ph = 64 * u, lean = 22 * u;
+    for (let i = 0; i < n; i++) {
+      const x0 = 12 * u + i * (pw + 10 * u), y1 = wy - 12 * u, y0 = y1 - ph;
+      stalks.push([{ x: x0 + pw * 0.25, y: wy - 6 * u }, { x: x0 + pw * 0.25 + lean * 0.5, y: y1 - ph * 0.5 }], [{ x: x0 + pw * 0.75, y: wy - 6 * u }, { x: x0 + pw * 0.75 + lean * 0.5, y: y1 - ph * 0.5 }]);
+      panels.push([{ x: x0, y: y1 }, { x: x0 + pw, y: y1 }, { x: x0 + pw + lean, y: y0 }, { x: x0 + lean, y: y0 }]);
+      for (const f of [0.25, 0.5, 0.75]) lines.push([{ x: x0 + pw * f, y: y1 }, { x: x0 + pw * f + lean, y: y0 }]);
+      lines.push([{ x: x0 + lean * 0.5, y: y1 - ph * 0.5 }, { x: x0 + pw + lean * 0.5, y: y1 - ph * 0.5 }]);
+      glints.push([{ x: x0 + pw * 0.56, y: y1 }, { x: x0 + pw * 0.7, y: y1 }, { x: x0 + pw * 0.7 + lean, y: y0 }, { x: x0 + pw * 0.56 + lean, y: y0 }]);
+    }
+    bushes(w * 0.02, w * 0.2, wy - 2 * u, 0.6);
+  } else if (b.kind === "dome") {
+    const rx = w * 0.4, ry = extra - 22 * u, cx = w / 2;
+    const dome = [];
+    for (let i = 0; i <= 24; i++) {
+      const a = Math.PI + Math.PI * i / 24;
+      dome.push({ x: cx + rx * Math.cos(a), y: wy - 6 * u + ry * Math.sin(a) });
+    }
+    draw(k, id, "Dome", [dome], "glass", { opacity: 0.92 });
+    for (const [f, r] of [[-0.5, 0.3], [-0.12, 0.42], [0.3, 0.34], [0.6, 0.24]]) (r > 0.33 ? greens : darks).push(circle(cx + rx * f, wy - 8 * u - ry * r * 0.7, ry * r));
+    for (const f of [-0.66, -0.33, 0, 0.33, 0.66]) {
+      const rib = [];
+      for (let i = 0; i <= 10; i++) {
+        const a = Math.PI / 2 * (i / 10);
+        rib.push({ x: cx + rx * f * Math.cos(a), y: wy - 6 * u - ry * Math.sin(a) });
+      }
+      ribs.push(rib);
+    }
+    ribs.push(dome);
+    const half = rx * Math.cos(Math.asin(0.55));
+    ribs.push([{ x: cx - half, y: wy - 6 * u - ry * 0.55 }, { x: cx + half, y: wy - 6 * u - ry * 0.55 }]);
+    lit.push(circle(cx, wy - 6 * u - ry - 8 * u, 7 * u, 10));
+  } else {
+    bushes(0, ux - 4 * u, wy - 4 * u, 0.8);
+    bushes(ux + uw + 4 * u, w, wy - 4 * u, 0.8);
+    bushes(ux + 8 * u, ux + uw - 8 * u, uy - 4 * u, 0.7);
+  }
+  draw(k, id, "Wall", walls, "wall", { effects: [shade(u), grain(u, seed + 2)] });
+  draw(k, id, "Wall shade", shades, "wallShade", { opacity: 0.85 });
+  if (darks.length) draw(k, id, "Shrubs", darks, "leafDark");
+  if (stalks.length) draw(k, id, "Stalks", stalks, b.kind === "solar" ? "wallShade" : "stem", { stroke: 5 * u });
+  draw(k, id, "Roof edge", tiles, "roof");
+  draw(k, id, "Roof shadow", tileShade, "roofShade", { opacity: 0.5 });
+  if (glass.length) draw(k, id, "Windows", glass, "glass");
+  if (lit.length) draw(k, id, "Lit windows", lit, "sun");
+  if (sills.length) draw(k, id, "Sills", sills, "wallShade");
+  const dw = Math.min(64 * u, w * 0.34), dh = 92 * u, dx = w / 2 - dw / 2, door = arched(dx, wy + h - dh, dw, dh, 12);
+  draw(k, id, "Door", [door], "glassDark");
+  draw(k, id, "Door frame", [door], "roof", { stroke: 5 * u });
+  if (pots.length) draw(k, id, "Window boxes", pots, "roof");
+  if (panels.length) {
+    draw(k, id, "Panel", panels, "panel", { effects: [shade(u, 0.25, 4, 10)] });
+    draw(k, id, "Panel glint", glints, "panelLine", { opacity: 0.3 });
+    draw(k, id, "Panel lines", lines, "panelLine", { stroke: 2 * u });
+  }
+  if (trail.length) draw(k, id, "Trailing stems", trail, "leaf", { stroke: 4 * u });
+  if (greens.length) draw(k, id, "Plants", greens, "leaf");
+  if (lights.length) draw(k, id, "New growth", lights, "leafLight");
+  if (ribs.length) draw(k, id, "Dome ribs", ribs, "tower", { stroke: 3 * u });
+  return id;
+}
+function turbine(k, parent, o) {
+  const R = o.h * 0.4, u = o.u;
+  const id = k.frame(parent, { x: r3(o.x - R), y: r3(o.base - o.h - R), width: r3(2 * R), height: r3(o.h + R) }, { name: "Turbine" });
+  const t0 = Math.max(2, o.h * 0.012), t1 = Math.max(4, o.h * 0.032);
+  draw(k, id, "Mast", [[{ x: R - t0, y: R }, { x: R + t0, y: R }, { x: R + t1, y: R + o.h }, { x: R - t1, y: R + o.h }]], "tower", { effects: [shade(u, 0.18, 4, 12)] });
+  draw(k, id, "Mast shade", [[{ x: R + t0 * 0.2, y: R }, { x: R + t0, y: R }, { x: R + t1, y: R + o.h }, { x: R + t1 * 0.2, y: R + o.h }]], "towerShade");
+  const blades = [];
+  for (let b = 0; b < 3; b++) {
+    const a = -Math.PI / 2 + Math.PI * 2 * b / 3 + o.i * 0.5;
+    const local = [[0.04, -0.035], [0.3, -0.085], [0.62, -0.05], [1, -8e-3], [1, 8e-3], [0.3, 0.03], [0.04, 0.035]];
+    blades.push({ closed: true, points: local.map(([x, y]) => ({ x: r3(R + R * (x * Math.cos(a) - y * Math.sin(a))), y: r3(R + R * (x * Math.sin(a) + y * Math.cos(a))) })) });
+  }
+  const wheel = k.vector(id, r3(2 * R), r3(2 * R), blades, "tower", { name: "Blades", absolute: { x: 0, y: 0 }, effects: [shade(u, 0.16, 3, 8)] });
+  if (!o.still) k.behave(wheel, "rotation", [{ kind: "spin", rate: o.turns * 120 * 1e3 / o.loopMs }]);
+  const hub = Math.max(5, R * 0.13);
+  k.ellipse(id, r3(hub), "roof", { name: "Hub", absolute: { x: r3(R - hub / 2), y: r3(R - hub / 2) } });
+  return id;
+}
+function vine(k, parent, v) {
+  const dir = v.curl ?? 1, lean = v.lean ?? 0;
+  const named = (word) => v.tone ? `Shade ${word.toLowerCase()}` : v.set ? `${v.set} ${word.toLowerCase()}` : word;
+  const at = (t) => ({ x: v.x + lean * t + v.sway * Math.sin(t * Math.PI * 2.3) * (0.35 + 0.65 * t), y: v.y - v.height * t });
+  const pts = [];
+  for (let i = 0; i <= 48; i++) pts.push(at(i / 48));
+  const end = pts[pts.length - 1], r0 = Math.max(v.height * 0.09, v.leaf * 0.7), c = { x: end.x + dir * r0, y: end.y };
+  let tip = end;
+  for (let i = 1; i <= 30; i++) {
+    const a = Math.PI * 2.5 * i / 30, r = r0 * (1 - 0.72 * (i / 30));
+    tip = { x: c.x - dir * r * Math.cos(a), y: c.y - r * Math.sin(a) };
+    pts.push(tip);
+  }
+  const stem = draw(k, parent, named("Stem"), [pts], v.tone ?? (v.set ? "leaf" : "stem"), { stroke: v.weight });
+  if (!v.tone) k.patch(stem, { trim: { start: 0, end: 1, offset: 0 } });
+  const leaves = [];
+  for (let i = 0; i < v.leaves; i++) {
+    const t = 0.1 + 0.84 * i / Math.max(1, v.leaves - 1), b = at(t), side = i % 2 ? 1 : -1;
+    const L = v.leaf * (1 - 0.4 * t), W = L * 0.26, ang = -Math.PI / 2 + side * (0.95 - 0.25 * t);
+    const shape = [];
+    const local = (s2, hw) => {
+      const x = s2 * L, y = hw + side * 0.14 * L * s2 * s2;
+      return { x: b.x + x * Math.cos(ang) - y * Math.sin(ang), y: b.y + x * Math.sin(ang) + y * Math.cos(ang) };
+    };
+    for (let j = 0; j <= 10; j++) shape.push(local(j / 10, -W * Math.pow(Math.sin(Math.PI * j / 10), 0.75) * (1 - 0.3 * (j / 10))));
+    for (let j = 9; j >= 1; j--) shape.push(local(j / 10, W * Math.pow(Math.sin(Math.PI * j / 10), 0.75) * (1 - 0.3 * (j / 10))));
+    const id = draw(k, parent, named("Leaf"), [shape], v.tone ?? (i % 3 === 1 ? "leafLight" : "leaf"));
+    const n = k.node(id);
+    k.patch(id, { anchorX: r3((b.x - n.x) / n.width), anchorY: r3((b.y - n.y) / n.height) });
+    leaves.push(id);
+  }
+  if (!v.bloom) return { stem, leaves };
+  const s = Math.max(10, v.leaf * 0.5), bloom = k.stack(parent, { width: r3(s * 2), height: r3(s * 2), name: named("Bloom"), absolute: { x: r3(tip.x - s), y: r3(tip.y - s) } });
+  const petals = [];
+  for (let i = 0; i < 6; i++) {
+    const a = Math.PI * 2 * i / 6;
+    petals.push({ closed: true, points: circle(s + s * 0.55 * Math.cos(a), s + s * 0.55 * Math.sin(a), s * 0.42, 12).map((p) => ({ x: r3(p.x), y: r3(p.y) })) });
+  }
+  k.vector(bloom, r3(s * 2), r3(s * 2), petals, "blossom", { name: "Petals", absolute: { x: 0, y: 0 } });
+  k.ellipse(bloom, r3(s * 0.62), "sun", { name: "Bloom heart", absolute: { x: r3(s * 0.69), y: r3(s * 0.69) } });
+  return { stem, leaves, bloom };
+}
+function growStems(k, root, at, duration, gap = 0, back, name = "Stem") {
+  k.named(root, name).forEach((id, i) => k.animate(id, "trim.end", [
+    { t: at + i * gap, v: 0, ease: ease.inOut("cubic") },
+    { t: at + i * gap + duration, v: 1, ...back ? { ease: ease.hold } : {} },
+    ...back ? [{ t: back.at, v: 1, ease: ease.inOut("cubic") }, { t: back.at + back.duration, v: 0 }] : []
+  ]));
+}
+function ridge(t, top, amp, freq, phase, grass) {
+  const u = t.u, rand = rng(Math.round(top) + 17), step = 12 * u, foot = t.h + 4 + (t.deep ?? 0), pts = [{ x: 0, y: foot }];
+  for (let x = 0, i = 0; x <= t.w + step; x += step, i++) {
+    const a = x / t.w * Math.PI * 2 * freq + phase;
+    pts.push({ x: Math.min(x, t.w), y: top + amp * u * (0.65 * Math.sin(a) + 0.35 * Math.sin(a * 2.3 + phase)) - (i % 2 ? grass * u * (0.3 + 0.7 * rand()) : 0) });
+  }
+  pts.push({ x: t.w, y: foot });
+  return pts;
+}
+function town(k, parent, t, at = { x: 0, y: 0 }) {
+  const u = t.u, rand = rng(t.seed ?? 5);
+  const id = k.frame(parent, { ...at, width: t.w, height: t.h }, { name: "Town" });
+  k.rect(id, t.w, r3(t.base + 600 * u), [k.gradient({ from: "sky", to: "sky", angle: 90, fromOpacity: 0.3, toOpacity: 0 })], { name: "Sky wash", absolute: { x: 0, y: r3(-600 * u) } });
+  const reachOf = t.dawn ?? 0;
+  if (reachOf > 0) k.ellipse(id, r3(reachOf * 2), [k.gradient({ from: "dawn", to: "dawn", kind: "RADIAL", fromOpacity: 0.85, toOpacity: 0, handles: RADIAL })], { name: "Daybreak", absolute: { x: r3(t.sun.x - reachOf), y: r3(t.base - reachOf) } });
+  sun(k, id, { ...t.sun, loopMs: t.loopMs, still: t.still });
+  (t.clouds ?? []).forEach((c, i) => {
+    const strip = r3(20 * u);
+    const cloud = k.stack(id, { width: r3(c.w), height: strip * 3, name: "Cloud", absolute: { x: r3(c.x - c.w / 2), y: r3(c.y - strip * 1.5) } });
+    [[0.22, 0.46], [0, 1], [0.3, 0.6]].forEach(([from, len], row) => k.rect(cloud, r3(c.w * len), strip, k.tint("cloud", 0.9), { name: "Cloud strip", radius: 999, absolute: { x: r3(c.w * from), y: strip * row } }));
+    if (!t.still) k.behave(cloud, "translateX", [{ kind: "sine", amp: 22 * u, freq: hz(1, t.loopMs), phase: i / 3 }]);
+  });
+  const flock = (t.birds ?? []).map(({ x, y, size: s }) => [{ x: x - s, y: y - s * 0.3 }, { x: x - s * 0.4, y: y - s * 0.55 }, { x, y }, { x: x + s * 0.4, y: y - s * 0.55 }, { x: x + s, y: y - s * 0.3 }]);
+  if (flock.length) {
+    const birds = draw(k, id, "Birds", flock, t.birdInk ?? "stem", { stroke: 3 * u, opacity: 0.7 });
+    if (!t.still) k.behave(birds, "translateY", [{ kind: "sine", amp: 10 * u, freq: hz(2, t.loopMs) }]);
+  }
+  const reach = t.far ?? { from: -20 * u, to: t.w };
+  for (const [layer, tall, tint] of [["Farthest city", 1, 0.45], ["Far city", 0.66, 1]]) {
+    const far = [], tops = [];
+    for (let x = reach.from; x < reach.to; ) {
+      const w = (60 + 90 * rand()) * u, h = (220 + 380 * rand()) * u * tall, top = t.base - h, head = rand();
+      if (head < 0.35) {
+        const dome = [{ x, y: t.base }];
+        for (let i = 0; i <= 12; i++) {
+          const a = Math.PI + Math.PI * i / 12;
+          dome.push({ x: x + w / 2 + w / 2 * Math.cos(a), y: top + w / 2 * Math.sin(a) + w / 2 });
+        }
+        dome.push({ x: x + w, y: t.base });
+        far.push(dome);
+      } else if (head < 0.6) far.push([{ x, y: t.base }, { x, y: top + 30 * u }, { x: x + w * 0.2, y: top + 30 * u }, { x: x + w * 0.2, y: top }, { x: x + w * 0.8, y: top }, { x: x + w * 0.8, y: top + 30 * u }, { x: x + w, y: top + 30 * u }, { x: x + w, y: t.base }]);
+      else if (head < 0.8) far.push([{ x, y: t.base }, { x, y: top + w * 0.5 }, { x: x + w / 2, y: top - 10 * u }, { x: x + w, y: top + w * 0.5 }, { x: x + w, y: t.base }]);
+      else {
+        far.push(corners(x, top, w, h));
+        if (tint === 1) for (let j = 0; j < 3; j++) tops.push(circle(x + w * (j + 0.5) / 3, top - 2 * u, (10 + 8 * rand()) * u, 10));
+      }
+      x += w + (rand() < 0.3 ? 30 * u * rand() : -8 * u) + (tint === 1 ? 26 * u : 0);
+    }
+    draw(k, id, layer, far, tint === 1 ? "haze" : k.tint("haze", tint));
+    if (tops.length) draw(k, id, "Far gardens", tops, k.tint("leaf", 0.5));
+  }
+  k.rect(id, r3(Math.min(t.w, reach.to) - Math.max(0, reach.from)), r3(260 * u), [k.gradient({ from: "cloud", to: "cloud", angle: 90, fromOpacity: 0, toOpacity: 0.5 })], { name: "Haze", absolute: { x: r3(Math.max(0, reach.from)), y: r3(t.base - 260 * u) } });
+  (t.turbines ?? []).forEach((tb, i) => turbine(k, id, { x: tb.x, base: t.base, h: tb.h, u, loopMs: t.loopMs, turns: i % 2 ? 4 : 3, still: t.still, i }));
+  t.blocks.forEach((b, i) => {
+    block(k, id, t.base, u, b, (t.seed ?? 5) + i);
+    if (b.vine) vine(k, id, { x: b.x + b.w * (i % 2 ? 0.82 : 0.14), y: t.base + 6 * u, height: b.h * 0.86, sway: 15 * u, curl: i % 2 ? -1 : 1, leaves: Math.max(4, Math.round(b.h / (48 * u))), leaf: 36 * u, weight: 5 * u, bloom: true });
+  });
+  draw(k, id, "Meadow", [ridge(t, t.base - 4 * u, 9, 1.4, 0.8, 12)], "leaf", { effects: [shade(u, 0.3, -6, 22), grain(u, 11, 0.08)] });
+  const foot = t.bed ?? t.h;
+  const dots = { blossom: [], sun: [], cream: [] };
+  for (let i = 0; i < Math.round(t.w / (26 * u)); i++) {
+    const y = t.base + 16 * u + rand() * Math.max(10 * u, foot - t.base - 30 * u);
+    if (y < t.h) dots[["blossom", "sun", "cream"][i % 3]].push(circle(rand() * t.w, y, (3 + 4 * rand()) * u, 8));
+  }
+  for (const [role, shapes] of Object.entries(dots)) if (shapes.length) draw(k, id, "Flowers", shapes, role);
+  for (const v of t.vines ?? []) vine(k, id, v);
+  if (t.bed !== void 0) {
+    draw(k, id, "Hedge", [ridge(t, t.bed - 26 * u, 14, 2.1, 2.2, 20)], "leafDark", { effects: [shade(u, 0.3, -6, 22)] });
+    draw(k, id, "Bed", [ridge(t, t.bed, 10, 1.1, 4.1, 14)], "bed", { effects: [grain(u, 23, 0.06)] });
+    for (let i = 0; i < Math.round(t.w / (80 * u)); i++) {
+      const fly = k.ellipse(id, r3(Math.max(2, (4 + 5 * rand()) * u)), "sun", { name: "Firefly", opacity: r3(0.45 + 0.45 * rand()), absolute: { x: r3(rand() * t.w), y: r3(t.bed + 40 * u + rand() * Math.max(20 * u, t.h - t.bed - 60 * u)) } });
+      if (!t.still) k.behave(fly, "translateY", [{ kind: "sine", amp: 9 * u, freq: hz(2 + i % 3, t.loopMs), phase: r3(rand()) }]);
+    }
+    for (const v of t.ornament ?? []) vine(k, id, { ...v, tone: "leafDark" });
+    if (t.trellis) trellis(k, id, t, t.trellis);
+  }
+  ;
+  (t.fronds ?? []).forEach((f, i) => fronds(k, id, { ...f, u, loopMs: t.loopMs, still: t.still, i }));
+  return id;
+}
+function trellis(k, parent, t, o) {
+  const u = t.u, h = t.h + (t.deep ?? 0) - o.top, step = 120 * u;
+  const id = k.frame(parent, { x: 0, y: r3(o.top), width: t.w, height: r3(h) }, { name: "Trellis" });
+  const laths = [[{ x: 0, y: 6 * u }, { x: t.w, y: 6 * u }]];
+  for (let x = -h; x < t.w + h; x += step) laths.push([{ x, y: 6 * u }, { x: x + h, y: h }], [{ x: x + h, y: 6 * u }, { x, y: h }]);
+  draw(k, id, "Lattice", laths, "leafDark", { stroke: 6 * u, opacity: 0.7 });
+  for (const v of o.vines) vine(k, id, { ...v, y: v.y - o.top, set: "Front" });
+  return id;
+}
+function fronds(k, parent, o) {
+  const L = o.size, id = k.frame(parent, { x: r3(o.x - L), y: r3(o.y - L), width: r3(2 * L), height: r3(L) }, { name: "Fronds", effects: [shade(o.u, 0.35, -4, 26)] });
+  const fan = [[-1.25, 0.82, "leafDark"], [1.2, 0.86, "leafDark"], [-0.72, 0.96, "leaf"], [0.7, 1, "leaf"], [-0.2, 0.9, "leafLight"], [0.24, 0.72, "leaf"]];
+  const veins = [];
+  for (const [a0, len, role] of fan) {
+    const ang = -Math.PI / 2 + a0 * 0.62 + (o.lean ?? 0), l = L * len, W = l * 0.17;
+    const local = (s, hw) => {
+      const x = s * l, y = hw + 0.1 * l * s * s * Math.sign(a0);
+      return { x: L + x * Math.cos(ang) - y * Math.sin(ang), y: L + x * Math.sin(ang) + y * Math.cos(ang) };
+    };
+    const shape = [];
+    for (let j = 0; j <= 12; j++) shape.push(local(j / 12, -W * Math.pow(Math.sin(Math.PI * j / 12), 0.7)));
+    for (let j = 11; j >= 1; j--) shape.push(local(j / 12, W * Math.pow(Math.sin(Math.PI * j / 12), 0.7)));
+    draw(k, id, "Frond", [shape], role);
+    veins.push(Array.from({ length: 9 }, (_, j) => local(0.06 + 0.84 * j / 8, 0)));
+  }
+  draw(k, id, "Frond veins", veins, "bed", { stroke: Math.max(1.5, 3 * o.u), opacity: 0.35 });
+  k.patch(id, { anchorX: 0.5, anchorY: 1 });
+  if (!o.still) k.behave(id, "rotation", [{ kind: "sine", amp: 1.6, freq: hz(2, o.loopMs), phase: o.i / 3 }]);
+  return id;
+}
+function archOutline(w, h, inset = 0) {
+  const rx = w / 2 - inset, ry = Math.min(w * 0.56, h * 0.6) - inset, pts = [{ x: inset, y: h - inset }, { x: inset, y: inset + ry }];
+  for (let i = 1; i < 28; i++) {
+    const a = Math.PI + Math.PI * i / 28;
+    pts.push({ x: r3(w / 2 + rx * Math.cos(a)), y: r3(inset + ry + ry * Math.sin(a)) });
+  }
+  pts.push({ x: w - inset, y: inset + ry }, { x: w - inset, y: h - inset });
+  return pts;
+}
+function archPanel(k, parent, w, h, o = {}) {
+  const id = k.stack(parent, { width: w, height: h, name: o.name ?? "Visual", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.vector(id, w, h, [{ closed: true, points: archOutline(w, h) }], "paper", { name: "Arch mask", mask: true, absolute: { x: 0, y: 0 } });
+  k.vector(id, w, h, [{ closed: true, points: archOutline(w, h) }], "day", { name: "Arch sky", absolute: { x: 0, y: 0 } });
+  return id;
+}
+function archFrame(k, panel, w, h, weight) {
+  k.vector(panel, w, h, [{ closed: true, points: archOutline(w, h, weight / 2) }], "accent", { name: "Arch frame", strokeWidth: weight, absolute: { x: 0, y: 0 } });
+  k.vector(panel, w, h, [{ closed: true, points: archOutline(w, h, weight * 2.2) }], "cream", { name: "Arch inner line", strokeWidth: Math.max(1, weight * 0.35), opacity: 0.8, absolute: { x: 0, y: 0 } });
+}
+
+export {
+  solarpunkBrand,
+  sun,
+  vine,
+  growStems,
+  town,
+  archPanel,
+  archFrame
+};