backpack-viewer 0.2.17 → 0.2.20

package/dist/canvas.js

@@ -6,19 +6,18 @@ function cssVar(name) {
 }
 const NODE_RADIUS = 20;
 const ALPHA_MIN = 0.001;
-// Level-of-detail thresholds based on camera scale
-const LOD_HIDE_BADGES = 0.4; // hide type badges above nodes
-const LOD_HIDE_LABELS = 0.25; // hide node labels below nodes
-const LOD_HIDE_EDGE_LABELS = 0.35; // hide edge labels even if enabled
-const LOD_SMALL_NODES = 0.2; // shrink nodes to half size
-const LOD_HIDE_ARROWS = 0.15; // hide arrowheads, draw 1px edges
+// Defaults — overridden per-instance via config
+const LOD_DEFAULTS = { hideBadges: 0.4, hideLabels: 0.25, hideEdgeLabels: 0.35, smallNodes: 0.2, hideArrows: 0.15 };
+const NAV_DEFAULTS = { zoomFactor: 1.3, zoomMin: 0.05, zoomMax: 10, panAnimationMs: 300 };
 /** Check if a point is within the visible viewport (with padding). */
 function isInViewport(x, y, camera, canvasW, canvasH, pad = 100) {
     const sx = (x - camera.x) * camera.scale;
     const sy = (y - camera.y) * camera.scale;
     return sx >= -pad && sx <= canvasW + pad && sy >= -pad && sy <= canvasH + pad;
 }
