@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-K5JPN3KA.js

@@ -0,0 +1,331 @@
+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-BDP4IUZA.js";
+import {
+  Kit
+} from "./chunk-T3SGRYUX.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-KBOQAVP2.js

@@ -0,0 +1,23 @@
+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 {
+  FOOD
+} from "./chunk-FOHHZR6N.js";
+import {
+  reel
+} from "./chunk-ZJZ6HKBP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/festival-presale-food-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_food_reel_default = reel(FOOD);
+
+export {
+  festival_presale_food_reel_default
+};

package/dist/chunks/chunk-KCZFJR2O.js

@@ -0,0 +1,23 @@
+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 {
+  STREET
+} from "./chunk-PDWXGRT4.js";
+import {
+  countdownStory
+} from "./chunk-ZJZ6HKBP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/festival-presale-street-countdown.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_street_countdown_default = countdownStory(STREET);
+
+export {
+  festival_presale_street_countdown_default
+};

package/dist/chunks/chunk-KF2J5RLA.js

@@ -0,0 +1,122 @@
+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 {
+  castLight,
+  fitCastLight,
+  noirBrand,
+  pendantLamp,
+  scaleLamp,
+  stamp,
+  typedRow
+} from "./chunk-SCVMNUCW.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/noir-feature-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var REPORT = [
+  ["Subject", "invoice.payment_failed, $1,480"],
+  ["Seen", "41 seconds after it happened"],
+  ["Tipped", "#revenue, with the invoice attached"]
+];
+var cues = [
+  { layer: "Lamp light", preset: "fade-in", at: 0, params: { duration: 260 } },
+  { layer: "Lamp light", preset: "flash", at: 320, params: { duration: 420 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 200, params: { duration: 600 } },
+  { layer: "Headline", preset: "blur-in", at: 400, params: { duration: 900, amount: 26 } },
+  { layer: "Sub", preset: "rise-in", at: 1300, params: { duration: 700 } },
+  { layer: "Report", preset: "rise-in", at: 1900, params: { duration: 600 } },
+  { layer: "Typed value", preset: "typewriter", at: 2400, params: { duration: 520 }, stagger: { delay: 520 } },
+  { layer: "Stamp", preset: "pop-in", at: 4200, params: { duration: 300, amount: 0.5 } },
+  { layer: "Report", preset: "shake", at: 4320, params: { duration: 380, distance: 10 } },
+  { layer: "Chip", preset: "pop-in", at: 4700, params: { duration: 400 } },
+  { layer: "Site", preset: "fade-in", at: 4900, params: { duration: 500 } },
+  // The lamp goes out last, and the desk is dark again for the loop.
+  outro(["Eyebrow", "Headline", "Sub", "Report", "Chip", "Site"], 6300),
+  { layer: "Lamp light", preset: "fade-out", at: 6650, params: { duration: 300 } }
+];
+var noir_feature_post_default = defineTemplate({
+  id: "motion-noir-feature-post",
+  meta: {
+    name: "Noir feature post (animated)",
+    description: "A feature announcement as a case being cracked: a pendant lamp comes on, the feature\u2019s name comes into focus in its light, a report is typed a line at a time and CAUGHT is stamped across it \u2014 a seven-second film-noir loop, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "noir", "film noir", "detective", "lamp", "typewriter", "stamp", "feature", "changelog", "saas", "post", "serif", "loop", "black and white"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "changelog", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Noir feature post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    noirBrand(k, { feature: "Stakeout." });
+    k.textStyle("Eyebrow 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 3, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Display 168", { ...SERIF, size: 168, fontWeight: 900, letterSpacing: -6, lineHeight: 160 });
+    k.textStyle("Sub 36", { ...SERIF, size: 36, fontWeight: 400, lineHeight: 46 });
+    k.textStyle("Report head 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 2.5, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Typed 24", { ...MONO, size: 24, fontWeight: 500, lineHeight: 36 });
+    k.textStyle("Stamp 44", { size: 44, fontWeight: 900, letterSpacing: 4, lineHeight: 48, textCase: "UPPER" });
+    k.textStyle("Chip 22", { size: 22, fontWeight: 800, letterSpacing: 0.5, lineHeight: 28 });
+    k.textStyle("Site 22", { ...MONO, size: 22, fontWeight: 700, lineHeight: 28 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 22", label: "On every plan from today", pad: [12, 22], radius: 4 });
+    const shadow = { type: "DROP_SHADOW", color: k.color("shade", 0.75), offset: { x: 0, y: 20 }, blur: 44, spread: 0, visible: true };
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 34, 72, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    castLight(k, sheet, 1080, 1080, { bars: 9, opacity: 0.07 });
+    pendantLamp(k, sheet, { x: 800, cord: 96, shade: 190, coneW: 1040, coneH: 900, opacity: 0.27 });
+    k.text(sheet, "New in {{brand.name}} \xB7 case no. 0612", { style: "Eyebrow 22", color: "text", name: "Eyebrow" });
+    k.text(sheet, "{{brand.feature}}", { style: "Display 168", color: "text", name: "Headline" });
+    k.text(sheet, "A watch on every payment webhook. When one fails without a word, you have the evidence inside a minute.", { style: "Sub 36", color: "text", width: 760, name: "Sub" });
+    const report = k.stack(sheet, { gap: 10, fill: "card", radius: 2, padding: { top: 26, right: 32, bottom: 30, left: 32 }, effects: [shadow], name: "Report" });
+    k.text(report, "Stakeout report \xB7 Tuesday, 02:14:07", { style: "Report head 18", color: "onCard", name: "Report head" });
+    k.rect(report, "FILL", 2, "onCard", { name: "Report rule" });
+    const rows = k.stack(report, { gap: 0, name: "Report rows" });
+    for (const [label, value] of REPORT) typedRow(k, rows, label.toUpperCase(), value, { style: "Typed 24", labelWidth: 150 });
+    stamp(k, report, "Caught", { style: "Stamp 44", turn: -9, absolute: { x: 660, y: 18 }, pad: [6, 18] });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Chip", { Label: "On every plan from today" }, { name: "Chip" });
+    k.text(foot, "{{brand.site}}", { style: "Site 22", color: "text", autoWidth: true, name: "Site" });
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => fitCastLight(kit, id),
+      vertical: (kit, id) => {
+        fitCastLight(kit, id, { bars: 11 });
+        scaleLamp(kit, id, 800, 1.7);
+        for (const st of kit.named(id, "Stamp")) kit.patch(st, { x: 520, y: -34 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  noir_feature_post_default
+};

package/dist/chunks/chunk-KFGD6HPK.js

@@ -0,0 +1,104 @@
+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 {
+  E,
+  lottieTemplate,
+  roundRect
+} from "./chunk-ZXLRLH5A.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/food.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FOOD = { paper: "#FFF7ED", ink: "#2B1A0E", accent: "#E94F37", yellow: "#FFC23C", green: "#2FA84F", soft: "#FFE3C4", road: "#E8D5BF", white: "#FFFFFF", steam: "#D9C6B0" };
+function wheel(l, parent, cx, cy, r, turns) {
+  const w = l.box(parent, cx - r, cy - r, r * 2, r * 2, "Wheel");
+  l.ring(w, r, r, r - 7, "ink", 14, { name: "Tyre" });
+  l.circle(w, r, r, r * 0.3, "ink", { name: "Hub" });
+  l.line(w, [[r, 12], [r, r * 2 - 12]], "ink", 6, { name: "Spoke" });
+  l.line(w, [[12, r], [r * 2 - 12, r]], "ink", 6, { name: "Spoke" });
+  l.spin(w, turns);
+  return w;
+}
+var foodScooter = lottieTemplate({
+  slug: "courier-on-the-way",
+  sector: "food",
+  role: "loader",
+  size: "spot",
+  duration: 1200,
+  loop: true,
+  name: "Courier on the way",
+  description: "The order-tracking animation for a delivery app: a courier rides a scooter with the food box on the back, wheels turning and the road rushing past \u2014 a 1.2-second seamless loop, 800\xD7600",
+  colors: FOOD,
+  useCases: ["menu"],
+  tags: ["delivery", "scooter", "courier", "order tracking"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 250, "soft", { name: "Backdrop" });
+    const dashes = l.box(l.sheet, -120, 470, 1080, 12, "Road");
+    for (let i = 0; i < 9; i++) l.rect(dashes, i * 120, 0, 70, 12, "road", { radius: 6, name: "Dash" });
+    l.keys(dashes, "translateX", [[0, 0, E.linear], [1200, -120]]);
+    for (const [y, w, t] of [[250, 90, 0], [300, 130, 400], [350, 70, 800]]) {
+      const s = l.rect(l.sheet, 110, y, w, 10, "road", { radius: 5, name: "Speed line" });
+      l.keys(s, "translateX", [[0, 40, E.hold], [t, 40, E.linear], [t + 400, -60, E.hold], [1200, 40]]);
+      l.opacity(s, [[0, 0, E.hold], [t, 0, E.out], [t + 120, 1, E.in], [t + 400, 0, E.hold], [1200, 0]]);
+    }
+    const bike = l.box(l.sheet, 230, 180, 360, 300, "Scooter");
+    l.vector(bike, [{ pts: roundRect(20, 90, 110, 100, 16), closed: true }], "accent", { name: "Food box" });
+    l.rect(bike, 38, 118, 74, 12, "yellow", { radius: 6, name: "Box stripe" });
+    l.circle(bike, 200, 40, 34, "ink", { name: "Helmet" });
+    l.rect(bike, 176, 38, 40, 14, "yellow", { radius: 7, name: "Visor" });
+    l.shape(bike, [[150, 80], [230, 80], [250, 190], [150, 190]], "green", { name: "Rider" });
+    l.shape(bike, [[60, 200], [300, 200], [330, 250], [40, 250]], "accent", { name: "Body" });
+    l.line(bike, [[290, 200], [320, 110], [350, 110]], "ink", 14, { name: "Handlebar" });
+    l.keys(bike, "translateY", [[0, 0, E.inOut], [300, -6, E.inOut], [600, 0, E.inOut], [900, -6, E.inOut], [1200, 0]]);
+    wheel(l, l.sheet, 290, 440, 44, 2);
+    wheel(l, l.sheet, 540, 440, 44, 2);
+  }
+});
+var foodPreparing = lottieTemplate({
+  slug: "preparing",
+  sector: "food",
+  role: "loader",
+  size: "icon",
+  duration: 2400,
+  loop: true,
+  name: "Preparing your order",
+  description: 'The "preparing" state of a food order: a pot on the flame, its lid rattling and steam curling up \u2014 a 2.4-second seamless loop, 512\xD7512',
+  colors: FOOD,
+  tags: ["cooking", "kitchen", "order status", "loader"],
+  build(l) {
+    for (const [x, t] of [[196, 0], [256, 800], [316, 1600]]) {
+      const s = l.line(l.sheet, [{ x, y: 190 }, { x: x - 18, y: 160, handleIn: { x: x - 18, y: 176 }, handleOut: { x: x - 18, y: 144 } }, { x, y: 130, handleIn: { x, y: 138 }, handleOut: { x, y: 122 } }, { x: x + 18, y: 100, handleIn: { x: x + 18, y: 114 } }], "steam", 14, { name: "Steam" });
+      const late = (2400 - t) / 2400, mid = 0.9 * Math.max(0, 1 - Math.max(0, 2400 - t - 600) / 1400);
+      l.keys(s, "translateY", t === 0 ? [[0, 0, E.linear], [2400, -60]] : [[0, -60 * late, E.linear], [t, -60, E.hold], [t + 1, 0, E.linear], [2400, -60 * late]]);
+      l.opacity(s, t === 0 ? [[0, 0, E.out], [600, 0.9, E.inOut], [2e3, 0, E.hold], [2400, 0]] : [[0, mid, E.inOut], [t - 400, 0, E.hold], [t, 0, E.out], [t + 600, 0.9, E.inOut], [2400, mid]]);
+    }
+    for (const [x, h, t] of [[216, 50, 0], [256, 70, 150], [296, 50, 300]]) {
+      const f = l.shape(l.sheet, [{ x, y: 470 - h }, { x: x + 18, y: 470, handleIn: { x: x + 20, y: 470 - h * 0.4 } }, { x: x - 18, y: 470, handleOut: { x: x - 20, y: 470 - h * 0.4 } }], t === 150 ? "accent" : "yellow", { name: "Flame" });
+      l.pivot(f, 0.5, 1);
+      l.keys(f, "scaleY", [[0, 1, E.inOut], [300 + t, 0.75, E.inOut], [900 + t, 1.1, E.inOut], [1500 + t, 0.8, E.inOut], [2400, 1]]);
+    }
+    l.vector(l.sheet, [{ pts: roundRect(126, 250, 260, 170, 40), closed: true }], "accent", { name: "Pot" });
+    l.rect(l.sheet, 96, 280, 50, 22, "ink", { radius: 11, name: "Handle" });
+    l.rect(l.sheet, 366, 280, 50, 22, "ink", { radius: 11, name: "Handle" });
+    l.rect(l.sheet, 126, 330, 260, 16, "yellow", { name: "Band", opacity: 0.8 });
+    const lid = l.box(l.sheet, 116, 212, 280, 44, "Lid");
+    l.vector(lid, [{ pts: roundRect(0, 16, 280, 28, 14), closed: true }], "ink", { name: "Lid plate" });
+    l.rect(lid, 118, 0, 44, 22, "ink", { radius: 11, name: "Lid knob" });
+    l.pivot(lid, 0.5, 1);
+    l.keys(lid, "rotation", [[0, 0, E.inOut], [150, -4, E.inOut], [300, 3, E.inOut], [450, 0, E.hold], [1200, 0, E.inOut], [1350, -4, E.inOut], [1500, 3, E.inOut], [1650, 0, E.hold], [2400, 0]]);
+    l.keys(lid, "translateY", [[0, 0, E.out], [150, -10, E.in], [300, 0, E.hold], [1200, 0, E.out], [1350, -10, E.in], [1500, 0, E.hold], [2400, 0]]);
+  }
+});
+var FOOD_PACK = [foodScooter, foodPreparing];
+
+export {
+  foodScooter,
+  foodPreparing,
+  FOOD_PACK
+};