@theodo-group/epure 0.1.0 → 0.2.0

package/dist-lib/chunk-7YSWFGM7.js

@@ -0,0 +1,1125 @@
+import {
+  iconUrlById
+} from "./chunk-KBK6AYWD.js";
+
+// src/renderer/Area.tsx
+import { useCallback, useRef } from "react";
+
+// src/style/palette.ts
+var PALETTE = {
+  // Black/gray stay neutral. Chromatic hues use Tailwind 500 — the most
+  // saturated step before colors start losing chroma to darken — for punchy
+  // strokes, paired with pale 50 fills so colored bodies remain readable.
+  black: { solid: "#0c0a09", fill: "#fafaf9" },
+  gray: { solid: "#78716c", fill: "#e7e5e4" },
+  red: { solid: "#ef4444", fill: "#fef2f2" },
+  orange: { solid: "#f97316", fill: "#fff7ed" },
+  yellow: { solid: "#eab308", fill: "#fefce8" },
+  green: { solid: "#22c55e", fill: "#f0fdf4" },
+  teal: { solid: "#14b8a6", fill: "#f0fdfa" },
+  blue: { solid: "#3b82f6", fill: "#eff6ff" },
+  purple: { solid: "#a855f7", fill: "#faf5ff" },
+  pink: { solid: "#ec4899", fill: "#fdf2f8" }
+};
+var resolveFill = (fc) => {
+  if (fc === void 0) return null;
+  if (fc === "transparent") return "transparent";
+  if (fc === "white") return "#ffffff";
+  return fillOf(fc);
+};
+var TEXT_SIZE = {
+  S: 10,
+  M: 12,
+  L: 14,
+  XL: 18
+};
+var STROKE_WIDTH = {
+  S: 1,
+  M: 1.5,
+  L: 2.5,
+  XL: 4
+};
+var dashArrayFor = (style, width = 1.5) => {
+  if (style === "solid") return void 0;
+  if (style === "dashed") return `${width * 4} ${width * 3}`;
+  return `${width} ${width * 2}`;
+};
+var solidOf = (color) => PALETTE[color ?? "black"].solid;
+var fillOf = (color) => PALETTE[color ?? "gray"].fill;
+
+// src/renderer/dragState.ts
+var depth = 0;
+var beginDrag = () => {
+  if (depth++ === 0) document.body.classList.add("epure-dragging");
+};
+var endDrag = () => {
+  if (depth > 0 && --depth === 0) {
+    document.body.classList.remove("epure-dragging");
+  }
+};
+
+// src/renderer/Area.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Area = ({
+  area,
+  selected,
+  onSelect,
+  onDragStart,
+  onDragMove
+}) => {
+  const draggingRef = useRef(false);
+  const startRef = useRef({ mx: 0, my: 0 });
+  const handleMouseDown = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onSelect?.(area.id, event.shiftKey);
+      if (!onDragMove) return;
+      const svg = event.target.ownerSVGElement;
+      if (!svg) return;
+      draggingRef.current = true;
+      beginDrag();
+      const pt = svg.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      const inverse = svg.getScreenCTM()?.inverse();
+      if (!inverse) return;
+      const sp = pt.matrixTransform(inverse);
+      startRef.current = { mx: sp.x, my: sp.y };
+      onDragStart?.(area.id);
+      const onMove = (e) => {
+        if (!draggingRef.current) return;
+        const mp = svg.createSVGPoint();
+        mp.x = e.clientX;
+        mp.y = e.clientY;
+        const inv = svg.getScreenCTM()?.inverse();
+        if (!inv) return;
+        const cur = mp.matrixTransform(inv);
+        onDragMove(area.id, cur.x - startRef.current.mx, cur.y - startRef.current.my);
+      };
+      const onUp = () => {
+        draggingRef.current = false;
+        endDrag();
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [area.id, onSelect, onDragStart, onDragMove]
+  );
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-area-id": area.id,
+      onMouseDown: handleMouseDown,
+      style: { cursor: onDragMove ? "grab" : "default" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: area.x,
+            y: area.y,
+            width: area.w,
+            height: area.h,
+            rx: 12,
+            ry: 12,
+            fill: resolveFill(area.fillColor) ?? "#f4f5f9",
+            stroke: area.borderColor ? solidOf(area.borderColor) : "#cdd2dd",
+            strokeWidth: 1,
+            strokeDasharray: dashArrayFor(area.borderStyle ?? "dashed", 1)
+          }
+        ),
+        selected ? /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: area.x - 4,
+            y: area.y - 4,
+            width: area.w + 8,
+            height: area.h + 8,
+            rx: 16,
+            ry: 16,
+            fill: "none",
+            stroke: "#3b82f6",
+            strokeWidth: 1.5,
+            strokeDasharray: "4 3",
+            pointerEvents: "none"
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var LABEL_CHAR_PX = 7;
+var LABEL_PAD_X = 10;
+var LABEL_HEIGHT = 22;
+var LABEL_FONT = 12;
+var AreaLabel = ({
+  area,
+  textScale = 1,
+  fontFamily = "Inter, system-ui, sans-serif"
+}) => {
+  if (!area.label) return null;
+  const accent = area.borderColor ? solidOf(area.borderColor) : "#5b6478";
+  const chipH = LABEL_HEIGHT * textScale;
+  const charW = LABEL_CHAR_PX * textScale;
+  const padX = LABEL_PAD_X * textScale;
+  const chipW = Math.max(40 * textScale, area.label.length * charW + padX * 2);
+  const chipX = area.x + 14;
+  const chipY = area.y - chipH / 2;
+  return /* @__PURE__ */ jsxs("g", { pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: chipX,
+        y: chipY,
+        width: chipW,
+        height: chipH,
+        rx: chipH / 2,
+        ry: chipH / 2,
+        fill: "#ffffff",
+        stroke: accent,
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: chipX + chipW / 2,
+        y: chipY + chipH / 2 + 0.5,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fontFamily,
+        fontSize: LABEL_FONT * textScale,
+        fontWeight: 600,
+        fill: accent,
+        children: area.label
+      }
+    )
+  ] });
+};
+
+// src/renderer/Edge.tsx
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var safeId = (id) => id.replace(/[^A-Za-z0-9_-]/g, (c) => `_${c.charCodeAt(0)}_`);
+var EdgeDefs = () => /* @__PURE__ */ jsxs2("defs", { children: [
+  /* @__PURE__ */ jsx2("filter", { id: "ep-badge-shadow", x: "-60%", y: "-60%", width: "220%", height: "220%", children: /* @__PURE__ */ jsx2("feGaussianBlur", { stdDeviation: "1.6" }) }),
+  /* @__PURE__ */ jsx2("filter", { id: "ep-node-shadow", x: "-20%", y: "-20%", width: "140%", height: "160%", children: /* @__PURE__ */ jsx2(
+    "feDropShadow",
+    {
+      dx: "0",
+      dy: "2",
+      stdDeviation: "4",
+      floodColor: "#0f172a",
+      floodOpacity: "0.14"
+    }
+  ) }),
+  /* @__PURE__ */ jsx2("filter", { id: "ep-icon-halo", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx2("feGaussianBlur", { stdDeviation: "5" }) }),
+  /* @__PURE__ */ jsxs2("radialGradient", { id: "ep-edge-fade", children: [
+    /* @__PURE__ */ jsx2("stop", { offset: "0", stopColor: "#000" }),
+    /* @__PURE__ */ jsx2("stop", { offset: "0.55", stopColor: "#000" }),
+    /* @__PURE__ */ jsx2("stop", { offset: "1", stopColor: "#fff" })
+  ] })
+] });
+var pointsToPath = (points) => points.length === 0 ? "" : points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+var labelPillSize = (label, textScale = 1) => ({
+  w: Math.max(20 * textScale, label.length * 6 * textScale + 12 * textScale),
+  h: 16 * textScale
+});
+var directionAt = (points, end) => {
+  if (points.length < 2) return { dx: 1, dy: 0 };
+  if (end === "end") {
+    const b2 = points[points.length - 1];
+    const a2 = points[points.length - 2];
+    const dx2 = b2.x - a2.x;
+    const dy2 = b2.y - a2.y;
+    const m2 = Math.hypot(dx2, dy2) || 1;
+    return { dx: dx2 / m2, dy: dy2 / m2 };
+  }
+  const a = points[0];
+  const b = points[1];
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  const m = Math.hypot(dx, dy) || 1;
+  return { dx: dx / m, dy: dy / m };
+};
+var renderCap = (cap, at, dir, color, width) => {
+  if (cap === "none") return null;
+  const size = Math.max(3, width * 4);
+  if (cap === "dot") {
+    return /* @__PURE__ */ jsx2("circle", { cx: at.x, cy: at.y, r: size / 2, fill: color });
+  }
+  if (cap === "diamond") {
+    const sx2 = -dir.dx;
+    const sy2 = -dir.dy;
+    const px2 = -sy2;
+    const py2 = sx2;
+    const tip = { x: at.x, y: at.y };
+    const back = { x: at.x + sx2 * size, y: at.y + sy2 * size };
+    const mid = { x: at.x + sx2 * size / 2, y: at.y + sy2 * size / 2 };
+    const left2 = { x: mid.x + px2 * size / 2, y: mid.y + py2 * size / 2 };
+    const right2 = { x: mid.x - px2 * size / 2, y: mid.y - py2 * size / 2 };
+    return /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: `M ${tip.x} ${tip.y} L ${left2.x} ${left2.y} L ${back.x} ${back.y} L ${right2.x} ${right2.y} Z`,
+        fill: color
+      }
+    );
+  }
+  const sx = -dir.dx;
+  const sy = -dir.dy;
+  const px = -sy;
+  const py = sx;
+  const base = { x: at.x + sx * size, y: at.y + sy * size };
+  const left = { x: base.x + px * size / 2, y: base.y + py * size / 2 };
+  const right = { x: base.x - px * size / 2, y: base.y - py * size / 2 };
+  return /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: `M ${at.x} ${at.y} L ${left.x} ${left.y} L ${right.x} ${right.y} Z`,
+      fill: color
+    }
+  );
+};
+var STYLE_FROM_PARSER = {
+  solid: "solid",
+  dashed: "dashed",
+  dotted: "dotted"
+};
+var Edge = ({
+  edge,
+  label,
+  style: parserStyle = "solid",
+  marker = "forward",
+  selected = false,
+  onSelect,
+  textScale = 1,
+  fontFamily = "Inter, system-ui, sans-serif",
+  gridSize = 40,
+  onMoveLabel,
+  crossings
+}) => {
+  const labelDragging = useRef2(false);
+  const labelStart = useRef2({ mx: 0, my: 0, dx: 0, dy: 0 });
+  const handleLabelDown = useCallback2(
+    (event) => {
+      if (!onMoveLabel) return;
+      event.stopPropagation();
+      onSelect?.(edge.id, false);
+      const svg = event.target.ownerSVGElement;
+      const inv = svg?.getScreenCTM()?.inverse();
+      if (!svg || !inv) return;
+      const grid = gridSize || 40;
+      labelDragging.current = true;
+      beginDrag();
+      const pt = svg.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      const sp = pt.matrixTransform(inv);
+      labelStart.current = {
+        mx: sp.x,
+        my: sp.y,
+        dx: edge.labelDx ?? 0,
+        dy: edge.labelDy ?? 0
+      };
+      const onPointerMove = (e) => {
+        if (!labelDragging.current) return;
+        const curInv = svg.getScreenCTM()?.inverse();
+        if (!curInv) return;
+        const mp = svg.createSVGPoint();
+        mp.x = e.clientX;
+        mp.y = e.clientY;
+        const cur = mp.matrixTransform(curInv);
+        const ndx = labelStart.current.dx + Math.round((cur.x - labelStart.current.mx) / grid);
+        const ndy = labelStart.current.dy + Math.round((cur.y - labelStart.current.my) / grid);
+        onMoveLabel(edge.id, ndx, ndy);
+      };
+      const onPointerUp = () => {
+        labelDragging.current = false;
+        endDrag();
+        window.removeEventListener("mousemove", onPointerMove);
+        window.removeEventListener("mouseup", onPointerUp);
+      };
+      window.addEventListener("mousemove", onPointerMove);
+      window.addEventListener("mouseup", onPointerUp);
+    },
+    [edge.id, edge.labelDx, edge.labelDy, gridSize, onMoveLabel, onSelect]
+  );
+  const color = solidOf(edge.color);
+  const width = STROKE_WIDTH[edge.width ?? "M"];
+  const lineStyle = edge.lineStyle ?? STYLE_FROM_PARSER[parserStyle];
+  const dash = dashArrayFor(lineStyle, width);
+  const defaultStart = marker === "backward" || marker === "bidirectional" ? "arrow" : "none";
+  const defaultEnd = marker === "forward" || marker === "bidirectional" ? "arrow" : "none";
+  const startCap = edge.startCap ?? defaultStart;
+  const endCap = edge.endCap ?? defaultEnd;
+  const startDir = directionAt(edge.points, "start");
+  const endDir = directionAt(edge.points, "end");
+  const startPt = edge.points[0] ?? { x: 0, y: 0 };
+  const endPt = edge.points[edge.points.length - 1] ?? { x: 0, y: 0 };
+  const path = pointsToPath(edge.points);
+  const fades = crossings ?? [];
+  const maskId = fades.length > 0 ? `ep-fade-${safeId(edge.id)}` : void 0;
+  let maskRegion;
+  if (maskId && edge.points.length > 0) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of edge.points) {
+      minX = Math.min(minX, p.x);
+      minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x);
+      maxY = Math.max(maxY, p.y);
+    }
+    const pad = Math.max(...fades.map((f) => f.r)) + width + 8;
+    maskRegion = {
+      x: minX - pad,
+      y: minY - pad,
+      w: maxX - minX + pad * 2,
+      h: maxY - minY + pad * 2
+    };
+  }
+  const maskRef = maskId ? `url(#${maskId})` : void 0;
+  return /* @__PURE__ */ jsxs2("g", { "data-edge-id": edge.id, children: [
+    maskId && maskRegion ? /* @__PURE__ */ jsxs2(
+      "mask",
+      {
+        id: maskId,
+        maskUnits: "userSpaceOnUse",
+        x: maskRegion.x,
+        y: maskRegion.y,
+        width: maskRegion.w,
+        height: maskRegion.h,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "rect",
+            {
+              x: maskRegion.x,
+              y: maskRegion.y,
+              width: maskRegion.w,
+              height: maskRegion.h,
+              fill: "#fff"
+            }
+          ),
+          fades.map((f, i) => /* @__PURE__ */ jsx2("circle", { cx: f.x, cy: f.y, r: f.r, fill: "url(#ep-edge-fade)" }, i))
+        ]
+      }
+    ) : null,
+    selected ? /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: "#3b82f6",
+        strokeOpacity: 0.28,
+        strokeWidth: width + 6,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        pointerEvents: "none",
+        mask: maskRef
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: color,
+        strokeWidth: width,
+        strokeDasharray: dash,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        pointerEvents: "none",
+        mask: maskRef
+      }
+    ),
+    renderCap(startCap, startPt, startDir, color, width),
+    renderCap(endCap, endPt, endDir, color, width),
+    onSelect ? /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: Math.max(16, width * 3),
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        pointerEvents: "stroke",
+        style: { cursor: "pointer" },
+        onMouseDown: (event) => {
+          event.stopPropagation();
+          onSelect(edge.id, event.shiftKey);
+        }
+      }
+    ) : null,
+    label && edge.labelAnchor ? (() => {
+      const fontSize = 11 * textScale;
+      const { w: pillW, h: pillH } = labelPillSize(label, textScale);
+      const draggable = !!onMoveLabel;
+      return /* @__PURE__ */ jsxs2(
+        "g",
+        {
+          transform: `translate(${edge.labelAnchor.x}, ${edge.labelAnchor.y})`,
+          onMouseDown: draggable ? handleLabelDown : void 0,
+          style: draggable ? { cursor: "move" } : void 0,
+          children: [
+            /* @__PURE__ */ jsx2(
+              "rect",
+              {
+                x: -pillW / 2,
+                y: -pillH / 2,
+                width: pillW,
+                height: pillH,
+                rx: 4,
+                ry: 4,
+                fill: "#ffffff",
+                pointerEvents: draggable ? "all" : "none"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "text",
+              {
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                fontFamily,
+                fontSize,
+                fill: "#1f2430",
+                pointerEvents: "none",
+                children: label
+              }
+            )
+          ]
+        }
+      );
+    })() : null
+  ] });
+};
+
+// src/renderer/Node.tsx
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
+
+// src/renderer/richText.ts
+var LABEL_TAG_RE = /^<\s*(\/?)(b|strong|i|em|small|br|ul|li)\s*\/?\s*>/i;
+var tagKey = (raw) => {
+  const t = raw.toLowerCase();
+  if (t === "strong") return "b";
+  if (t === "em") return "i";
+  return t;
+};
+var parseRichText = (label) => {
+  const lines = [{ words: [] }];
+  let bold = 0;
+  let italic = 0;
+  let small = 0;
+  let word = "";
+  let afterList = false;
+  const cur = () => lines[lines.length - 1];
+  const flushWord = () => {
+    if (!word) return;
+    cur().words.push({
+      text: word,
+      ...bold > 0 ? { bold: true } : {},
+      ...italic > 0 ? { italic: true } : {},
+      ...small > 0 ? { small: true } : {}
+    });
+    word = "";
+  };
+  const startLine = (bullet) => {
+    flushWord();
+    const c = cur();
+    if (c.words.length === 0 && !c.bullet) {
+      if (bullet) c.bullet = true;
+      return;
+    }
+    lines.push(bullet ? { words: [], bullet: true } : { words: [] });
+  };
+  let i = 0;
+  while (i < label.length) {
+    const ch = label[i];
+    if (ch === "\n") {
+      flushWord();
+      afterList = false;
+      lines.push({ words: [] });
+      i++;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      flushWord();
+      i++;
+      continue;
+    }
+    if (ch === "<") {
+      const m = label.slice(i).match(LABEL_TAG_RE);
+      if (m) {
+        const closing = m[1] === "/";
+        const key = tagKey(m[2]);
+        if (key === "br") {
+          flushWord();
+          afterList = false;
+          lines.push({ words: [] });
+        } else if (key === "b") {
+          flushWord();
+          bold = Math.max(0, bold + (closing ? -1 : 1));
+        } else if (key === "i") {
+          flushWord();
+          italic = Math.max(0, italic + (closing ? -1 : 1));
+        } else if (key === "small") {
+          flushWord();
+          small = Math.max(0, small + (closing ? -1 : 1));
+        } else if (key === "li") {
+          if (!closing) {
+            afterList = false;
+            startLine(true);
+          } else flushWord();
+        } else if (key === "ul") {
+          flushWord();
+          if (closing) afterList = true;
+        }
+        i += m[0].length;
+        continue;
+      }
+    }
+    if (afterList) {
+      startLine(false);
+      afterList = false;
+    }
+    word += ch;
+    i++;
+  }
+  flushWord();
+  return lines;
+};
+var hasRichMarkup = (label) => /<\s*\/?\s*(b|strong|i|em|small|br|ul|li)\s*\/?\s*>/i.test(label) || label.includes("\n");
+var wrapRichText = (lines, maxChars) => {
+  const out = [];
+  for (const line of lines) {
+    if (line.words.length === 0) {
+      out.push(line.bullet ? { words: [], bullet: true } : { words: [] });
+      continue;
+    }
+    let cur = [];
+    let curLen = 0;
+    let first = true;
+    const pushSeg = () => {
+      out.push(
+        first && line.bullet ? { words: cur, bullet: true } : { words: cur }
+      );
+      first = false;
+    };
+    for (const w of line.words) {
+      const wLen = w.text.length;
+      const sep = curLen === 0 ? 0 : 1;
+      if (curLen === 0 || curLen + sep + wLen <= maxChars) {
+        cur.push(w);
+        curLen += sep + wLen;
+      } else {
+        pushSeg();
+        cur = [w];
+        curLen = wLen;
+      }
+    }
+    pushSeg();
+  }
+  return out;
+};
+
+// src/renderer/shapes/rectangle.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Rectangle = ({
+  x,
+  y,
+  w,
+  h,
+  fill = "#ffffff",
+  stroke = "#3b4252",
+  strokeWidth = 1.5,
+  strokeDasharray
+}) => /* @__PURE__ */ jsx3(
+  "rect",
+  {
+    x,
+    y,
+    width: w,
+    height: h,
+    rx: 10,
+    ry: 10,
+    fill,
+    stroke,
+    strokeWidth,
+    strokeDasharray
+  }
+);
+
+// src/renderer/shapes/cylinder.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Cylinder = ({
+  x,
+  y,
+  w,
+  h,
+  fill = "#ffffff",
+  stroke = "#3b4252",
+  strokeWidth = 1.5,
+  strokeDasharray
+}) => {
+  const rx = w / 2;
+  const ry = Math.min(h * 0.12, 12);
+  const topCy = y + ry;
+  const bodyH = h - ry * 2;
+  const path = [
+    `M ${x} ${topCy}`,
+    `a ${rx} ${ry} 0 0 0 ${w} 0`,
+    `v ${bodyH}`,
+    `a ${rx} ${ry} 0 0 1 ${-w} 0`,
+    "Z"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: path,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeDasharray
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "ellipse",
+      {
+        cx: x + rx,
+        cy: topCy,
+        rx,
+        ry,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeDasharray
+      }
+    )
+  ] });
+};
+
+// src/renderer/shapes/person.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Person = ({
+  x,
+  y,
+  w,
+  h,
+  fill = "#ffffff",
+  stroke = "#475569",
+  strokeWidth = 1.5,
+  strokeDasharray
+}) => {
+  const size = Math.min(w, h);
+  const fx = x + (w - size) / 2;
+  const fy = y + (h - size) / 2;
+  const cx = fx + size / 2;
+  const headR = size * 0.16;
+  const headCy = fy + headR + 4;
+  const bodyTop = headCy + headR + 2;
+  const bodyH = fy + size - bodyTop - 2;
+  const bodyW = size * 0.7;
+  const bodyX = cx - bodyW / 2;
+  return /* @__PURE__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsx5(
+      "circle",
+      {
+        cx,
+        cy: headCy,
+        r: headR,
+        fill,
+        stroke,
+        strokeWidth,
+        strokeDasharray
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: [
+          `M ${bodyX} ${bodyTop + bodyH}`,
+          `Q ${bodyX} ${bodyTop} ${cx} ${bodyTop}`,
+          `Q ${bodyX + bodyW} ${bodyTop} ${bodyX + bodyW} ${bodyTop + bodyH}`,
+          "Z"
+        ].join(" "),
+        fill,
+        stroke,
+        strokeWidth,
+        strokeDasharray
+      }
+    )
+  ] });
+};
+
+// src/renderer/Node.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var SHAPE_COMPONENTS = {
+  rectangle: Rectangle,
+  cylinder: Cylinder,
+  person: Person
+};
+var AVG_CHAR_PX = 6.6;
+var RESIZE_HANDLE = 8;
+var LINE_HEIGHT = 14;
+var LABEL_BELOW_GAP = 8;
+var wrapPlain = (label, w) => {
+  const maxChars = Math.max(4, Math.floor((w - 16) / AVG_CHAR_PX));
+  return wrapRichText([{ words: label.split(/\s+/).filter(Boolean).map((t) => ({ text: t })) }], maxChars);
+};
+var wrapRich = (label, w) => {
+  const maxChars = Math.max(4, Math.floor((w - 16) / AVG_CHAR_PX));
+  return wrapRichText(parseRichText(label), maxChars);
+};
+var isLineEmpty = (line) => line.words.length === 0 || line.words.every((wd) => !wd.text);
+var Node = ({
+  id,
+  shape,
+  label,
+  x,
+  y,
+  w,
+  h,
+  selected,
+  textSize,
+  textColor,
+  borderColor,
+  borderStyle,
+  fillColor,
+  icon,
+  iconPosition,
+  onSelect,
+  onMove,
+  onResize,
+  onStartEdit,
+  editing,
+  gridSize,
+  textScale = 1,
+  fontFamily = "Inter, system-ui, sans-serif"
+}) => {
+  const Shape = SHAPE_COMPONENTS[shape] ?? Rectangle;
+  const strokeColor = borderColor ? solidOf(borderColor) : "#475569";
+  const shapeFill = resolveFill(fillColor) ?? "#ffffff";
+  const dash = borderStyle ? dashArrayFor(borderStyle, 1.5) : void 0;
+  const fontSize = TEXT_SIZE[textSize ?? "M"] * textScale;
+  const lineHeight = LINE_HEIGHT * textScale;
+  const labelFill = textColor ? solidOf(textColor) : "#1f2430";
+  const labelBelow = shape === "person";
+  const iconUrl = icon && shape !== "person" ? iconUrlById(icon) : void 0;
+  const effectiveIconPos = iconPosition ?? "corner";
+  const badge = iconUrl && effectiveIconPos === "corner" && Math.min(w, h) >= 22 ? (() => {
+    const size = Math.min(Math.min(w, h) * 0.54, 66);
+    const cylinderLift = shape === "cylinder" ? Math.min(h * 0.12, 12) : 0;
+    return {
+      cx: x + w - size / 3,
+      cy: y + h - size / 3 - cylinderLift,
+      size
+    };
+  })() : null;
+  const topIcon = iconUrl && effectiveIconPos === "top" && Math.min(w, h) >= 28 ? (() => {
+    const size = Math.max(20, Math.min(Math.min(w * 0.45, h * 0.42), 56));
+    const topPad = Math.max(8, Math.min(14, h * 0.14));
+    return {
+      cx: x + w / 2,
+      cy: y + topPad + size / 2,
+      size,
+      bottom: y + topPad + size
+    };
+  })() : null;
+  const textWidth = (badge ? w - 14 : w) / textScale;
+  const labelBelowWidth = w * 2 / textScale;
+  const rich = label ? hasRichMarkup(label) ? wrapRich(label, labelBelow ? labelBelowWidth : textWidth) : wrapPlain(label, labelBelow ? labelBelowWidth : textWidth) : [];
+  const blockH = rich.length * lineHeight;
+  let startY;
+  if (labelBelow) {
+    startY = y + h + lineHeight + LABEL_BELOW_GAP * textScale;
+  } else if (topIcon) {
+    const availTop = topIcon.bottom + 4;
+    const availBottom = y + h - 2;
+    const center = (availTop + availBottom) / 2;
+    startY = Math.max(availTop + lineHeight * 0.8, center - blockH / 2 + lineHeight * 0.8);
+  } else {
+    const textCenterY = y + h / 2;
+    startY = Math.max(y + lineHeight * 0.8, textCenterY - blockH / 2 + lineHeight * 0.8);
+  }
+  const dragging = useRef3(false);
+  const dragStart = useRef3({ mx: 0, my: 0, cx: 0, cy: 0 });
+  const handlePointerDown = useCallback3(
+    (event) => {
+      event.stopPropagation();
+      const shift = event.shiftKey;
+      onSelect?.(id, shift);
+      if (!onMove) return;
+      const svg = event.target.ownerSVGElement;
+      if (!svg) return;
+      dragging.current = true;
+      beginDrag();
+      const pt = svg.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      const svgPt = pt.matrixTransform(svg.getScreenCTM()?.inverse());
+      dragStart.current = { mx: svgPt.x, my: svgPt.y, cx: x + w / 2, cy: y + h / 2 };
+      const onPointerMove = (e) => {
+        if (!dragging.current) return;
+        const mp = svg.createSVGPoint();
+        mp.x = e.clientX;
+        mp.y = e.clientY;
+        const sp = mp.matrixTransform(svg.getScreenCTM()?.inverse());
+        const dx = sp.x - dragStart.current.mx;
+        const dy = sp.y - dragStart.current.my;
+        onMove(id, dragStart.current.cx + dx, dragStart.current.cy + dy, shift);
+      };
+      const onPointerUp = () => {
+        dragging.current = false;
+        endDrag();
+        window.removeEventListener("mousemove", onPointerMove);
+        window.removeEventListener("mouseup", onPointerUp);
+      };
+      window.addEventListener("mousemove", onPointerMove);
+      window.addEventListener("mouseup", onPointerUp);
+    },
+    [id, x, y, w, h, onSelect, onMove, gridSize]
+  );
+  const handleResizeDown = useCallback3(
+    (side) => (event) => {
+      event.stopPropagation();
+      onSelect?.(id, false);
+      if (!onResize) return;
+      const svg = event.target.ownerSVGElement;
+      if (!svg) return;
+      beginDrag();
+      const onMouseMove = (e) => {
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const inv = svg.getScreenCTM()?.inverse();
+        if (!inv) return;
+        const sp = pt.matrixTransform(inv);
+        onResize(id, side, sp.x, sp.y);
+      };
+      const onMouseUp = () => {
+        endDrag();
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+      };
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    },
+    [id, onSelect, onResize]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "g",
+    {
+      "data-node-id": id,
+      onMouseDown: handlePointerDown,
+      onDoubleClick: onStartEdit ? (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onStartEdit(id);
+      } : void 0,
+      style: { cursor: onMove ? "grab" : "pointer" },
+      children: [
+        /* @__PURE__ */ jsx6("g", { filter: "url(#ep-node-shadow)", children: /* @__PURE__ */ jsx6(
+          Shape,
+          {
+            x,
+            y,
+            w,
+            h,
+            fill: shapeFill,
+            stroke: strokeColor,
+            strokeDasharray: dash
+          }
+        ) }),
+        selected ? /* @__PURE__ */ jsx6(
+          "rect",
+          {
+            x: x - 3,
+            y: y - 3,
+            width: w + 6,
+            height: h + 6,
+            rx: 8,
+            ry: 8,
+            fill: "none",
+            stroke: "#3b82f6",
+            strokeWidth: 1.5,
+            strokeDasharray: "4 3",
+            pointerEvents: "none"
+          }
+        ) : null,
+        badge ? (() => {
+          const s = badge.size;
+          const bx = badge.cx - s / 2;
+          const by = badge.cy - s / 2;
+          const rad = s * 0.24;
+          const iconS = s * 0.68;
+          return /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+            /* @__PURE__ */ jsx6(
+              "rect",
+              {
+                x: bx,
+                y: by + 1.5,
+                width: s,
+                height: s,
+                rx: rad,
+                ry: rad,
+                fill: strokeColor,
+                opacity: 0.45,
+                filter: "url(#ep-badge-shadow)"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "rect",
+              {
+                x: bx,
+                y: by,
+                width: s,
+                height: s,
+                rx: rad,
+                ry: rad,
+                fill: shapeFill === "transparent" ? "#ffffff" : shapeFill,
+                stroke: "#e7e5e4",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "image",
+              {
+                href: iconUrl,
+                x: badge.cx - iconS / 2,
+                y: badge.cy - iconS / 2,
+                width: iconS,
+                height: iconS,
+                preserveAspectRatio: "xMidYMid meet"
+              }
+            )
+          ] });
+        })() : null,
+        topIcon ? /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+          /* @__PURE__ */ jsx6(
+            "circle",
+            {
+              cx: topIcon.cx,
+              cy: topIcon.cy,
+              r: topIcon.size * 0.62,
+              fill: shapeFill === "transparent" ? "#ffffff" : shapeFill,
+              filter: "url(#ep-icon-halo)"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "image",
+            {
+              href: iconUrl,
+              x: topIcon.cx - topIcon.size / 2,
+              y: topIcon.cy - topIcon.size / 2,
+              width: topIcon.size,
+              height: topIcon.size,
+              preserveAspectRatio: "xMidYMid meet"
+            }
+          )
+        ] }) : null,
+        !editing && rich.map((line, i) => {
+          if (isLineEmpty(line)) {
+            return null;
+          }
+          return /* @__PURE__ */ jsxs5(
+            "text",
+            {
+              x: x + w / 2,
+              y: startY + i * lineHeight,
+              textAnchor: "middle",
+              fontFamily,
+              fontSize,
+              fill: labelFill,
+              pointerEvents: "none",
+              children: [
+                line.bullet ? /* @__PURE__ */ jsx6("tspan", { children: "\u2022\u2002" }) : null,
+                line.words.map((wd, j) => {
+                  const weight = wd.bold ? 700 : void 0;
+                  const style = wd.italic ? "italic" : void 0;
+                  const sz = wd.small ? Math.max(9, fontSize - 2) : void 0;
+                  const opacity = wd.small ? 0.7 : void 0;
+                  return /* @__PURE__ */ jsx6(
+                    "tspan",
+                    {
+                      fontWeight: weight,
+                      fontStyle: style,
+                      fontSize: sz,
+                      opacity,
+                      children: (j > 0 ? " " : "") + wd.text
+                    },
+                    j
+                  );
+                })
+              ]
+            },
+            i
+          );
+        }),
+        onResize ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "rect",
+            {
+              x: x - RESIZE_HANDLE / 2,
+              y: y + RESIZE_HANDLE,
+              width: RESIZE_HANDLE,
+              height: h - RESIZE_HANDLE * 2,
+              fill: "transparent",
+              style: { cursor: "ew-resize" },
+              onMouseDown: handleResizeDown("W")
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "rect",
+            {
+              x: x + w - RESIZE_HANDLE / 2,
+              y: y + RESIZE_HANDLE,
+              width: RESIZE_HANDLE,
+              height: h - RESIZE_HANDLE * 2,
+              fill: "transparent",
+              style: { cursor: "ew-resize" },
+              onMouseDown: handleResizeDown("E")
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "rect",
+            {
+              x: x + RESIZE_HANDLE,
+              y: y - RESIZE_HANDLE / 2,
+              width: w - RESIZE_HANDLE * 2,
+              height: RESIZE_HANDLE,
+              fill: "transparent",
+              style: { cursor: "ns-resize" },
+              onMouseDown: handleResizeDown("N")
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "rect",
+            {
+              x: x + RESIZE_HANDLE,
+              y: y + h - RESIZE_HANDLE / 2,
+              width: w - RESIZE_HANDLE * 2,
+              height: RESIZE_HANDLE,
+              fill: "transparent",
+              style: { cursor: "ns-resize" },
+              onMouseDown: handleResizeDown("S")
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+};
+
+export {
+  STROKE_WIDTH,
+  Area,
+  AreaLabel,
+  EdgeDefs,
+  labelPillSize,
+  Edge,
+  Node
+};