@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-BL3RXZCH.js

@@ -0,0 +1,177 @@
+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 {
+  MONTHLY_SPANS,
+  MONTHS,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  ts
+} from "./chunk-G3YVVHCF.js";
+import {
+  drawOn
+} from "./chunk-WV6ZTKE7.js";
+import {
+  board,
+  hide,
+  reboard,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  pt3
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/style-data-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS milestone post";
+var DURATION = 8e3;
+var CHART = { w: 888, h: 300 };
+var TOP = 1100;
+var BARS = 400;
+var STEP = 180;
+var cues = [
+  { layer: "Top row", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Unit", preset: "words-in", at: 200, params: { duration: 700 } },
+  { layer: "Month row", preset: "slide-in", at: 2400, stagger: { delay: 160, order: "selection" }, params: { direction: "left", distance: 40, duration: 420 } },
+  { layer: "Trillion line", preset: "fade-in", at: BARS + 8 * STEP + 300, params: { duration: 400 } },
+  { layer: "Thanks", preset: "fade-in", at: 3400, params: { duration: 600 } },
+  { layer: "Big figure", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.03 } }
+];
+var counts = [
+  { layer: "Big figure", at: 200, duration: 2600, counter: { from: 0, to: SPANWISE.trillion, decimals: 2 } }
+];
+var style_data_milestone_default = defineTemplate({
+  id: "social-saas-style-data-milestone",
+  meta: {
+    name: NAME,
+    description: "An animated milestone post in a data-dense enterprise look for an observability platform: 1.02 trillion spans in a month counts up in big tabular figures while the year's months rise as bars on a ruled console chart, a line draws through their tops and a dashed trillion line lights as September crosses it, over a small table of the last three months. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "milestone", "metric", "counter", "chart", "bar chart", "saas", "data", "dashboard", "enterprise", "observability", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Label 20", label(20));
+    ts(k, "Figure 190", figure(190));
+    ts(k, "Figure 220", figure(220));
+    ts(k, "Unit 42", display(42, { lead: 1.12 }));
+    ts(k, "Axis 18", figure(18, 500));
+    ts(k, "Tag 18", label(18));
+    ts(k, "Head 17", label(17));
+    ts(k, "Cell 24", figure(24, 500));
+    ts(k, "Mono 24", code(24));
+    ts(k, "Thanks 26", body(26, 500));
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Milestone");
+    k.flowSheet(sheet, 22, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    k.text(top, "SEPTEMBER 2026 \xB7 MILESTONE", { style: "Label 20", color: "onPaper", autoWidth: true, name: "Kicker" });
+    const fig = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Figure row" });
+    k.text(fig, SPANWISE.trillion.toFixed(2), { style: "Figure 190", color: "text", width: 380, name: "Big figure" });
+    k.text(fig, "trillion spans indexed in one month. Every one kept.", { style: "Unit 42", color: "text", name: "Unit" });
+    const con = panel(k, sheet, { gap: 8, padding: { top: 20, right: 24, bottom: 16, left: 24 }, name: "Chart panel" });
+    const cb = board(k, con, CHART.w, CHART.h + 30, 1, "Chart board");
+    const plotH = CHART.h, x0 = 70, plotW = CHART.w - x0;
+    const yOf = (v) => Math.round(plotH - v / TOP * plotH);
+    for (const [v, t] of [[0, "0"], [500, "500 B"], [1e3, "1 T"]]) {
+      k.rect(cb, plotW, 1, "line", { name: "Grid line", absolute: { x: x0, y: yOf(v) } });
+      k.text(cb, t, { style: "Axis 18", color: "cardMuted", autoWidth: true, name: "Grid label", absolute: { x: 0, y: yOf(v) - 12 } });
+    }
+    const tl = k.vector(cb, plotW, 4, [{ closed: false, points: [pt3(0, 2), pt3(plotW, 2)] }], [], { name: "Trillion line", absolute: { x: x0, y: yOf(1e3) - 2 }, stroke: { color: "warn", width: 2, dash: [6, 10], cap: "ROUND" } });
+    void tl;
+    const slot = plotW / MONTHLY_SPANS.length, bw = Math.round(slot * 0.56);
+    const tops = [];
+    MONTHLY_SPANS.forEach((v, i) => {
+      const x = Math.round(x0 + slot * i + (slot - bw) / 2), h = plotH - yOf(v);
+      const last = i === MONTHLY_SPANS.length - 1;
+      const bar = k.rect(cb, bw, h, last ? "primary" : "cool", { name: last ? "Last bar" : "Bar", radius: 3, absolute: { x, y: yOf(v) } });
+      k.patch(bar, { anchorY: 1 });
+      k.animate(bar, "scaleY", [{ t: BARS + i * STEP, v: 0, ease: ease.out("cubic") }, { t: BARS + i * STEP + 520, v: 1 }]);
+      k.text(cb, MONTHS[i], { style: "Axis 18", color: last ? "onCard" : "cardMuted", width: Math.round(slot), align: "CENTER", name: "Month label", absolute: { x: Math.round(x0 + slot * i), y: plotH + 8 } });
+      tops.push({ x: x - x0 + bw / 2, y: yOf(v) });
+    });
+    const line = k.vector(cb, plotW, plotH, [{ closed: false, points: tops.map((p) => pt3(p.x, p.y)) }], [], { name: "Top line", absolute: { x: x0, y: 0 }, stroke: { color: "onCard", width: 2.5, cap: "ROUND", join: "ROUND" } });
+    drawOn(k, line, BARS + 200, 8 * STEP + 400);
+    const tag = k.stack(cb, { direction: "HORIZONTAL", width: "HUG", fill: "warn", radius: 4, padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Trillion tag", absolute: { x: x0 + 8, y: yOf(1e3) - 34 } });
+    k.text(tag, "1 TRILLION", { style: "Tag 18", color: "well", autoWidth: true, name: "Tag words" });
+    k.animate(tag, "opacity", [{ t: BARS + 8 * STEP + 300, v: 0, ease: ease.out("cubic") }, { t: BARS + 8 * STEP + 700, v: 1 }]);
+    const tb = panel(k, sheet, { name: "Month table" });
+    const th = k.stack(tb, { direction: "HORIZONTAL", height: 38, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "well", name: "Month head" });
+    for (const [t, w] of [["MONTH", "FILL"], ["SPANS", 260], ["VS PRIOR", 200]]) k.text(th, t, { style: "Head 17", color: "cardMuted", width: w, align: w === "FILL" ? "LEFT" : "RIGHT", name: "Month col" });
+    for (const i of [6, 7, 8]) {
+      const v = MONTHLY_SPANS[i], prev = MONTHLY_SPANS[i - 1];
+      const r = k.stack(tb, { direction: "HORIZONTAL", height: 48, align: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, name: "Month row" });
+      k.text(r, `${MONTHS[i]} 2026`, { style: "Mono 24", color: "onCard", width: "FILL", name: "Month name" });
+      k.text(r, `${v.toLocaleString("en-US")} B`, { style: "Cell 24", color: "onCard", width: 260, align: "RIGHT", name: "Month spans" });
+      k.text(r, `\u2191 ${((v - prev) / prev * 100).toFixed(1)}%`, { style: "Cell 24", color: "up", width: 200, align: "RIGHT", name: "Month growth" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Thanks" });
+    k.text(foot, "Thank you to the 1,900 platform teams who sent them.", { style: "Thanks 26", color: "onPaper", autoWidth: true, name: "Thanks line" });
+    k.component("Site pill", { direction: "HORIZONTAL", width: "HUG", radius: 6, align: "CENTER", padding: { top: 8, right: 14, bottom: 8, left: 14 }, fill: "card", stroke: { color: "line", width: 1, align: "INSIDE" }, props: { Label: "{{brand.site}}" } }, (id) => {
+      k.propText(id, "Label", { style: "Mono 24", color: "onCard", autoWidth: true });
+    });
+    k.instance(foot, "Site pill", { Label: "{{brand.site}}" }, { name: "Site" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 30 });
+      },
+      vertical: (kit, id) => {
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN", itemSpacing: 34 });
+        for (const f of kit.named(id, "Figure row")) kit.patch(f, { layoutMode: "VERTICAL", itemSpacing: 0 });
+        restyle(kit, id, "Big figure", "Figure 220");
+        for (const t of kit.named(id, "Big figure")) kit.patch(t, { width: 800 });
+        for (const t of kit.named(id, "Unit")) kit.patch(t, { layoutSizingHorizontal: "FILL" });
+        reboard(kit, id, "Chart board", (800 - 48) / CHART.w);
+        hide(kit, id, ["Thanks line"]);
+        heatMap(kit, id, { cols: 36, rows: 14, cell: 26, gap: 4, hotRow: 5, hotCol: 30, name: "Heat foot", absolute: { x: 2, y: 1474 }, dim: 0.85 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_milestone_default
+};

package/dist/chunks/chunk-BMOIW4EK.js

@@ -0,0 +1,330 @@
+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 {
+  resolvedFills,
+  resolvedStrokes,
+  vectorFillPaint
+} from "./chunk-BRLZFJJU.js";
+import {
+  getNativeExtension
+} from "./chunk-5YD4P6WO.js";
+import {
+  isAnimated
+} from "./chunk-YQC2IVAU.js";
+import {
+  effectsOf,
+  init_effects
+} from "./chunk-4VICNBUI.js";
+import {
+  init_scene3d,
+  is3DContext
+} from "./chunk-NMFXCSU4.js";
+import {
+  init_shader_params,
+  reflectShader
+} from "./chunk-TSWHCDM7.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/io/capability/targets.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var row = (css, svg, ir, lottie) => ({ css, svg, ir, lottie });
+var KINDS = {
+  "node:VECTOR": row("vector", "native", "native", "native"),
+  "node:BOOLEAN": row("vector", "native", "native", "native"),
+  "node:STAR": row("vector", "native", "native", "native"),
+  "node:POLYGON": row("vector", "native", "native", "native"),
+  "node:LINE": row("vector", "native", "native", "native"),
+  "node:ARROW": row("vector", "native", "native", "native"),
+  // A pixel canvas is merged <rect> runs in SVG; a paint layer is pixels everywhere.
+  "node:PIXEL_GRID": row("vector", "native", "raster", "raster"),
+  "node:RASTER": row("raster", "raster", "raster", "raster"),
+  "node:STICKY": row("raster", "raster", "raster", "raster"),
+  "node:BRUSH_STROKE": row("vector", "native", "native", "native"),
+  "node:IMAGE": row("native", "native", "raster", "native")
+};
+var PAINTS = {
+  "paint:SOLID": row("native", "native", "native", "native"),
+  "paint:GRADIENT_LINEAR": row("native", "native", "native", "native"),
+  "paint:GRADIENT_RADIAL": row("native", "native", "native", "native"),
+  "paint:GRADIENT_ANGULAR": row("native", "raster", "raster", "raster"),
+  "paint:GRADIENT_DIAMOND": row("approx", "raster", "raster", "raster"),
+  "paint:IMAGE": row("native", "native", "raster", "native"),
+  // CSS has no word for these three, and a box that holds children cannot become a picture for its background
+  // alone: the paint is left out of the box (lib/io/web/paint.ts).
+  "paint:SHADER": row("none", "raster", "raster", "none"),
+  "paint:PATTERN": row("none", "raster", "raster", "raster"),
+  "paint:VIDEO": row("none", "raster", "raster", "none")
+};
+var EFFECTS = {
+  "effect:DROP_SHADOW": row("native", "native", "raster", "raster"),
+  "effect:INNER_SHADOW": row("native", "native", "raster", "raster"),
+  "effect:LAYER_BLUR": row("native", "native", "raster", "none"),
+  // `backdrop-filter` blurs what is behind the element on the page; a picture of the layer could not.
+  "effect:BACKGROUND_BLUR": row("native", "raster", "raster", "none"),
+  "effect:PROGRESSIVE_BLUR": row("raster", "raster", "raster", "none"),
+  "effect:MOTION_BLUR": row("raster", "raster", "raster", "none"),
+  "effect:NOISE": row("raster", "raster", "raster", "none"),
+  "effect:TEXTURE": row("raster", "raster", "raster", "none"),
+  "effect:GLASS": row("raster", "raster", "raster", "none"),
+  "effect:HALFTONE": row("raster", "raster", "raster", "none")
+};
+var OTHER = {
+  arc: row("vector", "native", "native", "native"),
+  textOnPath: row("vector", "native", "native", "native"),
+  textInShape: row("vector", "native", "native", "native"),
+  mask: row("vector", "native", "native", "native"),
+  maskGroup: row("vector", "native", "native", "native"),
+  // CSS keeps a 3D scene live with `preserve-3d` (without its lights); vectors cannot say a camera.
+  scene3d: row("approx", "raster", "native", "none"),
+  imageAdjustments: row("raster", "raster", "raster", "native"),
+  strokeOutside: row("native", "native", "raster", "raster"),
+  extensionNoSVG: row("native", "raster", "native", "native"),
+  extensionNoIR: row("native", "native", "raster", "raster"),
+  // Its vector picture stands in on a page (a bitmap when it has no vector form either: `capability`).
+  extensionNoWeb: row("vector", "native", "native", "native")
+};
+var SUPPORT = { ...KINDS, ...PAINTS, ...EFFECTS, ...OTHER };
+var KIND_NAMES = {
+  "node:VECTOR": "vector geometry",
+  "node:BOOLEAN": "boolean geometry",
+  "node:STAR": "star geometry",
+  "node:POLYGON": "polygon geometry",
+  "node:LINE": "line geometry",
+  "node:ARROW": "arrow geometry",
+  "node:PIXEL_GRID": "pixel_grid geometry",
+  "node:RASTER": "raster geometry",
+  "node:STICKY": "sticky geometry",
+  "node:BRUSH_STROKE": "brush_stroke geometry",
+  "node:IMAGE": "image"
+};
+var PAINT_NAMES = {
+  SOLID: "solid fill",
+  GRADIENT_LINEAR: "linear gradient",
+  GRADIENT_RADIAL: "radial gradient",
+  GRADIENT_ANGULAR: "angular gradient",
+  GRADIENT_DIAMOND: "diamond gradient",
+  IMAGE: "image fill",
+  SHADER: "shader fill",
+  PATTERN: "pattern fill",
+  VIDEO: "video"
+};
+var EFFECT_NAMES = {
+  DROP_SHADOW: "Drop shadow",
+  INNER_SHADOW: "Inner shadow",
+  LAYER_BLUR: "Layer blur",
+  BACKGROUND_BLUR: "Background blur",
+  PROGRESSIVE_BLUR: "Progressive blur",
+  MOTION_BLUR: "Motion blur",
+  NOISE: "Noise",
+  TEXTURE: "Texture",
+  GLASS: "Glass",
+  HALFTONE: "Halftone"
+};
+var OTHER_NAMES = {
+  arc: "arc geometry",
+  textOnPath: "text on a path",
+  textInShape: "text inside a shape",
+  mask: "mask",
+  maskGroup: "mask group",
+  scene3d: "3D scene",
+  imageAdjustments: "adjusted image",
+  strokeOutside: "outside stroke",
+  extensionNoSVG: "extension layer",
+  extensionNoIR: "extension layer",
+  extensionNoWeb: "extension layer"
+};
+function featureName(f) {
+  if (f.startsWith("paint:")) return PAINT_NAMES[f.slice(6)];
+  if (f.startsWith("effect:")) return `${EFFECT_NAMES[f.slice(7)].toLowerCase()} effect`;
+  if (f.startsWith("node:")) return KIND_NAMES[f];
+  return OTHER_NAMES[f];
+}
+
+// lib/io/capability/live.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_shader_params();
+function movesItself(node) {
+  if (isAnimated(node)) return true;
+  if (node.type === "PIXEL_GRID" && (node.frames?.length ?? 0) > 1) return true;
+  for (const f of node.fills ?? []) {
+    if (f.visible === false) continue;
+    if (f.type === "VIDEO") return true;
+    if (f.type === "SHADER" && f.shaderCode && reflectShader(f.shaderCode).animated) return true;
+  }
+  return false;
+}
+function isLive(nodes, nodeId) {
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (seen.has(id)) return false;
+    seen.add(id);
+    const n = nodes[id.includes("::") ? id.split("::").pop() : id];
+    if (!n || n.visible === false && n.physics?.role !== "pose") return false;
+    if (movesItself(n)) return true;
+    const main = n.mainComponentId;
+    return (n.childIds ?? []).some(visit) || n.type === "INSTANCE" && !!main && visit(main);
+  };
+  return visit(nodeId);
+}
+
+// lib/io/capability/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/io/capability/features.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_effects();
+init_scene3d();
+
+// lib/engine/image-adjust/adjustments.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ADJUSTMENTS = [
+  { type: "BRIGHTNESS", label: "Brightness", group: "Color", op: 1, amount: { label: "Amount", min: -100, max: 100, step: 1, default: 0, suffix: "%" } },
+  { type: "CONTRAST", label: "Contrast", group: "Color", op: 2, amount: { label: "Amount", min: -100, max: 100, step: 1, default: 0, suffix: "%" } },
+  { type: "EXPOSURE", label: "Exposure", group: "Color", op: 3, amount: { label: "Stops", min: -4, max: 4, step: 0.05, default: 0 } },
+  { type: "SATURATION", label: "Saturation", group: "Color", op: 4, amount: { label: "Amount", min: -100, max: 100, step: 1, default: 0, suffix: "%" } },
+  { type: "VIBRANCE", label: "Vibrance", group: "Color", op: 5, amount: { label: "Amount", min: -100, max: 100, step: 1, default: 0, suffix: "%" } },
+  { type: "HUE", label: "Hue", group: "Color", op: 6, amount: { label: "Shift", min: -180, max: 180, step: 1, default: 0, suffix: "\xB0" } },
+  { type: "TEMPERATURE", label: "Temperature & tint", group: "Color", op: 7, amount: { label: "Temp", min: -100, max: 100, step: 1, default: 0 }, amount2: { label: "Tint", min: -100, max: 100, step: 1, default: 0 } },
+  { type: "CURVES", label: "Curves", group: "Color", op: 8, amount: { label: "Mix", min: 0, max: 100, step: 1, default: 100, suffix: "%" } },
+  { type: "BLUR", label: "Blur", group: "Filter", op: 9, amount: { label: "Radius", min: 0, max: 100, step: 0.5, default: 4, suffix: "px" } },
+  { type: "SHARPEN", label: "Sharpen", group: "Filter", op: 10, amount: { label: "Amount", min: 0, max: 300, step: 1, default: 50, suffix: "%" } },
+  { type: "NOISE", label: "Noise", group: "Filter", op: 11, amount: { label: "Amount", min: 0, max: 100, step: 1, default: 20, suffix: "%" }, amount2: { label: "Mono", min: 0, max: 1, step: 1, default: 1 } },
+  { type: "PIXELATE", label: "Pixelate", group: "Filter", op: 12, amount: { label: "Cell", min: 1, max: 200, step: 1, default: 12, suffix: "px" } },
+  { type: "EDGE", label: "Edge detect", group: "Filter", op: 13, amount: { label: "Mix", min: 0, max: 100, step: 1, default: 100, suffix: "%" } },
+  { type: "MONOCHROME", label: "Monochrome", group: "Filter", op: 14, color: true, amount: { label: "Mix", min: 0, max: 100, step: 1, default: 100, suffix: "%" } },
+  { type: "INVERT", label: "Invert", group: "Filter", op: 15, amount: { label: "Mix", min: 0, max: 100, step: 1, default: 100, suffix: "%" } },
+  { type: "POSTERIZE", label: "Posterize", group: "Filter", op: 16, amount: { label: "Levels", min: 2, max: 32, step: 1, default: 6 } },
+  { type: "VIGNETTE", label: "Vignette", group: "Filter", op: 17, center: true, amount: { label: "Amount", min: -100, max: 100, step: 1, default: 50, suffix: "%" }, amount2: { label: "Size", min: 0, max: 100, step: 1, default: 60, suffix: "%" } },
+  { type: "BULGE", label: "Bulge", group: "Warp", op: 18, center: true, amount: { label: "Amount", min: 0, max: 100, step: 1, default: 50, suffix: "%" }, amount2: { label: "Radius", min: 1, max: 100, step: 1, default: 40, suffix: "%" } },
+  { type: "PINCH", label: "Pinch", group: "Warp", op: 19, center: true, amount: { label: "Amount", min: 0, max: 100, step: 1, default: 50, suffix: "%" }, amount2: { label: "Radius", min: 1, max: 100, step: 1, default: 40, suffix: "%" } },
+  { type: "SWIRL", label: "Swirl", group: "Warp", op: 20, center: true, amount: { label: "Angle", min: -720, max: 720, step: 1, default: 180, suffix: "\xB0" }, amount2: { label: "Radius", min: 1, max: 100, step: 1, default: 40, suffix: "%" } }
+];
+var ADJUSTMENT_BY_TYPE = Object.fromEntries(ADJUSTMENTS.map((d) => [d.type, d]));
+function activeAdjustments(list) {
+  return (list ?? []).filter((a) => a.enabled && !isIdentity(a));
+}
+function isIdentity(a) {
+  switch (a.type) {
+    case "BRIGHTNESS":
+    case "CONTRAST":
+    case "EXPOSURE":
+    case "SATURATION":
+    case "VIBRANCE":
+    case "HUE":
+      return a.amount === 0;
+    case "TEMPERATURE":
+      return a.amount === 0 && (a.amount2 ?? 0) === 0;
+    case "BLUR":
+      return a.amount <= 0;
+    case "SHARPEN":
+    case "NOISE":
+    case "EDGE":
+    case "MONOCHROME":
+    case "INVERT":
+    case "BULGE":
+    case "PINCH":
+      return a.amount <= 0;
+    case "PIXELATE":
+      return a.amount <= 1;
+    case "VIGNETTE":
+    case "SWIRL":
+      return a.amount === 0;
+    case "CURVES":
+      return a.amount <= 0 || !a.curves || ["rgb", "r", "g", "b"].every((k) => isIdentityCurve(a.curves[k]));
+    default:
+      return false;
+  }
+}
+var isIdentityCurve = (pts) => pts.length === 2 && pts[0].x === 0 && pts[0].y === 0 && pts[1].x === 1 && pts[1].y === 1;
+
+// lib/io/capability/features.ts
+var KIND_TYPES = ["VECTOR", "BOOLEAN", "STAR", "POLYGON", "LINE", "ARROW", "PIXEL_GRID", "RASTER", "STICKY", "BRUSH_STROKE", "IMAGE"];
+var KINDS2 = new Set(KIND_TYPES);
+var draws = (e) => !((e.type === "LAYER_BLUR" || e.type === "BACKGROUND_BLUR" || e.type === "MOTION_BLUR") && !(e.radius > 0));
+function kindFeatures(node) {
+  const out = [];
+  if (KINDS2.has(node.type)) out.push(`node:${node.type}`);
+  const ext = getNativeExtension(node.type);
+  if (ext && !ext.toSVG) out.push("extensionNoSVG");
+  if (ext && !ext.toIR) out.push("extensionNoIR");
+  if (ext && !ext.toWeb) out.push("extensionNoWeb");
+  return out;
+}
+function drawnFills(node, styles) {
+  if (node.type === "VECTOR" || node.type === "BOOLEAN") {
+    const p = vectorFillPaint(node, styles);
+    return p ? [p] : [];
+  }
+  return resolvedFills(node, styles).filter((f) => f.visible !== false);
+}
+function featuresOf(node, styles) {
+  const out = new Set(kindFeatures(node));
+  const n = node;
+  if (node.type === "ELLIPSE" && n.arcData && (n.arcData.innerRadius > 0 || Math.abs(Math.abs(n.arcData.endAngle - n.arcData.startAngle) - 2 * Math.PI) > 1e-3)) out.add("arc");
+  if (node.type === "TEXT" && n.textPath) out.add("textOnPath");
+  else if (node.type === "TEXT" && n.textArea) out.add("textInShape");
+  if (n.isMask) out.add("mask");
+  if (n.isMaskGroup) out.add("maskGroup");
+  if (is3DContext(node)) out.add("scene3d");
+  if (node.type === "IMAGE" && activeAdjustments(n.adjustments).length > 0) out.add("imageAdjustments");
+  for (const f of drawnFills(node, styles)) out.add(`paint:${f.type}`);
+  if (resolvedStrokes(node, styles).some((s) => s.alignment === "OUTSIDE")) out.add("strokeOutside");
+  for (const e of effectsOf(node, styles)) if (e.visible !== false && draws(e)) out.add(`effect:${e.type}`);
+  return [...out];
+}
+
+// lib/io/capability/index.ts
+var RANK = { native: 0, approx: 1, vector: 2, raster: 3 };
+function worst(features, target) {
+  let verdict = "native";
+  let reasons = [];
+  const dropped = [];
+  for (const f of features) {
+    const v = SUPPORT[f][target];
+    if (v === "none") {
+      dropped.push(f);
+      continue;
+    }
+    if (RANK[v] > RANK[verdict]) {
+      verdict = v;
+      reasons = [f];
+    } else if (v === verdict && v !== "native") reasons.push(f);
+  }
+  return { verdict, reasons, dropped };
+}
+function capability(node, target, styles) {
+  const features = featuresOf(node, styles);
+  let { verdict, reasons, dropped } = worst(features, target);
+  if (target === "css" && verdict === "vector") {
+    const svg = worst(features, "svg");
+    if (svg.verdict === "raster") ({ verdict, reasons } = { verdict: "raster", reasons: svg.reasons });
+  }
+  if (target === "css" && node.type === "TEXT" && (verdict === "native" || verdict === "approx") && dropped.some((f) => f.startsWith("paint:"))) ({ verdict, reasons } = { verdict: "raster", reasons: dropped.filter((f) => f.startsWith("paint:")) });
+  if (target === "css" && (verdict === "vector" || verdict === "raster")) dropped = [];
+  const says = verdict === "native" || verdict === "approx";
+  return { target, verdict, reasons, dropped, reason: says ? "" : featureName(reasons[0]) };
+}
+function renderMode(node, opts = {}) {
+  const { verdict } = capability(node, "css", opts.styles);
+  if (verdict === "native" || verdict === "approx") return "dom";
+  if (opts.live) return "island";
+  return verdict;
+}
+
+export {
+  kindFeatures,
+  SUPPORT,
+  PAINT_NAMES,
+  EFFECT_NAMES,
+  featureName,
+  movesItself,
+  isLive,
+  capability,
+  renderMode
+};

package/dist/chunks/chunk-BPEDJCYE.js

@@ -0,0 +1,106 @@
+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 {
+  KONTOR,
+  grot,
+  lockup,
+  routeGeo,
+  routeMap,
+  routePaths,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-LTD3JYZQ.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-572QBW5I.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/style-swiss-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS email header";
+var DURATION = 6e3;
+var MAP = { w: 240, h: 240, pad: 30, weight: 6 };
+var cues = [
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 400, amount: 0.05 } },
+  { layer: "Flag", preset: "flash", at: 4e3, params: { duration: 600, ease: ease.hold } }
+];
+var style_swiss_header_default = defineTemplate({
+  id: "email-saas-style-swiss-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a launch email in the Swiss typographic style: the sender, the news, the button and a transit-style route diagram with its late stretch in red are all on the first frame (for Outlook), then a shipment marker travels the rail reroute and back, the flag blinks and the button nudges, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "swiss", "international typographic style", "grid", "b2b", "logistics", "launch", "announcement", "newsletter", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "launch", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    swissBrand(k, { offer: "Late shipments, flagged 48 hours early.", when: "Kontor 3.0 forecasts every lane two days out and reroutes in two clicks." });
+    grot(k, "Brand 16", 16, { weight: 700, lead: 1.2, spacing: -0.02 });
+    grot(k, "Label 12", 12, { weight: 600, lead: 1.3 });
+    grot(k, "Offer 28", 28, { weight: 700, lead: 1.05, spacing: -0.035 });
+    grot(k, "When 13", 13, { weight: 400, lead: 1.4 });
+    grot(k, "Button 13", 13, { weight: 700, lead: 1.2 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 13", label: "See what is new", pad: [9, 14], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 28, bottom: 0, left: 28 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    swissGrid(k, sheet, { cols: 6, margin: 28, gutter: 12, row: 60, top: 30 });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "CENTER", name: "Band" });
+    const words = k.stack(band, { width: 284, gap: 11, name: "Words" });
+    const top = k.stack(words, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 16, style: "Brand 16" });
+    k.text(top, `Release ${KONTOR.version}`, { style: "Label 12", color: "text", autoWidth: true, name: "Release" });
+    rule(k, words, "FILL", { weight: 2, name: "Top rule" });
+    k.text(words, "{{brand.offer}}", { style: "Offer 28", color: "text", name: "Offer" });
+    k.text(words, "{{brand.when}}", { style: "When 13", color: "onPaper", name: "When" });
+    k.instance(words, "Button", { Label: "See what is new" }, { name: "Open button" });
+    const map = routeMap(k, band, { ...MAP, labels: "Label 12", ink: "text", late: "primary", ground: "paper", labelInk: "text", name: "Route" });
+    const flag = k.stack(map, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 2, right: 5, bottom: 2, left: 5 }, name: "Flag", absolute: { x: 118, y: 44 } });
+    k.text(flag, `+${KONTOR.slip} h`, { style: "Label 12", color: "onPrimary", autoWidth: true, name: "Flag words" });
+    const g = routeGeo(MAP.w, MAP.h, MAP.pad), p = routePaths(g, MAP.weight * 1.1);
+    const pts = [p.point("DUI"), ...p.rail[0].points.slice(1), p.point("MIL")];
+    const S = 12;
+    const dot = k.rect(map, S, S, "primary", { name: "Shipment", absolute: { x: Math.round(pts[0].x - S / 2), y: Math.round(pts[0].y - S / 2) } });
+    const there = [0, 700, 1300, 1700, 2600], back = [3400, 4300, 4700, 5300, DURATION];
+    const xs = [...pts.map((q, i) => ({ t: there[i], v: Math.round(q.x - pts[0].x) })), ...[...pts].reverse().map((q, i) => ({ t: back[i], v: Math.round(q.x - pts[0].x) }))];
+    const ys = [...pts.map((q, i) => ({ t: there[i], v: Math.round(q.y - pts[0].y) })), ...[...pts].reverse().map((q, i) => ({ t: back[i], v: Math.round(q.y - pts[0].y) }))];
+    const keyed = (a) => a.map((x, i) => i < a.length - 1 ? { ...x, ease: ease.inOut("sine") } : x);
+    k.animate(dot, "translateX", keyed(xs));
+    k.animate(dot, "translateY", keyed(ys));
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  style_swiss_header_default
+};