backpack-viewer 0.2.13 → 0.2.15

package/dist/tools-pane.js

@@ -0,0 +1,598 @@
+import { getColor } from "./colors";
+export function initToolsPane(container, callbacks) {
+    let data = null;
+    let stats = null;
+    let collapsed = true;
+    let activeTypeFilter = null;
+    let edgeLabelsVisible = true;
+    let typeHullsVisible = true;
+    let minimapVisible = true;
+    // Unified focus set — two layers that compose via union
+    const focusSet = {
+        types: new Set(), // toggled node types (dynamic — resolves to all nodes of type)
+        nodeIds: new Set(), // individually toggled node IDs
+    };
+    /** Resolve the focus set to a flat array of node IDs. */
+    function resolveFocusSet() {
+        if (!data)
+            return [];
+        const ids = new Set();
+        for (const node of data.nodes) {
+            if (focusSet.types.has(node.type))
+                ids.add(node.id);
+        }
+        for (const id of focusSet.nodeIds)
+            ids.add(id);
+        return [...ids];
+    }
+    /** Check if a node is in the focus set (directly or via its type). */
+    function isNodeFocused(nodeId) {
+        if (focusSet.nodeIds.has(nodeId))
+            return true;
+        const node = data?.nodes.find((n) => n.id === nodeId);
+        return node ? focusSet.types.has(node.type) : false;
+    }
+    function isFocusSetEmpty() {
+        return focusSet.types.size === 0 && focusSet.nodeIds.size === 0;
+    }
+    /** Emit the resolved focus set to the callback. */
+    function emitFocusChange() {
+        const resolved = resolveFocusSet();
+        callbacks.onFocusChange(resolved.length > 0 ? resolved : null);
+    }
+    // --- DOM ---
+    const toggle = document.createElement("button");
+    toggle.className = "tools-pane-toggle hidden";
+    toggle.title = "Graph Inspector";
+    toggle.innerHTML =
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h10"/></svg>';
+    const content = document.createElement("div");
+    content.className = "tools-pane-content hidden";
+    container.appendChild(toggle);
+    container.appendChild(content);
+    toggle.addEventListener("click", () => {
+        collapsed = !collapsed;
+        content.classList.toggle("hidden", collapsed);
+        toggle.classList.toggle("active", !collapsed);
+        if (!collapsed)
+            callbacks.onOpen?.();
+    });
+    // --- Render ---
+    function render() {
+        content.innerHTML = "";
+        if (!stats)
+            return;
+        // Graph stats summary
+        const summary = document.createElement("div");
+        summary.className = "tools-pane-summary";
+        summary.innerHTML =
+            `<span>${stats.nodeCount} nodes</span><span class="tools-pane-sep">&middot;</span>` +
+                `<span>${stats.edgeCount} edges</span><span class="tools-pane-sep">&middot;</span>` +
+                `<span>${stats.types.length} types</span>`;
+        content.appendChild(summary);
+        // Node types — click to filter, bullseye to toggle focus set, pencil to rename
+        if (stats.types.length) {
+            content.appendChild(makeSection("Node Types", (section) => {
+                for (const t of stats.types) {
+                    const row = document.createElement("div");
+                    row.className = "tools-pane-row tools-pane-clickable";
+                    if (activeTypeFilter === t.name)
+                        row.classList.add("active");
+                    const dot = document.createElement("span");
+                    dot.className = "tools-pane-dot";
+                    dot.style.backgroundColor = getColor(t.name);
+                    const name = document.createElement("span");
+                    name.className = "tools-pane-name";
+                    name.textContent = t.name;
+                    const count = document.createElement("span");
+                    count.className = "tools-pane-count";
+                    count.textContent = String(t.count);
+                    const focusBtn = document.createElement("button");
+                    focusBtn.className = "tools-pane-edit tools-pane-focus-toggle";
+                    if (focusSet.types.has(t.name))
+                        focusBtn.classList.add("tools-pane-focus-active");
+                    focusBtn.textContent = "\u25CE";
+                    focusBtn.title = focusSet.types.has(t.name)
+                        ? `Remove ${t.name} from focus`
+                        : `Add ${t.name} to focus`;
+                    const editBtn = document.createElement("button");
+                    editBtn.className = "tools-pane-edit";
+                    editBtn.textContent = "\u270E";
+                    editBtn.title = `Rename all ${t.name} nodes`;
+                    row.appendChild(dot);
+                    row.appendChild(name);
+                    row.appendChild(count);
+                    row.appendChild(focusBtn);
+                    row.appendChild(editBtn);
+                    row.addEventListener("click", (e) => {
+                        if (e.target.closest(".tools-pane-edit"))
+                            return;
+                        if (activeTypeFilter === t.name) {
+                            activeTypeFilter = null;
+                            callbacks.onFilterByType(null);
+                        }
+                        else {
+                            activeTypeFilter = t.name;
+                            callbacks.onFilterByType(t.name);
+                        }
+                        render();
+                    });
+                    focusBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        if (focusSet.types.has(t.name)) {
+                            focusSet.types.delete(t.name);
+                        }
+                        else {
+                            focusSet.types.add(t.name);
+                        }
+                        emitFocusChange();
+                        render();
+                    });
+                    editBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        startInlineEdit(row, t.name, (newName) => {
+                            if (newName && newName !== t.name) {
+                                callbacks.onRenameNodeType(t.name, newName);
+                            }
+                        });
+                    });
+                    section.appendChild(row);
+                }
+                // Show clear button when types are focused
+                if (focusSet.types.size > 0) {
+                    const clearRow = document.createElement("div");
+                    clearRow.className = "tools-pane-row tools-pane-clickable tools-pane-focus-clear";
+                    const label = document.createElement("span");
+                    label.className = "tools-pane-name";
+                    label.style.color = "var(--accent)";
+                    label.textContent = `${focusSet.types.size} type${focusSet.types.size > 1 ? "s" : ""} focused`;
+                    const clearBtn = document.createElement("span");
+                    clearBtn.className = "tools-pane-badge";
+                    clearBtn.textContent = "clear types";
+                    clearRow.appendChild(label);
+                    clearRow.appendChild(clearBtn);
+                    clearRow.addEventListener("click", () => {
+                        focusSet.types.clear();
+                        emitFocusChange();
+                        render();
+                    });
+                    section.appendChild(clearRow);
+                }
+            }));
+        }
+        // Edge types — with rename
+        if (stats.edgeTypes.length) {
+            content.appendChild(makeSection("Edge Types", (section) => {
+                for (const t of stats.edgeTypes) {
+                    const row = document.createElement("div");
+                    row.className = "tools-pane-row tools-pane-clickable";
+                    const name = document.createElement("span");
+                    name.className = "tools-pane-name";
+                    name.textContent = t.name;
+                    const count = document.createElement("span");
+                    count.className = "tools-pane-count";
+                    count.textContent = String(t.count);
+                    const editBtn = document.createElement("button");
+                    editBtn.className = "tools-pane-edit";
+                    editBtn.textContent = "\u270E";
+                    editBtn.title = `Rename all ${t.name} edges`;
+                    row.appendChild(name);
+                    row.appendChild(count);
+                    row.appendChild(editBtn);
+                    editBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        startInlineEdit(row, t.name, (newName) => {
+                            if (newName && newName !== t.name) {
+                                callbacks.onRenameEdgeType(t.name, newName);
+                            }
+                        });
+                    });
+                    section.appendChild(row);
+                }
+            }));
+        }
+        // Most connected nodes — click to navigate, focus button
+        if (stats.mostConnected.length) {
+            content.appendChild(makeSection("Most Connected", (section) => {
+                for (const n of stats.mostConnected) {
+                    const row = document.createElement("div");
+                    row.className = "tools-pane-row tools-pane-clickable";
+                    const dot = document.createElement("span");
+                    dot.className = "tools-pane-dot";
+                    dot.style.backgroundColor = getColor(n.type);
+                    const name = document.createElement("span");
+                    name.className = "tools-pane-name";
+                    name.textContent = n.label;
+                    const count = document.createElement("span");
+                    count.className = "tools-pane-count";
+                    count.textContent = `${n.connections}`;
+                    const focusBtn = document.createElement("button");
+                    focusBtn.className = "tools-pane-edit tools-pane-focus-toggle";
+                    if (isNodeFocused(n.id))
+                        focusBtn.classList.add("tools-pane-focus-active");
+                    focusBtn.textContent = "\u25CE";
+                    focusBtn.title = isNodeFocused(n.id)
+                        ? `Remove ${n.label} from focus`
+                        : `Add ${n.label} to focus`;
+                    row.appendChild(dot);
+                    row.appendChild(name);
+                    row.appendChild(count);
+                    row.appendChild(focusBtn);
+                    row.addEventListener("click", (e) => {
+                        if (e.target.closest(".tools-pane-edit"))
+                            return;
+                        callbacks.onNavigateToNode(n.id);
+                    });
+                    focusBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        if (focusSet.nodeIds.has(n.id)) {
+                            focusSet.nodeIds.delete(n.id);
+                        }
+                        else {
+                            focusSet.nodeIds.add(n.id);
+                        }
+                        emitFocusChange();
+                        render();
+                    });
+                    section.appendChild(row);
+                }
+            }));
+        }
+        // Quality issues
+        const issues = [];
+        if (stats.orphans.length)
+            issues.push(`${stats.orphans.length} orphan${stats.orphans.length > 1 ? "s" : ""}`);
+        if (stats.singletons.length)
+            issues.push(`${stats.singletons.length} singleton type${stats.singletons.length > 1 ? "s" : ""}`);
+        if (stats.emptyNodes.length)
+            issues.push(`${stats.emptyNodes.length} empty node${stats.emptyNodes.length > 1 ? "s" : ""}`);
+        if (issues.length) {
+            content.appendChild(makeSection("Quality", (section) => {
+                // Orphans — click to navigate, focus button
+                for (const o of stats.orphans.slice(0, 5)) {
+                    const row = document.createElement("div");
+                    row.className = "tools-pane-row tools-pane-clickable tools-pane-issue";
+                    const dot = document.createElement("span");
+                    dot.className = "tools-pane-dot";
+                    dot.style.backgroundColor = getColor(o.type);
+                    const name = document.createElement("span");
+                    name.className = "tools-pane-name";
+                    name.textContent = o.label;
+                    const badge = document.createElement("span");
+                    badge.className = "tools-pane-badge";
+                    badge.textContent = "orphan";
+                    const focusBtn = document.createElement("button");
+                    focusBtn.className = "tools-pane-edit tools-pane-focus-toggle";
+                    if (isNodeFocused(o.id))
+                        focusBtn.classList.add("tools-pane-focus-active");
+                    focusBtn.textContent = "\u25CE";
+                    focusBtn.title = isNodeFocused(o.id)
+                        ? `Remove ${o.label} from focus`
+                        : `Add ${o.label} to focus`;
+                    row.appendChild(dot);
+                    row.appendChild(name);
+                    row.appendChild(badge);
+                    row.appendChild(focusBtn);
+                    row.addEventListener("click", (e) => {
+                        if (e.target.closest(".tools-pane-edit"))
+                            return;
+                        callbacks.onNavigateToNode(o.id);
+                    });
+                    focusBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        if (focusSet.nodeIds.has(o.id)) {
+                            focusSet.nodeIds.delete(o.id);
+                        }
+                        else {
+                            focusSet.nodeIds.add(o.id);
+                        }
+                        emitFocusChange();
+                        render();
+                    });
+                    section.appendChild(row);
+                }
+                if (stats.orphans.length > 5) {
+                    const more = document.createElement("div");
+                    more.className = "tools-pane-more";
+                    more.textContent = `+ ${stats.orphans.length - 5} more orphans`;
+                    section.appendChild(more);
+                }
+                // Singleton types
+                for (const s of stats.singletons.slice(0, 5)) {
+                    const row = document.createElement("div");
+                    row.className = "tools-pane-row tools-pane-issue";
+                    const dot = document.createElement("span");
+                    dot.className = "tools-pane-dot";
+                    dot.style.backgroundColor = getColor(s.name);
+                    const name = document.createElement("span");
+                    name.className = "tools-pane-name";
+                    name.textContent = s.name;
+                    const badge = document.createElement("span");
+                    badge.className = "tools-pane-badge";
+                    badge.textContent = "1 node";
+                    row.appendChild(dot);
+                    row.appendChild(name);
+                    row.appendChild(badge);
+                    section.appendChild(row);
+                }
+            }));
+        }
+        // Unified focus summary (if anything from any section is focused)
+        if (!isFocusSetEmpty()) {
+            const resolved = resolveFocusSet();
+            const summaryParts = [];
+            if (focusSet.types.size > 0)
+                summaryParts.push(`${focusSet.types.size} type${focusSet.types.size > 1 ? "s" : ""}`);
+            if (focusSet.nodeIds.size > 0)
+                summaryParts.push(`${focusSet.nodeIds.size} node${focusSet.nodeIds.size > 1 ? "s" : ""}`);
+            content.appendChild(makeSection("Focus", (section) => {
+                const row = document.createElement("div");
+                row.className = "tools-pane-row";
+                const label = document.createElement("span");
+                label.className = "tools-pane-name";
+                label.style.color = "var(--accent)";
+                label.textContent = `${summaryParts.join(" + ")} (${resolved.length} total)`;
+                const clearBtn = document.createElement("button");
+                clearBtn.className = "tools-pane-edit tools-pane-focus-active";
+                clearBtn.style.opacity = "1";
+                clearBtn.textContent = "\u00d7";
+                clearBtn.title = "Clear all focus";
+                clearBtn.addEventListener("click", () => {
+                    focusSet.types.clear();
+                    focusSet.nodeIds.clear();
+                    emitFocusChange();
+                    render();
+                });
+                row.appendChild(label);
+                row.appendChild(clearBtn);
+                section.appendChild(row);
+            }));
+        }
+        // Controls section
+        content.appendChild(makeSection("Controls", (section) => {
+            // Edge labels toggle
+            const labelRow = document.createElement("div");
+            labelRow.className = "tools-pane-row tools-pane-clickable";
+            const labelCheck = document.createElement("input");
+            labelCheck.type = "checkbox";
+            labelCheck.checked = edgeLabelsVisible;
+            labelCheck.className = "tools-pane-checkbox";
+            const labelText = document.createElement("span");
+            labelText.className = "tools-pane-name";
+            labelText.textContent = "Edge labels";
+            labelRow.appendChild(labelCheck);
+            labelRow.appendChild(labelText);
+            labelRow.addEventListener("click", (e) => {
+                if (e.target !== labelCheck)
+                    labelCheck.checked = !labelCheck.checked;
+                edgeLabelsVisible = labelCheck.checked;
+                callbacks.onToggleEdgeLabels(edgeLabelsVisible);
+            });
+            section.appendChild(labelRow);
+            // Type hulls toggle
+            const hullRow = document.createElement("div");
+            hullRow.className = "tools-pane-row tools-pane-clickable";
+            const hullCheck = document.createElement("input");
+            hullCheck.type = "checkbox";
+            hullCheck.checked = typeHullsVisible;
+            hullCheck.className = "tools-pane-checkbox";
+            const hullText = document.createElement("span");
+            hullText.className = "tools-pane-name";
+            hullText.textContent = "Type regions";
+            hullRow.appendChild(hullCheck);
+            hullRow.appendChild(hullText);
+            hullRow.addEventListener("click", (e) => {
+                if (e.target !== hullCheck)
+                    hullCheck.checked = !hullCheck.checked;
+                typeHullsVisible = hullCheck.checked;
+                callbacks.onToggleTypeHulls(typeHullsVisible);
+            });
+            section.appendChild(hullRow);
+            // Minimap toggle
+            const mapRow = document.createElement("div");
+            mapRow.className = "tools-pane-row tools-pane-clickable";
+            const mapCheck = document.createElement("input");
+            mapCheck.type = "checkbox";
+            mapCheck.checked = minimapVisible;
+            mapCheck.className = "tools-pane-checkbox";
+            const mapText = document.createElement("span");
+            mapText.className = "tools-pane-name";
+            mapText.textContent = "Minimap";
+            mapRow.appendChild(mapCheck);
+            mapRow.appendChild(mapText);
+            mapRow.addEventListener("click", (e) => {
+                if (e.target !== mapCheck)
+                    mapCheck.checked = !mapCheck.checked;
+                minimapVisible = mapCheck.checked;
+                callbacks.onToggleMinimap(minimapVisible);
+            });
+            section.appendChild(mapRow);
+            // Layout sliders
+            section.appendChild(makeSlider("Clustering", 0, 0.15, 0.01, 0.05, (v) => {
+                callbacks.onLayoutChange("clusterStrength", v);
+            }));
+            section.appendChild(makeSlider("Spacing", 0.5, 3, 0.1, 1, (v) => {
+                callbacks.onLayoutChange("spacing", v);
+            }));
+            // Export buttons
+            const exportRow = document.createElement("div");
+            exportRow.className = "tools-pane-export-row";
+            const pngBtn = document.createElement("button");
+            pngBtn.className = "tools-pane-export-btn";
+            pngBtn.textContent = "Export PNG";
+            pngBtn.addEventListener("click", () => callbacks.onExport("png"));
+            const svgBtn = document.createElement("button");
+            svgBtn.className = "tools-pane-export-btn";
+            svgBtn.textContent = "Export SVG";
+            svgBtn.addEventListener("click", () => callbacks.onExport("svg"));
+            exportRow.appendChild(pngBtn);
+            exportRow.appendChild(svgBtn);
+            section.appendChild(exportRow);
+        }));
+    }
+    function makeSlider(label, min, max, step, initial, onChange) {
+        const row = document.createElement("div");
+        row.className = "tools-pane-slider-row";
+        const lbl = document.createElement("span");
+        lbl.className = "tools-pane-slider-label";
+        lbl.textContent = label;
+        const input = document.createElement("input");
+        input.type = "range";
+        input.className = "tools-pane-slider";
+        input.min = String(min);
+        input.max = String(max);
+        input.step = String(step);
+        input.value = String(initial);
+        const val = document.createElement("span");
+        val.className = "tools-pane-slider-value";
+        val.textContent = String(initial);
+        input.addEventListener("input", () => {
+            const v = parseFloat(input.value);
+            val.textContent = v % 1 === 0 ? String(v) : v.toFixed(2);
+            onChange(v);
+        });
+        row.appendChild(lbl);
+        row.appendChild(input);
+        row.appendChild(val);
+        return row;
+    }
+    function makeSection(title, build) {
+        const section = document.createElement("div");
+        section.className = "tools-pane-section";
+        const heading = document.createElement("div");
+        heading.className = "tools-pane-heading";
+        heading.textContent = title;
+        section.appendChild(heading);
+        build(section);
+        return section;
+    }
+    // --- Inline editing ---
+    function startInlineEdit(row, currentValue, onCommit) {
+        const input = document.createElement("input");
+        input.className = "tools-pane-inline-input";
+        input.value = currentValue;
+        input.type = "text";
+        // Replace row content with input
+        const original = row.innerHTML;
+        row.innerHTML = "";
+        row.classList.add("tools-pane-editing");
+        row.appendChild(input);
+        input.focus();
+        input.select();
+        function commit() {
+            const newValue = input.value.trim();
+            row.classList.remove("tools-pane-editing");
+            if (newValue && newValue !== currentValue) {
+                onCommit(newValue);
+            }
+            else {
+                row.innerHTML = original;
+            }
+        }
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+            }
+            if (e.key === "Escape") {
+                row.innerHTML = original;
+                row.classList.remove("tools-pane-editing");
+            }
+        });
+        input.addEventListener("blur", commit);
+    }
+    // --- Derive stats from graph data ---
+    function deriveStats(graphData) {
+        const typeCounts = new Map();
+        const edgeTypeCounts = new Map();
+        const connectionCounts = new Map();
+        const connectedNodes = new Set();
+        for (const node of graphData.nodes) {
+            typeCounts.set(node.type, (typeCounts.get(node.type) ?? 0) + 1);
+        }
+        for (const edge of graphData.edges) {
+            edgeTypeCounts.set(edge.type, (edgeTypeCounts.get(edge.type) ?? 0) + 1);
+            connectionCounts.set(edge.sourceId, (connectionCounts.get(edge.sourceId) ?? 0) + 1);
+            connectionCounts.set(edge.targetId, (connectionCounts.get(edge.targetId) ?? 0) + 1);
+            connectedNodes.add(edge.sourceId);
+            connectedNodes.add(edge.targetId);
+        }
+        const nodeLabel = (n) => firstStringValue(n.properties) ?? n.id;
+        const orphans = graphData.nodes
+            .filter((n) => !connectedNodes.has(n.id))
+            .map((n) => ({ id: n.id, label: nodeLabel(n), type: n.type }));
+        const singletons = [...typeCounts.entries()]
+            .filter(([, count]) => count === 1)
+            .map(([name]) => ({ name }));
+        const emptyNodes = graphData.nodes
+            .filter((n) => Object.keys(n.properties).length === 0)
+            .map((n) => ({ id: n.id, label: n.id, type: n.type }));
+        const mostConnected = graphData.nodes
+            .map((n) => ({
+            id: n.id,
+            label: nodeLabel(n),
+            type: n.type,
+            connections: connectionCounts.get(n.id) ?? 0,
+        }))
+            .filter((n) => n.connections > 0)
+            .sort((a, b) => b.connections - a.connections)
+            .slice(0, 5);
+        return {
+            nodeCount: graphData.nodes.length,
+            edgeCount: graphData.edges.length,
+            types: [...typeCounts.entries()]
+                .sort((a, b) => b[1] - a[1])
+                .map(([name, count]) => ({ name, count })),
+            edgeTypes: [...edgeTypeCounts.entries()]
+                .sort((a, b) => b[1] - a[1])
+                .map(([name, count]) => ({ name, count })),
+            orphans,
+            singletons,
+            emptyNodes,
+            mostConnected,
+        };
+    }
+    // --- Public API ---
+    return {
+        collapse() {
+            collapsed = true;
+            content.classList.add("hidden");
+            toggle.classList.remove("active");
+        },
+        addToFocusSet(nodeIds) {
+            for (const id of nodeIds)
+                focusSet.nodeIds.add(id);
+            emitFocusChange();
+            render();
+        },
+        clearFocusSet() {
+            focusSet.types.clear();
+            focusSet.nodeIds.clear();
+            emitFocusChange();
+            render();
+        },
+        setData(newData) {
+            data = newData;
+            activeTypeFilter = null;
+            focusSet.types.clear();
+            focusSet.nodeIds.clear();
+            if (data && data.nodes.length > 0) {
+                stats = deriveStats(data);
+                toggle.classList.remove("hidden");
+                render();
+            }
+            else {
+                stats = null;
+                toggle.classList.add("hidden");
+                content.classList.add("hidden");
+            }
+        },
+    };
+}
+function firstStringValue(properties) {
+    for (const value of Object.values(properties)) {
+        if (typeof value === "string")
+            return value;
+    }
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-viewer",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Web-based graph visualizer for backpack-ontology — Canvas 2D, force-directed layout, live reload",
   "license": "Apache-2.0",
   "author": "Noah Irzinger",

package/dist/app/assets/index-C1crWHUS.css

@@ -1 +0,0 @@
-*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #141414;--bg-surface: #1a1a1a;--bg-hover: #222222;--bg-active: #2a2a2a;--bg-elevated: #1e1e1e;--bg-inset: #111111;--border: #2a2a2a;--text: #d4d4d4;--text-strong: #e5e5e5;--text-muted: #737373;--text-dim: #525252;--accent: #d4a27f;--accent-hover: #e8b898;--badge-text: #141414;--glass-bg: rgba(20, 20, 20, .85);--glass-border: rgba(255, 255, 255, .08);--chip-bg: rgba(42, 42, 42, .7);--chip-bg-active: rgba(42, 42, 42, .9);--chip-bg-hover: rgba(50, 50, 50, .9);--chip-border-active: rgba(255, 255, 255, .06);--shadow: rgba(0, 0, 0, .6);--shadow-strong: rgba(0, 0, 0, .5);--canvas-edge: rgba(255, 255, 255, .08);--canvas-edge-highlight: rgba(212, 162, 127, .5);--canvas-edge-dim: rgba(255, 255, 255, .03);--canvas-edge-label: rgba(255, 255, 255, .2);--canvas-edge-label-highlight: rgba(212, 162, 127, .7);--canvas-edge-label-dim: rgba(255, 255, 255, .05);--canvas-arrow: rgba(255, 255, 255, .12);--canvas-arrow-highlight: rgba(212, 162, 127, .5);--canvas-node-label: #a3a3a3;--canvas-node-label-dim: rgba(212, 212, 212, .2);--canvas-type-badge: rgba(115, 115, 115, .5);--canvas-type-badge-dim: rgba(115, 115, 115, .15);--canvas-selection-border: #d4d4d4;--canvas-node-border: rgba(255, 255, 255, .15)}[data-theme=light]{--bg: #f5f5f4;--bg-surface: #fafaf9;--bg-hover: #f0efee;--bg-active: #e7e5e4;--bg-elevated: #f0efee;--bg-inset: #e7e5e4;--border: #d6d3d1;--text: #292524;--text-strong: #1c1917;--text-muted: #78716c;--text-dim: #a8a29e;--accent: #c17856;--accent-hover: #b07a5e;--badge-text: #fafaf9;--glass-bg: rgba(250, 250, 249, .85);--glass-border: rgba(0, 0, 0, .08);--chip-bg: rgba(214, 211, 209, .5);--chip-bg-active: rgba(214, 211, 209, .8);--chip-bg-hover: rgba(200, 197, 195, .8);--chip-border-active: rgba(0, 0, 0, .08);--shadow: rgba(0, 0, 0, .1);--shadow-strong: rgba(0, 0, 0, .15);--canvas-edge: rgba(0, 0, 0, .1);--canvas-edge-highlight: rgba(193, 120, 86, .6);--canvas-edge-dim: rgba(0, 0, 0, .03);--canvas-edge-label: rgba(0, 0, 0, .25);--canvas-edge-label-highlight: rgba(193, 120, 86, .8);--canvas-edge-label-dim: rgba(0, 0, 0, .06);--canvas-arrow: rgba(0, 0, 0, .15);--canvas-arrow-highlight: rgba(193, 120, 86, .6);--canvas-node-label: #57534e;--canvas-node-label-dim: rgba(87, 83, 78, .2);--canvas-type-badge: rgba(87, 83, 78, .5);--canvas-type-badge-dim: rgba(87, 83, 78, .15);--canvas-selection-border: #292524;--canvas-node-border: rgba(0, 0, 0, .1)}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;height:100vh;width:100vw}#sidebar{width:280px;min-width:280px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px;overflow-y:auto}#sidebar h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:14px}#sidebar input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px;outline:none;margin-bottom:12px}#sidebar input:focus{border-color:var(--accent)}#sidebar input::placeholder{color:var(--text-dim)}#ontology-list{list-style:none;display:flex;flex-direction:column;gap:2px}.ontology-item{padding:10px 12px;border-radius:6px;cursor:pointer;transition:background .15s}.ontology-item:hover{background:var(--bg-hover)}.ontology-item.active{background:var(--bg-active)}.ontology-item .name{display:block;font-size:13px;font-weight:500;color:var(--text)}.ontology-item .stats{display:block;font-size:11px;color:var(--text-dim);margin-top:2px}.sidebar-edit-btn{position:absolute;right:8px;top:10px;background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;opacity:0;transition:opacity .1s}.ontology-item{position:relative}.ontology-item:hover .sidebar-edit-btn{opacity:.7}.sidebar-edit-btn:hover{opacity:1!important;color:var(--text)}.sidebar-rename-input{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--text);font:inherit;font-size:13px;font-weight:500;outline:none;width:100%;padding:0}.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);text-align:center}.sidebar-footer a{display:block;font-size:12px;font-weight:500;color:var(--accent);text-decoration:none;margin-bottom:4px}.sidebar-footer a:hover{color:var(--accent-hover)}.sidebar-footer span{display:block;font-size:10px;color:var(--text-dim)}.theme-toggle{position:absolute;top:16px;right:16px;z-index:30;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;transition:color .15s,border-color .15s,background .15s;box-shadow:0 2px 8px var(--shadow)}.theme-toggle:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}.zoom-controls{position:absolute;top:16px;right:16px;z-index:30;display:flex;gap:4px;transition:right .2s ease}.theme-toggle~.zoom-controls{right:58px}.zoom-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;transition:color .15s,border-color .15s,background .15s;box-shadow:0 2px 8px var(--shadow)}.zoom-btn:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}#canvas-container{flex:1;position:relative;overflow:hidden;touch-action:none}#graph-canvas{position:absolute;top:0;left:0;touch-action:none;width:100%;height:100%;cursor:grab}#graph-canvas:active{cursor:grabbing}.search-overlay{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;max-height:calc(100vh - 48px);pointer-events:none}.search-overlay>*{pointer-events:auto}.search-overlay.hidden{display:none}.search-input-wrap{position:relative;display:flex;align-items:center;gap:6px;width:380px;max-width:calc(100vw - 340px)}.search-input{flex:1;min-width:0;padding:10px 36px 10px 16px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#d4a27f66;box-shadow:0 0 0 3px #d4a27f1a}.search-input::placeholder{color:var(--text-dim)}.search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:2px 7px;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface);color:var(--text-dim);font-size:11px;font-family:monospace;pointer-events:none}.search-kbd.hidden{display:none}.search-results{list-style:none;width:380px;max-width:calc(100vw - 340px);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 8px 32px var(--shadow-strong)}.search-results.hidden{display:none}.search-result-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .1s}.search-result-item:hover{background:var(--bg-hover)}.search-result-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.search-result-label{font-size:13px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-type{font-size:11px;color:var(--text-dim);flex-shrink:0}.chip-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-dim);cursor:pointer;transition:border-color .15s,color .15s;pointer-events:auto}.chip-toggle:hover{border-color:#d4a27f4d;color:var(--text)}.chip-toggle.active{border-color:#d4a27f66;color:var(--accent)}.type-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:500px;max-height:200px;overflow-y:auto;padding:4px;border-radius:10px}.type-chips.hidden{display:none}.type-chip{display:flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid transparent;border-radius:12px;background:var(--chip-bg);color:var(--text-dim);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}.type-chip.active{background:var(--chip-bg-active);color:var(--text-muted);border-color:var(--chip-border-active)}.type-chip:hover{background:var(--chip-bg-hover)}.type-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.type-chip:not(.active) .type-chip-dot{opacity:.3}.info-panel{position:absolute;top:56px;right:16px;width:360px;max-height:calc(100vh - 72px);background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow-y:auto;padding:20px;z-index:10;box-shadow:0 8px 32px var(--shadow);transition:top .25s ease,right .25s ease,bottom .25s ease,left .25s ease,width .25s ease,max-height .25s ease,border-radius .25s ease}.info-panel.hidden{display:none}.info-panel.info-panel-maximized{top:0;right:0;bottom:0;left:0;width:auto;max-height:none;border-radius:0;z-index:40}.info-panel-toolbar{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:2px;z-index:1}.info-toolbar-btn{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 6px;line-height:1;border-radius:4px;transition:color .15s,background .15s}.info-toolbar-btn:hover:not(:disabled){color:var(--text);background:var(--bg-hover)}.info-toolbar-btn:disabled{color:var(--text-dim);cursor:default;opacity:.3}.info-close-btn{font-size:20px}.info-connection-link{cursor:pointer;transition:background .15s}.info-connection-link:hover{background:var(--bg-active)}.info-connection-link .info-target{color:var(--accent);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}.info-connection-link:hover .info-target{text-decoration-color:var(--accent)}.info-header{margin-bottom:16px}.info-type-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;color:var(--badge-text);margin-bottom:8px}.info-label{font-size:18px;font-weight:600;color:var(--text-strong);margin-bottom:4px;word-break:break-word}.info-id{display:block;font-size:11px;color:var(--text-dim);font-family:monospace}.info-section{margin-bottom:16px}.info-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}.info-props{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.info-props dt{font-size:12px;color:var(--text-muted);padding-top:2px}.info-props dd{font-size:12px;color:var(--text);word-break:break-word;display:flex;align-items:center;gap:4px}.info-value{white-space:pre-wrap}.info-array{display:flex;flex-wrap:wrap;gap:4px}.info-tag{display:inline-block;padding:2px 8px;background:var(--bg-hover);border-radius:4px;font-size:11px;color:var(--text-muted)}.info-json{font-size:11px;font-family:monospace;color:var(--text-muted);background:var(--bg-inset);padding:6px 8px;border-radius:4px;overflow-x:auto;white-space:pre}.info-connections{list-style:none;display:flex;flex-direction:column;gap:6px}.info-connection{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-elevated);border-radius:6px;font-size:12px;flex-wrap:wrap}.info-target-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.info-arrow{color:var(--text-dim);font-size:14px;flex-shrink:0}.info-edge-type{color:var(--text-muted);font-size:11px;font-weight:500}.info-target{color:var(--text);font-weight:500}.info-edge-props{width:100%;padding-top:4px;padding-left:20px}.info-edge-prop{display:block;font-size:11px;color:var(--text-dim)}.info-editable{cursor:default;position:relative}.info-inline-edit{background:none;border:none;color:var(--badge-text);opacity:0;font-size:10px;cursor:pointer;margin-left:4px;transition:opacity .15s}.info-editable:hover .info-inline-edit{opacity:.8}.info-inline-edit:hover{opacity:1!important}.info-edit-inline-input{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--badge-text);font:inherit;font-size:inherit;outline:none;width:100%;padding:0}.info-edit-input{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:12px;color:var(--text);flex:1;min-width:0}.info-edit-input:focus{outline:none;border-color:var(--accent)}.info-delete-prop{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;padding:0 2px;flex-shrink:0;opacity:0;transition:opacity .1s,color .1s}.info-props dd:hover .info-delete-prop{opacity:1}.info-delete-prop:hover{color:#ef4444}.info-add-btn{background:none;border:1px dashed var(--border);border-radius:4px;padding:6px 10px;font-size:12px;color:var(--text-dim);cursor:pointer;width:100%;margin-top:8px;transition:border-color .15s,color .15s}.info-add-btn:hover{border-color:var(--accent);color:var(--text)}.info-add-row{display:flex;gap:4px;margin-top:6px}.info-add-save{background:var(--accent);border:none;border-radius:4px;padding:3px 10px;font-size:12px;color:var(--badge-text);cursor:pointer;flex-shrink:0}.info-add-save:hover{background:var(--accent-hover)}.info-delete-edge{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;margin-left:auto;padding:0 2px;opacity:0;transition:opacity .1s,color .1s}.info-connection:hover .info-delete-edge{opacity:1}.info-delete-edge:hover{color:#ef4444}.info-danger{margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}.info-delete-node{background:none;border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:6px 12px;font-size:12px;color:#ef4444;cursor:pointer;width:100%;transition:background .15s}.info-delete-node:hover{background:#ef44441a}@media(max-width:768px){.info-panel{top:auto;bottom:72px;right:8px;left:8px;width:auto;max-height:calc(100% - 200px);overflow-y:auto}.info-panel.info-panel-maximized{bottom:0;left:0;right:0}}