@diagrammo/dgmo 0.46.0 → 0.48.0

package/dist/chunk-EB6FPQUP.js

@@ -0,0 +1,316 @@
+import {
+  tryStripDescriptionKeyword
+} from "./chunk-IYULMRBE.js";
+import {
+  AUTO_TAG_COLOR_SENTINEL,
+  cascadeTagMetadata,
+  finalizeAutoTagColors,
+  matchTagBlockHeading,
+  stripDefaultModifier,
+  tagAttrKey,
+  validateTagGroupNames,
+  validateTagValues
+} from "./chunk-QLCCJEJI.js";
+import {
+  MINDMAP_REGISTRY,
+  OPTION_NOCOLON_RE,
+  extractColor,
+  measureIndent,
+  parseFirstLine,
+  splitNameAndMeta,
+  tryParseSharedOption,
+  warnUnknownMetaKeys,
+  withTagAliases
+} from "./chunk-Y3J7VR52.js";
+import {
+  formatDgmoError,
+  makeDgmoError,
+  makeFail,
+  suggest
+} from "./chunk-CXK4DZH3.js";
+
+// src/mindmap/parser.ts
+var KNOWN_OPTIONS = /* @__PURE__ */ new Set(["active-tag"]);
+function parseMindmap(content, palette) {
+  const options = {};
+  const result = {
+    title: null,
+    titleLineNumber: null,
+    roots: [],
+    tagGroups: [],
+    options,
+    diagnostics: [],
+    error: null
+  };
+  const fail = makeFail(result);
+  const pushError = (line, message) => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    if (!result.error) result.error = formatDgmoError(diag);
+  };
+  const pushWarning = (line, message) => {
+    result.diagnostics.push(makeDgmoError(line, message, "warning"));
+  };
+  if (!content?.trim()) {
+    return fail(0, "No content provided");
+  }
+  const lines = content.split("\n");
+  let contentStarted = false;
+  let nodeCounter = 0;
+  let currentTagGroup = null;
+  const aliasMap = /* @__PURE__ */ new Map();
+  const indentStack = [];
+  const nodesWithChildren = /* @__PURE__ */ new Set();
+  let titleRoot = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNumber = i + 1;
+    const trimmed = line.trim();
+    if (!trimmed) {
+      if (currentTagGroup) {
+        currentTagGroup = null;
+      }
+      continue;
+    }
+    if (trimmed.startsWith("//")) continue;
+    if (!contentStarted) {
+      const firstLine = parseFirstLine(trimmed);
+      if (firstLine) {
+        if (firstLine.chartType !== "mindmap") {
+          let msg = `Expected chart type "mindmap", got "${firstLine.chartType}"`;
+          const hint = suggest(firstLine.chartType, ["mindmap"]);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
+        }
+        if (firstLine.title) {
+          const label = firstLine.title;
+          result.title = label;
+          result.titleLineNumber = lineNumber;
+          nodeCounter++;
+          const titleMetadata = {};
+          titleRoot = {
+            id: `node-${nodeCounter}`,
+            label,
+            metadata: titleMetadata,
+            children: [],
+            parentId: null,
+            lineNumber
+          };
+          result.roots.push(titleRoot);
+          indentStack.push({ node: titleRoot, indent: -1 });
+        }
+        continue;
+      }
+    }
+    const tagBlockMatch = matchTagBlockHeading(trimmed);
+    if (tagBlockMatch) {
+      if (contentStarted) {
+        pushError(lineNumber, "Tag groups must appear before mindmap content");
+        continue;
+      }
+      currentTagGroup = {
+        name: tagBlockMatch.name,
+        ...tagBlockMatch.alias !== void 0 && {
+          alias: tagBlockMatch.alias
+        },
+        entries: [],
+        lineNumber
+      };
+      if (tagBlockMatch.alias) {
+        aliasMap.set(
+          tagBlockMatch.alias.toLowerCase(),
+          tagAttrKey(tagBlockMatch.name)
+        );
+      }
+      aliasMap.set(
+        tagAttrKey(tagBlockMatch.name),
+        tagAttrKey(tagBlockMatch.name)
+      );
+      result.tagGroups.push(currentTagGroup);
+      continue;
+    }
+    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
+      if (optMatch) {
+        const key = optMatch[1].trim().toLowerCase();
+        if (KNOWN_OPTIONS.has(key)) {
+          options[key] = optMatch[2].trim();
+          continue;
+        }
+      }
+      const lower = trimmed.toLowerCase();
+      if (lower === "no-descriptions") {
+        pushWarning(
+          lineNumber,
+          '"no-descriptions" has been removed \u2014 delete description lines from your source instead.'
+        );
+        continue;
+      }
+      if (lower === "color-by-depth") {
+        options["color-by-depth"] = "on";
+        continue;
+      }
+      if (tryParseSharedOption(trimmed, options)) {
+        continue;
+      }
+    }
+    if (currentTagGroup && !contentStarted) {
+      const indent2 = measureIndent(line);
+      if (indent2 > 0) {
+        const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
+        if (isDefault) {
+          currentTagGroup.defaultValue = label;
+        } else if (currentTagGroup.entries.length === 0) {
+          currentTagGroup.defaultValue = label;
+        }
+        currentTagGroup.entries.push({
+          value: label,
+          color: color ?? AUTO_TAG_COLOR_SENTINEL,
+          lineNumber
+        });
+        continue;
+      }
+      currentTagGroup = null;
+    }
+    contentStarted = true;
+    currentTagGroup = null;
+    const indent = measureIndent(line);
+    if (indent > 0) {
+      const descResult = tryStripDescriptionKeyword(trimmed);
+      if (descResult.isKeyword && !descResult.needsColon) {
+        const parent = findMetadataParent(indent, indentStack);
+        if (parent) {
+          const descValue = descResult.text.trim();
+          if (!descValue) {
+            continue;
+          }
+          if (nodesWithChildren.has(parent.id)) {
+            pushWarning(
+              lineNumber,
+              `description after child nodes under "${parent.label}" \u2014 should precede children`
+            );
+            continue;
+          }
+          const existing = parent.description ? [...parent.description] : [];
+          existing.push(descValue);
+          parent.description = existing;
+          continue;
+        }
+      }
+    }
+    const node = parseNodeLine(
+      trimmed,
+      lineNumber,
+      palette,
+      ++nodeCounter,
+      aliasMap,
+      result.diagnostics
+    );
+    attachNode(node, indent, indentStack, result, nodesWithChildren);
+  }
+  if (result.title === null && result.roots.length > 0) {
+    result.title = result.roots[0].label;
+    result.titleLineNumber = result.roots[0].lineNumber;
+  }
+  finalizeAutoTagColors(result.tagGroups, palette);
+  if (result.tagGroups.length > 0) {
+    const allNodes = [];
+    const collectAll = (nodes) => {
+      for (const node of nodes) {
+        allNodes.push(node);
+        collectAll(node.children);
+      }
+    };
+    collectAll(result.roots);
+    validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
+    cascadeTagMetadata(result.roots, result.tagGroups);
+  }
+  if (result.roots.length === 0 && !result.error) {
+    const diag = makeDgmoError(1, "No nodes found in mindmap");
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+  } else if (titleRoot?.children.length === 0 && result.roots.length === 1 && !result.error) {
+  }
+  return result;
+}
+function parseNodeLine(trimmed, lineNumber, _palette, counter, aliasMap, diagnostics) {
+  const registry = withTagAliases(MINDMAP_REGISTRY, new Set(aliasMap.keys()));
+  const split = splitNameAndMeta(
+    trimmed,
+    registry,
+    aliasMap,
+    void 0,
+    diagnostics,
+    lineNumber
+  );
+  warnUnknownMetaKeys(
+    split.meta,
+    registry,
+    (msg) => diagnostics.push(makeDgmoError(lineNumber, msg, "warning")),
+    split.name
+  );
+  const label = split.name;
+  const metadata = { ...split.meta };
+  if (split.color !== void 0) metadata["color"] = split.color;
+  let description;
+  if ("description" in metadata) {
+    const descVal = metadata["description"].trim();
+    if (descVal) description = [descVal];
+    delete metadata["description"];
+  }
+  let collapsed;
+  if ("collapsed" in metadata) {
+    collapsed = metadata["collapsed"].toLowerCase() === "true";
+    delete metadata["collapsed"];
+  }
+  return {
+    id: `node-${counter}`,
+    label,
+    ...description !== void 0 && { description },
+    metadata,
+    children: [],
+    parentId: null,
+    lineNumber,
+    ...collapsed !== void 0 && { collapsed }
+  };
+}
+function attachNode(node, indent, indentStack, result, nodesWithChildren) {
+  while (indentStack.length > 0) {
+    const top = indentStack[indentStack.length - 1];
+    if (top.indent < indent) break;
+    indentStack.pop();
+  }
+  if (indentStack.length > 0) {
+    const parent = indentStack[indentStack.length - 1].node;
+    node.parentId = parent.id;
+    parent.children.push(node);
+    nodesWithChildren.add(parent.id);
+  } else {
+    result.roots.push(node);
+  }
+  indentStack.push({ node, indent });
+}
+function findMetadataParent(indent, indentStack) {
+  for (let i = indentStack.length - 1; i >= 0; i--) {
+    const entry = indentStack[i];
+    if (entry.indent < indent) {
+      return entry.node;
+    }
+  }
+  if (indentStack.length > 0) {
+    return indentStack[indentStack.length - 1].node;
+  }
+  return null;
+}
+
+export {
+  parseMindmap
+};
+//# sourceMappingURL=chunk-EB6FPQUP.js.map

