@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-WF6S5VC7.js

@@ -0,0 +1,120 @@
+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-MA3BWM6M.js";
+import {
+  feedVariants,
+  logoBadge,
+  outro,
+  pill,
+  verticalPadding
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.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-WF7JH5KH.js

@@ -0,0 +1,190 @@
+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 {
+  cover,
+  eachProject,
+  finishSite,
+  portfolioKit,
+  portfolioSite,
+  toProject,
+  toScreen
+} from "./chunk-472HVEQ3.js";
+import {
+  art
+} from "./chunk-V3XNNJGH.js";
+import {
+  BREAKPOINTS
+} from "./chunk-IPGCJWVL.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/web/portfolio-studio-grid.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ART_STUDIO = art("studio-11");
+var WORK = [
+  { title: "Quicksilver Hour", client: "Mara Vex", year: "2026", kind: "Music video", cover: "studio-00", summary: "A chrome mask that will not keep its shape, for the lead single of Mara Vex\u2019s second record.", story: "Shot as one take on a black stage, then rebuilt in CG frame by frame: the mask melts on the downbeat and finds its face again on the chorus. Rendered at 6K for the label\u2019s vertical and cinema cuts.", credits: "Direction, CG, grade \u2014 Nightjar \xB7 Edit \u2014 Ola Bright" },
+  { title: "Last Train Under", client: "Moth Circuit", year: "2026", kind: "Music video", cover: "studio-01", summary: "A jellyfish drifts through a flooded station while the city above forgets it.", story: "A full CG station built from survey scans of a decommissioned platform, flooded in simulation and lit by the animal alone. Twelve weeks from treatment to delivery.", credits: "Direction, CG \u2014 Nightjar \xB7 Music \u2014 Moth Circuit" },
+  { title: "Point Cloud", client: "Edgelord Skate Co.", year: "2025", kind: "Brand film", cover: "studio-02", summary: "A skate film where the street dissolves into particles under every trick.", story: "Thirty tricks captured with a scanning rig, each landing turned to sixty million points we could sculpt. Released as a two-minute film and a set of loops for the shop floor.", credits: "Direction, capture, CG \u2014 Nightjar \xB7 Skaters \u2014 Edgelord team" },
+  { title: "Kintsugi", client: "Halden Porcelain", year: "2025", kind: "Campaign", cover: "studio-03", summary: "A porcelain face breaks open on a galaxy, mended in gold.", story: "Launch film and stills for a ceramics house\u2019s first sculpture collection. Every crack is a real fracture simulated from the glaze\u2019s own properties.", credits: "Direction, CG \u2014 Nightjar \xB7 Agency \u2014 Fold & Co." },
+  { title: "Swarm Waltz", client: "Ritual Groove", year: "2025", kind: "Music video", cover: "studio-04", summary: "A dancer in red smoke and the iridescent insects that follow every move.", story: "Motion-captured choreography drives four thousand insects, each with its own wingbeat. The smoke is a single fluid simulation, rendered in one pass.", credits: "Direction, CG \u2014 Nightjar \xB7 Choreography \u2014 Ines Ade" },
+  { title: "Monolith", client: "Dune Mile Festival", year: "2024", kind: "Title sequence", cover: "studio-05", summary: "A stone head half sunk in the dunes opens the festival\u2019s week of film.", story: "A ninety-second title sequence and its idents: one head, three sunsets, built so the festival could change the wording every night.", credits: "Direction, CG, type \u2014 Nightjar" },
+  { title: "Breather", client: "Fuzz Theory", year: "2024", kind: "Installation", cover: "studio-06", summary: "A fur sculpture that breathes under ultraviolet light, for a gallery\u2019s long wall.", story: "Eight hours of breathing that never repeats, rendered for a fourteen-metre LED wall and synced to the room\u2019s own sound.", credits: "Concept, CG \u2014 Nightjar \xB7 Sound \u2014 Fuzz Theory" },
+  { title: "Drowned Ballroom", client: "Isola Records", year: "2024", kind: "Music video", cover: "studio-07", summary: "An underwater ballroom where the chandeliers still swing and the koi keep time.", story: "A single camera move through a set modelled from a 1920s hotel, flooded and populated with a school of simulated koi.", credits: "Direction, CG \u2014 Nightjar \xB7 Grade \u2014 Paper Moon" },
+  { title: "Paper Crown", client: "The Kingless", year: "2023", kind: "Album visual", cover: "studio-08", summary: "A burning crown floats over black water for an album about giving power back.", story: "Cover art, a looping visualiser and the tour screens: the crown burns for the full length of the record and never burns out.", credits: "Art direction, CG \u2014 Nightjar" },
+  { title: "Prism Wolf", client: "Northlight Games", year: "2023", kind: "Game trailer", cover: "studio-09", summary: "A wolf made of refracted light, for the reveal of a winter adventure game.", story: "Trailer and key art. The wolf is a refraction shader running on the game\u2019s own creature rig, so the studio could use it in engine.", credits: "Direction, look development \u2014 Nightjar" },
+  { title: "Wax Racer", client: "Velo Audio", year: "2023", kind: "Commercial", cover: "studio-10", summary: "A racing car melts into rainbow wax while the headphones stay perfectly still.", story: "A thirty-second spot and cut-downs: the car is a melting simulation driven by the track\u2019s own frequency bands.", credits: "Direction, CG \u2014 Nightjar \xB7 Agency \u2014 Loudhouse" },
+  { title: "Cable Cathedral", client: "Signal Mass", year: "2022", kind: "Music video", cover: "studio-11", summary: "A cathedral of glowing cables, and the one figure who still prays there.", story: "Our first long-form piece: five minutes in a single space, every cable lit by the music it carries.", credits: "Direction, CG \u2014 Nightjar \xB7 Music \u2014 Signal Mass" }
+];
+var CLIENTS = "Mara Vex \xB7 Moth Circuit \xB7 Edgelord Skate Co. \xB7 Halden Porcelain \xB7 Dune Mile Festival \xB7 Isola Records \xB7 Northlight Games \xB7 Velo Audio \xB7 Signal Mass";
+function tile(s, w, h) {
+  const { k } = s;
+  k.variantSet("Still", "State", ["Rest", "Hover"], { width: w, height: h, clip: true, fill: "paper" }, (state) => {
+    const id = k.componentIdOf(`Still/${state}`);
+    k.patch(cover(s, id, "studio-00", w, h, { name: "Cover" }), { layoutSizingHorizontal: "FILL", layoutSizingVertical: "FILL" });
+    const shade = k.rect(id, w, h, "shade", { name: "Shade", absolute: { x: 0, y: 0 }, opacity: state === "Hover" ? 0.62 : 0 });
+    const caption = k.stack(id, { width: w, height: h, align: "CENTER", justify: "CENTER", padding: 24, name: "Caption", absolute: { x: 0, y: 0 } });
+    k.text(caption, "{{item.title}}", { style: "Still 15", color: "onShade", align: "CENTER", width: "FILL", name: "Still title" });
+    k.patch(caption, { opacity: state === "Hover" ? 1 : 0 });
+    for (const layer of [shade, caption]) k.patch(layer, { constraints: { horizontal: "STRETCH", vertical: "STRETCH" } });
+  });
+  k.changeTo("Still/Rest", "ON_HOVER", "Still/Hover", 180);
+}
+function topBar(s, parent) {
+  const { k } = s;
+  const bar = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 22, right: 32, bottom: 22, left: 32 }, name: "Top bar" });
+  k.text(bar, "LOS ANGELES \u2014 LISBON", { style: "Nav 12", color: "onPaper", autoWidth: true, name: "Where" });
+  toScreen(s, k.text(bar, "{{brand.name}}", { style: "Wordmark 18", color: "text", autoWidth: true, name: "Wordmark" }), "work");
+  const links = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 24, name: "Nav links" });
+  toScreen(s, k.text(links, "WORK", { style: "Nav 12", color: "text", autoWidth: true, name: "Nav link" }), "work");
+  toScreen(s, k.text(links, "STUDIO", { style: "Nav 12", color: "text", autoWidth: true, name: "Nav link" }), "studio");
+  k.patch(k.text(links, "CONTACT", { style: "Nav 12", color: "text", autoWidth: true, name: "Nav link" }), { semantics: { link: { kind: "email", value: "{{brand.email}}" } } });
+  return bar;
+}
+function footer(k, parent, name = "Footer") {
+  const foot = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 28, right: 32, bottom: 32, left: 32 }, name });
+  k.text(foot, "{{brand.email}}", { style: "Nav 12", color: "text", autoWidth: true, name: "Email" });
+  k.text(foot, "INSTAGRAM \xB7 VIMEO \xB7 ARE.NA", { style: "Nav 12", color: "onPaper", autoWidth: true, name: "Elsewhere" });
+  k.text(foot, "\xA9 2026 {{brand.name}}", { style: "Nav 12", color: "onPaper", autoWidth: true, name: "Copyright" });
+}
+var portfolio_studio_grid_default = defineTemplate({
+  id: "web-portfolio-studio-grid",
+  meta: {
+    name: "Studio wall portfolio",
+    description: "A motion and CGI studio\u2019s site: a full-bleed wall of stills four across on black, a title on each as you point at it, a page per project with the picture large, the story and the credits, and a studio page. The projects are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "studio", "motion design", "cgi", "music video", "grid", "dark", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build() {
+    const k = portfolioKit("Studio wall");
+    k.brand(
+      { paper: "#000000", text: "#F2F2F2", onPaper: "#8A8A8A", primary: "#F2F2F2", onPrimary: "#000000", line: "#262626" },
+      { name: "NIGHTJAR", email: "studio@nightjar.film" }
+    );
+    k.palette({ shade: "#000000", onShade: "#FFFFFF" });
+    k.textStyle("Wordmark 18", { size: 18, fontWeight: 700, letterSpacing: 6, lineHeight: 24 });
+    k.textStyle("Nav 12", { size: 12, fontWeight: 500, letterSpacing: 1.6, lineHeight: 16 });
+    k.textStyle("Still 15", { size: 15, fontWeight: 600, letterSpacing: 2.4, lineHeight: 20 });
+    k.textStyle("Lead 15", { size: 15, fontWeight: 400, letterSpacing: 0.2, lineHeight: 24 });
+    k.textStyle("Title 44", { size: 44, fontWeight: 600, letterSpacing: 6, lineHeight: 52 });
+    k.textStyle("Title 28", { size: 28, fontWeight: 600, letterSpacing: 3, lineHeight: 36 });
+    k.textStyle("Meta 13", { size: 13, fontWeight: 500, letterSpacing: 1.6, lineHeight: 18 });
+    k.textStyle("Story 18", { size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Story 16", { size: 16, fontWeight: 400, lineHeight: 26 });
+    const s = portfolioSite(k, { name: "Nightjar", projects: WORK });
+    const TILE = 1440 / 4, TILE_H = Math.round(TILE * 2 / 3);
+    tile(s, TILE, TILE_H);
+    const work = s.screens.work;
+    topBar(s, work);
+    const lead = k.stack(work, { align: "CENTER", padding: { top: 4, right: 32, bottom: 28, left: 32 }, name: "Lead" });
+    k.text(lead, "Motion, CGI and film for music, games and brands.", { style: "Lead 15", color: "onPaper", align: "CENTER", width: "FILL", name: "Tagline" });
+    const wall = k.stack(work, { gap: 0, width: "FILL", name: "Art" });
+    k.patch(wall, { layoutMode: "GRID", layoutGridColumns: 4, counterAxisSpacing: 0 });
+    eachProject(s, wall);
+    const first = k.instance(wall, "Still", {}, { name: "Still" });
+    k.patch(first, { layoutSizingHorizontal: "FILL" });
+    toProject(s, first);
+    footer(k, work, "Body");
+    const project = s.screens.project;
+    topBar(s, project);
+    const head = k.stack(project, { gap: 14, align: "CENTER", padding: { top: 72, right: 120, bottom: 48, left: 120 }, name: "Lead" });
+    k.text(head, "{{item.title}}", { style: "Title 44", color: "text", align: "CENTER", width: "FILL", name: "Project title" });
+    k.text(head, "{{item.client}} \u2014 {{item.kind}} \u2014 {{item.year}}", { style: "Meta 13", color: "onPaper", align: "CENTER", width: "FILL", name: "Project meta" });
+    const still = k.stack(project, { align: "CENTER", padding: { top: 0, right: 120, bottom: 0, left: 120 }, name: "Art" });
+    k.patch(cover(s, still, "studio-00", 1200, 800, { name: "Project still" }), { layoutSizingHorizontal: "FILL" });
+    const body = k.stack(project, { gap: 56, padding: { top: 56, right: 120, bottom: 0, left: 120 }, name: "Body" });
+    const words = k.stack(body, { gap: 20, align: "CENTER", name: "Words" });
+    k.text(words, "{{item.story}}", { style: "Story 18", color: "text", align: "CENTER", width: 760, name: "Story" });
+    k.text(words, "{{item.credits}}", { style: "Meta 13", color: "onPaper", align: "CENTER", width: 760, name: "Credits" });
+    const moreHead = k.stack(body, { gap: 18, name: "More work" });
+    k.text(moreHead, "MORE WORK", { style: "Meta 13", color: "onPaper", align: "CENTER", width: "FILL", name: "More title" });
+    const more = k.stack(moreHead, { gap: 0, width: "FILL", name: "More row" });
+    k.patch(more, { layoutMode: "GRID", layoutGridColumns: 4, counterAxisSpacing: 0 });
+    eachProject(s, more, 4);
+    const next = k.instance(more, "Still", {}, { name: "More still" });
+    k.patch(next, { height: 200, layoutSizingHorizontal: "FILL" });
+    toProject(s, next);
+    footer(k, project);
+    const studio = s.screens.studio;
+    topBar(s, studio);
+    const about = k.stack(studio, { gap: 28, align: "CENTER", padding: { top: 120, right: 120, bottom: 64, left: 120 }, name: "Lead" });
+    k.text(about, "WE MAKE PICTURES THAT MOVE PEOPLE", { style: "Title 44", color: "text", align: "CENTER", width: "FILL", name: "Studio title" });
+    k.text(about, "Nightjar is a studio of nine directors, CG artists and editors in Los Angeles and Lisbon. We take a song, a game or a brand from the first treatment to the last frame of the grade, and we keep every project small enough to care about each shot.", { style: "Story 18", color: "text", align: "CENTER", width: 820, name: "Studio text" });
+    const pic = k.stack(studio, { align: "CENTER", padding: { top: 0, right: 120, bottom: 0, left: 120 }, name: "Art" });
+    k.patch(k.image(pic, ART_STUDIO, 1200, 600, { name: "Studio still" }), { layoutSizingHorizontal: "FILL" });
+    const sbody = k.stack(studio, { gap: 18, align: "CENTER", padding: { top: 64, right: 120, bottom: 0, left: 120 }, name: "Body" });
+    k.text(sbody, "CLIENTS", { style: "Meta 13", color: "onPaper", align: "CENTER", width: "FILL", name: "Clients title" });
+    k.text(sbody, CLIENTS, { style: "Story 16", color: "text", align: "CENTER", width: 820, name: "Clients" });
+    k.text(sbody, "New work: {{brand.email}}", { style: "Title 28", color: "text", align: "CENTER", width: "FILL", name: "Contact" });
+    footer(k, studio);
+    const across = { desktop: 4, laptop: 4, tablet: 2, mobile: 1 };
+    finishSite(s, {
+      all: {
+        restyle: { "Title 44": { tablet: "Title 28", mobile: "Title 28" }, "Story 18": { mobile: "Story 16" } },
+        hide: { mobile: ["Where"] },
+        tweak: (kit, id, size) => {
+          const w = kit.node(id).width, side = BREAKPOINTS[size].side;
+          const th = Math.round(Math.floor(w / across[size]) * 2 / 3);
+          for (const g of kit.named(id, "Art")) if (kit.node(g).layoutMode === "GRID") kit.patch(g, { layoutGridColumns: across[size] });
+          for (const t of kit.named(id, "Still")) kit.patch(t, { height: th });
+          const mw = Math.floor((w - side * 2) / (size === "mobile" ? 2 : 4));
+          for (const g of kit.named(id, "More row")) kit.patch(g, { layoutGridColumns: size === "mobile" ? 2 : 4 });
+          for (const t of kit.named(id, "More still")) kit.patch(t, { height: Math.round(mw * 2 / 3) });
+          for (const p of kit.named(id, "Project still")) kit.patch(p, { height: Math.round((w - side * 2) * 2 / 3) });
+          for (const p of kit.named(id, "Studio still")) kit.patch(p, { height: Math.round((w - side * 2) / 2) });
+          for (const name of ["Lead", "Art", "Body", "Words"]) for (const b of kit.named(id, name)) {
+            const f = kit.node(b);
+            if (f.type === "FRAME" && f.padding?.left === 120) kit.patch(b, { padding: { ...f.padding, right: side, left: side } });
+          }
+          for (const t of [...kit.named(id, "Story"), ...kit.named(id, "Credits"), ...kit.named(id, "Studio text"), ...kit.named(id, "Clients")]) if (size !== "laptop") kit.patch(t, { layoutSizingHorizontal: "FILL" });
+          if (size === "mobile") for (const l of kit.named(id, "Nav links")) kit.patch(l, { itemSpacing: 14 });
+          if (size === "mobile") for (const b of [...kit.named(id, "Top bar"), ...kit.named(id, "Footer"), ...kit.named(id, "Body")]) {
+            const f = kit.node(b);
+            if (f.padding?.left === 32) kit.patch(b, { padding: { ...f.padding, right: 20, left: 20 } });
+          }
+          if (size === "mobile") {
+            for (const b of [...kit.named(id, "Footer"), ...kit.named(id, "Body")]) if (kit.node(b).padding?.left === 20) kit.patch(b, { layoutMode: "VERTICAL", itemSpacing: 8, counterAxisAlignItems: "MIN" });
+          }
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  portfolio_studio_grid_default
+};

package/dist/chunks/chunk-WGPDOKZD.js

@@ -0,0 +1,155 @@
+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 {
+  growStems,
+  solarpunkBrand,
+  town
+} from "./chunk-TZ7JXYTG.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  hide,
+  place
+} from "./chunk-T3XFQJUI.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/solarpunk-impact-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var TOWN = {
+  w: 1080,
+  h: 1080,
+  base: 860,
+  bed: 936,
+  u: 0.8,
+  loopMs: DURATION,
+  seed: 14,
+  deep: 1e3,
+  sun: { x: 800, y: 640, size: 300 },
+  birdInk: "onPaper",
+  dawn: 250,
+  far: { from: 690, to: 1080 },
+  clouds: [{ x: 930, y: 140, w: 240 }, { x: 1010, y: 430, w: 150 }],
+  birds: [{ x: 840, y: 90, size: 13 }, { x: 880, y: 70, size: 10 }, { x: 800, y: 60, size: 9 }],
+  // No blade sweeps over the ledger: each turbine stands clear of the words by more than its blades' length.
+  turbines: [{ x: 790, h: 290 }, { x: 990, h: 380 }, { x: 420, h: 170 }],
+  blocks: [
+    { x: 880, w: 160, h: 330, kind: "garden", vine: true },
+    { x: 625, w: 150, h: 230, kind: "terrace" },
+    { x: 1e3, w: 150, h: 250, kind: "terrace" },
+    { x: 720, w: 180, h: 250, kind: "solar" },
+    { x: -30, w: 180, h: 110, kind: "dome" },
+    { x: 130, w: 170, h: 130, kind: "solar" },
+    { x: 290, w: 150, h: 120, kind: "garden" },
+    { x: 430, w: 180, h: 150, kind: "dome" }
+  ],
+  // The chart: one tall vine out of the meadow, in front of the town and the sun.
+  vines: [{ x: 700, y: 900, height: 600, sway: 44, lean: 190, curl: 1, leaves: 11, leaf: 76, weight: 9, bloom: true }],
+  fronds: [{ x: 1030, y: 1170, size: 230, lean: -0.3 }, { x: 800, y: 1230, size: 190, lean: 0.1 }, { x: 250, y: 1400, size: 240, lean: 0.2 }, { x: 560, y: 1500, size: 230 }]
+};
+var counts = [
+  { layer: "Figure", at: 300, duration: 2800, counter: { from: 0, to: 41280, separator: "," } },
+  { layer: "Carbon", at: 1100, duration: 2e3, counter: { from: 0, to: 17.6, decimals: 1, suffix: " t" } },
+  { layer: "Roofs", at: 1400, duration: 2e3, counter: { from: 0, to: 312 } }
+];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Figure", preset: "fade-in", at: 200, params: { duration: 500 } },
+  { layer: "Unit", preset: "rise-in", at: 600, params: { duration: 700 } },
+  { layer: "Entry", preset: "rise-in", at: 1e3, params: { duration: 700 }, stagger: { delay: 300 } },
+  { layer: "Leaf", preset: "scale-in", at: 900, params: { duration: 500 }, stagger: { delay: 110 } },
+  { layer: "Bloom", preset: "pop-in", at: 3100, params: { duration: 500 }, stagger: { delay: 250 } },
+  { layer: "Source", preset: "fade-in", at: 2400, params: { duration: 600 } },
+  { layer: "Figure", preset: "pulse", at: 3100, params: { duration: 700, amount: 0.04 } },
+  // The plant goes back into the ground, so the loop grows it again.
+  { layer: "Bloom", preset: "pop-out", at: 7100, params: { duration: 300 }, stagger: { delay: 60 } },
+  { layer: "Leaf", preset: "pop-out", at: 7200, params: { duration: 350, amount: 0 }, stagger: { delay: 14 } },
+  outro(["Eyebrow", "Figure", "Unit", "Entry", "Source"], 7300)
+];
+var solarpunk_impact_post_default = defineTemplate({
+  id: "motion-solarpunk-impact-post",
+  meta: {
+    name: "Solarpunk impact report post (animated)",
+    description: "A quarter\u2019s impact report as one post: the kilowatt-hours not bought count up in a big italic serif, two more figures count in a ruled ledger, and the chart is a plant \u2014 a vine draws itself up in front of a rising sun, unfurls leaf by leaf and flowers as the count lands, over a rooftop town of gardens, glasshouses and turbines. An eight-second loop, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "solarpunk", "botanical", "art nouveau", "impact report", "counter", "stats", "climate", "energy", "sustainability", "vines", "saas", "post", "loop"],
+    platforms: ["instagram", "linkedin", "x", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["stats", "report", "milestone"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Solarpunk impact report post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    solarpunkBrand(k);
+    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 700, letterSpacing: 4.5, lineHeight: 32, textCase: "UPPER" });
+    k.textStyle("Figure 220", { ...SERIF, size: 220, fontWeight: 700, fontStyle: "italic", letterSpacing: -9, lineHeight: 210 });
+    k.textStyle("Unit 38", { ...SERIF, size: 38, fontWeight: 600, letterSpacing: -0.6, lineHeight: 46 });
+    k.textStyle("Entry figure 44", { ...MONO, size: 44, fontWeight: 700, letterSpacing: -1.5, lineHeight: 52 });
+    k.textStyle("Entry 26", { size: 26, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("Source 24", { size: 24, fontWeight: 700, lineHeight: 32 });
+    pill(k, "Source pill", { fill: "accent", ink: "onAccent", style: "Source 24", label: "Read it meter by meter: trellis.example/impact", pad: [12, 26] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    town(k, sheet, TOWN);
+    const top = k.stack(sheet, { gap: 14, width: 640, name: "Top" });
+    k.text(top, "{{brand.name}} \xB7 Impact report, Q3 2026", { style: "Eyebrow 24", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "41,280", { style: "Figure 220", color: "text", name: "Figure" });
+    k.text(top, "kilowatt-hours our customers did not buy this quarter.", { style: "Unit 38", color: "text", width: 560, name: "Unit" });
+    const ledger = k.stack(top, { gap: 0, width: 580, padding: { top: 14, right: 0, bottom: 0, left: 0 }, name: "Ledger" });
+    for (const [name, figure, what] of [["Carbon", "17.6 t", "of carbon kept out of the air"], ["Roofs", "312", "roofs now growing something"]]) {
+      const entry = k.stack(ledger, { gap: 0, name: "Entry" });
+      k.rect(entry, "FILL", 2, "accent", { name: "Rule" });
+      const row = k.stack(entry, { direction: "HORIZONTAL", gap: 20, align: "CENTER", padding: { top: 10, right: 0, bottom: 10, left: 0 }, name: "Entry row" });
+      const cell = k.stack(row, { width: 170, name: "Entry figure" });
+      k.text(cell, figure, { style: "Entry figure 44", color: "text", name });
+      k.text(row, what, { style: "Entry 26", color: "onPaper", name: "Entry text" });
+    }
+    k.instance(sheet, "Source pill", { Label: "Read it meter by meter: {{brand.site}}/impact" }, { name: "Source" });
+    for (const s of k.named(sheet, "Sun")) k.animate(s, "translateY", [{ t: 0, v: 200, ease: ease.out("cubic") }, { t: 3400, v: 0 }]);
+    growStems(k, sheet, 300, 2800, 0, { at: 7300, duration: 600 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => place(kit, id, "Town", 0, 270, 1),
+      // The story's figure stands where the birds would fly.
+      vertical: (kit, id) => {
+        place(kit, id, "Town", -108, 340, 1.1);
+        hide(kit, id, ["Birds"]);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  solarpunk_impact_post_default
+};

package/dist/chunks/chunk-WHNRDYVO.js

@@ -0,0 +1,51 @@
+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 {
+  slideshow
+} from "./chunk-IL2S66DR.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/slideshow/lease.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-listing",
+  song: "openRoad",
+  voice: "mono",
+  meta: {
+    name: "Listing tour slideshow (office to let)",
+    description: "A clean listing tour for a property to let: a title with the address, the neighbourhood, then each room with its size and selling line, chapters for the shared spaces and the private ones, slow drifts, pushes and slides, and a closing card with the viewing details. Cut to an easy acoustic track (made by PopCraft, CC0). Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "real estate", "property", "listing", "tour", "office", "to let", "commercial", "photo", "music", "video"],
+    platforms: ["youtube", "instagram", "linkedin", "facebook"],
+    formats: ["video", "reel", "post", "ad"],
+    useCases: ["sale", "announcement"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  brand: { paper: "#E6E6E2", onPaper: "#1C1F22", accent: "#2F6F62", shade: "#111416", onPhoto: "#FFFFFF", leak: "#FFE2B0" },
+  fields: { names: "Floor 3, 41 Mercer Yard", date: "To let \xB7 2,400 sq ft \xB7 viewings by appointment" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "lease-00", kicker: "Now available", beats: 8, move: "in" },
+    { kind: "photo", name: "The neighbourhood", photo: "lease-05", caption: "Two minutes from the tram, ten from the river", beats: 6, move: "right", into: "push" },
+    { kind: "chapter", name: "Chapter 1", kicker: "Shared", title: "The commons", beats: 4 },
+    { kind: "photo", name: "Lounge", photo: "lease-06", caption: "A lounge for the whole floor", place: "620 sq ft", beats: 6, move: "left" },
+    { kind: "photo", name: "Reception", photo: "lease-04", layout: "matted", caption: "Reception and post room", beats: 6, move: "in", into: "push" },
+    { kind: "dip", name: "Dip 1", to: "paper", beats: 1 },
+    { kind: "chapter", name: "Chapter 2", kicker: "Private", title: "The rooms", beats: 4 },
+    { kind: "photo", name: "Boardroom", photo: "lease-03", caption: "Boardroom for fourteen", place: "Daylight on three sides", beats: 6, move: "in", into: "slide" },
+    { kind: "photo", name: "Meeting room", photo: "lease-01", layout: "matted", caption: "A quiet room for calls", beats: 6, move: "right" },
+    { kind: "photo", name: "Studio", photo: "lease-02", caption: "Open studio, original sash windows", beats: 8, move: "in", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "Book a viewing" }
+  ]
+};
+var lease_default = slideshow(story);
+
+export {
+  story,
+  lease_default
+};

package/dist/chunks/chunk-WHQO7GY6.js

@@ -0,0 +1,88 @@
+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 {
+  outro,
+  pill,
+  postVariants,
+  resizePhoto
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/post-podcast.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WAVE = [28, 52, 40, 76, 60, 96, 72, 120, 88, 64, 104, 80, 56, 92, 68, 44, 84, 60, 36, 52];
+var CONTENT = ["Guest photo", "Show", "Episode", "Title", "Guest", "Wave", "Listen"];
+var cues = [
+  { layer: "Guest photo", preset: "scale-in", at: 100, params: { duration: 700, amount: 0.6 } },
+  { layer: ["Show", "Episode", "Title", "Guest"], preset: "rise-in", at: 300, stagger: { delay: 120 } },
+  { layer: "Wave", preset: "fade-in", at: 900 },
+  { layer: "Bar", preset: "pulse", at: 1100, params: { amount: 0.35, duration: 700 }, stagger: { delay: 60 } },
+  { layer: "Bar", preset: "pulse", at: 3600, params: { amount: 0.25, duration: 700 }, stagger: { delay: 60 } },
+  { layer: "Listen", preset: "slide-in", at: 1400, params: { direction: "left", distance: 80 } },
+  outro(CONTENT, 6800)
+];
+var post_podcast_default = defineTemplate({
+  id: "motion-social-podcast",
+  meta: {
+    name: "Podcast episode post (animated)",
+    description: "The podcast episode post in motion: the guest photo scales in, the show, episode and title rise, and the waveform swells bar by bar like a level meter \u2014 eight seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "podcast", "episode", "audio", "waveform", "instagram", "post", "photo"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["podcast", "interview"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Podcast episode post (animated)", preset("ig-post"));
+    k.brand(
+      { paper: "#1A1033", text: "#FFFFFF", onPaper: "#C9BFE6", primary: "#FF5C8A", onPrimary: "#1A1033", muted: "#3A2A66" },
+      { show: "Small Batch", title: "How a two-person studio ships a game every year", guest: "with Lena Park, co-founder of Tinfoil Games" }
+    );
+    k.textStyle("Show 30", { size: 30, fontWeight: 800, letterSpacing: 2, lineHeight: 36 });
+    k.textStyle("Title 60", { size: 60, fontWeight: 800, letterSpacing: -1.5, lineHeight: 66 });
+    k.textStyle("Guest 32", { size: 32, fontWeight: 500, lineHeight: 40 });
+    k.textStyle("Tag 24", { size: 24, fontWeight: 800, letterSpacing: 2, lineHeight: 28 });
+    k.textStyle("Listen 26", { size: 26, fontWeight: 600, lineHeight: 32 });
+    pill(k, "Episode tag", { fill: "primary", ink: "onPrimary", style: "Tag 24", label: "EP. 48", pad: [8, 18] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 28, 80, "paper", "CENTER", "MIN");
+    k.timeline(sheet, { duration: 8e3, fps: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", gap: 36, align: "CENTER", name: "Top" });
+    k.photo(top, 240, 240, { radius: 120, ground: "muted", name: "Guest photo" });
+    const info = k.stack(top, { gap: 14, name: "Info" });
+    k.text(info, "{{brand.show}}", { style: "Show 30", color: "onPaper", name: "Show" });
+    k.instance(info, "Episode tag", { Label: "EP. 48" }, { name: "Episode" });
+    k.text(sheet, "{{brand.title}}", { style: "Title 60", color: "text", name: "Title" });
+    k.text(sheet, "{{brand.guest}}", { style: "Guest 32", color: "onPaper", name: "Guest" });
+    const wave = k.stack(sheet, { direction: "HORIZONTAL", height: 140, gap: 14, align: "CENTER", name: "Wave" });
+    for (const h of WAVE) k.rect(wave, 22, h, "primary", { radius: 11, name: "Bar" });
+    k.text(sheet, "Listen on Spotify, Apple Podcasts and YouTube", { style: "Listen 26", color: "onPaper", name: "Listen" });
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 88 }, {
+      vertical: (kit, id) => {
+        for (const p of kit.named(id, "Guest photo")) resizePhoto(kit, p, 200, 200);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  post_podcast_default
+};