@popcraft/kit 0.32.0 → 0.33.0

package/dist/chunks/chunk-BT4SHCEP.js

@@ -1,163 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  showcase,
-  showcaseStyles,
-  specimenRow
-} from "./chunk-EAB4ZF2Q.js";
-import {
-  defineLibrary
-} from "./chunk-HLBQLOTA.js";
-import {
-  Kit,
-  hex,
-  preset
-} from "./chunk-2P7ISWIA.js";
-import {
-  ease
-} from "./chunk-YYQUCS6P.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// templates/src/libraries/micro-interactions.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var TOGGLE_ON = [{ layer: "Knob", preset: "pulse", at: 120, params: { amount: 0.15, duration: 420 } }];
-var CHECKED = [
-  { layer: "Check", preset: "pop-in", at: 0, params: { duration: 360 } },
-  { layer: "Box", preset: "pulse", at: 60, params: { amount: 0.12, duration: 420 } }
-];
-var TAB_W = 132;
-var TABS = ["First", "Second", "Third"];
-var shadow = (blur, y, a) => ({ type: "DROP_SHADOW", color: hex("#101828", a), offset: { x: 0, y }, blur, spread: 0, visible: true });
-var micro_interactions_default = defineLibrary({
-  id: "lib-micro-interactions",
-  version: 1,
-  meta: {
-    name: "Micro-interactions",
-    description: "Interactive components with animated states \u2014 a button that lifts on hover and gives on press, a gliding toggle, a checkbox that ticks, tabs with a sliding underline \u2014 with text and colour inputs",
-    tags: ["animation", "micro-interactions", "components", "ui kit", "button", "toggle", "checkbox", "tabs", "hover"],
-    created: "2026-09-29",
-    updated: "2026-09-29",
-    aliases: ["web-kit-micro-interactions"]
-  },
-  motion: { components: [{ component: "Toggle/On", cues: TOGGLE_ON }, { component: "Checkbox/Checked", cues: CHECKED }] },
-  build() {
-    const k = new Kit("Micro-interaction kit", preset("web-desktop"));
-    k.brand({ paper: "#F6F7FB", text: "#141A2E", onPaper: "#5A6275", primary: "#2352D8", onPrimary: "#FFFFFF", track: "#C9CFDC", card: "#FFFFFF", boxLine: "#8A93A8", shade: "#0B1020", line: "#DDE1EA" }, { name: "Tally" });
-    showcaseStyles(k);
-    k.textStyle("Button 16", { size: 16, fontWeight: 600, lineHeight: 24 });
-    k.textStyle("Control 16", { size: 16, fontWeight: 500, lineHeight: 24 });
-    k.textStyle("Check 14", { size: 14, fontWeight: 800, lineHeight: 16, textAlign: "CENTER" });
-    k.textStyle("Tab 15", { size: 15, fontWeight: 500, lineHeight: 20, textAlign: "CENTER" });
-    k.textStyle("Tab selected 15", { size: 15, fontWeight: 700, lineHeight: 20, textAlign: "CENTER" });
-    k.textStyle("Panel title 22", { size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 });
-    k.textStyle("Panel body 15", { size: 15, fontWeight: 400, lineHeight: 22 });
-    const button = k.variantSet("Button", "State", ["Idle", "Hover", "Pressed"], {
-      direction: "HORIZONTAL",
-      width: "HUG",
-      align: "CENTER",
-      padding: 8,
-      description: "A call to action: it lifts and its shadow blooms on hover, and gives a little when pressed. Label and Accent are inputs.",
-      props: { Label: "Save changes", Accent: { color: "primary" } }
-    }, (state, id) => {
-      const bg = k.stack(id, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 10, align: "CENTER", padding: { top: 12, right: 22, bottom: 12, left: 22 }, effects: [shadow(state === "Hover" ? 18 : 6, state === "Hover" ? 8 : 2, state === "Pressed" ? 0.06 : 0.14)], name: "Background" });
-      k.propText(bg, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
-      k.bindPath(bg, "fills[#0].color", "Accent");
-      if (state === "Pressed") k.rect(bg, 1, 1, "shade", { opacity: 0.16, name: "Shade", absolute: { x: 0, y: 0 } });
-    }, (state) => state === "Hover" ? { timeline: { duration: 420 } } : state === "Pressed" ? { timeline: { duration: 180 } } : {});
-    k.changeTo("Button/Idle", "ON_HOVER", "Button/Hover", 160);
-    k.changeTo("Button/Hover", "ON_PRESS", "Button/Pressed", 80);
-    const toggle = k.variantSet("Toggle", "State", ["Off", "On"], {
-      direction: "HORIZONTAL",
-      width: "HUG",
-      gap: 12,
-      align: "CENTER",
-      padding: 4,
-      description: "An on/off switch: click it and the knob glides across as the track takes the brand colour. Label is an input.",
-      props: { Label: "Weekly summary email" }
-    }, (state, id) => {
-      const track = k.stack(id, { direction: "HORIZONTAL", width: 44, height: 24, radius: 12, padding: 3, align: "CENTER", justify: state === "On" ? "MAX" : "MIN", fill: state === "On" ? "primary" : "track", name: "Track" });
-      k.ellipse(track, 18, "card", { name: "Knob", effects: [shadow(3, 1, 0.2)] });
-      k.propText(id, "Label", { style: "Control 16", color: "text", autoWidth: true });
-    }, (state) => state === "On" ? { timeline: { duration: 600 } } : {});
-    k.changeTo("Toggle/Off", "ON_CLICK", "Toggle/On", 220, "EASE_IN_OUT");
-    k.changeTo("Toggle/On", "ON_CLICK", "Toggle/Off", 220, "EASE_IN_OUT");
-    const checkbox = k.variantSet("Checkbox", "State", ["Unchecked", "Checked"], {
-      direction: "HORIZONTAL",
-      width: "HUG",
-      gap: 10,
-      align: "CENTER",
-      padding: 4,
-      description: "A checkbox: click it and the box fills as the tick pops in. Label is an input.",
-      props: { Label: "Send me product updates" }
-    }, (state, id) => {
-      const box = k.stack(id, { direction: "HORIZONTAL", width: 20, height: 20, radius: 5, align: "CENTER", justify: "CENTER", fill: state === "Checked" ? "primary" : "card", ...state === "Checked" ? {} : { stroke: { color: "boxLine", width: 1.5 } }, name: "Box" });
-      if (state === "Checked") k.text(box, "\u2714", { style: "Check 14", color: "onPrimary", autoWidth: true, name: "Check" });
-      k.propText(id, "Label", { style: "Control 16", color: "text", autoWidth: true });
-    }, (state) => state === "Checked" ? { timeline: { duration: 600 } } : {});
-    k.changeTo("Checkbox/Unchecked", "ON_CLICK", "Checkbox/Checked", 160);
-    k.changeTo("Checkbox/Checked", "ON_CLICK", "Checkbox/Unchecked", 160);
-    const tabs = k.variantSet("Tabs", "Selected", TABS, {
-      direction: "VERTICAL",
-      width: "HUG",
-      description: "Three tabs with a sliding underline: click a tab and the underline glides under it. The tab names are inputs.",
-      props: { First: "Overview", Second: "Activity", Third: "Settings" }
-    }, (state, id) => {
-      const bar = k.stack(id, { direction: "HORIZONTAL", width: "HUG", name: "Bar" });
-      TABS.forEach((t) => {
-        const cell = k.stack(bar, { direction: "HORIZONTAL", width: TAB_W, align: "CENTER", justify: "CENTER", padding: { top: 14, right: 8, bottom: 14, left: 8 }, name: `Tab ${t}` });
-        k.propText(cell, t, { style: t === state ? "Tab selected 15" : "Tab 15", color: t === state ? "text" : "onPaper", autoWidth: true, name: t });
-      });
-      k.rect(id, TAB_W * TABS.length, 1, "line", { name: "Rule" });
-      k.rect(id, TAB_W, 3, "primary", { radius: 2, name: "Indicator", absolute: { x: TABS.indexOf(state) * TAB_W, y: 45 } });
-    });
-    for (const state of TABS) for (const t of TABS) if (t !== state) {
-      const cell = k.named(tabs[state], `Tab ${t}`)[0];
-      k.changeTo(`Tabs/${state}`, "ON_CLICK", `Tabs/${t}`, 260, "EASE_IN_OUT", cell);
-    }
-    k.finish();
-    for (const bg of k.named(button.Pressed, "Background")) for (const s of k.named(bg, "Shade")) k.patch(s, { width: k.node(bg).width, height: k.node(bg).height, cornerRadius: 10 });
-    const hoverBg = k.named(button.Hover, "Background")[0], pressedBg = k.named(button.Pressed, "Background")[0];
-    k.animate(hoverBg, "translateY", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 220, v: -2 }]);
-    k.animate(hoverBg, "effects[#0].blur", [{ t: 0, v: 6, ease: ease.out("expo") }, { t: 420, v: 18 }]);
-    k.animate(pressedBg, "scaleX", [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
-    k.animate(pressedBg, "scaleY", [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
-    k.cues(toggle.On, TOGGLE_ON);
-    k.cues(checkbox.Checked, CHECKED);
-    const sheet = k.sheet;
-    showcase(k, sheet, { title: "Micro-interaction kit", intro: "Every state of every control, playing its own move. Present the file and hover or press the buttons, flip the toggles, tick the boxes and pick a tab. Drop the components from Assets into any screen; the labels and the button colour are inputs.", duration: 4e3 });
-    const buttons = specimenRow(k, sheet, "Button \u2014 idle, hover, pressed");
-    k.instance(buttons, "Button/Idle", { Label: "Save changes" }, { name: "Button" });
-    k.instance(buttons, "Button/Hover", { Label: "Save changes" }, { name: "Button hover", playback: { loop: "pingpong", start: 300 } });
-    k.instance(buttons, "Button/Pressed", { Label: "Save changes" }, { name: "Button pressed", playback: { loop: "pingpong", start: 600 } });
-    k.instance(buttons, "Button/Idle", { Label: "Invite a teammate", Accent: hex("#0F7B4E") }, { name: "Button" });
-    const toggles = specimenRow(k, sheet, "Toggle \u2014 off, on");
-    k.instance(toggles, "Toggle/Off", { Label: "Weekly summary email" }, { name: "Toggle" });
-    k.instance(toggles, "Toggle/On", { Label: "Friday timesheet reminder" }, { name: "Toggle on", playback: { start: 400 } });
-    const checks = specimenRow(k, sheet, "Checkbox \u2014 unchecked, checked");
-    k.instance(checks, "Checkbox/Unchecked", { Label: "Send me product updates" }, { name: "Checkbox" });
-    k.instance(checks, "Checkbox/Checked", { Label: "Round entries to 15 minutes" }, { name: "Checkbox checked", playback: { start: 700 } });
-    const tabRow = specimenRow(k, sheet, "Tabs", { gap: 48 });
-    k.instance(tabRow, "Tabs/First", { First: "Overview", Second: "Timesheets", Third: "Settings" }, { name: "Tabs" });
-    k.instance(tabRow, "Tabs/Third", { First: "Week", Second: "Month", Third: "Year" }, { name: "Tabs" });
-    const panel = k.stack(sheet, { width: 760, gap: 20, radius: 16, stroke: { color: "line", width: 1 }, padding: 32, name: "Settings panel" });
-    k.text(panel, "Notification settings", { style: "Panel title 22", color: "text", name: "Panel title" });
-    k.instance(panel, "Tabs/First", { First: "Email", Second: "Mobile", Third: "Slack" }, { name: "Panel tabs" });
-    k.text(panel, "Choose what Tally sends you about your team\u2019s hours. You can change this at any time.", { style: "Panel body 15", color: "onPaper", name: "Panel body" });
-    k.instance(panel, "Toggle/On", { Label: "Weekly summary every Monday at 9:00" }, { name: "Setting" });
-    k.instance(panel, "Toggle/Off", { Label: "A reminder when a timesheet is late" }, { name: "Setting" });
-    k.instance(panel, "Checkbox/Checked", { Label: "Include billable hours by client" }, { name: "Setting check" });
-    const actions = k.stack(panel, { direction: "HORIZONTAL", gap: 12, justify: "MAX", name: "Actions" });
-    k.instance(actions, "Button/Idle", { Label: "Save changes" }, { name: "Save" });
-    return k.finish();
-  }
-});
-
-export {
-  micro_interactions_default
-};

package/dist/chunks/chunk-BVAEGM2L.js

@@ -1,454 +0,0 @@
-import { createRequire as __popcraftRequire } from 'node:module';
-import { fileURLToPath as __popcraftPath } from 'node:url';
-import { dirname as __popcraftDirname } from 'node:path';
-const require = __popcraftRequire(import.meta.url);
-const __filename = __popcraftPath(import.meta.url);
-const __dirname = __popcraftDirname(__filename);
-import {
-  flattenPaths,
-  getWorldTransform,
-  init_flatten,
-  init_scene_graph,
-  unmirroredMatrix
-} from "./chunk-MQ66HDKC.js";
-import {
-  init_shape_to_path,
-  shapeToVectorPath
-} from "./chunk-4VICNBUI.js";
-import {
-  apply,
-  init_transform,
-  invert,
-  multiply
-} from "./chunk-X53QDCNX.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-FFS4SO7R.js";
-
-// lib/engine/text/text-path.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-init_scene_graph();
-init_transform();
-init_shape_to_path();
-init_flatten();
-function polylineOf(pts, closed) {
-  const cum = [0];
-  for (let i = 2; i < pts.length; i += 2) cum.push(cum[cum.length - 1] + Math.hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]));
-  return { pts, cum, length: cum[cum.length - 1], closed };
-}
-function pointAt(p, s, extend = false) {
-  const n = p.cum.length;
-  if (n < 2 || p.length <= 0) return { x: p.pts[0] ?? 0, y: p.pts[1] ?? 0, angle: 0 };
-  let over = 0;
-  if (p.closed) s = (s % p.length + p.length) % p.length;
-  else if (s < 0) {
-    over = extend ? s : 0;
-    s = 0;
-  } else if (s > p.length) {
-    over = extend ? s - p.length : 0;
-    s = p.length;
-  }
-  let lo = 0, hi = n - 1;
-  while (hi - lo > 1) {
-    const mid = lo + hi >> 1;
-    if (p.cum[mid] <= s) lo = mid;
-    else hi = mid;
-  }
-  while (hi < n - 1 && p.cum[hi] - p.cum[lo] <= 0) hi++;
-  while (lo > 0 && p.cum[hi] - p.cum[lo] <= 0) lo--;
-  const seg = p.cum[hi] - p.cum[lo];
-  const t = seg > 0 ? (s - p.cum[lo]) / seg : 0;
-  const x0 = p.pts[lo * 2], y0 = p.pts[lo * 2 + 1], x1 = p.pts[hi * 2], y1 = p.pts[hi * 2 + 1];
-  const angle = Math.atan2(y1 - y0, x1 - x0);
-  const x = x0 + (x1 - x0) * t, y = y0 + (y1 - y0) * t;
-  return over ? { x: x + Math.cos(angle) * over, y: y + Math.sin(angle) * over, angle } : { x, y, angle };
-}
-function reseamAt(p, s) {
-  if (!p.closed || p.length <= 0) return p.pts;
-  s = (s % p.length + p.length) % p.length;
-  const n = p.cum.length;
-  let i = 0;
-  while (i < n - 2 && p.cum[i + 1] <= s) i++;
-  const at = pointAt(p, s);
-  const out = [at.x, at.y];
-  for (let k = 1; k < n; k++) {
-    const j = (i + k) % (n - 1);
-    out.push(p.pts[j * 2], p.pts[j * 2 + 1]);
-  }
-  out.push(at.x, at.y);
-  return out;
-}
-function reversePolyline(p) {
-  const out = [];
-  for (let i = p.pts.length - 2; i >= 0; i -= 2) out.push(p.pts[i], p.pts[i + 1]);
-  return polylineOf(out, p.closed);
-}
-function bboxOf(pts) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (let i = 0; i < pts.length; i += 2) {
-    if (pts[i] < minX) minX = pts[i];
-    if (pts[i] > maxX) maxX = pts[i];
-    if (pts[i + 1] < minY) minY = pts[i + 1];
-    if (pts[i + 1] > maxY) maxY = pts[i + 1];
-  }
-  return { minX, minY, maxX, maxY };
-}
-function normalizeClosed(pts) {
-  let n = pts.length / 2;
-  if (n >= 2 && pts[0] === pts[pts.length - 2] && pts[1] === pts[pts.length - 1]) n--;
-  if (n < 3) return pts;
-  const ring = pts.slice(0, n * 2);
-  let area = 0;
-  for (let i = 0; i < n; i++) {
-    const j = (i + 1) % n;
-    area += ring[i * 2] * ring[j * 2 + 1] - ring[j * 2] * ring[i * 2 + 1];
-  }
-  if (area < 0) {
-    const rev = [];
-    for (let i = n - 1; i >= 0; i--) rev.push(ring[i * 2], ring[i * 2 + 1]);
-    ring.splice(0, ring.length, ...rev);
-  }
-  const { minX, maxX } = bboxOf(ring);
-  const cx = (minX + maxX) / 2;
-  let bestY = Infinity, bestSeg = -1, bestX = cx;
-  for (let i = 0; i < n; i++) {
-    const j = (i + 1) % n;
-    const x0 = ring[i * 2], y0 = ring[i * 2 + 1], x1 = ring[j * 2], y1 = ring[j * 2 + 1];
-    if ((x0 - cx) * (x1 - cx) > 0 || x0 === x1 && x0 !== cx) continue;
-    const t = x1 === x0 ? 0 : (cx - x0) / (x1 - x0);
-    const y = y0 + (y1 - y0) * t;
-    if (y < bestY) {
-      bestY = y;
-      bestSeg = i;
-      bestX = x0 + (x1 - x0) * t;
-    }
-  }
-  if (bestSeg < 0) return [...ring, ring[0], ring[1]];
-  const out = [bestX, bestY];
-  for (let k = 1; k <= n; k++) {
-    const i = (bestSeg + k) % n;
-    const x = ring[i * 2], y = ring[i * 2 + 1];
-    if (x !== out[out.length - 2] || y !== out[out.length - 1]) out.push(x, y);
-  }
-  out.push(bestX, bestY);
-  return out;
-}
-function arcPolyline(lineWidth, bend) {
-  const b = Math.max(-100, Math.min(100, bend)) / 100;
-  const w = Math.max(1, lineWidth);
-  if (Math.abs(b) < 1e-3) return polylineOf([0, 0, w, 0], false);
-  const sweep = Math.abs(b) * Math.PI * 2;
-  const r = w / sweep;
-  const steps = Math.max(8, Math.ceil(sweep * 24));
-  const pts = [];
-  const mirror = b > 0 ? 1 : -1;
-  const start = -Math.PI / 2 - sweep / 2;
-  for (let i = 0; i <= steps; i++) {
-    const a = start + sweep * (i / steps);
-    pts.push(r * Math.cos(a), r * Math.sin(a) * mirror);
-  }
-  return polylineOf(pts, Math.abs(b) >= 0.999);
-}
-function circlePolyline(radius) {
-  const r = Math.max(1, radius);
-  const steps = Math.max(48, Math.min(720, Math.ceil(r / 2)));
-  const pts = [];
-  for (let i = 0; i <= steps; i++) {
-    const a = -Math.PI / 2 + Math.PI * 2 * i / steps;
-    pts.push(r + r * Math.cos(a), r + r * Math.sin(a));
-  }
-  return polylineOf(pts, true);
-}
-var defaultCircleRadius = (lineWidth) => Math.max(8, lineWidth / (Math.PI * 2 * 0.8));
-function wavePolyline(lineWidth, amplitude, frequency) {
-  const len = Math.max(1, lineWidth), amp = Math.max(0, amplitude), f = Math.max(0.1, Math.min(20, frequency));
-  const build = (w2) => {
-    const steps = Math.max(32, Math.ceil(f * 48));
-    const pts = [];
-    for (let i = 0; i <= steps; i++) {
-      const x = w2 * i / steps;
-      pts.push(x, -amp * Math.sin(Math.PI * 2 * f * x / w2));
-    }
-    return polylineOf(pts, false);
-  };
-  let w = len, p = build(w);
-  for (let k = 0; k < 6 && Math.abs(p.length - len) > 0.25; k++) {
-    w *= len / p.length;
-    p = build(w);
-  }
-  return p;
-}
-function nodeOutlineInTextSpace(nodes, textId, shapeId) {
-  const shape = nodes[shapeId], text = nodes[textId];
-  if (!shape || !text || shapeId === textId) return null;
-  const vps = shape.type === "VECTOR" ? shape.paths ?? [] : [shapeToVectorPath(shape)].filter(Boolean);
-  const withPoints = vps.filter((vp) => vp && vp.points?.length);
-  if (!withPoints.length) return null;
-  const pw = getWorldTransform({ nodes }, shapeId), tw = getWorldTransform({ nodes }, textId);
-  const toText = invert(unmirroredMatrix(tw, text.width, text.height));
-  if (!toText) return null;
-  const m = multiply(toText, unmirroredMatrix(pw, shape.width, shape.height));
-  const out = [];
-  for (const vp of withPoints) {
-    const flat = flattenPaths([vp])[0];
-    if (!flat || flat.length < 4) continue;
-    const pts = [];
-    for (let i = 0; i < flat.length; i += 2) pts.push(...apply(m, flat[i], flat[i + 1]));
-    const closed = !!vp.closed;
-    if (closed && (pts[0] !== pts[pts.length - 2] || pts[1] !== pts[pts.length - 1])) pts.push(pts[0], pts[1]);
-    out.push({ pts, closed });
-  }
-  return out.length ? out : null;
-}
-function nodePathPolyline(nodes, textId, pathId) {
-  const first = nodeOutlineInTextSpace(nodes, textId, pathId)?.[0];
-  if (!first) return null;
-  return polylineOf(first.closed ? normalizeClosed(first.pts) : first.pts, first.closed);
-}
-function attachTextPath(node, nodes) {
-  const t = node;
-  const tp = t.textPath;
-  if (tp?.mode === "PATH" && tp.pathId) {
-    const poly = nodePathPolyline(nodes, t.id, tp.pathId);
-    return { ...node, textPathPolyline: poly?.pts ?? null, textPathClosed: poly?.closed ?? false };
-  }
-  if (!tp && t.textArea?.shapeId) {
-    const rings = nodeOutlineInTextSpace(nodes, t.id, t.textArea.shapeId)?.filter((r) => r.closed).map((r) => r.pts) ?? null;
-    return { ...node, textAreaRings: rings?.length ? rings : null };
-  }
-  return node;
-}
-function polylineFor(node, lineWidth) {
-  const tp = node.textPath;
-  if (!tp) return null;
-  switch (tp.mode) {
-    case "ARC":
-      return Math.abs(tp.bend ?? 0) < 1e-3 ? null : arcPolyline(lineWidth, tp.bend ?? 0);
-    case "CIRCLE":
-      return circlePolyline(tp.radius ?? defaultCircleRadius(lineWidth));
-    case "WAVE":
-      return wavePolyline(lineWidth, tp.amplitude ?? (node.fontSize ?? 16) * 0.5, tp.frequency ?? 1.5);
-    default:
-      return node.textPathPolyline && node.textPathPolyline.length >= 4 ? polylineOf(node.textPathPolyline, !!node.textPathClosed) : null;
-  }
-}
-var ownsPath = (tp) => !!tp && tp.mode !== "PATH";
-function bracketRange(tp, path) {
-  const L = path.length;
-  const start = (tp.offset ?? 0) * L;
-  if (path.closed) {
-    let end2 = tp.endOffset === void 0 ? start + L : tp.endOffset * L;
-    while (end2 <= start + 1e-6) end2 += L;
-    while (end2 > start + L + 1e-6) end2 -= L;
-    return [start, end2];
-  }
-  const end = Math.max(start, Math.min(L, (tp.endOffset ?? 1) * L));
-  return [Math.max(0, Math.min(L, start)), end];
-}
-function effectLinear(effect, angle, at, center) {
-  const c = Math.cos(angle), s = Math.sin(angle);
-  switch (effect) {
-    // Vertical edges stay vertical, the baseline follows the tangent.
-    case "SKEW":
-      return [c, s, 0, 1];
-    // Horizontal edges stay horizontal (foreshortened as the path turns away), vertical ones stand on the normal.
-    case "RIBBON":
-      return [c, 0, -s, c];
-    // Upright, unturned: each letter's baseline start sits on the path.
-    case "STAIR":
-      return [1, 0, 0, 1];
-    // Vertical edges point at the path's centre.
-    case "GRAVITY": {
-      const dx = center[0] - at.x, dy = center[1] - at.y, d = Math.hypot(dx, dy);
-      return d > 1e-6 ? [c, s, dx / d, dy / d] : [c, s, -s, c];
-    }
-    default:
-      return [c, s, -s, c];
-  }
-}
-var mapPoint = (m, px, py, x, y) => [px + m[0] * x + m[2] * y, py + m[1] * x + m[3] * y];
-function lineOf(lines, index) {
-  let lo = 0, hi = lines.length - 1;
-  while (lo < hi) {
-    const mid = lo + hi + 1 >> 1;
-    if (lines[mid].startIndex <= index) lo = mid;
-    else hi = mid - 1;
-  }
-  return lo;
-}
-function applyTextPath(layout, path, tp, rebase = true) {
-  const effect = tp.effect ?? "RAINBOW";
-  const flip = !!tp.flip;
-  const L = path.length;
-  const range = bracketRange(tp, path);
-  const poly = flip ? reversePolyline(path) : path;
-  const [s0, s1] = flip ? [L - range[1], L - range[0]] : range;
-  const avail = s1 - s0;
-  const clip = tp.overflow !== "VISIBLE";
-  const bb = bboxOf(path.pts);
-  const center = [(bb.minX + bb.maxX) / 2, (bb.minY + bb.maxY) / 2];
-  let ascent = 0, descent = 0;
-  for (const g of layout.instances) {
-    const f = g.font;
-    const s = g.unitScale ?? 0;
-    ascent = Math.max(ascent, f?.ascent && s ? f.ascent * s : g.fontSize * 0.8);
-    descent = Math.max(descent, f?.descent && s ? -f.descent * s : g.fontSize * 0.2);
-  }
-  const placementDown = tp.placement === "ASCENDER" ? ascent : tp.placement === "DESCENDER" ? -descent : tp.placement === "CENTER" ? (ascent - descent) / 2 : 0;
-  const down0 = placementDown - (tp.baselineShift ?? 0);
-  const spacing = tp.spacing ?? 0;
-  const glyphText = layout.glyphs ?? [];
-  const srcLines = layout.lines.length ? layout.lines : [{ startIndex: 0, endIndex: layout.instances.length, width: layout.contentWidth, height: 0, x: 0, y: 0, isNewParagraph: true }];
-  const firstBaseline = srcLines[0].y + srcLines[0].height * 0.8;
-  const lines = srcLines.map((line) => {
-    let n = 0;
-    for (let i = line.startIndex; i < Math.min(line.endIndex, glyphText.length); i++) if (glyphText[i].char !== "\n") n++;
-    if (!glyphText.length) n = line.endIndex - line.startIndex;
-    const w = line.width;
-    const natural = w + spacing * Math.max(0, n - 1);
-    let gap = spacing, base = s0;
-    if (tp.align === "JUSTIFY" && n > 1) gap = Math.max(-(w / n) * 0.6, spacing + (avail - natural) / (n - 1));
-    else if (tp.align === "CENTER" || tp.align === "JUSTIFY" && n <= 1) base = s0 + (avail - natural) / 2;
-    else if (tp.align === "RIGHT") base = s1 - natural;
-    return { startIndex: line.startIndex, endIndex: line.endIndex, base, gap, x0: line.x, down: down0 + (line.y + line.height * 0.8 - firstBaseline) };
-  });
-  const instances = [];
-  let overflow = false;
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const g of layout.instances) {
-    const li = lineOf(srcLines, g.index ?? 0);
-    const pl = lines[li];
-    if (!pl) continue;
-    const pen = g.penX ?? g.x;
-    const baseline = g.baseline ?? g.y + g.height;
-    const adv = (g.index !== void 0 ? layout.glyphAdvances[g.index] : void 0) ?? g.width;
-    const k = Math.max(0, (g.index ?? pl.startIndex) - pl.startIndex);
-    const xr = pen - pl.x0;
-    const startArc = pl.base + xr + pl.gap * k;
-    if (clip && (startArc < s0 - 0.5 || startArc + adv > s1 + 0.5)) {
-      overflow = true;
-      continue;
-    }
-    const anchor = effect === "STAIR" ? 0 : adv / 2;
-    const at = pointAt(poly, startArc + anchor, !clip);
-    const m = effectLinear(effect, at.angle, at, center);
-    const ox = g.x - pen - anchor, oy = g.y - baseline + pl.down;
-    const [x, y] = mapPoint(m, at.x, at.y, ox, oy);
-    const [px, py] = mapPoint(m, at.x, at.y, -anchor, pl.down);
-    instances.push(effect === "RAINBOW" ? { ...g, x, y, angle: at.angle, xform: void 0, penX: px, baseline: py } : { ...g, x, y, angle: at.angle, xform: m, penX: px, baseline: py });
-    for (const [cx, cy] of [[ox, oy], [ox + g.width, oy], [ox, oy + g.height], [ox + g.width, oy + g.height]]) {
-      const [wx, wy] = mapPoint(m, at.x, at.y, cx, cy);
-      if (wx < minX) minX = wx;
-      if (wx > maxX) maxX = wx;
-      if (wy < minY) minY = wy;
-      if (wy > maxY) maxY = wy;
-    }
-  }
-  if (!instances.length) {
-    minX = center[0];
-    maxX = center[0];
-    minY = center[1];
-    maxY = center[1];
-  }
-  const dx = rebase ? minX : 0, dy = rebase ? minY : 0;
-  if (dx || dy) for (const g of instances) {
-    g.x -= dx;
-    g.y -= dy;
-    g.penX -= dx;
-    g.baseline -= dy;
-  }
-  const shift = (pts) => dx || dy ? pts.map((v, i) => v - (i % 2 ? dy : dx)) : pts;
-  const pathMap = {
-    pts: shift(poly.pts),
-    closed: poly.closed,
-    basePts: shift(path.pts),
-    range,
-    flip,
-    effect,
-    lines,
-    ascent,
-    descent,
-    center: [center[0] - dx, center[1] - dy]
-  };
-  return {
-    ...layout,
-    instances,
-    decorations: [],
-    contentWidth: maxX - minX,
-    contentHeight: maxY - minY,
-    overflow,
-    pathMap,
-    pathBox: { x: minX - dx, y: minY - dy, width: maxX - minX, height: maxY - minY }
-  };
-}
-
-// lib/engine/text/text-area.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-function insideAt(rings, y) {
-  const xs = [];
-  for (const r of rings) {
-    const n = r.length / 2;
-    for (let i = 0; i < n; i++) {
-      const j = (i + 1) % n;
-      const y0 = r[i * 2 + 1], y1 = r[j * 2 + 1];
-      if (y0 <= y && y1 > y || y1 <= y && y0 > y) {
-        const x0 = r[i * 2], x1 = r[j * 2];
-        xs.push(x0 + (y - y0) / (y1 - y0) * (x1 - x0));
-      }
-    }
-  }
-  xs.sort((a, b) => a - b);
-  const out = [];
-  for (let i = 0; i + 1 < xs.length; i += 2) if (xs[i + 1] > xs[i]) out.push({ left: xs[i], right: xs[i + 1] });
-  return out;
-}
-function intersect(a, b) {
-  const out = [];
-  let i = 0, j = 0;
-  while (i < a.length && j < b.length) {
-    const l = Math.max(a[i].left, b[j].left), r = Math.min(a[i].right, b[j].right);
-    if (r > l) out.push({ left: l, right: r });
-    if (a[i].right < b[j].right) i++;
-    else j++;
-  }
-  return out;
-}
-function areaSpan(rings, top, bottom, inset = 0) {
-  const t = top - inset, b = bottom + inset;
-  const ys = [t, t + (b - t) * 0.25, (t + b) / 2, t + (b - t) * 0.75, b];
-  for (const r of rings) for (let i = 1; i < r.length; i += 2) if (r[i] > t && r[i] < b) ys.push(r[i]);
-  let spans = null;
-  for (const y of ys) {
-    const at = insideAt(rings, y);
-    spans = spans ? intersect(spans, at) : at;
-    if (!spans.length) return null;
-  }
-  let best = null;
-  for (const s of spans ?? []) {
-    const l = s.left + inset, r = s.right - inset;
-    if (r - l > 0 && (!best || r - l > best.right - best.left)) best = { left: l, right: r };
-  }
-  return best;
-}
-function areaBounds(rings) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const r of rings) for (let i = 0; i < r.length; i += 2) {
-    if (r[i] < minX) minX = r[i];
-    if (r[i] > maxX) maxX = r[i];
-    if (r[i + 1] < minY) minY = r[i + 1];
-    if (r[i + 1] > maxY) maxY = r[i + 1];
-  }
-  return Number.isFinite(minX) ? { x: minX, y: minY, width: maxX - minX, height: maxY - minY } : { x: 0, y: 0, width: 0, height: 0 };
-}
-
-export {
-  polylineOf,
-  reseamAt,
-  nodeOutlineInTextSpace,
-  attachTextPath,
-  polylineFor,
-  ownsPath,
-  applyTextPath,
-  areaSpan,
-  areaBounds
-};