backpack-viewer 0.2.16 → 0.2.19

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

@@ -0,0 +1 @@
+*{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.sidebar-collapsed{width:0;min-width:0;padding:0;overflow:hidden;border-right:none}.sidebar-heading-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.sidebar-heading-row h2{margin-bottom:0}.sidebar-collapse-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;padding:4px 6px;line-height:1;transition:color .15s,border-color .15s}.sidebar-collapse-btn:hover{color:var(--text);border-color:var(--text-muted)}#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-branch{font-size:10px;color:var(--accent);opacity:.7;display:block;margin-top:2px}.sidebar-branch:hover{opacity:1}.branch-picker{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:4px;margin-top:4px;box-shadow:0 4px 16px var(--shadow);z-index:50}.branch-picker-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:12px;color:var(--text);border-radius:4px;cursor:pointer}.branch-picker-item:hover{background:var(--bg-hover)}.branch-picker-active{color:var(--accent);font-weight:600;cursor:default}.branch-picker-active:hover{background:none}.branch-picker-delete{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:0 4px}.branch-picker-delete:hover{color:var(--danger, #e55)}.branch-picker-create{color:var(--accent);font-size:11px;border-top:1px solid var(--border);margin-top:4px;padding-top:8px}.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)}.canvas-top-bar{position:absolute;top:16px;left:16px;right:16px;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.canvas-top-left,.canvas-top-center,.canvas-top-right{pointer-events:auto;display:flex;align-items:center;gap:4px}.canvas-top-left{flex-shrink:0;min-width:var(--tools-width, 264px)}.canvas-top-center{flex:1;justify-content:center}.focus-indicator{display:flex;align-items:center;gap:2px;background:var(--bg-surface);border:1px solid rgba(212,162,127,.4);border-radius:8px;padding:4px 6px 4px 10px;box-shadow:0 2px 8px var(--shadow)}.focus-indicator-label{font-size:11px;color:var(--accent);font-weight:500;white-space:nowrap;margin-right:4px}.focus-indicator-hops{font-size:11px;color:var(--text-muted);font-family:monospace;min-width:12px;text-align:center}.focus-indicator-btn{background:none;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:2px 4px;line-height:1;border-radius:4px;transition:color .15s,background .15s}.focus-indicator-btn:hover:not(:disabled){color:var(--text);background:var(--bg-hover)}.focus-indicator-btn:disabled{color:var(--text-dim);cursor:default;opacity:.3}.focus-indicator-exit{font-size:16px;margin-left:2px}.focus-indicator-exit:hover{color:#ef4444!important}.info-focus-btn{font-size:14px}.theme-toggle{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{display:flex;gap:4px}.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:relative;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,.search-result-active{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;bottom:16px;width:360px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;padding:0;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-header{flex-shrink:0;padding:20px 20px 12px;position:relative}.info-panel-body{flex:1;overflow-y:auto;min-height:0;padding:0 20px 20px}.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-connection-active{outline:1.5px solid var(--accent);background:var(--bg-hover)}.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;font-family:inherit;color:var(--text);flex:1;min-width:0;resize:vertical;overflow:hidden;line-height:1.4;max-height:300px}.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}.tools-pane-toggle{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)}.tools-pane-toggle.hidden{display:none}.tools-pane-toggle:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}.tools-pane-toggle.active{color:var(--accent);border-color:#d4a27f66}.tools-pane-content{position:absolute;top:56px;left:16px;bottom:16px;z-index:20;width:var(--tools-width, 264px);box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 8px 32px var(--shadow)}.tools-pane-content.hidden{display:none}.tools-pane-section{margin-bottom:12px}.tools-pane-section:last-child{margin-bottom:0}.tools-pane-heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:6px}.tools-pane-row{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:12px}.tools-pane-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.tools-pane-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tools-pane-count{color:var(--text-dim);font-size:11px;flex-shrink:0}.tools-pane-summary{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}.tools-pane-sep{color:var(--text-dim)}.tools-pane-clickable{cursor:pointer;border-radius:4px;padding:3px 4px;margin:0 -4px;transition:background .1s}.tools-pane-clickable:hover{background:var(--bg-hover)}.tools-pane-clickable.active{background:var(--bg-hover);outline:1px solid var(--border)}.tools-pane-badge{font-size:9px;color:var(--accent);flex-shrink:0;opacity:.8}.tools-pane-issue .tools-pane-name{color:var(--text-muted)}.tools-pane-more{font-size:10px;color:var(--text-dim);padding:4px 0 0}.tools-pane-edit{background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;padding:0 2px;opacity:0;transition:opacity .1s,color .1s;flex-shrink:0}.tools-pane-row:hover .tools-pane-edit{opacity:1}.tools-pane-edit:hover{color:var(--accent)}.tools-pane-focus-toggle{opacity:.4;font-size:11px}.tools-pane-focus-active{opacity:1!important;color:var(--accent)!important}.tools-pane-focus-clear{margin-top:4px;border-top:1px solid var(--border);padding-top:6px}.tools-pane-editing{background:none!important}.tools-pane-inline-input{width:100%;background:var(--bg);border:1px solid var(--accent);border-radius:4px;color:var(--text);font-size:12px;padding:2px 6px;outline:none}.tools-pane-slider-row{display:flex;align-items:center;gap:6px;padding:4px 0}.tools-pane-slider-label{font-size:11px;color:var(--text-muted);white-space:nowrap;min-width:56px}.tools-pane-slider{flex:1;min-width:0;height:4px;accent-color:var(--accent);cursor:pointer}.tools-pane-slider-value{font-size:10px;color:var(--text-dim);min-width:28px;text-align:right;font-family:monospace}.tools-pane-checkbox{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.tools-pane-export-row{display:flex;gap:4px;margin-top:6px}.tools-pane-export-btn{flex:1;padding:4px 8px;font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;transition:color .15s,border-color .15s}.tools-pane-export-btn:hover{color:var(--text);border-color:var(--text-muted)}.tools-pane-empty{font-size:11px;color:var(--text-dim);text-align:center;padding:8px 0}.tools-pane-tabs{display:flex;gap:2px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}.tools-pane-tab{flex:1;padding:4px 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background:none;border:1px solid transparent;border-radius:5px;color:var(--text-dim);cursor:pointer;transition:color .15s,background .15s,border-color .15s}.tools-pane-tab:hover{color:var(--text-muted);background:var(--bg-hover)}.tools-pane-tab-active{color:var(--text);background:var(--bg-hover);border-color:var(--border)}.tools-pane-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}.tools-pane-search{width:100%;padding:4px 8px;font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);outline:none;margin-bottom:8px;box-sizing:border-box}.tools-pane-search:focus{border-color:var(--accent)}.tools-pane-search::placeholder{color:var(--text-dim)}.tools-pane-empty-msg{font-size:11px;color:var(--text-dim);text-align:center;padding:16px 0}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}.empty-state.hidden{display:none}.empty-state-content{text-align:center;max-width:420px;padding:40px 24px}.empty-state-icon{color:var(--text-dim);margin-bottom:16px}.empty-state-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px}.empty-state-desc{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:20px}.empty-state-setup{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:16px}.empty-state-label{font-size:11px;color:var(--text-dim);margin-bottom:8px}.empty-state-code{display:block;font-size:12px;color:var(--accent);font-family:monospace;word-break:break-all}.empty-state-hint{font-size:11px;color:var(--text-dim)}.empty-state-hint kbd{padding:1px 5px;border:1px solid var(--border);border-radius:3px;background:var(--bg-surface);font-family:monospace;font-size:11px}.shortcuts-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.shortcuts-overlay.hidden{display:none}.shortcuts-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;min-width:300px;max-width:400px;box-shadow:0 16px 48px var(--shadow);position:relative}.shortcuts-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}.shortcuts-close:hover{color:var(--text)}.shortcuts-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px}.shortcuts-list{display:flex;flex-direction:column;gap:8px}.shortcuts-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.shortcuts-keys{display:flex;align-items:center;gap:4px}.shortcuts-keys kbd{padding:2px 7px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);font-size:11px;font-family:monospace}.shortcuts-or{font-size:10px;color:var(--text-dim)}.shortcuts-desc{font-size:12px;color:var(--text-muted)}@media(max-width:768px){#app{flex-direction:column}#sidebar{width:100%;min-width:0;max-height:35vh;border-right:none;border-bottom:1px solid var(--border)}.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}.canvas-top-bar{top:8px;left:8px;right:8px}.tools-pane-content{top:48px;left:8px;bottom:80px;width:160px;max-width:calc(100vw - 24px)}.tools-pane-edit{opacity:.6}}.bp-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.bp-dialog{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:20px;min-width:280px;max-width:400px;box-shadow:0 16px 48px #0000004d}.bp-dialog-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px}.bp-dialog-message{font-size:13px;color:var(--text-muted);margin-bottom:16px;line-height:1.5}.bp-dialog-input{width:100%;padding:8px 12px;font-size:13px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none;margin-bottom:16px}.bp-dialog-input:focus{border-color:var(--accent)}.bp-dialog-buttons{display:flex;justify-content:flex-end;gap:8px}.bp-dialog-btn{padding:6px 16px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text-muted);cursor:pointer;transition:all .15s}.bp-dialog-btn:hover{background:var(--bg-hover);color:var(--text)}.bp-dialog-btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}.bp-dialog-btn-accent:hover{opacity:.9;color:#fff;background:var(--accent)}.bp-dialog-btn-danger{background:#e55;color:#fff;border-color:#e55}.bp-dialog-btn-danger:hover{opacity:.9;color:#fff;background:#e55}.bp-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:var(--bg-surface);border:1px solid var(--border);color:var(--text);padding:8px 20px;border-radius:8px;font-size:12px;z-index:1001;opacity:0;transition:opacity .3s,transform .3s;box-shadow:0 4px 16px var(--shadow)}.bp-toast-visible{opacity:1;transform:translate(-50%) translateY(0)}

