project-graph-mcp 2.2.6 → 2.3.1

package/web/follow-controller.js

@@ -0,0 +1,241 @@
+// @ctx .context/web/follow-controller.ctx
+/**
+ * FollowController — Central orchestrator for Follow Mode.
+ *
+ * Classifies incoming tool-events and dispatches debounced focus-change
+ * signals to subscribed panels (graph, code-viewer, monitor).
+ * Also manages the status ribbon text shown during active follow.
+ *
+ * NOTE: Does NOT import from app.js to avoid circular dependency.
+ * Call init(events, emit) before enable().
+ */
+
+/** Debounce delay for heavy visual updates (camera, code loading) */
+const HEAVY_DEBOUNCE = 800;
+
+class FollowController {
+  /** @type {boolean} */
+  enabled = false;
+  /** @type {{type: string, target: any, action?: string, meta?: object}|null} */
+  currentFocus = null;
+  /** @type {string} */
+  statusText = '';
+  /** @type {number|null} */
+  _debounceTimer = null;
+  /** @type {string|null} Previous hash before entering follow mode */
+  _previousHash = null;
+  /** @type {Function|null} */
+  _boundHandler = null;
+  /** @type {EventTarget|null} */
+  _events = null;
+  /** @type {Function|null} */
+  _emit = null;
+
+  /**
+   * Late-bind events bus and emit function (breaks circular import).
+   * Must be called once before enable().
+   * @param {EventTarget} events
+   * @param {Function} emit
+   */
+  init(events, emit) {
+    this._events = events;
+    this._emit = emit;
+  }
+
+  enable() {
+    if (this.enabled) return;
+    this.enabled = true;
+
+    // Save current location for restoring later
+    this._previousHash = location.hash;
+
+    // Bind tool-event listener
+    this._boundHandler = (e) => this._onToolEvent(e.detail);
+    this._events.addEventListener('tool-event', this._boundHandler);
+
+    this._emit('follow-state-changed', { enabled: true });
+  }
+
+  disable() {
+    if (!this.enabled) return;
+    this.enabled = false;
+
+    // Clean up
+    if (this._boundHandler) {
+      this._events.removeEventListener('tool-event', this._boundHandler);
+      this._boundHandler = null;
+    }
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+
+    this.currentFocus = null;
+    this._emitStatus('');
+
+    this._emit('follow-state-changed', { enabled: false });
+  }
+
+  /** @returns {string|null} */
+  getPreviousHash() {
+    return this._previousHash;
+  }
+
+  /**
+   * Main tool-event dispatcher. Classifies the event and routes to appropriate action.
+   * @param {object} event - Tool event from WebSocket
+   */
+  _onToolEvent(event) {
+    if (!this.enabled) return;
+
+    const toolName = event.tool || event.name || '';
+    const args = event.args || {};
+    const isCall = event.type === 'tool_call';
+    const isResult = event.type === 'tool_result';
+
+    // Extract short tool name (strip prefixes like 'default_api:', 'mcp_project-graph_')
+    const shortName = this._shortName(toolName);
+
+    // Status ribbon — update immediately on call
+    if (isCall) {
+      const statusText = this._buildStatusText(shortName, args);
+      if (statusText) this._emitStatus(statusText);
+    }
+
+    // Visual focus — classify and dispatch (debounced for heavy ops)
+    const action = this._classify(shortName, args, isCall, isResult, event);
+    if (action) {
+      if (action.immediate) {
+        this._emitFocusNow(action.focus);
+      } else {
+        this._emitFocusDebounced(action.focus, action.debounce || HEAVY_DEBOUNCE);
+      }
+    }
+  }
+
+  /**
+   * Classify tool event into a visual action.
+   * Only handles tools emitted by our MCP server (navigate, get_skeleton, etc.).
+   * IDE-local tools (view_file, grep_search) never arrive over WebSocket.
+   * @returns {{focus: object, debounce?: number, immediate?: boolean}|null}
+   */
+  _classify(tool, args, isCall, isResult, raw) {
+    if (!isCall) return null;
+
+    // === Graph navigation ===
+    if (tool === 'navigate') {
+      if (args.action === 'expand' && args.symbol) {
+        return { focus: { type: 'graph', target: args.symbol, action: 'focus' }, debounce: HEAVY_DEBOUNCE };
+      }
+      if (args.action === 'deps' && args.symbol) {
+        return { focus: { type: 'graph', target: args.symbol, action: 'deps' }, debounce: HEAVY_DEBOUNCE };
+      }
+      if (args.action === 'usages' && args.symbol) {
+        return { focus: { type: 'graph', target: args.symbol, action: 'deps' }, debounce: HEAVY_DEBOUNCE };
+      }
+      if (args.action === 'call_chain' && args.from && args.to) {
+        return { focus: { type: 'graph', target: { from: args.from, to: args.to }, action: 'chain' }, immediate: true };
+      }
+    }
+
+    // === Skeleton / Overview ===
+    if (tool === 'get_skeleton' || tool === 'get_ai_context') {
+      return { focus: { type: 'graph', action: 'fit' }, immediate: true };
+    }
+
+    // === Code compaction (compact_file action has a file path) ===
+    if (tool === 'compact' && args.path) {
+      return { focus: { type: 'file', target: args.path }, debounce: HEAVY_DEBOUNCE };
+    }
+
+    // === Analysis ===
+    if (tool === 'analyze') {
+      return { focus: { type: 'analysis' }, immediate: true };
+    }
+
+    return null;
+  }
+
+  /**
+   * Build human-readable status text for the ribbon.
+   * Only MCP-server tools arrive here (navigate, get_skeleton, compact, analyze, docs, etc.).
+   * @param {string} tool
+   * @param {object} args
+   * @returns {string}
+   */
+  _buildStatusText(tool, args) {
+    const file = args.path || '';
+    const short = file ? file.split('/').slice(-2).join('/') : '';
+
+    switch (tool) {
+      case 'navigate': {
+        if (args.action === 'expand') return `Expanding ${args.symbol}`;
+        if (args.action === 'deps') return `Tracing deps of ${args.symbol}`;
+        if (args.action === 'usages') return `Finding usages of ${args.symbol}`;
+        if (args.action === 'call_chain') return `Tracing ${args.from} → ${args.to}`;
+        if (args.action === 'sub_projects') return `Scanning sub-projects`;
+        return `Navigating graph`;
+      }
+      case 'get_skeleton': return `Scanning project structure`;
+      case 'get_ai_context': return `Loading AI context`;
+      case 'compact': return `Compacting ${short}`;
+      case 'analyze': return `Analyzing: ${args.action || ''}`;
+      case 'docs': return `Documentation: ${args.action || ''}`;
+      case 'jsdoc': return `JSDoc: ${args.action || ''}`;
+      case 'db': return `Database: ${args.action || ''}`;
+      case 'testing': return `Tests: ${args.action || ''}`;
+      case 'filters': return `Filters: ${args.action || ''}`;
+      default: return tool ? `Running ${tool}` : '';
+    }
+  }
+
+  /**
+   * Extract short tool name from full prefixed name.
+   * 'default_api:view_file' → 'view_file'
+   * 'mcp_project-graph_navigate' → 'navigate'
+   */
+  _shortName(full) {
+    // Strip 'default_api:' prefix
+    let name = full.replace(/^default_api:/, '');
+    // Strip 'mcp_project-graph_' prefix
+    name = name.replace(/^mcp_project-graph_/, '');
+    return name;
+  }
+
+  /**
+   * Emit focus change immediately (for urgent actions like call_chain).
+   */
+  _emitFocusNow(focus) {
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+    this.currentFocus = focus;
+    this._emit('follow-focus-changed', focus);
+  }
+
+  /**
+   * Emit focus change with debounce (for rapid file reads, etc.).
+   */
+  _emitFocusDebounced(focus, delay) {
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+    }
+    this._debounceTimer = setTimeout(() => {
+      this._debounceTimer = null;
+      this.currentFocus = focus;
+      this._emit('follow-focus-changed', focus);
+    }, delay);
+  }
+
+  /**
+   * Emit status text for the ribbon.
+   */
+  _emitStatus(text) {
+    this.statusText = text;
+    this._emit('follow-status-changed', { text });
+  }
+}
+
+/** Singleton instance */
+export const followController = new FollowController();

