ontologyviewer 0.1.2 → 0.2.0

package/dist/ontologyviewer.esm.mjs

@@ -46094,6 +46094,72 @@ function isKnownVocabularyIri(iri) {
   return KNOWN_VOCABULARY_NAMESPACES.some((ns) => iri.startsWith(ns));
 }
 
+// src/rdf/compactTriples.ts
+function compactTriples(graph) {
+  const hasOutgoing = /* @__PURE__ */ new Set();
+  const hasIncoming = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    hasOutgoing.add(edge.source);
+    hasIncoming.add(edge.target);
+  }
+  const byId = new Map(graph.nodes.map((node) => [node.id, node]));
+  const foldedIds = /* @__PURE__ */ new Set();
+  for (const node of graph.nodes) {
+    if (hasOutgoing.has(node.id) || !hasIncoming.has(node.id)) {
+      continue;
+    }
+    const isLeafAnnotation = node.kind === "literal" || !node.isBlankNode && isKnownVocabularyIri(node.id);
+    if (isLeafAnnotation) {
+      foldedIds.add(node.id);
+    }
+  }
+  if (foldedIds.size === 0) {
+    return {
+      nodes: graph.nodes,
+      edges: graph.edges,
+      foldedFacts: /* @__PURE__ */ new Map(),
+      removedNodeCount: 0,
+      removedEdgeCount: 0
+    };
+  }
+  const foldedFacts = /* @__PURE__ */ new Map();
+  const edges3 = [];
+  for (const edge of graph.edges) {
+    if (!foldedIds.has(edge.target)) {
+      edges3.push(edge);
+      continue;
+    }
+    if (edge.predicate === RDFS_LABEL || edge.predicate === RDFS_COMMENT) {
+      continue;
+    }
+    const fact = `${factPredicateLabel(edge.predicateLabel)}: ${factObjectLabel(byId.get(edge.target))}`;
+    const existing = foldedFacts.get(edge.source);
+    if (!existing) {
+      foldedFacts.set(edge.source, [fact]);
+    } else if (!existing.includes(fact)) {
+      existing.push(fact);
+    }
+  }
+  const nodes3 = graph.nodes.filter((node) => !foldedIds.has(node.id));
+  return {
+    nodes: nodes3,
+    edges: edges3,
+    foldedFacts,
+    removedNodeCount: graph.nodes.length - nodes3.length,
+    removedEdgeCount: graph.edges.length - edges3.length
+  };
+}
+function factPredicateLabel(predicateLabel) {
+  const colon = predicateLabel.indexOf(":");
+  return colon >= 0 ? predicateLabel.slice(colon + 1) : predicateLabel;
+}
+function factObjectLabel(node) {
+  if (!node) {
+    return "";
+  }
+  return node.kind === "literal" ? node.literalValue ?? node.label : node.label;
+}
+
 // src/rdf/graphModel.ts
 function buildGraphModel(quads) {
   const nodes3 = /* @__PURE__ */ new Map();
@@ -46669,6 +46735,9 @@ function relativeLuminance(color) {
 var EN = {
   schemaView: "Schema",
   triplesView: "Triples",
+  compactTriples: "Compact",
+  compactTriplesHint: "Fold labels, comments, and standard vocabulary terms into the nodes that reference them.",
+  compactTriplesActiveHint: "Compact view is on. Click to show labels, comments, and vocabulary terms as separate nodes.",
   searchPlaceholder: "Search classes, relations, properties\u2026",
   noResults: "No results",
   properties: "properties",
@@ -46699,6 +46768,9 @@ var EN = {
 var JA = {
   schemaView: "\u30B9\u30AD\u30FC\u30DE",
   triplesView: "\u30C8\u30EA\u30D7\u30EB",
+  compactTriples: "\u7C21\u7D04",
+  compactTriplesHint: "\u30E9\u30D9\u30EB\u30FB\u30B3\u30E1\u30F3\u30C8\u30FB\u6A19\u6E96\u8A9E\u5F59\u306E\u7528\u8A9E\u3092\u3001\u305D\u308C\u3092\u53C2\u7167\u3057\u3066\u3044\u308B\u30CE\u30FC\u30C9\u306B\u7573\u307F\u8FBC\u307F\u307E\u3059\u3002",
+  compactTriplesActiveHint: "\u7C21\u7D04\u8868\u793A\u304C\u6709\u52B9\u3067\u3059\u3002\u30AF\u30EA\u30C3\u30AF\u3059\u308B\u3068\u3001\u30E9\u30D9\u30EB\u30FB\u30B3\u30E1\u30F3\u30C8\u30FB\u8A9E\u5F59\u306E\u7528\u8A9E\u3092\u500B\u5225\u306E\u30CE\u30FC\u30C9\u3068\u3057\u3066\u8868\u793A\u3057\u307E\u3059\u3002",
   searchPlaceholder: "\u30AF\u30E9\u30B9\u30FB\u95A2\u4FC2\u30FB\u30D7\u30ED\u30D1\u30C6\u30A3\u3092\u691C\u7D22\u2026",
   noResults: "\u7D50\u679C\u306A\u3057",
   properties: "\u30D7\u30ED\u30D1\u30C6\u30A3",
@@ -46894,6 +46966,7 @@ function createViewer(sourceElement, initialTurtle, options2, onDestroy) {
   let graph = { nodes: [], edges: [] };
   let currentView = options2.defaultView ?? "schema";
   let currentLayout = options2.layout ?? "fcose";
+  let compactTriplesEnabled = options2.compactTriples ?? true;
   let dark = isDarkTheme(options2.theme ?? "auto");
   let cy;
   let destroyed2 = false;
@@ -46999,7 +47072,7 @@ function createViewer(sourceElement, initialTurtle, options2, onDestroy) {
     destroyCy();
     focusedId = void 0;
     const view = effectiveView();
-    const elements = view === "schema" ? schemaElements(schema) : graphElements(graph);
+    const elements = view === "schema" ? schemaElements(schema) : graphElements(graph, compactTriplesEnabled);
     cy = cytoscape2({
       container: dom.graph,
       elements,
@@ -47143,6 +47216,9 @@ function createViewer(sourceElement, initialTurtle, options2, onDestroy) {
     dom.triplesButton.classList.toggle("active", currentView === "triples");
     dom.schemaButton.setAttribute("aria-pressed", String(currentView === "schema"));
     dom.triplesButton.setAttribute("aria-pressed", String(currentView === "triples"));
+    dom.compactToggle.hidden = effectiveView() !== "triples";
+    dom.compactCheckbox.checked = compactTriplesEnabled;
+    dom.compactToggle.title = compactTriplesEnabled ? messages.compactTriplesActiveHint : messages.compactTriplesHint;
   }
   function updateStats() {
     dom.stats.textContent = `${messages.entities}: ${schema.entities.length} \xB7 ${messages.relations}: ${schema.relations.length} \xB7 ${messages.triples}: ${graph.edges.length}`;
@@ -47261,6 +47337,12 @@ function createViewer(sourceElement, initialTurtle, options2, onDestroy) {
     clearInspector();
     renderGraph();
   }, { signal });
+  dom.compactCheckbox.addEventListener("change", () => {
+    compactTriplesEnabled = dom.compactCheckbox.checked;
+    updateViewButtons();
+    clearInspector();
+    renderGraph();
+  }, { signal });
   dom.search.addEventListener("input", performSearch, { signal });
   dom.search.addEventListener("keydown", (event3) => {
     if (event3.key !== "Escape") return;
@@ -47311,6 +47393,13 @@ function createDom(doc, root2, messages, options2) {
   const schemaButton = button(doc, messages.schemaView, "ov-btn-schema");
   const triplesButton = button(doc, messages.triplesView, "ov-btn-triples");
   viewToggle.append(schemaButton, triplesButton);
+  const compactToggle = element3(doc, "label", "ov-compact-toggle");
+  const compactCheckbox = doc.createElement("input");
+  compactCheckbox.type = "checkbox";
+  compactCheckbox.className = "ov-compact-checkbox";
+  const compactText = element3(doc, "span", "ov-compact-text");
+  compactText.textContent = messages.compactTriples;
+  compactToggle.append(compactCheckbox, compactText);
   const search = doc.createElement("input");
   search.type = "search";
   search.className = "ov-search";
@@ -47336,7 +47425,7 @@ function createDom(doc, root2, messages, options2) {
     button(doc, messages.layout, "ov-btn-layout", "\u21BB"),
     button(doc, messages.exportPng, "ov-btn-export", "\u21E9")
   );
-  toolbar.append(viewToggle, search, layout4, controls);
+  toolbar.append(viewToggle, compactToggle, search, layout4, controls);
   const searchResults = element3(doc, "div", "ov-search-dropdown");
   searchResults.setAttribute("role", "listbox");
   searchResults.hidden = true;
@@ -47368,7 +47457,7 @@ function createDom(doc, root2, messages, options2) {
   footer.append(stats, legend);
   root2.append(toolbar, searchResults, body, footer);
   const zoomLabelElement = controls.querySelector(".ov-btn-reset-zoom") ?? controls;
-  return { toolbar, schemaButton, triplesButton, search, searchResults, layout: layout4, zoomLabel: zoomLabelElement, stage, graph, message, inspector, stats, legend };
+  return { toolbar, schemaButton, triplesButton, compactToggle, compactCheckbox, search, searchResults, layout: layout4, zoomLabel: zoomLabelElement, stage, graph, message, inspector, stats, legend };
 }
 function schemaElements(schema) {
   const nodes3 = schema.entities.map((entity) => {
@@ -47406,12 +47495,28 @@ function schemaElements(schema) {
   }
   return [...nodes3, ...edges3];
 }
-function graphElements(graph) {
+function graphElements(graph, compact) {
+  const folded = compact ? compactTriples(graph) : void 0;
+  const nodes3 = folded?.nodes ?? graph.nodes;
+  const edges3 = folded?.edges ?? graph.edges;
   return [
-    ...graph.nodes.map((node) => ({ data: { id: node.id, label: node.label, kind: node.kind } })),
-    ...graph.edges.map((edge) => ({ data: { id: edge.id, source: edge.source, target: edge.target, edgeLabel: edge.predicateLabel } }))
+    ...nodes3.map((node) => ({
+      data: {
+        id: node.id,
+        label: node.label,
+        // `label` stays the bare name so search keeps matching it; the folded
+        // form is a separate field used only by the stylesheet.
+        tripleLabel: tripleLabelFor(node.label, folded?.foldedFacts.get(node.id)),
+        kind: node.kind
+      }
+    })),
+    ...edges3.map((edge) => ({ data: { id: edge.id, source: edge.source, target: edge.target, edgeLabel: edge.predicateLabel } }))
   ];
 }
+function tripleLabelFor(label, facts) {
+  return facts && facts.length > 0 ? `${label}
+${facts.join("\n")}` : label;
+}
 function schemaStyles(dark) {
   const canvas = dark ? "#1e1e1e" : "#ffffff";
   return [
@@ -47443,13 +47548,18 @@ function schemaStyles(dark) {
 function triplesStyles(dark) {
   return [
     { selector: "node", style: {
-      label: "data(label)",
+      // `tripleLabel` carries the folded statements as extra lines, so the box
+      // must wrap and size to its content — with the previous `ellipsis` wrap
+      // and fixed 154x54 box they were silently clipped away.
+      label: "data(tripleLabel)",
       "text-valign": "center",
       "text-halign": "center",
-      "text-wrap": "ellipsis",
-      "text-max-width": "130px",
-      width: 154,
-      height: 54,
+      "text-wrap": "wrap",
+      "text-max-width": "150px",
+      width: "label",
+      height: "label",
+      padding: "10px",
+      "min-width": "120px",
       shape: "round-rectangle",
       "font-size": 11,
       "border-width": 1.5,
@@ -47460,8 +47570,6 @@ function triplesStyles(dark) {
     { selector: "node[kind = 'class']", style: { "background-color": dark ? "#18324b" : "#dbeafe", "border-color": "#3b82f6" } },
     { selector: "node[kind = 'property']", style: { "background-color": dark ? "#3b1f3b" : "#fce7f3", "border-color": "#a855f7" } },
     { selector: "node[kind = 'literal']", style: {
-      width: 138,
-      height: 44,
       "font-size": 10,
       "border-style": "dashed",
       "background-color": dark ? "#38331f" : "#fef9c3",
@@ -47676,6 +47784,13 @@ function matchingElements(root2, selector) {
   matches33.push(...root2.querySelectorAll(selector));
   return matches33;
 }
+function parseBoolean(value) {
+  if (value === void 0) return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "false" || normalized === "0" || normalized === "off") return false;
+  if (normalized === "" || normalized === "true" || normalized === "1" || normalized === "on") return true;
+  return void 0;
+}
 function resolveOptions(element4, options2) {
   const data4 = element4.dataset;
   const optionBaseIri = options2.baseIri ?? options2.baseIRI;
@@ -47685,6 +47800,7 @@ function resolveOptions(element4, options2) {
     locale: validLocale(options2.locale) ?? validLocale(data4.locale) ?? "auto",
     layout: validLayout(options2.layout) ?? validLayout(data4.layout) ?? "fcose",
     defaultView: validView(options2.defaultView) ?? validView(data4.defaultView) ?? "schema",
+    compactTriples: options2.compactTriples ?? parseBoolean(data4.compactTriples) ?? true,
     baseIri: safeBaseIri(optionBaseIri ?? data4.baseIri, element4.ownerDocument.baseURI),
     storageKey: safeStorageKey(options2.storageKey ?? data4.storageKey),
     injectStyles: options2.injectStyles,
@@ -47698,7 +47814,7 @@ function injectDefaultStyles(doc) {
     styledDocuments.add(doc);
     return;
   }
-  const css = true ? '/* ontologyviewer.css \u2014 all selectors are scoped to the generated root. */\n.ontologyviewer-root {\n  --ov-bg: #fff;\n  --ov-fg: #1f2937;\n  --ov-muted: #64748b;\n  --ov-border: #d7dde5;\n  --ov-toolbar-bg: #f8fafc;\n  --ov-input-bg: #fff;\n  --ov-hover: #eef2f7;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 600px;\n  min-height: 320px;\n  overflow: hidden;\n  border: 1px solid var(--ov-border);\n  border-radius: 10px;\n  color: var(--ov-fg);\n  background: var(--ov-bg);\n  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  container-type: inline-size;\n  box-sizing: border-box;\n}\n.ontologyviewer-root *, .ontologyviewer-root *::before, .ontologyviewer-root *::after { box-sizing: border-box; }\n.ontologyviewer-root [hidden] { display: none !important; }\n.ontologyviewer-root.ov-dark {\n  --ov-bg: #1e1e1e;\n  --ov-fg: #d4d4d4;\n  --ov-muted: #a8a8a8;\n  --ov-border: #454545;\n  --ov-toolbar-bg: #252526;\n  --ov-input-bg: #313131;\n  --ov-hover: #2a2d2e;\n}\n.ontologyviewer-root button,\n.ontologyviewer-root input,\n.ontologyviewer-root select { font: inherit; }\n.ontologyviewer-root button:focus-visible,\n.ontologyviewer-root input:focus-visible,\n.ontologyviewer-root select:focus-visible,\n.ontologyviewer-root summary:focus-visible { outline: 2px solid #1685d1; outline-offset: 2px; }\n.ontologyviewer-root .ov-toolbar {\n  z-index: 5;\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--ov-border);\n  background: var(--ov-toolbar-bg);\n}\n.ontologyviewer-root .ov-view-toggle,\n.ontologyviewer-root .ov-controls { display: flex; align-items: center; gap: 4px; }\n.ontologyviewer-root .ov-view-toggle button,\n.ontologyviewer-root .ov-controls button,\n.ontologyviewer-root .ov-layout-select,\n.ontologyviewer-root .ov-inspector-close {\n  min-height: 32px;\n  padding: 4px 9px;\n  border: 1px solid var(--ov-border);\n  border-radius: 6px;\n  color: var(--ov-fg);\n  background: var(--ov-bg);\n  cursor: pointer;\n}\n.ontologyviewer-root button:hover,\n.ontologyviewer-root .ov-layout-select:hover { background: var(--ov-hover); }\n.ontologyviewer-root .ov-view-toggle button.active {\n  border-color: #0878bd;\n  color: #fff;\n  background: #0878bd;\n}\n.ontologyviewer-root .ov-search {\n  flex: 1 1 250px;\n  min-width: 130px;\n  height: 34px;\n  padding: 5px 9px;\n  border: 1px solid var(--ov-border);\n  border-radius: 7px;\n  color: var(--ov-fg);\n  background: var(--ov-input-bg);\n}\n.ontologyviewer-root .ov-layout-select { height: 34px; }\n.ontologyviewer-root .ov-body { display: flex; flex: 1 1 auto; min-height: 0; }\n.ontologyviewer-root .ov-stage { position: relative; flex: 1 1 auto; min-width: 0; min-height: 260px; }\n/* Cytoscape forces its container to position: relative; explicit dimensions prevent a zero-height graph. */\n.ontologyviewer-root .ov-graph { position: absolute; inset: 0; width: 100%; height: 100%; }\n.ontologyviewer-root .ov-message {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n  text-align: center;\n}\n.ontologyviewer-root .ov-error { color: #b42318; background: #fff5f4; }\n.ontologyviewer-root.ov-dark .ov-error { color: #ff8a80; background: #2e1b1a; }\n.ontologyviewer-root .ov-inspector {\n  position: relative;\n  flex: 0 0 300px;\n  width: 300px;\n  overflow: auto;\n  padding: 14px;\n  border-left: 1px solid var(--ov-border);\n  background: var(--ov-bg);\n}\n.ontologyviewer-root .ov-inspector-close {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  display: none;\n  min-width: 30px;\n  padding: 2px 7px;\n  font-size: 20px;\n}\n.ontologyviewer-root .ov-inspector h3 { margin: 0 30px 8px 0; font-size: 16px; }\n.ontologyviewer-root .ov-inspector h4 { margin: 14px 0 5px; font-size: 13px; }\n.ontologyviewer-root .ov-inspector p { overflow-wrap: anywhere; }\n.ontologyviewer-root .ov-inspector dl {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 4px 10px;\n  margin: 10px 0;\n}\n.ontologyviewer-root .ov-inspector dt { font-weight: 600; }\n.ontologyviewer-root .ov-inspector dd { margin: 0; overflow-wrap: anywhere; }\n.ontologyviewer-root .ov-inspector ul { margin: 5px 0; padding-left: 20px; }\n.ontologyviewer-root .ov-inspector-empty { color: var(--ov-muted); text-align: center; }\n.ontologyviewer-root .ov-inspector-desc { color: var(--ov-muted); }\n.ontologyviewer-root .ov-prop-list { list-style: none; padding: 0 !important; }\n.ontologyviewer-root .ov-prop-list li { padding: 3px 0; border-bottom: 1px solid var(--ov-border); }\n.ontologyviewer-root .ov-footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 5px 10px;\n  border-top: 1px solid var(--ov-border);\n  color: var(--ov-muted);\n  font-size: 12px;\n}\n.ontologyviewer-root .ov-legend summary { cursor: pointer; }\n.ontologyviewer-root .ov-legend-content { display: flex; gap: 12px; padding-top: 5px; }\n.ontologyviewer-root .ov-legend-item::before {\n  display: inline-block;\n  width: 18px;\n  margin-right: 5px;\n  border-top: 3px solid #64748b;\n  content: "";\n  vertical-align: middle;\n}\n.ontologyviewer-root .ov-subclass::before { border-color: #b180d7; }\n.ontologyviewer-root .ov-broader::before { border-color: #16875c; }\n.ontologyviewer-root .ov-inferred::before { border-top-style: dashed; }\n.ontologyviewer-root .ov-search-dropdown {\n  position: absolute;\n  z-index: 20;\n  top: 51px;\n  left: 120px;\n  width: min(520px, calc(100% - 240px));\n  max-height: 260px;\n  overflow: auto;\n  padding: 5px;\n  border: 1px solid var(--ov-border);\n  border-radius: 8px;\n  background: var(--ov-bg);\n  box-shadow: 0 10px 30px rgb(0 0 0 / 20%);\n}\n.ontologyviewer-root .ov-search-item {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  padding: 8px;\n  border: 0;\n  border-radius: 5px;\n  color: var(--ov-fg);\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.ontologyviewer-root .ov-search-meta { color: var(--ov-muted); font-size: 11px; }\n.ontologyviewer-root .ov-search-empty { margin: 0; padding: 10px; color: var(--ov-muted); }\n\n@container (max-width: 759px) {\n  .ontologyviewer-root .ov-toolbar { flex-wrap: wrap; }\n  .ontologyviewer-root .ov-search { order: 3; flex-basis: 100%; }\n  .ontologyviewer-root .ov-body { display: block; position: relative; }\n  .ontologyviewer-root .ov-stage { height: 100%; }\n  .ontologyviewer-root .ov-inspector {\n    position: absolute;\n    z-index: 10;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: auto;\n    max-height: 52%;\n    border-top: 1px solid var(--ov-border);\n    border-left: 0;\n    box-shadow: 0 -8px 24px rgb(0 0 0 / 22%);\n  }\n  .ontologyviewer-root .ov-inspector-close { display: block; }\n  .ontologyviewer-root .ov-search-dropdown { top: 92px; left: 10px; width: calc(100% - 20px); }\n  .ontologyviewer-root .ov-footer { align-items: flex-start; }\n}\n\n/* Cytoscape normally injects this fixed rule as an inline style. Keeping it in\n   the external bundle lets strict-CSP users avoid that injection. */\n.ontologyviewer-root .__________cytoscape_container { position: relative; }\n' : "";
+  const css = true ? '/* ontologyviewer.css \u2014 all selectors are scoped to the generated root. */\n.ontologyviewer-root {\n  --ov-bg: #fff;\n  --ov-fg: #1f2937;\n  --ov-muted: #64748b;\n  --ov-border: #d7dde5;\n  --ov-toolbar-bg: #f8fafc;\n  --ov-input-bg: #fff;\n  --ov-hover: #eef2f7;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 600px;\n  min-height: 320px;\n  overflow: hidden;\n  border: 1px solid var(--ov-border);\n  border-radius: 10px;\n  color: var(--ov-fg);\n  background: var(--ov-bg);\n  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  container-type: inline-size;\n  box-sizing: border-box;\n}\n.ontologyviewer-root *, .ontologyviewer-root *::before, .ontologyviewer-root *::after { box-sizing: border-box; }\n.ontologyviewer-root [hidden] { display: none !important; }\n.ontologyviewer-root.ov-dark {\n  --ov-bg: #1e1e1e;\n  --ov-fg: #d4d4d4;\n  --ov-muted: #a8a8a8;\n  --ov-border: #454545;\n  --ov-toolbar-bg: #252526;\n  --ov-input-bg: #313131;\n  --ov-hover: #2a2d2e;\n}\n.ontologyviewer-root button,\n.ontologyviewer-root input,\n.ontologyviewer-root select { font: inherit; }\n.ontologyviewer-root button:focus-visible,\n.ontologyviewer-root input:focus-visible,\n.ontologyviewer-root select:focus-visible,\n.ontologyviewer-root summary:focus-visible { outline: 2px solid #1685d1; outline-offset: 2px; }\n.ontologyviewer-root .ov-toolbar {\n  z-index: 5;\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--ov-border);\n  background: var(--ov-toolbar-bg);\n}\n.ontologyviewer-root .ov-view-toggle,\n.ontologyviewer-root .ov-controls { display: flex; align-items: center; gap: 4px; }\n.ontologyviewer-root .ov-view-toggle button,\n.ontologyviewer-root .ov-controls button,\n.ontologyviewer-root .ov-layout-select,\n.ontologyviewer-root .ov-inspector-close {\n  min-height: 32px;\n  padding: 4px 9px;\n  border: 1px solid var(--ov-border);\n  border-radius: 6px;\n  color: var(--ov-fg);\n  background: var(--ov-bg);\n  cursor: pointer;\n}\n.ontologyviewer-root button:hover,\n.ontologyviewer-root .ov-layout-select:hover { background: var(--ov-hover); }\n.ontologyviewer-root .ov-view-toggle button.active {\n  border-color: #0878bd;\n  color: #fff;\n  background: #0878bd;\n}\n/* Compaction toggle. A checkbox rather than a pressed button, because\n   schema/triples is an exclusive selection while this is an independent on/off\n   \u2014 and a checkbox shows its state without depending on colour. Styled as a\n   toolbar chip so it sits at the same height as the buttons beside it. */\n.ontologyviewer-root .ov-compact-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 4px 10px 4px 8px;\n  border: 1px solid var(--ov-border);\n  border-radius: 6px;\n  color: var(--ov-fg);\n  background: var(--ov-bg);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n.ontologyviewer-root .ov-compact-toggle:hover { background: var(--ov-hover); }\n.ontologyviewer-root .ov-compact-toggle[hidden] { display: none; }\n.ontologyviewer-root .ov-compact-checkbox {\n  width: 14px;\n  height: 14px;\n  margin: 0;\n  accent-color: #0878bd;\n  cursor: pointer;\n}\n/* Keyboard focus lands on the input, so raise the ring to the whole chip.\n   Scoped to :focus-visible so a mouse click does not leave a blue ring behind\n   that reads as "still enabled" on an unchecked control. */\n.ontologyviewer-root .ov-compact-toggle:has(.ov-compact-checkbox:focus-visible) {\n  outline: 2px solid #0878bd;\n  outline-offset: 1px;\n}\n/* Checked state also shifts the chip itself, so the setting reads at a glance\n   from across the toolbar rather than only from the 14px box. */\n.ontologyviewer-root .ov-compact-toggle:has(.ov-compact-checkbox:checked) {\n  border-color: #0878bd;\n  color: #0878bd;\n  font-weight: 600;\n}\n.ontologyviewer-root.ov-dark .ov-compact-toggle:has(.ov-compact-checkbox:checked) {\n  border-color: #4aa3dd;\n  color: #7dc4f0;\n}\n.ontologyviewer-root .ov-search {\n  flex: 1 1 250px;\n  min-width: 130px;\n  height: 34px;\n  padding: 5px 9px;\n  border: 1px solid var(--ov-border);\n  border-radius: 7px;\n  color: var(--ov-fg);\n  background: var(--ov-input-bg);\n}\n.ontologyviewer-root .ov-layout-select { height: 34px; }\n.ontologyviewer-root .ov-body { display: flex; flex: 1 1 auto; min-height: 0; }\n.ontologyviewer-root .ov-stage { position: relative; flex: 1 1 auto; min-width: 0; min-height: 260px; }\n/* Cytoscape forces its container to position: relative; explicit dimensions prevent a zero-height graph. */\n.ontologyviewer-root .ov-graph { position: absolute; inset: 0; width: 100%; height: 100%; }\n.ontologyviewer-root .ov-message {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n  text-align: center;\n}\n.ontologyviewer-root .ov-error { color: #b42318; background: #fff5f4; }\n.ontologyviewer-root.ov-dark .ov-error { color: #ff8a80; background: #2e1b1a; }\n.ontologyviewer-root .ov-inspector {\n  position: relative;\n  flex: 0 0 300px;\n  width: 300px;\n  overflow: auto;\n  padding: 14px;\n  border-left: 1px solid var(--ov-border);\n  background: var(--ov-bg);\n}\n.ontologyviewer-root .ov-inspector-close {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  display: none;\n  min-width: 30px;\n  padding: 2px 7px;\n  font-size: 20px;\n}\n.ontologyviewer-root .ov-inspector h3 { margin: 0 30px 8px 0; font-size: 16px; }\n.ontologyviewer-root .ov-inspector h4 { margin: 14px 0 5px; font-size: 13px; }\n.ontologyviewer-root .ov-inspector p { overflow-wrap: anywhere; }\n.ontologyviewer-root .ov-inspector dl {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 4px 10px;\n  margin: 10px 0;\n}\n.ontologyviewer-root .ov-inspector dt { font-weight: 600; }\n.ontologyviewer-root .ov-inspector dd { margin: 0; overflow-wrap: anywhere; }\n.ontologyviewer-root .ov-inspector ul { margin: 5px 0; padding-left: 20px; }\n.ontologyviewer-root .ov-inspector-empty { color: var(--ov-muted); text-align: center; }\n.ontologyviewer-root .ov-inspector-desc { color: var(--ov-muted); }\n.ontologyviewer-root .ov-prop-list { list-style: none; padding: 0 !important; }\n.ontologyviewer-root .ov-prop-list li { padding: 3px 0; border-bottom: 1px solid var(--ov-border); }\n.ontologyviewer-root .ov-footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 5px 10px;\n  border-top: 1px solid var(--ov-border);\n  color: var(--ov-muted);\n  font-size: 12px;\n}\n.ontologyviewer-root .ov-legend summary { cursor: pointer; }\n.ontologyviewer-root .ov-legend-content { display: flex; gap: 12px; padding-top: 5px; }\n.ontologyviewer-root .ov-legend-item::before {\n  display: inline-block;\n  width: 18px;\n  margin-right: 5px;\n  border-top: 3px solid #64748b;\n  content: "";\n  vertical-align: middle;\n}\n.ontologyviewer-root .ov-subclass::before { border-color: #b180d7; }\n.ontologyviewer-root .ov-broader::before { border-color: #16875c; }\n.ontologyviewer-root .ov-inferred::before { border-top-style: dashed; }\n.ontologyviewer-root .ov-search-dropdown {\n  position: absolute;\n  z-index: 20;\n  top: 51px;\n  left: 120px;\n  width: min(520px, calc(100% - 240px));\n  max-height: 260px;\n  overflow: auto;\n  padding: 5px;\n  border: 1px solid var(--ov-border);\n  border-radius: 8px;\n  background: var(--ov-bg);\n  box-shadow: 0 10px 30px rgb(0 0 0 / 20%);\n}\n.ontologyviewer-root .ov-search-item {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  padding: 8px;\n  border: 0;\n  border-radius: 5px;\n  color: var(--ov-fg);\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.ontologyviewer-root .ov-search-meta { color: var(--ov-muted); font-size: 11px; }\n.ontologyviewer-root .ov-search-empty { margin: 0; padding: 10px; color: var(--ov-muted); }\n\n@container (max-width: 759px) {\n  .ontologyviewer-root .ov-toolbar { flex-wrap: wrap; }\n  .ontologyviewer-root .ov-search { order: 3; flex-basis: 100%; }\n  .ontologyviewer-root .ov-body { display: block; position: relative; }\n  .ontologyviewer-root .ov-stage { height: 100%; }\n  .ontologyviewer-root .ov-inspector {\n    position: absolute;\n    z-index: 10;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: auto;\n    max-height: 52%;\n    border-top: 1px solid var(--ov-border);\n    border-left: 0;\n    box-shadow: 0 -8px 24px rgb(0 0 0 / 22%);\n  }\n  .ontologyviewer-root .ov-inspector-close { display: block; }\n  .ontologyviewer-root .ov-search-dropdown { top: 92px; left: 10px; width: calc(100% - 20px); }\n  .ontologyviewer-root .ov-footer { align-items: flex-start; }\n}\n\n/* Cytoscape normally injects this fixed rule as an inline style. Keeping it in\n   the external bundle lets strict-CSP users avoid that injection. */\n.ontologyviewer-root .__________cytoscape_container { position: relative; }\n' : "";
   if (!css) return;
   const style3 = doc.createElement("style");
   style3.setAttribute("data-ontologyviewer-styles", "");