@diagrammo/dgmo 0.46.0 → 0.47.0

package/dist/chunk-ZO27FGJS.js

@@ -0,0 +1,554 @@
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  measureText
+} from "./chunk-WCT3NYCV.js";
+import {
+  contrastText,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+
+// src/wireframe/renderer.ts
+import * as d3Selection from "d3-selection";
+var INPUT_CORNER = 4;
+var BUTTON_CORNER = 6;
+var GROUP_CORNER = 8;
+var SEMANTIC_COLORS = {
+  destructive: (p) => p.destructive,
+  success: (p) => p.colors.green,
+  warning: (p) => p.colors.yellow,
+  info: (p) => p.colors.blue
+};
+function getSemanticColor(state, palette) {
+  const fn = SEMANTIC_COLORS[state];
+  return fn ? fn(palette) : null;
+}
+function getElementSemanticColor(el, palette) {
+  for (const s of el.states) {
+    const c = getSemanticColor(s, palette);
+    if (c) return c;
+  }
+  return null;
+}
+function renderWireframe(container, parsed, layout, palette, isDark, _onClickItem, exportDims, theme, options) {
+  const opts = options ?? {};
+  const effectiveExportDims = opts.exportDims ?? exportDims;
+  const effectiveTheme = opts.theme ?? theme;
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const isExport = !!effectiveExportDims;
+  const width = effectiveExportDims?.width ?? container.clientWidth;
+  const height = effectiveExportDims?.height ?? container.clientHeight;
+  const sctx = isExport ? ScaleContext.identity() : ScaleContext.from(width, layout.width);
+  const svg = d3Selection.select(container).append("svg").attr("viewBox", `0 0 ${layout.width} ${layout.height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
+  if (isExport) {
+    svg.attr("width", width).attr("height", height);
+  } else {
+    svg.attr("width", "100%").attr("height", "auto").style("display", "block");
+  }
+  const ctx = {
+    palette,
+    isTransparent: effectiveTheme === "transparent",
+    isDark,
+    showGroupLabels: opts.showGroupLabels ?? true,
+    solid: parsed.options["solid-fill"] === "on"
+  };
+  if (!ctx.isTransparent) {
+    svg.append("rect").attr("width", layout.width).attr("height", layout.height).attr("fill", palette.bg).attr("rx", 8);
+  }
+  const mainG = svg.append("g").attr("transform", `translate(20, 20)`);
+  let titleOffset = 0;
+  const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
+  const sTitleFontSize = sctx.text(TITLE_FONT_SIZE);
+  if (isExport && showTitle) {
+    mainG.append("text").attr("x", 0).attr("y", sTitleFontSize).attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
+    titleOffset = layout.titleHeight;
+  }
+  const contentG = mainG.append("g").attr("transform", `translate(0, ${titleOffset})`);
+  for (const node of layout.nodes) {
+    renderNode(contentG, node, ctx, 0);
+  }
+  if (layout.modalNodes.length > 0) {
+    const modalG = contentG.append("g").attr("class", "wireframe-modals");
+    for (const modalNode of layout.modalNodes) {
+      renderModal(modalG, modalNode, ctx);
+    }
+  }
+}
+function renderNode(parent, node, ctx, depth) {
+  const el = node.element;
+  const g = parent.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("data-line-number", el.lineNumber);
+  if (el.states.includes("disabled")) {
+    g.attr("opacity", 0.5);
+  }
+  if (el.isSkeleton && el.type !== "skeleton") {
+    renderSkeletonPlaceholder(g, node, ctx);
+    return;
+  }
+  switch (el.type) {
+    case "group":
+      renderGroup(g, node, ctx, depth);
+      break;
+    case "textInput":
+      renderTextInput(g, node, ctx);
+      break;
+    case "button":
+      renderButton(g, node, ctx);
+      break;
+    case "dropdown":
+      renderDropdown(g, node, ctx);
+      break;
+    case "checkbox":
+      renderCheckbox(g, node, ctx);
+      break;
+    case "radio":
+      renderRadio(g, node, ctx);
+      break;
+    case "heading":
+      renderHeading(g, node, ctx);
+      break;
+    case "divider":
+      renderDivider(g, node, ctx);
+      break;
+    case "text":
+      renderText(g, node, ctx);
+      break;
+    case "listItem":
+      renderListItem(g, node, ctx);
+      break;
+    case "nav":
+      renderNav(g, node, ctx);
+      break;
+    case "tabs":
+      renderTabs(g, node, ctx);
+      break;
+    case "table":
+      renderTable(g, node, ctx);
+      break;
+    case "image":
+      renderImage(g, node, ctx);
+      break;
+    case "skeleton":
+      renderSkeletonBlock(g, node, ctx);
+      break;
+    case "alert":
+      renderAlert(g, node, ctx);
+      break;
+    case "progress":
+      renderProgress(g, node, ctx);
+      break;
+    case "chart":
+      renderChart(g, node, ctx);
+      break;
+    default:
+      renderText(g, node, ctx);
+  }
+}
+function renderGroup(g, node, ctx, depth) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  if (el.metadata["_inlineRow"] === "true" || el.metadata["_labelField"] === "true") {
+    for (const child of node.children) {
+      renderNode(g, child, ctx, depth);
+    }
+    return;
+  }
+  const tintSteps = [12, 7, 4, 2];
+  const tintPct = tintSteps[Math.min(depth, tintSteps.length - 1)];
+  const fillColor = mix(palette.textMuted, palette.bg, tintPct);
+  if (isTransparent) {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", "none").attr("stroke", palette.border).attr("stroke-width", 1).attr("rx", GROUP_CORNER);
+  } else {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", fillColor).attr("stroke", palette.border).attr("stroke-width", 1).attr("rx", GROUP_CORNER);
+  }
+  if (el.label && ctx.showGroupLabels) {
+    g.append("text").attr("x", 10).attr("y", 18).attr("fill", palette.textMuted).attr("font-size", 11).attr("font-weight", "600").attr("letter-spacing", "0.5px").text(el.label.toUpperCase());
+  }
+  if (el.states.includes("collapsed")) {
+    g.append("text").attr("x", node.width - 20).attr("y", 18).attr("fill", palette.textMuted).attr("font-size", 12).attr("opacity", 0.6).text("\u25B6");
+    return;
+  }
+  if (el.states.includes("scrollable")) {
+    g.append("rect").attr("x", node.width - 6).attr("y", 28).attr("width", 3).attr("height", Math.min(node.height - 36, 40)).attr("fill", palette.border).attr("rx", 1.5);
+  }
+  for (const child of node.children) {
+    renderNode(g, child, ctx, depth + 1);
+  }
+}
+function renderTextInput(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const h = node.height;
+  g.append("rect").attr("width", node.width).attr("height", h).attr("fill", isTransparent ? "none" : palette.bg).attr("stroke", palette.border).attr("rx", INPUT_CORNER);
+  if (el.fieldVariant === "password") {
+    g.append("text").attr("x", 10).attr("y", h / 2 + 4).attr("fill", palette.text).attr("font-size", 16).text("\u2022 \u2022 \u2022 \u2022 \u2022 \u2022");
+  } else {
+    g.append("text").attr("x", 10).attr("y", h / 2 + 4).attr("fill", palette.textMuted).attr("font-size", 13).text(el.label || "Text input");
+  }
+  if (el.fieldVariant !== "password") {
+    const textWidth = Math.min(
+      measureText(el.label || "Text input", 13) + 14,
+      node.width - 20
+    );
+    g.append("line").attr("x1", textWidth).attr("y1", 8).attr("x2", textWidth).attr("y2", h - 8).attr("stroke", palette.primary).attr("stroke-width", 1.5).attr("opacity", 0.6);
+  }
+  if (el.fieldVariant === "textarea") {
+    for (let i = 0; i < 3; i++) {
+      g.append("line").attr("x1", node.width - 12 + i * 3).attr("y1", h - 4).attr("x2", node.width - 4).attr("y2", h - 12 + i * 3).attr("stroke", palette.border).attr("stroke-width", 1);
+    }
+  }
+}
+function renderButton(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const isGhost = el.states.includes("ghost");
+  const semanticColor = getElementSemanticColor(el, palette);
+  const isPrimary = el.states.includes("primary");
+  let fill = isPrimary ? palette.primary : palette.secondary;
+  let textColor = palette.bg;
+  if (semanticColor) {
+    fill = semanticColor;
+  }
+  if (isGhost || isTransparent) {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", "none").attr("stroke", fill).attr("stroke-width", 1.5).attr("rx", BUTTON_CORNER);
+    textColor = fill;
+  } else {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", fill).attr("rx", BUTTON_CORNER);
+  }
+  g.append("text").attr("x", node.width / 2).attr("y", node.height / 2 + 4).attr("fill", textColor).attr("font-size", 13).attr("font-weight", "600").attr("text-anchor", "middle").text(el.label);
+}
+function renderDropdown(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", isTransparent ? "none" : palette.bg).attr("stroke", palette.border).attr("rx", INPUT_CORNER);
+  g.append("text").attr("x", 10).attr("y", node.height / 2 + 4).attr("fill", palette.text).attr("font-size", 13).text(el.label || (el.options?.[0] ?? "Select..."));
+  const cx = node.width - 16;
+  const cy = node.height / 2;
+  g.append("path").attr("d", `M${cx - 4},${cy - 2} L${cx},${cy + 2} L${cx + 4},${cy - 2}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
+}
+function renderCheckbox(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  const isToggle = el.states.includes("toggle");
+  if (isToggle) {
+    const trackW = 32;
+    const trackH = 18;
+    const cy = node.height / 2;
+    g.append("rect").attr("x", 0).attr("y", cy - trackH / 2).attr("width", trackW).attr("height", trackH).attr("rx", trackH / 2).attr("fill", el.checked ? palette.primary : palette.border);
+    g.append("circle").attr("cx", el.checked ? trackW - trackH / 2 : trackH / 2).attr("cy", cy).attr("r", trackH / 2 - 2).attr("fill", palette.bg);
+    if (el.label) {
+      g.append("text").attr("x", trackW + 8).attr("y", cy + 4).attr("fill", palette.text).attr("font-size", 13).text(el.label);
+    }
+  } else {
+    const boxSize = 16;
+    const cy = node.height / 2;
+    g.append("rect").attr("x", 0).attr("y", cy - boxSize / 2).attr("width", boxSize).attr("height", boxSize).attr("fill", el.checked ? palette.primary : "none").attr("stroke", el.checked ? palette.primary : palette.border).attr("rx", 3);
+    if (el.checked) {
+      g.append("path").attr("d", `M${3},${cy} L${6},${cy + 3} L${13},${cy - 4}`).attr("fill", "none").attr("stroke", palette.bg).attr("stroke-width", 2);
+    }
+    if (el.label) {
+      g.append("text").attr("x", boxSize + 8).attr("y", cy + 4).attr("fill", palette.text).attr("font-size", 13).text(el.label);
+    }
+  }
+}
+function renderRadio(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  const r = 8;
+  const cy = node.height / 2;
+  g.append("circle").attr("cx", r).attr("cy", cy).attr("r", r).attr("fill", "none").attr("stroke", el.selected ? palette.primary : palette.border).attr("stroke-width", 1.5);
+  if (el.selected) {
+    g.append("circle").attr("cx", r).attr("cy", cy).attr("r", 4).attr("fill", palette.primary);
+  }
+  g.append("text").attr("x", r * 2 + 8).attr("y", cy + 4).attr("fill", palette.text).attr("font-size", 13).text(el.label);
+}
+function renderHeading(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  const isH1 = el.headingLevel === 1;
+  g.append("text").attr("x", 0).attr("y", isH1 ? 28 : 22).attr("fill", palette.text).attr("font-size", isH1 ? 22 : 16).attr("font-weight", "bold").text(el.label);
+}
+function renderDivider(g, node, ctx) {
+  const { palette } = ctx;
+  g.append("line").attr("x1", 0).attr("y1", node.height / 2).attr("x2", node.width).attr("y2", node.height / 2).attr("stroke", palette.border).attr("stroke-width", 1);
+}
+function renderText(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  if (el.metadata["_labelField"] === "true" && el.children.length >= 2) {
+    for (const child of node.children) {
+      renderNode(g, child, ctx, 0);
+    }
+    return;
+  }
+  const color = el.labelFor ? palette.textMuted : palette.text;
+  g.append("text").attr("x", 0).attr("y", 15).attr("fill", color).attr("font-size", 13).text(el.label);
+}
+function renderListItem(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  g.append("circle").attr("cx", 4).attr("cy", node.height / 2).attr("r", 2.5).attr("fill", palette.textMuted);
+  g.append("text").attr("x", 14).attr("y", node.height / 2 + 4).attr("fill", palette.text).attr("font-size", 13).text(el.label);
+}
+function renderNav(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", mix(palette.textMuted, palette.bg, 8)).attr("rx", 4);
+  let x = 12;
+  for (const child of el.children) {
+    const isActive = child.states.includes("active");
+    g.append("text").attr("x", x).attr("y", node.height / 2 + 4).attr("fill", isActive ? palette.primary : palette.text).attr("font-size", 13).attr("font-weight", isActive ? "600" : "normal").text(child.label);
+    const labelW = measureText(child.label, 13);
+    if (isActive) {
+      g.append("line").attr("x1", x).attr("y1", node.height - 4).attr("x2", x + labelW).attr("y2", node.height - 4).attr("stroke", palette.primary).attr("stroke-width", 2);
+    }
+    x += labelW + 24;
+  }
+}
+function renderTabs(g, node, ctx) {
+  const { palette } = ctx;
+  const el = node.element;
+  g.append("line").attr("x1", 0).attr("y1", node.height - 1).attr("x2", node.width).attr("y2", node.height - 1).attr("stroke", palette.border).attr("stroke-width", 1);
+  let x = 0;
+  for (const child of el.children) {
+    const isActive = child.states.includes("active");
+    const tabW = measureText(child.label, 13) + 24;
+    if (isActive) {
+      g.append("line").attr("x1", x).attr("y1", node.height - 1).attr("x2", x + tabW).attr("y2", node.height - 1).attr("stroke", palette.primary).attr("stroke-width", 2);
+    }
+    g.append("text").attr("x", x + 12).attr("y", node.height / 2 + 4).attr("fill", isActive ? palette.primary : palette.textMuted).attr("font-size", 13).attr("font-weight", isActive ? "600" : "normal").text(child.label);
+    x += tabW;
+  }
+}
+function renderTable(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const headers = el.tableHeaders || [];
+  const data = el.tableData || [];
+  const isSkeleton = el.tableRows !== void 0 && el.tableCols !== void 0;
+  const cols = headers.length || el.tableCols || 3;
+  const colW = node.width / cols;
+  const headerH = 32;
+  const rowH = 28;
+  g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", "none").attr("stroke", palette.border).attr("rx", 4);
+  g.append("rect").attr("width", node.width).attr("height", headerH).attr(
+    "fill",
+    isTransparent ? "none" : mix(palette.textMuted, palette.bg, 8)
+  ).attr("rx", 4);
+  for (let c = 0; c < cols; c++) {
+    const label = headers[c] || `Col ${c + 1}`;
+    g.append("text").attr("x", c * colW + 10).attr("y", headerH / 2 + 4).attr("fill", palette.text).attr("font-size", 12).attr("font-weight", "600").text(label);
+  }
+  g.append("line").attr("x1", 0).attr("y1", headerH).attr("x2", node.width).attr("y2", headerH).attr("stroke", palette.border);
+  const rowCount = isSkeleton ? el.tableRows || 3 : data.length;
+  for (let r = 0; r < rowCount; r++) {
+    const ry = headerH + r * rowH;
+    if (r > 0) {
+      g.append("line").attr("x1", 0).attr("y1", ry).attr("x2", node.width).attr("y2", ry).attr("stroke", palette.border).attr("opacity", 0.3);
+    }
+    for (let c = 0; c < cols; c++) {
+      if (isSkeleton) {
+        g.append("rect").attr("x", c * colW + 10).attr("y", ry + 8).attr("width", colW * 0.6).attr("height", 12).attr("fill", palette.textMuted).attr("opacity", 0.25).attr("rx", 2);
+      } else if (data[r]) {
+        const cellText = data[r][c] || "";
+        renderTableCell(g, cellText, c * colW + 10, ry, colW - 20, rowH, ctx);
+      }
+    }
+  }
+}
+function renderTableCell(g, text, x, y, maxW, rowH, ctx) {
+  const { palette } = ctx;
+  const trimmed = text.trim();
+  const btnMatch = trimmed.match(/^\(([^)]+)\)(?:\s*\|\s*(.+))?$/);
+  if (btnMatch) {
+    const label = btnMatch[1];
+    const stateStr = btnMatch[2]?.trim().toLowerCase();
+    const isGhost = stateStr === "ghost";
+    const isDestructive = stateStr === "destructive";
+    const fill = isDestructive ? palette.destructive : palette.primary;
+    const btnW = Math.min(measureText(label, 10) + 16, maxW);
+    const btnH = 20;
+    const by = y + (rowH - btnH) / 2;
+    if (isGhost) {
+      g.append("rect").attr("x", x).attr("y", by).attr("width", btnW).attr("height", btnH).attr("fill", "none").attr("stroke", fill).attr("stroke-width", 1).attr("rx", 3);
+      g.append("text").attr("x", x + btnW / 2).attr("y", by + btnH / 2 + 3).attr("fill", fill).attr("font-size", 10).attr("font-weight", "600").attr("text-anchor", "middle").text(label);
+    } else {
+      g.append("rect").attr("x", x).attr("y", by).attr("width", btnW).attr("height", btnH).attr("fill", fill).attr("rx", 3);
+      g.append("text").attr("x", x + btnW / 2).attr("y", by + btnH / 2 + 3).attr("fill", palette.bg).attr("font-size", 10).attr("font-weight", "600").attr("text-anchor", "middle").text(label);
+    }
+    return;
+  }
+  if (/^<\s*x?\s*>$/.test(trimmed)) {
+    const checked = /x/i.test(trimmed);
+    const boxSize = 12;
+    const bx = x;
+    const by = y + (rowH - boxSize) / 2;
+    g.append("rect").attr("x", bx).attr("y", by).attr("width", boxSize).attr("height", boxSize).attr("fill", checked ? palette.primary : "none").attr("stroke", checked ? palette.primary : palette.border).attr("rx", 2);
+    if (checked) {
+      g.append("path").attr(
+        "d",
+        `M${bx + 2},${by + boxSize / 2} L${bx + 4},${by + boxSize / 2 + 2} L${bx + 10},${by + 2}`
+      ).attr("fill", "none").attr("stroke", palette.bg).attr("stroke-width", 1.5);
+    }
+    return;
+  }
+  g.append("text").attr("x", x).attr("y", y + rowH / 2 + 4).attr("fill", palette.text).attr("font-size", 12).text(trimmed);
+}
+function renderImage(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const isRound = el.imageHint === "round";
+  if (isRound) {
+    const r = Math.min(node.width, node.height) / 2;
+    const cx = node.width / 2;
+    const cy = node.height / 2;
+    g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr(
+      "fill",
+      isTransparent ? "none" : mix(palette.border, palette.bg, 30)
+    ).attr("stroke", palette.border);
+    g.append("line").attr("x1", cx - r * 0.7).attr("y1", cy - r * 0.7).attr("x2", cx + r * 0.7).attr("y2", cy + r * 0.7).attr("stroke", palette.border);
+    g.append("line").attr("x1", cx + r * 0.7).attr("y1", cy - r * 0.7).attr("x2", cx - r * 0.7).attr("y2", cy + r * 0.7).attr("stroke", palette.border);
+  } else {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr(
+      "fill",
+      isTransparent ? "none" : mix(palette.border, palette.bg, 30)
+    ).attr("stroke", palette.border).attr("rx", 4);
+    g.append("line").attr("x1", 0).attr("y1", 0).attr("x2", node.width).attr("y2", node.height).attr("stroke", palette.border);
+    g.append("line").attr("x1", node.width).attr("y1", 0).attr("x2", 0).attr("y2", node.height).attr("stroke", palette.border);
+  }
+}
+function renderSkeletonBlock(g, node, ctx) {
+  for (const child of node.children) {
+    renderSkeletonPlaceholder(g, child, ctx);
+  }
+}
+function renderSkeletonPlaceholder(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const pg = g.append("g").attr("transform", `translate(${node.x}, ${node.y})`);
+  if (isTransparent) {
+    pg.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", palette.border).attr("opacity", 0.1).attr("rx", 4);
+  } else {
+    pg.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", palette.border).attr("opacity", 0.2).attr("rx", 4);
+  }
+}
+function renderAlert(g, node, ctx) {
+  const { palette, isDark, isTransparent } = ctx;
+  const el = node.element;
+  const color = getElementSemanticColor(el, palette) || palette.accent;
+  const fill = isTransparent ? null : shapeFill(palette, color, isDark, { solid: ctx.solid });
+  if (fill) {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", fill).attr("rx", 4);
+  }
+  g.append("rect").attr("width", 3).attr("height", node.height).attr("fill", color).attr("rx", 1.5);
+  if (isTransparent) {
+    g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", "none").attr("stroke", color).attr("rx", 4);
+  }
+  const labelFill = fill ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : palette.text;
+  g.append("text").attr("x", 12).attr("y", node.height / 2 + 4).attr("fill", labelFill).attr("font-size", 13).text(el.label);
+}
+function renderProgress(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const val = el.progressValue ?? 0;
+  const barH = 8;
+  const cy = node.height / 2;
+  g.append("rect").attr("width", node.width - 40).attr("height", barH).attr("y", cy - barH / 2).attr("fill", isTransparent ? "none" : mix(palette.border, palette.bg, 30)).attr("stroke", isTransparent ? palette.border : "none").attr("rx", barH / 2);
+  const fillW = (node.width - 40) * val / 100;
+  if (fillW > 0) {
+    g.append("rect").attr("width", fillW).attr("height", barH).attr("y", cy - barH / 2).attr("fill", palette.primary).attr("rx", barH / 2);
+  }
+  g.append("text").attr("x", node.width - 32).attr("y", cy + 4).attr("fill", palette.textMuted).attr("font-size", 11).text(`${val}%`);
+}
+function renderChart(g, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const hint = el.chartHint || "line";
+  g.append("rect").attr("width", node.width).attr("height", node.height).attr(
+    "fill",
+    isTransparent ? "none" : mix(palette.textMuted, palette.bg, 8)
+  ).attr("stroke", palette.border).attr("rx", 4);
+  const padX = 20;
+  const padY = 20;
+  const innerW = node.width - padX * 2;
+  const innerH = node.height - padY * 2;
+  if (hint === "line") {
+    const points = [
+      [0, innerH * 0.7],
+      [innerW * 0.2, innerH * 0.4],
+      [innerW * 0.4, innerH * 0.6],
+      [innerW * 0.6, innerH * 0.2],
+      [innerW * 0.8, innerH * 0.3],
+      [innerW, innerH * 0.1]
+    ];
+    const path = points.map(
+      ([x, y], i) => i === 0 ? `M${padX + x},${padY + y}` : `L${padX + x},${padY + y}`
+    ).join(" ");
+    g.append("path").attr("d", path).attr("fill", "none").attr("stroke", palette.primary).attr("stroke-width", 2);
+  } else if (hint === "bar") {
+    const barCount = 5;
+    const barW = innerW / (barCount * 2);
+    const barHeights = [0.6, 0.8, 0.5, 0.9, 0.7];
+    for (let i = 0; i < barCount; i++) {
+      const bh = innerH * barHeights[i];
+      g.append("rect").attr("x", padX + i * (innerW / barCount) + barW / 2).attr("y", padY + innerH - bh).attr("width", barW).attr("height", bh).attr("fill", palette.primary).attr("opacity", 0.7).attr("rx", 2);
+    }
+  } else if (hint === "pie") {
+    const cx = node.width / 2;
+    const cy = node.height / 2;
+    const r = Math.min(innerW, innerH) / 2;
+    const slices = [0.35, 0.25, 0.2, 0.2];
+    const colors = [
+      palette.primary,
+      palette.secondary,
+      palette.accent,
+      palette.border
+    ];
+    let startAngle = 0;
+    for (let i = 0; i < slices.length; i++) {
+      const endAngle = startAngle + slices[i] * Math.PI * 2;
+      const x1 = cx + r * Math.cos(startAngle);
+      const y1 = cy + r * Math.sin(startAngle);
+      const x2 = cx + r * Math.cos(endAngle);
+      const y2 = cy + r * Math.sin(endAngle);
+      const largeArc = slices[i] > 0.5 ? 1 : 0;
+      g.append("path").attr(
+        "d",
+        `M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2} Z`
+      ).attr("fill", colors[i]).attr("opacity", 0.7);
+      startAngle = endAngle;
+    }
+  }
+}
+function renderModal(parent, node, ctx) {
+  const { palette, isTransparent } = ctx;
+  const el = node.element;
+  const g = parent.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("data-line-number", el.lineNumber);
+  if (!isTransparent) {
+    g.append("rect").attr("x", 4).attr("y", 4).attr("width", node.width).attr("height", node.height).attr("fill", "rgba(0,0,0,0.1)").attr("rx", GROUP_CORNER);
+  }
+  g.append("rect").attr("width", node.width).attr("height", node.height).attr("fill", isTransparent ? "none" : palette.surface).attr("stroke", palette.border).attr("rx", GROUP_CORNER);
+  g.append("rect").attr("width", node.width).attr("height", 36).attr(
+    "fill",
+    isTransparent ? "none" : mix(palette.textMuted, palette.bg, 15)
+  ).attr("rx", GROUP_CORNER);
+  g.append("text").attr("x", 12).attr("y", 24).attr("fill", palette.text).attr("font-size", 14).attr("font-weight", "600").text(el.label || "Modal");
+  const cx = node.width - 16;
+  g.append("text").attr("x", cx).attr("y", 24).attr("fill", palette.textMuted).attr("font-size", 16).text("\xD7");
+  for (const child of node.children) {
+    const childG = g.append("g").attr("transform", "translate(0, 36)");
+    renderNode(childG, child, ctx, 1);
+  }
+}
+
+export {
+  renderWireframe
+};
+//# sourceMappingURL=chunk-ZO27FGJS.js.map

package/dist/collapse-CLPJD2RL.js

@@ -0,0 +1,11 @@
+import {
+  collapseOrgTree,
+  focusOrgTree
+} from "./chunk-UJ4FJLBF.js";
+import "./chunk-BS7SV7C3.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  collapseOrgTree,
+  focusOrgTree
+};
+//# sourceMappingURL=collapse-CLPJD2RL.js.map

