@popcraft/kit 0.27.0 → 0.28.0

package/dist/chunks/chunk-L6NMZDUT.js

@@ -1,120 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  background,
-  refilled
-} from "./chunk-CHL5BU5W.js";
-import {
-  feedVariants,
-  logoBadge,
-  outro,
-  pill,
-  verticalPadding
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  Kit,
-  hex,
-  preset
-} from "./chunk-6QHAQLJ4.js";
-import {
-  ease
-} from "./chunk-QFFXZQH5.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/effects/halftone-story.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var HALFTONE_STORY = {
-  duration: 1e4,
-  /** The dots' ink and paper: the effect's own colours (an effect colour is not a paint and cannot bind). */
-  ink: "#E9A93A",
-  paper: "#F6EEDD",
-  dotSize: 22,
-  swell: 34,
-  /** 33⅓ rpm, in degrees a second. */
-  rpm: 200
-};
-var CONTENT = ["Logo badge", "Record", "Night name", "Detail", "Entry"];
-var cues = [
-  { layer: "Logo badge", preset: "pop-in", at: 200 },
-  { layer: "Record", preset: "scale-in", at: 400, params: { duration: 800 } },
-  { layer: "Night name", preset: "pop-in", at: 1100, params: { duration: 600 } },
-  { layer: "Detail", preset: "rise-in", at: 1600, stagger: { delay: 180 } },
-  { layer: "Entry", preset: "pop-in", at: 2400 },
-  { layer: "Entry", preset: "pulse", at: 5200 },
-  outro(CONTENT, 8700)
-];
-var halftone_story_default = defineTemplate({
-  id: "motion-halftone-story",
-  meta: {
-    name: "Halftone vinyl night story",
-    description: "A 10-second record-shop night story on a moving halftone ground \u2014 its dots swell and its tone centre drifts \u2014 with a spinning record, the night's name popping in and the details rising \u2014 9:16 with square and 4:5 cuts",
-    category: "animation",
-    tags: ["animation", "background", "halftone", "ben day", "pop art", "record", "vinyl", "music", "dj", "story", "event"],
-    platforms: ["instagram", "tiktok", "facebook"],
-    formats: ["story", "reel", "post", "portrait-post"],
-    useCases: ["event", "invitation"],
-    created: "2026-09-29",
-    updated: "2026-09-29"
-  },
-  motion: { cues, loop: true },
-  build() {
-    const H = HALFTONE_STORY;
-    const k = new Kit("Halftone vinyl night story", preset("ig-story"));
-    k.brand(
-      { paper: H.paper, headline: "#1C1410", body: "#2B211B", vinyl: "#1C1410", primary: "#D8432B", onPrimary: "#FFF6E8", card: "#1C1410", onCard: "#F6EEDD" },
-      { night: "Vinyl\nNight", shop: "Groove Records", handle: "@grooverecords" }
-    );
-    k.textStyle("Night 190", { size: 190, fontWeight: 900, letterSpacing: -8, lineHeight: 170, textAlign: "CENTER" });
-    k.textStyle("Night 132", { size: 132, fontWeight: 900, letterSpacing: -5, lineHeight: 120, textAlign: "CENTER" });
-    k.textStyle("Label 34", { size: 34, fontWeight: 900, letterSpacing: 1, lineHeight: 34, textAlign: "CENTER" });
-    k.textStyle("Detail 38", { size: 38, fontWeight: 700, lineHeight: 46, textAlign: "CENTER" });
-    k.textStyle("Entry 34", { size: 34, fontWeight: 800, lineHeight: 42 });
-    pill(k, "Entry", { fill: "card", ink: "onCard", style: "Entry 34", label: "Free entry \xB7 RSVP at grooverecords.shop", pad: [22, 44] });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 28, verticalPadding(), "paper", "CENTER", "CENTER");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: H.duration, fps: 30 });
-    const dots = [{ id: "e1", type: "HALFTONE", angle: 45, dotSize: H.dotSize, contrast: 1, color1: hex(H.ink), color2: hex(H.paper), colorMode: "INK", shape: "CIRCLE", layout: "UNIFORM", toneSource: "RADIAL_GRADIENT", center: { x: 0.5, y: 0.35 }, visible: true }];
-    const ground = background(k, sheet, "paper", { effects: dots });
-    logoBadge(k, sheet, { fill: "primary", size: 64 });
-    const record = k.stack(sheet, { width: 420, height: 420, fill: "vinyl", radius: 210, align: "CENTER", justify: "CENTER", name: "Record" });
-    const label = k.stack(record, { width: 190, height: 190, fill: "primary", radius: 95, align: "CENTER", justify: "CENTER", name: "Label" });
-    k.text(label, "GROOVE\nRECORDS", { style: "Label 34", color: "onPrimary", name: "Label text" });
-    k.text(sheet, "{{brand.night}}", { style: "Night 190", color: "headline", name: "Night name" });
-    for (const d of ["Friday, November 7 \xB7 8 pm till late", "Three DJs, all-vinyl sets \xB7 $2 off LPs"]) k.text(sheet, d, { style: "Detail 38", color: "body", name: "Detail" });
-    k.instance(sheet, "Entry", { Label: "Free entry \xB7 RSVP at grooverecords.shop" }, { name: "Entry" });
-    k.behave(ground, "effects[@e1].center.x", [{ kind: "sine", amp: 0.22, freq: 0.1 }]);
-    k.behave(ground, "effects[@e1].center.y", [{ kind: "sine", amp: 0.12, freq: 0.2 }]);
-    k.animate(ground, "effects[@e1].dotSize", [{ t: 0, v: H.dotSize, ease: ease.inOut("sine") }, { t: H.duration / 2, v: H.swell, ease: ease.inOut("sine") }, { t: H.duration, v: H.dotSize }]);
-    k.behave(label, "rotation", [{ kind: "spin", rate: H.rpm }]);
-    k.cues(sheet, cues);
-    k.variants(sheet, refilled(feedVariants({ post: 56, portrait: 72 }, {
-      post: (kit, id) => {
-        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16 });
-        for (const n of kit.named(id, "Night name")) kit.restyle(n, "Night 132");
-        for (const n of kit.named(id, "Record")) kit.patch(n, { width: 300, height: 300, cornerRadius: 150 });
-        for (const n of kit.named(id, "Label")) kit.patch(n, { width: 170, height: 170, cornerRadius: 85 });
-      },
-      portrait: (kit, id) => {
-        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22 });
-        for (const n of kit.named(id, "Night name")) kit.restyle(n, "Night 132");
-        for (const n of kit.named(id, "Record")) kit.patch(n, { width: 380, height: 380, cornerRadius: 190 });
-      }
-    })));
-    return k.finish();
-  }
-});
-
-export {
-  HALFTONE_STORY,
-  halftone_story_default
-};