package/dist/app/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Backpack Viewer</title>
-    <script type="module" crossorigin src="/assets/index-Mi0vDG5K.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-z15vEFEy.css">
+    <script type="module" crossorigin src="/assets/index-CTM-vKgB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CjzMJjZ-.css">
   </head>
   <body>
     <div id="app">

package/dist/canvas.d.ts

@@ -1,22 +1,43 @@
 import type { LearningGraphData } from "backpack-ontology";
+export interface CanvasConfig {
+    lod?: {
+        hideBadges?: number;
+        hideLabels?: number;
+        hideEdgeLabels?: number;
+        smallNodes?: number;
+        hideArrows?: number;
+    };
+    navigation?: {
+        zoomFactor?: number;
+        zoomMin?: number;
+        zoomMax?: number;
+        panAnimationMs?: number;
+    };
+}
 export interface FocusInfo {
     seedNodeIds: string[];
     hops: number;
     totalNodes: number;
 }
-export declare function initCanvas(container: HTMLElement, onNodeClick?: (nodeIds: string[] | null) => void, onFocusChange?: (focus: FocusInfo | null) => void): {
+export declare function initCanvas(container: HTMLElement, onNodeClick?: (nodeIds: string[] | null) => void, onFocusChange?: (focus: FocusInfo | null) => void, config?: CanvasConfig): {
     loadGraph(data: LearningGraphData): void;
     setFilteredNodeIds(ids: Set<string> | null): void;
     panToNode(nodeId: string): void;
     panToNodes(nodeIds: string[]): void;
+    setEdges(visible: boolean): void;
     setEdgeLabels(visible: boolean): void;
     setTypeHulls(visible: boolean): void;
     setMinimap(visible: boolean): void;
+    centerView(): void;
+    panBy(dx: number, dy: number): void;
+    zoomBy(factor: number): void;
     reheat(): void;
     exportImage(format: "png" | "svg"): string;
     enterFocus(seedNodeIds: string[], hops: number): void;
     exitFocus(): void;
     isFocused(): boolean;
     getFocusInfo(): FocusInfo | null;
+    /** Get all node IDs in the current layout (subgraph if focused, full graph otherwise). Seed nodes first. */
+    getNodeIds(): string[];
     destroy(): void;
 };

package/dist/canvas.js

@@ -6,7 +6,18 @@ function cssVar(name) {
 }
 const NODE_RADIUS = 20;
 const ALPHA_MIN = 0.001;
-export function initCanvas(container, onNodeClick, onFocusChange) {
+// 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, 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;
@@ -16,6 +27,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
     let animFrame = 0;
     let selectedNodeIds = new Set();
     let filteredNodeIds = null; // null = no filter (show all)
+    let showEdges = true;
     let showEdgeLabels = true;
     let showTypeHulls = true;
     let showMinimap = true;
@@ -28,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;
@@ -89,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) {
+        if (showTypeHulls && camera.scale >= lod.smallNodes) {
             const typeGroups = new Map();
             for (const node of state.nodes) {
                 if (filteredNodeIds !== null && !filteredNodeIds.has(node.id))
@@ -134,56 +146,66 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             }
         }
         // Draw edges
-        for (const edge of state.edges) {
-            const source = state.nodeMap.get(edge.sourceId);
-            const target = state.nodeMap.get(edge.targetId);
-            if (!source || !target)
-                continue;
-            const sourceMatch = filteredNodeIds === null || filteredNodeIds.has(edge.sourceId);
-            const targetMatch = filteredNodeIds === null || filteredNodeIds.has(edge.targetId);
-            const bothMatch = sourceMatch && targetMatch;
-            // Hide edges where neither endpoint matches the filter
-            if (filteredNodeIds !== null && !sourceMatch && !targetMatch)
-                continue;
-            const isConnected = selectedNodeIds.size > 0 &&
-                (selectedNodeIds.has(edge.sourceId) || selectedNodeIds.has(edge.targetId));
-            const highlighted = isConnected || (filteredNodeIds !== null && bothMatch);
-            const edgeDimmed = filteredNodeIds !== null && !bothMatch;
-            // Self-loop
-            if (edge.sourceId === edge.targetId) {
-                drawSelfLoop(source, edge.type, highlighted, edgeColor, edgeHighlight, edgeLabel, edgeLabelHighlight);
-                continue;
-            }
-            // Line
-            ctx.beginPath();
-            ctx.moveTo(source.x, source.y);
-            ctx.lineTo(target.x, target.y);
-            ctx.strokeStyle = highlighted
-                ? edgeHighlight
-                : edgeDimmed
-                    ? edgeDimColor
-                    : edgeColor;
-            ctx.lineWidth = highlighted ? 2.5 : 1.5;
-            ctx.stroke();
-            // Arrowhead
-            drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
-            // Edge label at midpoint
-            if (showEdgeLabels) {
-                const mx = (source.x + target.x) / 2;
-                const my = (source.y + target.y) / 2;
-                ctx.fillStyle = highlighted
-                    ? edgeLabelHighlight
+        if (showEdges)
+            for (const edge of state.edges) {
+                const source = state.nodeMap.get(edge.sourceId);
+                const target = state.nodeMap.get(edge.targetId);
+                if (!source || !target)
+                    continue;
+                // Viewport culling — skip if both endpoints are off-screen
+                if (!isInViewport(source.x, source.y, camera, canvas.clientWidth, canvas.clientHeight, 200) &&
+                    !isInViewport(target.x, target.y, camera, canvas.clientWidth, canvas.clientHeight, 200))
+                    continue;
+                const sourceMatch = filteredNodeIds === null || filteredNodeIds.has(edge.sourceId);
+                const targetMatch = filteredNodeIds === null || filteredNodeIds.has(edge.targetId);
+                const bothMatch = sourceMatch && targetMatch;
+                // Hide edges where neither endpoint matches the filter
+                if (filteredNodeIds !== null && !sourceMatch && !targetMatch)
+                    continue;
+                const isConnected = selectedNodeIds.size > 0 &&
+                    (selectedNodeIds.has(edge.sourceId) || selectedNodeIds.has(edge.targetId));
+                const highlighted = isConnected || (filteredNodeIds !== null && bothMatch);
+                const edgeDimmed = filteredNodeIds !== null && !bothMatch;
+                // Self-loop
+                if (edge.sourceId === edge.targetId) {
+                    drawSelfLoop(source, edge.type, highlighted, edgeColor, edgeHighlight, edgeLabel, edgeLabelHighlight);
+                    continue;
+                }
+                // Line
+                ctx.beginPath();
+                ctx.moveTo(source.x, source.y);
+                ctx.lineTo(target.x, target.y);
+                ctx.strokeStyle = highlighted
+                    ? edgeHighlight
                     : edgeDimmed
-                        ? edgeLabelDim
-                        : edgeLabel;
-                ctx.font = "9px system-ui, sans-serif";
-                ctx.textAlign = "center";
-                ctx.textBaseline = "bottom";
-                ctx.fillText(edge.type, mx, my - 4);
+                        ? edgeDimColor
+                        : edgeColor;
+                ctx.lineWidth = camera.scale < lod.hideArrows ? 1 : highlighted ? 2.5 : 1.5;
+                ctx.stroke();
+                // Arrowhead
+                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.hideEdgeLabels) {
+                    const mx = (source.x + target.x) / 2;
+                    const my = (source.y + target.y) / 2;
+                    ctx.fillStyle = highlighted
+                        ? edgeLabelHighlight
+                        : edgeDimmed
+                            ? edgeLabelDim
+                            : edgeLabel;
+                    ctx.font = "9px system-ui, sans-serif";
+                    ctx.textAlign = "center";
+                    ctx.textBaseline = "bottom";
+                    ctx.fillText(edge.type, mx, my - 4);
+                }
             }
-        }
         // Draw nodes
         for (const node of state.nodes) {
+            // Viewport culling
+            if (!isInViewport(node.x, node.y, camera, canvas.clientWidth, canvas.clientHeight))
+                continue;
             const color = getColor(node.type);
             const isSelected = selectedNodeIds.has(node.id);
             const isNeighbor = selectedNodeIds.size > 0 &&
@@ -192,13 +214,14 @@ 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.smallNodes ? NODE_RADIUS * 0.5 : NODE_RADIUS;
             // Glow for selected node
             if (isSelected) {
                 ctx.save();
                 ctx.shadowColor = color;
                 ctx.shadowBlur = 20;
                 ctx.beginPath();
-                ctx.arc(node.x, node.y, NODE_RADIUS + 3, 0, Math.PI * 2);
+                ctx.arc(node.x, node.y, r + 3, 0, Math.PI * 2);
                 ctx.fillStyle = color;
                 ctx.globalAlpha = 0.3;
                 ctx.fill();
@@ -206,7 +229,7 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             }
             // Circle
             ctx.beginPath();
-            ctx.arc(node.x, node.y, NODE_RADIUS, 0, Math.PI * 2);
+            ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
             ctx.fillStyle = color;
             ctx.globalAlpha = filteredOut ? 0.1 : dimmed ? 0.3 : 1;
             ctx.fill();
@@ -214,17 +237,21 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             ctx.lineWidth = isSelected ? 3 : 1.5;
             ctx.stroke();
             // Label below
-            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";
-            ctx.textAlign = "center";
-            ctx.textBaseline = "top";
-            ctx.fillText(label, node.x, node.y + NODE_RADIUS + 4);
+            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";
+                ctx.textAlign = "center";
+                ctx.textBaseline = "top";
+                ctx.fillText(label, node.x, node.y + r + 4);
+            }
             // Type badge above
-            ctx.fillStyle = dimmed ? typeBadgeDim : typeBadge;
-            ctx.font = "9px system-ui, sans-serif";
-            ctx.textBaseline = "bottom";
-            ctx.fillText(node.type, node.x, node.y - NODE_RADIUS - 3);
+            if (camera.scale >= lod.hideBadges) {
+                ctx.fillStyle = dimmed ? typeBadgeDim : typeBadge;
+                ctx.font = "9px system-ui, sans-serif";
+                ctx.textBaseline = "bottom";
+                ctx.fillText(node.type, node.x, node.y - r - 3);
+            }
             ctx.globalAlpha = 1;
         }
         ctx.restore();
@@ -443,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();
@@ -476,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) {
@@ -539,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();
@@ -552,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();
@@ -676,6 +703,10 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             }
             animatePan();
         },