package/dist/collapse-SLINJQW6.js

@@ -0,0 +1,9 @@
+import {
+  collapseMindmapTree
+} from "./chunk-UZ7EZW3B.js";
+import "./chunk-BS7SV7C3.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  collapseMindmapTree
+};
+//# sourceMappingURL=collapse-SLINJQW6.js.map

package/dist/collapse-ZWUFFCK2.js

@@ -0,0 +1,9 @@
+import {
+  collapseSitemapTree
+} from "./chunk-UNCCZ3NU.js";
+import "./chunk-BS7SV7C3.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  collapseSitemapTree
+};
+//# sourceMappingURL=collapse-ZWUFFCK2.js.map

package/dist/compute-G55RG53N.js

@@ -0,0 +1,8 @@
+import {
+  computeInfra
+} from "./chunk-A44USUV7.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  computeInfra
+};
+//# sourceMappingURL=compute-G55RG53N.js.map

package/dist/dgmo-router-DZCIDUO5.js

@@ -0,0 +1,73 @@
+import {
+  CHART_TYPE_DESCRIPTIONS,
+  chartTypeParsers,
+  getAllChartTypes,
+  getRenderCategory,
+  isExtendedChartType,
+  knownChartTypeIds,
+  looksLikeC4,
+  looksLikeGantt,
+  parseDgmo,
+  parseDgmoChartType
+} from "./chunk-6FZYCKXB.js";
+import "./chunk-P235SVAH.js";
+import "./chunk-6HO5ZTXK.js";
+import "./chunk-44CM72SQ.js";
+import "./chunk-76OWZ3BA.js";
+import "./chunk-MO5YHHMQ.js";
+import "./chunk-WCSOJFU3.js";
+import "./chunk-7JEGTRLD.js";
+import "./chunk-NNAAJVBU.js";
+import "./chunk-RYEGFMUO.js";
+import "./chunk-33LCUH4H.js";
+import "./chunk-XAKEUMEJ.js";
+import "./chunk-BUPDIHML.js";
+import "./chunk-DKEPS5LH.js";
+import "./chunk-BUVJFRPY.js";
+import "./chunk-WVAJFAIA.js";
+import "./chunk-EB6FPQUP.js";
+import "./chunk-EVCVDTXE.js";
+import "./chunk-NURGB5Z4.js";
+import "./chunk-L66GEFB6.js";
+import "./chunk-RVMRZAPB.js";
+import "./chunk-AN2MOO5T.js";
+import "./chunk-RTLBSQ3G.js";
+import "./chunk-L3UHP6TD.js";
+import "./chunk-USZW2HHU.js";
+import "./chunk-5QXL4NYS.js";
+import "./chunk-GMR5MFHJ.js";
+import "./chunk-ERLBPDGU.js";
+import "./chunk-AELOBFW5.js";
+import "./chunk-2DXMZRWJ.js";
+import "./chunk-IYULMRBE.js";
+import "./chunk-R3XI2VC7.js";
+import "./chunk-P6T66CCZ.js";
+import "./chunk-SML67VPV.js";
+import "./chunk-C3Z4DX3V.js";
+import "./chunk-QLCCJEJI.js";
+import "./chunk-LIOHW36Z.js";
+import "./chunk-I46X5VUA.js";
+import "./chunk-3MQQNXPD.js";
+import "./chunk-NXMESY4J.js";
+import "./chunk-RUNNI6VE.js";
+import "./chunk-5MLYVTYM.js";
+import "./chunk-FMDSF3OV.js";
+import "./chunk-FFUN5D66.js";
+import "./chunk-NOTA6TEI.js";
+import "./chunk-Y3J7VR52.js";
+import "./chunk-TLVIHFRO.js";
+import "./chunk-CXK4DZH3.js";
+import "./chunk-5WRI5ZAA.js";
+export {
+  CHART_TYPE_DESCRIPTIONS,
+  chartTypeParsers,
+  getAllChartTypes,
+  getRenderCategory,
+  isExtendedChartType,
+  knownChartTypeIds,
+  looksLikeC4,
+  looksLikeGantt,
+  parseDgmo,
+  parseDgmoChartType
+};
+//# sourceMappingURL=dgmo-router-DZCIDUO5.js.map