ranui/dist/diagram-OA4YK3LP-jU--aqQl.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { n as X } from "./mermaid-parser.core-uIDZYuBu.js";
import { n as f } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as A } from "./src-DtRLxcYO.js";
import { H as O, K as G, U as Y, a as P, b as N, c as F, f as j, v as U, w as Z, y as q, z as K } from "./chunk-WYO6CB5R-DDHkKowO.js";
import { i as D } from "./chunk-ICXQ74PX-DR8rL-xF.js";
import { t as J } from "./chunk-VAUOI2AC-izt0o4id.js";
import { t as Q } from "./chunk-JWPE2WC7-CGEmUMMZ.js";
import { r as ee, t as te } from "./chunk-HOUHSVGY-DRQcQeMT.js";
import { t as ne } from "./chunk-2Q5K7J3B-DlFVJRAn.js";
var E = /[─━│┃└┗├┣]/, S = /[└┗├┣]/, re = /[─━]/, V = /^[\s│┃]+$/, $ = /^\s*(title[\t ]|accTitle[\t ]*:|accDescr[\t ]*[:{])/, k = /^\s*%%/, ie = "    ";
function L(n) {
  return n.some((e) => E.test(e));
}
f(L, "isBoxDrawingFormat");
function _(n) {
  for (const e of n) {
    const t = S.exec(e);
    if (t?.index && t.index > 0) return t.index;
  }
  return 4;
}
f(_, "inferSegmentWidth");
function M(n, e) {
  return n.replace(/\bline\s+(\d+)\b/gi, (t, r) => {
    const i = parseInt(r, 10), a = e.get(i);
    return a ? `line ${a}` : t;
  });
}
f(M, "remapErrorLines");
function H(n) {
  const e = n.split(`
`), t = /* @__PURE__ */ new Map();
  let r = -1;
  for (const [s, o] of e.entries()) if (o.trim() === "treeView-beta") {
    r = s;
    break;
  }
  if (r === -1) return {
    text: n,
    lineMap: t
  };
  const i = [];
  for (let s = r + 1; s < e.length; s++) {
    const o = e[s];
    o.trim() === "" || k.test(o) || $.test(o) || V.test(o) || i.push(o.replace(/\t/g, "    "));
  }
  if (!L(i)) return {
    text: n,
    lineMap: t
  };
  const a = _(i), c = [];
  let l = 0;
  for (let s = 0; s <= r; s++)
    c.push(e[s]), l++, t.set(l, s + 1);
  for (let s = r + 1; s < e.length; s++) {
    const o = e[s], d = o.trim(), h = s + 1;
    if (d === "") {
      c.push(o), l++, t.set(l, h);
      continue;
    }
    if (k.test(o)) {
      c.push(o), l++, t.set(l, h);
      continue;
    }
    if ($.test(o)) {
      c.push(o), l++, t.set(l, h);
      continue;
    }
    if (V.test(o)) continue;
    const p = o.replace(/\t/g, "    "), x = S.exec(p);
    if (x?.index !== void 0) {
      const u = x.index, m = Math.round(u / a) + 1;
      let g = u + 1;
      for (; g < p.length && re.test(p[g]); ) g++;
      for (; g < p.length && p[g] === " "; ) g++;
      const b = p.slice(g).trimEnd();
      if (!b) throw new Error(`Line ${h}: Empty node — expected a filename or directory name after the box-drawing prefix`);
      const W = ie.repeat(m);
      c.push(W + b), l++, t.set(l, h);
    } else {
      if (/^[\s─━│┃└┗├┣]+$/.test(p)) continue;
      if (E.test(p))
        c.push(o), l++, t.set(l, h);
      else {
        if (/^\s+/.test(p)) throw new Error(`Line ${h}: Unexpected indentation without box-drawing characters. In box-drawing format, use ├── or └── prefixes for indented nodes.`);
        c.push(o), l++, t.set(l, h);
      }
    }
  }
  return {
    text: c.join(`
`),
    lineMap: t
  };
}
f(H, "preprocessBoxDrawing");
var w = new ne(() => ({
  cnt: 1,
  stack: [{
    id: 0,
    level: -1,
    name: "/",
    nodeType: "directory",
    children: []
  }]
})), oe = /* @__PURE__ */ f(() => {
  w.reset(), P();
}, "clear"), se = /* @__PURE__ */ f(() => w.records.stack[0], "getRoot"), ae = /* @__PURE__ */ f(() => w.records.cnt, "getCount"), ce = j.treeView, I = {
  clear: oe,
  addNode: /* @__PURE__ */ f((n, e, t, r, i, a) => {
    for (; n <= w.records.stack[w.records.stack.length - 1].level; ) w.records.stack.pop();
    const c = {
      id: w.records.cnt++,
      level: n,
      name: e,
      nodeType: t,
      icon: i,
      cssClass: r,
      description: a,
      children: []
    };
    w.records.stack[w.records.stack.length - 1].children.push(c), w.records.stack.push(c);
  }, "addNode"),
  getRoot: se,
  getCount: ae,
  getConfig: /* @__PURE__ */ f(() => D(ce, N().treeView), "getConfig"),
  getAccTitle: q,
  getAccDescription: U,
  getDiagramTitle: Z,
  setAccDescription: O,
  setAccTitle: Y,
  setDiagramTitle: G
}, le = /* @__PURE__ */ f((n) => {
  Q(n, I);
  for (const e of n.nodes) {
    const t = typeof e.indent == "number" ? e.indent : 0;
    let r = e.name;
    const i = r.endsWith("/");
    i && (r = r.slice(0, -1));
    const a = i ? "directory" : "file", c = e.classAnnotation || void 0, l = e.iconAnnotation, s = l !== void 0 ? l || "none" : void 0, o = e.descAnnotation || void 0, d = o ? K(o, N()) : void 0;
    I.addNode(t, r, a, c, s, d);
  }
}, "populate"), de = { parse: /* @__PURE__ */ f(async (n) => {
  const { text: e, lineMap: t } = H(n);
  try {
    const r = await X("treeView", e);
    A.debug(r), le(r);
  } catch (r) {
    throw t.size > 0 && r instanceof Error && (r.message = M(r.message, t)), r;
  }
}, "parse") }, v = {
  prefix: "mermaid-treeview",
  height: 24,
  width: 24,
  icons: {
    folder: { body: '<path fill="currentColor" d="M10.59 4.59A2 2 0 0 0 9.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.17z"/>' },
    file: { body: '<path fill="currentColor" fill-rule="evenodd" d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.83a2 2 0 0 0-.59-1.42l-4.82-4.82A2 2 0 0 0 13.17 2H6Zm7.5 1.9l4.6 4.6h-3.6a1 1 0 0 1-1-1V3.9Z" clip-rule="evenodd"/>' }
  }
};
function z(n, e) {
  const t = e?.filenameIcons?.[n];
  if (t) return t;
  const r = n.lastIndexOf(".");
  if (r > 0) {
    const i = n.substring(r).toLowerCase(), a = e?.extensionIcons;
    return a?.[i] ?? a?.[i.slice(1)];
  }
}
f(z, "detectIcon");
function C(n, e) {
  return n.includes(":") ? n : n in v.icons || !e ? `${v.prefix}:${n}` : `${e}:${n}`;
}
f(C, "qualifyIcon");
function B(n, e) {
  if (n.icon !== "none") {
    if (n.icon) return C(n.icon, e.defaultIconPack);
    if (e.showIcons) {
      if (n.nodeType === "file") {
        const t = z(n.name, e);
        if (t === "none") return;
        if (t) return C(t, e.defaultIconPack);
      }
      return `${v.prefix}:${n.nodeType === "directory" ? "folder" : "file"}`;
    }
  }
}
f(B, "getNodeIcon");
ee([{
  name: v.prefix,
  icons: v
}]);
var y = 14, he = 4, pe = 16, R = /* @__PURE__ */ f((n, e) => `tv-icon-${n}-${e.replace(/[^\w-]/g, "-")}`, "iconSymbolId"), fe = /* @__PURE__ */ f(async (n, e, t, r) => {
  const i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ f((s) => {
    const o = B(s, t);
    o && i.add(o), s.children.forEach(a);
  }, "collect");
  if (a(e), i.size === 0) return;
  const c = await Promise.all([...i].map(async (s) => ({
    icon: s,
    svg: await te(s, {
      height: y,
      width: y
    })
  }))), l = n.append("defs");
  for (const { icon: s, svg: o } of c) l.append("g").attr("id", R(r, s)).html(o);
}, "injectIconDefs"), ge = /* @__PURE__ */ f((n, e, t, r, i, a) => {
  const c = r.append("g");
  let l = "treeView-node-label";
  t.nodeType === "directory" && (l += " treeView-node-dir"), t.cssClass && (l += ` ${t.cssClass}`);
  const s = y + he, o = B(t, i), d = o !== void 0;
  o && c.append("use").attr("xlink:href", `#${R(a, o)}`).attr("x", n + i.paddingX).attr("y", e + i.paddingY).attr("class", "treeView-node-icon");
  const h = c.append("text").text(t.name).attr("dominant-baseline", "middle").attr("class", l), { height: p, width: x } = h.node().getBBox(), u = p + i.paddingY * 2, m = n + i.paddingX + (d ? s : 0);
  h.attr("x", m), h.attr("y", e + u / 2);
  const g = m + x;
  return t.BBox = {
    x: n,
    y: e,
    width: x + i.paddingX * 2 + (d ? s : 0),
    height: u
  }, t.cssClass?.split(/\s+/).includes("highlight") && c.insert("rect", ":first-child").attr("x", n).attr("y", e + 1).attr("width", 0).attr("height", u - 2).attr("rx", 3).attr("class", "treeView-highlight-bg"), {
    node: t,
    nodeGroup: c,
    labelRightEdge: g,
    centerY: e + u / 2
  };
}, "positionLabel"), T = /* @__PURE__ */ f((n, e, t, r, i, a) => n.append("line").attr("x1", e).attr("y1", t).attr("x2", r).attr("y2", i).attr("stroke-width", a).attr("class", "treeView-node-line"), "positionLine"), ue = /* @__PURE__ */ f((n, e, t, r) => {
  let i = 0, a = 0;
  const c = [], l = /* @__PURE__ */ f((d, h, p, x) => {
    const u = x * (p.rowIndent + p.paddingX), m = ge(u, i, h, d, p, r);
    c.push(m);
    const { height: g, width: b } = h.BBox;
    T(d, u - p.rowIndent, i + g / 2, u, i + g / 2, p.lineThickness), a = Math.max(a, u + b), i += g;
  }, "drawNode"), s = /* @__PURE__ */ f((d, h = 0) => {
    l(n, d, t, h), d.children.forEach((m) => {
      s(m, h + 1);
    });
    const { x: p, y: x, height: u } = d.BBox;
    if (d.children.length) {
      const { y: m, height: g } = d.children[d.children.length - 1].BBox;
      T(n, p + t.paddingX, x + u, p + t.paddingX, m + g / 2 + t.lineThickness / 2, t.lineThickness);
    }
  }, "processNode");
  s(e);
  const o = c.filter((d) => d.node.description);
  if (o.length > 0) {
    const d = Math.max(...c.map((h) => h.labelRightEdge)) + pe;
    for (const h of o) {
      const p = h.nodeGroup.append("text").text(h.node.description).attr("dominant-baseline", "middle").attr("class", "treeView-node-description").attr("x", d).attr("y", h.centerY).node().getBBox();
      a = Math.max(a, d + p.width + t.paddingX);
    }
  }
  for (const d of c) if (d.node.cssClass?.split(/\s+/).includes("highlight")) {
    const h = d.nodeGroup.select(".treeView-highlight-bg");
    if (!h.empty()) {
      const p = a - d.node.BBox.x + 8;
      h.attr("width", p), a = Math.max(a, d.node.BBox.x + p + 2);
    }
  }
  return {
    totalHeight: i,
    totalWidth: a
  };
}, "drawTree"), me = { draw: /* @__PURE__ */ f(async (n, e, t, r) => {
  A.debug(`Rendering treeView diagram
` + n);
  const i = r.db, a = i.getRoot(), c = i.getConfig(), l = J(e);
  await fe(l, a, c, e);
  const s = l.append("g");
  s.attr("class", "tree-view");
  const { totalHeight: o, totalWidth: d } = ue(s, a, c, e);
  l.attr("viewBox", `-${c.lineThickness / 2} 0 ${d} ${o}`), F(l, o, d, c.useMaxWidth);
}, "draw") }, we = {
  labelFontSize: "16px",
  labelColor: "black",
  lineColor: "black",
  iconColor: "#546e7a",
  descriptionColor: "#6a9955",
  highlightBg: "rgba(255, 193, 7, 0.15)",
  highlightStroke: "#ffc107"
}, ke = {
  db: I,
  renderer: me,
  parser: de,
  styles: /* @__PURE__ */ f(({ treeView: n }) => {
    const { labelFontSize: e, labelColor: t, lineColor: r, iconColor: i, descriptionColor: a, highlightBg: c, highlightStroke: l } = D(we, n);
    return `
    .treeView-node-label {
        font-size: ${e};
        fill: ${t};
        white-space: pre;
    }
    .treeView-node-dir {
        font-weight: bold;
    }
    .treeView-node-line {
        stroke: ${r};
    }
    .treeView-node-icon {
        color: ${i};
    }
    .treeView-node-description {
        font-size: ${e};
        fill: ${a};
        font-style: italic;
        white-space: pre;
    }
    .treeView-highlight-bg {
        fill: ${c};
        stroke: ${l};
        stroke-width: 1;
    }
    `;
  }, "styles")
};
export {
  ke as diagram
};