package/web/index.html

@@ -22,6 +22,10 @@
 <span id="compression-stats" class="compression-stats" style="display:none"></span>
 </div>
 <div class="topbar-right">
+<button id="follow-btn" class="follow-btn" title="Follow mode: UI follows agent actions">
+<span class="material-symbols-outlined">smart_toy</span>
+FOLLOW
+</button>
 <span id="agent-badge" class="agent-badge" style="display:none"></span>
 <span id="status-indicator" class="status connected"></span>
 </div>

package/web/panels/ActionBoard/ActionBoard.js

@@ -1,5 +1,5 @@
 // @ctx .context/web/panels/ActionBoard/ActionBoard.ctx
 import t from"@symbiotejs/symbiote";import{state as e,events as o}from"../../dashboard-state.js";import s from"./ActionBoard.css.js";import n from"./ActionBoard.tpl.js";
 import"../EventItem/EventItem.js";
-export class ActionBoard extends t{init$={eventsItems:[]};initCallback(){console.log("[ActionBoard] initCallback, existing events:",e.events.length),o.addEventListener("global-tool-event",t=>{const o=[...e.events].reverse();console.log("[ActionBoard] global-tool-event received, total:",o.length,"latest:",t.detail?.type,t.detail?.tool),this.$.eventsItems=o}),this.$.eventsItems=[...e.events].reverse()}}
+export class ActionBoard extends t{init$={eventsItems:[]};initCallback(){o.addEventListener("global-tool-event",t=>{const o=[...e.events].reverse();this.$.eventsItems=o}),this.$.eventsItems=[...e.events].reverse()}}
 ActionBoard.template=n,ActionBoard.rootStyles=s,ActionBoard.reg("pg-action-board");

