@shumoku/renderer 0.2.3 → 0.2.5

package/dist/html/index.d.ts

@@ -4,7 +4,9 @@
  */
 import type { LayoutResult, NetworkGraph } from '@shumoku/core';
 import type { HTMLRendererOptions } from '../types.js';
+import { type NavigationState } from './navigation.js';
 export type { InteractiveInstance, InteractiveOptions } from '../types.js';
+export type { NavigationState, SheetInfo } from './navigation.js';
 export { initInteractive } from './runtime.js';
 /**
  * Set the IIFE content for standalone HTML pages
@@ -15,9 +17,32 @@ export declare function setIIFE(iife: string): void;
  */
 export declare function getIIFE(): string;
 export interface RenderOptions extends HTMLRendererOptions {
+    /**
+     * Enable hierarchical navigation UI
+     */
+    hierarchical?: boolean;
+    /**
+     * Current sheet ID for hierarchical rendering
+     */
+    currentSheet?: string;
+    /**
+     * Navigation state for hierarchical diagrams
+     */
+    navigation?: NavigationState;
 }
 /**
  * Render a complete standalone HTML page from NetworkGraph
  */
 export declare function render(graph: NetworkGraph, layout: LayoutResult, options?: RenderOptions): string;
+/**
+ * Sheet data for hierarchical rendering
+ */
+export interface SheetData {
+    graph: NetworkGraph;
+    layout: LayoutResult;
+}
+/**
+ * Render a hierarchical HTML page with multiple embedded sheets
+ */
+export declare function renderHierarchical(sheets: Map<string, SheetData>, options?: RenderOptions): string;
 //# sourceMappingURL=index.d.ts.map

package/dist/html/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/html/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAEtD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAK9C;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAE1C;AAED;;GAEG;AACH,wBAAgB,OAAO,IAAI,MAAM,CAEhC;AAED,MAAM,WAAW,aAAc,SAAQ,mBAAmB;CAAG;AAO7D;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAOjG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/html/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAA4B,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEzF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,EAIL,KAAK,eAAe,EAErB,MAAM,iBAAiB,CAAA;AAExB,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAE1E,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAK9C;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAE1C;AAED;;GAEG;AACH,wBAAgB,OAAO,IAAI,MAAM,CAEhC;AAED,MAAM,WAAW,aAAc,SAAQ,mBAAmB;IACxD;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;CAC7B;AAQD;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAmBjG;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAA;IACnB,MAAM,EAAE,YAAY,CAAA;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9B,OAAO,CAAC,EAAE,aAAa,GACtB,MAAM,CAgDR"}

package/dist/html/index.js

@@ -3,6 +3,7 @@
  * Generates standalone interactive HTML pages from NetworkGraph
  */
 import { SVGRenderer } from '../svg.js';
+import { generateNavigationToolbar, getNavigationScript, getNavigationStyles, } from './navigation.js';
 // Re-export runtime for direct usage
 export { initInteractive } from './runtime.js';
 // IIFE content - will be set by consumer
