@sebastianwessel/isostate 0.4.0 → 0.6.0

package/dist/chunks/rendering-engine-DLaM1XbU.js

@@ -0,0 +1,1425 @@
+import { R as RenderError } from './errors-2yA81Vfb.js';
+
+const BUILTIN_THEMES = {
+  light: {
+    "--color-top": "#e2e8f0",
+    "--color-front": "#94a3b8",
+    "--color-side": "#64748b",
+    "--color-back": "#475569",
+    "--color-leaf": "#15803d",
+    "--color-trunk": "#78350f",
+    "--color-accent": "#3b82f6"
+  },
+  dark: {
+    "--color-top": "#334155",
+    "--color-front": "#1e293b",
+    "--color-side": "#0f172a",
+    "--color-back": "#020617",
+    "--color-leaf": "#166534",
+    "--color-trunk": "#451a03",
+    "--color-accent": "#60a5fa"
+  },
+  brand: {
+    "--color-top": "#c7d2fe",
+    "--color-front": "#818cf8",
+    "--color-side": "#6366f1",
+    "--color-back": "#4338ca",
+    "--color-leaf": "#22c55e",
+    "--color-trunk": "#854d0e",
+    "--color-accent": "#f59e0b"
+  }
+};
+function resolveTheme(name) {
+  return Object.hasOwn(BUILTIN_THEMES, name) ? BUILTIN_THEMES[name] : void 0;
+}
+function composeTheme(baseName, overrides) {
+  const base = resolveTheme(baseName);
+  if (!base) {
+    return { name: baseName, vars: { ...overrides } };
+  }
+  return { name: baseName, vars: { ...base, ...overrides } };
+}
+class AssetRegistryImpl {
+  _assets = /* @__PURE__ */ new Map();
+  register(asset) {
+    this._assets.set(asset.id, asset);
+  }
+  get(id) {
+    return this._assets.get(id);
+  }
+  getAll(category) {
+    if (category) {
+      return [...this._assets.values()].filter((a) => a.category === category);
+    }
+    return [...this._assets.values()];
+  }
+  has(id) {
+    return this._assets.has(id);
+  }
+  remove(id) {
+    this._assets.delete(id);
+  }
+}
+function createAssetRegistry(assets = []) {
+  const registry = new AssetRegistryImpl();
+  for (const asset of assets) {
+    registry.register(asset);
+  }
+  return registry;
+}
+function createDefaultRegistry() {
+  return createAssetRegistry([
+    {
+      id: "iso-platform",
+      category: "infrastructure"
+    },
+    {
+      id: "iso-server",
+      category: "equipment"
+    },
+    {
+      id: "iso-database",
+      category: "equipment"
+    },
+    {
+      id: "iso-connector",
+      category: "decoration"
+    },
+    {
+      id: "iso-cloud",
+      category: "decoration"
+    }
+  ]);
+}
+
+const DEFAULT_CELL_SIZE = 64;
+function projectToRaw(gridX, gridY, cellSize) {
+  return {
+    rawX: cellSize * (gridX - gridY) * 0.5,
+    rawY: cellSize * (gridX + gridY) * 0.25
+  };
+}
+function projectToScreen(gridX, gridY, cellSize, boundsMinX = 0, boundsMinY = 0, paddingX = 0, paddingY = 0) {
+  const { rawX, rawY } = projectToRaw(gridX, gridY, cellSize);
+  return {
+    screenX: rawX - boundsMinX + paddingX,
+    screenY: rawY - boundsMinY + paddingY
+  };
+}
+function calculateVisualSize(gridSize, cellSize) {
+  return cellSize * gridSize;
+}
+function calculateTransform(screenX, screenY, visualSize, cellSize) {
+  const scale = visualSize / cellSize;
+  return `translate(${screenX}px, ${screenY}px) scale(${scale})`;
+}
+
+function buildKeyframeCSS() {
+  return [
+    "@keyframes iso-anim-fade-in{from{opacity:0}to{opacity:1}}",
+    "@keyframes iso-anim-fade-in-grow{from{opacity:0;scale:.01}to{opacity:1;scale:1}}",
+    "@keyframes iso-anim-fall-in{from{opacity:0;translate:0 -40px}to{opacity:1;translate:0 0}}",
+    "@keyframes iso-anim-rise-from-ground{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}",
+    "@keyframes iso-anim-slide-in-left{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}",
+    "@keyframes iso-anim-slide-in-right{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}",
+    "@keyframes iso-anim-flip-in{from{opacity:1;scale:0 1}to{opacity:1;scale:1 1}}",
+    "@keyframes iso-anim-fade-out{from{opacity:1}to{opacity:0}}",
+    "@keyframes iso-anim-fade-out-shrink{from{opacity:1;scale:1}to{opacity:0;scale:.01}}",
+    "@keyframes iso-anim-fall-through-ground{from{opacity:1;translate:0 0}to{opacity:0;translate:0 40px}}",
+    "@keyframes iso-anim-rise-away{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -40px}}",
+    "@keyframes iso-anim-slide-out-left{from{opacity:1;translate:0 0}to{opacity:0;translate:-60px 0}}",
+    "@keyframes iso-anim-slide-out-right{from{opacity:1;translate:0 0}to{opacity:0;translate:60px 0}}",
+    "@keyframes iso-anim-flip-out{from{opacity:1;scale:1 1}to{opacity:0;scale:0 1}}",
+    "@keyframes iso-anim-pulse{0%,100%{opacity:.7}50%{opacity:1}}",
+    "@keyframes iso-anim-float{0%,100%{translate:0 0}50%{translate:0 -6px}}",
+    "@keyframes iso-anim-shake{0%,25%,75%,100%{translate:0 0}50%{translate:3px 0}}",
+    "@keyframes iso-anim-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}50%{filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}}",
+    "@keyframes iso-anim-spin{from{rotate:0deg}to{rotate:360deg}}",
+    "@keyframes iso-anim-blink{0%,49%{opacity:1}50%,100%{opacity:0}}",
+    ".iso-ambient-pulse{animation:iso-anim-pulse 2s ease-in-out infinite}",
+    ".iso-ambient-float{animation:iso-anim-float 3s ease-in-out infinite}",
+    ".iso-ambient-shake{animation:iso-anim-shake 0.5s ease-in-out infinite}",
+    ".iso-ambient-glow{animation:iso-anim-glow 2s ease-in-out infinite}",
+    ".iso-ambient-spin{animation:iso-anim-spin 4s linear infinite}",
+    ".iso-ambient-blink{animation:iso-anim-blink 1.5s step-end infinite}",
+    "@keyframes iso-connector-flow-route{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1px * var(--iso-flow-distance,20))}}",
+    "@keyframes iso-connector-flow-reverse{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(1px * var(--iso-flow-distance,20))}}",
+    ".iso-connector-pattern-dashed .iso-connector-shaft,.iso-connector-pattern-dotted .iso-connector-shaft{--iso-flow-distance:20}",
+    ".iso-connector-direction-route .iso-connector-shaft.iso-ambient-flow{animation:iso-connector-flow-route 900ms linear infinite}",
+    ".iso-connector-direction-reverse .iso-connector-shaft.iso-ambient-flow{animation:iso-connector-flow-reverse 900ms linear infinite}",
+    "@media (prefers-reduced-motion: reduce){.iso-element,.iso-connector{animation-duration:1ms!important}.iso-ambient-pulse,.iso-ambient-float,.iso-ambient-shake,.iso-ambient-glow,.iso-ambient-spin,.iso-ambient-blink,.iso-ambient-flow{animation:none!important}}",
+    "@keyframes iso-message-travel{from{offset-distance:0%}to{offset-distance:100%}}",
+    ".iso-message{offset-anchor:0px 0px;offset-rotate:0deg;animation:iso-message-travel 1800ms linear infinite;pointer-events:none}",
+    "@keyframes iso-activity-breathe{0%,100%{opacity:.45}50%{opacity:1}}",
+    ".iso-activity-processing .iso-activity-ring{animation:iso-activity-breathe 1800ms ease-in-out infinite}",
+    ".iso-activity-waiting .iso-activity-badge{animation:iso-activity-breathe 2600ms ease-in-out infinite}",
+    ".iso-motion-paused *{animation-play-state:paused!important}.iso-motion-stopped *{animation:none!important}",
+    "@media (prefers-reduced-motion:reduce){.iso-message{animation:none!important;offset-distance:50%}.iso-activity *{animation:none!important}}",
+    ".iso-interactive g[data-id]{cursor:pointer}"
+  ].join("\n");
+}
+
+const NS$2 = "http://www.w3.org/2000/svg";
+function createAssetResolver(bundle) {
+  const embedded = /* @__PURE__ */ new Map();
+  const bundleAssets = bundle?.assets;
+  if (bundleAssets && typeof bundleAssets === "object") {
+    for (const [name, asset] of Object.entries(bundleAssets)) {
+      if (asset && typeof asset === "object" && typeof asset.url === "string") {
+        embedded.set(name, { url: asset.url, anchor: asset.anchor, sprite: asset.sprite });
+      }
+    }
+  }
+  return (name) => embedded.get(name);
+}
+function createAssetNode(asset, assetName, cellSize) {
+  if (asset.sprite) {
+    return createSpriteAssetNode(asset.url, assetName, cellSize, asset.sprite, asset.anchor);
+  }
+  return createUrlAssetNode(asset.url, assetName, cellSize, asset.anchor);
+}
+function createTextAssetNode(textContent, assetName, cellSize) {
+  if (!textContent?.value) {
+    throw new RenderError("TEXT_CONTENT_MISSING", `Text content is missing for built-in asset: ${assetName}`, {
+      asset: assetName
+    });
+  }
+  const group = document.createElementNS(NS$2, "g");
+  const text = document.createElementNS(NS$2, "text");
+  const align = textContent.align ?? "middle";
+  const placement = textContent.placement ?? "cell";
+  const fontSize = textContent.fontSize ?? 12;
+  const lineHeight = textContent.lineHeight ?? 1.2;
+  const anchorX = textAnchorX(align, cellSize);
+  const vertical = textVerticalAnchor(placement, cellSize);
+  text.setAttribute("x", String(anchorX));
+  text.setAttribute("y", String(vertical.y));
+  text.setAttribute("text-anchor", align);
+  text.setAttribute("dominant-baseline", vertical.baseline);
+  text.setAttribute("font-family", "Arial, Helvetica, sans-serif");
+  text.setAttribute("font-size", String(fontSize));
+  text.setAttribute("font-weight", String(textContent.fontWeight ?? 700));
+  text.setAttribute("fill", textContent.fill ?? "currentColor");
+  const lines = normalizeTextLines(textContent.value);
+  for (const [index, line] of lines.entries()) {
+    const tspan = document.createElementNS(NS$2, "tspan");
+    tspan.setAttribute("x", String(anchorX));
+    tspan.setAttribute("dy", index === 0 ? "0" : String(fontSize * lineHeight));
+    tspan.textContent = line;
+    text.appendChild(tspan);
+  }
+  group.appendChild(text);
+  return group;
+}
+function createPrimitiveAssetNode(assetName, primitive, cellSize) {
+  const group = document.createElementNS(NS$2, "g");
+  switch (assetName) {
+    case "rectangle":
+      appendProjectedPolygon(group, rectanglePoints(), primitive?.rectangle, cellSize);
+      return group;
+    case "polygon":
+      appendProjectedPolygon(group, primitive?.polygon?.points, primitive?.polygon, cellSize);
+      return group;
+    case "line":
+      appendProjectedPolyline(group, primitive?.line, primitive?.line, cellSize);
+      return group;
+    case "circle":
+      appendCircle(group, primitive?.circle, cellSize);
+      return group;
+    default:
+      throw new RenderError("PRIMITIVE_ASSET_UNKNOWN", `Unknown built-in primitive asset: ${assetName}`, {
+        asset: assetName
+      });
+  }
+}
+function textAnchorX(align, cellSize) {
+  if (align === "start") return -cellSize / 2;
+  if (align === "end") return cellSize / 2;
+  return 0;
+}
+function textVerticalAnchor(placement, cellSize) {
+  if (placement === "caption") return { y: -cellSize, baseline: "text-before-edge" };
+  return { y: -cellSize / 2, baseline: "middle" };
+}
+function normalizeTextLines(value) {
+  const normalized = value.replace(/\r\n?/g, "\n").replace(/\n$/, "");
+  return normalized.split("\n");
+}
+function rectanglePoints() {
+  return [
+    [0, 0],
+    [1, 0],
+    [1, 1],
+    [0, 1]
+  ];
+}
+function appendProjectedPolygon(group, points, style, cellSize) {
+  if (!points) return;
+  const polygon = document.createElementNS(NS$2, "polygon");
+  polygon.setAttribute("points", points.map((point) => projectLocalPoint(point, cellSize)).join(" "));
+  applyPrimitiveStyle(polygon, style, { fill: "currentColor", stroke: "none" });
+  group.appendChild(polygon);
+}
+function appendProjectedPolyline(group, line, style, cellSize) {
+  if (!line?.points) return;
+  const polyline = document.createElementNS(NS$2, "polyline");
+  polyline.setAttribute("points", line.points.map((point) => projectLocalPoint(point, cellSize)).join(" "));
+  polyline.setAttribute("fill", "none");
+  polyline.setAttribute("stroke-linecap", line.lineCap ?? "round");
+  polyline.setAttribute("stroke-linejoin", line.lineJoin ?? "round");
+  applyPrimitiveStyle(polyline, style, {
+    fill: "none",
+    stroke: "currentColor"
+  });
+  group.appendChild(polyline);
+}
+function appendCircle(group, style, cellSize) {
+  const center = projectLocalPoint([0.5, 0.5], cellSize);
+  const circle = document.createElementNS(NS$2, "circle");
+  const [cx, cy] = center.split(",").map(Number);
+  circle.setAttribute("cx", String(cx));
+  circle.setAttribute("cy", String(cy));
+  circle.setAttribute("r", String(cellSize * 0.2));
+  applyPrimitiveStyle(circle, style, {
+    fill: "currentColor",
+    stroke: "none"
+  });
+  group.appendChild(circle);
+}
+function projectLocalPoint(point, cellSize) {
+  const projected = projectToRaw(point[0], point[1], cellSize);
+  const anchor = projectToRaw(1, 1, cellSize);
+  return `${projected.rawX - anchor.rawX},${projected.rawY - anchor.rawY}`;
+}
+function applyPrimitiveStyle(node, style, defaults) {
+  node.setAttribute("fill", style?.fill ?? defaults.fill);
+  node.setAttribute("stroke", style?.stroke ?? defaults.stroke);
+  node.setAttribute("stroke-width", String(style?.strokeWidth ?? 0));
+  node.setAttribute("opacity", String(style?.opacity ?? 1));
+  if (style?.dash) node.setAttribute("stroke-dasharray", style.dash.join(" "));
+}
+function createUrlAssetNode(url, assetName, cellSize, anchor) {
+  if (!isSafeAssetUrl(url)) {
+    throw new RenderError("INVALID_ASSET_URL", `Asset URL is unsafe: ${assetName}`, { asset: assetName });
+  }
+  const group = document.createElementNS(NS$2, "g");
+  const image = document.createElementNS(NS$2, "image");
+  const resolvedUrl = resolveBrowserAssetUrl(url);
+  const [anchorX, anchorY] = anchor ?? [0.5, 1];
+  image.setAttribute("href", resolvedUrl);
+  image.setAttributeNS("http://www.w3.org/1999/xlink", "href", resolvedUrl);
+  image.setAttribute("x", String(-cellSize * anchorX));
+  image.setAttribute("y", String(-cellSize * anchorY));
+  image.setAttribute("width", String(cellSize));
+  image.setAttribute("height", String(cellSize));
+  image.setAttribute("preserveAspectRatio", "xMidYMax meet");
+  group.appendChild(image);
+  return group;
+}
+function createSpriteAssetNode(url, assetName, cellSize, sprite, anchor) {
+  if (!isSafeAssetUrl(url)) {
+    throw new RenderError("INVALID_ASSET_URL", `Asset URL is unsafe: ${assetName}`, { asset: assetName });
+  }
+  const group = document.createElementNS(NS$2, "g");
+  const viewport = document.createElementNS(NS$2, "svg");
+  const image = document.createElementNS(NS$2, "image");
+  const resolvedUrl = resolveBrowserAssetUrl(url);
+  const [anchorX, anchorY] = anchor ?? [0.5, 1];
+  const [rectX, rectY, rectWidth, rectHeight] = sprite.rect;
+  viewport.setAttribute("x", String(-cellSize * anchorX));
+  viewport.setAttribute("y", String(-cellSize * anchorY));
+  viewport.setAttribute("width", String(cellSize));
+  viewport.setAttribute("height", String(cellSize));
+  viewport.setAttribute("viewBox", `${rectX} ${rectY} ${rectWidth} ${rectHeight}`);
+  viewport.setAttribute("preserveAspectRatio", "xMidYMax meet");
+  image.setAttribute("href", resolvedUrl);
+  image.setAttributeNS("http://www.w3.org/1999/xlink", "href", resolvedUrl);
+  image.setAttribute("x", "0");
+  image.setAttribute("y", "0");
+  image.setAttribute("width", String(sprite.sheetSize[0]));
+  image.setAttribute("height", String(sprite.sheetSize[1]));
+  viewport.appendChild(image);
+  group.appendChild(viewport);
+  return group;
+}
+function resolveBrowserAssetUrl(url) {
+  try {
+    const baseURI = document.baseURI;
+    return typeof baseURI === "string" ? new URL(url, baseURI).href : url;
+  } catch {
+    return url;
+  }
+}
+function isSafeAssetUrl(url) {
+  const normalized = url.trim().toLowerCase();
+  return normalized.length > 0 && !normalized.startsWith("javascript:");
+}
+
+const NS$1 = "http://www.w3.org/2000/svg";
+function roundedPath(points, radius) {
+  if (!points.length) return "";
+  let result = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length; i++) {
+    const point = points[i];
+    const previous = points[i - 1];
+    const next = points[i + 1];
+    const before = Math.hypot(point.x - previous.x, point.y - previous.y);
+    const after = next ? Math.hypot(next.x - point.x, next.y - point.y) : 0;
+    const distance = Math.min(radius, before / 2, after / 2);
+    if (!next || !distance) {
+      result += ` L ${point.x} ${point.y}`;
+      continue;
+    }
+    const a = {
+      x: point.x + (previous.x - point.x) * distance / before,
+      y: point.y + (previous.y - point.y) * distance / before
+    };
+    const b = {
+      x: point.x + (next.x - point.x) * distance / after,
+      y: point.y + (next.y - point.y) * distance / after
+    };
+    result += ` L ${a.x} ${a.y} Q ${point.x} ${point.y} ${b.x} ${b.y}`;
+  }
+  return result;
+}
+function shape(tag, attrs) {
+  const node = document.createElementNS(NS$1, tag);
+  for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+  return node;
+}
+function updateTrackEffects(node, shaft, def, d) {
+  for (const old of node.querySelectorAll(".iso-track-effect")) node.removeChild(old);
+  const { style } = def;
+  if (style.glow) {
+    const glow = shape("path", {
+      d,
+      fill: "none",
+      stroke: style.glow,
+      "stroke-width": style.strokeWidth + (style.glowWidth ?? 8),
+      opacity: style.opacity * 0.16,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: "iso-track-effect iso-connector-glow"
+    });
+    node.insertBefore(glow, node.firstChild);
+  }
+  if (style.variant !== "beam") return;
+  const highlight = shape("path", {
+    d,
+    fill: "none",
+    stroke: "#efffff",
+    "stroke-width": Math.max(0.6, style.strokeWidth * 0.23),
+    opacity: style.opacity * 0.7,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    class: "iso-track-effect iso-connector-highlight"
+  });
+  node.insertBefore(highlight, shaft.nextSibling);
+}
+function messageToken(kind, size, color) {
+  const group = shape("g", { transform: `scale(${size / 16})`, fill: color });
+  group.appendChild(shape("ellipse", { cx: 1, cy: 5, rx: 9, ry: 3.5, fill: "#07131f", opacity: 0.35 }));
+  if (kind === "orb") {
+    group.appendChild(shape("circle", { r: 7, fill: "#173343" }));
+    group.appendChild(shape("circle", { cx: -1, cy: -1.5, r: 5.6 }));
+    group.appendChild(shape("ellipse", { cx: -2, cy: -3.5, rx: 2.5, ry: 1.6, fill: "#fff", opacity: 0.85 }));
+  } else if (kind === "envelope") {
+    group.appendChild(shape("path", { d: "M-8-5 8-2 8 6-8 3Z", fill: "#142e3c", stroke: color, "stroke-width": 1 }));
+    group.appendChild(shape("path", { d: "M-8-5 8-2 0 2Z" }));
+    group.appendChild(
+      shape("path", { d: "M-7-4 0 1 7-1", fill: "none", stroke: "#f0ffff", "stroke-width": 0.8, opacity: 0.8 })
+    );
+  } else {
+    group.appendChild(shape("path", { d: "M-8-2 0-6 8-2 0 2Z" }));
+    group.appendChild(shape("path", { d: "M-8-2 0 2 0 7-8 3Z", fill: "#183544", stroke: color, "stroke-width": 0.6 }));
+    group.appendChild(shape("path", { d: "M0 2 8-2 8 3 0 7Z", opacity: 0.65 }));
+    group.appendChild(
+      shape("path", { d: "M-6-2 0-5 6-2", fill: "none", stroke: "#fff", "stroke-width": 0.9, opacity: 0.85 })
+    );
+  }
+  return group;
+}
+function updateMessages(node, def, d, recreate) {
+  if (recreate) for (const old of node.querySelectorAll(".iso-message")) node.removeChild(old);
+  const message = def.message;
+  if (!message || message.enabled === false) return;
+  if (recreate) {
+    const count = message.count ?? 1;
+    const duration = message.duration ?? 1800;
+    for (let i = 0; i < count; i++) {
+      const token = shape("g", { class: "iso-message", "aria-hidden": "true", "data-kind": message.kind ?? "packet" });
+      token.style.animationDuration = `${duration}ms`;
+      token.style.animationDelay = `${-duration * i / count}ms`;
+      token.appendChild(messageToken(message.kind ?? "packet", message.size ?? 10, message.color ?? def.style.stroke));
+      node.appendChild(token);
+    }
+  }
+  for (const token of node.querySelectorAll(".iso-message")) {
+    token.style.offsetPath = `path("${d}")`;
+    token.style.opacity = String(def.style.opacity);
+    token.style.animationDirection = def.direction === "reverse" ? "reverse" : "normal";
+    token.style.display = def.presence === "removed" ? "none" : "";
+  }
+}
+function updateActivity(node, activity, cellSize) {
+  for (const old of node.querySelectorAll(".iso-activity")) node.removeChild(old);
+  node.setAttribute("data-activity", activity?.state ?? "idle");
+  if (!activity || activity.state === "idle") return;
+  const state = activity.state;
+  const color = activity.color ?? { processing: "#67e8f9", waiting: "#fbbf24", complete: "#6ee7b7", error: "#fb7185" }[state];
+  const group = shape("g", {
+    class: `iso-activity iso-activity-${state}`,
+    color,
+    "aria-label": state,
+    "pointer-events": "none"
+  });
+  const radius = cellSize * 0.36;
+  const halo = shape("ellipse", {
+    cx: 0,
+    cy: -2,
+    rx: radius,
+    ry: radius * 0.42,
+    fill: color,
+    "fill-opacity": 0.08,
+    stroke: color,
+    "stroke-opacity": 0.6,
+    "stroke-width": 1.3,
+    class: "iso-activity-ring"
+  });
+  group.appendChild(halo);
+  const badge = shape("g", {
+    transform: `translate(${cellSize * 0.29} ${-cellSize * 0.6})`,
+    class: "iso-activity-badge"
+  });
+  badge.appendChild(shape("circle", { r: 6, fill: "#102330", stroke: color, "stroke-width": 1 }));
+  const glyph = {
+    processing: "M-2 0h4M0-2v4",
+    waiting: "M-2-2v4M2-2v4",
+    complete: "M-3 0-1 2 3-2",
+    error: "M0-3v3M0 2v.5"
+  }[state];
+  badge.appendChild(
+    shape("path", {
+      d: glyph,
+      fill: "none",
+      stroke: color,
+      "stroke-width": 1.5,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  );
+  group.appendChild(badge);
+  node.appendChild(group);
+}
+
+const CSS_CUSTOM_PROPERTY_PATTERN = /^--[a-zA-Z0-9-_]+$/;
+function applyThemeToElement(element, themeVars) {
+  for (const [name, value] of Object.entries(themeVars)) {
+    if (!CSS_CUSTOM_PROPERTY_PATTERN.test(name)) {
+      throw new RenderError("INVALID_THEME_VAR", `Invalid CSS custom property name: ${name}`);
+    }
+    element.style.setProperty(name, value);
+  }
+}
+
+const NS = "http://www.w3.org/2000/svg";
+const BUILT_IN_TEXT_ASSET_ID = "text";
+const BUILT_IN_PRIMITIVE_ASSET_IDS = /* @__PURE__ */ new Set(["rectangle", "circle", "polygon", "line"]);
+const DEFAULT_CONNECTOR_DASH = {
+  dashed: [12, 8],
+  dotted: [0, 8]
+};
+const ENDPOINT_RADIUS_GRID = 0.14;
+const ARROW_LENGTH_GRID = 0.35;
+const ARROW_WIDTH_GRID = 0.28;
+const BAR_WIDTH_GRID = 0.4;
+function buildSceneDOM(container, bundle, config) {
+  const layout = resolveSceneLayout(bundle);
+  const initialStop = bundle.scenes[0];
+  const allElements = collectElementDefinitions(bundle);
+  const allConnectors = collectConnectorDefinitions(bundle);
+  const initialById = new Map((initialStop?.elements ?? []).map((element) => [element.id, element]));
+  const initialConnectorsById = new Map((initialStop?.connectors ?? []).map((connector) => [connector.id, connector]));
+  const svg = createRootSvg(layout, config?.label, bundle.className);
+  const assetResolver = createAssetResolver(bundle);
+  svg._assetResolver = assetResolver;
+  svg.appendChild(createCssDefs());
+  applyThemeToElement(svg, {
+    ...resolveTheme(bundle.theme) ?? {},
+    ...bundle.themeVars ?? {},
+    ...config?.themeVars ?? {}
+  });
+  const sortedLayers = sortLayers(bundle.layers);
+  const layerMap = createLayerMap(sortedLayers);
+  if (bundle.floor.visible) {
+    svg.appendChild(createFloorGrid(bundle, layout));
+  }
+  const connectorMap = /* @__PURE__ */ new Map();
+  for (const def of allConnectors) {
+    const initial = initialConnectorsById.get(def.id) ?? {
+      ...def,
+      presence: "removed"
+    };
+    const state = createConnectorInstance(initial, layout);
+    if (initial.presence === "removed") {
+      state.isHidden = true;
+      hideElementAfterExit(state.node);
+    }
+    applyConnectorAmbientClasses(state, initial.ambient ?? []);
+    svg.appendChild(state.node);
+    connectorMap.set(def.id, state);
+  }
+  const depthGroup = document.createElementNS(NS, "g");
+  depthGroup.classList.add("iso-depth-layer");
+  depthGroup.setAttribute("data-layer", "depth");
+  svg.appendChild(depthGroup);
+  const labelGroup = document.createElementNS(NS, "g");
+  labelGroup.classList.add("iso-layer", "iso-layer-labels");
+  labelGroup.setAttribute("data-layer", "labels");
+  svg.appendChild(labelGroup);
+  const elementMap = /* @__PURE__ */ new Map();
+  const sortedElements = sortElementsForPerspective(allElements);
+  for (const def of sortedElements) {
+    const declaredLayer = layerMap.get(def.layer);
+    if (!declaredLayer) {
+      throw new RenderError("MISSING_LAYER", `Unknown layer for "${def.id}": ${def.layer}`);
+    }
+    const initial = initialById.get(def.id) ?? {
+      ...def,
+      presence: "removed"
+    };
+    const instance = createElementInstance(initial, layout, assetResolver);
+    instance.anchor = assetAnchorForBounds(bundle, initial);
+    instance.node.classList.add(`iso-layer-${def.layer}`);
+    instance.node.setAttribute("data-layer", def.layer);
+    if (initial.presence === "removed") {
+      instance.isHidden = true;
+      hideElementAfterExit(instance.node);
+    }
+    applyAmbientClasses(instance, initial.ambient ?? []);
+    const parent = isTextAsset(def.asset) ? labelGroup : depthGroup;
+    parent.appendChild(instance.node);
+    elementMap.set(def.id, instance);
+  }
+  svg._layerMap = layerMap;
+  svg._elementMap = elementMap;
+  svg._connectorMap = connectorMap;
+  svg._depthGroup = depthGroup;
+  container.appendChild(svg);
+  return svg;
+}
+function updateElementTransforms(svg, elements, connectors = []) {
+  const layout = svg._layout;
+  if (!layout) return;
+  const map = svg._elementMap;
+  if (map) {
+    for (const def of elements) {
+      const state = map.get(def.id);
+      if (!state) continue;
+      const previous = state.current;
+      state.current = def;
+      if (!hasEqualGeneratedContent(previous, def)) {
+        updateGeneratedElementContent(state.node, def, layout, svg._assetResolver);
+        state.anchor = svg._assetResolver?.(def.asset)?.anchor ?? [0.5, 1];
+      }
+      if (!hasEqualGeneratedContent(previous, def) || !deepEqual(previous.activity, def.activity)) {
+        updateActivity(state.node, def.activity, layout.cellSize);
+      }
+      applyElementTransform(state.node, def, layout);
+      applyAmbientClasses(state, def.ambient ?? []);
+    }
+    if (svg._depthGroup) {
+      reconcileDepthOrder(svg._depthGroup, map);
+    }
+  }
+  const connectorMap = svg._connectorMap;
+  if (!connectorMap) return;
+  for (const def of connectors) {
+    const state = connectorMap.get(def.id);
+    if (!state) continue;
+    applyConnectorState(state, def, layout);
+  }
+}
+function getElementState(svg, id) {
+  return svg._elementMap?.get(id);
+}
+function getConnectorState(svg, id) {
+  return svg._connectorMap?.get(id);
+}
+function getResolvedViewBox(bundle) {
+  return resolveSceneLayout(bundle).viewBox;
+}
+function getResolvedProjectionLayout(bundle) {
+  const layout = resolveSceneLayout(bundle);
+  return {
+    cellSize: layout.cellSize,
+    padding: layout.padding,
+    selectedBounds: layout.selectedBounds
+  };
+}
+function getCurrentElementBounds(svg, id) {
+  const layout = svg._layout;
+  const state = svg._elementMap?.get(id);
+  if (!layout || !state || state.current.presence === "removed") return void 0;
+  return boundsToViewBox(calculateElementBounds(state.current, layout, state.anchor));
+}
+function getGridAreaBounds(bundle, area) {
+  const layout = resolveSceneLayout(bundle);
+  const [x, y] = area.at;
+  const [width, height] = area.size;
+  let bounds = emptyBounds();
+  for (const point of [
+    [x, y],
+    [x + width, y],
+    [x, y + height],
+    [x + width, y + height]
+  ]) {
+    const screen = projectToScreen(
+      point[0],
+      point[1],
+      layout.cellSize,
+      layout.selectedBounds.minX,
+      layout.selectedBounds.minY,
+      layout.padding.x,
+      layout.padding.y
+    );
+    bounds = includePoint(bounds, screen.screenX, screen.screenY);
+  }
+  return boundsToViewBox(bounds);
+}
+function applySceneViewBox(svg, viewBox) {
+  svg.setAttribute("viewBox", `${viewBox.minX} ${viewBox.minY} ${viewBox.width} ${viewBox.height}`);
+}
+function hideElementAfterExit(node) {
+  node.classList.add("iso-motion-paused");
+  node.style.visibility = "hidden";
+  node.style.pointerEvents = "none";
+}
+function unhideElementOnReadd(node) {
+  node.classList.remove("iso-motion-paused");
+  node.style.visibility = "visible";
+  node.style.pointerEvents = "auto";
+}
+function resolveSceneLayout(bundle) {
+  const cellSize = bundle.grid.cellSize;
+  const padding = bundle.layout.padding;
+  const contentBounds = calculateContentBounds(bundle, cellSize);
+  const floorBounds = calculateFloorBounds(bundle, cellSize);
+  const selectedBounds = selectBounds(bundle.layout.bounds, contentBounds, floorBounds);
+  const width = selectedBounds.maxX - selectedBounds.minX + padding.x * 2;
+  const height = selectedBounds.maxY - selectedBounds.minY + padding.y * 2;
+  const viewBox = {
+    minX: 0,
+    minY: 0,
+    width: roundDimension(width || cellSize),
+    height: roundDimension(height || cellSize)
+  };
+  return {
+    cellSize,
+    padding,
+    contentBounds,
+    floorBounds,
+    selectedBounds,
+    viewBox
+  };
+}
+function calculateContentBounds(bundle, cellSize) {
+  let bounds = emptyBounds();
+  for (const stop of bundle.scenes) {
+    for (const element of stop.elements ?? []) {
+      if (element.presence === "removed") continue;
+      bounds = includeBounds(bounds, calculateRawElementBounds(bundle, element, cellSize));
+    }
+    for (const connector of stop.connectors ?? []) {
+      if (connector.presence === "removed") continue;
+      bounds = includeBounds(bounds, calculateConnectorBounds(connector, cellSize));
+    }
+  }
+  return normalizeBounds(bounds, cellSize);
+}
+function calculateRawElementBounds(bundle, element, cellSize) {
+  const { rawX, rawY } = projectToRaw(element.pos[0] + element.size, element.pos[1] + element.size, cellSize);
+  const visualSize = calculateVisualSize(element.size, cellSize);
+  const [anchorX, anchorY] = assetAnchorForBounds(bundle, element);
+  return activityBounds(
+    {
+      minX: rawX - visualSize * anchorX,
+      minY: rawY - visualSize * anchorY,
+      maxX: rawX + visualSize * (1 - anchorX),
+      maxY: rawY + visualSize * (1 - anchorY)
+    },
+    element,
+    rawX,
+    rawY,
+    visualSize
+  );
+}
+function calculateElementBounds(element, layout, anchor) {
+  const screen = projectToScreen(
+    element.pos[0] + element.size,
+    element.pos[1] + element.size,
+    layout.cellSize,
+    layout.selectedBounds.minX,
+    layout.selectedBounds.minY,
+    layout.padding.x,
+    layout.padding.y
+  );
+  const visualSize = calculateVisualSize(element.size, layout.cellSize);
+  return activityBounds(
+    {
+      minX: screen.screenX - visualSize * anchor[0],
+      minY: screen.screenY - visualSize * anchor[1],
+      maxX: screen.screenX + visualSize * (1 - anchor[0]),
+      maxY: screen.screenY + visualSize * (1 - anchor[1])
+    },
+    element,
+    screen.screenX,
+    screen.screenY,
+    visualSize
+  );
+}
+function activityBounds(bounds, element, x, y, size) {
+  if (!element.activity || element.activity.state === "idle") return bounds;
+  return includeBounds(bounds, {
+    minX: x - size * 0.4,
+    maxX: x + size * 0.4,
+    minY: y - size * 0.72,
+    maxY: y + size * 0.18
+  });
+}
+function assetAnchorForBounds(bundle, element) {
+  return bundle.assets?.[element.asset]?.anchor ?? [0.5, 1];
+}
+function calculateConnectorBounds(connector, cellSize) {
+  let bounds = emptyBounds();
+  for (const [x, y] of connector.route) {
+    const { rawX, rawY } = projectToRaw(x, y, cellSize);
+    bounds = includePoint(bounds, rawX, rawY);
+  }
+  const endpointPadding = Math.max(ARROW_LENGTH_GRID, BAR_WIDTH_GRID, ENDPOINT_RADIUS_GRID * 2) * cellSize;
+  const strokePadding = connector.style.strokeWidth / 2 + (connector.style.outlineWidth ?? 0);
+  const padding = endpointPadding + strokePadding + (connector.style.glow ? (connector.style.glowWidth ?? 8) / 2 : 0) + (connector.message?.size ?? 0) / 2;
+  return {
+    minX: bounds.minX - padding,
+    minY: bounds.minY - padding,
+    maxX: bounds.maxX + padding,
+    maxY: bounds.maxY + padding
+  };
+}
+function calculateFloorBounds(bundle, cellSize) {
+  const origin = bundle.floor.origin;
+  const [width, height] = bundle.floor.size;
+  const points = [
+    origin,
+    [origin[0] + width, origin[1]],
+    [origin[0], origin[1] + height],
+    [origin[0] + width, origin[1] + height]
+  ];
+  let bounds = emptyBounds();
+  for (const [x, y] of points) {
+    const { rawX, rawY } = projectToRaw(x, y, cellSize);
+    bounds = includePoint(bounds, rawX, rawY);
+  }
+  return normalizeBounds(bounds, cellSize);
+}
+function selectBounds(mode, content, floor) {
+  if (mode === "content") return content;
+  if (mode === "floor") return floor;
+  return includeBounds(content, floor);
+}
+function emptyBounds() {
+  return {
+    minX: Number.POSITIVE_INFINITY,
+    minY: Number.POSITIVE_INFINITY,
+    maxX: Number.NEGATIVE_INFINITY,
+    maxY: Number.NEGATIVE_INFINITY
+  };
+}
+function normalizeBounds(bounds, cellSize) {
+  if (Number.isFinite(bounds.minX)) return bounds;
+  return { minX: 0, minY: 0, maxX: cellSize, maxY: cellSize };
+}
+function boundsToViewBox(bounds) {
+  const centerX = (bounds.minX + bounds.maxX) / 2;
+  const centerY = (bounds.minY + bounds.maxY) / 2;
+  const width = Math.max(1, bounds.maxX - bounds.minX);
+  const height = Math.max(1, bounds.maxY - bounds.minY);
+  return {
+    minX: roundDimension(centerX - width / 2),
+    minY: roundDimension(centerY - height / 2),
+    width: roundDimension(width),
+    height: roundDimension(height)
+  };
+}
+function includePoint(bounds, x, y) {
+  return {
+    minX: Math.min(bounds.minX, x),
+    minY: Math.min(bounds.minY, y),
+    maxX: Math.max(bounds.maxX, x),
+    maxY: Math.max(bounds.maxY, y)
+  };
+}
+function includeBounds(bounds, next) {
+  return {
+    minX: Math.min(bounds.minX, next.minX),
+    minY: Math.min(bounds.minY, next.minY),
+    maxX: Math.max(bounds.maxX, next.maxX),
+    maxY: Math.max(bounds.maxY, next.maxY)
+  };
+}
+function roundDimension(value) {
+  return Math.round(value * 1e3) / 1e3;
+}
+function createRootSvg(layout, label, className) {
+  const svg = document.createElementNS(NS, "svg");
+  svg.classList.add("iso-scene");
+  for (const token of className?.trim().split(/\s+/) ?? []) {
+    if (token) svg.classList.add(token);
+  }
+  svg.setAttribute("width", "100%");
+  svg.setAttribute("height", "100%");
+  svg.setAttribute(
+    "viewBox",
+    `${layout.viewBox.minX} ${layout.viewBox.minY} ${layout.viewBox.width} ${layout.viewBox.height}`
+  );
+  svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+  svg.style.width = "100%";
+  svg.style.height = "100%";
+  svg.style.display = "block";
+  if (label) {
+    svg.setAttribute("role", "img");
+    svg.setAttribute("aria-label", label);
+  } else {
+    svg.setAttribute("aria-hidden", "true");
+  }
+  svg._layout = layout;
+  svg._viewBoxW = layout.viewBox.width;
+  svg._viewBoxH = layout.viewBox.height;
+  return svg;
+}
+function createCssDefs() {
+  const styleEl = document.createElementNS(NS, "style");
+  styleEl.textContent = buildKeyframeCSS();
+  return styleEl;
+}
+function createFloorGrid(bundle, layout) {
+  const group = document.createElementNS(NS, "g");
+  group.classList.add("iso-floor-grid", `iso-layer-${bundle.floor.layer}`);
+  group.setAttribute("data-layer", bundle.floor.layer);
+  const [originX, originY] = bundle.floor.origin;
+  const [columns, rows] = bundle.floor.size;
+  const corners = [
+    projectGridPoint(originX, originY, layout),
+    projectGridPoint(originX + columns, originY, layout),
+    projectGridPoint(originX + columns, originY + rows, layout),
+    projectGridPoint(originX, originY + rows, layout)
+  ];
+  const slab = document.createElementNS(NS, "polygon");
+  slab.classList.add("iso-floor-slab");
+  slab.setAttribute("points", corners.map(pointToString).join(" "));
+  slab.setAttribute("fill", "#dbe6f4");
+  slab.setAttribute("fill-opacity", "0.22");
+  slab.setAttribute("stroke", "#b9c9df");
+  slab.setAttribute("stroke-width", "1");
+  group.appendChild(slab);
+  for (let x = 0; x <= columns; x++) {
+    group.appendChild(
+      createFloorLine(
+        projectGridPoint(originX + x, originY, layout),
+        projectGridPoint(originX + x, originY + rows, layout)
+      )
+    );
+  }
+  for (let y = 0; y <= rows; y++) {
+    group.appendChild(
+      createFloorLine(
+        projectGridPoint(originX, originY + y, layout),
+        projectGridPoint(originX + columns, originY + y, layout)
+      )
+    );
+  }
+  return group;
+}
+function createFloorLine(start, end) {
+  const line = document.createElementNS(NS, "line");
+  line.setAttribute("x1", String(start.x));
+  line.setAttribute("y1", String(start.y));
+  line.setAttribute("x2", String(end.x));
+  line.setAttribute("y2", String(end.y));
+  line.setAttribute("stroke", "#2563eb");
+  line.setAttribute("stroke-width", "1");
+  line.setAttribute("stroke-dasharray", "5 5");
+  line.setAttribute("stroke-opacity", "0.2");
+  return line;
+}
+function projectGridPoint(x, y, layout) {
+  const screen = projectToScreen(
+    x,
+    y,
+    layout.cellSize,
+    layout.selectedBounds.minX,
+    layout.selectedBounds.minY,
+    layout.padding.x,
+    layout.padding.y
+  );
+  return { x: screen.screenX, y: screen.screenY };
+}
+function pointToString(point) {
+  return `${point.x},${point.y}`;
+}
+function createLayerMap(layers) {
+  return new Map(layers.map((layer) => [layer.name, layer]));
+}
+function sortLayers(layers) {
+  return [...layers].map((layer, index) => ({ name: layer.name, order: layer.order ?? index })).sort((a, b) => a.order - b.order || a.name.localeCompare(b.name));
+}
+function sortElementsForPerspective(elements) {
+  return elements.slice().sort((a, b) => {
+    const bucket = renderBucket(a) - renderBucket(b);
+    if (bucket !== 0) return bucket;
+    const depth = a.pos[0] + a.pos[1] - (b.pos[0] + b.pos[1]);
+    if (depth !== 0) return depth;
+    return a.id.localeCompare(b.id);
+  });
+}
+function renderBucket(element) {
+  if (isTextAsset(element.asset)) return 1;
+  return 0;
+}
+function reconcileDepthOrder(depthGroup, elementMap) {
+  const current = [];
+  for (const state of elementMap.values()) {
+    if (state.node.parentElement !== depthGroup) continue;
+    current.push(state.current);
+  }
+  if (current.length < 2) return;
+  const desiredOrder = sortElementsForPerspective(current);
+  const existingOrder = [...depthGroup.childNodes];
+  let orderMatches = existingOrder.length === desiredOrder.length;
+  if (orderMatches) {
+    for (let index = 0; index < desiredOrder.length; index++) {
+      const expectedId = desiredOrder[index]?.id;
+      if (existingOrder[index]?.getAttribute("data-id") !== expectedId) {
+        orderMatches = false;
+        break;
+      }
+    }
+  }
+  if (orderMatches) return;
+  for (const def of desiredOrder) {
+    const state = elementMap.get(def.id);
+    if (state) depthGroup.appendChild(state.node);
+  }
+}
+function collectElementDefinitions(bundle) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const stop of bundle.scenes) {
+    for (const element of stop.elements ?? []) {
+      if (!byId.has(element.id) || byId.get(element.id)?.presence === "removed") {
+        byId.set(element.id, element);
+      }
+    }
+  }
+  return [...byId.values()];
+}
+function collectConnectorDefinitions(bundle) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const stop of bundle.scenes) {
+    for (const connector of stop.connectors ?? []) {
+      if (!byId.has(connector.id) || byId.get(connector.id)?.presence === "removed") {
+        byId.set(connector.id, connector);
+      }
+    }
+  }
+  return [...byId.values()];
+}
+function createElementInstance(def, layout, resolveAsset) {
+  const node = def.asset === BUILT_IN_TEXT_ASSET_ID ? createTextAssetNode(def.text, def.asset, layout.cellSize) : isPrimitiveAsset(def.asset) ? createPrimitiveAssetNode(def.asset, def.primitive, layout.cellSize) : createResolvedAssetNode(def, resolveAsset, layout.cellSize);
+  node.classList.add("iso-element", `iso-element-${def.id}`);
+  node.setAttribute("data-id", def.id);
+  node.setAttribute("data-asset", def.asset);
+  node.style.overflow = "visible";
+  node.style.pointerEvents = "auto";
+  applyElementTransform(node, def, layout);
+  updateActivity(node, def.activity, layout.cellSize);
+  const entryAnim = def.enter;
+  if (entryAnim && entryAnim !== "none" && def.presence !== "removed") {
+    const keyName = `iso-anim-${entryAnim}`;
+    animateElement(node, keyName, "enter");
+    const expectedAnimation = node.style.animation;
+    node.addEventListener(
+      "animationend",
+      () => {
+        if (node.style.animation === expectedAnimation) node.style.animation = "";
+      },
+      { once: true }
+    );
+    return { node, current: def, anchor: [0.5, 1], isHidden: false, entryKey: entryAnim, ambient: /* @__PURE__ */ new Set() };
+  }
+  return { node, current: def, anchor: [0.5, 1], isHidden: false, ambient: /* @__PURE__ */ new Set() };
+}
+function isTextAsset(assetId) {
+  return assetId === BUILT_IN_TEXT_ASSET_ID;
+}
+function isPrimitiveAsset(assetId) {
+  return BUILT_IN_PRIMITIVE_ASSET_IDS.has(assetId);
+}
+function createResolvedAssetNode(def, resolveAsset, cellSize) {
+  const asset = resolveAsset(def.asset);
+  if (!asset) {
+    throw new RenderError("ASSET_NOT_FOUND", `Asset not found: ${def.asset}`, {
+      asset: def.asset,
+      elementId: def.id
+    });
+  }
+  return createAssetNode(asset, def.asset, cellSize);
+}
+function updateGeneratedElementContent(node, def, layout, resolveAsset) {
+  const replacement = isTextAsset(def.asset) ? createTextAssetNode(def.text, def.asset, layout.cellSize) : isPrimitiveAsset(def.asset) ? createPrimitiveAssetNode(def.asset, def.primitive, layout.cellSize) : createResolvedAssetNode(def, resolveAsset ?? createAssetResolver(), layout.cellSize);
+  node.setAttribute("data-asset", def.asset);
+  clearChildren(node);
+  while (replacement.firstChild) {
+    const child = replacement.firstChild;
+    replacement.removeChild(child);
+    node.appendChild(child);
+  }
+}
+function hasEqualGeneratedContent(previous, next) {
+  if (!previous) return false;
+  if (previous.asset !== next.asset) return false;
+  if (!isTextAsset(next.asset) && !isPrimitiveAsset(next.asset)) return true;
+  if (isTextAsset(next.asset)) return deepEqual(previous.text, next.text);
+  return deepEqual(previous.primitive, next.primitive);
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== typeof b) return false;
+  if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+    return a.every((item, index) => deepEqual(item, b[index]));
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((key) => deepEqual(a[key], b[key]));
+}
+function createConnectorInstance(def, layout) {
+  const node = document.createElementNS(NS, "g");
+  const shaft = document.createElementNS(NS, "path");
+  node.appendChild(shaft);
+  const state = { node, shaft, isHidden: false, ambient: /* @__PURE__ */ new Set() };
+  applyConnectorState(state, def, layout);
+  const entryAnim = def.enter;
+  if (entryAnim && entryAnim !== "none" && def.presence !== "removed") {
+    animateElement(node, `iso-anim-${entryAnim}`, "enter");
+    const expectedAnimation = node.style.animation;
+    node.addEventListener(
+      "animationend",
+      () => {
+        if (node.style.animation === expectedAnimation) node.style.animation = "";
+      },
+      { once: true }
+    );
+  }
+  return state;
+}
+function applyConnectorState(state, def, layout) {
+  const previous = state.previous;
+  const routeChanged = !previous || !routesEqual(previous.route, def.route);
+  const styleChanged = !previous || !connectorStylesEqual(previous.style, def.style);
+  const shapeChanged = !previous || shouldRenderOutline(previous) !== shouldRenderOutline(def) || previous.style.variant !== def.style.variant || previous.style.lane !== def.style.lane || previous.start !== def.start || previous.end !== def.end || previous.route.length !== def.route.length;
+  applyConnectorGroupAttrs(state.node, def, previous);
+  const geometryChanged = routeChanged || shapeChanged || styleChanged;
+  const d = geometryChanged ? routePath(def.route, layout, def.style.cornerRadius ?? 0) : state.shaft.getAttribute("d") ?? "";
+  if (shapeChanged) {
+    if (state.outline) state.node.removeChild(state.outline);
+    state.outline = void 0;
+    if (shouldRenderOutline(def)) {
+      const outline = document.createElementNS(NS, "path");
+      outline.classList.add("iso-connector-outline");
+      applyConnectorPathAttrs(outline, def, d, {
+        stroke: def.style.outline ?? def.style.stroke,
+        strokeWidth: def.style.strokeWidth + def.style.outlineWidth * 2,
+        includeDash: false
+      });
+      state.node.insertBefore(outline, state.shaft);
+      state.outline = outline;
+    }
+  } else if (state.outline && geometryChanged) {
+    applyConnectorPathAttrs(state.outline, def, d, {
+      stroke: def.style.outline ?? def.style.stroke,
+      strokeWidth: def.style.strokeWidth + def.style.outlineWidth * 2,
+      includeDash: false
+    });
+  }
+  if (!state.shaft.parentNode) state.node.appendChild(state.shaft);
+  state.shaft.classList.add("iso-connector-shaft");
+  if (geometryChanged) {
+    applyConnectorPathAttrs(state.shaft, def, d, {
+      stroke: def.style.stroke,
+      strokeWidth: def.style.strokeWidth,
+      includeDash: true
+    });
+  }
+  if (shapeChanged) {
+    if (state.lane) state.node.removeChild(state.lane);
+    state.lane = void 0;
+    if (def.style.variant === "road" && def.style.lane === "center-dashed") {
+      const lane = document.createElementNS(NS, "path");
+      lane.classList.add("iso-connector-lane");
+      applyConnectorPathAttrs(lane, def, d, {
+        stroke: "#ffffff",
+        strokeWidth: Math.max(1, def.style.strokeWidth * 0.12),
+        includeDash: false
+      });
+      lane.setAttribute("stroke-dasharray", "8 8");
+      state.node.appendChild(lane);
+      state.lane = lane;
+    }
+  } else if (state.lane && geometryChanged) {
+    applyConnectorPathAttrs(state.lane, def, d, {
+      stroke: "#ffffff",
+      strokeWidth: Math.max(1, def.style.strokeWidth * 0.12),
+      includeDash: false
+    });
+    state.lane.setAttribute("stroke-dasharray", "8 8");
+  }
+  if (geometryChanged) {
+    if (state.startEndpoint) state.node.removeChild(state.startEndpoint);
+    if (state.endEndpoint) state.node.removeChild(state.endEndpoint);
+    state.startEndpoint = appendEndpoint(state.node, def, "start", layout);
+    state.endEndpoint = appendEndpoint(state.node, def, "end", layout);
+  }
+  if (geometryChanged) updateTrackEffects(state.node, state.shaft, def, d);
+  updateMessages(
+    state.node,
+    def,
+    d,
+    !previous || !deepEqual(previous.message, def.message) || previous.style.stroke !== def.style.stroke
+  );
+  applyConnectorAmbientClasses(state, def.ambient ?? []);
+  state.previous = def;
+}
+function clearChildren(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+function routesEqual(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every((point, index) => {
+    const other = b[index];
+    return other !== void 0 && point[0] === other[0] && point[1] === other[1];
+  });
+}
+function connectorStylesEqual(a, b) {
+  if (a === b) return true;
+  return a.variant === b.variant && a.pattern === b.pattern && a.stroke === b.stroke && a.strokeWidth === b.strokeWidth && a.opacity === b.opacity && a.outline === b.outline && a.outlineWidth === b.outlineWidth && a.lane === b.lane && a.cornerRadius === b.cornerRadius && a.glow === b.glow && a.glowWidth === b.glowWidth && (a.dash ?? []).join(",") === (b.dash ?? []).join(",");
+}
+function applyConnectorGroupAttrs(node, def, previous) {
+  const nextClasses = [
+    "iso-connector",
+    `iso-connector-${def.id}`,
+    `iso-connector-variant-${def.style.variant}`,
+    `iso-connector-pattern-${def.style.pattern}`,
+    `iso-connector-direction-${def.direction}`,
+    `iso-layer-${def.layer}`
+  ];
+  if (!previous) {
+    node.classList.add(...nextClasses);
+  } else {
+    const previousClasses = [
+      "iso-connector",
+      `iso-connector-${previous.id}`,
+      `iso-connector-variant-${previous.style.variant}`,
+      `iso-connector-pattern-${previous.style.pattern}`,
+      `iso-connector-direction-${previous.direction}`,
+      `iso-layer-${previous.layer}`
+    ];
+    for (const name of previousClasses) {
+      if (!nextClasses.includes(name)) node.classList.remove(name);
+    }
+    for (const name of nextClasses) {
+      if (!previousClasses.includes(name)) node.classList.add(name);
+    }
+  }
+  node.setAttribute("data-id", def.id);
+  node.setAttribute("data-layer", def.layer);
+  node.style.overflow = "visible";
+  node.style.pointerEvents = "auto";
+}
+function shouldRenderOutline(def) {
+  return Boolean(def.style.outline && def.style.outlineWidth > 0);
+}
+function applyConnectorPathAttrs(path, def, d, options) {
+  path.setAttribute("d", d);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", options.stroke);
+  path.setAttribute("stroke-width", String(options.strokeWidth));
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("opacity", String(def.style.opacity));
+  if (options.includeDash && def.style.pattern !== "solid") {
+    const dash = def.style.dash ?? DEFAULT_CONNECTOR_DASH[def.style.pattern];
+    path.setAttribute("stroke-dasharray", dash.join(" "));
+  } else {
+    path.setAttribute("stroke-dasharray", "none");
+  }
+}
+function routePath(route, layout, radius) {
+  return roundedPath(
+    route.map(([x, y]) => projectGridPoint(x, y, layout)),
+    radius
+  );
+}
+function appendEndpoint(group, def, kind, layout) {
+  const endpoint = def[kind];
+  if (endpoint === "none" || def.route.length < 2) return void 0;
+  const node = createEndpointNode(endpoint, def, kind, layout);
+  node.classList.add(`iso-connector-${kind}`);
+  group.appendChild(node);
+  return node;
+}
+function createEndpointNode(endpoint, def, kind, layout) {
+  switch (endpoint) {
+    case "arrow":
+      return createArrowEndpoint(def, kind, layout);
+    case "dot":
+      return createCircleEndpoint(def, kind, layout, true);
+    case "circle":
+      return createCircleEndpoint(def, kind, layout, false);
+    case "diamond":
+      return createDiamondEndpoint(def, kind, layout);
+    case "bar":
+      return createBarEndpoint(def, kind, layout);
+    case "none":
+      throw new RenderError("CONNECTOR_ENDPOINT_NONE", "Cannot create geometry for endpoint none");
+  }
+}
+function createArrowEndpoint(def, kind, layout) {
+  const tip = endpointPoint(def, kind);
+  const direction = endpointDirection(def, kind);
+  const perpendicular = [-direction[1], direction[0]];
+  const base = [tip[0] - direction[0] * ARROW_LENGTH_GRID, tip[1] - direction[1] * ARROW_LENGTH_GRID];
+  const halfWidth = ARROW_WIDTH_GRID / 2;
+  const points = [
+    tip,
+    [base[0] + perpendicular[0] * halfWidth, base[1] + perpendicular[1] * halfWidth],
+    [base[0] - perpendicular[0] * halfWidth, base[1] - perpendicular[1] * halfWidth]
+  ].map((point) => projectGridPoint(point[0], point[1], layout));
+  const polygon = document.createElementNS(NS, "polygon");
+  polygon.setAttribute("points", points.map(pointToString).join(" "));
+  polygon.setAttribute("fill", def.style.stroke);
+  polygon.setAttribute("opacity", String(def.style.opacity));
+  return polygon;
+}
+function createCircleEndpoint(def, kind, layout, filled) {
+  const point = endpointPoint(def, kind);
+  const projected = projectGridPoint(point[0], point[1], layout);
+  const circle = document.createElementNS(NS, "circle");
+  circle.setAttribute("cx", String(projected.x));
+  circle.setAttribute("cy", String(projected.y));
+  circle.setAttribute("r", String(ENDPOINT_RADIUS_GRID * layout.cellSize));
+  circle.setAttribute("stroke", def.style.stroke);
+  circle.setAttribute("stroke-width", String(Math.max(1, def.style.strokeWidth)));
+  circle.setAttribute("opacity", String(def.style.opacity));
+  circle.setAttribute("fill", filled ? def.style.stroke : "none");
+  return circle;
+}
+function createDiamondEndpoint(def, kind, layout) {
+  const center = endpointPoint(def, kind);
+  const radius = ENDPOINT_RADIUS_GRID;
+  const points = [
+    [center[0], center[1] - radius],
+    [center[0] + radius, center[1]],
+    [center[0], center[1] + radius],
+    [center[0] - radius, center[1]]
+  ];
+  const polygon = document.createElementNS(NS, "polygon");
+  polygon.setAttribute(
+    "points",
+    points.map((point) => projectGridPoint(point[0], point[1], layout)).map(pointToString).join(" ")
+  );
+  polygon.setAttribute("fill", def.style.stroke);
+  polygon.setAttribute("opacity", String(def.style.opacity));
+  return polygon;
+}
+function createBarEndpoint(def, kind, layout) {
+  const center = endpointPoint(def, kind);
+  const direction = endpointDirection(def, kind);
+  const perpendicular = [-direction[1], direction[0]];
+  const half = BAR_WIDTH_GRID / 2;
+  const a = projectGridPoint(center[0] + perpendicular[0] * half, center[1] + perpendicular[1] * half, layout);
+  const b = projectGridPoint(center[0] - perpendicular[0] * half, center[1] - perpendicular[1] * half, layout);
+  const line = document.createElementNS(NS, "line");
+  line.setAttribute("x1", String(a.x));
+  line.setAttribute("y1", String(a.y));
+  line.setAttribute("x2", String(b.x));
+  line.setAttribute("y2", String(b.y));
+  line.setAttribute("stroke", def.style.stroke);
+  line.setAttribute("stroke-width", String(Math.max(1, def.style.strokeWidth)));
+  line.setAttribute("stroke-linecap", "round");
+  line.setAttribute("opacity", String(def.style.opacity));
+  return line;
+}
+function endpointPoint(def, kind) {
+  return kind === "start" ? def.route[0] : def.route[def.route.length - 1];
+}
+function endpointDirection(def, kind) {
+  const point = kind === "start" ? vectorBetween(def.route[0], def.route[1]) : vectorBetween(def.route[def.route.length - 2], def.route[def.route.length - 1]);
+  const effective = def.direction === "reverse" ? [-point[0], -point[1]] : point;
+  return normalizeVector(effective);
+}
+function vectorBetween(start, end) {
+  return [end[0] - start[0], end[1] - start[1]];
+}
+function normalizeVector(vector) {
+  const length = Math.hypot(vector[0], vector[1]);
+  if (length === 0) return [1, 0];
+  return [vector[0] / length, vector[1] / length];
+}
+function applyElementTransform(node, def, layout) {
+  const screen = projectToScreen(
+    def.pos[0] + def.size,
+    def.pos[1] + def.size,
+    layout.cellSize,
+    layout.selectedBounds.minX,
+    layout.selectedBounds.minY,
+    layout.padding.x,
+    layout.padding.y
+  );
+  const visualSize = calculateVisualSize(def.size, layout.cellSize);
+  const scale = visualSize / layout.cellSize;
+  node.setAttribute("transform", `translate(${screen.screenX} ${screen.screenY}) scale(${scale})`);
+}
+function applyAmbientClasses(state, ambient) {
+  const next = new Set((ambient ?? []).map((item) => item.name));
+  for (const name of state.ambient) {
+    if (!next.has(name)) state.node.classList.remove(`iso-ambient-${name}`);
+  }
+  for (const name of next) {
+    if (!state.ambient.has(name)) state.node.classList.add(`iso-ambient-${name}`);
+  }
+  state.ambient = next;
+}
+function applyConnectorAmbientClasses(state, ambient) {
+  const next = new Set((ambient ?? []).map((item) => item.name));
+  for (const name of state.ambient) {
+    if (!next.has(name)) state.shaft.classList.remove(`iso-ambient-${name}`);
+  }
+  for (const name of next) {
+    state.shaft.classList.add(`iso-ambient-${name}`);
+  }
+  state.ambient = next;
+}
+function animateElement(node, keyframeName, type = "enter") {
+  node.style.opacity = "1";
+  node.style.animation = "none";
+  node.getBoundingClientRect();
+  const duration = type === "exit" ? "var(--iso-anim-duration-exit, 300ms)" : "var(--iso-anim-duration-enter, 400ms)";
+  const easing = type === "exit" ? "var(--iso-anim-easing-exit, ease-in)" : "var(--iso-anim-easing-enter, ease-out)";
+  node.style.animation = `${keyframeName} ${duration} ${easing} forwards`;
+}
+
+export { AssetRegistryImpl as A, DEFAULT_CELL_SIZE as D, getResolvedViewBox as a, getElementState as b, getCurrentElementBounds as c, getConnectorState as d, updateElementTransforms as e, projectToScreen as f, getResolvedProjectionLayout as g, hideElementAfterExit as h, applyThemeToElement as i, buildSceneDOM as j, calculateTransform as k, calculateVisualSize as l, composeTheme as m, createAssetRegistry as n, createDefaultRegistry as o, projectToRaw as p, getGridAreaBounds as q, resolveTheme as r, applySceneViewBox as s, animateElement as t, unhideElementOnReadd as u };
+//# sourceMappingURL=rendering-engine-DLaM1XbU.js.map