@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-6GMHLK2Q.js

@@ -0,0 +1,80 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  bar,
+  bob,
+  card,
+  saasUi
+} from "./chunk-X4HN5LP7.js";
+import {
+  E,
+  arc,
+  sparkle
+} from "./chunk-SRSUY2WG.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/lottie/saas-ui-empty-search.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var saas_ui_empty_search_default = saasUi({
+  slug: "empty-search",
+  role: "empty-state",
+  size: "spot",
+  duration: 4e3,
+  loop: true,
+  title: "empty state: no search results",
+  description: "The empty state for a search that found nothing: a magnifier sweeps down the faded result rows, each dimming as the lens passes, and its question mark tilts as it comes back empty \u2014 a four-second seamless loop, 800\xD7600",
+  tags: ["empty state", "search", "no results", "not found", "illustration"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 258, "soft", { name: "Backdrop" });
+    const floor = l.rect(l.sheet, 220, 522, 360, 20, "accent", { radius: 10, name: "Floor shadow", opacity: 0.16 });
+    l.keys(floor, "scaleX", [[0, 1, E.inOut], [2e3, 0.92, E.inOut], [4e3, 1]]);
+    const c = card(l, l.sheet, 150, 104, 400, 380, "Results");
+    l.rect(c, 24, 24, 352, 56, "paper", { radius: 28, name: "Search field", stroke: { color: "line", width: 2 } });
+    l.ring(c, 56, 50, 10, "mute", 4, { name: "Field icon" });
+    l.line(c, [[64, 58], [71, 65]], "mute", 4, { name: "Field icon handle" });
+    bar(l, c, 88, 43, 132, 14, "ink", { name: "Query" });
+    l.rect(c, 296, 38, 64, 28, "soft", { radius: 14, name: "Result count" });
+    bar(l, c, 312, 47, 32, 10, "accent", { name: "Result count value" });
+    const caret = l.rect(c, 228, 38, 4, 24, "accent", { radius: 2, name: "Caret" });
+    l.opacity(caret, [[0, 1, E.hold], [500, 0, E.hold], [1e3, 1, E.hold], [1500, 0, E.hold], [2e3, 1, E.hold], [2500, 0, E.hold], [3e3, 1, E.hold], [3500, 0, E.hold], [4e3, 1]]);
+    for (let i = 0; i < 3; i++) {
+      const row = l.box(c, 24, 104 + i * 88, 352, 72, "Ghost result");
+      l.rect(row, 0, 0, 352, 72, "paper", { radius: 18, name: "Row ground" });
+      l.rect(row, 14, 14, 44, 44, "line", { radius: 14, name: "Row icon" });
+      bar(l, row, 74, 20, [176, 208, 150][i], 14, "line", { name: "Row title" });
+      bar(l, row, 74, 42, [112, 92, 128][i], 10, "line", { name: "Row detail" });
+      const t = 350 + i * 420;
+      l.opacity(row, [[0, 1, E.hold], [t, 1, E.inOut], [t + 380, 0.35, E.inOut], [t + 1500, 1, E.hold], [4e3, 1]]);
+    }
+    const lens = l.box(l.sheet, 420, 150, 260, 260, "Magnifier");
+    l.circle(lens, 106, 116, 92, "ink", { name: "Lens shadow", opacity: 0.1 });
+    l.line(lens, [[150, 150], [222, 222]], "ink", 30, { name: "Handle" });
+    l.line(lens, [[196, 196], [222, 222]], "accent", 30, { name: "Grip" });
+    l.circle(lens, 100, 100, 84, "white", { name: "Glass", opacity: 0.82 });
+    l.ring(lens, 100, 100, 84, "ink", 18, { name: "Rim" });
+    l.line(lens, arc(100, 100, 60, -70, -20), "line", 8, { name: "Glint" });
+    const mark = l.box(lens, 60, 52, 80, 100, "Nothing found");
+    l.line(mark, [...arc(40, 30, 20, -90, 140), { x: 40, y: 64 }], "accent", 12, { name: "Question hook" });
+    l.circle(mark, 40, 86, 8, "accent", { name: "Question dot" });
+    l.keys(lens, "translateX", [[0, 0, E.inOut], [1700, -150, E.hold], [2300, -150, E.inOut], [3700, 0, E.hold], [4e3, 0]]);
+    l.keys(lens, "translateY", [[0, 0, E.inOut], [1700, 150, E.hold], [2300, 150, E.inOut], [3700, 0, E.hold], [4e3, 0]]);
+    l.keys(lens, "rotation", [[0, 0, E.inOut], [850, -9, E.inOut], [1700, 0, E.inOut], [2e3, 5, E.inOut], [2300, 0, E.inOut], [3e3, 8, E.inOut], [3700, 0, E.hold], [4e3, 0]]);
+    l.keys(mark, "rotation", [[0, 0, E.hold], [1700, 0, E.out], [1850, -16, E.inOut], [2050, 12, E.inOut], [2300, 0, E.hold], [3700, 0, E.out], [3800, -8, E.inOut], [4e3, 0]]);
+    l.scale(mark, [[0, 1, E.hold], [1700, 1, E.pop], [1900, 1.16, E.inOut], [2300, 1, E.hold], [4e3, 1]]);
+    const star = l.shape(l.sheet, sparkle(148, 150, 18), "gold", { name: "Sparkle" });
+    l.scale(star, [[0, 1, E.inOut], [2e3, 0.55, E.inOut], [4e3, 1]]);
+    bob(l, l.ring(l.sheet, 668, 468, 15, "accent", 6, { name: "Loop", opacity: 0.5 }), 12, 150);
+    bob(l, l.circle(l.sheet, 112, 356, 10, "success", { name: "Dot" }), 10, -250);
+    bob(l, l.circle(l.sheet, 690, 128, 8, "accent", { name: "Dot", opacity: 0.6 }), 8, 300);
+  }
+});
+
+export {
+  saas_ui_empty_search_default
+};