@@ -22,16 +23,133 @@ export function getIIFE() {
 const DEFAULT_OPTIONS = {
     branding: true,
     toolbar: true,
+    hierarchical: false,
 };
 /**
  * Render a complete standalone HTML page from NetworkGraph
  */
 export function render(graph, layout, options) {
     const opts = { ...DEFAULT_OPTIONS, ...options };
+    // Auto-detect hierarchical mode if not explicitly set
+    if (options?.hierarchical === undefined) {
+        opts.hierarchical = hasHierarchicalContent(graph);
+    }
     const svgRenderer = new SVGRenderer({ renderMode: 'interactive' });
     const svg = svgRenderer.render(graph, layout);
     const title = options?.title || graph.name || 'Network Diagram';
-    return generateHtml(svg, title, opts);
+    // Build navigation state if hierarchical
+    let navigation = options?.navigation;
+    if (!navigation && opts.hierarchical && isHierarchicalGraph(graph)) {
+        navigation = buildNavigationState(graph, opts.currentSheet);
+    }
+    return generateHtml(svg, title, { ...opts, navigation });
+}
+/**
+ * Render a hierarchical HTML page with multiple embedded sheets
+ */
+export function renderHierarchical(sheets, options) {
+    const opts = { ...DEFAULT_OPTIONS, ...options, hierarchical: true };
+    const sheetSvgs = new Map();
+    const sheetInfos = new Map();
+    const rootSheet = sheets.get('root');
+    // Render child sheets for navigation (detail view when clicking subgraphs)
+    for (const [sheetId, data] of sheets) {
+        if (sheetId === 'root')
+            continue; // Skip root for now
+        // Render child sheet
+        const svgRenderer = new SVGRenderer({ renderMode: 'interactive', sheetId });
+        const svg = svgRenderer.render(data.graph, data.layout);
+        sheetSvgs.set(sheetId, svg);
+        sheetInfos.set(sheetId, {
+            id: sheetId,
+            label: data.graph.name || sheetId,
+            parentId: 'root',
+        });
+    }
+    // Render root sheet (ELK handles hierarchical layout natively, no embedding needed)
+    if (rootSheet) {
+        const rootRenderer = new SVGRenderer({
+            renderMode: 'interactive',
+            sheetId: 'root',
+        });
+        const rootSvg = rootRenderer.render(rootSheet.graph, rootSheet.layout);
+        sheetSvgs.set('root', rootSvg);
+        sheetInfos.set('root', {
+            id: 'root',
+            label: rootSheet.graph.name || 'root',
+            parentId: undefined,
+        });
+    }
+    // Get title from root sheet
+    const title = options?.title || rootSheet?.graph.name || 'Network Diagram';
+    // Build navigation state
+    const navigation = {
+        currentSheet: 'root',
+        breadcrumb: ['root'],
+        sheets: sheetInfos,
+    };
+    return generateHierarchicalHtml(sheetSvgs, title, { ...opts, navigation });
+}
+/**
+ * Check if graph is a hierarchical graph
+ */
+function isHierarchicalGraph(graph) {
+    return 'sheets' in graph || 'breadcrumb' in graph;
+}
+/**
+ * Check if graph has hierarchical content (subgraphs with file/pins)
+ */
+function hasHierarchicalContent(graph) {
+    if (isHierarchicalGraph(graph))
+        return true;
+    if (!graph.subgraphs)
+        return false;
+    return graph.subgraphs.some((sg) => sg.file || (sg.pins && sg.pins.length > 0));
+}
+/**
+ * Build navigation state from hierarchical graph
+ */
+function buildNavigationState(graph, currentSheet) {
+    const sheets = new Map();
+    // Add root
+    sheets.set('root', {
+        id: 'root',
+        label: graph.name || 'Overview',
+    });
+    // Add sheets from subgraphs
+    if (graph.subgraphs) {
+        for (const subgraph of graph.subgraphs) {
+            if (subgraph.file) {
+                sheets.set(subgraph.id, {
+                    id: subgraph.id,
+                    label: subgraph.label,
+                    parentId: 'root',
+                });
+            }
+        }
+    }
+    // Add nested sheets
+    if (graph.sheets) {
+        for (const [id, sheet] of graph.sheets) {
+            if (!sheets.has(id)) {
+                sheets.set(id, {
+                    id,
+                    label: sheet.name || id,
+                    parentId: graph.parentSheet,
+                });
+            }
+        }
+    }
+    // Build breadcrumb
+    const breadcrumb = graph.breadcrumb || ['root'];
+    if (currentSheet && !breadcrumb.includes(currentSheet)) {
+        breadcrumb.push(currentSheet);
+    }
+    return {
+        currentSheet,
+        breadcrumb,
+        sheets,
+    };
 }
 function generateHtml(svg, title, options) {
     const brandingHtml = options.branding
@@ -52,6 +170,17 @@ function generateHtml(svg, title, options) {
     </div>
   </div>`
         : '';
+    // Navigation toolbar for hierarchical diagrams
+    const navToolbarHtml = options.hierarchical && options.navigation ? generateNavigationToolbar(options.navigation) : '';
+    // Navigation styles
+    const navStyles = options.hierarchical ? getNavigationStyles() : '';
+    // Navigation scripts
+    const navScript = options.hierarchical ? getNavigationScript() : '';
+    // Calculate container height based on toolbar presence
+    const headerHeight = options.toolbar ? 45 : 0;
+    const navHeight = options.hierarchical && options.navigation ? 60 : 0;
+    const totalHeaderHeight = headerHeight + navHeight;
+    const containerHeight = totalHeaderHeight > 0 ? `calc(100vh - ${totalHeaderHeight}px)` : '100vh';
     return `<!DOCTYPE html>
 <html>
 <head>
@@ -67,7 +196,7 @@ function generateHtml(svg, title, options) {
     .toolbar button { padding: 6px; border: none; background: none; cursor: pointer; border-radius: 4px; color: #666; }
     .toolbar button:hover { background: #f0f0f0; }
     .zoom-text { min-width: 50px; text-align: center; font-size: 13px; color: #666; }
-    .container { position: relative; width: 100%; height: ${options.toolbar ? 'calc(100vh - 45px)' : '100vh'}; overflow: hidden; cursor: grab; background: repeating-conic-gradient(#f8f8f8 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
+    .container { position: relative; width: 100%; height: ${containerHeight}; overflow: hidden; cursor: grab; background: repeating-conic-gradient(#f8f8f8 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
     .container.dragging { cursor: grabbing; }
     .container > svg { width: 100%; height: 100%; }
     .branding { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 13px; font-family: system-ui, sans-serif; color: #555; text-decoration: none; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 100; }
@@ -78,10 +207,15 @@ function generateHtml(svg, title, options) {
     .node:hover rect, .node:hover circle, .node:hover polygon { filter: brightness(0.95); }
     .port { cursor: pointer; }
     .link-hit-area { cursor: pointer; }
+    /* Subgraph click for hierarchical navigation */
+    .subgraph[data-has-sheet] { cursor: pointer; }
+    .subgraph[data-has-sheet]:hover > rect { filter: brightness(0.95); }
+    ${navStyles}
   </style>
 </head>
 <body>
   ${toolbarHtml}
+  ${navToolbarHtml}
   <div class="container" id="container">
     ${svg}
     ${brandingHtml}
@@ -301,9 +435,19 @@ function generateHtml(svg, title, options) {
         hasMoved = false;
       });
 
+      // Listen for hierarchical navigation events
+      document.addEventListener('shumoku:navigate', function(e) {
+        var sheetId = e.detail && e.detail.sheetId;
+        if (sheetId) {
+          console.log('[Shumoku] Navigate to sheet:', sheetId);
+          alert('Navigate to: ' + sheetId + '\\n\\nThis sheet would show the detailed view of this subgraph.');
+        }
+      });
+
       init();
     })();
   </script>
+  <script>${navScript}</script>
 </body>
 </html>`;
 }
@@ -315,4 +459,336 @@ function escapeHtml(str) {
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#39;');
 }
+/**
+ * Generate HTML with multiple embedded sheets for hierarchical navigation
+ */
+function generateHierarchicalHtml(sheetSvgs, title, options) {
+    const brandingHtml = options.branding
+        ? `<a class="branding" href="https://shumoku.packof.me" target="_blank" rel="noopener">
+      <svg class="branding-icon" viewBox="0 0 1024 1024" fill="none"><rect x="64" y="64" width="896" height="896" rx="200" fill="#7FE4C1"/><g transform="translate(90,40) scale(1.25)"><path fill="#1F2328" d="M380 340H450V505H700V555H510V645H450V645H380Z"/></g></svg>
+      <span>Made with Shumoku</span>
+    </a>`
+        : '';
+    const toolbarHtml = options.toolbar
+        ? `<div class="toolbar">
+    <span class="toolbar-title" id="sheet-title">${escapeHtml(title)}</span>
+    <div class="toolbar-buttons">
+      <button id="btn-out" title="Zoom Out"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M20 12H4"/></svg></button>
+      <span class="zoom-text" id="zoom">100%</span>
+      <button id="btn-in" title="Zoom In"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button>
+      <button id="btn-fit" title="Fit"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg></button>
+      <button id="btn-reset" title="Reset"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button>
+    </div>
+  </div>`
+        : '';
+    // Build sheet containers
+    const sheetContainers = [];
+    for (const [sheetId, svg] of sheetSvgs) {
+        const isRoot = sheetId === 'root';
+        const display = isRoot ? 'block' : 'none';
+        sheetContainers.push(`<div class="sheet-container" data-sheet-id="${escapeHtml(sheetId)}" style="display: ${display};">
+        ${svg}
+      </div>`);
+    }
+    // Build sheet info JSON for JavaScript
+    const sheetInfoJson = {};
+    for (const [id, info] of options.navigation?.sheets || []) {
+        sheetInfoJson[id] = { label: info.label, parentId: info.parentId };
+    }
+    const headerHeight = options.toolbar ? 45 : 0;
+    const containerHeight = headerHeight > 0 ? `calc(100vh - ${headerHeight}px)` : '100vh';
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #f5f5f5; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; }
+    .toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: white; border-bottom: 1px solid #e5e5e5; }
+    .toolbar-title { font-size: 14px; color: #666; display: flex; align-items: center; gap: 8px; }
+    .toolbar-buttons { display: flex; gap: 4px; align-items: center; }
+    .toolbar button { padding: 6px; border: none; background: none; cursor: pointer; border-radius: 4px; color: #666; }
+    .toolbar button:hover { background: #f0f0f0; }
+    .zoom-text { min-width: 50px; text-align: center; font-size: 13px; color: #666; }
+    .back-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 13px; color: #555; }
+    .back-btn:hover { background: #f5f5f5; }
+    .back-btn svg { width: 14px; height: 14px; }
+    .container { position: relative; width: 100%; height: ${containerHeight}; overflow: hidden; cursor: grab; background: repeating-conic-gradient(#f8f8f8 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
+    .container.dragging { cursor: grabbing; }
+    .sheet-container { width: 100%; height: 100%; }
+    .sheet-container > svg { width: 100%; height: 100%; }
+    .branding { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 13px; font-family: system-ui, sans-serif; color: #555; text-decoration: none; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 100; }
+    .branding:hover { color: #222; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+    .branding-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
+    .node { cursor: pointer; }
+    .node:hover rect, .node:hover circle, .node:hover polygon { filter: brightness(0.95); }
+    .port { cursor: pointer; }
+    .link-hit-area { cursor: pointer; }
+    .subgraph[data-has-sheet] { cursor: pointer; }
+    .subgraph[data-has-sheet]:hover > rect { filter: brightness(0.95); }
+  </style>
+</head>
+<body>
+  ${toolbarHtml}
+  <div class="container" id="container">
+    ${sheetContainers.join('\n    ')}
+    ${brandingHtml}
+  </div>
+  <script>${INTERACTIVE_IIFE}</script>
+  <script>
+    (function() {
+      var sheetInfo = ${JSON.stringify(sheetInfoJson)};
+      var currentSheet = 'root';
+      var breadcrumb = ['root'];
+      var sheetViewBoxes = {};
+      var container = document.getElementById('container');
+
+      function getActiveSheet() {
+        return container.querySelector('.sheet-container[data-sheet-id="' + currentSheet + '"]');
+      }
+
+      function getActiveSvg() {
+        var sheet = getActiveSheet();
+        return sheet ? sheet.querySelector('svg') : null;
+      }
+
+      function initSheet(sheetId) {
+        var sheet = container.querySelector('.sheet-container[data-sheet-id="' + sheetId + '"]');
+        if (!sheet) return;
+        var svg = sheet.querySelector('svg');
+        if (!svg) return;
+
+        var w = parseFloat(svg.getAttribute('width')) || 800;
+        var h = parseFloat(svg.getAttribute('height')) || 600;
+        var existing = svg.getAttribute('viewBox');
+        var vb;
+        if (existing) {
+          var p = existing.split(/\\s+|,/).map(Number);
+          vb = { x: p[0] || 0, y: p[1] || 0, w: p[2] || w, h: p[3] || h, origX: p[0] || 0, origY: p[1] || 0, origW: p[2] || w, origH: p[3] || h };
+        } else {
+          vb = { x: 0, y: 0, w: w, h: h, origX: 0, origY: 0, origW: w, origH: h };
+        }
+        sheetViewBoxes[sheetId] = vb;
+
+        svg.removeAttribute('width');
+        svg.removeAttribute('height');
+        svg.style.width = '100%';
+        svg.style.height = '100%';
+
+        // Fit view
+        var cw = container.clientWidth || 800;
+        var ch = container.clientHeight || 600;
+        var scale = Math.min(cw / vb.origW, ch / vb.origH) * 0.9;
+        vb.w = cw / scale;
+        vb.h = ch / scale;
+        vb.x = vb.origX + (vb.origW - vb.w) / 2;
+        vb.y = vb.origY + (vb.origH - vb.h) / 2;
+        svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h);
+
+        if (window.ShumokuInteractive) {
+          window.ShumokuInteractive.initInteractive({ target: svg, modal: { enabled: true }, tooltip: { enabled: true }, panZoom: { enabled: false } });
+        }
+      }
+
+      function updateViewBox() {
+        var svg = getActiveSvg();
+        var vb = sheetViewBoxes[currentSheet];
+        if (!svg || !vb) return;
+        svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h);
+        var zoomEl = document.getElementById('zoom');
+        if (zoomEl) zoomEl.textContent = Math.round(vb.origW / vb.w * 100) + '%';
+      }
+
+      function updateTitle() {
+        var titleEl = document.getElementById('sheet-title');
+        if (!titleEl) return;
+        var info = sheetInfo[currentSheet];
+        var label = info ? info.label : currentSheet;
+
+        if (currentSheet === 'root') {
+          titleEl.innerHTML = label;
+        } else {
+          titleEl.innerHTML = '<button class="back-btn" id="back-btn"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg></button>' + label;
+          document.getElementById('back-btn').addEventListener('click', function() {
+            navigateToSheet('root');
+          });
+        }
+      }
+
+      function navigateToSheet(sheetId) {
+        if (sheetId === currentSheet) return;
+        if (!container.querySelector('.sheet-container[data-sheet-id="' + sheetId + '"]')) {
+          console.warn('[Shumoku] Sheet not found:', sheetId);
+          return;
+        }
+
+        // Hide current
+        var current = getActiveSheet();
+        if (current) current.style.display = 'none';
+
+        // Show new
+        currentSheet = sheetId;
+        var newSheet = getActiveSheet();
+        if (newSheet) {
+          newSheet.style.display = 'block';
+          if (!sheetViewBoxes[sheetId]) {
+            initSheet(sheetId);
+          }
+        }
+
+        // Update breadcrumb
+        if (sheetId === 'root') {
+          breadcrumb = ['root'];
+        } else {
+          breadcrumb = ['root', sheetId];
+        }
+
+        updateTitle();
+        updateViewBox();
+      }
+
+      // Zoom functions
+      function zoom(f) {
+        var vb = sheetViewBoxes[currentSheet];
+        if (!vb) return;
+        var cx = vb.x + vb.w / 2, cy = vb.y + vb.h / 2;
+        var nw = vb.w / f, nh = vb.h / f;
+        var scale = vb.origW / nw;
+        if (scale < 0.1 || scale > 10) return;
+        vb.w = nw; vb.h = nh; vb.x = cx - nw / 2; vb.y = cy - nh / 2;
+        updateViewBox();
+      }
+
+      function fitView() {
+        var vb = sheetViewBoxes[currentSheet];
+        if (!vb) return;
+        var cw = container.clientWidth || 800;
+        var ch = container.clientHeight || 600;
+        var scale = Math.min(cw / vb.origW, ch / vb.origH) * 0.9;
+        vb.w = cw / scale;
+        vb.h = ch / scale;
+        vb.x = vb.origX + (vb.origW - vb.w) / 2;
+        vb.y = vb.origY + (vb.origH - vb.h) / 2;
+        updateViewBox();
+      }
+
+      function resetView() {
+        var vb = sheetViewBoxes[currentSheet];
+        if (!vb) return;
+        vb.x = vb.origX; vb.y = vb.origY; vb.w = vb.origW; vb.h = vb.origH;
+        updateViewBox();
+      }
+
+      // Toolbar buttons
+      var btnIn = document.getElementById('btn-in');
+      var btnOut = document.getElementById('btn-out');
+      var btnFit = document.getElementById('btn-fit');
+      var btnReset = document.getElementById('btn-reset');
+      if (btnIn) btnIn.addEventListener('click', function() { zoom(1.2); });
+      if (btnOut) btnOut.addEventListener('click', function() { zoom(1/1.2); });
+      if (btnFit) btnFit.addEventListener('click', fitView);
+      if (btnReset) btnReset.addEventListener('click', resetView);
+
+      // Mouse drag
+      var drag = { active: false, x: 0, y: 0 };
+
+      container.addEventListener('mousedown', function(e) {
+        if (e.button === 0) {
+          var vb = sheetViewBoxes[currentSheet];
+          if (!vb) return;
+          drag = { active: true, x: e.clientX, y: e.clientY, vx: vb.x, vy: vb.y };
+          container.classList.add('dragging');
+        }
+      });
+
+      document.addEventListener('mousemove', function(e) {
+        if (!drag.active) return;
+        var vb = sheetViewBoxes[currentSheet];
+        if (!vb) return;
+        var sx = vb.w / container.clientWidth;
+        var sy = vb.h / container.clientHeight;
+        vb.x = drag.vx - (e.clientX - drag.x) * sx;
+        vb.y = drag.vy - (e.clientY - drag.y) * sy;
+        updateViewBox();
+      });
+
+      document.addEventListener('mouseup', function() {
+        drag.active = false;
+        container.classList.remove('dragging');
+      });
+
+      // Wheel zoom
+      container.addEventListener('wheel', function(e) {
+        e.preventDefault();
+        var vb = sheetViewBoxes[currentSheet];
+        if (!vb) return;
+        var rect = container.getBoundingClientRect();
+        var mx = (e.clientX - rect.left) / rect.width;
+        var my = (e.clientY - rect.top) / rect.height;
+        var px = vb.x + vb.w * mx, py = vb.y + vb.h * my;
+        var f = e.deltaY > 0 ? 1/1.2 : 1.2;
+        var nw = vb.w / f, nh = vb.h / f;
+        var scale = vb.origW / nw;
+        if (scale < 0.1 || scale > 10) return;
+        vb.w = nw; vb.h = nh; vb.x = px - nw * mx; vb.y = py - nh * my;
+        updateViewBox();
+      }, { passive: false });
+
+      // Navigation event listener
+      document.addEventListener('shumoku:navigate', function(e) {
+        var sheetId = e.detail && e.detail.sheetId;
+        if (sheetId) {
+          navigateToSheet(sheetId);
+        }
+      });
+
+      // Touch support (simplified)
+      var touch1 = null;
+      var hasMoved = false;
+
+      container.addEventListener('touchstart', function(e) {
+        if (e.target.closest && e.target.closest('.branding')) return;
+        if (e.touches.length === 1) {
+          var vb = sheetViewBoxes[currentSheet];
+          if (vb) {
+            touch1 = { x: e.touches[0].clientX, y: e.touches[0].clientY, vx: vb.x, vy: vb.y };
+            hasMoved = false;
+          }
+        }
+      }, { passive: false });
+
+      container.addEventListener('touchmove', function(e) {
+        if (e.target.closest && e.target.closest('.branding')) return;
+        if (e.touches.length === 1 && touch1) {
+          var vb = sheetViewBoxes[currentSheet];
+          if (!vb) return;
+          var dx = e.touches[0].clientX - touch1.x;
+          var dy = e.touches[0].clientY - touch1.y;
+          if (!hasMoved && Math.hypot(dx, dy) > 8) hasMoved = true;
+          if (hasMoved) {
+            e.preventDefault();
+            var sx = vb.w / container.clientWidth;
+            var sy = vb.h / container.clientHeight;
+            vb.x = touch1.vx - dx * sx;
+            vb.y = touch1.vy - dy * sy;
+            updateViewBox();
+          }
+        }
+      }, { passive: false });
+
+      container.addEventListener('touchend', function() {
+        touch1 = null;
+        hasMoved = false;
+      });
+
+      // Initialize root sheet
+      initSheet('root');
+      updateTitle();
+    })();
+  </script>
+</body>
+</html>`;
+}
 //# sourceMappingURL=index.js.map

package/dist/html/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/html/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,qCAAqC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,yCAAyC;AACzC,IAAI,gBAAgB,GAAG,EAAE,CAAA;AAEzB;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,gBAAgB,GAAG,IAAI,CAAA;AACzB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,OAAO;IACrB,OAAO,gBAAgB,CAAA;AACzB,CAAC;AAID,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,IAAI;CACd,CAAA;AAED;;GAEG;AACH,MAAM,UAAU,MAAM,CAAC,KAAmB,EAAE,MAAoB,EAAE,OAAuB;IACvF,MAAM,IAAI,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/C,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAA;IAClE,MAAM,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC7C,MAAM,KAAK,GAAG,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,iBAAiB,CAAA;IAE/D,OAAO,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,IAA+B,CAAC,CAAA;AAClE,CAAC;AAED,SAAS,YAAY,CAAC,GAAW,EAAE,KAAa,EAAE,OAAgC;IAChF,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ;QACnC,CAAC,CAAC;;;SAGG;QACL,CAAC,CAAC,EAAE,CAAA;IAEN,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO;QACjC,CAAC,CAAC;kCAC4B,UAAU,CAAC,KAAK,CAAC;;;;;;;;SAQ1C;QACL,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO;;;;;WAKE,UAAU,CAAC,KAAK,CAAC;;;;;;;;;;4DAUgC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;IAcxG,WAAW;;MAET,GAAG;MACH,YAAY;;YAEN,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2NpB,CAAA;AACR,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/html/index.ts"],"names":[],"mappings":"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"}

package/dist/html/navigation.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Navigation UI for hierarchical network diagrams
+ * Provides breadcrumb, tabs, and back button for sheet navigation
+ */
+/**
+ * Navigation state for hierarchical diagrams
+ */
+export interface NavigationState {
+    /**
+     * Current sheet ID (undefined = root)
+     */
+    currentSheet?: string;
+    /**
+     * Breadcrumb path from root to current sheet
+     */
+    breadcrumb: string[];
+    /**
+     * Available sheets
+     */
+    sheets: Map<string, SheetInfo>;
+}
+/**
+ * Information about a sheet
+ */
+export interface SheetInfo {
+    id: string;
+    label: string;
+    parentId?: string;
+}
+/**
+ * Generate breadcrumb HTML
+ */
+export declare function generateBreadcrumb(state: NavigationState): string;
+/**
+ * Generate tab navigation HTML for sibling sheets
+ */
+export declare function generateTabs(state: NavigationState, siblingIds: string[]): string;
+/**
+ * Generate back button HTML
+ */
+export declare function generateBackButton(state: NavigationState): string;
+/**
+ * Generate complete navigation toolbar HTML
+ */
+export declare function generateNavigationToolbar(state: NavigationState, siblingIds?: string[]): string;
+/**
+ * Get CSS styles for navigation components
+ */
+export declare function getNavigationStyles(): string;
+/**
+ * Get JavaScript code for navigation event handling
+ */
+export declare function getNavigationScript(): string;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/html/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/html/navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,UAAU,EAAE,MAAM,EAAE,CAAA;IAEpB;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAajE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,MAAM,CAYjF;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAajE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,eAAe,EACtB,UAAU,GAAE,MAAM,EAAO,GACxB,MAAM,CAYR;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAiF5C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAkD5C"}