@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-23CG5QSQ.js

@@ -1,336 +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 {
-  FIZZ,
-  bob,
-  burst,
-  burstSticker,
-  callComponent,
-  chromeText,
-  cutout,
-  display,
-  float,
-  grot,
-  halftone,
-  marquee,
-  maxBrand,
-  mono,
-  plate,
-  slap,
-  spark,
-  spin,
-  sticker,
-  stickerEdge,
-  wobble
-} from "./chunk-SMGPOQLP.js";
-import {
-  camera
-} from "./chunk-UD3JVCFG.js";
-import {
-  clicks,
-  glide,
-  touch
-} from "./chunk-DYNJDZ4J.js";
-import {
-  captionSwap
-} from "./chunk-C7BYFVZT.js";
-import {
-  score
-} from "./chunk-52GCV7N5.js";
-import {
-  board,
-  ground,
-  hide,
-  reboard,
-  restyle
-} from "./chunk-QLV6445V.js";
-import {
-  logoBadge
-} from "./chunk-EK5CFFJO.js";
-import {
-  defineTemplate
-} from "./chunk-A44WEVKR.js";
-import {
-  Kit,
-  preset
-} from "./chunk-T3SGRYUX.js";
-import {
-  ease
-} from "./chunk-6DWY3DOQ.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-6VMOKHMF.js";
-
-// templates/src/motion/style-maximal-feature-demo.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var S = score("house", 2);
-var { beat } = S;
-var NAME = "Maximal SaaS feature demo";
-var STEP = [0, beat(8), beat(16), beat(24)];
-var W = 876;
-var H = 900;
-var AT = {
-  upload: { x: 760, y: 150 },
-  uploadCard: { x: 598, y: 186 },
-  bop: { x: 430, y: 316 },
-  beatCard: { x: 598, y: 372 },
-  yum: { x: 600, y: 560 },
-  stickerCard: { x: 470, y: 470 },
-  clips: { x: 450, y: 760 },
-  export: { x: 760, y: 820 }
-};
-var BEATS = 16;
-var LAYOUT = {
-  // Words inside x 64–940, y 250–1440: the panel ends at 1430, the bands and the burst below are drawing only.
-  story: {
-    top: { x: 64, y: 262 },
-    caption: { x: 64, y: 436, w: 876, style: "Caption 44" },
-    stage: { x: 64, y: 540, s: 1 },
-    band: { x: -100, y: 96, w: 1280 },
-    foot: { x: -100, y: 1640, w: 1280 },
-    burst: { x: 560, y: 1380 },
-    dots: { x: -180, y: 1300 }
-  },
-  post: {
-    top: { x: 40, y: 34 },
-    caption: { x: 40, y: 192, w: 640, style: "Caption 36" },
-    stage: { x: 330, y: 288, s: 0.78 },
-    band: null,
-    foot: { x: -60, y: 1010, w: 1200 },
-    burst: { x: -160, y: 560 },
-    dots: { x: 820, y: -120 }
-  },
-  wide: {
-    top: { x: 100, y: 90 },
-    caption: { x: 100, y: 270, w: 780, style: "Caption 44" },
-    stage: { x: 960, y: 70, s: 0.94 },
-    side: true,
-    band: null,
-    foot: { x: -60, y: 980, w: 2040 },
-    burst: { x: 520, y: 620 },
-    dots: { x: -160, y: 700 }
-  }
-};
-var cues = [
-  slap("Step plate", 0, { from: 0.3 }),
-  slap("Step seal", beat(0.5)),
-  { layer: "Panel", preset: "rise-in", at: beat(0.5), params: { duration: 700, distance: 260, ease: ease.back(1.3) } },
-  // Step 1 lands: the full bar kicks, the seal rocks and the preview's chip shakes, so the step never sits still.
-  { layer: "Progress", preset: "pulse", at: beat(4.5), params: { duration: 480, amount: 0.12 } },
-  wobble("Step seal", beat(5), { angle: 10 }),
-  { layer: "Preview chip", preset: "shake", at: beat(6), params: { duration: 400, distance: 10 } },
-  { layer: "Upload button", preset: "pulse", at: beat(6.5), params: { duration: 480, amount: 0.1 } },
-  // Step 2: the beat marks drop on, one an eighth of a beat.
-  { layer: "Beat dot", preset: "pop-in", at: STEP[1] + beat(1), stagger: { delay: 120, order: "selection" }, params: { duration: 260, amount: 0.1, ease: ease.back(2.6) } },
-  // Step 3: YUM lands on the preview.
-  slap("Placed sticker", STEP[2] + beat(1.5), { from: 0.2, duration: 420 }),
-  wobble("Placed sticker", STEP[2] + beat(3), { angle: 12 }),
-  // Step 4: the clips pop into the row.
-  slap("Clip thumb", STEP[3] + beat(1), { gap: beat(1), from: 0.2 }),
-  slap("Step list item", 0, { gap: beat(8), from: 0.4 }),
-  { layer: "Export", preset: "pulse", at: STEP[3] + beat(5), params: { duration: 968, amount: 0.08 } },
-  { layer: "Export", preset: "pulse", at: STEP[3] + beat(6), params: { duration: 968, amount: 0.08 } },
-  slap("Side burst", STEP[1] + beat(5), { from: 0.2, duration: 420 }),
-  slap("Side tag", STEP[2] + beat(2)),
-  wobble(["Side burst", "Side tag"], STEP[3], { gap: 80 })
-];
-var counts = [
-  { layer: "Seal figure", at: 0, duration: STEP[3], tick: STEP[1], counter: { from: 1, to: 4 } },
-  { layer: "Upload figure", at: beat(1.5), duration: beat(3), counter: { from: 0, to: 100, suffix: "%" } },
-  { layer: "Beats figure", at: STEP[1] + beat(1), duration: 120 * 48 / 3, tick: 40, counter: { from: 0, to: 48 } },
-  { layer: "Ready figure", at: STEP[3] + beat(1), duration: beat(3), counter: { from: 0, to: FIZZ.seconds, prefix: "Ready in ", suffix: " s" } }
-];
-var swaps = [
-  // The step's name: three words each, every one on its step's downbeat.
-  { layer: "Step words", words: ["DROP IT IN", "FIND THE BEAT", "SLAP A STICKER", "POST THE CLIPS"], at: 0, hold: STEP[1] - 240 - 160 - 4 * 50, stagger: 50, in: 240, out: 160, unit: "word", rise: 30 },
-  captionSwap(["Drop in the whole video.", "Auto-Bop finds all 48 beats.", "Tap a sticker. It lands.", "Three clips ready in 38s."], 0, S.duration - 20, { stagger: 60, in: 220, out: 160, rise: 24 })
-];
-var style_maximal_feature_demo_default = defineTemplate({
-  id: "motion-saas-style-maximal-feature-demo",
-  meta: {
-    name: NAME,
-    description: 'A 15-second feature demo in a maximalist Y2K look: Auto-Bop shown working in four steps on a sticker-bright app panel. A finger taps Upload and the file fills to 100%, taps Auto-Bop and 48 beat marks drop onto the waveform as the count ticks, taps a sticker that slaps onto the clip, and the camera pulls back as three clips pop into the export row and "Ready in 38 s" counts. The step name swaps in chrome on a black plate, captions say each step, marquees run; music cut on every downbeat. 9:16 with square and 16:9 layouts',
-    category: "animation",
-    tags: ["animation", "saas", "maximalist", "y2k", "chrome", "stickers", "creator", "video", "ai", "feature", "demo", "tutorial", "pointer", "zoom", "counter", "captions", "music", "audio", "tiktok", "shorts"],
-    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
-    formats: ["reel", "short", "story", "post", "video"],
-    useCases: ["education", "launch", "tips"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, counts, swaps },
-  build() {
-    const k = new Kit(NAME, preset("ig-story"));
-    k.quantizeGeometry = true;
-    maxBrand(k);
-    for (const [n, sz] of [["Step 68", 68], ["Step 60", 60]]) display(k, n, sz, 1);
-    for (const [n, sz] of [["Caption 44", 44], ["Caption 36", 36]]) display(k, n, sz, 1.05);
-    display(k, "Seal 72", 72, 0.9);
-    display(k, "Panel 30", 30, 1.1);
-    display(k, "Figure 40", 40, 1);
-    display(k, "Chip 34", 34, 1);
-    display(k, "List 30", 30, 1.1);
-    mono(k, "Tag 22", 22);
-    grot(k, "Ui 22", 22, { weight: 700, lead: 1.25 });
-    callComponent(k, { style: "Panel 30", label: "Export", pad: [16, 28], drop: 6, weight: 4 });
-    const sheet = k.sheet;
-    ground(k, sheet, "Feature demo", "paper");
-    k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
-    const L = LAYOUT.story;
-    halftone(k, sheet, 600, "pinkDeep", { name: "Dots", absolute: L.dots });
-    const big = burst(k, sheet, 620, "secondary", { name: "Big burst", points: 26, depth: 0.1, absolute: L.burst });
-    spin(k, big, -1, S.duration);
-    const band = (name, at, fill, rotate, right) => marquee(k, sheet, {
-      name,
-      width: at.w,
-      height: 96,
-      w: 160,
-      fill,
-      loop: S.duration,
-      cells: 16,
-      rotate,
-      right,
-      absolute: { x: at.x, y: at.y },
-      cell: (c) => {
-        spark(k, c, 48, fill === "night" ? "accent" : "night", { name: "Band spark" });
-        k.ellipse(c, 30, fill === "night" ? "primary" : "accent", { name: "Band dot", stroke: { color: "night", width: 3, align: "INSIDE" } });
-      }
-    });
-    band("Top band", L.band, "primary", 3, true);
-    band("Foot band", L.foot, "night", -3, false);
-    const top = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 22, align: "CENTER", name: "Top", absolute: L.top });
-    burstSticker(k, top, [{ text: "1", style: "Seal 72", name: "Seal figure" }, { text: "OF 4", style: "Tag 22" }], { size: 150, fill: "accent", ink: "onAccent", name: "Step seal", points: 26, depth: 0.08, rotate: -8 });
-    const pl = plate(k, top, { name: "Step plate", rotate: -2, pad: [18, 30], width: 680 });
-    chromeText(k, pl, "DROP IT IN", { style: "Step 68", name: "Step words", width: "FILL", size: 68 });
-    const strip = k.stack(sheet, { width: L.caption.w, fill: "primary", radius: 16, padding: { top: 16, right: 26, bottom: 16, left: 26 }, ...stickerEdge(k, 4, 8), name: "Caption strip", absolute: { x: L.caption.x, y: L.caption.y } });
-    k.patch(strip, { rotation: 1.5 });
-    k.text(strip, swaps[1].words[0], { style: L.caption.style, color: "onPrimary", width: "FILL", name: "Caption" });
-    const stage = board(k, sheet, W, H, 1, "Stage", { absolute: { x: L.stage.x, y: L.stage.y } });
-    k.patch(k.node(stage).parentId, { clipsContent: true, name: "Stage view" });
-    const cam = k.frame(stage, { x: 0, y: 0, width: W, height: H }, { name: "Camera" });
-    const panel = k.stack(cam, { width: W, height: H, fill: "card", radius: 34, clip: true, ...stickerEdge(k, 5, 0), name: "Panel", absolute: { x: 0, y: 0 } });
-    k.patch(panel, { effects: [] });
-    const app = k.frame(panel, { x: 0, y: 0, width: W, height: H }, { name: "App" });
-    k.patch(app, { layoutPositioning: "ABSOLUTE" });
-    const box = (name, x, y, w, h, fill, o = {}) => k.stack(app, { width: w, height: h, fill, radius: o.radius ?? 22, padding: o.pad ?? 18, gap: o.gap ?? 10, direction: o.direction ?? "VERTICAL", justify: o.justify ?? "MIN", align: o.align ?? "MIN", ...o.edge === false ? {} : { stroke: { color: "night", width: 3, align: "INSIDE" } }, name, absolute: { x, y } });
-    const bar = box("App bar", 24, 22, W - 48, 64, "night", { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", pad: 12, edge: false, radius: 999 });
-    const lock = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "App lockup" });
-    logoBadge(k, lock, { fill: "secondary", size: 26, pad: 7, radius: 999 });
-    k.text(lock, "{{brand.name}}", { style: "Panel 30", color: "onNight", autoWidth: true, name: "App name" });
-    k.text(bar, FIZZ.feature.toUpperCase(), { style: "Tag 22", color: "onNight", autoWidth: true, name: "App tab" });
-    const prev = k.frame(app, { x: 24, y: 104, width: 300, height: 520 }, { name: "Preview", fill: "secondary", radius: 24, clip: true });
-    k.patch(prev, { layoutPositioning: "ABSOLUTE", strokes: [], effects: [] });
-    halftone(k, prev, 300, "night", { name: "Preview dots", absolute: { x: 120, y: -90 }, step: 18 });
-    cutout(k, prev, 260, 330, { top: "accent", absolute: { x: 20, y: 190 } });
-    sticker(k, prev, "THIS SAUCE", { fill: "card", ink: "onCard", style: "Chip 34", shape: "tag", rotate: -4, pad: [6, 14], name: "Preview chip", absolute: { x: 24, y: 420 } });
-    burstSticker(k, prev, [{ text: "YUM", style: "Chip 34" }], { size: 150, fill: "primary", ink: "onPrimary", name: "Placed sticker", rotate: 10, absolute: { x: 130, y: 40 } });
-    const up = box("Upload card", 344, 104, 508, 164, "chromeHi", { gap: 12 });
-    const upRow = k.stack(up, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Upload row" });
-    k.text(upRow, "sunday-cook-up.mov", { style: "Tag 22", color: "onCard", autoWidth: true, name: "File name" });
-    k.instance(upRow, "Call", { Label: "Upload" }, { name: "Upload button" });
-    const prog = k.stack(up, { direction: "HORIZONTAL", height: 26, fill: k.tint("night", 0.12), radius: 999, clip: true, name: "Progress" });
-    const fillBar = k.rect(prog, 472, 26, "accent", { radius: 999, name: "Progress fill", absolute: { x: 0, y: 0 } });
-    const upFoot = k.stack(up, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Upload foot" });
-    k.text(upFoot, "14:22 \xB7 1.8 GB", { style: "Ui 22", color: "cardMuted", autoWidth: true, name: "File size" });
-    k.text(upFoot, "100%", { style: "Ui 22", color: "onCard", width: 70, align: "RIGHT", name: "Upload figure" });
-    const bc = box("Beat card", 344, 284, 508, 180, "night", { gap: 12, edge: false });
-    const bcRow = k.stack(bc, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Beat row" });
-    sticker(k, bcRow, "AUTO-BOP", { fill: "primary", ink: "onPrimary", style: "Tag 22", pad: [8, 16], name: "Bop button", drop: 0, weight: 3 });
-    const bf = k.stack(bcRow, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Beats" });
-    k.text(bf, "48", { style: "Figure 40", color: "onNight", width: 56, align: "RIGHT", name: "Beats figure" });
-    k.text(bf, "beats", { style: "Ui 22", color: "nightMuted", autoWidth: true, name: "Beats word" });
-    const wave = k.stack(bc, { height: 88, name: "Wave" });
-    const bars = 34, bw = 472 / bars;
-    for (let i = 0; i < bars; i++) {
-      const h = Math.round(18 + 60 * Math.abs(Math.sin(i * 1.3) * Math.cos(i * 0.45)));
-      const b = k.rect(wave, Math.max(4, Math.round(bw - 5)), h, "chromeMid", { radius: 3, name: "Wave bar", absolute: { x: Math.round(i * bw), y: Math.round(44 - h / 2) } });
-      k.patch(b, { anchorY: 0.5 });
-      k.behave(b, "scaleY", [{ kind: "audio", signal: "spectrum", bin: Math.round(i / bars * 100) / 100, gain: 1.2, mode: "multiply", from: 0.55, to: 1.2, attack: 10, release: 160 }]);
-    }
-    for (let i = 0; i < BEATS; i++) k.ellipse(wave, 16, "accent", { name: "Beat dot", absolute: { x: Math.round((i + 0.5) * (472 / BEATS) - 8), y: 0 }, stroke: { color: "chromeHi", width: 2, align: "OUTSIDE" } });
-    const sc = box("Sticker card", 344, 480, 508, 144, "accent", { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", pad: 16 });
-    sticker(k, sc, "OMG", { fill: "secondary", ink: "onSecondary", style: "Chip 34", pad: [8, 14], rotate: -6, drop: 4, weight: 3, name: "Sheet sticker" });
-    burstSticker(k, sc, [{ text: "YUM", style: "Chip 34" }], { size: 112, fill: "primary", ink: "onPrimary", name: "Sheet yum", rotate: 8 });
-    sticker(k, sc, "BOP", { fill: "card", ink: "onCard", style: "Chip 34", pad: [8, 14], rotate: 5, drop: 4, weight: 3, name: "Sheet sticker" });
-    spark(k, sc, 70, "chromeHi", { outline: 3, name: "Sheet spark" });
-    const cr = box("Clips card", 24, 644, 828, 232, "night", { direction: "HORIZONTAL", gap: 16, align: "CENTER", edge: false, pad: 18 });
-    const thumbs = ["secondary", "accent", "primary"];
-    thumbs.forEach((fill, i) => {
-      const t = k.stack(cr, { width: 112, height: 196, fill, radius: 16, clip: true, ...stickerEdge(k, 3, 0), name: "Clip thumb" });
-      k.patch(t, { effects: [] });
-      cutout(k, t, 100, 130, { top: i === 1 ? "secondary" : "accent", skin: i === 2 ? "skinDeep" : "skin", absolute: { x: 6, y: 70 } });
-    });
-    const crR = k.stack(cr, { gap: 14, name: "Clips side" });
-    k.text(crR, "3 clips \xB7 9:16", { style: "Panel 30", color: "onNight", width: "FILL", name: "Clips title" });
-    k.text(crR, `Ready in ${FIZZ.seconds} s`, { style: "Ui 22", color: "onNight", width: "FILL", name: "Ready figure" });
-    k.instance(crR, "Call", { Label: "Export" }, { name: "Export" });
-    const t0 = touch(k, cam, { x: AT.upload.x, y: AT.upload.y, size: 70, fill: "secondary", ring: "secondary" });
-    const list = k.stack(sheet, { gap: 14, width: "HUG", name: "Step list", absolute: { x: 100, y: 420 } });
-    ["1  Drop it in", "2  Find the beat", "3  Slap a sticker", "4  Post the clips"].forEach((s, i) => sticker(k, list, s, { fill: ["card", "secondary", "accent", "primary"][i], ink: ["onCard", "onSecondary", "onAccent", "onPrimary"][i], style: "List 30", shape: "tag", rotate: i % 2 ? 2 : -2, name: "Step list item" }));
-    burstSticker(k, sheet, [{ text: "48", style: "Seal 72" }, { text: "BEATS FOUND", style: "Tag 22" }], { size: 230, fill: "primary", ink: "onPrimary", name: "Side burst", rotate: 8, absolute: { x: 30, y: 1210 } });
-    sticker(k, sheet, `${FIZZ.captionStyles} CAPTION STYLES`, { fill: "secondary", ink: "onSecondary", style: "Tag 22", rotate: -7, name: "Side tag", absolute: { x: 560, y: 1336 } });
-    k.counts(sheet, counts);
-    k.swaps(sheet, swaps);
-    k.cues(sheet, cues);
-    k.patch(fillBar, { anchorX: 0 });
-    k.animate(fillBar, "scaleX", [{ t: beat(1.5), v: 0.02, ease: ease.out("cubic") }, { t: beat(4.5), v: 1 }]);
-    glide(k, t0, [
-      { t: 0, dx: 0, dy: 120 },
-      { t: beat(1), dx: 0, dy: 0 },
-      { t: STEP[1] - beat(1), dx: 0, dy: 0 },
-      { t: STEP[1] + beat(0.5), dx: AT.bop.x - AT.upload.x, dy: AT.bop.y - AT.upload.y },
-      { t: STEP[2] - beat(1), dx: AT.bop.x - AT.upload.x, dy: AT.bop.y - AT.upload.y },
-      { t: STEP[2] + beat(1), dx: AT.yum.x - AT.upload.x, dy: AT.yum.y - AT.upload.y },
-      { t: STEP[3] - beat(1), dx: AT.yum.x - AT.upload.x, dy: AT.yum.y - AT.upload.y },
-      { t: STEP[3] + beat(4.5), dx: AT.export.x - AT.upload.x, dy: AT.export.y - AT.upload.y }
-    ]);
-    clicks(k, t0, [beat(1.2), STEP[1] + beat(0.7), STEP[2] + beat(1.2), STEP[3] + beat(4.8)]);
-    camera(k, cam, W, H, [
-      { t: beat(1), duration: 600, zoom: 1.55, ...AT.uploadCard },
-      { t: STEP[1], duration: 500, zoom: 1.5, ...AT.beatCard },
-      { t: STEP[2], duration: 500, zoom: 1.35, ...AT.stickerCard },
-      { t: STEP[3], duration: 700, zoom: 1.4, ...AT.clips },
-      { t: STEP[3] + beat(4), duration: 700, zoom: 1 }
-    ]);
-    bob(k, k.named(sheet, "Step seal")[0], 0.04);
-    float(k, k.named(sheet, "Dots")[0], 16, 2, S.duration);
-    const lay = (kit, root, l) => {
-      for (const id of kit.named(root, "Top")) kit.patch(id, { x: l.top.x, y: l.top.y });
-      for (const id of kit.named(root, "Caption strip")) kit.patch(id, { x: l.caption.x, y: l.caption.y, width: l.caption.w });
-      restyle(kit, root, "Caption", l.caption.style);
-      reboard(kit, root, "Stage", l.stage.s);
-      for (const id of kit.named(root, "Stage view")) kit.patch(id, { x: l.stage.x, y: l.stage.y });
-      for (const id of kit.named(root, "Foot band")) kit.patch(id, { x: l.foot.x, y: l.foot.y, width: l.foot.w });
-      if (!l.band) hide(kit, root, ["Top band"]);
-      for (const id of kit.named(root, "Big burst")) kit.patch(id, l.burst);
-      for (const id of kit.named(root, "Dots")) kit.patch(id, l.dots);
-      if (!l.side) hide(kit, root, ["Step list"]);
-    };
-    hide(k, sheet, ["Step list", "Side burst", "Side tag"]);
-    k.variants(sheet, [
-      { preset: "ig-post", adjust: (kit, id) => {
-        lay(kit, id, LAYOUT.post);
-        restyle(kit, id, "Step words", "Step 60");
-        for (const s of kit.named(id, "Side burst")) kit.patch(s, { x: 40, y: 400, visible: true });
-        for (const s of kit.named(id, "Side tag")) kit.patch(s, { x: 30, y: 700, visible: true });
-      } },
-      { preset: "video-1080p", adjust: (kit, id) => {
-        lay(kit, id, LAYOUT.wide);
-        for (const s of kit.named(id, "Step list")) kit.patch(s, { visible: true, x: 100, y: 420 });
-        for (const s of kit.named(id, "Side burst")) kit.patch(s, { x: 560, y: 600, visible: true });
-        for (const s of kit.named(id, "Side tag")) kit.patch(s, { x: 470, y: 870, visible: true });
-      } }
-    ]);
-    k.setCover(sheet);
-    return k.finish();
-  }
-});
-
-export {
-  style_maximal_feature_demo_default
-};

package/dist/chunks/chunk-24ODLUVG.js

@@ -1,238 +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 {
-  accountPage,
-  accountPages,
-  appPages,
-  choice,
-  closing,
-  editInPlace,
-  errorLine,
-  eyebrow,
-  pane,
-  panes,
-  recordButton,
-  stat
-} from "./chunk-K5JPN3KA.js";
-import {
-  form,
-  repeats,
-  says,
-  userVariables,
-  visitorCollection
-} from "./chunk-3QTC5C65.js";
-import {
-  field,
-  formStyles,
-  select,
-  submit
-} from "./chunk-BDP4IUZA.js";
-import {
-  buttons
-} from "./chunk-YKXCPYWJ.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/web/daybreak-app.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var cues = [
-  { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 450 } },
-  { layer: "Lead", preset: "rise-in", at: 100, params: { duration: 560 } },
-  { layer: "Art", preset: "rise-in", at: 200, params: { duration: 900 } },
-  { layer: "Body", preset: "rise-in", at: 280, params: { duration: 600 } }
-];
-var FEELINGS = ["Bright", "Steady", "Tired", "Heavy", "Not sure yet"];
-var ENERGY = ["Plenty", "Enough", "Running low"];
-var SAMPLES = [
-  { feeling: "Bright", energy: "Plenty", good_thing: "Coffee on the step before anyone was up.", day: "Fri 2 Oct" },
-  { feeling: "Steady", energy: "Enough", good_thing: "The walk home, in the last of the light.", day: "Thu 1 Oct" },
-  { feeling: "Tired", energy: "Running low", good_thing: "Soup, and an early night.", day: "Wed 30 Sep" }
-];
-var daybreak_app_default = defineTemplate({
-  id: "web-daybreak-app",
-  meta: {
-    name: "Daybreak \u2014 a check-in app with accounts",
-    description: "A working web app, not a mock: visitors create an account and sign in, the app knows them when they come back, and each keeps their own daily check-ins \u2014 added, changed where they are, listed newest first and deleted \u2014 with their streak, their week and their bright mornings worked out from them. A forgotten password is reset by email, and the account page changes the name and password or deletes the account. Publish it with a database and sign-in attached and it runs",
-    category: "web",
-    tags: ["app", "accounts", "sign in", "database", "form", "journal", "check-in", "mood", "dashboard", "website"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["planning", "onboarding"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  breakpoints: true,
-  motion: { cues },
-  build() {
-    const k = new Kit("Daybreak", preset("web-desktop"));
-    k.brand(
-      { paper: "#FFF8EE", text: "#2A1F14", onPaper: "#6E5F50", primary: "#B83A0B", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#2A1F14", cardMuted: "#7D6E5E", field: "#FFFFFF", onField: "#7D6E5E", line: "#EBDCC8", danger: "#B3261E", onDanger: "#FFFFFF" },
-      { name: "Daybreak" }
-    );
-    k.palette({ sun: "#FFC247", dawn: "#FFE3B8", glow: "#FF9F5A", hill: "#E8B48A", far: "#F3CDA8" });
-    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Link 15", { size: 15, fontWeight: 600, lineHeight: 22 });
-    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Eyebrow 13", { size: 13, fontWeight: 700, letterSpacing: 1.4, lineHeight: 18 });
-    k.textStyle("Display 52", { size: 52, fontWeight: 800, letterSpacing: -1.6, lineHeight: 56 });
-    k.textStyle("Title 30", { size: 30, fontWeight: 800, letterSpacing: -0.7, lineHeight: 36 });
-    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 27 });
-    k.textStyle("Card title 17", { size: 17, fontWeight: 700, lineHeight: 24 });
-    k.textStyle("Meta 14", { size: 14, fontWeight: 500, lineHeight: 20 });
-    k.textStyle("Chip 14", { size: 14, fontWeight: 600, lineHeight: 20 });
-    k.textStyle("Error 14", { size: 14, fontWeight: 600, lineHeight: 20 });
-    k.textStyle("Stat 34", { size: 34, fontWeight: 800, letterSpacing: -0.8, lineHeight: 38 });
-    formStyles(k, { thanks: false });
-    buttons(k, { style: "Button 16" });
-    const user = userVariables(k, { name: "Maya", email: "maya@example.com" });
-    const checkins = visitorCollection(k, "Checkins", [
-      { name: "Feeling", type: "OPTION", options: [...FEELINGS] },
-      { name: "Energy", type: "OPTION", options: [...ENERGY] },
-      { name: "Good thing", type: "TEXT" },
-      { name: "Day", type: "DATE" }
-    ], SAMPLES);
-    const app = appPages(k, { brand: "Daybreak", width: 980, cues, gap: 28 });
-    const topBar = (column, right) => {
-      const row2 = k.stack(column, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top bar" });
-      const brand = k.stack(row2, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Brand" });
-      k.ellipse(brand, 26, "sun", { name: "Sun" });
-      k.text(brand, "{{brand.name}}", { style: "Brand 20", color: "text", autoWidth: true, name: "Brand name" });
-      right?.(row2);
-      return brand;
-    };
-    const sunrise = (parent, height = 380) => {
-      const art = k.stack(parent, { width: 420, height, radius: 32, fill: "dawn", clip: true, name: "Sunrise" });
-      k.ellipse(art, 300, "glow", { name: "Glow", absolute: { x: 60, y: height - 250 }, opacity: 0.5 });
-      k.ellipse(art, 170, "sun", { name: "Rising sun", absolute: { x: 125, y: height - 175 } });
-      k.ellipse(art, 260, "far", { name: "Far hill", absolute: { x: 0, y: height - 100 } });
-      k.ellipse(art, 280, "hill", { name: "Near hill", absolute: { x: 140, y: height - 80 } });
-      return art;
-    };
-    const welcome = app.page("Welcome", "/", "signedOut");
-    topBar(welcome.column, (row2) => app.link(k.text(row2, "Sign in", { style: "Link 15", color: "text", autoWidth: true, name: "Sign in link" }), "Sign in"));
-    const hero = panes(k, welcome.column, { gap: 36, align: "CENTER", name: "Hero" });
-    const lead = k.stack(hero, { gap: 18, name: "Lead" });
-    pane(k, lead, 300);
-    eyebrow(k, lead, "A MINUTE EACH MORNING", "Eyebrow 13");
-    k.text(lead, "Notice how the days are going.", { style: "Display 52", color: "text", name: "Headline" });
-    k.text(lead, "Daybreak asks three small questions a day and keeps your answers for you: how the day feels, how much you have in the tank, and one good thing.", { style: "Body 17", color: "onPaper", name: "Lead text" });
-    const ctas = k.stack(lead, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Calls to action" });
-    app.link(k.instance(ctas, "Button", { Label: "Create your account" }, { name: "Create account" }), "Sign up");
-    app.link(k.instance(ctas, "Button quiet", { Label: "I have one" }, { name: "Have account" }), "Sign in");
-    const heroArt = k.stack(hero, { align: "CENTER", name: "Art" });
-    pane(k, heroArt, 300);
-    sunrise(heroArt);
-    const closer = k.stack(welcome.column, { gap: 18, name: "Body" });
-    const points = panes(k, closer, { gap: 14, name: "Points" });
-    for (const [what, why] of [["Yours alone", "Your check-ins are kept for you and shown to nobody else."], ["Under a minute", "Two taps and a sentence. No badges, nothing to keep up with."], ["Looks back with you", "Your mornings in a row, your week, and the bright ones, whenever you want them."]]) {
-      const p = k.stack(points, { gap: 6, fill: "card", radius: 20, stroke: { color: "line", width: 1 }, padding: 22, name: "Point" });
-      pane(k, p, 240);
-      k.text(p, what, { style: "Card title 17", color: "onCard", name: "Point title" });
-      k.text(p, why, { style: "Meta 14", color: "cardMuted", name: "Point body" });
-    }
-    closing(k, app, closer, { title: "How is today going?", style: "Title 30", button: "Start tomorrow morning" });
-    const accounts = accountPages(k, app, {
-      styles: { title: "Title 30", body: "Body 17", meta: "Meta 14", link: "Link 15", error: "Error 14" },
-      top: (column, back) => back(topBar(column)),
-      art: (p) => {
-        k.patch(p, { counterAxisAlignItems: "CENTER" });
-        sunrise(p);
-      },
-      copy: {
-        "Sign up": { title: "Create your account", body: "It takes a name, an email and a password. Nothing else.", button: "Create account", namePlaceholder: "Maya" },
-        "Sign in": { title: "Welcome back", body: "Sign in to see your mornings.", button: "Sign in" }
-      }
-    });
-    const home = app.page("Home", "/home", "signedIn", { width: 760 });
-    topBar(home.column, (row2) => {
-      const who = k.stack(row2, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, fill: "card", stroke: { color: "line", width: 1 }, padding: { top: 6, right: 14, bottom: 6, left: 6 }, name: "Account link" });
-      k.ellipse(who, 24, "sun", { name: "Face" });
-      says(k, k.text(who, "Maya", { style: "Link 15", color: "onCard", autoWidth: true, name: "Account name" }), "name");
-      app.link(who, "Account", "up");
-    });
-    const greeting = k.stack(home.column, { gap: 2, name: "Lead" });
-    k.bindExpression(k.text(greeting, "Friday 2 October", { style: "Meta 14", color: "onPaper", name: "Today" }), "characters", "today()");
-    const line = k.stack(greeting, { direction: "HORIZONTAL", gap: 8, wrap: true, name: "Greeting line" });
-    k.text(line, "Good morning,", { style: "Title 30", color: "text", autoWidth: true, name: "Greeting words" });
-    says(k, k.text(line, "Maya", { style: "Title 30", color: "text", autoWidth: true, name: "Greeting name" }), "name");
-    const stats = panes(k, home.column, { gap: 10, name: "Art" });
-    for (const [label, expression, sample] of [["Mornings in a row", 'streak("Checkins")', "3"], ["This week", 'countSince("Checkins", 6)', "3"], ["Bright ones", 'count("Checkins", "feeling", "Bright")', "1"]]) stat(k, stats, { label, expression, sample, figure: "Stat 34", caption: "Meta 14", min: 160 });
-    const body = k.stack(home.column, { gap: 28, name: "Body" });
-    const today = k.stack(body, { gap: 16, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Check-in card" });
-    k.text(today, "How is today?", { style: "Card title 17", color: "onCard", name: "Check-in title" });
-    const checkIn = k.stack(today, { gap: 16, name: "Check-in form" });
-    choice(k, checkIn, { card: true, label: "It feels", name: "feeling", word: "todayFeeling", options: FEELINGS, style: "Chip 14" });
-    choice(k, checkIn, { card: true, label: "Energy", name: "energy", word: "todayEnergy", options: ENERGY, style: "Chip 14" });
-    field(k, checkIn, { card: true, label: "One good thing", name: "good_thing", placeholder: "Something small is fine", multiline: true, required: true });
-    errorLine(k, checkIn, "Error 14");
-    submit(k, checkIn, "Save today");
-    form(k, checkIn, { collectionId: checkins.id });
-    const answered = k.text(today, "Today is saved. Another thought? Add it too.", { style: "Meta 14", color: "cardMuted", name: "Answered" });
-    k.bindExpression(answered, "visible", 'countSince("Checkins", 0) > 0');
-    k.patch(answered, { visible: false });
-    const history = k.stack(body, { gap: 12, name: "Your mornings" });
-    const head = k.stack(history, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "History head" });
-    k.text(head, "Your mornings", { style: "Card title 17", color: "text", autoWidth: true, name: "History title" });
-    const tally = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 5, align: "MAX", name: "Tally" });
-    k.bindExpression(k.text(tally, "3", { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Tally number" }), "characters", checkins.word);
-    k.text(tally, "kept", { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Tally word" });
-    const empty = k.text(history, "Nothing yet. Your first check-in will show up here.", { style: "Meta 14", color: "onPaper", name: "Empty" });
-    k.bindExpression(empty, "visible", `${checkins.word} == 0`);
-    k.patch(empty, { visible: false });
-    const list = k.stack(history, { gap: 10, name: "Mornings list" });
-    repeats(k, list, checkins.id, { limit: 60 });
-    const row = k.stack(list, { gap: 8, fill: "card", radius: 16, stroke: { color: "line", width: 1 }, padding: 18, name: "Morning" });
-    const view = k.stack(row, { gap: 8, name: "Morning view" });
-    const meta = k.stack(view, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", wrap: true, name: "Morning head" });
-    const when = k.stack(meta, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Morning when" });
-    k.text(when, "{{item.day}}", { style: "Meta 14", color: "cardMuted", autoWidth: true, name: "Morning day" });
-    k.text(when, "{{item.feeling}} \xB7 {{item.energy}}", { style: "Meta 14", color: "onCard", autoWidth: true, name: "Morning feeling" });
-    const actions = k.stack(meta, { direction: "HORIZONTAL", width: "HUG", gap: 2, align: "CENTER", name: "Morning actions" });
-    const edit = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 8, bottom: 4, left: 8 }, name: "Edit" });
-    k.text(edit, "Edit", { style: "Meta 14", color: "cardMuted", autoWidth: true, name: "Edit label" });
-    k.patch(edit, { control: { kind: "BUTTON", buttonType: "button" } });
-    recordButton(k, actions, "Delete", { style: "Meta 14", color: "cardMuted", pad: [4, 8], radius: 8 });
-    k.text(view, "{{item.good_thing}}", { style: "Body 17", color: "onCard", name: "Morning good thing" });
-    editInPlace(k, { word: "editingMorning", view, parent: row, trigger: edit, style: "Meta 14", build: (f) => {
-      const pre = (id, name) => k.patch(id, { control: { ...k.node(id).control, value: `{{item.${name}}}` } });
-      const pair = k.stack(f, { direction: "HORIZONTAL", gap: 12, name: "Edit pair" });
-      pre(select(k, pair, { card: true, label: "It felt", name: "feeling", options: FEELINGS }), "feeling");
-      pre(select(k, pair, { card: true, label: "Energy", name: "energy", options: ENERGY }), "energy");
-      pre(field(k, f, { card: true, label: "One good thing", name: "good_thing", placeholder: "Something small is fine", multiline: true, required: true }), "good_thing");
-    } });
-    const out = accountPage(k, app, {
-      user,
-      home: "Home",
-      back: "Back to today",
-      sample: { name: "Maya", email: "maya@example.com" },
-      styles: { eyebrow: "Eyebrow 13", title: "Title 30", label: "Meta 14", value: "Card title 17", stat: "Stat 34", link: "Link 15", meta: "Meta 14", error: "Error 14", button: "Button 16" },
-      count: { label: "Check-ins kept", word: checkins.word, sample: "3" },
-      top: (column, right) => {
-        topBar(column, right);
-      },
-      art: (p) => {
-        sunrise(p, 300);
-      }
-    });
-    app.finish("Welcome");
-    accounts.leads("Home");
-    out.leads();
-    return k.finish();
-  }
-});
-
-export {
-  daybreak_app_default
-};