package/dist/chunk-EMS2SK26.js

@@ -0,0 +1,376 @@
+import {
+  edgeSplinePath,
+  fitDiagramToCanvas
+} from "./chunk-PDKUANDZ.js";
+import {
+  layoutGraph
+} from "./chunk-T3UBLACL.js";
+import {
+  appendArrowheadMarkers
+} from "./chunk-LP7EC4MI.js";
+import {
+  NOTE_BADGE_RADIUS,
+  noteConnectorPoints,
+  renderNoteBadge,
+  renderNoteBox,
+  renderNoteConnector
+} from "./chunk-JEUJOX5X.js";
+import {
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  measureText
+} from "./chunk-WCT3NYCV.js";
+import {
+  contrastText,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-P6T66CCZ.js";
+import {
+  parseState
+} from "./chunk-3MQQNXPD.js";
+
+// src/graph/state-renderer.ts
+import * as d3Selection from "d3-selection";
+var DIAGRAM_PADDING = 20;
+var MAX_SCALE = 3;
+var NODE_FONT_SIZE = 13;
+var EDGE_LABEL_FONT_SIZE = 11;
+var GROUP_LABEL_FONT_SIZE = 11;
+var ARROWHEAD_W = 10;
+var ARROWHEAD_H = 7;
+var PSEUDOSTATE_RADIUS = 10;
+var STATE_CORNER_RADIUS = 10;
+var GROUP_EXTRA_PADDING = 12;
+function stateDefaultColor(palette, colorOff) {
+  return colorOff ? palette.textMuted : palette.colors.blue;
+}
+function stateFill(palette, isDark, nodeColor, colorOff, solid) {
+  const color = nodeColor ?? stateDefaultColor(palette, colorOff);
+  return shapeFill(palette, color, isDark, {
+    ...solid !== void 0 && { solid }
+  });
+}
+function stateStroke(palette, nodeColor, colorOff) {
+  return nodeColor ?? stateDefaultColor(palette, colorOff);
+}
+function selfLoopPath(node) {
+  const cx = node.x;
+  const cy = node.y;
+  const r = node.width / 2;
+  const startX = cx + r;
+  const startY = cy - 5;
+  const endX = cx + r;
+  const endY = cy + 5;
+  const loopR = 25;
+  return `M ${startX} ${startY} C ${startX + loopR * 2} ${startY - loopR * 2}, ${endX + loopR * 2} ${endY + loopR * 2}, ${endX} ${endY}`;
+}
+function renderState(container, graph, layout, palette, isDark, onClickItem, exportDims) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const ctx = ScaleContext.identity();
+  const sDiagramPadding = ctx.aesthetic(DIAGRAM_PADDING);
+  const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
+  const sTitleY = ctx.structural(TITLE_Y);
+  const sNodeFontSize = ctx.text(NODE_FONT_SIZE);
+  const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE);
+  const sGroupLabelFontSize = ctx.text(GROUP_LABEL_FONT_SIZE);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
+  const sArrowheadW = ctx.structural(ARROWHEAD_W);
+  const sArrowheadH = ctx.structural(ARROWHEAD_H);
+  const sPseudostateRadius = ctx.structural(PSEUDOSTATE_RADIUS);
+  const sStateCornerRadius = ctx.structural(STATE_CORNER_RADIUS);
+  const sGroupExtraPadding = ctx.aesthetic(GROUP_EXTRA_PADDING);
+  const showTitle = !!graph.title && graph.options["no-title"] !== "on";
+  const titleHeight = showTitle ? 40 : 0;
+  const diagramW = layout.width;
+  const diagramH = layout.height;
+  const { scale, offsetX, offsetY, canvasHeight } = fitDiagramToCanvas({
+    width,
+    height,
+    diagramW,
+    diagramH,
+    padding: sDiagramPadding,
+    titleHeight,
+    maxScale: MAX_SCALE,
+    exportMode: !!exportDims
+  });
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", canvasHeight).attr("viewBox", `0 0 ${width} ${canvasHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
+  if (ctx.isBelowFloor) {
+    svg.attr("width", "100%");
+  }
+  const defs = svg.append("defs");
+  const edgeColors = /* @__PURE__ */ new Set();
+  appendArrowheadMarkers(defs, {
+    idPrefix: "st",
+    width: sArrowheadW,
+    height: sArrowheadH,
+    baseFill: palette.textMuted,
+    colors: edgeColors
+  });
+  if (showTitle) {
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).style(
+      "cursor",
+      onClickItem && graph.titleLineNumber ? "pointer" : "default"
+    ).text(graph.title);
+    if (graph.titleLineNumber) {
+      titleEl.attr("data-line-number", graph.titleLineNumber);
+      if (onClickItem) {
+        titleEl.on("click", () => onClickItem(graph.titleLineNumber)).on("mouseenter", function() {
+          d3Selection.select(this).attr("opacity", 0.7);
+        }).on("mouseleave", function() {
+          d3Selection.select(this).attr("opacity", 1);
+        });
+      }
+    }
+  }
+  const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
+  for (const group of layout.groups) {
+    if (group.collapsed) continue;
+    if (group.width === 0 && group.height === 0) continue;
+    const gx = group.x - sGroupExtraPadding;
+    const gy = group.y - sGroupExtraPadding - sGroupLabelFontSize - 4;
+    const gw = group.width + sGroupExtraPadding * 2;
+    const gh = group.height + sGroupExtraPadding * 2 + sGroupLabelFontSize + 4;
+    const fillColor = group.color ? mix(group.color, themeBaseBg(palette, isDark), 10) : isDark ? palette.surface : mix(palette.border, palette.bg, 30);
+    const strokeColor = group.color ?? palette.textMuted;
+    const groupWrapper = contentG.append("g").attr("class", "st-group-wrapper").attr("data-line-number", String(group.lineNumber)).attr("data-group-id", group.id).attr("data-group-toggle", group.id).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("aria-label", `Collapse group ${group.label}`).style("cursor", "pointer");
+    groupWrapper.append("rect").attr("x", gx).attr("y", gy).attr("width", gw).attr("height", gh).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "st-group");
+    groupWrapper.append("text").attr("x", gx + 8).attr("y", gy + sGroupLabelFontSize + 4).attr("fill", strokeColor).attr("font-size", sGroupLabelFontSize).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "st-group-label").text(group.label);
+  }
+  const selfLoopEdges = /* @__PURE__ */ new Set();
+  for (const edge of layout.edges) {
+    if (edge.source === edge.target) selfLoopEdges.add(edge.lineNumber);
+  }
+  const nodePositionMap = /* @__PURE__ */ new Map();
+  for (const node of layout.nodes) {
+    nodePositionMap.set(node.id, node);
+  }
+  const LABEL_PAD = 8;
+  const LABEL_H = 16;
+  const PERP_OFFSET = 10;
+  const labelPositions = [];
+  for (let ei = 0; ei < layout.edges.length; ei++) {
+    const edge = layout.edges[ei];
+    if (!edge.label) continue;
+    const bgW = measureText(edge.label, sEdgeLabelFontSize) + LABEL_PAD;
+    let lx, ly;
+    if (edge.source === edge.target) {
+      const node = nodePositionMap.get(edge.source);
+      if (!node) continue;
+      lx = node.x + node.width / 2 + 30;
+      ly = node.y;
+    } else if (edge.points.length >= 2) {
+      const midIdx = Math.floor(edge.points.length / 2);
+      const midPt = edge.points[midIdx];
+      const prev = edge.points[Math.max(0, midIdx - 1)];
+      const next = edge.points[Math.min(edge.points.length - 1, midIdx + 1)];
+      const dx = next.x - prev.x;
+      const dy = next.y - prev.y;
+      const len = Math.sqrt(dx * dx + dy * dy);
+      if (len > 0) {
+        lx = midPt.x + -dy / len * PERP_OFFSET;
+        ly = midPt.y + dx / len * PERP_OFFSET;
+      } else {
+        lx = midPt.x;
+        ly = midPt.y;
+      }
+    } else {
+      continue;
+    }
+    labelPositions.push({ x: lx, y: ly, w: bgW, h: LABEL_H, edgeIdx: ei });
+  }
+  labelPositions.sort((a, b) => a.y - b.y);
+  for (let i = 0; i < labelPositions.length; i++) {
+    for (let j = i + 1; j < labelPositions.length; j++) {
+      const a = labelPositions[i];
+      const b = labelPositions[j];
+      const overlapX = Math.abs(a.x - b.x) < (a.w + b.w) / 2;
+      const overlapY = Math.abs(a.y - b.y) < (a.h + b.h) / 2;
+      if (overlapX && overlapY) {
+        b.y = a.y + (a.h + b.h) / 2 + 2;
+      }
+    }
+  }
+  const labelPosMap = /* @__PURE__ */ new Map();
+  for (const lp of labelPositions) labelPosMap.set(lp.edgeIdx, lp);
+  for (let ei = 0; ei < layout.edges.length; ei++) {
+    const edge = layout.edges[ei];
+    const edgeG = contentG.append("g").attr("class", "st-edge-group").attr("data-line-number", String(edge.lineNumber)).attr("data-source", edge.source).attr("data-target", edge.target);
+    const edgeColor = palette.textMuted;
+    const markerId = "st-arrow";
+    if (edge.source === edge.target) {
+      const node = nodePositionMap.get(edge.source);
+      if (node) {
+        edgeG.append("path").attr("d", selfLoopPath(node)).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`).attr("class", "st-edge");
+        const lp = labelPosMap.get(ei);
+        if (edge.label && lp) {
+          edgeG.append("rect").attr("x", lp.x - lp.w / 2).attr("y", lp.y - lp.h / 2 - 1).attr("width", lp.w).attr("height", lp.h).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85).attr("class", "st-edge-label-bg");
+          edgeG.append("text").attr("x", lp.x).attr("y", lp.y + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", sEdgeLabelFontSize).attr("class", "st-edge-label").text(edge.label);
+        }
+      }
+    } else if (edge.points.length >= 2) {
+      const pathD = edgeSplinePath(edge.points);
+      if (pathD) {
+        edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`).attr("class", "st-edge");
+      }
+      const lp = labelPosMap.get(ei);
+      if (edge.label && lp) {
+        edgeG.append("rect").attr("x", lp.x - lp.w / 2).attr("y", lp.y - lp.h / 2 - 1).attr("width", lp.w).attr("height", lp.h).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85).attr("class", "st-edge-label-bg");
+        edgeG.append("text").attr("x", lp.x).attr("y", lp.y + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", sEdgeLabelFontSize).attr("class", "st-edge-label").text(edge.label);
+      }
+    }
+  }
+  const collapsedGroupIds = /* @__PURE__ */ new Set();
+  for (const group of layout.groups) {
+    if (group.collapsed) collapsedGroupIds.add(group.id);
+  }
+  const colorOff = graph.options?.["color"] === "off";
+  const solid = graph.options?.["solid-fill"] === "on";
+  const noNotes = graph.options?.["no-notes"] === "on";
+  for (const node of layout.nodes) {
+    const isCollapsedGroup = collapsedGroupIds.has(node.id);
+    const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", isCollapsedGroup ? "st-group-wrapper st-node" : "st-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id).style("cursor", "pointer");
+    if (isCollapsedGroup) {
+      nodeG.attr("data-group-toggle", node.id).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr("aria-label", `Expand group ${node.label}`);
+    }
+    if (onClickItem && !isCollapsedGroup) {
+      nodeG.on("click", () => {
+        onClickItem(node.lineNumber);
+      });
+    }
+    const hasNote = !!node.note && !noNotes;
+    if (node.shape === "pseudostate") {
+      nodeG.append("circle").attr("cx", 0).attr("cy", 0).attr("r", sPseudostateRadius).attr("fill", palette.text).attr("stroke", "none");
+    } else if (isCollapsedGroup) {
+      const w = node.width;
+      const h = node.height;
+      const groupColor = node.color ?? stateDefaultColor(palette, colorOff);
+      const fillColor = shapeFill(palette, groupColor, isDark, { solid });
+      const strokeColor = groupColor;
+      const COLLAPSE_BAR_H = 6;
+      nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius).attr("ry", sStateCornerRadius).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", sNodeStrokeWidth);
+      const clipId = `st-clip-${node.id.replace(/[[\]:\s]/g, "")}`;
+      nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius);
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - COLLAPSE_BAR_H).attr("width", w).attr("height", COLLAPSE_BAR_H).attr("fill", strokeColor).attr("opacity", 0.5).attr("clip-path", `url(#${clipId})`);
+      nodeG.append("text").attr("x", 0).attr("y", 0).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr(
+        "fill",
+        contrastText(
+          fillColor,
+          palette.textOnFillLight,
+          palette.textOnFillDark
+        )
+      ).attr("font-size", sNodeFontSize).text(node.label);
+    } else {
+      const w = node.width;
+      const h = node.height;
+      const resolvedFill = stateFill(
+        palette,
+        isDark,
+        node.color,
+        colorOff,
+        solid
+      );
+      nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", sStateCornerRadius).attr("ry", sStateCornerRadius).attr("fill", resolvedFill).attr("stroke", stateStroke(palette, node.color, colorOff)).attr("stroke-width", sNodeStrokeWidth);
+      nodeG.append("text").attr("x", 0).attr("y", 0).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr(
+        "fill",
+        contrastText(
+          resolvedFill,
+          palette.textOnFillLight,
+          palette.textOnFillDark
+        )
+      ).attr("font-size", sNodeFontSize).text(node.label);
+    }
+    if (hasNote && node.note) {
+      if (node.note.collapsed) {
+        renderNoteBadge(
+          nodeG,
+          {
+            x: node.width / 2 - NOTE_BADGE_RADIUS - 3,
+            y: -node.height / 2 + NOTE_BADGE_RADIUS + 3
+          },
+          palette,
+          {
+            isDark,
+            ...node.note.color && { color: node.note.color },
+            lineNumber: node.note.lineNumber,
+            endLineNumber: node.note.endLineNumber
+          }
+        );
+      } else {
+        const [cx1, cy1, cx2, cy2] = noteConnectorPoints(node, node.note);
+        renderNoteConnector(nodeG, cx1, cy1, cx2, cy2, palette);
+        renderNoteBox(
+          nodeG,
+          {
+            x: node.note.x,
+            y: node.note.y,
+            width: node.note.width,
+            height: node.note.height
+          },
+          node.note.lines,
+          palette,
+          {
+            isDark,
+            ...node.note.color && { color: node.note.color },
+            lineNumber: node.note.lineNumber,
+            endLineNumber: node.note.endLineNumber,
+            interactive: true
+          }
+        );
+      }
+    }
+  }
+}
+function renderStateForExport(content, theme, palette) {
+  const parsed = parseState(content, palette);
+  if (parsed.error || parsed.nodes.length === 0) return "";
+  const layout = layoutGraph(parsed);
+  const isDark = theme === "dark";
+  const container = document.createElement("div");
+  const exportWidth = layout.width + DIAGRAM_PADDING * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + (parsed.title && parsed.options["no-title"] !== "on" ? 40 : 0);
+  container.style.width = `${exportWidth}px`;
+  container.style.height = `${exportHeight}px`;
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  document.body.appendChild(container);
+  try {
+    renderState(container, parsed, layout, palette, isDark, void 0, {
+      width: exportWidth,
+      height: exportHeight
+    });
+    const svgEl = container.querySelector("svg");
+    if (!svgEl) return "";
+    if (theme === "transparent") {
+      svgEl.style.background = "none";
+    }
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgEl.style.fontFamily = FONT_FAMILY;
+    return svgEl.outerHTML;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
+export {
+  renderState,
+  renderStateForExport
+};
+//# sourceMappingURL=chunk-EMS2SK26.js.map