package/dist/chunks/chunk-6HG4LBLO.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 {
+  BLUE_HOUR
+} from "./chunk-L4SKFLWD.js";
+import {
+  emailHeader
+} from "./chunk-4URHIHLG.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/festival-presale-jazz-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_jazz_header_default = emailHeader(BLUE_HOUR);
+
+export {
+  festival_presale_jazz_header_default
+};

package/dist/chunks/chunk-6IL7LJLA.js

@@ -0,0 +1,136 @@
+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 {
+  branch,
+  cloudCurl,
+  coin,
+  disc,
+  doubleRule,
+  draw,
+  flourishComponent,
+  plum,
+  redLantern
+} from "./chunk-YAIUTBXU.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  blurred
+} from "./chunk-M6VTXO6F.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/print/holidays-lunar-new-year-banquet-menu.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Lunar New Year banquet menu";
+var PAD = { top: 212, right: 60, bottom: 92, left: 60 };
+var DISHES = [
+  ["Prosperity salad, tossed at the table", "Lo hei: toss it high for a good year"],
+  ["Crystal prawn and chive dumplings", "Shaped like silver ingots, for wealth"],
+  ["Golden spring rolls", "Bars of gold"],
+  ["Whole steamed sea bass, ginger and scallion", "Plenty, with some to spare"],
+  ["Braised e-fu longevity noodles", "Long noodles for long life: no cutting"],
+  ["Soy-glazed duck with lotus leaf rice", "A table that stays together"],
+  ["Stir-fried greens with garlic", "A fresh start"],
+  ["Sesame tangyuan in ginger syrup, and nian gao", "Reunion, and rising higher every year"]
+];
+function art(w, h) {
+  const s = w / 559, B = 12 * s;
+  const l1 = redLantern(92 * s, -B, 118 * s, 48 * s), l2 = redLantern(w - 92 * s, -B, 96 * s, 28 * s);
+  const br = branch([{ x: w + B, y: 168 * s }, { x: w - 120 * s, y: 150 * s }, { x: w - 230 * s, y: 172 * s }, { x: w - 330 * s, y: 154 * s }], 6, 5, 50 * s);
+  const blossoms = br.ends.slice(0, 9).map((p, i) => plum(p.x, p.y, (i % 3 ? 10 : 14) * s, i));
+  const cloudL = cloudCurl(24 * s, h - 44 * s, 130 * s, 1), cloudR = cloudCurl(w - 24 * s, h - 40 * s, 116 * s, -1);
+  const coins = [coin(w / 2 - 36 * s, h - 40 * s, 12 * s), coin(w / 2, h - 44 * s, 14 * s), coin(w / 2 + 36 * s, h - 40 * s, 12 * s)];
+  const lanterns = [l1, l2];
+  return [
+    { name: "Frame", paths: doubleRule(w, h, 18 * s, 6 * s), color: "gold", o: { strokeWidth: 1 * s } },
+    { name: "Branch", paths: br.limb, color: "bark", o: { strokeWidth: 5 * s } },
+    { name: "Twigs", paths: br.twigs, color: "bark", o: { strokeWidth: 2.4 * s } },
+    { name: "Blossoms", paths: blossoms.flatMap((b) => b.petals), color: "blossom" },
+    { name: "Blossom hearts", paths: blossoms.flatMap((b) => b.heart), color: "gold" },
+    { name: "Lantern glow", paths: lanterns.flatMap((l) => l.body), color: "glow", o: { opacity: 0.45, effects: [blurred(16 * s)] } },
+    { name: "Lantern cords", paths: lanterns.flatMap((l) => l.cord), color: "gold", o: { strokeWidth: 1.4 * s } },
+    { name: "Lanterns", paths: lanterns.flatMap((l) => l.body), color: "lantern" },
+    { name: "Lantern ribs", paths: lanterns.flatMap((l) => l.ribs), color: "gold", o: { strokeWidth: 1.4 * s } },
+    { name: "Lantern caps", paths: lanterns.flatMap((l) => l.caps), color: "gold" },
+    { name: "Tassels", paths: lanterns.flatMap((l) => l.tassel), color: "gold" },
+    { name: "Clouds", paths: cloudL, color: "gold", o: { strokeWidth: 2.4 * s } },
+    { name: "Clouds", paths: cloudR, color: "gold", o: { strokeWidth: 2.4 * s } },
+    { name: "Coins", paths: coins.flatMap((c) => c.coin), color: "gold" },
+    { name: "Coin holes", paths: coins.flatMap((c) => c.hole), color: "paperRed" },
+    { name: "Coin rims", paths: coins.flatMap((c) => c.rim), color: "goldDeep", o: { strokeWidth: 1 * s } },
+    { name: "Dots", paths: [disc(w / 2 - 62 * s, h - 42 * s, 2.4 * s), disc(w / 2 + 62 * s, h - 42 * s, 2.4 * s)], color: "gold" }
+  ];
+}
+var holidays_lunar_new_year_banquet_menu_default = defineTemplate({
+  id: "print-holidays-lunar-new-year-banquet-menu",
+  meta: {
+    name: NAME,
+    description: "A restaurant menu for the Lunar New Year\u2019s Eve reunion dinner: a deep red card in a fine gold double frame, round red lanterns with gold ribs, a branch of plum blossom, auspicious clouds and coins at the foot, and eight banquet dishes each with the wish it brings the table. A5 with bleed",
+    category: "menu",
+    tags: ["lunar new year", "chinese new year", "spring festival", "reunion dinner", "banquet", "restaurant", "menu", "lanterns", "plum blossom", "red and gold", "year of the goat", "small business", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["menu", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("a5"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#A3141E", text: "#FFF1D8", onPaper: "#F4C95D", primary: "#F4C95D", onPrimary: "#A3141E" },
+      { name: "Golden Lotus" }
+    );
+    k.palette({ gold: "#E9BC52", goldDeep: "#B0852A", lantern: "#D8242F", glow: "#FF7A45", blossom: "#F7C6CF", bark: "#4A1A12", paperRed: "#A3141E" });
+    k.textStyle("Kicker 11", { size: 11, fontWeight: 700, letterSpacing: 3.4, lineHeight: 16 });
+    k.textStyle("Title 40", { ...SERIF, size: 40, fontWeight: 700, letterSpacing: -0.6, lineHeight: 44 });
+    k.textStyle("Greeting 15", { ...SERIF, size: 15, fontWeight: 400, fontStyle: "italic", lineHeight: 20 });
+    k.textStyle("Dish 14", { ...SERIF, size: 14, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Wish 10.5", { ...SERIF, size: 10.5, fontWeight: 400, fontStyle: "italic", lineHeight: 14 });
+    k.textStyle("Price 11", { size: 11, fontWeight: 700, letterSpacing: 1.2, lineHeight: 16 });
+    const DW = Math.round(k.node(k.sheet).width - PAD.left - PAD.right);
+    k.component("Dish", { gap: 1, width: DW, align: "CENTER", props: { Dish: "Dish", Wish: "What it wishes you" } }, (id) => {
+      k.propText(id, "Dish", { style: "Dish 14", color: "text", align: "CENTER", width: "FILL", name: "Dish name" });
+      k.propText(id, "Wish", { style: "Wish 10.5", color: "onPaper", align: "CENTER", width: "FILL", name: "Wish" });
+    });
+    flourishComponent(k, "Coin rule", "onPaper", disc(0, 0, 6), { rule: 40, size: 8 });
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 0, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, art(W, H));
+    const c = { align: "CENTER", width: "FILL" };
+    k.text(sheet, "FRIDAY 5 FEBRUARY \xB7 NEW YEAR\u2019S EVE", { style: "Kicker 11", color: "onPaper", ...c, name: "Kicker" });
+    k.stack(sheet, { height: 6, name: "Gap" });
+    k.text(sheet, "Reunion Dinner", { style: "Title 40", color: "text", ...c, name: "Title" });
+    k.text(sheet, "Gong hei fat choy, and welcome to the Year of the Goat", { style: "Greeting 15", color: "onPaper", ...c, name: "Greeting" });
+    k.stack(sheet, { height: 14, name: "Gap" });
+    k.instance(sheet, "Coin rule", {}, { name: "Divider" });
+    k.stack(sheet, { height: 14, name: "Gap" });
+    for (const [i, [dish, wish]] of DISHES.entries()) {
+      k.instance(sheet, "Dish", { Dish: dish, Wish: wish }, { name: "Dish", width: "FILL" });
+      if (i < DISHES.length - 1) k.stack(sheet, { height: 6, name: "Gap" });
+    }
+    k.stack(sheet, { height: 16, name: "Gap" });
+    k.text(sheet, "$388 PER TABLE OF TEN \xB7 SEATINGS AT 5:30 AND 8", { style: "Price 11", color: "onPaper", ...c, name: "Price" });
+    k.text(sheet, "{{brand.name}}, 136-20 41st Avenue, Flushing", { style: "Wish 10.5", color: "text", ...c, name: "Address" });
+    return k.finish();
+  }
+});
+
+export {
+  holidays_lunar_new_year_banquet_menu_default
+};

package/dist/chunks/chunk-6KXNC2TP.js

@@ -0,0 +1,77 @@
+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 {
+  standardPortfolio
+} from "./chunk-ZGLXMJRC.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/portfolio-case-folio.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WORK = [
+  { title: "Fieldnotes Coffee", client: "Fieldnotes Roasters", year: "2026", kind: "Brand identity \xB7 Packaging", cover: "folio-00", summary: "A coffee brand that reads like a farmer\u2019s notebook: every bag says where, who and when.", story: "We built the identity around a handwritten tasting card that changes with each lot. The bag system prints on demand, so a new harvest needs no new plates.", credits: "Identity, packaging, print production \u2014 Juno Park" },
+  { title: "Riso Nights", client: "The Paper Room", year: "2026", kind: "Poster series", cover: "folio-01", summary: "Twelve risograph posters for a year of late-night print workshops.", story: "Two drums, two colours, one rule: every poster is printed in the workshop it announces. The series became the venue\u2019s house style.", credits: "Design, printing \u2014 Juno Park" },
+  { title: "Kin banking app", client: "Kin Credit Union", year: "2025", kind: "Product design \xB7 iOS and Android", cover: "folio-02", summary: "A banking app for a credit union whose members are mostly over sixty.", story: "Large type, one action per screen and a weekly letter that explains the account in words. Calls to support fell by a third in the first quarter.", credits: "Product design, research \u2014 Juno Park \xB7 Engineering \u2014 Kin" },
+  { title: "Bloom skincare", client: "Bloom Botanics", year: "2025", kind: "Packaging \xB7 Art direction", cover: "folio-03", summary: "Soft ceramic bottles and a photo style lit by shadows of palm leaves.", story: "The bottles are refillable at the counter; the labels are printed on the ceramic so nothing peels. I art-directed the launch shoot and the shelf talkers.", credits: "Packaging, art direction \u2014 Juno Park \xB7 Photography \u2014 Ama Osei" },
+  { title: "Orbit bikes", client: "Orbit Cycles", year: "2024", kind: "Brand identity", cover: "folio-04", summary: "An orange city bike, a round logo and a showroom that is mostly wall.", story: "One colour does the work: Orbit orange on frames, signs and the shop\u2019s back wall. The logo is a wheel seen from the side, drawn to be stamped into metal.", credits: "Identity, environmental graphics \u2014 Juno Park" },
+  { title: "Read Here", client: "Eastside Public Library", year: "2024", kind: "Rebrand \xB7 Merchandise", cover: "folio-05", summary: "A rebrand for a public library, its tote bags and its enamel pins.", story: "The library asked for something its readers would wear. The pins sold out twice; the new card sign-ups doubled over the summer.", credits: "Identity, merchandise \u2014 Juno Park" },
+  { title: "Cellar labels", client: "Domaine Vasse", year: "2023", kind: "Label design", cover: "folio-06", summary: "A wine label series in bold geometric shapes, one shape per grape.", story: "Each grape has its own shape and the vintage is the colour, so a shelf reads like a chart. Printed with a single foil on black stock.", credits: "Label design \u2014 Juno Park" },
+  { title: "This Way", client: "Harbour Museum", year: "2023", kind: "Wayfinding", cover: "folio-07", summary: "A yellow wayfinding system for a museum in an old grain store.", story: "Signs hang from the original beams and read from both sides. Every gallery has a number you can see from the door.", credits: "Wayfinding, signage \u2014 Juno Park \xB7 Fabrication \u2014 Signworks" }
+];
+var portfolio_case_folio_default = defineTemplate({
+  id: "web-portfolio-case-folio",
+  meta: {
+    name: "Case study folio",
+    description: "A brand and product designer\u2019s portfolio in the style of design platforms: white cards with a hairline two across, a case-study page per project with the brief, the picture, the story and credits, and an about page. The projects are a collection you edit as a table. Desktop, tablet and phone",
+    category: "web",
+    tags: ["portfolio", "case studies", "designer", "brand identity", "behance", "cards", "cms", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["portfolio", "case-study"],
+    created: "2026-10-05",
+    updated: "2026-10-05"
+  },
+  breakpoints: true,
+  build: () => standardPortfolio({
+    name: "Case study folio",
+    brand: { paper: "#FFFFFF", text: "#191919", onPaper: "#626262", primary: "#0057FF", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#191919", cardMuted: "#626262", line: "#E4E4E4" },
+    fields: { name: "Juno Park", email: "juno@junopark.design" },
+    styles: {
+      "Wordmark 18": { size: 18, fontWeight: 800, letterSpacing: -0.4, lineHeight: 24 },
+      "Small 14": { size: 14, fontWeight: 500, lineHeight: 20 },
+      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
+      "Title 18": { size: 18, fontWeight: 700, letterSpacing: -0.2, lineHeight: 26 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
+      "Display 56": { size: 56, fontWeight: 800, letterSpacing: -1.8, lineHeight: 62 },
+      "Display 36": { size: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 42 }
+    },
+    type: { wordmark: "Wordmark 18", small: "Small 14", meta: "Meta 14", title: "Title 18", body: "Body 17", display: "Display 56", displaySmall: "Display 36" },
+    projects: WORK,
+    links: [["work", "Work"], ["studio", "About"]],
+    lead: { kicker: "Brand and product designer \xB7 Seoul and remote", headline: "I make brands people keep in their kitchen, their wallet and their tote bag.", intro: "Juno Park designs identities, packaging and apps for small companies with something real to sell. Eight years, forty clients, one desk." },
+    grid: { cols: 2, gap: 32, ratio: 0.66, radius: 10, card: { fill: "card", pad: 12, radius: 16, stroke: "line" }, meta: "{{item.kind}}" },
+    project: { ratio: 0.62, center: true, kicker: "Case study", more: { cols: 3, ratio: 0.66, label: "More case studies" } },
+    studio: {
+      statement: "Hello \u2014 I am Juno, a designer of brands and the things they come in.",
+      about: "I work with founders directly, from the first sketch to the printer\u2019s proof. Most projects take eight to twelve weeks; I take three a season so each one gets the attention it needs.",
+      picture: "folio-01",
+      ratio: 0.4,
+      services: ["Brand identity", "Packaging and print", "Product design for apps", "Art direction"],
+      clients: "Fieldnotes Roasters, Kin Credit Union, Bloom Botanics, Orbit Cycles, Eastside Public Library, Domaine Vasse and the Harbour Museum.",
+      contact: "Taking on two new projects for early 2027."
+    },
+    elsewhere: "Behance \xB7 Dribbble \xB7 Instagram"
+  })
+});
+
+export {
+  portfolio_case_folio_default
+};

package/dist/chunks/chunk-6QXJBXDE.js

@@ -0,0 +1,200 @@
+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 {
+  soft
+} from "./chunk-T6QWDC3F.js";
+import {
+  gridPaths
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  ground
+} from "./chunk-YHBAWSDX.js";
+import {
+  logoBadge
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/saas-store-chrome-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ARTICLE = [
+  "For most of its history the web was read, not scrolled. A page had an author, a date and an end.",
+  { mark: "What we call reading online is now mostly triage: deciding, in seconds, what not to read." },
+  "The cost is not attention, which recovers. It is memory. We finish forty tabs a day and can quote none of them a week later.",
+  { mark: "A highlight is a promise to your future self that this sentence mattered." },
+  "Readers who mark a text recall it roughly twice as well as readers who do not, and the effect holds whether the pen is real or not."
+];
+var SHOTS = [
+  { key: "Highlight", claim: "Mark it once. Keep it for good.", note: "Select any sentence on any page. Margin saves it with the source and the date.", popup: "highlights" },
+  { key: "Summarise", claim: "Five lines, from your own highlights.", note: "A summary built only from what you marked, so it says what you thought mattered.", popup: "summary" },
+  { key: "Export", claim: "Send it where you write.", note: "Notion, Obsidian, Readwise or plain Markdown. One click, no account needed.", popup: "export" }
+];
+var saas_store_chrome_kit_default = defineTemplate({
+  id: "social-saas-store-chrome-kit",
+  meta: {
+    name: "SaaS store Chrome Web Store kit",
+    description: "A whole Chrome Web Store listing in the Swiss typographic look: the 440 \xD7 280 small tile, the 1400 \xD7 560 marquee and three 1280 \xD7 800 screenshots, each showing the extension\u2019s popup hanging from its toolbar button over an article in a browser window, with the claim set large beside it. Drop your own page capture on the browser\u2019s picture slot; the popup is auto layout you can retype",
+    category: "social",
+    tags: ["saas", "saas store", "chrome web store", "extension", "browser extension", "tile", "marquee", "screenshots", "popup", "swiss", "listing", "plugin"],
+    platforms: ["chrome-web-store", "web", "desktop"],
+    formats: ["screenshot", "banner", "thumbnail", "gallery"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store Chrome Web Store kit", preset("cws-marquee"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1F0EB", text: "#111111", primary: "#D4201A", onPrimary: "#FFFFFF" },
+      { name: "Margin", tagline: "Read once. Keep the good parts." }
+    );
+    k.palette({ card: "#FFFFFF", onCard: "#141414", cardMuted: "#5B5B57", chrome: "#E4E3DD", onChrome: "#3A3A37", rule: "#CFCDC4", mark: "#FFD6D2", ink: "#111111", onInk: "#F1F0EB" });
+    k.textStyle("Claim 66", { size: 66, fontWeight: 800, letterSpacing: -3, lineHeight: 67 });
+    k.textStyle("Note 24", { size: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 34 });
+    k.textStyle("Label 18", { ...MONO, size: 18, fontWeight: 700, letterSpacing: 1.2, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Url 16", { ...MONO, size: 16, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Article title 40", { ...SERIF, size: 40, fontWeight: 700, letterSpacing: -1, lineHeight: 46 });
+    k.textStyle("Article 20", { ...SERIF, size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Popup title 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 26 });
+    k.textStyle("Popup 16", { size: 16, fontWeight: 500, lineHeight: 23 });
+    k.textStyle("Popup strong 16", { size: 16, fontWeight: 700, lineHeight: 23 });
+    k.textStyle("Name 150", { size: 150, fontWeight: 900, letterSpacing: -8, lineHeight: 140 });
+    k.textStyle("Tagline 40", { size: 40, fontWeight: 700, letterSpacing: -1.2, lineHeight: 46 });
+    k.textStyle("Tile name 64", { size: 64, fontWeight: 900, letterSpacing: -3, lineHeight: 64 });
+    k.textStyle("Tile note 20", { size: 20, fontWeight: 700, letterSpacing: -0.3, lineHeight: 26 });
+    k.component("Popup button", { width: 340, fill: "primary", radius: 10, align: "CENTER", padding: { top: 12, right: 16, bottom: 12, left: 16 }, description: "The popup\u2019s one action.", props: { Label: "Summarise this page" } }, (id) => {
+      k.propText(id, "Label", { style: "Popup strong 16", color: "onPrimary", align: "CENTER" });
+    });
+    const browser = (sheet, x, y, w, h) => {
+      const win = k.stack(sheet, { width: w, height: h, fill: "card", radius: 14, clip: true, stroke: { color: "rule", width: 2, align: "INSIDE" }, effects: [soft(k, "ink", 0.18, 24, 60)], name: "Browser", absolute: { x, y } });
+      const tabs = k.stack(win, { direction: "HORIZONTAL", height: 44, fill: "chrome", gap: 12, align: "MAX", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Tab strip" });
+      const dots = k.stack(tabs, { direction: "HORIZONTAL", width: "HUG", height: 44, gap: 8, align: "CENTER", name: "Window dots" });
+      for (let i = 0; i < 3; i++) k.ellipse(dots, 12, "rule", { name: "Window dot" });
+      const tab = k.stack(tabs, { direction: "HORIZONTAL", width: 260, height: 34, fill: "card", gap: 10, align: "CENTER", padding: { top: 0, right: 14, bottom: 0, left: 14 }, name: "Tab" });
+      k.patch(tab, { cornerRadius: [10, 10, 0, 0] });
+      k.rect(tab, 14, 14, "ink", { radius: 3, name: "Favicon" });
+      k.text(tab, "The quiet web", { style: "Url 16", color: "onCard", name: "Tab title" });
+      const bar = k.stack(win, { direction: "HORIZONTAL", height: 52, gap: 14, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Toolbar" });
+      for (let i = 0; i < 2; i++) k.rect(bar, 18, 18, "rule", { radius: 9, name: "Nav button" });
+      const url = k.stack(bar, { direction: "HORIZONTAL", height: 34, fill: "chrome", radius: 17, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Address" });
+      k.text(url, "longreads.example/the-quiet-web", { style: "Url 16", color: "onChrome", name: "Url" });
+      k.rect(bar, 22, 22, "rule", { radius: 6, name: "Other extension" });
+      const button = k.stack(bar, { width: 34, height: 34, fill: "primary", radius: 9, align: "CENTER", justify: "CENTER", name: "Extension button" });
+      k.rect(button, 6, 18, "onPrimary", { radius: 2, name: "Extension mark" });
+      k.rect(bar, 22, 22, "rule", { radius: 11, name: "Profile" });
+      k.rect(win, "FILL", 2, "rule", { name: "Toolbar rule" });
+      const bodyH = h - 44 - 52 - 2;
+      const body = k.stack(win, { height: bodyH, clip: true, name: "Page" });
+      k.photo(body, w, bodyH, { ground: "chrome", name: "Your page", absolute: { x: 0, y: 0 } });
+      const page = k.frame(body, { x: 0, y: 0, width: w, height: bodyH }, { name: "Placeholder page", fill: "card" });
+      const col = k.stack(page, { width: w - 56 - 300, gap: 18, name: "Article", absolute: { x: 56, y: 44 } });
+      k.text(col, "Essay \xB7 9 min read", { style: "Label 18", color: "cardMuted", name: "Article meta" });
+      k.text(col, "The quiet web, and how we stopped reading it", { style: "Article title 40", color: "onCard", name: "Article title" });
+      k.rect(col, 80, 4, "ink", { name: "Article rule" });
+      for (const p of ARTICLE) {
+        if (typeof p === "string") k.text(col, p, { style: "Article 20", color: "onCard", name: "Paragraph" });
+        else {
+          const m = k.stack(col, { fill: "mark", padding: { top: 4, right: 8, bottom: 6, left: 8 }, name: "Highlight" });
+          k.text(m, p.mark, { style: "Article 20", color: "onCard", name: "Highlighted" });
+        }
+      }
+      return win;
+    };
+    const popup = (sheet, x, y, kind) => {
+      k.rect(sheet, 22, 22, "card", { name: "Popup tail", absolute: { x: x + 306, y: y - 9 }, stroke: { color: "rule", width: 2, align: "INSIDE" } });
+      for (const id of k.named(sheet, "Popup tail")) k.patch(id, { rotation: 45 });
+      const pop = k.stack(sheet, { width: 380, gap: 14, fill: "card", radius: 16, padding: 20, stroke: { color: "rule", width: 2, align: "INSIDE" }, effects: [soft(k, "ink", 0.3, 26, 60)], name: "Popup", absolute: { x, y } });
+      const head = k.stack(pop, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Popup head" });
+      logoBadge(k, head, { fill: "primary", size: 20, pad: 7, radius: 9 });
+      k.text(head, kind === "highlights" ? "On this page" : kind === "summary" ? "Summary" : "Send 2 highlights", { style: "Popup title 20", color: "onCard", name: "Popup title" });
+      k.rect(pop, "FILL", 2, "rule", { name: "Popup rule" });
+      if (kind === "highlights") {
+        for (const [quote, when] of [["\u201CWhat we call reading online is now mostly triage\u2026\u201D", "Saved just now"], ["\u201CA highlight is a promise to your future self\u2026\u201D", "Saved 1 min ago"]]) {
+          const item = k.stack(pop, { direction: "HORIZONTAL", gap: 12, name: "Saved highlight" });
+          k.rect(item, 5, 74, "primary", { radius: 2, name: "Highlight bar" });
+          const w = k.stack(item, { gap: 4, name: "Saved words" });
+          k.text(w, quote, { style: "Popup 16", color: "onCard", name: "Saved quote" });
+          k.text(w, when, { style: "Url 16", color: "cardMuted", name: "Saved when" });
+        }
+        const count = k.stack(pop, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "chrome", radius: 10, padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Library row" });
+        k.text(count, "In your library", { style: "Popup 16", color: "onChrome", autoWidth: true, name: "Library label" });
+        k.text(count, "1,284 highlights", { style: "Popup strong 16", color: "onChrome", autoWidth: true, name: "Library count" });
+      } else if (kind === "summary") {
+        for (const [i, line] of ["Online reading has become triage, not reading.", "The loss is memory rather than attention.", "Marking a sentence roughly doubles recall.", "A highlight is a note to your future self.", "The fix is small: mark, then revisit."].entries()) {
+          const row = k.stack(pop, { direction: "HORIZONTAL", gap: 12, name: "Summary line" });
+          k.text(row, `0${i + 1}`, { style: "Url 16", color: "cardMuted", autoWidth: true, name: "Line number" });
+          k.text(row, line, { style: "Popup 16", color: "onCard", name: "Line" });
+        }
+      } else {
+        for (const [i, dest] of ["Notion \xB7 Reading notes", "Obsidian \xB7 Vault/Inbox", "Readwise", "Copy as Markdown"].entries()) {
+          const row = k.stack(pop, { direction: "HORIZONTAL", gap: 12, align: "CENTER", radius: 10, padding: { top: 10, right: 12, bottom: 10, left: 12 }, name: "Destination", ...i === 0 ? { fill: "mark" } : {} });
+          k.rect(row, 20, 20, i === 0 ? "primary" : "rule", { radius: 5, name: "Destination icon" });
+          k.text(row, dest, { style: i === 0 ? "Popup strong 16" : "Popup 16", color: "onCard", name: "Destination name" });
+        }
+      }
+      k.instance(pop, "Popup button", { Label: kind === "highlights" ? "Summarise this page" : kind === "summary" ? "Copy summary" : "Send to Notion" }, { name: "Popup button" });
+    };
+    const grid = (sheet, w, h, step) => k.vector(sheet, w, h, gridPaths(w, h, step, 2), k.tint("text", 0.09), { name: "Grid", absolute: { x: 0, y: 0 } });
+    const marquee = k.sheet;
+    ground(k, marquee, "Marquee 1400 \xD7 560", "paper");
+    grid(marquee, 1400, 560, 70);
+    k.rect(marquee, 24, 560, "primary", { name: "Margin rule", absolute: { x: 0, y: 0 } });
+    const mw = k.stack(marquee, { width: 600, gap: 20, name: "Marquee words", absolute: { x: 84, y: 76 } });
+    const mb = k.stack(mw, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, mb, { fill: "primary", size: 30, pad: 9, radius: 11 });
+    k.text(mb, "Extension for Chrome", { style: "Label 18", color: "text", name: "Kind" });
+    k.text(mw, "{{brand.name}}", { style: "Name 150", color: "text", name: "Name" });
+    k.text(mw, "{{brand.tagline}}", { style: "Tagline 40", color: "text", width: 520, name: "Tagline" });
+    browser(marquee, 650, 70, 720, 640);
+    popup(marquee, 984, 180, "highlights");
+    const tile = k.addSheet(preset("cws-tile"));
+    ground(k, tile, "Small tile 440 \xD7 280", "primary");
+    k.patch(tile, { x: 1400 + 120, y: 0 });
+    k.rect(tile, 300, 34, k.tint("onPrimary", 0.22), { name: "Tile mark", absolute: { x: 170, y: 196 } });
+    k.rect(tile, 200, 34, k.tint("onPrimary", 0.22), { name: "Tile mark", absolute: { x: 270, y: 30 } });
+    const tw = k.stack(tile, { width: 380, gap: 10, name: "Tile words", absolute: { x: 30, y: 30 } });
+    logoBadge(k, tw, { fill: "ink", size: 34, pad: 10, radius: 13 });
+    k.rect(tw, 10, 26, k.tint("onPrimary", 1e-3), { name: "Tile space" });
+    k.text(tw, "{{brand.name}}", { style: "Tile name 64", color: "onPrimary", name: "Tile name" });
+    k.text(tw, "Highlight and summarise any page", { style: "Tile note 20", color: "onPrimary", name: "Tile note" });
+    SHOTS.forEach((s, i) => {
+      const sheet = k.addSheet(preset("cws-screenshot"));
+      ground(k, sheet, `Screenshot ${i + 1} \xB7 ${s.key}`, "paper");
+      k.patch(sheet, { x: 1400 + 120 + 440 + 120 + i * (1280 + 120), y: 0 });
+      grid(sheet, 1280, 800, 80);
+      k.rect(sheet, 16, 800, "primary", { name: "Margin rule", absolute: { x: 0, y: 0 } });
+      const words = k.stack(sheet, { width: 350, gap: 22, name: "Claim block", absolute: { x: 64, y: 84 } });
+      k.text(words, `0${i + 1} / 03 \xB7 ${s.key}`, { style: "Label 18", color: "text", name: "Step" });
+      k.text(words, s.claim, { style: "Claim 66", color: "text", name: "Claim" });
+      k.rect(words, 96, 8, "primary", { name: "Claim rule" });
+      k.text(words, s.note, { style: "Note 24", color: "text", name: "Claim note" });
+      browser(sheet, 470, 84, 770, 800);
+      popup(sheet, 854, 194, s.popup);
+    });
+    k.setCover(marquee);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_chrome_kit_default
+};