package/web/panels/SettingsPanel/SettingsPanel.tpl.js

@@ -1,2 +1,2 @@
 // @ctx .context/web/panels/SettingsPanel/SettingsPanel.tpl.ctx
-export default'\n<div class="pg-stg-title">Backend</div>\n<div class="pg-stg-card" ref="backendCard"></div>\n\n<div class="pg-stg-title">Active Instances</div>\n<div ref="instanceList"></div>\n\n<div class="pg-stg-title">Server Lifecycle</div>\n<div class="pg-stg-card" ref="lifecycleCard">\n  <div class="pg-stg-metric"><span>Auto-shutdown</span><span class="pg-stg-val" ref="shutdownTimer">—</span></div>\n  <div class="pg-stg-metric"><span>Uptime</span><span class="pg-stg-val" ref="uptimeVal">—</span></div>\n</div>\n\n<div class="pg-stg-title">Actions</div>\n<div style="display:flex;gap:8px">\n<button class="pg-stg-btn" ref="refreshBtn">↻ Refresh</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="restartBtn">⟳ Restart</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="stopBtn">⏹ Stop</button>\n</div>\n<div ref="restartStatus" style="margin-top:8px;font-size:11px;color:var(--sn-text-dim)"></div>\n';
+export default'\n<div class="pg-stg-title">Actions</div>\n<div style="display:flex;gap:8px;margin-bottom:16px">\n<button class="pg-stg-btn" ref="refreshBtn">↻ Refresh</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="restartBtn">⟳ Restart</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="stopBtn">⏹ Stop</button>\n</div>\n<div ref="restartStatus" style="margin-bottom:16px;font-size:11px;color:var(--sn-text-dim)"></div>\n\n<div class="pg-stg-title">Backend</div>\n<div class="pg-stg-card" ref="backendCard"></div>\n\n<div class="pg-stg-title">Active Instances</div>\n<div ref="instanceList"></div>\n\n<div class="pg-stg-title">Server Lifecycle</div>\n<div class="pg-stg-card" ref="lifecycleCard">\n  <div class="pg-stg-metric"><span>Auto-shutdown</span><span class="pg-stg-val" ref="shutdownTimer">—</span></div>\n  <div class="pg-stg-metric"><span>Uptime</span><span class="pg-stg-val" ref="uptimeVal">—</span></div>\n</div>\n';

