@celldl/viewer 0.20260730.0

package/dist/CellDLViewer-Cyo8fJde.js

@@ -0,0 +1,1463 @@
+import { c as ct, d as ut, i as O, f as dt, t as A, a as ft, b as mt, e as pt, g as gt, h as yt, u as wt, P as vt, Q as xt, p as Ct, j as bt, s as Et } from "./vendor-BsdU7enb.js";
+import * as f from "vue";
+import { defineComponent as St, openBlock as It, createElementBlock as Tt, createElementVNode as F, createVNode as Pt } from "vue";
+const G = ct(() => {
+  const n = window.matchMedia("(prefers-color-scheme: light)"), t = f.ref(n.matches), e = f.ref(!n.matches), s = f.ref("system");
+  function i(g) {
+    t.value = g.matches, e.value = !g.matches;
+  }
+  function r() {
+    document.documentElement.classList.toggle("celldl-dark-mode", e.value);
+  }
+  n.addEventListener("change", (g) => {
+    s.value === "system" && (i(g), r());
+  });
+  function l() {
+    return s.value;
+  }
+  function a(g) {
+    s.value = g ?? "system", s.value === "light" ? (t.value = !0, e.value = !1) : s.value === "dark" ? (t.value = !1, e.value = !0) : i(n), r();
+  }
+  function c() {
+    return t.value;
+  }
+  function B() {
+    return e.value;
+  }
+  return {
+    theme: l,
+    setTheme: a,
+    useLightMode: c,
+    useDarkMode: B
+  };
+}), tt = 16, Lt = tt / 2, et = 2.54, Nt = 10 * et, Dt = 72, Mt = 6, S = 96, Ot = /* @__PURE__ */ new Map([
+  ["px", 1],
+  ["in", S],
+  ["cm", S / et],
+  ["mm", S / Nt],
+  ["pt", S / Dt],
+  ["pc", S / Mt],
+  ["%", null],
+  // 1/100.0 of viewport dimension
+  ["em", tt],
+  // em/pt depends on current font size
+  ["ex", Lt]
+  // ex/pt depends on current font size
+]), At = /(.*)(em|ex|px|in|cm|mm|pt|pc|%)/;
+function H(n) {
+  if (typeof n != "string")
+    return n;
+  const t = n.match(At);
+  if (t === null || t.length < 3)
+    return +n;
+  {
+    const e = Ot.get(t[2]);
+    if (e != null)
+      return e * +t[1];
+  }
+  return null;
+}
+const Rt = "http://www.w3.org/2000/svg";
+function R(n) {
+  return n.getAttribute("viewBox")?.split(" ").map((t) => +t);
+}
+function st(n) {
+  const t = [];
+  for (const [e, s] of Object.entries(n))
+    t.push(` ${e}="${s}"`);
+  return t.join("");
+}
+function Vt(n, t, e) {
+  return Object.assign({}, e, {
+    cx: `${n.x}`,
+    cy: `${n.y}`,
+    r: `${t}`
+  });
+}
+function $t(n, t, e = {}) {
+  return `<circle${st(Vt(n, t, e))}/>`;
+}
+function jt(n, t, e) {
+  return Object.assign({}, e, {
+    x: `${Math.min(n.x, t.x)}`,
+    y: `${Math.min(n.y, t.y)}`,
+    width: `${Math.abs(t.x - n.x)}`,
+    height: `${Math.abs(t.y - n.y)}`
+  });
+}
+function kt(n, t, e = {}) {
+  return `<rect${st(jt(n, t, e))}/>`;
+}
+const it = "http://celldl.org/ontologies/celldl#", _t = "https://bg-rdf.org/ontologies/bondgraph#", Ut = "https://bg-rdf.org/ontologies/bondgraph-framework#", Bt = "https://w3id.org/cdt/", Ft = "https://bg-rdf.org/templates/", Gt = "http://purl.org/dc/terms/", Ht = "http://www.w3.org/2002/07/owl#", nt = "http://www.w3.org/1999/02/22-rdf-syntax-ns#", qt = "http://www.w3.org/2000/01/rdf-schema#", Xt = "http://www.w3.org/2001/XMLSchema#", zt = {
+  celldl: it,
+  // These should come from BG plugin
+  bg: _t,
+  bgf: Ut,
+  cdt: Bt,
+  tpl: Ft
+}, rt = {
+  dcterms: Gt,
+  owl: Ht,
+  rdf: nt,
+  rdfs: qt,
+  svg: `${Rt}/`,
+  xsd: Xt
+}, lt = Object.assign({}, zt, rt);
+Object.entries(lt).map(
+  (n) => `PREFIX ${n[0]}: <${n[1]}>`
+).join(`
+`);
+class _ {
+  #t;
+  constructor(t) {
+    this.#t = t;
+  }
+  uri(t) {
+    return U(this.#t + (t || ""));
+  }
+}
+const v = new _(it), u = new _(nt);
+new Map(Object.entries(lt));
+class Wt {
+  addMetadataPropertiesForSubject(t, e) {
+    const s = [];
+    for (const [i, r] of e.predicateValues())
+      s.push(...this.#t(t, i, r));
+    return s;
+  }
+  #t(t, e, s) {
+    const i = [];
+    if (C(s) || m(s))
+      i.push(this.add(t, e, s));
+    else if (s instanceof x) {
+      const r = V();
+      i.push(this.add(t, e, r, null)), i.push(...this.addMetadataPropertiesForSubject(r, s));
+    } else if (Array.isArray(s) && s.length > 0) {
+      const r = V();
+      i.push(this.add(t, e, r, null)), this.#i(r, s);
+    } else if (s instanceof Set)
+      for (const r of s.values())
+        i.push(...this.#t(t, e, r));
+    return i;
+  }
+  addStatementList(t) {
+    t.forEach((e) => {
+      this.add(e.subject, e.predicate, e.object, null);
+    });
+  }
+  metadataFromPredicates(t) {
+    const e = new x();
+    for (const s of t) {
+      const i = this.#e(s.object);
+      i && e.setProperty(s.predicate, i, !0);
+    }
+    return e;
+  }
+  metadataPropertiesForSubject(t) {
+    const e = this.statementsMatching(t, null, null, null);
+    return this.metadataFromPredicates(e);
+  }
+  removeStatementList(t) {
+    t.forEach((e) => {
+      this.removeStatements(e.subject, e.predicate, e.object, null);
+    });
+  }
+  #e(t) {
+    return C(t) || m(t) ? t : Zt(t) ? this.contains(t, u.uri("rest"), null) ? this.#s(t) : this.metadataPropertiesForSubject(t) : null;
+  }
+  #s(t) {
+    const e = [], s = [t.value];
+    let i = t;
+    for (; i && !i.equals(u.uri("nil")); ) {
+      const r = this.statementsMatching(i, u.uri("first"), null, null);
+      if (r.length !== 1 || r[0] === void 0) break;
+      const l = this.#e(r[0].object);
+      if (!l) break;
+      e.push(l);
+      const a = this.statementsMatching(i, u.uri("rest"), null, null);
+      if (a.length !== 1 || a[0] === void 0 || (i = a[0].object, s.includes(i.value)))
+        break;
+      s.push(i.value);
+    }
+    return e;
+  }
+  #i(t, e) {
+    const s = [];
+    let i = t;
+    return e.forEach((r, l) => {
+      if (s.push(...this.#t(i, u.uri("first"), r)), l < e.length - 1) {
+        const a = V();
+        s.push(this.add(i, u.uri("rest"), a, null)), i = a;
+      }
+    }), s.push(this.add(i, u.uri("rest"), u.uri("nil"), null)), s;
+  }
+}
+function V(n = void 0) {
+  return globalThis.oxigraph.blankNode(n);
+}
+function Zt(n) {
+  return !!n.termType && n.termType === "BlankNode";
+}
+function C(n) {
+  return !!n.termType && n.termType === "Literal";
+}
+function b(n) {
+  return m(n) && (n.uri = n.value, n.id = () => {
+    let t = n.value.split("#");
+    return t.length < 2 && (t = n.value.split("/")), t.length > 1 ? t.at(-1) : "";
+  }), n;
+}
+function U(n) {
+  return b(globalThis.oxigraph.namedNode(n));
+}
+function m(n) {
+  return !!n.termType && n.termType === "NamedNode";
+}
+function q(n) {
+  return {
+    graph: b(n.graph),
+    object: b(n.object),
+    predicate: b(n.predicate),
+    subject: b(n.subject),
+    termType: n.termType,
+    value: n.value
+  };
+}
+const I = "text/turtle";
+class Qt extends Wt {
+  #t;
+  constructor() {
+    super(), this.#t = new globalThis.oxigraph.Store();
+  }
+  statements(t = null) {
+    return this.statementsMatching(null, null, null, t);
+  }
+  add(t, e, s, i = null) {
+    const r = globalThis.oxigraph.quad(t, e, s, i || globalThis.oxigraph.defaultGraph());
+    return this.#t.add(r), q(r);
+  }
+  contains(t = null, e = null, s = null, i = null) {
+    return this.#t.match(t, e, s, i || globalThis.oxigraph.defaultGraph()).length > 0;
+  }
+  load(t = null, e, s = I, i = null) {
+    try {
+      this.#t.load(e, {
+        format: s,
+        base_iri: t || void 0,
+        to_graph_name: i || globalThis.oxigraph.defaultGraph()
+      });
+    } catch (r) {
+      throw new Error(`Error parsing RDF: ${r.message}`);
+    }
+  }
+  removeStatements(t = null, e = null, s = null, i = null) {
+    const r = this.#t.match(t, e, s, i || globalThis.oxigraph.defaultGraph());
+    for (const l of r)
+      this.#t.delete(l);
+  }
+  async serialise(t, e = I, s = {}, i = null) {
+    if (e === I) {
+      const r = this.#t.match(null, null, null, i || globalThis.oxigraph.defaultGraph());
+      return (await ut.write(r, {
+        format: "text/turtle",
+        prefixes: Object.assign({ "": `${t}#` }, rt, s),
+        baseIri: t,
+        explicitBaseIRI: !0,
+        compact: !1,
+        ordered: !0
+      })).replaceAll(t, "");
+    } else
+      return this.#t.dump({
+        format: e,
+        from_graph_name: i || globalThis.oxigraph.defaultGraph()
+      });
+  }
+  query(t, e = !1) {
+    try {
+      const s = this.#t.query(t, {
+        use_default_graph_as_union: e
+      });
+      for (const i of s)
+        for (const r of i.values())
+          b(r);
+      return s;
+    } catch (s) {
+      console.log(`Error parsing SPARQL query: ${s.message} ${t}`);
+      let i = !0;
+      for (const r of s.stack.split(`
+`))
+        i ? i = r.indexOf("RdfStore.query") < 0 : console.log(r);
+    }
+    return [];
+  }
+  statementsMatching(t = null, e = null, s = null, i = null) {
+    return this.#t.match(t, e, s, i || globalThis.oxigraph.defaultGraph()).map((l) => q(l));
+  }
+  subjectsOfType(t) {
+    return this.query(
+      `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+
+SELECT DISTINCT ?s ?t WHERE {
+    ?s rdf:type/rdfs:subClassOf* <${t.uri}> .
+    ?s rdf:type ?t .
+  } ORDER BY ?s`,
+      !0
+    ).map((e) => [
+      e.get("s"),
+      e.get("t")
+    ]);
+  }
+  update(t) {
+    try {
+      this.#t.update(t);
+    } catch (e) {
+      console.log(`Error parsing SPARQL update: ${e.message} ${t}`);
+      let s = !0;
+      for (const i of e.stack.split(`
+`))
+        s ? s = i.indexOf("RdfStore.update") < 0 : console.log(i);
+    }
+  }
+}
+class x extends Map {
+  #t = /* @__PURE__ */ new Set();
+  static fromProperties(t) {
+    return t.reduce((e, s) => (e.setProperty(s[0], s[1]), e), new x());
+  }
+  get rdfTypes() {
+    return this.#t;
+  }
+  copy() {
+    const t = new x();
+    for (const [e, s] of this.entries())
+      t.set(e, this.#e(s));
+    return t.#t = new Set(this.#t.values()), t;
+  }
+  #e(t) {
+    return C(t) || m(t) ? t : t instanceof x ? t.copy() : Array.isArray(t) ? t.map((e) => this.#e(e)) : new Set([...t.values()].map((e) => this.#e(e)));
+  }
+  getProperty(t) {
+    return this.get(t.value) || null;
+  }
+  getPropertyAsArray(t) {
+    const e = this.getProperty(t);
+    return e ? C(e) || m(e) || e instanceof x ? [e] : Array.isArray(e) ? e : [...e.values()] : [];
+  }
+  isA(t) {
+    return this.#t.has(t.uri);
+  }
+  *predicateValues() {
+    for (const [t, e] of super.entries())
+      yield [U(t), e];
+  }
+  setProperty(t, e, s = !1) {
+    t.equals(u.uri("type")) && m(e) && this.#t.add(e.uri);
+    const i = t.uri;
+    if (s && this.has(i)) {
+      const r = this.get(i);
+      if (r instanceof Set) {
+        let l = !1;
+        if (C(e) || m(e)) {
+          for (const a of r)
+            if (e.equals(a)) {
+              l = !0;
+              break;
+            }
+        }
+        l || r.add(e);
+      } else r ? (!(C(r) || m(r)) || !r.equals(e)) && this.set(i, /* @__PURE__ */ new Set([r, e])) : this.set(i, /* @__PURE__ */ new Set([e]));
+    } else
+      this.set(i, e);
+  }
+}
+const T = 1e-4, X = T * T;
+class o {
+  constructor(t = 0, e = 0) {
+    this.x = t, this.y = e;
+  }
+  static fromPoint(t) {
+    return new o(t.x, t.y);
+  }
+  static fromArray(t) {
+    return new o(t[0], t[1]);
+  }
+  asArray() {
+    return [this.x, this.y];
+  }
+  add(t) {
+    return o.fromPoint(h.add(this, t));
+  }
+  colinear(t, e, s = !1) {
+    return h.colinear(this, t, e, s);
+  }
+  copy() {
+    return new o(this.x, this.y);
+  }
+  distance(t) {
+    return h.distance(this, t);
+  }
+  equals(t) {
+    return h.equals(this, t);
+  }
+  isZero() {
+    return h.isZero(this);
+  }
+  apply(t) {
+    return o.fromPoint(h.apply(this, t));
+  }
+  scalarScale(t) {
+    return o.fromPoint(h.scalarScale(this, t));
+  }
+  scale(t) {
+    return o.fromPoint(h.scale(this, t));
+  }
+  subtract(t) {
+    return o.fromPoint(h.subtract(this, t));
+  }
+  toString() {
+    return `(${this.x}, ${this.y})`;
+  }
+}
+class h {
+  static add(t, e) {
+    return new o(t.x + e.x, t.y + e.y);
+  }
+  static apply(t, e) {
+    return new o(e(t.x), e(t.y));
+  }
+  static colinear(t, e, s, i = !1) {
+    const r = h.distance(t, e), l = h.distance(e, s), a = h.distance(t, s);
+    return a > r && a > l ? r + l < a * (1 + T) : i ? !1 : l > r && l > a ? r + a < l * (1 + T) : l + a < r * (1 + T);
+  }
+  static distance(t, e) {
+    return Math.sqrt((t.x - e.x) ** 2 + (t.y - e.y) ** 2);
+  }
+  static equals(t, e) {
+    return (t.x - e.x) ** 2 + (t.y - e.y) ** 2 <= X;
+  }
+  static isZero(t) {
+    return t.x ** 2 + t.y ** 2 <= X;
+  }
+  static scalarScale(t, e) {
+    return new o(e * t.x, e * t.y);
+  }
+  static scale(t, e) {
+    return new o(e.x * t.x, e.y * t.y);
+  }
+  static subtract(t, e) {
+    return new o(t.x - e.x, t.y - e.y);
+  }
+}
+function P(n, t = 3) {
+  const e = 10 ** t;
+  return Math.round(e * n) / e;
+}
+class w {
+  #t;
+  #e;
+  #s;
+  #i;
+  constructor(t, e, s, i) {
+    [this.#t, this.#e] = t <= s ? [t, s] : [s, t], [this.#s, this.#i] = e <= i ? [e, i] : [i, e];
+  }
+  get left() {
+    return this.#t;
+  }
+  get right() {
+    return this.#e;
+  }
+  get top() {
+    return this.#s;
+  }
+  get bottom() {
+    return this.#i;
+  }
+  static fromPoints(t, e) {
+    return new w(t.x, t.y, e.x, e.y);
+  }
+  static fromSvg(t, e = null) {
+    const s = t.getBBox();
+    let i = new o(s.x, s.y), r = new o(s.x + s.width, s.y + s.height);
+    return e && (i = e.transformPoint(i), r = e.transformPoint(r)), new w(i.x, i.y, r.x, r.y);
+  }
+  get height() {
+    return this.#i - this.#s;
+  }
+  get topLeft() {
+    return new o(this.#t, this.#s);
+  }
+  get width() {
+    return this.#e - this.#t;
+  }
+  asArray() {
+    return [this.#t, this.#s, this.#e, this.#i];
+  }
+  asPoints() {
+    return [new o(this.#t, this.#s), new o(this.#e, this.#i)];
+  }
+  equal(t, e = 1e-4) {
+    return Math.abs(this.#t - t.#t) < e && Math.abs(this.#s - t.#s) < e && Math.abs(this.#e - t.#e) < e && Math.abs(this.#i - t.#i) < e;
+  }
+  expand(t) {
+    return new w(this.#t - t, this.#s - t, this.#e + t, this.#i + t);
+  }
+  inContainer(t) {
+    return this.#t >= t.#t && this.#s <= t.#s && this.#s >= t.#s && this.#i <= t.#i;
+  }
+}
+class y {
+  static #t = null;
+  #e = 0;
+  constructor() {
+    if (y.#t)
+      throw new Error("Use `IdGenerator.instance` instead of `new`");
+    y.#t = this;
+  }
+  static get instance() {
+    return y.#t || (y.#t = new y()), y.#t;
+  }
+  get nextId() {
+    return this.#e += 1, this.#e;
+  }
+}
+const Yt = y.instance;
+function Kt(n = "") {
+  return `${n}:${Yt.nextId}`;
+}
+class L {
+  #t = !1;
+  #e = 0;
+  #s = -1 / 0;
+  #i = 1 / 0;
+  id;
+  constructor(t = 0, e = -1 / 0, s = 1 / 0) {
+    this.#e = t, this.#l(e) <= this.#l(s) ? (this.#s = e, this.#i = s) : (this.#s = s, this.#i = e), this.id = Kt("V");
+  }
+  clean() {
+    this.#t = !1;
+  }
+  get dirty() {
+    return this.#t;
+  }
+  get fixed() {
+    return this.minimum === this.maximum;
+  }
+  get minimum() {
+    return this.#l(this.#s);
+  }
+  get maximum() {
+    return this.#l(this.#i);
+  }
+  get value() {
+    return this.#e;
+  }
+  set value(t) {
+    this.#e !== t && (t < this.minimum ? t = this.minimum : t > this.maximum && (t = this.maximum), this.#e !== t && (this.#e = t, this.#t = !0));
+  }
+  #l(t) {
+    return typeof t == "number" ? t : t.value;
+  }
+  copy() {
+    return new L(this.#e, this.#s, this.#i);
+  }
+  adjustValue(t) {
+    this.#s = this.minimum + t, this.#i = this.maximum + t, this.#e += t;
+  }
+  narrowRange(t, e) {
+    let s = t, i = e;
+    this.#l(s) > this.#l(i) && (s = e, i = t), this.#l(s) > this.minimum && (this.#s = s), this.#l(i) < this.maximum && (this.#i = i);
+  }
+  reassignMaximum(t) {
+    this.#i = t;
+  }
+  reassignMinimum(t) {
+    this.#s = t;
+  }
+  reassignValue(t) {
+    this.#e = t;
+  }
+  toString() {
+    return `${this.id}: [${P(this.minimum)}, ${P(this.#e)}, ${P(this.maximum)}]`;
+  }
+}
+class E extends L {
+  constructor(t) {
+    super(t, t, t);
+  }
+  get fixed() {
+    return !0;
+  }
+  copy() {
+    return new E(this.value);
+  }
+  narrowRange(t, e) {
+  }
+  reassignValue(t) {
+    super.reassignValue(t), super.reassignMinimum(t), super.reassignMaximum(t);
+  }
+}
+class p {
+  #t;
+  #e;
+  constructor(t, e) {
+    this.#t = t, this.#e = e;
+  }
+  static fromPoint(t) {
+    return new p(new L(t.x), new L(t.y));
+  }
+  get dirty() {
+    return this.#t.dirty || this.#e.dirty;
+  }
+  get fixed() {
+    return this.#t.fixed && this.#e.fixed;
+  }
+  get point() {
+    return new o(this.#t.value, this.#e.value);
+  }
+  set point(t) {
+    this.#t.value = t.x, this.#e.value = t.y;
+  }
+  get x() {
+    return this.#t.value;
+  }
+  get y() {
+    return this.#e.value;
+  }
+  get xValue() {
+    return this.#t;
+  }
+  set xValue(t) {
+    this.#t = t;
+  }
+  get yValue() {
+    return this.#e;
+  }
+  set yValue(t) {
+    this.#e = t;
+  }
+  clean() {
+    this.#t.clean(), this.#e.clean();
+  }
+  adjustValue(t) {
+    this.xValue.adjustValue(t.x), this.yValue.adjustValue(t.y);
+  }
+  copy() {
+    return new p(this.#t, this.#e);
+  }
+  reassignValue(t) {
+    this.xValue.reassignValue(t.x), this.yValue.reassignValue(t.y);
+  }
+  toString() {
+    return `RP: (${P(this.x)}, ${P(this.y)})`;
+  }
+}
+class z extends p {
+  constructor(t, e) {
+    super(t, e);
+  }
+}
+class D {
+  #t;
+  #e;
+  #s;
+  #i;
+  #l;
+  #r = null;
+  constructor(t, e, s = null) {
+    this.setCornerPositions(t, e), this.setCentroidOffset(s || new o(0.5, 0.5));
+  }
+  get centroid() {
+    return this.#i;
+  }
+  get dirty() {
+    return this.#t.dirty || this.#e.dirty;
+  }
+  get fixed() {
+    return this.#t.fixed && this.#e.fixed;
+  }
+  get svgElement() {
+    return this.#r;
+  }
+  get topLeftPoint() {
+    return this.#t.point;
+  }
+  clean() {
+    this.#t.clean(), this.#e.clean();
+  }
+  copy() {
+    return new D(this.#t, this.#e, this.#l);
+  }
+  setCornerPositions(t, e) {
+    let s = t.xValue, i = t.yValue, r = e.xValue, l = e.yValue;
+    s.value > r.value && (s = e.xValue, r = t.xValue), i.value > l.value && (i = e.yValue, l = t.yValue), this.#t = new p(s, i), this.#e = new p(r, l), this.#s = h.subtract(this.#e.point, this.#t.point);
+  }
+  setCentroidOffset(t) {
+    this.#l = t, this.#i = p.fromPoint(this.#s.scale(this.#l).add(this.#t.point));
+  }
+  svg(t = {}) {
+    return kt(this.#t.point, this.#e.point, t);
+  }
+}
+class Jt extends D {
+  constructor(t) {
+    super(
+      new z(new E(t[0]), new E(t[1])),
+      new z(new E(t[2]), new E(t[3]))
+    );
+  }
+}
+const te = "#456", ee = "#334155", se = 2, W = 3;
+class d {
+  #t;
+  constructor(t) {
+    this.#t = t;
+  }
+  static fromString(t) {
+    return t === "" || t === "none" ? new d(O()) : new d(dt(t));
+  }
+  static Identity() {
+    return new d(O());
+  }
+  get isIdentity() {
+    return A(this.#t) === A(O());
+  }
+  inverse() {
+    return new d(ft(this.#t));
+  }
+  leftMultiply(t) {
+    return new d(mt([t.#t, this.#t]));
+  }
+  toString() {
+    return A(this.#t);
+  }
+  transformPoint(t) {
+    return o.fromPoint(pt(this.#t, t));
+  }
+  transformPoints(t) {
+    return gt(this.#t, t).map((e) => o.fromPoint(e));
+  }
+  static Translate(t, e) {
+    return new d(yt(t, e));
+  }
+}
+const ie = 9;
+class ne {
+  constructor(t, e) {
+    if (this.celldlObject = t, e === null)
+      throw new Error(`CellDL object '${t.id}' isn't represented in SVG...`);
+    const s = t.celldlModel?.svgDiagram;
+    this.#c = d.Identity();
+    let i = e;
+    for (; i !== s; ) {
+      const r = getComputedStyle(i).transform;
+      r !== "none" && (this.#c = this.#c.leftMultiply(d.fromString(r))), i = i.parentNode;
+    }
+    this.#c.isIdentity && (this.#c = null), t.setCelldlSvgElement(this), this.#n = e, this.#o = e, this.#m();
+  }
+  #t;
+  #e;
+  #s = new o(0.5, 0.5);
+  #i;
+  // Wrt centroid, anticlockwise from bottom right
+  #l = !1;
+  #r = /* @__PURE__ */ new Set();
+  #o;
+  #a = new o();
+  #n;
+  #h;
+  #c = null;
+  get bounds() {
+    return this.#t;
+  }
+  get centroid() {
+    return this.#e;
+  }
+  get centroidOffset() {
+    return this.#s;
+  }
+  get corners() {
+    return [this.#i[0], this.#i[2]];
+  }
+  get globalTransform() {
+    return this.#c;
+  }
+  get height() {
+    return this.#a.y;
+  }
+  get id() {
+    return this.celldlObject.id;
+  }
+  get selected() {
+    return this.#l;
+  }
+  get size() {
+    return this.#a;
+  }
+  get svgElement() {
+    return this.#n;
+  }
+  get topLeft() {
+    return this.#h;
+  }
+  get width() {
+    return this.#a.x;
+  }
+  setCentroid(t) {
+    this.#e = t;
+  }
+  svgBounds(t = !1) {
+    return t || this.#t === void 0 ? w.fromSvg(this.#n, this.#c) : this.#t;
+  }
+  #u() {
+    const t = [];
+    if (this.#o.tagName === "g" && this.#o.classList.contains(N.Connection)) {
+      const e = this.#o.children;
+      for (let s = 0; s < e.length; ++s)
+        t.push(e[s]);
+    } else
+      t.push(this.#o);
+    return t;
+  }
+  #d(t, e) {
+    if (e) {
+      for (const s of this.#u())
+        s.classList.add(t);
+      this.#r.add(t);
+    } else {
+      for (const s of this.#u())
+        s.classList.remove(t);
+      this.#r.delete(t);
+    }
+  }
+  activate(t = !0) {
+    this.#d("active", t);
+  }
+  highlight(t = !0) {
+    this.#d("highlight", t);
+  }
+  pointerEvent(t, e, s) {
+    return !1;
+  }
+  select(t = !0) {
+    this.#d("selected", t), this.#l = t;
+  }
+  #f() {
+    const t = this.svgBounds(!0);
+    this.#a = new o(t.right - t.left, t.bottom - t.top), this.#e ? (this.#h = this.#e.subtract(this.#a.scale(this.#s)), this.#t = new w(
+      this.#h.x,
+      this.#h.y,
+      this.#h.x + this.#a.x,
+      this.#h.y + this.#a.y
+    )) : (this.#h = new o(t.left, t.top), this.#t = t, this.#e = this.#a.scale(this.#s).add(this.#h));
+    const e = this.#a.scale(this.#s).scalarScale(-1), s = se / 2 - W / 2;
+    this.#i = [
+      e.add(this.#a).add({ x: s, y: s }),
+      e.add({ x: this.#a.x, y: 0 }).add({ x: s, y: -s }),
+      e.add({ x: -s, y: -s }),
+      e.add({ x: 0, y: this.#a.y }).add({ x: -s, y: s })
+    ];
+  }
+  #m() {
+    if (this.#s = new o(0.5, 0.5), this.#n.tagName === "g") {
+      const t = this.#n.children.item(0);
+      t.dataset.centreX && (this.#s = new o(+t.dataset.centreX, +t.dataset.centreY));
+    }
+    if (this.#f(), this.#n.tagName === "g" && !this.#n.classList.contains(N.Connection) && this.#n.firstElementChild !== null) {
+      const t = (this.#n.classList.contains(N.Compartment) ? w.fromSvg(this.#n.firstChild) : w.fromSvg(this.#n)).expand(W / 2);
+      if (this.#n.firstElementChild.tagName === "svg") {
+        const i = this.#n.firstElementChild;
+        i.setAttribute("x", `${t.topLeft.x}px`), i.setAttribute("y", `${t.topLeft.y}px`), i.setAttribute("width", `${t.width}px`), i.setAttribute("height", `${t.height}px`);
+      }
+      const s = new Jt(t.asArray()).svg({
+        class: `selection-element parent-id editor-specific ${[...this.#r.values()].join(" ")}`
+      });
+      if (this.#n.insertAdjacentHTML("beforeend", s), this.#o = this.#n.lastChild, this.celldlObject.isConduit) {
+        const i = new o(t.right - t.left, t.bottom - t.top).scale(this.#s).add(new o(t.left, t.top)), r = $t(i, ie, {
+          class: "selection-element parent-id editor-specific conduit"
+        });
+        this.#n.insertAdjacentHTML("beforeend", r);
+      }
+    }
+  }
+}
+class re extends ne {
+  #t;
+  constructor(t, e) {
+    super(t, e), this.#t = new D(
+      p.fromPoint(this.topLeft),
+      p.fromPoint(this.topLeft.add(this.size)),
+      this.centroidOffset
+    ), this.setCentroid(this.#t.centroid.point);
+  }
+}
+var N = /* @__PURE__ */ ((n) => (n.Annotation = "celldl-Annotation", n.Component = "celldl-Component", n.Connector = "celldl-Connector", n.Connection = "celldl-Connection", n.Conduit = "celldl-Conduit", n.Compartment = "celldl-Compartment", n.Interface = "celldl-InterfacePort", n.Layer = "celldl-Layer", n.UnconnectedPort = "celldl-Unconnected", n.Unknown = "", n))(N || {});
+class ot {
+  constructor(t, e = {}, s) {
+    this.uri = t, this.options = e, this.#e = s, this.#t = this.constructor.celldlClassName, this.#i = v.uri(this.constructor.celldlType);
+  }
+  static celldlClassName = "";
+  static celldlType = "Object";
+  #t;
+  #e;
+  #s;
+  #i;
+  #l;
+  toString() {
+    return `${this.#t} ${this.id}`;
+  }
+  get celldlClassName() {
+    return this.#t;
+  }
+  get celldlModel() {
+    return this.#e;
+  }
+  get celldlSvgElement() {
+    return this.#s;
+  }
+  setCelldlSvgElement(t) {
+    this.#s = t;
+  }
+  get hasEditGuides() {
+    return !1;
+  }
+  get id() {
+    return this.uri.id();
+  }
+  isA(t) {
+    return this.#i.equals(t);
+  }
+  get isAlignable() {
+    return !0;
+  }
+  get isAnnotation() {
+    return this.celldlClassName === "celldl-Annotation";
+  }
+  get isComponent() {
+    return this.celldlClassName === "celldl-Component" || this.celldlClassName === "celldl-Conduit";
+  }
+  get isConduit() {
+    return this.celldlClassName === "celldl-Conduit";
+  }
+  get isConnectable() {
+    return !1;
+  }
+  get isConnection() {
+    return this.celldlClassName === "celldl-Connection";
+  }
+  get isCompartment() {
+    return this.celldlClassName === "celldl-Compartment";
+  }
+  get isInterface() {
+    return this.celldlClassName === "celldl-InterfacePort";
+  }
+  get selected() {
+    return this.#s?.selected;
+  }
+  get svgElement() {
+    return this.#s?.svgElement || null;
+  }
+  get tooltip() {
+    return this.#l;
+  }
+  set tooltip(t) {
+    this.#l = t;
+  }
+  activate(t = !0) {
+    this.#s?.activate(t);
+  }
+  highlight(t = !0) {
+    this.#s?.highlight(t);
+  }
+  select(t = !0) {
+    this.#s?.select(t);
+  }
+  assignSvgElement(t) {
+  }
+}
+class at extends ot {
+  assignSvgElement(t) {
+    new re(this, t);
+  }
+}
+class Z extends at {
+  static celldlClassName = "celldl-Annotation";
+  static celldlType = "Annotation";
+}
+class M extends at {
+  static celldlType = "Connector";
+  get isConnectable() {
+    return !0;
+  }
+}
+class k extends M {
+  static celldlClassName = "celldl-Component";
+  static celldlType = "Component";
+}
+class le extends k {
+  static celldlClassName = "celldl-Conduit";
+  static celldlType = "Conduit";
+}
+class oe extends M {
+  static celldlClassName = "celldl-Compartment";
+  static celldlType = "Compartment";
+}
+class Q extends ot {
+  static celldlClassName = "celldl-Connection";
+  static celldlType = "Connection";
+}
+class Y extends M {
+  static celldlClassName = "celldl-InterfacePort";
+  static celldlType = "Interface";
+  #t = [];
+  toString() {
+    return `${super.toString()}  External: ${this.#t.map((t) => t.id).join(", ")}`;
+  }
+}
+class K extends M {
+  static celldlClassName = "celldl-Unconnected";
+  static celldlType = "UnconnectedPort";
+}
+const ae = "celldl-rdf-metadata", J = "file://tmp/viewing.celldl";
+class $ {
+  #t = null;
+  #e = new Qt();
+  #s;
+  #i;
+  #l;
+  #r = /* @__PURE__ */ new Map();
+  #o = /* @__PURE__ */ new Map();
+  constructor(t, e = "", s = {}, i = void 0) {
+    if (this.#s = t, this.#i = U(J), this.#l = new _(`${J}#`), e !== "") {
+      this.#a(e), this.#n();
+      const r = i ? i.tooltip : void 0;
+      for (const l of this.#o.values())
+        if (l.id in s) {
+          const a = s[l.id];
+          this.#r.set(l.id, a), r && r in a && (l.tooltip = String(a[r]));
+        }
+    }
+  }
+  finishSetup() {
+    this.#g(), this.#v(), this.#p(), this.#y(), this.#m(), this.#x();
+  }
+  async viewModel() {
+    this.#t ? await this.#s.viewDiagram(this) : this.#s.closeDiagram();
+  }
+  viewerEvent(t, e = void 0) {
+    const s = {
+      type: t
+    };
+    e && (s.component = {
+      id: e.id
+    }, this.#r.has(e.id) && (s.component.annotation = this.#r.get(e.id))), document.dispatchEvent(
+      new CustomEvent("viewer-event", {
+        detail: s
+      })
+    );
+  }
+  get rdfStore() {
+    return this.#e;
+  }
+  get svgDiagram() {
+    return this.#t;
+  }
+  get uri() {
+    return this.#i.value;
+  }
+  makeUri(t) {
+    return this.#l.uri(t);
+  }
+  objectById(t) {
+    return this.#o.get(t) || null;
+  }
+  #a(t) {
+    const i = new DOMParser().parseFromString(t, "image/svg+xml").firstElementChild;
+    if (i.hasAttribute("width") && i.hasAttribute("height")) {
+      const l = H(i.getAttribute("width")), a = H(i.getAttribute("height"));
+      l !== null && a !== null && (i.attributes.removeNamedItem("width"), i.attributes.removeNamedItem("height"), i.hasAttribute("viewBox") || i.setAttribute("viewBox", `0 0 ${l} ${a}`));
+    }
+    const r = i.querySelectorAll(`path[stroke="${ee}"]`);
+    for (let l = 0; l < r.length; ++l)
+      r[l].setAttribute("stroke", te);
+    this.#t = i;
+  }
+  #n() {
+    const t = this.#t?.getElementById(ae);
+    if (t && (!("contentType" in t.dataset) || t.dataset.contentType === I)) {
+      const e = t.childNodes;
+      for (let s = 0; s < e.length; ++s) {
+        const i = e[s];
+        if (i.nodeName === "#cdata-section") {
+          this.#e.load(this.#i.uri, i.data, I);
+          break;
+        }
+      }
+    }
+  }
+  #h(t) {
+    const e = this.#t?.getElementById(t.id);
+    return e ? (t.assignSvgElement(e), !0) : (console.error(`Missing SVG element for ${t.id}`), !1);
+  }
+  #c(t, e) {
+    const s = this.#e.metadataPropertiesForSubject(e);
+    return new t(e, s, this);
+  }
+  #u(t) {
+    return this.#e.subjectsOfType(t).filter((e) => e[0].value.startsWith(this.#i.value));
+  }
+  #d(t) {
+    this.#o.set(t.id, t);
+  }
+  #f(t, e) {
+    for (const s of this.#u(t))
+      if (s[1].equals(t)) {
+        const i = this.#c(e, s[0]);
+        this.#h(i) && this.#d(i);
+      }
+  }
+  #m() {
+    this.#f(v.uri("Annotation"), Z);
+  }
+  #g() {
+    this.#f(v.uri("Component"), k), this.#f(v.uri("UnconnectedPort"), K);
+  }
+  #v() {
+    this.#f(v.uri("Connector"), Y);
+  }
+  #p() {
+    this.#f(v.uri("Conduit"), le);
+  }
+  getConnector(t) {
+    if (t && m(t) && t.value.startsWith(this.#i.value)) {
+      const e = t.id(), s = this.#o.get(e);
+      return s?.isConnectable ? s : null;
+    }
+    return null;
+  }
+  #y() {
+    this.#f(v.uri("Connection"), Q);
+  }
+  #x() {
+    const t = this.#t.querySelectorAll("*[id]");
+    for (let e = 0; e < t.length; ++e) {
+      const s = t[e];
+      if (!this.#o.has(s.id)) {
+        const i = s.classList.contains("celldl-Annotation") ? Z : s.classList.contains("celldl-Compartment") ? oe : s.classList.contains("celldl-Component") ? k : s.classList.contains("celldl-Connection") ? Q : s.classList.contains("celldl-InterfacePort") ? Y : s.classList.contains("celldl-Unconnected") ? K : null;
+        if (i !== null) {
+          const r = new i(this.makeUri(s.id), {}, this);
+          r.assignSvgElement(s), this.#d(r);
+        }
+      }
+    }
+  }
+}
+class he {
+  #t = !1;
+  #e = new o();
+  #s = null;
+  #i;
+  #l = new o();
+  #r = new o();
+  #o;
+  #a = 0.125;
+  #n = 1;
+  #h = 32;
+  #c = 0.05;
+  constructor(t) {
+    t.addEventListener("wheel", this.#m.bind(this), { passive: !0 }), this.#i = t.id, this.#l = new o(
+      t.offsetLeft + t.clientLeft,
+      t.offsetTop + t.clientTop
+    ), this.#r = new o(t.clientWidth, t.clientHeight), this.#o = new ResizeObserver(this.#f.bind(this)), this.#o.observe(t);
+  }
+  get panning() {
+    return this.#t;
+  }
+  get scale() {
+    return this.#n;
+  }
+  #u() {
+    return R(this.#s);
+  }
+  #d(t) {
+    this.#s.setAttribute("viewBox", t.map((e) => String(e)).join(" "));
+  }
+  enable(t) {
+    let e = R(t);
+    if (e[2] * this.#r.y >= e[3] * this.#r.x ? (this.#n = this.#r.x / e[2], e[1] -= (this.#r.y / this.#n - e[3]) / 2, e[3] = this.#r.y / this.#n) : (this.#n = this.#r.y / e[3], e[0] -= (this.#r.x / this.#n - e[2]) / 2, e[2] = this.#r.x / this.#n), this.#a > this.#n && (this.#a = this.#n), this.#n >= 1) {
+      this.#n = 1, e = R(t);
+      const s = this.#r.subtract({ x: e[2], y: e[3] });
+      e[0] -= s.x / 2, e[1] -= s.y / 2, e[2] = this.#r.x, e[3] = this.#r.y;
+    }
+    this.#s = t, this.#d(e), this.#t = !1;
+  }
+  disable() {
+    this.#s = null, this.#t = !1, this.#n = 1;
+  }
+  pointerDown(t) {
+    this.#t = !0, this.#e = o.fromPoint(t);
+  }
+  pointerMove(t) {
+    if (this.#s && this.#t) {
+      const e = this.#e.subtract(t).scalarScale(1 / this.#n);
+      if (!e.isZero()) {
+        const s = this.#u();
+        return s[0] += e.x, s[1] += e.y, this.#d(s), this.#e = o.fromPoint(t), !0;
+      }
+    }
+    return !1;
+  }
+  pointerUp(t) {
+    this.#t = !1;
+  }
+  #f(t) {
+    if (this.#s) {
+      for (const e of t)
+        if (e.target.id === this.#i) {
+          const s = new o(e.contentRect.width, e.contentRect.height), i = this.#u(), r = s.subtract(this.#r);
+          Math.abs(r.x * i[3]) >= Math.abs(r.y * i[2]) ? (this.#n = s.x / i[2], i[1] -= (this.#r.y / this.#n - i[3]) / 2, i[3] = s.y / this.#n) : (this.#n = s.y / i[3], i[0] -= (this.#r.x / this.#n - i[2]) / 2, i[2] = s.x / this.#n), this.#r = s, this.#d(i);
+        }
+    }
+  }
+  #m(t) {
+    if (this.#s) {
+      const s = (t.deltaY === 0 && t.deltaX ? t.deltaX : t.deltaY) < 0 ? 1 : -1, i = this.#n * Math.exp(s * this.#c / 3);
+      this.#n = Math.min(Math.max(i, this.#a), this.#h);
+      const r = this.#r.scalarScale(1 / this.#n), l = this.#u();
+      l[0] += (l[2] - r.x) * (t.clientX - this.#l.x) / this.#r.x, l[1] += (l[3] - r.y) * (t.clientY - this.#l.y) / this.#r.y, l[2] = r.x, l[3] = r.y, this.#d(l);
+    }
+  }
+}
+const ce = 200;
+function j(n) {
+  if (n.dataset.parentId)
+    return n.dataset.parentId;
+  if (n.classList.contains("parent-id"))
+    return n.parentElement?.id || "";
+  for (; n.tagName === "text"; ) {
+    const t = n.previousElementSibling;
+    if (t)
+      n = t;
+    else
+      break;
+  }
+  return n.id;
+}
+const ue = "svg-panel";
+let de = class ht {
+  static instance = null;
+  #t = null;
+  #e = null;
+  #s = null;
+  #i = !1;
+  #l = null;
+  #r = !1;
+  #o = null;
+  #a = null;
+  #n = 0;
+  #h;
+  #c;
+  #u = "";
+  constructor() {
+    ht.instance = this;
+  }
+  mount(t) {
+    this.#t = t, this.#l = new he(this.#t);
+    const { tippy: e } = wt(this.#t, {
+      content: "",
+      animation: "none",
+      duration: [0, 0],
+      showOnCreate: !1,
+      hideOnClick: !1,
+      trigger: "manual",
+      arrow: !0,
+      followCursor: !0
+    });
+    e.value && (this.#h = e, this.#c = this.#h.value.popper), this.#t.addEventListener("contextmenu", (s) => {
+      if (this.#e) {
+        const i = s.target, r = this.#e.objectById(j(i));
+        r && r === this.#o && this.#b(r), document.dispatchEvent(new CustomEvent("open-context-menu", {
+          detail: {
+            //                      state: this.#contextMenuActiveItems,
+            event: s
+          }
+        }));
+      }
+    }), document.addEventListener("context-menu-click", (s) => {
+      s.detail.id;
+    });
+  }
+  #d() {
+    this.#t && (this.#t.addEventListener("click", this.#E.bind(this)), this.#t.addEventListener("pointerover", this.#S.bind(this)), this.#t.addEventListener("pointerout", this.#I.bind(this)), this.#t.addEventListener("pointerdown", this.#T.bind(this)), this.#t.addEventListener("pointermove", this.#P.bind(this)), this.#t.addEventListener("pointerup", this.#L.bind(this)));
+  }
+  #f() {
+    this.#t && (this.#t.removeEventListener("click", this.#E.bind(this)), this.#t.removeEventListener("pointerover", this.#S.bind(this)), this.#t.removeEventListener("pointerout", this.#I.bind(this)), this.#t.removeEventListener("pointerdown", this.#T.bind(this)), this.#t.removeEventListener("pointermove", this.#P.bind(this)), this.#t.removeEventListener("pointerup", this.#L.bind(this)));
+  }
+  get celldlModel() {
+    return this.#e;
+  }
+  get windowSize() {
+    return this.#t ? [this.#t.clientWidth, this.#t.clientHeight] : [0, 0];
+  }
+  async viewDiagram(t) {
+    this.#e !== null ? this.closeDiagram(!0) : this.#d(), this.#e = t, this.#s = t.svgDiagram, this.#t && this.#t.appendChild(this.#s), await f.nextTick(), t.finishSetup(), this.#l?.enable(this.#s), this.#o = null, this.#r = !1, this.#a = null;
+  }
+  closeDiagram(t = !1) {
+    this.#e !== null && (t || this.#f(), this.#l?.disable(), this.#t && this.#t.removeChild(this.#s), this.#s = null, this.#e = null);
+  }
+  resetObjectStates() {
+    this.#C(), this.#w();
+  }
+  #m() {
+    this.#s?.style.removeProperty("cursor"), this.#t && this.#t.style.setProperty("cursor", "default");
+  }
+  #g() {
+    this.#h && this.#h.value.hide();
+  }
+  #v(t, e = "") {
+    if (t === "")
+      this.#g();
+    else if (this.#h && (this.#h.value.setContent(t), this.#h.value.show(), this.#c && (this.#u !== "" && (this.#c.classList.remove(this.#u), this.#u = ""), e !== ""))) {
+      const s = `tooltip-${e}`;
+      this.#c.classList.add(s), this.#u = s;
+    }
+  }
+  #p(t, e = void 0) {
+    this.#e && this.#e.viewerEvent(t, e);
+  }
+  #y(t, e) {
+    t.activate(e);
+  }
+  #x(t) {
+    t && this.#o !== t && (this.#y(t, !0), this.#o = t, t.tooltip && this.#v(t.tooltip, "info"), this.#p("active", t));
+  }
+  #w() {
+    this.#o && (this.#y(this.#o, !1), this.#o = null, this.#p("unactive"));
+  }
+  #b(t) {
+    this.#C(), t !== null && (t.select(!0), this.#a = t, this.#p("select", t));
+  }
+  #C() {
+    this.#a && (this.#p("unselect", this.#a), this.#a.select(!1), this.#a = null);
+  }
+  #E(t) {
+    const e = t.target;
+    if (this.#e === null || !this.#s?.contains(e) || // clickTolerance = 1px ? to set pointerMoved?
+    this.#r && Date.now() - this.#n > ce)
+      return;
+    const s = this.#e.objectById(j(e));
+    this.#N(t, e, s);
+  }
+  #N(t, e, s) {
+    let i = !1;
+    this.#a !== null && (i = s === this.#a, this.#C()), !i && s && s === this.#o && this.#b(s);
+  }
+  #D(t) {
+    return t === this.#s || t.id === ue || !this.#s?.contains(t);
+  }
+  #S(t) {
+    if (this.#e === null)
+      return;
+    const e = t.target, s = this.#e.objectById(j(e));
+    if (this.#D(e)) {
+      this.#g(), this.#o && s !== this.#o && this.#w();
+      return;
+    }
+    this.#o && s !== this.#o && this.#w(), s && this.#x(s);
+  }
+  #I(t) {
+    const e = t.target;
+    (e === this.#s || !this.#s?.contains(e)) && this.#o && this.#w();
+  }
+  #T(t) {
+    this.#r = !1, this.#n = Date.now(), this.#s?.style.removeProperty("cursor"), this.#t?.style.setProperty("cursor", "grab"), this.#l.pointerDown(t), this.#i = !0;
+  }
+  #P(t) {
+    if (this.#i) {
+      this.#r = this.#l.pointerMove(t) || this.#r;
+      return;
+    }
+    this.#r = !0;
+  }
+  #L(t) {
+    if (this.#e !== null && this.#i) {
+      this.#l.pointerUp(t), this.#i = !1, this.#m();
+      return;
+    }
+  }
+};
+const fe = { class: "flex flex-col h-full" }, me = { class: "viewer-pane relative flex grow" }, pe = /* @__PURE__ */ St({
+  __name: "CellDLViewer",
+  props: {
+    annotations: {},
+    celldlData: {},
+    options: {},
+    theme: {}
+  },
+  emits: ["error", "event"],
+  setup(n, { emit: t }) {
+    const e = n, s = f.getCurrentInstance();
+    if (s) {
+      const c = s.appContext.app;
+      c.config.globalProperties.$primevue || c.use(vt, {
+        theme: {
+          preset: xt,
+          options: {
+            darkModeSelector: ".celldl-dark-mode"
+          }
+        }
+      }), c.use(Ct);
+    }
+    G().setTheme(e.theme), f.watch(
+      () => e.theme,
+      () => {
+        G().setTheme(e.theme);
+      }
+    );
+    const i = f.ref(null);
+    let r;
+    const l = new de(), a = t;
+    return f.watch(
+      () => e.celldlData,
+      async () => {
+        if (e.celldlData === "")
+          r = new $(l), await r.viewModel();
+        else
+          try {
+            r = new $(l, e.celldlData, e.annotations, e.options), await r.viewModel();
+          } catch (c) {
+            a("error", `Invalid CellDL file... (${c})`);
+          }
+      }
+    ), f.onMounted(async () => {
+      i.value && (l.mount(i.value), r = new $(l), await r.viewModel());
+    }), bt(document, "viewer-event", (c) => {
+      a("event", c.detail);
+    }), (c, B) => {
+      const g = Et;
+      return It(), Tt("div", fe, [
+        F("main", me, [
+          F("div", {
+            id: "svg-content",
+            ref_key: "svgContent",
+            ref: i
+          }, [
+            Pt(g, {
+              ref: "context-menu",
+              model: c.contextMenuItems
+            }, null, 8, ["model"])
+          ], 512)
+        ])
+      ]);
+    };
+  }
+}), ge = (n, t) => {
+  const e = n.__vccOpts || n;
+  for (const [s, i] of t)
+    e[s] = i;
+  return e;
+}, ve = /* @__PURE__ */ ge(pe, [["__scopeId", "data-v-1526afda"]]);
+export {
+  ve as default
+};
+//# sourceMappingURL=CellDLViewer-Cyo8fJde.js.map