@haikal-fikri/archimate 0.1.0

package/dist/index.js

@@ -0,0 +1,1368 @@
+// src/colors.ts
+var LAYER_COLORS = {
+  Strategy: "#F5DEAA",
+  Resource: "#F5DEAA",
+  Capability: "#F5DEAA",
+  CourseOfAction: "#F5DEAA",
+  ValueStream: "#F5DEAA",
+  Business: "#FFFFB5",
+  BusinessActor: "#FFFFB5",
+  BusinessRole: "#FFFFB5",
+  BusinessCollaboration: "#FFFFB5",
+  BusinessInterface: "#FFFFB5",
+  BusinessProcess: "#FFFFB5",
+  BusinessFunction: "#FFFFB5",
+  BusinessInteraction: "#FFFFB5",
+  BusinessEvent: "#FFFFB5",
+  BusinessService: "#FFFFB5",
+  BusinessObject: "#FFFFB5",
+  Contract: "#FFFFB5",
+  Representation: "#FFFFB5",
+  Product: "#FFFFB5",
+  Application: "#B5FFFF",
+  ApplicationComponent: "#B5FFFF",
+  ApplicationCollaboration: "#B5FFFF",
+  ApplicationInterface: "#B5FFFF",
+  ApplicationFunction: "#B5FFFF",
+  ApplicationInteraction: "#B5FFFF",
+  ApplicationProcess: "#B5FFFF",
+  ApplicationEvent: "#B5FFFF",
+  ApplicationService: "#B5FFFF",
+  DataObject: "#B5FFFF",
+  Technology: "#C9E7B7",
+  TechnologyCollaboration: "#C9E7B7",
+  TechnologyInterface: "#C9E7B7",
+  TechnologyFunction: "#C9E7B7",
+  TechnologyProcess: "#C9E7B7",
+  TechnologyInteraction: "#C9E7B7",
+  TechnologyEvent: "#C9E7B7",
+  TechnologyService: "#C9E7B7",
+  Node: "#C9E7B7",
+  Device: "#C9E7B7",
+  SystemSoftware: "#C9E7B7",
+  Path: "#C9E7B7",
+  CommunicationNetwork: "#C9E7B7",
+  Artifact: "#C9E7B7",
+  Equipment: "#C9E7B7",
+  Facility: "#C9E7B7",
+  DistributionNetwork: "#C9E7B7",
+  Material: "#C9E7B7",
+  Stakeholder: "#CCCCFF",
+  Driver: "#CCCCFF",
+  Assessment: "#CCCCFF",
+  Goal: "#CCCCFF",
+  Outcome: "#CCCCFF",
+  Principle: "#CCCCFF",
+  Requirement: "#CCCCFF",
+  Constraint: "#CCCCFF",
+  Meaning: "#CCCCFF",
+  Value: "#CCCCFF",
+  WorkPackage: "#E0FFE0",
+  Deliverable: "#E0FFE0",
+  Plateau: "#E0FFE0",
+  Gap: "#E0FFE0",
+  ImplementationEvent: "#E0FFE0",
+  AndJunction: "#000000",
+  OrJunction: "#000000",
+  Junction: "#000000"
+};
+var DEFAULT_FILL = "#FFFFFF";
+var DEFAULT_STROKE = "#1A1A1A";
+var DEFAULT_TEXT = "#1A1A1A";
+function colorForType(elementType) {
+  if (!elementType) return DEFAULT_FILL;
+  if (LAYER_COLORS[elementType]) return LAYER_COLORS[elementType];
+  const prefixes = ["Strategy", "Business", "Application", "Technology", "Motivation", "Implementation"];
+  for (const p of prefixes) {
+    if (elementType.startsWith(p)) {
+      return LAYER_COLORS[p] ?? DEFAULT_FILL;
+    }
+  }
+  if (elementType.endsWith("Junction")) return LAYER_COLORS.Junction;
+  return DEFAULT_FILL;
+}
+
+// src/parser.ts
+var ACCESS_TYPES = /* @__PURE__ */ new Set(["Access", "Read", "Write", "ReadWrite"]);
+function isJunctionType(t) {
+  if (!t) return false;
+  return t === "Junction" || t === "AndJunction" || t === "OrJunction";
+}
+var OPEN_EXCHANGE_NS_V3 = "http://www.opengroup.org/xsd/archimate/3.0/";
+var OPEN_EXCHANGE_NS_V2 = "http://www.opengroup.org/xsd/archimate";
+var OPEN_EXCHANGE_NAMESPACES = /* @__PURE__ */ new Set([
+  OPEN_EXCHANGE_NS_V3,
+  OPEN_EXCHANGE_NS_V2
+]);
+var NATIVE_ARCHI_NS = "http://www.archimatetool.com/archimate";
+var XSI_NS = "http://www.w3.org/2001/XMLSchema-instance";
+var RELATIVE_COORDINATES = false;
+var ArchimateParseError = class extends Error {
+  kind;
+  constructor(message, kind) {
+    super(message);
+    this.name = "ArchimateParseError";
+    this.kind = kind;
+  }
+};
+function childrenOf(el, name) {
+  return Array.from(el.children).filter((c) => c.localName === name);
+}
+function firstChild(el, name) {
+  for (const c of Array.from(el.children)) if (c.localName === name) return c;
+  return null;
+}
+function xsiType(el) {
+  return el.getAttributeNS(XSI_NS, "type") ?? el.getAttribute("xsi:type") ?? void 0;
+}
+function textOf(el) {
+  return (el?.textContent ?? "").trim();
+}
+function nameOrLabel(el) {
+  return textOf(firstChild(el, "name")) || textOf(firstChild(el, "label"));
+}
+function normalizeRelationshipType(raw) {
+  if (!raw) return void 0;
+  const stripped = raw.endsWith("Relationship") ? raw.slice(0, -"Relationship".length) : raw;
+  if (stripped === "Realisation") return "Realization";
+  if (stripped === "Specialisation") return "Specialization";
+  return stripped;
+}
+var ELEMENT_TYPE_RENAMES = {
+  InfrastructureService: "TechnologyService",
+  InfrastructureFunction: "TechnologyFunction",
+  InfrastructureInterface: "TechnologyInterface",
+  Network: "CommunicationNetwork"
+};
+function normalizeElementType(raw) {
+  if (!raw) return void 0;
+  return ELEMENT_TYPE_RENAMES[raw] ?? raw;
+}
+function attr(el, ...names) {
+  for (const n of names) {
+    const v = el.getAttribute(n);
+    if (v !== null) return v;
+  }
+  return null;
+}
+function rgbaFromColor(el) {
+  if (!el) return void 0;
+  const r = el.getAttribute("r");
+  const g = el.getAttribute("g");
+  const b = el.getAttribute("b");
+  const a = el.getAttribute("a");
+  if (r === null || g === null || b === null) return void 0;
+  const alpha = a === null ? 1 : Math.max(0, Math.min(1, Number(a) / 100));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function num(el, attr2, fallback = 0) {
+  const v = el.getAttribute(attr2);
+  if (v === null) return fallback;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : fallback;
+}
+function parseArchimate(xml, viewId) {
+  if (typeof xml !== "string" || xml.trim().length === 0) {
+    throw new ArchimateParseError("No XML provided.", "invalid-xml");
+  }
+  let doc;
+  try {
+    doc = new DOMParser().parseFromString(xml, "application/xml");
+  } catch (e) {
+    throw new ArchimateParseError(`Could not parse XML: ${e.message}`, "invalid-xml");
+  }
+  const errEl = doc.getElementsByTagName("parsererror")[0];
+  if (errEl) {
+    const msg = errEl.textContent?.split("\n").find((l) => l.trim().length > 0) ?? "malformed XML";
+    throw new ArchimateParseError(`Invalid XML: ${msg.trim()}`, "invalid-xml");
+  }
+  const root = doc.documentElement;
+  if (!root) {
+    throw new ArchimateParseError("XML document has no root element.", "invalid-xml");
+  }
+  if (root.namespaceURI === NATIVE_ARCHI_NS) {
+    throw new ArchimateParseError(
+      "This looks like Archi's native .archimate file. In Archi: File \u2192 Export \u2192 Open Exchange XML, then paste the exported XML here instead.",
+      "wrong-format"
+    );
+  }
+  if (!root.namespaceURI || !OPEN_EXCHANGE_NAMESPACES.has(root.namespaceURI)) {
+    throw new ArchimateParseError(
+      `Expected ArchiMate Open Exchange XML (namespace ${OPEN_EXCHANGE_NS_V3} or ${OPEN_EXCHANGE_NS_V2}). Got ${root.namespaceURI ?? "no namespace"}.`,
+      "wrong-format"
+    );
+  }
+  const elementsEl = firstChild(root, "elements");
+  const elementMap = /* @__PURE__ */ new Map();
+  if (elementsEl) {
+    for (const el of childrenOf(elementsEl, "element")) {
+      const id = el.getAttribute("identifier");
+      if (!id) continue;
+      elementMap.set(id, {
+        name: nameOrLabel(el) || id,
+        type: normalizeElementType(xsiType(el))
+      });
+    }
+  }
+  const relationshipsEl = firstChild(root, "relationships");
+  const relationshipMap = /* @__PURE__ */ new Map();
+  if (relationshipsEl) {
+    for (const r of childrenOf(relationshipsEl, "relationship")) {
+      const id = r.getAttribute("identifier");
+      const source = r.getAttribute("source");
+      const target = r.getAttribute("target");
+      if (!id || !source || !target) continue;
+      const rawAccess = r.getAttribute("accessType");
+      const accessType = rawAccess && ACCESS_TYPES.has(rawAccess) ? rawAccess : void 0;
+      const isDirectedAttr = r.getAttribute("isDirected");
+      const isDirected = isDirectedAttr === "true" ? true : isDirectedAttr === "false" ? false : void 0;
+      relationshipMap.set(id, {
+        source,
+        target,
+        type: normalizeRelationshipType(xsiType(r)),
+        accessType,
+        isDirected,
+        name: nameOrLabel(r) || void 0
+      });
+    }
+  }
+  const viewsEl = firstChild(root, "views");
+  if (!viewsEl) throw new ArchimateParseError("Model has no <views> section.", "no-views");
+  const viewParent = firstChild(viewsEl, "diagrams") ?? viewsEl;
+  const allViews = childrenOf(viewParent, "view");
+  if (allViews.length === 0) throw new ArchimateParseError("Model contains no views.", "no-views");
+  let viewEl = null;
+  if (viewId) {
+    viewEl = allViews.find((v) => v.getAttribute("identifier") === viewId) ?? null;
+    if (!viewEl) {
+      throw new ArchimateParseError(
+        `No view with identifier "${viewId}" found in this model.`,
+        "view-not-found"
+      );
+    }
+  } else {
+    viewEl = allViews[0];
+  }
+  const viewName = nameOrLabel(viewEl) || viewEl.getAttribute("identifier") || "Untitled view";
+  const nodes = [];
+  function walkNode(nodeEl, offsetX, offsetY) {
+    const id = nodeEl.getAttribute("identifier");
+    if (!id) return;
+    const lx = num(nodeEl, "x");
+    const ly = num(nodeEl, "y");
+    const w = num(nodeEl, "w");
+    const h = num(nodeEl, "h");
+    const x = RELATIVE_COORDINATES ? lx + offsetX : lx;
+    const y = RELATIVE_COORDINATES ? ly + offsetY : ly;
+    const elementRef = attr(nodeEl, "elementRef", "elementref");
+    const elementInfo = elementRef ? elementMap.get(elementRef) : void 0;
+    const nodeType = xsiType(nodeEl);
+    const styleEl = firstChild(nodeEl, "style");
+    const lineEl = styleEl ? firstChild(styleEl, "lineColor") : null;
+    const fontEl = styleEl ? firstChild(styleEl, "font") : null;
+    const fontColorEl = fontEl ? firstChild(fontEl, "color") : null;
+    const fontSizeAttr = fontEl?.getAttribute("size");
+    const fontSize = fontSizeAttr ? Number(fontSizeAttr) : void 0;
+    nodes.push({
+      id,
+      elementId: elementRef ?? void 0,
+      elementType: elementInfo?.type,
+      nodeType,
+      isJunction: isJunctionType(elementInfo?.type),
+      label: elementInfo?.name ?? nameOrLabel(nodeEl),
+      x,
+      y,
+      w,
+      h,
+      fill: colorForType(elementInfo?.type),
+      stroke: rgbaFromColor(lineEl) ?? DEFAULT_STROKE,
+      textColor: rgbaFromColor(fontColorEl) ?? DEFAULT_TEXT,
+      fontFamily: fontEl?.getAttribute("name") ?? void 0,
+      fontSize: fontSize && Number.isFinite(fontSize) ? fontSize : void 0
+    });
+    for (const childNode of childrenOf(nodeEl, "node")) {
+      walkNode(childNode, x, y);
+    }
+  }
+  for (const n of childrenOf(viewEl, "node")) walkNode(n, 0, 0);
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) nodeMap.set(n.id, n);
+  const connections = [];
+  for (const c of childrenOf(viewEl, "connection")) {
+    const id = c.getAttribute("identifier");
+    const source = c.getAttribute("source");
+    const target = c.getAttribute("target");
+    if (!id || !source || !target) continue;
+    if (!nodeMap.has(source) || !nodeMap.has(target)) continue;
+    const relRef = attr(c, "relationshipRef", "relationshipref");
+    const relInfo = relRef ? relationshipMap.get(relRef) : void 0;
+    const bendpoints = [];
+    for (const bp of childrenOf(c, "bendpoint")) {
+      bendpoints.push({ x: num(bp, "x"), y: num(bp, "y") });
+    }
+    const styleEl = firstChild(c, "style");
+    const lineEl = styleEl ? firstChild(styleEl, "lineColor") : null;
+    connections.push({
+      id,
+      sourceId: source,
+      targetId: target,
+      relationshipType: relInfo?.type,
+      accessType: relInfo?.accessType,
+      isDirected: relInfo?.isDirected,
+      name: relInfo?.name,
+      bendpoints,
+      stroke: rgbaFromColor(lineEl)
+    });
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const n of nodes) {
+    if (n.x < minX) minX = n.x;
+    if (n.y < minY) minY = n.y;
+    if (n.x + n.w > maxX) maxX = n.x + n.w;
+    if (n.y + n.h > maxY) maxY = n.y + n.h;
+  }
+  if (!Number.isFinite(minX)) {
+    minX = 0;
+    minY = 0;
+    maxX = 100;
+    maxY = 100;
+  }
+  const pad = 40;
+  return {
+    viewId: viewEl.getAttribute("identifier") ?? "",
+    viewName,
+    viewBox: {
+      x: minX - pad,
+      y: minY - pad,
+      width: maxX - minX + pad * 2,
+      height: maxY - minY + pad * 2
+    },
+    nodes,
+    connections
+  };
+}
+
+// src/renderer.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+
+// src/icons.ts
+var ICONS = {
+  // ─── Active structure ──────────────────────────────────────────────────────
+  // Actor / Stakeholder — stick figure with head, body, arms, legs
+  actor: {
+    outline: [
+      "M 50 22 m -10 0 a 10 10 0 1 0 20 0 a 10 10 0 1 0 -20 0",
+      "M 50 32 L 50 60",
+      "M 22 46 L 78 46",
+      "M 50 60 L 28 88",
+      "M 50 60 L 72 88"
+    ]
+  },
+  // Role — horizontal pill with a small filled dot on the right
+  role: {
+    outline: ["M 22 32 L 78 32 a 18 18 0 0 1 0 36 L 22 68 a 18 18 0 0 1 0 -36 Z"],
+    filled: ["M 70 50 m -7 0 a 7 7 0 1 0 14 0 a 7 7 0 1 0 -14 0"]
+  },
+  // Collaboration — two full overlapping circles (Venn-style, symmetric)
+  collaboration: {
+    outline: [
+      "M 36 50 m -22 0 a 22 22 0 1 0 44 0 a 22 22 0 1 0 -44 0",
+      "M 64 50 m -22 0 a 22 22 0 1 0 44 0 a 22 22 0 1 0 -44 0"
+    ]
+  },
+  // Interaction — two semicircles (D-shapes) facing each other with a gap
+  interaction: {
+    outline: [
+      "M 42 22 A 28 28 0 0 0 42 78 Z",
+      "M 58 22 A 28 28 0 0 1 58 78 Z"
+    ]
+  },
+  // Interface — lollipop (line on left, filled circle on right)
+  interface: {
+    outline: [
+      "M 64 50 m -16 0 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0",
+      "M 12 50 L 48 50"
+    ]
+  },
+  // Application Component — main rectangle + two connector tabs on the left
+  component: {
+    outline: [
+      "M 30 22 L 88 22 L 88 78 L 30 78 Z",
+      "M 14 32 L 38 32 L 38 46 L 14 46 Z",
+      "M 14 54 L 38 54 L 38 68 L 14 68 Z"
+    ]
+  },
+  // ─── Behavior ──────────────────────────────────────────────────────────────
+  // Process — right-pointing arrow / chevron
+  process: {
+    outline: ["M 12 35 L 56 35 L 56 22 L 88 50 L 56 78 L 56 65 L 12 65 Z"]
+  },
+  // Function — concentric chevrons matching the ArchiMate reference notation.
+  // Outer V (apex up) and inner V (apex up, lower) sharing the same bottom
+  // axis. Both outer-bottom corners and both inner-bottom corners sit on the
+  // bottom edge; the inner V's apex sits above, forming the top of the stripe.
+  // Vertices (clockwise): outer-bottom-left, outer-apex, outer-bottom-right,
+  // inner-bottom-right, inner-apex, inner-bottom-left.
+  function: {
+    outline: ["M 10 82 L 50 18 L 90 82 L 72 82 L 50 42 L 28 82 Z"]
+  },
+  // Event — D-shape with chevron notch on the left
+  event: {
+    outline: ["M 70 22 a 28 28 0 0 1 0 56 L 28 78 L 48 50 L 28 22 Z"]
+  },
+  // Service — pill / rounded rectangle
+  service: {
+    outline: ["M 30 32 L 70 32 a 18 18 0 0 1 0 36 L 30 68 a 18 18 0 0 1 0 -36 Z"]
+  },
+  // ─── Passive structure ─────────────────────────────────────────────────────
+  // Object / Data Object — rectangle with filled header bar
+  object: {
+    outline: ["M 15 22 L 85 22 L 85 78 L 15 78 Z", "M 15 36 L 85 36"],
+    filled: ["M 15 22 L 85 22 L 85 36 L 15 36 Z"]
+  },
+  // Contract / Material — rectangle with several horizontal text lines
+  contract: {
+    outline: [
+      "M 18 18 L 82 18 L 82 82 L 18 82 Z",
+      "M 28 32 L 72 32",
+      "M 28 44 L 72 44",
+      "M 28 56 L 72 56",
+      "M 28 68 L 60 68"
+    ]
+  },
+  // Representation — rectangle with wavy bottom edge
+  representation: {
+    outline: ["M 18 18 L 82 18 L 82 70 Q 70 88 50 76 Q 30 64 18 82 Z"]
+  },
+  // Product — rectangle with a small tab notched on the top-left
+  product: {
+    outline: ["M 18 28 L 38 28 L 42 18 L 82 18 L 82 82 L 18 82 Z"]
+  },
+  // Artifact — page with folded upper-right corner
+  artifact: {
+    outline: ["M 22 14 L 70 14 L 86 30 L 86 86 L 22 86 Z", "M 70 14 L 70 30 L 86 30"]
+  },
+  // ─── Technology ────────────────────────────────────────────────────────────
+  // Node — 3D wireframe box
+  node: {
+    outline: [
+      "M 18 38 L 70 38 L 70 86 L 18 86 Z",
+      "M 18 38 L 32 22 L 84 22 L 70 38",
+      "M 70 38 L 84 22 L 84 70 L 70 86"
+    ]
+  },
+  // Device — computer monitor with stand
+  device: {
+    outline: [
+      "M 12 22 L 88 22 L 88 64 L 12 64 Z",
+      "M 28 78 L 72 78",
+      "M 50 64 L 50 78"
+    ]
+  },
+  // System Software — two asymmetrically overlapping circles (different sizes,
+  // off-centre overlap — distinct from the symmetric Venn used for Collaboration)
+  systemsoftware: {
+    outline: [
+      "M 38 58 m -28 0 a 28 28 0 1 0 56 0 a 28 28 0 1 0 -56 0",
+      "M 72 32 m -16 0 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0"
+    ]
+  },
+  // Communication Network — parallelogram with filled circle nodes at 4 corners
+  network: {
+    outline: ["M 28 22 L 88 22 L 72 78 L 12 78 Z"],
+    filled: [
+      "M 28 22 m -5 0 a 5 5 0 1 0 10 0 a 5 5 0 1 0 -10 0",
+      "M 88 22 m -5 0 a 5 5 0 1 0 10 0 a 5 5 0 1 0 -10 0",
+      "M 72 78 m -5 0 a 5 5 0 1 0 10 0 a 5 5 0 1 0 -10 0",
+      "M 12 78 m -5 0 a 5 5 0 1 0 10 0 a 5 5 0 1 0 -10 0"
+    ]
+  },
+  // Path — bidirectional arrows with a centre dot
+  path: {
+    outline: [
+      "M 12 50 L 38 50",
+      "M 22 40 L 12 50 L 22 60",
+      "M 88 50 L 62 50",
+      "M 78 40 L 88 50 L 78 60"
+    ],
+    filled: ["M 50 50 m -4 0 a 4 4 0 1 0 8 0 a 4 4 0 1 0 -8 0"]
+  },
+  // Equipment — two cogs (large + small) overlapping. Each cog: circle +
+  // radial teeth at cardinal & intercardinal directions + filled hub.
+  equipment: {
+    outline: [
+      // Big cog at (38, 60), body r=18, teeth out to r=22
+      "M 38 60 m -18 0 a 18 18 0 1 0 36 0 a 18 18 0 1 0 -36 0",
+      "M 38 38 L 38 42",
+      "M 38 78 L 38 82",
+      "M 16 60 L 20 60",
+      "M 56 60 L 60 60",
+      "M 23 45 L 26 48",
+      "M 50 72 L 53 75",
+      "M 23 75 L 26 72",
+      "M 50 48 L 53 45",
+      // Small cog at (74, 32), body r=10, teeth out to r=13
+      "M 74 32 m -10 0 a 10 10 0 1 0 20 0 a 10 10 0 1 0 -20 0",
+      "M 74 19 L 74 22",
+      "M 74 42 L 74 45",
+      "M 61 32 L 64 32",
+      "M 84 32 L 87 32"
+    ],
+    filled: [
+      "M 38 60 m -4 0 a 4 4 0 1 0 8 0 a 4 4 0 1 0 -8 0",
+      "M 74 32 m -2 0 a 2 2 0 1 0 4 0 a 2 2 0 1 0 -4 0"
+    ]
+  },
+  // Facility — factory with sawtooth roof (3 triangular peaks)
+  facility: {
+    outline: [
+      "M 14 86 L 14 38 L 38 14 L 38 38 L 62 14 L 62 38 L 86 14 L 86 38 L 86 86 Z"
+    ]
+  },
+  // Distribution Network — two parallel horizontal lines with arrowheads at
+  // both ends (a "double-arrow" mathematical symbol ⇔)
+  distributionnetwork: {
+    outline: [
+      "M 24 45 L 76 45",
+      "M 24 55 L 76 55",
+      "M 24 45 L 12 50 L 24 55",
+      "M 76 45 L 88 50 L 76 55"
+    ]
+  },
+  // Material — hexagon with internal horizontal lines
+  material: {
+    outline: [
+      "M 50 14 L 84 32 L 84 68 L 50 86 L 16 68 L 16 32 Z",
+      "M 24 44 L 76 44",
+      "M 24 56 L 76 56"
+    ]
+  },
+  // ─── Motivation ────────────────────────────────────────────────────────────
+  // Driver — steering wheel: circle with 4-spoke crosshair + center hub
+  driver: {
+    outline: [
+      "M 50 50 m -34 0 a 34 34 0 1 0 68 0 a 34 34 0 1 0 -68 0",
+      "M 50 16 L 50 84",
+      "M 16 50 L 84 50",
+      "M 26 26 L 74 74",
+      "M 74 26 L 26 74"
+    ],
+    filled: ["M 50 50 m -7 0 a 7 7 0 1 0 14 0 a 7 7 0 1 0 -14 0"]
+  },
+  // Assessment — magnifying glass (lens + handle)
+  assessment: {
+    outline: [
+      "M 38 38 m -22 0 a 22 22 0 1 0 44 0 a 22 22 0 1 0 -44 0",
+      "M 56 56 L 86 86"
+    ]
+  },
+  // Goal — concentric circles (bullseye / target)
+  goal: {
+    outline: [
+      "M 50 50 m -36 0 a 36 36 0 1 0 72 0 a 36 36 0 1 0 -72 0",
+      "M 50 50 m -22 0 a 22 22 0 1 0 44 0 a 22 22 0 1 0 -44 0"
+    ],
+    filled: ["M 50 50 m -8 0 a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0"]
+  },
+  // Outcome — bullseye with arrow stuck through it
+  outcome: {
+    outline: [
+      "M 50 50 m -28 0 a 28 28 0 1 0 56 0 a 28 28 0 1 0 -56 0",
+      "M 50 50 m -10 0 a 10 10 0 1 0 20 0 a 10 10 0 1 0 -20 0",
+      "M 78 22 L 50 50",
+      "M 66 22 L 78 22 L 78 34"
+    ]
+  },
+  // Principle — tall rectangle with exclamation mark inside (a "tablet")
+  principle: {
+    outline: ["M 35 14 L 65 14 L 65 86 L 35 86 Z", "M 50 28 L 50 60"],
+    filled: ["M 50 70 m -3 0 a 3 3 0 1 0 6 0 a 3 3 0 1 0 -6 0"]
+  },
+  // Requirement — parallelogram
+  requirement: {
+    outline: ["M 30 22 L 88 22 L 70 78 L 12 78 Z"]
+  },
+  // Constraint — parallelogram with horizontal line through middle
+  constraint: {
+    outline: ["M 30 22 L 88 22 L 70 78 L 12 78 Z", "M 21 50 L 79 50"]
+  },
+  // Meaning — speech / cloud bubble with tail
+  meaning: {
+    outline: [
+      "M 30 28 Q 18 28 18 42 Q 18 56 30 58 L 25 78 L 42 60 Q 70 64 78 50 Q 86 32 64 26 Q 50 14 30 28 Z"
+    ]
+  },
+  // Value — horizontal ellipse
+  value: {
+    outline: ["M 50 50 m -32 0 a 32 18 0 1 0 64 0 a 32 18 0 1 0 -64 0"]
+  },
+  // Stakeholder — pill with filled dot (same family as Role)
+  stakeholder: {
+    outline: ["M 22 32 L 78 32 a 18 18 0 0 1 0 36 L 22 68 a 18 18 0 0 1 0 -36 Z"],
+    filled: ["M 70 50 m -7 0 a 7 7 0 1 0 14 0 a 7 7 0 1 0 -14 0"]
+  },
+  // ─── Strategy ──────────────────────────────────────────────────────────────
+  // Resource — rectangle with three vertical bars (stack of cards)
+  resource: {
+    outline: [
+      "M 18 30 L 82 30 L 82 70 L 18 70 Z",
+      "M 36 38 L 36 62",
+      "M 50 38 L 50 62",
+      "M 64 38 L 64 62"
+    ]
+  },
+  // Capability — stepped staircase (three blocks ascending)
+  capability: {
+    outline: [
+      "M 14 78 L 38 78 L 38 60 L 62 60 L 62 42 L 86 42 L 86 24 L 70 24",
+      "M 70 24 L 70 42 L 46 42 L 46 60 L 22 60 L 22 78"
+    ]
+  },
+  // Course of Action — right-pointing arrow (similar to process)
+  courseofaction: {
+    outline: ["M 12 35 L 56 35 L 56 22 L 88 50 L 56 78 L 56 65 L 12 65 Z"]
+  },
+  // Value Stream — chevron with concave back
+  valuestream: {
+    outline: ["M 12 28 L 65 28 L 88 50 L 65 72 L 12 72 L 32 50 Z"]
+  },
+  // ─── Implementation & Migration ────────────────────────────────────────────
+  // Work Package — small rectangle (placeholder; Archi uses a banded shape)
+  workpackage: {
+    outline: ["M 18 30 L 82 30 L 82 70 L 18 70 Z", "M 18 50 L 82 50"]
+  },
+  // Deliverable — rectangle with curled / wavy bottom edge
+  deliverable: {
+    outline: ["M 18 18 L 82 18 L 82 75 Q 70 88 50 78 Q 30 68 18 82 Z"]
+  },
+  // Plateau — stack of three horizontal bars
+  plateau: {
+    outline: [
+      "M 18 22 L 82 22 L 82 32 L 18 32 Z",
+      "M 18 44 L 82 44 L 82 54 L 18 54 Z",
+      "M 18 66 L 82 66 L 82 76 L 18 76 Z"
+    ]
+  },
+  // Gap — circle with a horizontal line through the middle
+  gap: {
+    outline: [
+      "M 50 50 m -32 0 a 32 32 0 1 0 64 0 a 32 32 0 1 0 -64 0",
+      "M 14 50 L 86 50"
+    ]
+  }
+};
+function iconNameForType(elementType) {
+  if (!elementType) return null;
+  const t = elementType;
+  if (t === "BusinessActor") return "actor";
+  if (t === "BusinessRole") return "role";
+  if (t === "BusinessCollaboration" || t === "ApplicationCollaboration" || t === "TechnologyCollaboration")
+    return "collaboration";
+  if (t.endsWith("Interface")) return "interface";
+  if (t === "ApplicationComponent") return "component";
+  if (t === "BusinessProcess" || t === "ApplicationProcess" || t === "TechnologyProcess")
+    return "process";
+  if (t === "BusinessFunction" || t === "ApplicationFunction" || t === "TechnologyFunction")
+    return "function";
+  if (t.endsWith("Interaction")) return "interaction";
+  if (t.endsWith("Service")) return "service";
+  if (t.endsWith("Event")) return "event";
+  if (t === "BusinessObject" || t === "DataObject") return "object";
+  if (t === "Contract") return "contract";
+  if (t === "Representation") return "representation";
+  if (t === "Product") return "product";
+  if (t === "Artifact") return "artifact";
+  if (t === "Node") return "node";
+  if (t === "SystemSoftware") return "systemsoftware";
+  if (t === "Device") return "device";
+  if (t === "Equipment") return "equipment";
+  if (t === "Facility") return "facility";
+  if (t === "DistributionNetwork") return "distributionnetwork";
+  if (t === "CommunicationNetwork") return "network";
+  if (t === "Path") return "path";
+  if (t === "Material") return "material";
+  if (t === "Stakeholder") return "stakeholder";
+  if (t === "Driver") return "driver";
+  if (t === "Assessment") return "assessment";
+  if (t === "Goal") return "goal";
+  if (t === "Outcome") return "outcome";
+  if (t === "Principle") return "principle";
+  if (t === "Requirement") return "requirement";
+  if (t === "Constraint") return "constraint";
+  if (t === "Meaning") return "meaning";
+  if (t === "Value") return "value";
+  if (t === "Capability") return "capability";
+  if (t === "Resource") return "resource";
+  if (t === "CourseOfAction") return "courseofaction";
+  if (t === "ValueStream") return "valuestream";
+  if (t === "WorkPackage") return "workpackage";
+  if (t === "Deliverable") return "deliverable";
+  if (t === "Plateau") return "plateau";
+  if (t === "Gap") return "gap";
+  if (t === "ImplementationEvent") return "event";
+  return null;
+}
+
+// src/renderer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_SCALE = 0.05;
+var MAX_SCALE = 50;
+var PAN_FRACTION = 0.2;
+var WHEEL_FACTOR = 1.1;
+var DASH_PATTERN = "6 4";
+var FLOW_PATTERN = "4 3";
+var DOT_PATTERN = "2 3";
+var ArchimateRenderer = forwardRef(
+  function ArchimateRenderer2({ view, className, style }, ref) {
+    const svgRef = useRef(null);
+    const gRef = useRef(null);
+    const stateRef = useRef({ tx: 0, ty: 0, scale: 1 });
+    const dragRef = useRef(null);
+    const nodeMap = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const n of view.nodes) map.set(n.id, n);
+      return map;
+    }, [view]);
+    const endpointPlan = useMemo(
+      () => planEndpoints(view.connections, nodeMap),
+      [view, nodeMap]
+    );
+    function applyTransform() {
+      const { tx, ty, scale } = stateRef.current;
+      gRef.current?.setAttribute("transform", `translate(${tx} ${ty}) scale(${scale})`);
+    }
+    function reset() {
+      stateRef.current = { tx: 0, ty: 0, scale: 1 };
+      applyTransform();
+    }
+    function zoomAroundViewBox(vbX, vbY, factor) {
+      const { tx, ty, scale } = stateRef.current;
+      const nextScale = scale * factor;
+      if (nextScale < MIN_SCALE || nextScale > MAX_SCALE) return;
+      stateRef.current = {
+        tx: vbX * (1 - factor) + tx * factor,
+        ty: vbY * (1 - factor) + ty * factor,
+        scale: nextScale
+      };
+      applyTransform();
+    }
+    function clientToViewBox(clientX, clientY) {
+      const svg = svgRef.current;
+      if (!svg) return null;
+      const pt = svg.createSVGPoint();
+      pt.x = clientX;
+      pt.y = clientY;
+      const ctm = svg.getScreenCTM();
+      if (!ctm) return null;
+      const local = pt.matrixTransform(ctm.inverse());
+      return { x: local.x, y: local.y };
+    }
+    useImperativeHandle(
+      ref,
+      () => ({
+        zoomIn: () => {
+          const cx = view.viewBox.x + view.viewBox.width / 2;
+          const cy = view.viewBox.y + view.viewBox.height / 2;
+          zoomAroundViewBox(cx, cy, 1.25);
+        },
+        zoomOut: () => {
+          const cx = view.viewBox.x + view.viewBox.width / 2;
+          const cy = view.viewBox.y + view.viewBox.height / 2;
+          zoomAroundViewBox(cx, cy, 1 / 1.25);
+        },
+        fitView: reset,
+        pan: (dirX, dirY) => {
+          stateRef.current.tx += -dirX * view.viewBox.width * PAN_FRACTION;
+          stateRef.current.ty += -dirY * view.viewBox.height * PAN_FRACTION;
+          applyTransform();
+        }
+      }),
+      [view]
+    );
+    useEffect(() => {
+      reset();
+    }, [view]);
+    useEffect(() => {
+      const svg = svgRef.current;
+      if (!svg) return;
+      const onWheel = (e) => {
+        e.preventDefault();
+        const local = clientToViewBox(e.clientX, e.clientY);
+        if (!local) return;
+        const factor = e.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+        zoomAroundViewBox(local.x, local.y, factor);
+      };
+      svg.addEventListener("wheel", onWheel, { passive: false });
+      return () => svg.removeEventListener("wheel", onWheel);
+    }, []);
+    function onPointerDown(e) {
+      if (e.button !== 0) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+      svg.setPointerCapture(e.pointerId);
+      dragRef.current = {
+        pointerId: e.pointerId,
+        startClientX: e.clientX,
+        startClientY: e.clientY,
+        startTx: stateRef.current.tx,
+        startTy: stateRef.current.ty
+      };
+    }
+    function onPointerMove(e) {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== e.pointerId) return;
+      const start = clientToViewBox(drag.startClientX, drag.startClientY);
+      const now = clientToViewBox(e.clientX, e.clientY);
+      if (!start || !now) return;
+      stateRef.current.tx = drag.startTx + (now.x - start.x);
+      stateRef.current.ty = drag.startTy + (now.y - start.y);
+      applyTransform();
+    }
+    function onPointerUp(e) {
+      const drag = dragRef.current;
+      if (!drag) return;
+      svgRef.current?.releasePointerCapture(e.pointerId);
+      dragRef.current = null;
+    }
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: svgRef,
+        className,
+        style: { touchAction: "none", cursor: "grab", ...style },
+        viewBox: `${view.viewBox.x} ${view.viewBox.y} ${view.viewBox.width} ${view.viewBox.height}`,
+        preserveAspectRatio: "xMidYMid meet",
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel: onPointerUp,
+        children: /* @__PURE__ */ jsxs("g", { ref: gRef, children: [
+          view.nodes.map((n) => /* @__PURE__ */ jsx(NodeShape, { node: n }, n.id)),
+          view.connections.map((c) => {
+            const pts = endpointPlan.get(c.id);
+            if (!pts) return null;
+            return /* @__PURE__ */ jsx(
+              ConnectionPath,
+              {
+                edge: c,
+                sourcePoint: pts.source,
+                targetPoint: pts.target
+              },
+              c.id
+            );
+          })
+        ] })
+      }
+    );
+  }
+);
+var MARKER_GLYPHS = {
+  "archi-arrow-filled": {
+    refX: 11,
+    refY: 5,
+    reverseAtStart: true,
+    paint: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 12 5 L 0 10 Z", fill: "currentColor" })
+  },
+  "archi-arrow-open": {
+    refX: 11,
+    refY: 5,
+    reverseAtStart: true,
+    paint: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 12 5 L 0 10", fill: "none", stroke: "currentColor", strokeWidth: "1.2" })
+  },
+  "archi-triangle-hollow": {
+    refX: 11,
+    refY: 6,
+    reverseAtStart: true,
+    paint: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 12 6 L 0 12 Z", fill: "white", stroke: "currentColor", strokeWidth: "1" })
+  },
+  "archi-diamond-filled": {
+    refX: 0,
+    refY: 5,
+    reverseAtStart: false,
+    paint: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0 5 L 7 0 L 14 5 L 7 10 Z",
+        fill: "#1A1A1A",
+        stroke: "#1A1A1A",
+        strokeWidth: "1"
+      }
+    )
+  },
+  "archi-diamond-hollow": {
+    refX: 0,
+    refY: 5,
+    reverseAtStart: false,
+    paint: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0 5 L 7 0 L 14 5 L 7 10 Z",
+        fill: "white",
+        stroke: "#1A1A1A",
+        strokeWidth: "1"
+      }
+    )
+  },
+  "archi-arrow-thin": {
+    refX: 9,
+    refY: 4,
+    reverseAtStart: true,
+    paint: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 4 L 0 8", fill: "none", stroke: "currentColor", strokeWidth: "1" })
+  },
+  "archi-dot-filled": {
+    refX: 1,
+    refY: 4,
+    reverseAtStart: false,
+    paint: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "3", fill: "currentColor" })
+  }
+};
+function MarkerInline({
+  glyph,
+  position,
+  pathAngleRad,
+  isStart
+}) {
+  const spec = MARKER_GLYPHS[glyph];
+  if (!spec) return null;
+  const angle = isStart && spec.reverseAtStart ? pathAngleRad + Math.PI : pathAngleRad;
+  const angleDeg = angle * 180 / Math.PI;
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      transform: `translate(${position.x} ${position.y}) rotate(${angleDeg}) translate(${-spec.refX} ${-spec.refY})`,
+      children: spec.paint
+    }
+  );
+}
+function styleForEdge(edge) {
+  switch (edge.relationshipType) {
+    case "Composition":
+      return { markerStart: "archi-diamond-filled" };
+    case "Aggregation":
+      return { markerStart: "archi-diamond-hollow" };
+    case "Assignment":
+      return { markerStart: "archi-dot-filled", markerEnd: "archi-arrow-filled" };
+    case "Realization":
+      return { dashArray: DASH_PATTERN, markerEnd: "archi-triangle-hollow" };
+    case "Serving":
+    case "UsedBy":
+      return { markerEnd: "archi-arrow-open" };
+    case "Triggering":
+      return { markerEnd: "archi-arrow-filled" };
+    case "Flow":
+      return { dashArray: FLOW_PATTERN, markerEnd: "archi-arrow-filled" };
+    case "Specialization":
+      return { markerEnd: "archi-triangle-hollow" };
+    case "Access": {
+      const at = edge.accessType ?? "Access";
+      if (at === "Read") return { dashArray: DOT_PATTERN, markerStart: "archi-arrow-thin" };
+      if (at === "Write") return { dashArray: DOT_PATTERN, markerEnd: "archi-arrow-thin" };
+      if (at === "ReadWrite")
+        return {
+          dashArray: DOT_PATTERN,
+          markerStart: "archi-arrow-thin",
+          markerEnd: "archi-arrow-thin"
+        };
+      return { dashArray: DOT_PATTERN };
+    }
+    case "Influence":
+      return { dashArray: DASH_PATTERN, markerEnd: "archi-arrow-open" };
+    case "Association":
+      return edge.isDirected ? { markerEnd: "archi-arrow-open" } : {};
+    default:
+      return { markerEnd: "archi-arrow-filled" };
+  }
+}
+function ConnectionPath({
+  edge,
+  sourcePoint,
+  targetPoint
+}) {
+  const allPoints = [sourcePoint, ...edge.bendpoints, targetPoint];
+  const pointsStr = allPoints.map((p) => `${p.x},${p.y}`).join(" ");
+  const style = styleForEdge(edge);
+  const stroke = edge.stroke ?? DEFAULT_STROKE;
+  const startNeighbor = allPoints[1] ?? sourcePoint;
+  const endNeighbor = allPoints[allPoints.length - 2] ?? targetPoint;
+  const startAngle = Math.atan2(
+    startNeighbor.y - sourcePoint.y,
+    startNeighbor.x - sourcePoint.x
+  );
+  const endAngle = Math.atan2(
+    targetPoint.y - endNeighbor.y,
+    targetPoint.x - endNeighbor.x
+  );
+  return /* @__PURE__ */ jsxs("g", { style: { color: stroke }, children: [
+    /* @__PURE__ */ jsx(
+      "polyline",
+      {
+        points: pointsStr,
+        fill: "none",
+        stroke,
+        strokeWidth: 1,
+        strokeDasharray: style.dashArray
+      }
+    ),
+    style.markerStart ? /* @__PURE__ */ jsx(
+      MarkerInline,
+      {
+        glyph: style.markerStart,
+        position: sourcePoint,
+        pathAngleRad: startAngle,
+        isStart: true
+      }
+    ) : null,
+    style.markerEnd ? /* @__PURE__ */ jsx(
+      MarkerInline,
+      {
+        glyph: style.markerEnd,
+        position: targetPoint,
+        pathAngleRad: endAngle,
+        isStart: false
+      }
+    ) : null
+  ] });
+}
+function pickSide(box, towards) {
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  const dx = towards.x - cx;
+  const dy = towards.y - cy;
+  const ax = Math.abs(dx) / Math.max(box.w / 2, 1);
+  const ay = Math.abs(dy) / Math.max(box.h / 2, 1);
+  if (ax >= ay) return dx >= 0 ? "right" : "left";
+  return dy >= 0 ? "bottom" : "top";
+}
+function pointOnSide(box, side, t) {
+  switch (side) {
+    case "left":
+      return { x: box.x, y: box.y + box.h * t };
+    case "right":
+      return { x: box.x + box.w, y: box.y + box.h * t };
+    case "top":
+      return { x: box.x + box.w * t, y: box.y };
+    case "bottom":
+      return { x: box.x + box.w * t, y: box.y + box.h };
+  }
+}
+function planEndpoints(connections, nodeMap) {
+  const result = /* @__PURE__ */ new Map();
+  const groups = /* @__PURE__ */ new Map();
+  const addSlot = (nodeId, side, slot) => {
+    let byNode = groups.get(nodeId);
+    if (!byNode) groups.set(nodeId, byNode = /* @__PURE__ */ new Map());
+    let list = byNode.get(side);
+    if (!list) byNode.set(side, list = []);
+    list.push(slot);
+  };
+  for (const edge of connections) {
+    const s = nodeMap.get(edge.sourceId);
+    const t = nodeMap.get(edge.targetId);
+    if (!s || !t) continue;
+    const initial = endpointsForConnection(s, t, edge.bendpoints);
+    result.set(edge.id, initial);
+    if (edge.bendpoints.length > 0) continue;
+    if (s.isJunction || t.isJunction) continue;
+    const tCenter = nodeCenter(t);
+    const sCenter = nodeCenter(s);
+    const sSide = pickSide(s, tCenter);
+    const tSide = pickSide(t, sCenter);
+    const sGuide = sSide === "left" || sSide === "right" ? tCenter.y : tCenter.x;
+    const tGuide = tSide === "left" || tSide === "right" ? sCenter.y : sCenter.x;
+    addSlot(s.id, sSide, { edgeId: edge.id, isSourceEnd: true, guideCoord: sGuide });
+    addSlot(t.id, tSide, { edgeId: edge.id, isSourceEnd: false, guideCoord: tGuide });
+  }
+  for (const [nodeId, byNode] of groups) {
+    const node = nodeMap.get(nodeId);
+    for (const [side, slots] of byNode) {
+      if (slots.length < 2) continue;
+      slots.sort((a, b) => a.guideCoord - b.guideCoord);
+      for (let i = 0; i < slots.length; i++) {
+        const point = pointOnSide(node, side, (i + 1) / (slots.length + 1));
+        const cur = result.get(slots[i].edgeId);
+        result.set(
+          slots[i].edgeId,
+          slots[i].isSourceEnd ? { source: point, target: cur.target } : { source: cur.source, target: point }
+        );
+      }
+    }
+  }
+  return result;
+}
+function endpointsForConnection(source, target, bendpoints) {
+  if (source.isJunction && target.isJunction) {
+    return { source: nodeCenter(source), target: nodeCenter(target) };
+  }
+  if (bendpoints.length > 0) {
+    return {
+      source: source.isJunction ? nodeCenter(source) : attachPoint(source, bendpoints[0]),
+      target: target.isJunction ? nodeCenter(target) : attachPoint(target, bendpoints[bendpoints.length - 1])
+    };
+  }
+  const sLeft = source.x;
+  const sRight = source.x + source.w;
+  const sTop = source.y;
+  const sBottom = source.y + source.h;
+  const tLeft = target.x;
+  const tRight = target.x + target.w;
+  const tTop = target.y;
+  const tBottom = target.y + target.h;
+  const yOverlap = Math.min(sBottom, tBottom) - Math.max(sTop, tTop);
+  const xOverlap = Math.min(sRight, tRight) - Math.max(sLeft, tLeft);
+  if (xOverlap < 0 && yOverlap > 0) {
+    const y = (Math.max(sTop, tTop) + Math.min(sBottom, tBottom)) / 2;
+    if (sRight <= tLeft) {
+      return {
+        source: source.isJunction ? nodeCenter(source) : { x: sRight, y },
+        target: target.isJunction ? nodeCenter(target) : { x: tLeft, y }
+      };
+    }
+    return {
+      source: source.isJunction ? nodeCenter(source) : { x: sLeft, y },
+      target: target.isJunction ? nodeCenter(target) : { x: tRight, y }
+    };
+  }
+  if (yOverlap < 0 && xOverlap > 0) {
+    const x = (Math.max(sLeft, tLeft) + Math.min(sRight, tRight)) / 2;
+    if (sBottom <= tTop) {
+      return {
+        source: source.isJunction ? nodeCenter(source) : { x, y: sBottom },
+        target: target.isJunction ? nodeCenter(target) : { x, y: tTop }
+      };
+    }
+    return {
+      source: source.isJunction ? nodeCenter(source) : { x, y: sTop },
+      target: target.isJunction ? nodeCenter(target) : { x, y: tBottom }
+    };
+  }
+  return {
+    source: source.isJunction ? nodeCenter(source) : attachPoint(source, nodeCenter(target)),
+    target: target.isJunction ? nodeCenter(target) : attachPoint(target, nodeCenter(source))
+  };
+}
+function nodeCenter(n) {
+  return { x: n.x + n.w / 2, y: n.y + n.h / 2 };
+}
+function attachPoint(box, towards) {
+  const left = box.x;
+  const right = box.x + box.w;
+  const top = box.y;
+  const bottom = box.y + box.h;
+  const xOut = towards.x < left ? -1 : towards.x > right ? 1 : 0;
+  const yOut = towards.y < top ? -1 : towards.y > bottom ? 1 : 0;
+  if (xOut !== 0 && yOut === 0) {
+    return { x: xOut < 0 ? left : right, y: clamp(towards.y, top, bottom) };
+  }
+  if (xOut === 0 && yOut !== 0) {
+    return { x: clamp(towards.x, left, right), y: yOut < 0 ? top : bottom };
+  }
+  if (xOut !== 0 && yOut !== 0) {
+    const cx = (left + right) / 2;
+    const cy = (top + bottom) / 2;
+    const dx = towards.x - cx;
+    const dy = towards.y - cy;
+    const t = Math.min(box.w / 2 / Math.abs(dx), box.h / 2 / Math.abs(dy));
+    return { x: cx + dx * t, y: cy + dy * t };
+  }
+  return nodeCenter(box);
+}
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function NodeShape({ node }) {
+  if (node.isJunction) return /* @__PURE__ */ jsx(JunctionShape, { node });
+  if (node.nodeType === "Label") return /* @__PURE__ */ jsx(LabelShape, { node });
+  const isContainer = node.nodeType === "Container" || node.nodeType === "Group" || !node.elementId && !node.nodeType;
+  return /* @__PURE__ */ jsx(ElementShape, { node, dashed: isContainer, transparent: isContainer });
+}
+function JunctionShape({ node }) {
+  const cx = node.x + node.w / 2;
+  const cy = node.y + node.h / 2;
+  const r = Math.max(4, Math.min(node.w, node.h) / 2);
+  return /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: node.stroke });
+}
+function LabelShape({ node }) {
+  if (!node.label) return null;
+  const fontSize = node.fontSize ?? 11;
+  const textX = node.x + node.w / 2;
+  const lines = wrapLabel(node.label, node.w - 8, fontSize);
+  const lineHeight = fontSize * 1.2;
+  const blockHeight = lineHeight * (lines.length - 1);
+  const firstY = node.y + node.h / 2 + fontSize / 3 - blockHeight / 2;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: textX,
+      y: firstY,
+      textAnchor: "middle",
+      fontFamily: node.fontFamily ?? "system-ui, -apple-system, sans-serif",
+      fontSize,
+      fill: node.textColor,
+      children: lines.map((line, i) => /* @__PURE__ */ jsx("tspan", { x: textX, dy: i === 0 ? 0 : lineHeight, children: line }, i))
+    }
+  );
+}
+var MOTIVATION_TYPES = /* @__PURE__ */ new Set([
+  "Stakeholder",
+  "Driver",
+  "Assessment",
+  "Goal",
+  "Outcome",
+  "Principle",
+  "Requirement",
+  "Constraint",
+  "Meaning",
+  "Value"
+]);
+var STRATEGY_TYPES = /* @__PURE__ */ new Set(["Capability", "Resource", "CourseOfAction", "ValueStream"]);
+var IMPLEMENTATION_TYPES = /* @__PURE__ */ new Set([
+  "WorkPackage",
+  "Deliverable",
+  "Plateau",
+  "Gap",
+  "ImplementationEvent"
+]);
+function shapeForType(elementType, h) {
+  if (!elementType) return { kind: "rect", rx: 4 };
+  if (elementType.endsWith("Service")) return { kind: "stadium" };
+  if (elementType.endsWith("Process") || elementType.endsWith("Function") || elementType.endsWith("Interaction") || elementType.endsWith("Event"))
+    return { kind: "rect", rx: Math.min(14, h / 3) };
+  if (MOTIVATION_TYPES.has(elementType)) return { kind: "rect", rx: Math.min(18, h / 2.5) };
+  if (STRATEGY_TYPES.has(elementType)) return { kind: "rect", rx: Math.min(12, h / 3) };
+  if (IMPLEMENTATION_TYPES.has(elementType)) return { kind: "rect", rx: 6 };
+  return { kind: "rect", rx: 2 };
+}
+function ElementShape({
+  node,
+  dashed,
+  transparent
+}) {
+  const fontSize = node.fontSize ?? 11;
+  const fill = transparent ? "none" : node.fill;
+  const iconName = iconNameForType(node.elementType);
+  const showIcon = !!iconName && node.w >= 50 && node.h >= 28;
+  const iconSize = showIcon ? Math.min(22, Math.max(14, node.w * 0.18)) : 0;
+  const shape = shapeForType(node.elementType, node.h);
+  const radius = shape.kind === "stadium" ? node.h / 2 : shape.rx;
+  return /* @__PURE__ */ jsxs("g", { style: { color: node.stroke }, children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: node.x,
+        y: node.y,
+        width: node.w,
+        height: node.h,
+        fill,
+        stroke: node.stroke,
+        strokeWidth: 1,
+        strokeDasharray: dashed ? "5 4" : void 0,
+        rx: radius,
+        ry: radius
+      }
+    ),
+    showIcon ? /* @__PURE__ */ jsx(
+      IconBadge,
+      {
+        x: node.x + node.w - iconSize - 5,
+        y: node.y + 5,
+        size: iconSize,
+        iconName,
+        color: node.stroke
+      }
+    ) : null,
+    node.label ? (() => {
+      const textX = node.x + node.w / 2;
+      const textY = node.y + Math.min(16, node.h / 2 + fontSize / 2);
+      const availWidth = node.w - (showIcon ? iconSize + 12 : 8);
+      const lines = wrapLabel(node.label, availWidth, fontSize);
+      return /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: textX,
+          y: textY,
+          textAnchor: "middle",
+          fontFamily: node.fontFamily ?? "system-ui, -apple-system, sans-serif",
+          fontSize,
+          fill: node.textColor,
+          children: lines.map((line, i) => /* @__PURE__ */ jsx("tspan", { x: textX, dy: i === 0 ? 0 : fontSize * 1.2, children: line }, i))
+        }
+      );
+    })() : null
+  ] });
+}
+function IconBadge({
+  x,
+  y,
+  size,
+  iconName,
+  color
+}) {
+  const def = ICONS[iconName];
+  if (!def) return null;
+  const scale = size / 100;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      transform: `translate(${x} ${y}) scale(${scale})`,
+      stroke: color,
+      strokeWidth: 5,
+      fill: "none",
+      strokeLinejoin: "round",
+      strokeLinecap: "round",
+      children: [
+        def.outline?.map((d, i) => /* @__PURE__ */ jsx("path", { d }, `o-${i}`)),
+        def.filled?.map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: color, stroke: "none" }, `f-${i}`))
+      ]
+    }
+  );
+}
+function wrapLabel(label, width, fontSize, maxLines = 3) {
+  const maxChars = Math.max(1, Math.floor(width / (fontSize * 0.55)));
+  const words = label.split(/\s+/).filter(Boolean);
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length <= maxChars) {
+      current = candidate;
+      continue;
+    }
+    if (current) lines.push(current);
+    if (word.length > maxChars) {
+      let rest = word;
+      while (rest.length > maxChars) {
+        lines.push(rest.slice(0, maxChars));
+        rest = rest.slice(maxChars);
+      }
+      current = rest;
+    } else {
+      current = word;
+    }
+  }
+  if (current) lines.push(current);
+  if (lines.length > maxLines) {
+    const truncated = lines.slice(0, maxLines);
+    const last = truncated.length - 1;
+    truncated[last] = truncated[last].slice(0, Math.max(1, maxChars - 1)) + "\u2026";
+    return truncated;
+  }
+  return lines;
+}
+export {
+  ArchimateParseError,
+  ArchimateRenderer,
+  ICONS,
+  LAYER_COLORS,
+  colorForType,
+  iconNameForType,
+  parseArchimate
+};