package/web/panels/code-viewer.js

@@ -16,7 +16,10 @@ function _getLang(path){if(!path)return'js';const i=path.lastIndexOf('.');if(i<0
 //   Toggle button label: "EXPAND" — beautifies via Terser + injects JSDoc from .ctx.
 //   _isReadable = false (compression saves <15% — already compact)
 
-export class CodeViewer extends e{init$={filename:"Select a file",hasFile:!1,viewMode:"source",modeLabel:"source",statsText:"",showToggle:!1,toggleLabel:"",onToggleMode:()=>{
+export class CodeViewer extends e{init$={filename:"Select a file",hasFile:!1,viewMode:"source",modeLabel:"source",statsText:"",showToggle:!1,toggleLabel:"",onShowInGraph:()=>{
+  if(!this._currentPath)return;
+  window.location.hash = `#graph?focus=${encodeURIComponent(this._currentPath)}`;
+},onToggleMode:()=>{
   const lang=_getLang(this._currentPath);
   if(lang==='md'){
     this.$.viewMode=this.$.viewMode==="rendered"?"raw":"rendered";
@@ -26,7 +29,7 @@ export class CodeViewer extends e{init$={filename:"Select a file",hasFile:!1,vie
   // Toggle between source and the transformation
   this.$.viewMode=this.$.viewMode==="source"?"transformed":"source";
   this._showCurrentMode();
-}};_fileData=null;_isReadable=!1;_transformCache=null;_loadingTransform=!1;_currentPath=null;initCallback(){t.addEventListener("file-selected",e=>this._loadFile(e.detail.path))}renderCallback(){this.sub("hasFile",e=>{this.toggleAttribute("has-file",e)}),this.sub("viewMode",e=>{
+}};_fileData=null;_isReadable=!1;_transformCache=null;_loadingTransform=!1;_currentPath=null;initCallback(){t.addEventListener("file-selected",e=>this._loadFile(e.detail.path));t.addEventListener("follow-focus-changed",e=>{const d=e.detail;if(d.type==="file"&&d.target){this._loadFile(d.target);if(d.meta?.startLine){setTimeout(()=>{const c=this._getCodeBlock();if(c&&c.scrollToLine)c.scrollToLine(d.meta.startLine)},200)}}});if(o.activeFile)requestAnimationFrame(()=>this._loadFile(o.activeFile))}renderCallback(){this.sub("hasFile",e=>{this.toggleAttribute("has-file",e)}),this.sub("viewMode",e=>{
   const lang=_getLang(this._currentPath);
   this.toggleAttribute("mode-raw","source"!==e);
   if(lang==='md'){
@@ -50,28 +53,36 @@ if(lang==='md'){
 e.$.lang=lang;
 if("transformed"===this.$.viewMode){
   // Show cached transform if available
-  if(this._transformCache){e.$.code=this._transformCache;return}
+  if(this._transformCache){
+    e.$.code=this._transformCache;
+    if(this._transformStatsText) this.$.statsText=this._transformStatsText;
+    return;
+  }
   if(this._loadingTransform)return;
   this._loadingTransform=!0;
   e.$.code=this._isReadable?"// Compressing...":"// Expanding...";
   try{
-    if(this._isReadable){
-      // MODE A: readable source → compress
-      const t=await n("/api/compact-file",{path:this._currentPath});
-      this._transformCache=t?.code||"// Compression unavailable";
-    }else{
-      // MODE B: compact source → expand (beautify + inject JSDoc from .ctx)
-      const t=await n("/api/expand-file",{path:this._currentPath});
-      this._transformCache=t?.code||"// Expand unavailable";
-    }
+      if(this._isReadable){
+        // MODE A: readable source → compress
+        const t=await n("/api/compact-file",{path:this._currentPath});
+        this._transformCache=t?.code||"// Compression unavailable";
+        this._transformStatsText=t?`Compressed: ${(t.compressed/1000).toFixed(1)}K chars (${t.savings})`:"";
+      }else{
+        // MODE B: compact source → expand (beautify + inject JSDoc from .ctx)
+        const t=await n("/api/expand-file",{path:this._currentPath});
+        this._transformCache=t?.code||"// Expand unavailable";
+        this._transformStatsText=t?`Expanded: ${(t.decompiled/1000).toFixed(1)}K chars | JSDocs injected: ${t.injected||0}`:"";
+      }
+      if(this._transformStatsText)this.$.statsText=this._transformStatsText;
     e.$.code=this._transformCache;
   }catch{e.$.code=this._isReadable?"// Compression failed":"// Expand failed"}
   finally{this._loadingTransform=!1}
   return;
 }
 // Source mode — raw file as-is
+this.$.statsText=this._baseStatsText;
 e.$.code=this._fileData.raw;
-}async _loadFile(e){this.$.filename=e,this.$.hasFile=!1,this._fileData=null,this.$.statsText="",this._transformCache=null,this._currentPath=e;
+}async _loadFile(e){this.$.filename=e,this.$.hasFile=!1,this._fileData=null,this.$.statsText="",this._baseStatsText="",this._transformStatsText="",this._transformCache=null,this._currentPath=e;
 const lang=_getLang(e);
 if(lang==='image'){
   const i=this._getCodeBlock();
@@ -97,7 +108,10 @@ let s=_raw?.content||o;
 // If no .ctx, source is readable → COMPACT available
 const hasCtx=!!(t.ctxTok&&t.ctxTok>0);
 this._isReadable=!hasCtx;
-this._fileData={compact:o,raw:s,codeTok:t.codeTok||0,ctxTok:t.ctxTok||0,totalTok:t.totalTok||0,expanded:t.expanded||0,savings:t.savings||"0%"},t.codeTok&&t.expanded&&(this.$.statsText=formatStats(t));const i=this._getCodeBlock();
+this._fileData={compact:o,raw:s,codeTok:t.codeTok||0,ctxTok:t.ctxTok||0,totalTok:t.totalTok||0,expanded:t.expanded||0,savings:t.savings||"0%"};
+this._baseStatsText=t.codeTok&&t.expanded?formatStats(t):"";
+this.$.statsText=this._baseStatsText;
+const i=this._getCodeBlock();
 if(lang==='md'){
   this.$.viewMode="rendered";
   this.$.modeLabel="rendered";
@@ -114,4 +128,25 @@ if(lang==='md'){
   this.$.toggleLabel=this._isReadable?"compact":"expand";
   i&&(i.$.code=s);
 }
-this.$.hasFile=!0}catch(e){const n=this._getCodeBlock();n&&(n.$.lang='plain',n.$.code=`// Error: ${e.message}`),this.$.showToggle=!1,this.$.hasFile=!0}}}CodeViewer.template='\n  <div class="pg-code-header">\n    <span class="pg-code-filename" bind="textContent: filename"></span>\n    <div class="pg-code-controls">\n      <span class="pg-code-stats" bind="textContent: statsText"></span>\n      <button class="pg-mode-toggle" bind="onclick: onToggleMode; hidden: !showToggle" title="Toggle view mode">\n        <span class="material-symbols-outlined" style="font-size:14px">compress</span>\n        <span class="pg-mode-label" bind="textContent: modeLabel"></span>\n      </button>\n    </div>\n  </div>\n  <code-block></code-block>\n',CodeViewer.rootStyles="\n  pg-code-viewer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n  }\n  pg-code-viewer:not([has-file]) code-block {\n    display: none;\n  }\n  .pg-code-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 11px;\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    border-bottom: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    background: var(--sn-node-header-bg, hsl(37, 25%, 93%));\n    gap: 8px;\n  }\n  .pg-code-filename {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n  }\n  .pg-code-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n  .pg-code-stats {\n    font-size: 10px;\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    white-space: nowrap;\n  }\n  .pg-mode-toggle {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    padding: 2px 8px;\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    border-radius: 4px;\n    background: var(--sn-bg, hsl(37, 30%, 91%));\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    font-family: inherit;\n    font-size: 10px;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: all 120ms ease;\n  }\n  .pg-mode-toggle:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n  }\n  pg-code-viewer[mode-raw] .pg-mode-toggle {\n    background: hsla(210, 45%, 45%, 0.12);\n    border-color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n  }\n  .pg-mode-toggle[hidden] {\n    display: none;\n  }\n  code-block {\n    flex: 1;\n    min-height: 0;\n  }\n",CodeViewer.reg("pg-code-viewer");
+this.$.hasFile=!0}catch(e){const n=this._getCodeBlock();n&&(n.$.lang='plain',n.$.code=`// Error: ${e.message}`),this.$.showToggle=!1,this.$.hasFile=!0}}}
+
+CodeViewer.template=`
+  <div class="pg-code-header">
+    <span class="pg-code-filename" bind="textContent: filename"></span>
+    <div class="pg-code-controls">
+      <span class="pg-code-stats" bind="textContent: statsText"></span>
+      <button class="pg-mode-toggle" bind="onclick: onShowInGraph" title="Show in Graph">
+        <span class="material-symbols-outlined" style="font-size:14px">account_tree</span>
+        <span class="pg-mode-label">graph</span>
+      </button>
+      <button class="pg-mode-toggle" bind="onclick: onToggleMode; hidden: !showToggle" title="Toggle view mode">
+        <span class="material-symbols-outlined" style="font-size:14px">compress</span>
+        <span class="pg-mode-label" bind="textContent: modeLabel"></span>
+      </button>
+    </div>
+  </div>
+  <code-block></code-block>
+`;
+
+CodeViewer.rootStyles="\n  pg-code-viewer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n  }\n  pg-code-viewer:not([has-file]) code-block {\n    display: none;\n  }\n  .pg-code-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 11px;\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    border-bottom: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    background: var(--sn-node-header-bg, hsl(37, 25%, 93%));\n    gap: 8px;\n  }\n  .pg-code-filename {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n  }\n  .pg-code-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n  .pg-code-stats {\n    font-size: 10px;\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    white-space: nowrap;\n  }\n  .pg-mode-toggle {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    padding: 2px 8px;\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    border-radius: 4px;\n    background: var(--sn-bg, hsl(37, 30%, 91%));\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    font-family: inherit;\n    font-size: 10px;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: all 120ms ease;\n  }\n  .pg-mode-toggle:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n  }\n  pg-code-viewer[mode-raw] .pg-mode-toggle {\n    background: hsla(210, 45%, 45%, 0.12);\n    border-color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n  }\n  .pg-mode-toggle[hidden] {\n    display: none;\n  }\n  code-block {\n    flex: 1;\n    min-height: 0;\n  }\n";
+CodeViewer.reg("pg-code-viewer");