package/dist/chunks/chunk-LAHAEDVW.js

@@ -1,331 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  form,
-  route,
-  says
-} from "./chunk-3QTC5C65.js";
-import {
-  field,
-  submit
-} from "./chunk-6ETJHHAZ.js";
-import {
-  Kit
-} from "./chunk-6QHAQLJ4.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/app-ui.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var APP_CUES = [
-  { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 420 } },
-  { layer: "Lead", preset: "rise-in", at: 90, params: { duration: 560 } },
-  { layer: "Art", preset: "blur-in", at: 180, params: { duration: 700, amount: 14 } },
-  { layer: "Body", preset: "rise-in", at: 260, params: { duration: 640 } }
-];
-var MOVES = { forward: "PUSH_FROM_RIGHT", back: "PUSH_FROM_LEFT", up: "SLIDE_FROM_BOTTOM", down: "MOVE_OUT_TO_BOTTOM", fade: "DISSOLVE" };
-function appPages(k, o) {
-  const screens = {};
-  const links = [];
-  const cues = o.cues ?? APP_CUES;
-  let first = true;
-  return {
-    screens,
-    page(name, path, access, p = {}) {
-      const id = first ? k.sheet : k.addScreen(name);
-      first = false;
-      k.nameSheet(id, name);
-      k.flowSheet(id, 0, o.pad ?? { top: 28, right: 24, bottom: 72, left: 24 }, p.paper ?? o.paper ?? "paper", "MIN", "CENTER");
-      k.patch(id, { layoutSizingVertical: "HUG", minHeight: 900, clipsContent: true });
-      route(k, id, path, { access, title: `${name} \xB7 ${o.brand}` });
-      k.timeline(id, { duration: 4e3, fps: 30 });
-      screens[name] = id;
-      return { screen: id, column: k.stack(id, { width: p.width ?? o.width, gap: p.gap ?? o.gap ?? 32, name: "Column" }) };
-    },
-    link(from, to, move = "forward") {
-      links.push([from, to, move]);
-    },
-    finish(start) {
-      for (const [from, to, move] of links) k.link(from, screens[to], MOVES[move], { duration: move === "fade" ? 260 : 400 });
-      for (const id of Object.values(screens)) k.cues(id, cues);
-      k.flowStart(screens[start], o.brand);
-    }
-  };
-}
-function panes(k, parent, o = {}) {
-  return k.stack(parent, { direction: "HORIZONTAL", gap: o.gap ?? 24, wrap: true, align: o.align ?? "MIN", name: o.name ?? "Panes" });
-}
-function pane(k, id, min) {
-  k.patch(id, { layoutSizingHorizontal: "FILL", minWidth: min });
-}
-function choice(k, parent, o) {
-  const chosen = k.variable("Form", o.word, "STRING", o.options[0]);
-  const wrap = o.label ? k.stack(parent, { gap: 8, name: `${o.label} field` }) : parent;
-  if (o.label) k.text(wrap, o.label, { style: o.labelStyle ?? "Label 14", color: o.card ? "onCard" : "text", name: "Label" });
-  const row = k.stack(wrap, { direction: "HORIZONTAL", gap: 8, wrap: true, name: `${o.label ?? o.name} choices` });
-  const [v, h] = o.pad ?? [9, 15];
-  const box = { direction: "HORIZONTAL", width: "HUG", radius: o.radius ?? 999, padding: { top: v, right: h, bottom: v, left: h } };
-  const [onFill, onText] = o.on ?? ["primary", "onPrimary"];
-  const [offFill, offText, offLine] = o.off ?? ["field", "onField", "line"];
-  o.options.forEach((option, i) => {
-    const chip = k.stack(row, { direction: "HORIZONTAL", width: "HUG", name: `${option} choice` });
-    const off = k.stack(chip, { ...box, fill: offFill, stroke: { color: offLine, width: 1 }, name: "Not chosen" });
-    k.text(off, option, { style: o.style, color: offText, autoWidth: true, name: "Choice label" });
-    const on = k.stack(chip, { ...box, fill: onFill, stroke: { color: onFill, width: 1 }, name: "Chosen" });
-    k.text(on, option, { style: o.style, color: onText, autoWidth: true, name: "Chosen label" });
-    k.bindExpression(off, "visible", `${o.word} != "${option}"`);
-    k.bindExpression(on, "visible", `${o.word} == "${option}"`);
-    k.patch(i === 0 ? off : on, { visible: false });
-    k.patch(chip, { control: { kind: "RADIO", name: o.name, value: option, variableId: chosen, ...i === 0 ? { checked: true } : {} } });
-  });
-  return chosen;
-}
-function recordButton(k, parent, label, o) {
-  const name = o.name ?? label;
-  const f = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", name: `${name} form` });
-  const [v, h] = o.pad ?? [6, 12];
-  const b = k.stack(f, { direction: "HORIZONTAL", width: "HUG", radius: o.radius ?? 999, padding: { top: v, right: h, bottom: v, left: h }, ...o.fill ? { fill: o.fill } : {}, ...o.line ? { stroke: { color: o.line, width: 1 } } : {}, name: `${name} button` });
-  k.text(b, label, { style: o.style, color: o.color, autoWidth: true, name: `${name} label` });
-  k.patch(b, { control: { kind: "BUTTON", buttonType: "submit", ...o.set ? { name: o.set[0], value: o.set[1] } : {} } });
-  form(k, f, { formAction: o.set ? "updateRecord" : "deleteRecord" });
-  return f;
-}
-function closing(k, app, parent, o) {
-  const band = panes(k, parent, { gap: 20, align: "CENTER", name: "Closing" });
-  k.patch(band, { fills: k.paint("text"), cornerRadius: o.radius ?? 28, padding: { top: 30, right: 32, bottom: 30, left: 32 } });
-  const words = k.text(band, o.title, { style: o.style, color: "paper", name: "Closing line" });
-  pane(k, words, 260);
-  app.link(k.instance(band, "Button", { Label: o.button }, { name: "Closing button" }), "Sign up");
-  return band;
-}
-function eyebrow(k, parent, words, style) {
-  const pill = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", radius: 999, fill: "primary", padding: { top: 5, right: 12, bottom: 5, left: 12 }, name: "Eyebrow" });
-  k.text(pill, words, { style, color: "onPrimary", autoWidth: true, name: "Eyebrow label" });
-  return pill;
-}
-function errorLine(k, parent, style) {
-  const id = k.text(parent, "That email and password do not match.", { style, color: "danger", name: "Error" });
-  says(k, id, "error");
-  k.bindExpression(id, "visible", 'signInError != ""');
-  return id;
-}
-function accountPages(k, app, o) {
-  const made = {};
-  const resetDone = k.variable("Form", "passwordWasReset", "BOOLEAN", false);
-  const linkSent = k.variable("Form", "resetLinkSent", "BOOLEAN", false);
-  const pageOf = (name, path, art, title, body) => {
-    const { column } = app.page(name, path, "signedOut");
-    o.top(column, (id) => app.link(id, "Welcome", "back"));
-    const row = panes(k, column, { gap: 32, align: "CENTER", name: "Account panes" });
-    const pic = k.stack(row, { name: "Art" });
-    pane(k, pic, 320);
-    o.art(pic, art);
-    const side = k.stack(row, { gap: 24, name: "Account side" });
-    pane(k, side, 320);
-    const lead = k.stack(side, { gap: 8, name: "Lead" });
-    k.text(lead, title, { style: o.styles.title, color: "text", name: "Title" });
-    k.text(lead, body, { style: o.styles.body, color: "onPaper", name: "Subtitle" });
-    const holder = k.stack(side, { gap: 18, name: "Body" });
-    const card = k.stack(holder, { gap: 16, fill: "card", radius: o.cardRadius ?? 22, stroke: { color: "line", width: 1 }, padding: 26, name: `${name} card` });
-    return { holder, card };
-  };
-  for (const which of ["Sign up", "Sign in"]) {
-    const { holder, card } = pageOf(which, which === "Sign up" ? "/sign-up" : "/sign-in", which, o.copy[which].title, o.copy[which].body);
-    const f = k.stack(card, { gap: 16, name: `${which} form` });
-    if (which === "Sign in") {
-      const done = k.text(f, "Your password is changed. Sign in with the new one.", { style: o.styles.meta, color: "onCard", name: "Reset done" });
-      k.bindVariable(done, "visible", resetDone);
-      k.patch(done, { visible: false });
-    }
-    if (which === "Sign up") field(k, f, { card: true, label: "Your first name", name: "name", placeholder: o.copy[which].namePlaceholder ?? "Maya", required: true });
-    field(k, f, { card: true, label: "Email", name: "email", placeholder: "you@example.com", type: "email", required: true });
-    field(k, f, { card: true, label: "Password", name: "password", placeholder: which === "Sign up" ? "At least 8 characters" : "Your password", type: "password", required: true });
-    errorLine(k, f, o.styles.error);
-    const go = k.stack(f, { direction: "HORIZONTAL", gap: 16, align: "CENTER", wrap: true, name: "Send row" });
-    submit(k, go, o.copy[which].button);
-    if (which === "Sign in") app.link(k.text(go, "Forgot your password?", { style: o.styles.link, color: "onCard", autoWidth: true, name: "Forgot link" }), "Forgot password", "fade");
-    const other = k.stack(holder, { direction: "HORIZONTAL", gap: 6, justify: "CENTER", name: "Other way" });
-    k.text(other, which === "Sign up" ? "Already have an account?" : "New here?", { style: o.styles.meta, color: "onPaper", autoWidth: true, name: "Other question" });
-    app.link(k.text(other, which === "Sign up" ? "Sign in" : "Create an account", { style: o.styles.link, color: "text", autoWidth: true, name: "Other link" }), which === "Sign up" ? "Sign in" : "Sign up", "fade");
-    made[which] = f;
-  }
-  {
-    const { holder, card } = pageOf("Forgot password", "/forgot-password", "Sign in", "Forgot your password?", "Say the email you signed up with and we will send a link to choose a new one.");
-    const f = k.stack(card, { gap: 16, name: "Forgot form" });
-    field(k, f, { card: true, label: "Email", name: "email", placeholder: "you@example.com", type: "email", required: true });
-    errorLine(k, f, o.styles.error);
-    submit(k, f, "Email me a link");
-    form(k, f, { formAction: "forgotPassword", onSubmit: Kit.set(linkSent, { value: true }) });
-    k.bindExpression(f, "visible", "resetLinkSent == false");
-    const sent = k.stack(card, { gap: 6, name: "Link sent" });
-    k.text(sent, "Check your email", { style: o.styles.title, color: "onCard", name: "Sent title" });
-    k.text(sent, "If there is an account for that address, a link is on its way. It opens a page here where you choose a new password.", { style: o.styles.meta, color: "cardMuted", name: "Sent body" });
-    k.bindVariable(sent, "visible", linkSent);
-    k.patch(sent, { visible: false });
-    const back = k.stack(holder, { direction: "HORIZONTAL", gap: 6, justify: "CENTER", name: "Other way" });
-    app.link(k.text(back, "Back to sign in", { style: o.styles.link, color: "text", autoWidth: true, name: "Other link" }), "Sign in", "fade");
-  }
-  const reset = (() => {
-    const { holder, card } = pageOf("Reset password", "/reset-password", "Sign in", "Choose a new password", "At least 8 characters. You will sign in with it next.");
-    const f = k.stack(card, { gap: 16, name: "Reset form" });
-    field(k, f, { card: true, label: "New password", name: "new_password", placeholder: "At least 8 characters", type: "password", required: true });
-    errorLine(k, f, o.styles.error);
-    submit(k, f, "Set new password");
-    const back = k.stack(holder, { direction: "HORIZONTAL", gap: 6, justify: "CENTER", name: "Other way" });
-    app.link(k.text(back, "Back to sign in", { style: o.styles.link, color: "text", autoWidth: true, name: "Other link" }), "Sign in", "fade");
-    return f;
-  })();
-  return {
-    /** Signing up or in goes to the page named `home`; a new password, to signing in. */
-    leads(home) {
-      for (const which of ["Sign up", "Sign in"]) form(k, made[which], { formAction: which === "Sign up" ? "signUp" : "signIn", onSubmit: Kit.go(app.screens[home], "PUSH_FROM_RIGHT", { duration: 420 }) });
-      form(k, reset, { formAction: "resetPassword", onSubmit: Kit.when([{ then: [Kit.set(resetDone, { value: true }), Kit.go(app.screens["Sign in"], "DISSOLVE", { duration: 300 })] }]) });
-    }
-  };
-}
-function signOut(k, app, parent, to, button) {
-  const f = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", name: "Sign out form" });
-  k.patch(button(f), { control: { kind: "BUTTON", buttonType: "submit" } });
-  return { leads: () => form(k, f, { formAction: "signOut", onSubmit: Kit.go(app.screens[to], "PUSH_FROM_LEFT", { duration: 420 }) }) };
-}
-function opener(k, parent, o) {
-  const open = k.variable("Form", o.word, "BOOLEAN", false);
-  const b = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", radius: 999, fill: o.fill, padding: { top: 11, right: 20, bottom: 11, left: 12 }, name: "Add button" });
-  const plus = k.stack(b, { direction: "HORIZONTAL", width: 28, height: 28, radius: 14, fill: o.dot, align: "CENTER", justify: "CENTER", name: "Plus" });
-  k.text(plus, "+", { style: o.style, color: o.onDot, autoWidth: true, name: "Plus sign" });
-  k.text(b, o.label, { style: o.style, color: o.color, autoWidth: true, name: "Add label" });
-  k.on(b, Kit.set(open, { toggle: true }));
-  return {
-    variable: open,
-    /** `id` is shown only while it is open. */
-    opens(id) {
-      k.bindVariable(id, "visible", open);
-      k.patch(id, { visible: false });
-    },
-    /** What a form does once it is sent: close again. */
-    close: Kit.set(open, { value: false })
-  };
-}
-function accountPage(k, app, o) {
-  const meta = o.styles.meta ?? o.styles.label, error = o.styles.error ?? o.styles.label;
-  const saved = k.variable("Form", "accountSaved", "STRING", "");
-  const you = app.page("Account", "/account", "signedIn", { width: 960 });
-  o.top(you.column, (row2) => app.link(k.text(row2, o.back, { style: o.styles.link, color: "text", autoWidth: true, name: "Back link" }), o.home, "down"));
-  const row = panes(k, you.column, { gap: 32, align: "CENTER", name: "Account panes" });
-  const side = k.stack(row, { gap: 22, name: "Account side" });
-  pane(k, side, 320);
-  const lead = k.stack(side, { gap: 6, name: "Lead" });
-  eyebrow(k, lead, "YOUR ACCOUNT", o.styles.eyebrow);
-  says(k, k.text(lead, o.sample.name, { style: o.styles.title, color: "text", name: "Account name" }), "name");
-  const details = k.stack(side, { gap: 16, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Account card" });
-  const mail = k.stack(details, { gap: 2, name: "Email row" });
-  k.text(mail, "Email", { style: o.styles.label, color: "cardMuted", name: "Detail label" });
-  says(k, k.text(mail, o.sample.email, { style: o.styles.value, color: "onCard", name: "Detail value" }), "email");
-  const kept = k.stack(details, { gap: 2, name: "Kept row" });
-  k.text(kept, o.count.label, { style: o.styles.label, color: "cardMuted", name: "Detail label" });
-  k.bindExpression(k.text(kept, o.count.sample, { style: o.styles.stat, color: "onCard", name: "Kept number" }), "characters", o.count.word);
-  const art = k.stack(row, { align: "CENTER", name: "Art" });
-  pane(k, art, 320);
-  o.art(art);
-  const body = k.stack(you.column, { gap: 18, name: "Body" });
-  const settings = panes(k, body, { gap: 18, name: "Settings" });
-  const card = (title, line, notice, build, action) => {
-    const c = k.stack(settings, { gap: 14, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: `${title} card` });
-    pane(k, c, 300);
-    k.text(c, title, { style: o.styles.value, color: "onCard", name: "Setting title" });
-    k.text(c, line, { style: meta, color: "cardMuted", name: "Setting line" });
-    const f = k.stack(c, { gap: 14, name: `${title} form` });
-    build(f);
-    errorLine(k, f, error);
-    const go = k.stack(f, { direction: "HORIZONTAL", gap: 12, align: "CENTER", wrap: true, name: "Send row" });
-    submit(k, go, "Save");
-    const ok = k.text(go, notice, { style: meta, color: "onCard", autoWidth: true, name: "Saved" });
-    k.bindExpression(ok, "visible", `accountSaved == "${action}"`);
-    k.patch(ok, { visible: false });
-    form(k, f, { formAction: action, onSubmit: Kit.set(saved, { value: action }) });
-  };
-  card("Your name", "What the app calls you.", "Saved", (f) => {
-    const box = field(k, f, { card: true, label: "Name", name: "name", placeholder: o.sample.name, required: true });
-    k.patch(box, { control: { ...k.node(box).control, variableId: o.user.name } });
-  }, "updateAccount");
-  card("Password", "Other devices you are signed in on are signed out.", "Changed", (f) => {
-    field(k, f, { card: true, label: "Current password", name: "password", placeholder: "Your password now", type: "password", required: true });
-    field(k, f, { card: true, label: "New password", name: "new_password", placeholder: "At least 8 characters", type: "password", required: true });
-  }, "changePassword");
-  const ways = k.stack(body, { gap: 14, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Leave card" });
-  const outRow = k.stack(ways, { direction: "HORIZONTAL", gap: 16, align: "CENTER", justify: "SPACE_BETWEEN", wrap: true, name: "Sign out row" });
-  k.text(outRow, "Done for now?", { style: o.styles.value, color: "onCard", autoWidth: true, name: "Leave title" });
-  const out = signOut(k, app, outRow, "Welcome", (f) => {
-    const b2 = k.stack(f, { direction: "HORIZONTAL", width: "HUG", radius: 12, stroke: { color: "onCard", width: 1.5 }, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Sign out button" });
-    k.text(b2, "Sign out", { style: o.styles.button ?? o.styles.link, color: "onCard", autoWidth: true, name: "Sign out label" });
-    return b2;
-  });
-  k.rect(ways, "FILL", 1, "line", { name: "Rule" });
-  k.text(ways, "Delete your account", { style: o.styles.value, color: "onCard", name: "Delete title" });
-  k.text(ways, "Your account and everything the app keeps for you are deleted, for good. Type your password to be sure.", { style: meta, color: "cardMuted", name: "Delete line" });
-  const del = k.stack(ways, { direction: "HORIZONTAL", gap: 12, align: "MAX", wrap: true, name: "Delete form" });
-  const pw = k.stack(del, { name: "Delete password" });
-  pane(k, pw, 220);
-  field(k, pw, { card: true, label: "Password", name: "password", placeholder: "Your password", type: "password", required: true });
-  const b = k.stack(del, { direction: "HORIZONTAL", width: "HUG", radius: 12, fill: "danger", padding: { top: 13, right: 20, bottom: 13, left: 20 }, name: "Delete button" });
-  k.text(b, "Delete my account", { style: o.styles.button ?? o.styles.link, color: "onDanger", autoWidth: true, name: "Delete label" });
-  k.patch(b, { control: { kind: "BUTTON", buttonType: "submit" } });
-  errorLine(k, ways, error);
-  return {
-    leads: () => {
-      out.leads();
-      form(k, del, { formAction: "deleteAccount", onSubmit: Kit.go(app.screens.Welcome, "DISSOLVE", { duration: 400 }) });
-    }
-  };
-}
-function editInPlace(k, o) {
-  const open = Object.values(k.doc.variables ?? {}).find((v) => v.name === `form/${o.word}`)?.id ?? k.variable("Form", o.word, "STRING", "");
-  k.on(o.trigger, Kit.set(open, { expression: "item_id" }));
-  k.bindExpression(o.view, "visible", `${o.word} != item_id`);
-  const f = k.stack(o.parent, { gap: 12, name: "Edit form" });
-  o.build(f);
-  errorLine(k, f, o.style);
-  const row = k.stack(f, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Edit actions" });
-  submit(k, row, "Save");
-  const cancel = k.stack(row, { direction: "HORIZONTAL", width: "HUG", padding: { top: 8, right: 10, bottom: 8, left: 10 }, name: "Cancel" });
-  k.text(cancel, "Cancel", { style: o.style, color: o.card === false ? "onPaper" : "cardMuted", autoWidth: true, name: "Cancel label" });
-  k.on(cancel, Kit.set(open, { value: "" }));
-  k.patch(cancel, { control: { kind: "BUTTON", buttonType: "button" } });
-  form(k, f, { formAction: "updateRecord", onSubmit: Kit.set(open, { value: "" }) });
-  k.bindExpression(f, "visible", `${o.word} == item_id`);
-  k.patch(f, { visible: false });
-  return f;
-}
-function stat(k, parent, o) {
-  const [figureColor, captionColor] = o.on ?? ["onCard", "cardMuted"];
-  const tile = k.stack(parent, { gap: 4, fill: o.fill ?? "card", radius: 20, stroke: o.fill ? void 0 : { color: "line", width: 1 }, padding: { top: 16, right: 18, bottom: 16, left: 18 }, name: "Stat" });
-  pane(k, tile, o.min ?? 140);
-  const row = k.stack(tile, { direction: "HORIZONTAL", gap: 6, align: "MAX", name: "Stat figure" });
-  k.bindExpression(k.text(row, o.sample, { style: o.figure, color: figureColor, autoWidth: true, name: "Stat number" }), "characters", o.expression);
-  if (o.unit) k.text(row, o.unit, { style: o.caption, color: captionColor, autoWidth: true, name: "Stat unit" });
-  k.text(tile, o.label, { style: o.caption, color: captionColor, name: "Stat label" });
-  return tile;
-}
-
-export {
-  APP_CUES,
-  appPages,
-  panes,
-  pane,
-  choice,
-  recordButton,
-  closing,
-  eyebrow,
-  errorLine,
-  accountPages,
-  signOut,
-  opener,
-  accountPage,
-  editInPlace,
-  stat
-};

package/dist/chunks/chunk-LAHSBNS4.js

@@ -1,97 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  bar,
-  captionGrid,
-  commonReflow,
-  finishSite,
-  foot,
-  portfolioKit,
-  portfolioSite,
-  projectPage,
-  studioPage
-} from "./chunk-6RDEF74A.js";
-import {
-  defineTemplate
-} from "./chunk-GTCLGM63.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/web/portfolio-cube-gallery.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var WORK = [
-  { title: "Tor speaker", client: "Halde Audio", year: "2026", kind: "Consumer electronics", cover: "cube-00", summary: "A speaker you carry by its strap and set down on any shelf as if it were a stone.", story: "Halde wanted one speaker for the kitchen, the garden and the bag. We gave it a single knitted band that is the handle, the stand and the grille, and a body milled from one block so it sits level on gravel.", credits: "Industrial design, CMF, prototyping \u2014 Oda Vale Studio \xB7 Engineering \u2014 Halde" },
-  { title: "Ember desk lamp", client: "Lumen & Ash", year: "2025", kind: "Lighting", cover: "cube-01", summary: "An amber shade on a brass hinge that dims as you tip it down.", story: "The hinge is the switch and the dimmer: tip it down to read, up to light the wall. Six months of prototypes went into a friction joint that holds any angle and never droops.", credits: "Design, prototyping \u2014 Oda Vale Studio \xB7 Production \u2014 Lumen & Ash" },
-  { title: "Mira stand mixer", client: "Kettle & Co.", year: "2025", kind: "Kitchen appliance", cover: "cube-02", summary: "A modular mixer whose bowl, motor and arm come apart for the dishwasher.", story: "Three parts, two clicks. We cut the part count by a third and moved the motor low so the mixer stays put on a full dough.", credits: "Industrial design, DFM \u2014 Oda Vale Studio" },
-  { title: "Ridge kettle", client: "Kettle & Co.", year: "2024", kind: "Kitchen appliance", cover: "cube-03", summary: "An aluminium kettle with a walnut handle that never gets hot.", story: "A double wall, a handle set off the body by a centimetre of air, and a spout drawn so it pours without a drip from full to the last cup.", credits: "Design \u2014 Oda Vale Studio \xB7 Engineering \u2014 Kettle & Co." },
-  { title: "Felt headphones", client: "Norr Sound", year: "2024", kind: "Wearables", cover: "cube-04", summary: "Over-ear headphones in wool felt, made to be repaired at home.", story: "Every part is held by a screw, not glue: the cushions, the band and the battery come out with one tool, and Norr sells each one on its own.", credits: "Industrial design, CMF \u2014 Oda Vale Studio" },
-  { title: "Fold chair", client: "Sette", year: "2023", kind: "Furniture", cover: "cube-05", summary: "A chair bent from a single sheet of steel, with no joints at all.", story: "One laser cut and four bends: the chair ships flat in a sleeve and is folded once at the factory. It stacks twelve high.", credits: "Design \u2014 Oda Vale Studio \xB7 Production \u2014 Sette" }
-];
-var portfolio_cube_gallery_default = defineTemplate({
-  id: "web-portfolio-cube-gallery",
-  meta: {
-    name: "Cube turn portfolio",
-    description: "An industrial designer\u2019s site where each page is a face of a 3D cube: open a product and the cube turns to it, go home and it turns back. Products on soft cards three across, a page per product with the render and the brief, and a studio page. The turn is drawn on the GPU with WebGPU, in CSS 3D elsewhere. The products are a collection you edit as a table. Desktop, tablet and phone",
-    category: "web",
-    tags: ["portfolio", "3d", "cube", "transition", "webgpu", "industrial design", "product design", "cms", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["portfolio"],
-    created: "2026-10-05",
-    updated: "2026-10-05"
-  },
-  breakpoints: true,
-  build() {
-    const k = portfolioKit("Cube turn");
-    k.brand(
-      { paper: "#ECEAE6", text: "#1D1C1A", onPaper: "#625E59", primary: "#1D1C1A", onPrimary: "#ECEAE6", card: "#F7F6F3", onCard: "#1D1C1A", cardMuted: "#625E59", line: "#D7D3CC" },
-      { name: "Oda Vale Studio", email: "hello@odavale.studio" }
-    );
-    k.textStyle("Wordmark 18", { size: 18, fontWeight: 700, letterSpacing: -0.3, lineHeight: 24 });
-    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 20 });
-    k.textStyle("Meta 14", { size: 14, fontWeight: 400, lineHeight: 20 });
-    k.textStyle("Title 20", { size: 20, fontWeight: 600, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 28 });
-    k.textStyle("Display 64", { size: 64, fontWeight: 600, letterSpacing: -2.2, lineHeight: 68 });
-    k.textStyle("Display 40", { size: 40, fontWeight: 600, letterSpacing: -1.2, lineHeight: 46 });
-    const type = { title: "Title 20", meta: "Meta 14", body: "Body 17", small: "Small 14", display: "Display 64" };
-    const s = portfolioSite(k, { name: "Oda Vale Studio", projects: WORK, go: "CUBE_FROM_RIGHT", back: "CUBE_FROM_LEFT" });
-    const W = 1440, SIDE = 96;
-    for (const page of Object.values(s.screens)) bar(s, page, { type, wordmark: "Wordmark 18", links: [["work", "Products"], ["studio", "Studio"]], pad: [28, SIDE] });
-    const work = s.screens.work;
-    const lead = k.stack(work, { gap: 20, padding: { top: 72, right: SIDE, bottom: 64, left: SIDE }, name: "Lead" });
-    k.text(lead, "Objects for everyday rooms, designed to be kept.", { style: "Display 64", color: "text", width: 960, name: "Headline" });
-    k.text(lead, "Oda Vale is an industrial design studio in Copenhagen: speakers, lamps, kitchen things and furniture, from the first foam model to the line at the factory.", { style: "Body 17", color: "onPaper", width: 640, name: "Intro" });
-    const art = k.stack(work, { padding: { top: 0, right: SIDE, bottom: 0, left: SIDE }, name: "Art" });
-    captionGrid(s, art, { cols: 3, width: W - SIDE * 2, gap: 24, ratio: 0.72, radius: 18, type, card: { fill: "card", pad: 14, radius: 26 }, meta: "{{item.client}} \xB7 {{item.year}}", captionGap: 16 });
-    foot(s, work, { type, side: SIDE, elsewhere: "Instagram \xB7 Dezeen \xB7 Read.cv" });
-    k.patch(k.named(work, "Footer")[0], { name: "Body" });
-    projectPage(s, { type, width: W, side: SIDE, ratio: 0.66, radius: 24, split: true, kicker: "Product", more: { cols: 3, gap: 24, ratio: 0.66, label: "More products" } });
-    foot(s, s.screens.project, { type, side: SIDE, elsewhere: "Instagram \xB7 Dezeen \xB7 Read.cv" });
-    studioPage(s, {
-      type: { ...type, display: "Display 40" },
-      width: W,
-      side: SIDE,
-      picture: "cube-05",
-      ratio: 0.42,
-      radius: 24,
-      statement: "Four designers, a workshop and a CNC mill, two streets from the harbour.",
-      about: "We design a few products a year, each for a company that means to make it for a long time. We prototype everything we draw in our own workshop before a factory sees it.",
-      services: ["Industrial design", "Colour, materials and finish", "Prototyping and testing", "Design for manufacture"],
-      clients: "Halde Audio, Lumen & Ash, Kettle & Co., Norr Sound and Sette.",
-      contact: "Booking projects for spring 2027."
-    });
-    foot(s, s.screens.studio, { type, side: SIDE, elsewhere: "Instagram \xB7 Dezeen \xB7 Read.cv" });
-    finishSite(s, { all: commonReflow({ desktopSide: SIDE, ratio: 0.72, gap: 24, cols: { laptop: 3, tablet: 2, mobile: 1 }, moreCols: 3, moreRatio: 0.66, cardPad: 14, split: true, pictureRatio: 0.66, studioRatio: 0.42, restyle: { "Display 64": { laptop: "Display 40", tablet: "Display 40", mobile: "Display 40" } } }) });
-    return k.finish();
-  }
-});
-
-export {
-  portfolio_cube_gallery_default
-};