-export function initCanvas(container, onNodeClick, onFocusChange) {
+export function initCanvas(container, onNodeClick, onFocusChange, config) {
+    const lod = { ...LOD_DEFAULTS, ...(config?.lod ?? {}) };
+    const nav = { ...NAV_DEFAULTS, ...(config?.navigation ?? {}) };
     const canvas = container.querySelector("canvas");
     const ctx = canvas.getContext("2d");
     const dpr = window.devicePixelRatio || 1;
@@ -41,7 +40,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
     // Pan animation state
     let panTarget = null;
     let panStart = null;
-    const PAN_DURATION = 300;
+    const PAN_DURATION = nav.panAnimationMs;
     // --- Sizing ---
     function resize() {
         canvas.width = canvas.clientWidth * dpr;
@@ -102,7 +101,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
         ctx.translate(-camera.x * camera.scale, -camera.y * camera.scale);
         ctx.scale(camera.scale, camera.scale);
         // Draw type hulls (shaded regions behind same-type nodes)
-        if (showTypeHulls && camera.scale >= LOD_SMALL_NODES) {
+        if (showTypeHulls && camera.scale >= lod.smallNodes) {
             const typeGroups = new Map();
             for (const node of state.nodes) {
                 if (filteredNodeIds !== null && !filteredNodeIds.has(node.id))
@@ -181,14 +180,14 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
                     : edgeDimmed
                         ? edgeDimColor
                         : edgeColor;
-                ctx.lineWidth = camera.scale < LOD_HIDE_ARROWS ? 1 : highlighted ? 2.5 : 1.5;
+                ctx.lineWidth = camera.scale < lod.hideArrows ? 1 : highlighted ? 2.5 : 1.5;
                 ctx.stroke();
                 // Arrowhead
-                if (camera.scale >= LOD_HIDE_ARROWS) {
+                if (camera.scale >= lod.hideArrows) {
                     drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
                 }
                 // Edge label at midpoint
-                if (showEdgeLabels && camera.scale >= LOD_HIDE_EDGE_LABELS) {
+                if (showEdgeLabels && camera.scale >= lod.hideEdgeLabels) {
                     const mx = (source.x + target.x) / 2;
                     const my = (source.y + target.y) / 2;
                     ctx.fillStyle = highlighted
@@ -215,7 +214,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             const filteredOut = filteredNodeIds !== null && !filteredNodeIds.has(node.id);
             const dimmed = filteredOut ||
                 (selectedNodeIds.size > 0 && !isSelected && !isNeighbor);
-            const r = camera.scale < LOD_SMALL_NODES ? NODE_RADIUS * 0.5 : NODE_RADIUS;
+            const r = camera.scale < lod.smallNodes ? NODE_RADIUS * 0.5 : NODE_RADIUS;
             // Glow for selected node
             if (isSelected) {
                 ctx.save();
@@ -238,7 +237,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             ctx.lineWidth = isSelected ? 3 : 1.5;
             ctx.stroke();
             // Label below
-            if (camera.scale >= LOD_HIDE_LABELS) {
+            if (camera.scale >= lod.hideLabels) {
                 const label = node.label.length > 24 ? node.label.slice(0, 22) + "..." : node.label;
                 ctx.fillStyle = dimmed ? nodeLabelDim : nodeLabel;
                 ctx.font = "11px system-ui, sans-serif";
@@ -247,7 +246,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
                 ctx.fillText(label, node.x, node.y + r + 4);
             }
             // Type badge above
-            if (camera.scale >= LOD_HIDE_BADGES) {
+            if (camera.scale >= lod.hideBadges) {
                 ctx.fillStyle = dimmed ? typeBadgeDim : typeBadge;
                 ctx.font = "9px system-ui, sans-serif";
                 ctx.textBaseline = "bottom";
@@ -471,7 +470,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             : e.deltaY > 0
                 ? 0.9
                 : 1.1;
-        camera.scale = Math.max(0.05, Math.min(10, camera.scale * factor));
+        camera.scale = Math.max(nav.zoomMin, Math.min(nav.zoomMax, camera.scale * factor));
         camera.x = wx - mx / camera.scale;
         camera.y = wy - my / camera.scale;
         render();
@@ -504,7 +503,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
         if (current.length === 2 && touches.length === 2) {
             const dist = touchDistance(current[0], current[1]);
             const ratio = dist / initialPinchDist;
-            camera.scale = Math.max(0.05, Math.min(10, initialPinchScale * ratio));
+            camera.scale = Math.max(nav.zoomMin, Math.min(nav.zoomMax, initialPinchScale * ratio));
             render();
         }
         else if (current.length === 1) {
@@ -567,7 +566,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
         const cx = canvas.clientWidth / 2;
         const cy = canvas.clientHeight / 2;
         const [wx, wy] = screenToWorld(cx, cy);
-        camera.scale = Math.min(10, camera.scale * 1.3);
+        camera.scale = Math.min(nav.zoomMax, camera.scale * nav.zoomFactor);
         camera.x = wx - cx / camera.scale;
         camera.y = wy - cy / camera.scale;
         render();
@@ -580,7 +579,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
         const cx = canvas.clientWidth / 2;
         const cy = canvas.clientHeight / 2;
         const [wx, wy] = screenToWorld(cx, cy);
-        camera.scale = Math.max(0.05, camera.scale / 1.3);
+        camera.scale = Math.max(nav.zoomMin, camera.scale / nav.zoomFactor);
         camera.x = wx - cx / camera.scale;
         camera.y = wy - cy / camera.scale;
         render();
@@ -750,7 +749,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             const cx = canvas.clientWidth / 2;
             const cy = canvas.clientHeight / 2;
             const [wx, wy] = screenToWorld(cx, cy);
-            camera.scale = Math.max(0.05, Math.min(10, camera.scale * factor));
+            camera.scale = Math.max(nav.zoomMin, Math.min(nav.zoomMax, camera.scale * factor));
             camera.x = wx - cx / camera.scale;
             camera.y = wy - cy / camera.scale;
             render();

package/dist/config.js

@@ -16,13 +16,14 @@ export function loadViewerConfig() {
     const filePath = viewerConfigFile();
     try {
         const raw = fs.readFileSync(filePath, "utf-8");
-        const userConfig = JSON.parse(raw);
+        const user = JSON.parse(raw);
         return {
-            ...defaultConfig,
-            keybindings: {
-                ...defaultConfig.keybindings,
-                ...(userConfig.keybindings ?? {}),
-            },
+            keybindings: { ...defaultConfig.keybindings, ...(user.keybindings ?? {}) },
+            display: { ...defaultConfig.display, ...(user.display ?? {}) },
+            layout: { ...defaultConfig.layout, ...(user.layout ?? {}) },
+            navigation: { ...defaultConfig.navigation, ...(user.navigation ?? {}) },
+            lod: { ...defaultConfig.lod, ...(user.lod ?? {}) },
+            limits: { ...defaultConfig.limits, ...(user.limits ?? {}) },
         };
     }
     catch {

package/dist/default-config.json

@@ -28,6 +28,39 @@
         "spacingDecrease": "[",
         "spacingIncrease": "]",
         "clusteringDecrease": "{",
-        "clusteringIncrease": "}"
+        "clusteringIncrease": "}",
+        "toggleSidebar": "Tab"
+    },
+    "display": {
+        "edges": true,
+        "edgeLabels": true,
+        "typeHulls": true,
+        "minimap": true,
+        "theme": "system"
+    },
+    "layout": {
+        "spacing": 1.5,
+        "clustering": 0.08
+    },
+    "navigation": {
+        "panSpeed": 60,
+        "panFastMultiplier": 3,
+        "zoomFactor": 1.3,
+        "zoomMin": 0.05,
+        "zoomMax": 10,
+        "panAnimationMs": 300
+    },
+    "lod": {
+        "hideBadges": 0.4,
+        "hideLabels": 0.25,
+        "hideEdgeLabels": 0.35,
+        "smallNodes": 0.2,
+        "hideArrows": 0.15
+    },
+    "limits": {
+        "maxSearchResults": 8,
+        "maxQualityItems": 5,
+        "maxMostConnected": 5,
+        "searchDebounceMs": 150
     }
 }

package/dist/dialog.d.ts

@@ -0,0 +1,9 @@
+/** Lightweight inline dialog system — replaces native alert/confirm/prompt. */
+/** Show a confirmation dialog. Returns a promise that resolves to true/false. */
+export declare function showConfirm(title: string, message: string): Promise<boolean>;
+/** Show a prompt dialog with an input field. Returns null if cancelled. */
+export declare function showPrompt(title: string, placeholder?: string, defaultValue?: string): Promise<string | null>;
+/** Show a danger confirmation (for destructive actions). */
+export declare function showDangerConfirm(title: string, message: string): Promise<boolean>;
+/** Show a brief toast notification. */
+export declare function showToast(message: string, durationMs?: number): void;

package/dist/dialog.js

@@ -0,0 +1,119 @@
+/** Lightweight inline dialog system — replaces native alert/confirm/prompt. */
+const DIALOG_CSS_CLASS = "bp-dialog-overlay";
+function createOverlay() {
+    // Remove any existing dialog
+    document.querySelector(`.${DIALOG_CSS_CLASS}`)?.remove();
+    const overlay = document.createElement("div");
+    overlay.className = DIALOG_CSS_CLASS;
+    document.body.appendChild(overlay);
+    return overlay;
+}
+function createModal(overlay, title) {
+    const modal = document.createElement("div");
+    modal.className = "bp-dialog";
+    const heading = document.createElement("h4");
+    heading.className = "bp-dialog-title";
+    heading.textContent = title;
+    modal.appendChild(heading);
+    overlay.appendChild(modal);
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay)
+            overlay.remove();
+    });
+    return modal;
+}
+function addButtons(modal, buttons) {
+    const row = document.createElement("div");
+    row.className = "bp-dialog-buttons";
+    for (const btn of buttons) {
+        const el = document.createElement("button");
+        el.className = "bp-dialog-btn";
+        if (btn.accent)
+            el.classList.add("bp-dialog-btn-accent");
+        if (btn.danger)
+            el.classList.add("bp-dialog-btn-danger");
+        el.textContent = btn.label;
+        el.addEventListener("click", btn.onClick);
+        row.appendChild(el);
+    }
+    modal.appendChild(row);
+}
+/** Show a confirmation dialog. Returns a promise that resolves to true/false. */
+export function showConfirm(title, message) {
+    return new Promise((resolve) => {
+        const overlay = createOverlay();
+        const modal = createModal(overlay, title);
+        const msg = document.createElement("p");
+        msg.className = "bp-dialog-message";
+        msg.textContent = message;
+        modal.appendChild(msg);
+        addButtons(modal, [
+            { label: "Cancel", onClick: () => { overlay.remove(); resolve(false); } },
+            { label: "Confirm", accent: true, onClick: () => { overlay.remove(); resolve(true); } },
+        ]);
+        // Focus the confirm button
+        modal.querySelector(".bp-dialog-btn-accent")?.focus();
+    });
+}
+/** Show a prompt dialog with an input field. Returns null if cancelled. */
+export function showPrompt(title, placeholder, defaultValue) {
+    return new Promise((resolve) => {
+        const overlay = createOverlay();
+        const modal = createModal(overlay, title);
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "bp-dialog-input";
+        input.placeholder = placeholder ?? "";
+        input.value = defaultValue ?? "";
+        modal.appendChild(input);
+        const submit = () => {
+            const val = input.value.trim();
+            overlay.remove();
+            resolve(val || null);
+        };
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter")
+                submit();
+            if (e.key === "Escape") {
+                overlay.remove();
+                resolve(null);
+            }
+        });
+        addButtons(modal, [
+            { label: "Cancel", onClick: () => { overlay.remove(); resolve(null); } },
+            { label: "OK", accent: true, onClick: submit },
+        ]);
+        input.focus();
+        input.select();
+    });
+}
+/** Show a danger confirmation (for destructive actions). */
+export function showDangerConfirm(title, message) {
+    return new Promise((resolve) => {
+        const overlay = createOverlay();
+        const modal = createModal(overlay, title);
+        const msg = document.createElement("p");
+        msg.className = "bp-dialog-message";
+        msg.textContent = message;
+        modal.appendChild(msg);
+        addButtons(modal, [
+            { label: "Cancel", onClick: () => { overlay.remove(); resolve(false); } },
+            { label: "Delete", danger: true, onClick: () => { overlay.remove(); resolve(true); } },
+        ]);
+    });
+}
+/** Show a brief toast notification. */
+export function showToast(message, durationMs = 3000) {
+    const existing = document.querySelector(".bp-toast");
+    if (existing)
+        existing.remove();
+    const toast = document.createElement("div");
+    toast.className = "bp-toast";
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.classList.add("bp-toast-visible"), 10);
+    setTimeout(() => {
+        toast.classList.remove("bp-toast-visible");
+        setTimeout(() => toast.remove(), 300);
+    }, durationMs);
+}

package/dist/info-panel.js

@@ -132,8 +132,11 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         panel.classList.remove("hidden");
         if (maximized)
             panel.classList.add("info-panel-maximized");
+        // Pinned header area (toolbar + node identity)
+        const pinnedHeader = document.createElement("div");
+        pinnedHeader.className = "info-panel-header";
         // Toolbar (back, forward, maximize, close)
-        panel.appendChild(createToolbar());
+        pinnedHeader.appendChild(createToolbar());
         // Header: type badge + label
         const header = document.createElement("div");
         header.className = "info-header";
@@ -187,7 +190,11 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         header.appendChild(typeBadge);
         header.appendChild(label);
         header.appendChild(nodeIdEl);
-        panel.appendChild(header);
+        pinnedHeader.appendChild(header);
+        panel.appendChild(pinnedHeader);
+        // Scrollable body for properties, connections, timestamps
+        const body = document.createElement("div");
+        body.className = "info-panel-body";
         // Properties section (editable)
         const propKeys = Object.keys(node.properties);
         const propSection = createSection("Properties");
@@ -272,7 +279,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             });
             propSection.appendChild(addBtn);
         }
-        panel.appendChild(propSection);
+        body.appendChild(propSection);
         // Connections section
         if (connectedEdges.length > 0) {
             const section = createSection(`Connections (${connectedEdges.length})`);
@@ -341,7 +348,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
                 list.appendChild(li);
             }
             section.appendChild(list);
-            panel.appendChild(section);
+            body.appendChild(section);
         }
         // Timestamps
         const tsSection = createSection("Timestamps");
@@ -360,7 +367,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         timestamps.appendChild(updatedDt);
         timestamps.appendChild(updatedDd);
         tsSection.appendChild(timestamps);
-        panel.appendChild(tsSection);
+        body.appendChild(tsSection);
         // Delete node button
         if (callbacks) {
             const deleteSection = document.createElement("div");
@@ -373,8 +380,9 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
                 hide();
             });
             deleteSection.appendChild(deleteBtn);
-            panel.appendChild(deleteSection);
+            body.appendChild(deleteSection);
         }
+        panel.appendChild(body);
     }
     function showMulti(nodeIds, data) {
         const selectedSet = new Set(nodeIds);

package/dist/keybindings.d.ts

@@ -1,4 +1,4 @@
-export type KeybindingAction = "search" | "searchAlt" | "undo" | "redo" | "help" | "escape" | "focus" | "toggleEdges" | "center" | "nextNode" | "prevNode" | "nextConnection" | "prevConnection" | "historyBack" | "historyForward" | "hopsIncrease" | "hopsDecrease" | "panLeft" | "panDown" | "panUp" | "panRight" | "panFastLeft" | "zoomOut" | "zoomIn" | "panFastRight" | "spacingDecrease" | "spacingIncrease" | "clusteringDecrease" | "clusteringIncrease";
+export type KeybindingAction = "search" | "searchAlt" | "undo" | "redo" | "help" | "escape" | "focus" | "toggleEdges" | "center" | "nextNode" | "prevNode" | "nextConnection" | "prevConnection" | "historyBack" | "historyForward" | "hopsIncrease" | "hopsDecrease" | "panLeft" | "panDown" | "panUp" | "panRight" | "panFastLeft" | "zoomOut" | "zoomIn" | "panFastRight" | "spacingDecrease" | "spacingIncrease" | "clusteringDecrease" | "clusteringIncrease" | "toggleSidebar";
 export type KeybindingMap = Record<KeybindingAction, string>;
 /** Parse a binding string like "ctrl+shift+z" and check if it matches a KeyboardEvent. */
 export declare function matchKey(e: KeyboardEvent, binding: string): boolean;

package/dist/keybindings.js

@@ -1,26 +1,34 @@
 /** Parse a binding string like "ctrl+shift+z" and check if it matches a KeyboardEvent. */
 export function matchKey(e, binding) {
-    const parts = binding.toLowerCase().split("+");
+    const parts = binding.split("+");
     const key = parts.pop();
-    const needCtrl = parts.includes("ctrl") || parts.includes("cmd") || parts.includes("meta");
-    const needShift = parts.includes("shift");
-    const needAlt = parts.includes("alt");
-    // Modifier checks
+    const modifiers = parts.map((p) => p.toLowerCase());
+    const needCtrl = modifiers.includes("ctrl") || modifiers.includes("cmd") || modifiers.includes("meta");
+    const explicitShift = modifiers.includes("shift");
+    const needAlt = modifiers.includes("alt");
+    // Ctrl/meta check
     if (needCtrl !== (e.ctrlKey || e.metaKey))
         return false;
-    if (needShift !== e.shiftKey)
+    if (!needCtrl && (e.ctrlKey || e.metaKey))
         return false;
-    if (needAlt !== e.altKey)
+    // Only enforce shift when explicitly in the binding (e.g. "ctrl+shift+z").
+    // Plain chars like "K", ">", "?" implicitly require shift via their character.
+    if (explicitShift && !e.shiftKey)
         return false;
-    // For plain keys (no modifiers required), reject if ctrl/meta is held
-    if (!needCtrl && (e.ctrlKey || e.metaKey))
+    // Alt check
+    if (needAlt !== e.altKey)
         return false;
-    // Key match — case-sensitive for single chars, case-insensitive for named keys
-    if (key === "escape")
+    // Named keys
+    if (key.toLowerCase() === "escape")
         return e.key === "Escape";
-    if (key.length === 1)
-        return e.key === binding.split("+").pop(); // preserve original case
-    return e.key.toLowerCase() === key;
+    if (key.toLowerCase() === "tab")
+        return e.key === "Tab";
+    // For modified bindings (ctrl+z, ctrl+shift+z), compare case-insensitively
+    // because browsers vary on e.key casing when modifiers are held.
+    if (modifiers.length > 0)
+        return e.key.toLowerCase() === key.toLowerCase();
+    // For plain keys, compare exactly — "k" vs "K" distinguishes shift state.
+    return e.key === key;
 }
 /** Build a reverse map: for each action, store its binding string. Used by the help modal. */
 export function actionDescriptions() {
@@ -54,5 +62,6 @@ export function actionDescriptions() {
         spacingIncrease: "Increase spacing",
         clusteringDecrease: "Decrease clustering",
         clusteringIncrease: "Increase clustering",
+        toggleSidebar: "Toggle sidebar",
     };
 }

package/dist/main.js

@@ -1,4 +1,4 @@
-import { listOntologies, loadOntology, saveOntology, renameOntology } from "./api";
+import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, } from "./api";
 import { initSidebar } from "./sidebar";
 import { initCanvas } from "./canvas";
 import { initInfoPanel } from "./info-panel";
@@ -15,20 +15,29 @@ let activeOntology = "";
 let currentData = null;
 async function main() {
     const canvasContainer = document.getElementById("canvas-container");
-    // --- Load config (keybindings) ---
-    let bindings = defaultConfig.keybindings;
+    // --- Load config ---
+    const cfg = { ...defaultConfig };
     try {
         const res = await fetch("/api/config");
         if (res.ok) {
-            const config = await res.json();
-            bindings = { ...bindings, ...(config.keybindings ?? {}) };
+            const user = await res.json();
+            Object.assign(cfg.keybindings, user.keybindings ?? {});
+            Object.assign(cfg.display, user.display ?? {});
+            Object.assign(cfg.layout, user.layout ?? {});
+            Object.assign(cfg.navigation, user.navigation ?? {});
+            Object.assign(cfg.lod, user.lod ?? {});
+            Object.assign(cfg.limits, user.limits ?? {});
         }
     }
     catch { /* use defaults */ }
+    const bindings = cfg.keybindings;
     // --- Theme toggle (top-right of canvas) ---
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+    const themeDefault = cfg.display.theme === "system"
+        ? (prefersDark.matches ? "dark" : "light")
+        : cfg.display.theme;
     const stored = localStorage.getItem("backpack-theme");
-    const initial = stored ?? (prefersDark.matches ? "dark" : "light");
+    const initial = stored ?? themeDefault;
     document.documentElement.setAttribute("data-theme", initial);
     const themeBtn = document.createElement("button");
     themeBtn.className = "theme-toggle";
@@ -138,8 +147,8 @@ async function main() {
     const mobileQuery = window.matchMedia("(max-width: 768px)");
     // Track current selection for keyboard shortcuts
     let currentSelection = [];
-    let edgesVisible = true;
-    let panSpeed = 60;
+    let edgesVisible = cfg.display.edges;
+    let panSpeed = cfg.navigation.panSpeed;
     let viewCycleIndex = -1;
     // --- Focus indicator (top bar pill) ---
     let focusIndicator = null;
@@ -215,8 +224,11 @@ async function main() {
             if (activeOntology)
                 updateUrl(activeOntology);
         }
+    }, { lod: cfg.lod, navigation: cfg.navigation });
+    const search = initSearch(canvasContainer, {
+        maxResults: cfg.limits.maxSearchResults,
+        debounceMs: cfg.limits.searchDebounceMs,
     });
-    const search = initSearch(canvasContainer);
     const toolsPane = initToolsPane(canvasContainer, {
         onFilterByType(type) {
             if (!currentData)
@@ -293,6 +305,22 @@ async function main() {
             link.href = dataUrl;
             link.click();
         },
+        onSnapshot: async (label) => {
+            if (!activeOntology)
+                return;
+            await createSnapshot(activeOntology, label);
+            await refreshSnapshots(activeOntology);
+        },
+        onRollback: async (version) => {
+            if (!activeOntology)
+                return;
+            await rollbackSnapshot(activeOntology, version);
+            currentData = await loadOntology(activeOntology);
+            canvas.loadGraph(currentData);
+            search.setLearningGraphData(currentData);
+            toolsPane.setData(currentData);
+            await refreshSnapshots(activeOntology);
+        },
         onOpen() {
             if (mobileQuery.matches)
                 infoPanel.hide();
@@ -354,9 +382,46 @@ async function main() {
                 toolsPane.setData(currentData);
             }
         },
+        onBranchSwitch: async (graphName, branchName) => {
+            await switchBranch(graphName, branchName);
+            await refreshBranches(graphName);
+            currentData = await loadOntology(graphName);
+            canvas.loadGraph(currentData);
+            search.setLearningGraphData(currentData);
+            toolsPane.setData(currentData);
+            await refreshSnapshots(graphName);
+        },
+        onBranchCreate: async (graphName, branchName) => {
+            await createBranch(graphName, branchName);
+            await refreshBranches(graphName);
+        },
+        onBranchDelete: async (graphName, branchName) => {
+            await deleteBranch(graphName, branchName);
+            await refreshBranches(graphName);
+        },
     });
+    async function refreshBranches(graphName) {
+        const branches = await listBranches(graphName);
+        const active = branches.find((b) => b.active);
+        if (active) {
+            sidebar.setActiveBranch(graphName, active.name, branches);
+        }
+    }
+    async function refreshSnapshots(graphName) {
+        const snaps = await listSnapshots(graphName);
+        toolsPane.setSnapshots(snaps);
+    }
     const shortcuts = initShortcuts(canvasContainer, bindings);
     const emptyState = initEmptyState(canvasContainer);
+    // Apply display defaults from config
+    if (!cfg.display.edges)
+        canvas.setEdges(false);
+    if (!cfg.display.edgeLabels)
+        canvas.setEdgeLabels(false);
+    if (!cfg.display.typeHulls)
+        canvas.setTypeHulls(false);
+    if (!cfg.display.minimap)
+        canvas.setMinimap(false);
     // --- URL deep linking ---
     function updateUrl(name, nodeIds) {
         const parts = [];
@@ -403,12 +468,19 @@ async function main() {
         search.clear();
         undoHistory.clear();
         currentData = await loadOntology(name);
-        setLayoutParams(autoLayoutParams(currentData.nodes.length));
+        const autoParams = autoLayoutParams(currentData.nodes.length);
+        setLayoutParams({
+            spacing: Math.max(cfg.layout.spacing, autoParams.spacing),
+            clusterStrength: Math.max(cfg.layout.clustering, autoParams.clusterStrength),
+        });
         canvas.loadGraph(currentData);
         search.setLearningGraphData(currentData);
         toolsPane.setData(currentData);
         emptyState.hide();
         updateUrl(name);
+        // Load branches and snapshots
+        await refreshBranches(name);
+        await refreshSnapshots(name);
         // Restore focus mode if requested
         if (focusSeedIds?.length && currentData) {
             const validFocus = focusSeedIds.filter((id) => currentData.nodes.some((n) => n.id === id));
@@ -504,15 +576,16 @@ async function main() {
         panDown() { canvas.panBy(0, panSpeed); },
         panUp() { canvas.panBy(0, -panSpeed); },
         panRight() { canvas.panBy(panSpeed, 0); },
-        panFastLeft() { canvas.panBy(-panSpeed * 3, 0); },
-        zoomOut() { canvas.zoomBy(0.8); },
-        zoomIn() { canvas.zoomBy(1.25); },
-        panFastRight() { canvas.panBy(panSpeed * 3, 0); },
+        panFastLeft() { canvas.panBy(-panSpeed * cfg.navigation.panFastMultiplier, 0); },
+        zoomOut() { canvas.zoomBy(1 / cfg.navigation.zoomFactor); },
+        zoomIn() { canvas.zoomBy(cfg.navigation.zoomFactor); },
+        panFastRight() { canvas.panBy(panSpeed * cfg.navigation.panFastMultiplier, 0); },
         spacingDecrease() { const p = getLayoutParams(); setLayoutParams({ spacing: Math.max(0.5, p.spacing - 0.5) }); canvas.reheat(); },
         spacingIncrease() { const p = getLayoutParams(); setLayoutParams({ spacing: Math.min(20, p.spacing + 0.5) }); canvas.reheat(); },
         clusteringDecrease() { const p = getLayoutParams(); setLayoutParams({ clusterStrength: Math.max(0, p.clusterStrength - 0.03) }); canvas.reheat(); },
         clusteringIncrease() { const p = getLayoutParams(); setLayoutParams({ clusterStrength: Math.min(1, p.clusterStrength + 0.03) }); canvas.reheat(); },
         help() { shortcuts.toggle(); },
+        toggleSidebar() { sidebar.toggle(); },
         escape() { if (canvas.isFocused()) {
             toolsPane.clearFocusSet();
         }
@@ -525,7 +598,7 @@ async function main() {
             return;
         for (const [action, binding] of Object.entries(bindings)) {
             if (matchKey(e, binding)) {
-                const needsPrevent = action === "search" || action === "searchAlt" || action === "undo" || action === "redo";
+                const needsPrevent = action === "search" || action === "searchAlt" || action === "undo" || action === "redo" || action === "toggleSidebar";
                 if (needsPrevent)
                     e.preventDefault();
                 actions[action]?.();

package/dist/search.d.ts

@@ -1,5 +1,9 @@
 import type { LearningGraphData } from "backpack-ontology";
-export declare function initSearch(container: HTMLElement): {
+export interface SearchConfig {
+    maxResults?: number;
+    debounceMs?: number;
+}
+export declare function initSearch(container: HTMLElement, config?: SearchConfig): {
     setLearningGraphData(newData: LearningGraphData | null): void;
     onFilterChange(cb: (ids: Set<string> | null) => void): void;
     onNodeSelect(cb: (nodeId: string) => void): void;