@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-A2OAK4IM.js

@@ -0,0 +1,163 @@
+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 {
+  showcase,
+  showcaseStyles,
+  specimenRow
+} from "./chunk-EAB4ZF2Q.js";
+import {
+  defineLibrary
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/libraries/micro-interactions.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TOGGLE_ON = [{ layer: "Knob", preset: "pulse", at: 120, params: { amount: 0.15, duration: 420 } }];
+var CHECKED = [
+  { layer: "Check", preset: "pop-in", at: 0, params: { duration: 360 } },
+  { layer: "Box", preset: "pulse", at: 60, params: { amount: 0.12, duration: 420 } }
+];
+var TAB_W = 132;
+var TABS = ["First", "Second", "Third"];
+var shadow = (blur, y, a) => ({ type: "DROP_SHADOW", color: hex("#101828", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+var micro_interactions_default = defineLibrary({
+  id: "lib-micro-interactions",
+  version: 1,
+  meta: {
+    name: "Micro-interactions",
+    description: "Interactive components with animated states \u2014 a button that lifts on hover and gives on press, a gliding toggle, a checkbox that ticks, tabs with a sliding underline \u2014 with text and colour inputs",
+    tags: ["animation", "micro-interactions", "components", "ui kit", "button", "toggle", "checkbox", "tabs", "hover"],
+    created: "2026-09-29",
+    updated: "2026-09-29",
+    aliases: ["web-kit-micro-interactions"]
+  },
+  motion: { components: [{ component: "Toggle/On", cues: TOGGLE_ON }, { component: "Checkbox/Checked", cues: CHECKED }] },
+  build() {
+    const k = new Kit("Micro-interaction kit", preset("web-desktop"));
+    k.brand({ paper: "#F6F7FB", text: "#141A2E", onPaper: "#5A6275", primary: "#2352D8", onPrimary: "#FFFFFF", track: "#C9CFDC", card: "#FFFFFF", boxLine: "#8A93A8", shade: "#0B1020", line: "#DDE1EA" }, { name: "Tally" });
+    showcaseStyles(k);
+    k.textStyle("Button 16", { size: 16, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("Control 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Check 14", { size: 14, fontWeight: 800, lineHeight: 16, textAlign: "CENTER" });
+    k.textStyle("Tab 15", { size: 15, fontWeight: 500, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Tab selected 15", { size: 15, fontWeight: 700, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Panel title 22", { size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Panel body 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    const button = k.variantSet("Button", "State", ["Idle", "Hover", "Pressed"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      align: "CENTER",
+      padding: 8,
+      description: "A call to action: it lifts and its shadow blooms on hover, and gives a little when pressed. Label and Accent are inputs.",
+      props: { Label: "Save changes", Accent: { color: "primary" } }
+    }, (state, id) => {
+      const bg = k.stack(id, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, align: "CENTER", padding: { top: 12, right: 22, bottom: 12, left: 22 }, effects: [shadow(state === "Hover" ? 18 : 6, state === "Hover" ? 8 : 2, state === "Pressed" ? 0.06 : 0.14)], name: "Background" });
+      k.propText(bg, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
+      k.bindPath(bg, "fills[#0].color", "Accent");
+      if (state === "Pressed") k.rect(bg, 1, 1, "shade", { opacity: 0.16, name: "Shade", absolute: { x: 0, y: 0 } });
+    }, (state) => state === "Hover" ? { timeline: { duration: 420 } } : state === "Pressed" ? { timeline: { duration: 180 } } : {});
+    k.changeTo("Button/Idle", "ON_HOVER", "Button/Hover", 160);
+    k.changeTo("Button/Hover", "ON_PRESS", "Button/Pressed", 80);
+    const toggle = k.variantSet("Toggle", "State", ["Off", "On"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 12,
+      align: "CENTER",
+      padding: 4,
+      description: "An on/off switch: click it and the knob glides across as the track takes the brand colour. Label is an input.",
+      props: { Label: "Weekly summary email" }
+    }, (state, id) => {
+      const track = k.stack(id, { direction: "HORIZONTAL", width: 44, height: 24, radius: 12, padding: 3, align: "CENTER", justify: state === "On" ? "MAX" : "MIN", fill: state === "On" ? "primary" : "track", name: "Track" });
+      k.ellipse(track, 18, "card", { name: "Knob", effects: [shadow(3, 1, 0.2)] });
+      k.propText(id, "Label", { style: "Control 16", color: "text", autoWidth: true });
+    }, (state) => state === "On" ? { timeline: { duration: 600 } } : {});
+    k.changeTo("Toggle/Off", "ON_CLICK", "Toggle/On", 220, "EASE_IN_OUT");
+    k.changeTo("Toggle/On", "ON_CLICK", "Toggle/Off", 220, "EASE_IN_OUT");
+    const checkbox = k.variantSet("Checkbox", "State", ["Unchecked", "Checked"], {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 10,
+      align: "CENTER",
+      padding: 4,
+      description: "A checkbox: click it and the box fills as the tick pops in. Label is an input.",
+      props: { Label: "Send me product updates" }
+    }, (state, id) => {
+      const box = k.stack(id, { direction: "HORIZONTAL", width: 20, height: 20, radius: 5, align: "CENTER", justify: "CENTER", fill: state === "Checked" ? "primary" : "card", ...state === "Checked" ? {} : { stroke: { color: "boxLine", width: 1.5 } }, name: "Box" });
+      if (state === "Checked") k.text(box, "\u2714", { style: "Check 14", color: "onPrimary", autoWidth: true, name: "Check" });
+      k.propText(id, "Label", { style: "Control 16", color: "text", autoWidth: true });
+    }, (state) => state === "Checked" ? { timeline: { duration: 600 } } : {});
+    k.changeTo("Checkbox/Unchecked", "ON_CLICK", "Checkbox/Checked", 160);
+    k.changeTo("Checkbox/Checked", "ON_CLICK", "Checkbox/Unchecked", 160);
+    const tabs = k.variantSet("Tabs", "Selected", TABS, {
+      direction: "VERTICAL",
+      width: "HUG",
+      description: "Three tabs with a sliding underline: click a tab and the underline glides under it. The tab names are inputs.",
+      props: { First: "Overview", Second: "Activity", Third: "Settings" }
+    }, (state, id) => {
+      const bar = k.stack(id, { direction: "HORIZONTAL", width: "HUG", name: "Bar" });
+      TABS.forEach((t) => {
+        const cell = k.stack(bar, { direction: "HORIZONTAL", width: TAB_W, align: "CENTER", justify: "CENTER", padding: { top: 14, right: 8, bottom: 14, left: 8 }, name: `Tab ${t}` });
+        k.propText(cell, t, { style: t === state ? "Tab selected 15" : "Tab 15", color: t === state ? "text" : "onPaper", autoWidth: true, name: t });
+      });
+      k.rect(id, TAB_W * TABS.length, 1, "line", { name: "Rule" });
+      k.rect(id, TAB_W, 3, "primary", { radius: 2, name: "Indicator", absolute: { x: TABS.indexOf(state) * TAB_W, y: 45 } });
+    });
+    for (const state of TABS) for (const t of TABS) if (t !== state) {
+      const cell = k.named(tabs[state], `Tab ${t}`)[0];
+      k.changeTo(`Tabs/${state}`, "ON_CLICK", `Tabs/${t}`, 260, "EASE_IN_OUT", cell);
+    }
+    k.finish();
+    for (const bg of k.named(button.Pressed, "Background")) for (const s of k.named(bg, "Shade")) k.patch(s, { width: k.node(bg).width, height: k.node(bg).height, cornerRadius: 10 });
+    const hoverBg = k.named(button.Hover, "Background")[0], pressedBg = k.named(button.Pressed, "Background")[0];
+    k.animate(hoverBg, "translateY", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 220, v: -2 }]);
+    k.animate(hoverBg, "effects[#0].blur", [{ t: 0, v: 6, ease: ease.out("expo") }, { t: 420, v: 18 }]);
+    k.animate(pressedBg, "scaleX", [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
+    k.animate(pressedBg, "scaleY", [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
+    k.cues(toggle.On, TOGGLE_ON);
+    k.cues(checkbox.Checked, CHECKED);
+    const sheet = k.sheet;
+    showcase(k, sheet, { title: "Micro-interaction kit", intro: "Every state of every control, playing its own move. Present the file and hover or press the buttons, flip the toggles, tick the boxes and pick a tab. Drop the components from Assets into any screen; the labels and the button colour are inputs.", duration: 4e3 });
+    const buttons = specimenRow(k, sheet, "Button \u2014 idle, hover, pressed");
+    k.instance(buttons, "Button/Idle", { Label: "Save changes" }, { name: "Button" });
+    k.instance(buttons, "Button/Hover", { Label: "Save changes" }, { name: "Button hover", playback: { loop: "pingpong", start: 300 } });
+    k.instance(buttons, "Button/Pressed", { Label: "Save changes" }, { name: "Button pressed", playback: { loop: "pingpong", start: 600 } });
+    k.instance(buttons, "Button/Idle", { Label: "Invite a teammate", Accent: hex("#0F7B4E") }, { name: "Button" });
+    const toggles = specimenRow(k, sheet, "Toggle \u2014 off, on");
+    k.instance(toggles, "Toggle/Off", { Label: "Weekly summary email" }, { name: "Toggle" });
+    k.instance(toggles, "Toggle/On", { Label: "Friday timesheet reminder" }, { name: "Toggle on", playback: { start: 400 } });
+    const checks = specimenRow(k, sheet, "Checkbox \u2014 unchecked, checked");
+    k.instance(checks, "Checkbox/Unchecked", { Label: "Send me product updates" }, { name: "Checkbox" });
+    k.instance(checks, "Checkbox/Checked", { Label: "Round entries to 15 minutes" }, { name: "Checkbox checked", playback: { start: 700 } });
+    const tabRow = specimenRow(k, sheet, "Tabs", { gap: 48 });
+    k.instance(tabRow, "Tabs/First", { First: "Overview", Second: "Timesheets", Third: "Settings" }, { name: "Tabs" });
+    k.instance(tabRow, "Tabs/Third", { First: "Week", Second: "Month", Third: "Year" }, { name: "Tabs" });
+    const panel = k.stack(sheet, { width: 760, gap: 20, radius: 16, stroke: { color: "line", width: 1 }, padding: 32, name: "Settings panel" });
+    k.text(panel, "Notification settings", { style: "Panel title 22", color: "text", name: "Panel title" });
+    k.instance(panel, "Tabs/First", { First: "Email", Second: "Mobile", Third: "Slack" }, { name: "Panel tabs" });
+    k.text(panel, "Choose what Tally sends you about your team\u2019s hours. You can change this at any time.", { style: "Panel body 15", color: "onPaper", name: "Panel body" });
+    k.instance(panel, "Toggle/On", { Label: "Weekly summary every Monday at 9:00" }, { name: "Setting" });
+    k.instance(panel, "Toggle/Off", { Label: "A reminder when a timesheet is late" }, { name: "Setting" });
+    k.instance(panel, "Checkbox/Checked", { Label: "Include billable hours by client" }, { name: "Setting check" });
+    const actions = k.stack(panel, { direction: "HORIZONTAL", gap: 12, justify: "MAX", name: "Actions" });
+    k.instance(actions, "Button/Idle", { Label: "Save changes" }, { name: "Save" });
+    return k.finish();
+  }
+});
+
+export {
+  micro_interactions_default
+};

package/dist/chunks/chunk-A2VNBKB4.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-WV6ZTKE7.js";
+import {
+  RADIAL,
+  noise
+} from "./chunk-M6VTXO6F.js";
+import {
+  circle,
+  corners,
+  r3,
+  rng
+} from "./chunk-6RCDZU4R.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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
+};