+        setEdges(visible) {
+            showEdges = visible;
+            render();
+        },
         setEdgeLabels(visible) {
             showEdgeLabels = visible;
             render();
@@ -688,6 +719,41 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
             showMinimap = visible;
             render();
         },
+        centerView() {
+            if (!state)
+                return;
+            camera = { x: 0, y: 0, scale: 1 };
+            if (state.nodes.length > 0) {
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of state.nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                camera.x = (minX + maxX) / 2 - canvas.clientWidth / 2;
+                camera.y = (minY + maxY) / 2 - canvas.clientHeight / 2;
+            }
+            render();
+        },
+        panBy(dx, dy) {
+            camera.x += dx / camera.scale;
+            camera.y += dy / camera.scale;
+            render();
+        },
+        zoomBy(factor) {
+            const cx = canvas.clientWidth / 2;
+            const cy = canvas.clientHeight / 2;
+            const [wx, wy] = screenToWorld(cx, cy);
+            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();
+        },
         reheat() {
             alpha = 0.5;
             cancelAnimationFrame(animFrame);
@@ -790,6 +856,18 @@ export function initCanvas(container, onNodeClick, onFocusChange) {
                 totalNodes: state.nodes.length,
             };
         },
+        /** Get all node IDs in the current layout (subgraph if focused, full graph otherwise). Seed nodes first. */
+        getNodeIds() {
+            if (!state)
+                return [];
+            if (focusSeedIds) {
+                const seedSet = new Set(focusSeedIds);
+                const seeds = state.nodes.filter((n) => seedSet.has(n.id)).map((n) => n.id);
+                const rest = state.nodes.filter((n) => !seedSet.has(n.id)).map((n) => n.id);
+                return [...seeds, ...rest];
+            }
+            return state.nodes.map((n) => n.id);
+        },
         destroy() {
             cancelAnimationFrame(animFrame);
             observer.disconnect();

package/dist/config.d.ts

@@ -0,0 +1,4 @@
+import defaultConfig from "./default-config.json";
+export type ViewerConfig = typeof defaultConfig;
+export type KeybindingMap = typeof defaultConfig.keybindings;
+export declare function loadViewerConfig(): ViewerConfig;

package/dist/config.js

@@ -0,0 +1,32 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as os from "node:os";
+import defaultConfig from "./default-config.json" with { type: "json" };
+function viewerConfigDir() {
+    if (process.env.BACKPACK_DIR) {
+        return path.join(process.env.BACKPACK_DIR, "config");
+    }
+    const xdgConfig = process.env.XDG_CONFIG_HOME ?? path.join(os.homedir(), ".config");
+    return path.join(xdgConfig, "backpack");
+}
+function viewerConfigFile() {
+    return path.join(viewerConfigDir(), "viewer.json");
+}
+export function loadViewerConfig() {
+    const filePath = viewerConfigFile();
+    try {
+        const raw = fs.readFileSync(filePath, "utf-8");
+        const user = JSON.parse(raw);
+        return {
+            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 {
+        return defaultConfig;
+    }
+}

package/dist/default-config.json

@@ -0,0 +1,66 @@
+{
+    "keybindings": {
+        "search": "/",
+        "searchAlt": "ctrl+k",
+        "undo": "ctrl+z",
+        "redo": "ctrl+shift+z",
+        "help": "?",
+        "escape": "Escape",
+        "focus": "f",
+        "toggleEdges": "e",
+        "center": "c",
+        "nextNode": ".",
+        "prevNode": ",",
+        "nextConnection": ">",
+        "prevConnection": "<",
+        "historyBack": "(",
+        "historyForward": ")",
+        "hopsIncrease": "=",
+        "hopsDecrease": "-",
+        "panLeft": "h",
+        "panDown": "j",
+        "panUp": "k",
+        "panRight": "l",
+        "panFastLeft": "H",
+        "zoomOut": "J",
+        "zoomIn": "K",
+        "panFastRight": "L",
+        "spacingDecrease": "[",
+        "spacingIncrease": "]",
+        "clusteringDecrease": "{",
+        "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;