@omnitron-dev/prism 0.3.0 → 0.3.1

package/dist/components/knowledge-graph/index.js

@@ -0,0 +1,795 @@
+import { DocSidebar } from '../../chunk-YHE7HXSG.js';
+import { PanelLayout } from '../../chunk-PFT2BNYO.js';
+import '../../chunk-XIXSSI3B.js';
+import '../../chunk-PXXPLHIY.js';
+import '../../chunk-HOXFSQUV.js';
+import { ZoomInIcon, ZoomOutIcon, FitViewIcon } from '../../chunk-PGHEP4JD.js';
+import '../../chunk-BJE2AKD4.js';
+import { createContext, memo, useState, useMemo, useRef, useEffect, useCallback, useSyncExternalStore, useLayoutEffect, useContext } from 'react';
+import { Handle, Position, MarkerType, applyNodeChanges, ReactFlow, Background, getSmoothStepPath, BaseEdge, useNodes, useNodesInitialized, useReactFlow, useStore, EdgeLabelRenderer, Controls, ControlButton } from '@xyflow/react';
+import Box2 from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import { useTheme } from '@mui/material/styles';
+import '@xyflow/react/dist/style.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/knowledge-graph/model.ts
+function validateKnowledgeGraph(data) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const entity of data.entities) {
+    if (!entity.id || !entity.kind || !entity.label || ids.has(entity.id)) throw Error("invalid_entity");
+    ids.add(entity.id);
+  }
+  const relations = /* @__PURE__ */ new Set();
+  for (const relation of data.relations) {
+    if (!relation.id || !relation.kind || !relation.label || relations.has(relation.id) || !relation.inputs.length || !relation.outputs.length)
+      throw Error("invalid_relation");
+    relations.add(relation.id);
+    for (const port of [...relation.inputs, ...relation.outputs])
+      if (!ids.has(port.entity) || !port.role) throw Error("dangling_port");
+  }
+}
+function projectKnowledgeGraph(data, selection, budget = 300) {
+  if (!Number.isSafeInteger(budget) || budget < 1) throw Error("invalid_graph_budget");
+  const total = data.entities.length + data.relations.length;
+  if (!selection && total <= budget)
+    return { entities: [...data.entities], relations: [...data.relations], total, omittedRelations: 0, limited: false };
+  if (!selection) return { entities: [], relations: [], total, omittedRelations: data.relations.length, limited: true };
+  const selectedEntities = /* @__PURE__ */ new Set(), selectedRelations = [];
+  if (selection.type === "entity" && data.entities.some((e) => e.id === selection.id))
+    selectedEntities.add(selection.id);
+  const candidates = selection.type === "relation" ? data.relations.filter((r) => r.id === selection.id) : data.relations.filter((r) => [...r.inputs, ...r.outputs].some((p) => p.entity === selection.id));
+  let omittedRelations = 0;
+  for (const relation of candidates) {
+    const endpoints = new Set([...relation.inputs, ...relation.outputs].map((p) => p.entity));
+    const additional = [...endpoints].filter((id) => !selectedEntities.has(id)).length + 1;
+    if (selectedEntities.size + selectedRelations.length + additional > budget) {
+      omittedRelations++;
+      continue;
+    }
+    for (const id of endpoints) selectedEntities.add(id);
+    selectedRelations.push(relation);
+  }
+  return {
+    entities: data.entities.filter((e) => selectedEntities.has(e.id)),
+    relations: selectedRelations,
+    total,
+    omittedRelations,
+    limited: total !== selectedEntities.size + selectedRelations.length
+  };
+}
+var entityNodeId = (id) => JSON.stringify(["entity", id]);
+var relationNodeId = (id) => JSON.stringify(["relation", id]);
+function incidenceGraph(projection) {
+  const nodes = [
+    ...projection.entities.map((e) => ({
+      id: entityNodeId(e.id),
+      selection: { type: "entity", id: e.id },
+      label: e.label,
+      kind: e.kind,
+      description: e.description,
+      badges: e.badges
+    })),
+    ...projection.relations.map((r) => ({
+      id: relationNodeId(r.id),
+      selection: { type: "relation", id: r.id },
+      label: r.label,
+      kind: r.kind,
+      description: r.description,
+      badges: r.badges,
+      inputs: r.inputs.length,
+      outputs: r.outputs.length
+    }))
+  ];
+  const edges = projection.relations.flatMap(
+    (r) => ["inputs", "outputs"].flatMap(
+      (side) => r[side].map((port, index) => ({
+        id: JSON.stringify([r.id, side, index]),
+        source: side === "inputs" ? entityNodeId(port.entity) : relationNodeId(r.id),
+        target: side === "inputs" ? relationNodeId(r.id) : entityNodeId(port.entity),
+        label: port.role,
+        ...side === "inputs" ? { targetHandle: `inputs:${index}` } : { sourceHandle: `outputs:${index}` },
+        relationId: r.id,
+        side,
+        index
+      }))
+    )
+  );
+  return { nodes, edges };
+}
+
+// src/components/knowledge-graph/label-layout.ts
+function nearestFree(origin, intervals) {
+  intervals.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  const union = [];
+  for (const interval of intervals) {
+    const last = union[union.length - 1];
+    if (last && interval[0] < last[1]) last[1] = Math.max(last[1], interval[1]);
+    else union.push([...interval]);
+  }
+  const hit = union.find(([lo, hi]) => lo < origin && origin < hi);
+  return hit ? origin - hit[0] <= hit[1] - origin ? hit[0] : hit[1] : origin;
+}
+function placeEdgeLabels(labels, nodes, gap = 8) {
+  if (!Number.isFinite(gap) || gap < 0) throw Error("invalid_label_gap");
+  const occupied = [...nodes];
+  for (const rect of [...nodes, ...labels]) {
+    if (![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) || rect.width <= 0 || rect.height <= 0)
+      throw Error("invalid_label_geometry");
+  }
+  if (new Set(labels.map((l) => l.id)).size !== labels.length) throw Error("duplicate_label");
+  const ordered = [...labels].sort((a, b) => a.y - b.y || a.x - b.x || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+  return ordered.map((label) => {
+    const x = label.x - label.width / 2, y = label.y - label.height / 2;
+    const vertical = [], horizontal = [];
+    for (const r of occupied) {
+      if (x < r.x + r.width + gap && x + label.width > r.x - gap)
+        vertical.push([r.y - gap - label.height, r.y + r.height + gap]);
+      if (y < r.y + r.height + gap && y + label.height > r.y - gap)
+        horizontal.push([r.x - gap - label.width, r.x + r.width + gap]);
+    }
+    const vx = nearestFree(x, horizontal), vy = nearestFree(y, vertical);
+    const box = Math.abs(vy - y) <= Math.abs(vx - x) ? { x, y: vy, width: label.width, height: label.height } : { x: vx, y, width: label.width, height: label.height };
+    occupied.push(box);
+    return { ...label, box };
+  });
+}
+function enclosingRect(rects) {
+  if (!rects.length) return;
+  let x = Infinity, y = Infinity, right = -Infinity, bottom = -Infinity;
+  for (const r of rects) {
+    x = Math.min(x, r.x);
+    y = Math.min(y, r.y);
+    right = Math.max(right, r.x + r.width);
+    bottom = Math.max(bottom, r.y + r.height);
+  }
+  return { x, y, width: right - x, height: bottom - y };
+}
+var EdgeLabelsContext = createContext(null);
+function useEdgeLabel(anchor) {
+  const store = useContext(EdgeLabelsContext);
+  useLayoutEffect(() => {
+    if (!store || !anchor) return;
+    store.set(anchor);
+    return () => store.remove(anchor.id);
+  }, [store, anchor?.id, anchor?.text, anchor?.x, anchor?.y]);
+}
+function MeasuredLabel({
+  anchor,
+  box,
+  maxWidth,
+  onSize
+}) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = (width, height) => {
+      if (width > 0 && height > 0) onSize(anchor.id, { width: Math.ceil(width), height: Math.ceil(height) });
+    };
+    measure(element.offsetWidth, element.offsetHeight);
+    const observer = new ResizeObserver((entries) => {
+      const border = entries[0]?.borderBoxSize?.[0];
+      measure(border?.inlineSize ?? element.offsetWidth, border?.blockSize ?? element.offsetHeight);
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      onSize(anchor.id, void 0);
+    };
+  }, [anchor.id, onSize]);
+  return /* @__PURE__ */ jsx(
+    Box2,
+    {
+      component: "span",
+      ref,
+      "aria-hidden": "true",
+      "data-edge-label": anchor.id,
+      className: "nodrag nopan prism-knowledge__edge-label",
+      sx: {
+        position: "absolute",
+        left: box?.x ?? anchor.x,
+        top: box?.y ?? anchor.y,
+        visibility: box ? "visible" : "hidden",
+        width: "max-content",
+        maxWidth,
+        bgcolor: "var(--prism-graph-bg)",
+        color: "var(--prism-graph-text)",
+        borderRadius: 0.5,
+        px: 0.75,
+        py: 0.25,
+        fontSize: 12,
+        lineHeight: 1.4,
+        boxSizing: "border-box",
+        whiteSpace: "pre-wrap",
+        overflowWrap: "anywhere",
+        pointerEvents: "none",
+        zIndex: 1
+      },
+      children: anchor.text
+    }
+  );
+}
+function EdgeLabels({
+  store,
+  gap,
+  maxWidth,
+  fitLabel,
+  zoomInLabel,
+  zoomOutLabel
+}) {
+  const anchors = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const [sizes, setSizes] = useState(/* @__PURE__ */ new Map());
+  const nodes = useNodes();
+  const initialized = useNodesInitialized();
+  const { fitBounds, zoomIn, zoomOut } = useReactFlow();
+  const atMinZoom = useStore((state) => state.transform[2] <= state.minZoom);
+  const atMaxZoom = useStore((state) => state.transform[2] >= state.maxZoom);
+  const initialFit = useRef(false);
+  const onSize = useCallback(
+    (id, size) => setSizes((prior) => {
+      const old = prior.get(id);
+      if (old?.width === size?.width && old?.height === size?.height) return prior;
+      const next = new Map(prior);
+      if (size) next.set(id, size);
+      else next.delete(id);
+      return next;
+    }),
+    []
+  );
+  const obstacles = useMemo(
+    () => nodes.flatMap((node) => {
+      const width = node.measured?.width, height = node.measured?.height;
+      return width && height && !node.hidden ? [{ ...node.position, width, height }] : [];
+    }),
+    [nodes]
+  );
+  const placements = useMemo(
+    () => placeEdgeLabels(
+      anchors.flatMap((anchor) => {
+        const size = sizes.get(anchor.id);
+        return size ? [{ ...anchor, ...size }] : [];
+      }),
+      obstacles,
+      gap
+    ),
+    [anchors, sizes, obstacles, gap]
+  );
+  const boxes = useMemo(() => new Map(placements.map((l) => [l.id, l.box])), [placements]);
+  const bounds = useMemo(() => enclosingRect([...obstacles, ...placements.map((l) => l.box)]), [obstacles, placements]);
+  const fit = useCallback(() => {
+    if (bounds) void fitBounds(bounds, { padding: 0.12, duration: 0 });
+  }, [bounds, fitBounds]);
+  useLayoutEffect(() => {
+    if (!initialFit.current && initialized && anchors.length && placements.length === anchors.length) {
+      initialFit.current = true;
+      fit();
+    }
+  }, [initialized, anchors.length, placements.length, fit]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(EdgeLabelRenderer, { children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": "true",
+          width: "1",
+          height: "1",
+          style: { position: "absolute", overflow: "visible", pointerEvents: "none" },
+          children: placements.map(({ id, x, y, box }) => {
+            const endX = Math.max(box.x, Math.min(x, box.x + box.width));
+            const endY = Math.max(box.y, Math.min(y, box.y + box.height));
+            if (endX === x && endY === y) return null;
+            return /* @__PURE__ */ jsxs("g", { "data-edge-label-leader": id, stroke: "var(--prism-graph-muted)", strokeWidth: "1", children: [
+              /* @__PURE__ */ jsx("path", { d: `M ${x} ${y} L ${endX} ${endY}`, fill: "none", strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "2", fill: "var(--prism-graph-bg)" })
+            ] }, id);
+          })
+        }
+      ),
+      anchors.map((anchor) => /* @__PURE__ */ jsx(
+        MeasuredLabel,
+        {
+          anchor,
+          box: boxes.get(anchor.id),
+          maxWidth,
+          onSize
+        },
+        anchor.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs(Controls, { showInteractive: false, showFitView: false, showZoom: false, children: [
+      /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          disabled: atMaxZoom,
+          onClick: () => void zoomIn({ duration: 200 }),
+          title: zoomInLabel,
+          "aria-label": zoomInLabel,
+          children: /* @__PURE__ */ jsx(ZoomInIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          disabled: atMinZoom,
+          onClick: () => void zoomOut({ duration: 200 }),
+          title: zoomOutLabel,
+          "aria-label": zoomOutLabel,
+          children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(ControlButton, { onClick: fit, title: fitLabel, "aria-label": fitLabel, children: /* @__PURE__ */ jsx(FitViewIcon, {}) })
+    ] })
+  ] });
+}
+
+// src/components/knowledge-graph/label-store.ts
+var EdgeLabelStore = class {
+  anchors = /* @__PURE__ */ new Map();
+  snapshot = [];
+  listeners = /* @__PURE__ */ new Set();
+  pending = false;
+  getSnapshot = () => this.snapshot;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  set(anchor) {
+    const prior = this.anchors.get(anchor.id);
+    if (prior?.x === anchor.x && prior.y === anchor.y && prior.text === anchor.text) return;
+    this.anchors.set(anchor.id, anchor);
+    this.publish();
+  }
+  remove(id) {
+    if (this.anchors.delete(id)) this.publish();
+  }
+  publish() {
+    if (this.pending) return;
+    this.pending = true;
+    queueMicrotask(() => {
+      this.pending = false;
+      this.snapshot = [...this.anchors.values()];
+      this.listeners.forEach((listener) => listener());
+    });
+  }
+};
+var defaultKnowledgeGraphLabels = {
+  title: "Knowledge map",
+  search: "Find an entity or relation",
+  all: "Whole map",
+  list: "Index",
+  indexTitle: "Objects and relations",
+  openIndex: "Expand graph index",
+  closeIndex: "Close graph index",
+  collapseIndex: "Collapse graph index",
+  map: "Map",
+  empty: "No objects to display.",
+  invalid: "The graph contains invalid identities or references.",
+  budget: "Choose an object to inspect its neighbourhood.",
+  partial: "Showing a neighbourhood",
+  omitted: "Relations outside the display budget",
+  details: "Selected object",
+  inputs: "Inputs",
+  outputs: "Outputs",
+  fit: "Fit to view",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  lock: "Toggle interaction",
+  hint: "Select an object in the index or map. Dragging changes its position only.",
+  clear: "Clear selection",
+  expand: "Expand workspace",
+  collapse: "Close expanded workspace"
+};
+function Badges({ badges }) {
+  if (!badges?.length) return null;
+  return /* @__PURE__ */ jsx(Box2, { component: "span", sx: { display: "flex", gap: 0.5, flexWrap: "wrap", mt: 1 }, children: badges.map((badge, index) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      component: "span",
+      label: badge.label,
+      size: "small",
+      variant: "outlined",
+      color: badge.tone ?? "default",
+      sx: { height: "auto", minHeight: 24, "& .MuiChip-label": { whiteSpace: "normal", py: 0.25 } }
+    },
+    index
+  )) });
+}
+var EntityNode = memo(function EntityNode2({ data, selected }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { minHeight: Math.max(76, Math.max(data.inputs ?? 0, data.outputs ?? 0) * 24 + 24) },
+      className: `prism-knowledge__node ${data.selection.type === "relation" ? "prism-knowledge__relation" : ""} ${selected ? "is-selected" : ""}`,
+      children: [
+        data.selection.type === "relation" ? Array.from({ length: data.inputs ?? 0 }, (_, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: `inputs:${i}`,
+            type: "target",
+            position: Position.Left,
+            style: { top: `${(i + 1) / ((data.inputs ?? 0) + 1) * 100}%` },
+            isConnectable: false
+          },
+          i
+        )) : /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, isConnectable: false }),
+        /* @__PURE__ */ jsx("span", { className: "prism-knowledge__kind", children: data.kind }),
+        /* @__PURE__ */ jsx("strong", { children: data.label }),
+        /* @__PURE__ */ jsx(Badges, { badges: data.badges }),
+        data.selection.type === "relation" ? Array.from({ length: data.outputs ?? 0 }, (_, i) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: `outputs:${i}`,
+            type: "source",
+            position: Position.Right,
+            style: { top: `${(i + 1) / ((data.outputs ?? 0) + 1) * 100}%` },
+            isConnectable: false
+          },
+          i
+        )) : /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, isConnectable: false })
+      ]
+    }
+  );
+});
+function KnowledgeEdge(props) {
+  const [path, x, y] = getSmoothStepPath(props);
+  useEdgeLabel(typeof props.label === "string" ? { id: props.id, text: props.label, x, y } : void 0);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id: props.id,
+      path,
+      markerEnd: props.markerEnd,
+      markerStart: props.markerStart,
+      style: props.style,
+      interactionWidth: props.interactionWidth
+    }
+  );
+}
+var edgeTypes = { knowledge: KnowledgeEdge };
+var nodeTypes = { knowledge: EntityNode };
+function defaultLayout(p) {
+  const positions = {};
+  p.entities.forEach((e, i) => {
+    positions[entityNodeId(e.id)] = { x: i % 3 * 340, y: Math.floor(i / 3) * 170 };
+  });
+  p.relations.forEach((r, i) => {
+    positions[relationNodeId(r.id)] = {
+      x: i % 3 * 340 + 170,
+      y: Math.floor(p.entities.length / 3) * 170 + 180 + Math.floor(i / 3) * 150
+    };
+  });
+  return positions;
+}
+function KnowledgeGraph({
+  data,
+  labels: overrides,
+  visibleBudget = 300,
+  panelPersistKey,
+  onSelect,
+  onLayoutChange,
+  layout = defaultLayout,
+  renderDetails,
+  height = 560,
+  edgeLabelGap = 8,
+  edgeLabelMaxWidth = 240,
+  className,
+  sx
+}) {
+  if (!Number.isFinite(edgeLabelGap) || edgeLabelGap < 0 || !Number.isFinite(edgeLabelMaxWidth) || edgeLabelMaxWidth <= 0)
+    throw Error("invalid_edge_label_options");
+  const [labelStore] = useState(() => new EdgeLabelStore());
+  const theme = useTheme(), labels = useMemo(() => ({ ...defaultKnowledgeGraphLabels, ...overrides }), [overrides]);
+  const [expanded, setExpanded] = useState(false);
+  const [query, setQuery] = useState(""), [selected, setSelected] = useState(), [focus, setFocus] = useState(), [view, setView] = useState("map");
+  const selectionRef = useRef(void 0);
+  const valid = useMemo(() => {
+    try {
+      validateKnowledgeGraph(data);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [data]);
+  const projection = useMemo(
+    () => valid ? projectKnowledgeGraph(data, focus, visibleBudget) : { entities: [], relations: [], total: 0, omittedRelations: 0, limited: false },
+    [data, valid, focus, visibleBudget]
+  );
+  const graph = useMemo(() => incidenceGraph(projection), [projection]);
+  const positions = useMemo(() => layout(projection), [layout, projection]);
+  const [nodes, setNodes] = useState([]);
+  useEffect(() => {
+    setNodes((old) => {
+      const prior = new Map(old.map((n) => [n.id, n]));
+      return graph.nodes.map((n) => ({
+        ...prior.get(n.id),
+        id: n.id,
+        type: "knowledge",
+        position: prior.get(n.id)?.position ?? positions[n.id] ?? { x: 0, y: 0 },
+        data: n,
+        ariaLabel: `${n.kind}: ${n.label}`,
+        deletable: false
+      }));
+    });
+  }, [graph, positions]);
+  const displayedNodes = useMemo(
+    () => nodes.map((node) => ({
+      ...node,
+      selected: selected?.id === node.data.selection.id && selected.type === node.data.selection.type
+    })),
+    [nodes, selected]
+  );
+  const edges = useMemo(
+    () => graph.edges.map((e) => ({
+      ...e,
+      type: "knowledge",
+      markerEnd: { type: MarkerType.ArrowClosed },
+      focusable: true,
+      ariaLabel: e.label,
+      deletable: false
+    })),
+    [graph]
+  );
+  const choose = useCallback(
+    (s) => {
+      const previous = selectionRef.current;
+      if (previous?.id === s?.id && previous?.type === s?.type) return;
+      selectionRef.current = s;
+      setSelected(s);
+      onSelect?.(s);
+      if (projection.total > visibleBudget) setFocus(s);
+    },
+    [onSelect, projection.total, visibleBudget]
+  );
+  const onNodesChange = useCallback(
+    (changes) => {
+      const selectedChange = [...changes].reverse().find((change) => change.type === "select" && change.selected);
+      if (selectedChange?.type === "select") {
+        const node = graph.nodes.find((node2) => node2.id === selectedChange.id);
+        if (node) choose(node.selection);
+      } else {
+        const current = selectionRef.current;
+        const id = current && (current.type === "entity" ? entityNodeId(current.id) : relationNodeId(current.id));
+        if (changes.some((change) => change.type === "select" && !change.selected && change.id === id))
+          choose(void 0);
+      }
+      const geometry = changes.filter((change) => change.type !== "remove" && change.type !== "select");
+      if (geometry.length) setNodes((nodes2) => applyNodeChanges(geometry, nodes2));
+    },
+    [graph, choose]
+  );
+  const index = useMemo(
+    () => [
+      ...data.entities.map((e) => ({ ...e, selection: { type: "entity", id: e.id } })),
+      ...data.relations.map((r) => ({ ...r, selection: { type: "relation", id: r.id } }))
+    ].filter(
+      (e) => `${e.label}
+${e.kind}
+${e.id}
+${e.badges?.map((b) => b.label).join(" ") ?? ""}`.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+    ),
+    [data, query]
+  );
+  const object = selected?.type === "entity" ? data.entities.find((e) => e.id === selected.id) : data.relations.find((r) => r.id === selected?.id);
+  useEffect(() => {
+    if (selected && !object) {
+      choose(void 0);
+      setFocus(void 0);
+    }
+  }, [selected, object, choose]);
+  const graphIndex = /* @__PURE__ */ jsxs(Box2, { className: "prism-knowledge__index", children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        size: "small",
+        type: "search",
+        label: labels.search,
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        sx: { mb: 2 }
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "prism-knowledge__results", children: index.slice(0, visibleBudget).map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "text",
+        "aria-current": selected?.id === item.id && selected.type === item.selection.type,
+        onClick: () => choose(item.selection),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: item.kind }),
+          item.label,
+          /* @__PURE__ */ jsx(Badges, { badges: item.badges })
+        ]
+      }
+    ) }, JSON.stringify(item.selection))) }),
+    /* @__PURE__ */ jsxs("small", { children: [
+      Math.min(index.length, visibleBudget),
+      " / ",
+      index.length
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        onClick: () => {
+          setFocus(void 0);
+          choose(void 0);
+        },
+        children: labels.clear
+      }
+    )
+  ] });
+  const content = /* @__PURE__ */ jsxs(
+    Box2,
+    {
+      className: ["prism-knowledge", view === "list" && "is-list", className].filter(Boolean).join(" "),
+      sx: [
+        {
+          "--prism-graph-border": theme.palette.divider,
+          "--prism-graph-bg": theme.palette.background.paper,
+          "--prism-graph-text": theme.palette.text.primary,
+          "--prism-graph-muted": theme.palette.text.secondary,
+          "--prism-graph-accent": theme.palette.primary.main,
+          "--prism-graph-radius": `${theme.shape.borderRadius}px`,
+          "--prism-graph-hover": theme.palette.action.hover
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "prism-knowledge__header", children: [
+          /* @__PURE__ */ jsx("strong", { children: labels.title }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            projection.entities.length + projection.relations.length,
+            " / ",
+            projection.total
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: view === "map" ? "contained" : "outlined",
+              type: "button",
+              "aria-pressed": view === "map",
+              onClick: () => setView("map"),
+              children: labels.map
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: view === "list" ? "contained" : "outlined",
+              type: "button",
+              "aria-pressed": view === "list",
+              onClick: () => setView("list"),
+              children: labels.list
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => setExpanded((v) => !v), children: expanded ? labels.collapse : labels.expand })
+        ] }),
+        !valid ? /* @__PURE__ */ jsx("p", { role: "alert", children: labels.invalid }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "prism-knowledge__hint", children: labels.hint }),
+          view === "list" ? graphIndex : /* @__PURE__ */ jsx(
+            PanelLayout,
+            {
+              title: labels.indexTitle,
+              labels: { expand: labels.openIndex, collapse: labels.collapseIndex, close: labels.closeIndex },
+              panel: ({ collapsed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Box2, { hidden: collapsed, children: graphIndex }),
+                collapsed && /* @__PURE__ */ jsx(
+                  DocSidebar,
+                  {
+                    compact: true,
+                    items: index.slice(0, visibleBudget).map((item) => ({
+                      id: JSON.stringify(item.selection),
+                      label: item.label
+                    })),
+                    activeId: selected && JSON.stringify(selected),
+                    onItemClick: (item) => {
+                      const target = index.find((entry) => JSON.stringify(entry.selection) === item.id);
+                      if (target) choose(target.selection);
+                    }
+                  }
+                )
+              ] }),
+              height: expanded ? "75dvh" : height,
+              width: 240,
+              offset: 88,
+              persistKey: panelPersistKey,
+              navigationKey: selected ? selected.type + ":" + selected.id : "",
+              sx: { px: 1, pb: 1 },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "prism-knowledge__canvas",
+                  style: { height: view === "map" ? expanded ? "75dvh" : height : void 0 },
+                  children: view === "map" && nodes.length > 0 ? /* @__PURE__ */ jsx(EdgeLabelsContext.Provider, { value: labelStore, children: /* @__PURE__ */ jsxs(
+                    ReactFlow,
+                    {
+                      nodes: displayedNodes,
+                      edges,
+                      nodeTypes,
+                      edgeTypes,
+                      onNodesChange,
+                      onNodeClick: (_e, n) => choose(n.data.selection),
+                      onEdgeClick: (_event, edge) => {
+                        const occurrence = graph.edges.find((item) => item.id === edge.id);
+                        if (occurrence) choose({ type: "relation", id: occurrence.relationId });
+                      },
+                      onNodeDragStop: (_e, node) => onLayoutChange?.(
+                        Object.fromEntries(nodes.map((n) => [n.id, n.id === node.id ? node.position : n.position]))
+                      ),
+                      nodesConnectable: false,
+                      deleteKeyCode: null,
+                      edgesReconnectable: false,
+                      fitView: true,
+                      minZoom: 0.1,
+                      maxZoom: 2,
+                      colorMode: theme.palette.mode,
+                      ariaLabelConfig: {
+                        "controls.zoomIn.ariaLabel": labels.zoomIn,
+                        "controls.zoomOut.ariaLabel": labels.zoomOut,
+                        "controls.fitView.ariaLabel": labels.fit,
+                        "controls.interactive.ariaLabel": labels.lock
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Background, { gap: 24 }),
+                        /* @__PURE__ */ jsx(
+                          EdgeLabels,
+                          {
+                            store: labelStore,
+                            gap: edgeLabelGap,
+                            maxWidth: edgeLabelMaxWidth,
+                            fitLabel: labels.fit,
+                            zoomInLabel: labels.zoomIn,
+                            zoomOutLabel: labels.zoomOut
+                          }
+                        )
+                      ]
+                    }
+                  ) }) : /* @__PURE__ */ jsx("div", { className: "prism-knowledge__empty", children: projection.total === 0 ? labels.empty : projection.limited ? labels.budget : labels.list })
+                }
+              )
+            }
+          ),
+          projection.limited && /* @__PURE__ */ jsxs("p", { className: "prism-knowledge__hint", role: "status", children: [
+            labels.partial,
+            ": ",
+            projection.entities.length + projection.relations.length,
+            " / ",
+            projection.total,
+            ".",
+            " ",
+            labels.omitted,
+            ": ",
+            projection.omittedRelations,
+            "."
+          ] }),
+          selected && object && /* @__PURE__ */ jsxs("section", { className: "prism-knowledge__details", "aria-label": labels.details, children: [
+            /* @__PURE__ */ jsx("h3", { children: object.label }),
+            /* @__PURE__ */ jsx("p", { children: object.description }),
+            selected.type === "relation" && /* @__PURE__ */ jsx("div", { className: "prism-knowledge__ports", children: ["inputs", "outputs"].map((side) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("strong", { children: labels[side] }),
+              /* @__PURE__ */ jsx("ol", { children: object[side].map((port, i) => /* @__PURE__ */ jsxs("li", { children: [
+                port.role,
+                ": ",
+                data.entities.find((e) => e.id === port.entity)?.label
+              ] }, i)) })
+            ] }, side)) }),
+            renderDetails?.(selected)
+          ] })
+        ] })
+      ]
+    }
+  );
+  return expanded ? /* @__PURE__ */ jsx(Dialog, { open: true, fullScreen: true, onClose: () => setExpanded(false), "aria-label": labels.title, children: content }) : content;
+}
+
+export { KnowledgeGraph, defaultKnowledgeGraphLabels, entityNodeId, incidenceGraph, projectKnowledgeGraph, relationNodeId, validateKnowledgeGraph };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map