@shumoku/renderer 0.2.5 → 0.2.14

package/src/html/spotlight.ts

@@ -1,135 +1,135 @@
-/**
- * Spotlight Module
- * Handles element highlighting with overlay and glow effect
- */
-
-let overlay: HTMLDivElement | null = null
-let highlightContainer: HTMLDivElement | null = null
-let currentHighlight: Element | null = null
-let currentMiniSvg: SVGSVGElement | null = null
-
-function getOverlay(): HTMLDivElement {
-  if (!overlay) {
-    overlay = document.createElement('div')
-    overlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-      z-index: 9998;
-    `
-    document.body.appendChild(overlay)
-  }
-  return overlay
-}
-
-function getHighlightContainer(): HTMLDivElement {
-  if (!highlightContainer) {
-    highlightContainer = document.createElement('div')
-    highlightContainer.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      z-index: 9999;
-    `
-    document.body.appendChild(highlightContainer)
-  }
-  return highlightContainer
-}
-
-export function updateHighlightPosition(): void {
-  if (!currentHighlight || !currentMiniSvg) return
-
-  if (!document.contains(currentHighlight)) {
-    highlightElement(null)
-    return
-  }
-
-  const svg = currentHighlight.closest('svg') as SVGSVGElement | null
-  if (!svg) return
-
-  const rect = svg.getBoundingClientRect()
-  const viewBox = svg.getAttribute('viewBox')
-  if (viewBox) {
-    currentMiniSvg.setAttribute('viewBox', viewBox)
-  }
-
-  currentMiniSvg.style.left = `${rect.left}px`
-  currentMiniSvg.style.top = `${rect.top}px`
-  currentMiniSvg.style.width = `${rect.width}px`
-  currentMiniSvg.style.height = `${rect.height}px`
-}
-
-export function highlightElement(el: Element | null): void {
-  if (el === currentHighlight) return
-
-  if (currentHighlight) {
-    currentHighlight.classList.remove('shumoku-highlight')
-  }
-
-  const container = getHighlightContainer()
-  container.innerHTML = ''
-  currentMiniSvg = null
-  currentHighlight = el
-
-  const ov = getOverlay()
-
-  if (el) {
-    el.classList.add('shumoku-highlight')
-
-    const svg = el.closest('svg') as SVGSVGElement | null
-    if (svg) {
-      const viewBox = svg.getAttribute('viewBox')
-      if (viewBox) {
-        const clone = el.cloneNode(true) as Element
-        clone.classList.remove('shumoku-highlight')
-
-        const miniSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-        miniSvg.setAttribute('viewBox', viewBox)
-        miniSvg.style.cssText = `
-          position: absolute;
-          overflow: visible;
-          filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 0 12px rgba(100, 150, 255, 0.8));
-        `
-
-        const defs = svg.querySelector('defs')
-        if (defs) {
-          miniSvg.appendChild(defs.cloneNode(true))
-        }
-
-        miniSvg.appendChild(clone)
-        container.appendChild(miniSvg)
-        currentMiniSvg = miniSvg
-
-        updateHighlightPosition()
-      }
-    }
-
-    ov.style.opacity = '1'
-  } else {
-    ov.style.opacity = '0'
-  }
-}
-
-export function getCurrentHighlight(): Element | null {
-  return currentHighlight
-}
-
-export function destroySpotlight(): void {
-  if (overlay) {
-    overlay.remove()
-    overlay = null
-  }
-  if (highlightContainer) {
-    highlightContainer.remove()
-    highlightContainer = null
-  }
-  currentHighlight = null
-  currentMiniSvg = null
-}
+/**
+ * Spotlight Module
+ * Handles element highlighting with overlay and glow effect
+ */
+
+let overlay: HTMLDivElement | null = null
+let highlightContainer: HTMLDivElement | null = null
+let currentHighlight: Element | null = null
+let currentMiniSvg: SVGSVGElement | null = null
+
+function getOverlay(): HTMLDivElement {
+  if (!overlay) {
+    overlay = document.createElement('div')
+    overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      z-index: 9998;
+    `
+    document.body.appendChild(overlay)
+  }
+  return overlay
+}
+
+function getHighlightContainer(): HTMLDivElement {
+  if (!highlightContainer) {
+    highlightContainer = document.createElement('div')
+    highlightContainer.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 9999;
+    `
+    document.body.appendChild(highlightContainer)
+  }
+  return highlightContainer
+}
+
+export function updateHighlightPosition(): void {
+  if (!currentHighlight || !currentMiniSvg) return
+
+  if (!document.contains(currentHighlight)) {
+    highlightElement(null)
+    return
+  }
+
+  const svg = currentHighlight.closest('svg') as SVGSVGElement | null
+  if (!svg) return
+
+  const rect = svg.getBoundingClientRect()
+  const viewBox = svg.getAttribute('viewBox')
+  if (viewBox) {
+    currentMiniSvg.setAttribute('viewBox', viewBox)
+  }
+
+  currentMiniSvg.style.left = `${rect.left}px`
+  currentMiniSvg.style.top = `${rect.top}px`
+  currentMiniSvg.style.width = `${rect.width}px`
+  currentMiniSvg.style.height = `${rect.height}px`
+}
+
+export function highlightElement(el: Element | null): void {
+  if (el === currentHighlight) return
+
+  if (currentHighlight) {
+    currentHighlight.classList.remove('shumoku-highlight')
+  }
+
+  const container = getHighlightContainer()
+  container.innerHTML = ''
+  currentMiniSvg = null
+  currentHighlight = el
+
+  const ov = getOverlay()
+
+  if (el) {
+    el.classList.add('shumoku-highlight')
+
+    const svg = el.closest('svg') as SVGSVGElement | null
+    if (svg) {
+      const viewBox = svg.getAttribute('viewBox')
+      if (viewBox) {
+        const clone = el.cloneNode(true) as Element
+        clone.classList.remove('shumoku-highlight')
+
+        const miniSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+        miniSvg.setAttribute('viewBox', viewBox)
+        miniSvg.style.cssText = `
+          position: absolute;
+          overflow: visible;
+          filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 0 12px rgba(100, 150, 255, 0.8));
+        `
+
+        const defs = svg.querySelector('defs')
+        if (defs) {
+          miniSvg.appendChild(defs.cloneNode(true))
+        }
+
+        miniSvg.appendChild(clone)
+        container.appendChild(miniSvg)
+        currentMiniSvg = miniSvg
+
+        updateHighlightPosition()
+      }
+    }
+
+    ov.style.opacity = '1'
+  } else {
+    ov.style.opacity = '0'
+  }
+}
+
+export function getCurrentHighlight(): Element | null {
+  return currentHighlight
+}
+
+export function destroySpotlight(): void {
+  if (overlay) {
+    overlay.remove()
+    overlay = null
+  }
+  if (highlightContainer) {
+    highlightContainer.remove()
+    highlightContainer = null
+  }
+  currentHighlight = null
+  currentMiniSvg = null
+}

package/src/html/tooltip.ts

@@ -1,141 +1,141 @@
-/**
- * Tooltip Module
- * Handles tooltip creation, positioning, and display
- */
-
-let tooltip: HTMLDivElement | null = null
-
-export function getTooltip(): HTMLDivElement {
-  if (!tooltip) {
-    tooltip = document.createElement('div')
-    tooltip.style.cssText = `
-      position: fixed;
-      z-index: 10000;
-      padding: 8px 12px;
-      background: rgba(30, 41, 59, 0.95);
-      color: #fff;
-      font-size: 13px;
-      line-height: 1.4;
-      border-radius: 6px;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.15s;
-      font-family: system-ui, -apple-system, sans-serif;
-      max-width: 280px;
-      white-space: pre-line;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    `
-    document.body.appendChild(tooltip)
-  }
-  return tooltip
-}
-
-export function showTooltip(text: string, x: number, y: number): void {
-  const t = getTooltip()
-  t.textContent = text
-  t.style.opacity = '1'
-
-  requestAnimationFrame(() => {
-    const rect = t.getBoundingClientRect()
-    const pad = 12
-    let left = x + pad
-    let top = y - rect.height - pad
-
-    if (left + rect.width > window.innerWidth - pad) {
-      left = x - rect.width - pad
-    }
-    if (top < pad) {
-      top = y + pad
-    }
-
-    t.style.left = `${Math.max(pad, left)}px`
-    t.style.top = `${Math.max(pad, top)}px`
-  })
-}
-
-export function hideTooltip(): void {
-  if (tooltip) {
-    tooltip.style.opacity = '0'
-  }
-}
-
-export function destroyTooltip(): void {
-  if (tooltip) {
-    tooltip.remove()
-    tooltip = null
-  }
-}
-
-export interface TooltipInfo {
-  text: string
-  element: Element
-}
-
-export function getTooltipInfo(el: Element): TooltipInfo | null {
-  const port = el.closest('.port[data-port]')
-  if (port) {
-    const portId = port.getAttribute('data-port') || ''
-    const deviceId = port.getAttribute('data-port-device') || ''
-    return { text: `${deviceId}:${portId}`, element: port }
-  }
-
-  const linkGroup = el.closest('.link-group[data-link-id]')
-  if (linkGroup) {
-    let from = linkGroup.getAttribute('data-link-from') || ''
-    let to = linkGroup.getAttribute('data-link-to') || ''
-    const bw = linkGroup.getAttribute('data-link-bandwidth')
-    const vlan = linkGroup.getAttribute('data-link-vlan')
-    const jsonAttr = linkGroup.getAttribute('data-link-json')
-
-    // For export links, show device:port ↔ destination device:port
-    const fromIsExport = from.startsWith('__export_')
-    const toIsExport = to.startsWith('__export_')
-    if ((fromIsExport || toIsExport) && jsonAttr) {
-      try {
-        const linkData = JSON.parse(jsonAttr)
-        const meta = linkData.metadata
-        if (meta?._destDevice) {
-          // Get the actual device endpoint (non-export side)
-          const localDevice = fromIsExport ? to : from
-          // Get the destination device:port from metadata
-          const destDevice = meta._destPort
-            ? `${meta._destDevice}:${meta._destPort}`
-            : meta._destDevice
-          // Show: "local device ↔ remote device"
-          let text = `${localDevice} ↔ ${destDevice}`
-          if (bw) text += `\n${bw}`
-          if (vlan) text += `\nVLAN: ${vlan}`
-          return { text, element: linkGroup }
-        }
-      } catch {
-        // Fall through to default display
-      }
-    }
-
-    let text = `${from} ↔ ${to}`
-    if (bw) text += `\n${bw}`
-    if (vlan) text += `\nVLAN: ${vlan}`
-    return { text, element: linkGroup }
-  }
-
-  const node = el.closest('.node[data-id]')
-  if (node) {
-    const json = node.getAttribute('data-device-json')
-    if (json) {
-      try {
-        const data = JSON.parse(json)
-        const lines: string[] = []
-        if (data.label) lines.push(Array.isArray(data.label) ? data.label.join(' ') : data.label)
-        if (data.type) lines.push(`Type: ${data.type}`)
-        if (data.vendor) lines.push(`Vendor: ${data.vendor}`)
-        if (data.model) lines.push(`Model: ${data.model}`)
-        return { text: lines.join('\n'), element: node }
-      } catch {
-        // fallthrough
-      }
-    }
-    return { text: node.getAttribute('data-id') || '', element: node }
-  }
-
-  return null
-}
+/**
+ * Tooltip Module
+ * Handles tooltip creation, positioning, and display
+ */
+
+let tooltip: HTMLDivElement | null = null
+
+export function getTooltip(): HTMLDivElement {
+  if (!tooltip) {
+    tooltip = document.createElement('div')
+    tooltip.style.cssText = `
+      position: fixed;
+      z-index: 10000;
+      padding: 8px 12px;
+      background: rgba(30, 41, 59, 0.95);
+      color: #fff;
+      font-size: 13px;
+      line-height: 1.4;
+      border-radius: 6px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s;
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 280px;
+      white-space: pre-line;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    `
+    document.body.appendChild(tooltip)
+  }
+  return tooltip
+}
+
+export function showTooltip(text: string, x: number, y: number): void {
+  const t = getTooltip()
+  t.textContent = text
+  t.style.opacity = '1'
+
+  requestAnimationFrame(() => {
+    const rect = t.getBoundingClientRect()
+    const pad = 12
+    let left = x + pad
+    let top = y - rect.height - pad
+
+    if (left + rect.width > window.innerWidth - pad) {
+      left = x - rect.width - pad
+    }
+    if (top < pad) {
+      top = y + pad
+    }
+
+    t.style.left = `${Math.max(pad, left)}px`
+    t.style.top = `${Math.max(pad, top)}px`
+  })
+}
+
+export function hideTooltip(): void {
+  if (tooltip) {
+    tooltip.style.opacity = '0'
+  }
+}
+
+export function destroyTooltip(): void {
+  if (tooltip) {
+    tooltip.remove()
+    tooltip = null
+  }
+}
+
+export interface TooltipInfo {
+  text: string
+  element: Element
+}
+
+export function getTooltipInfo(el: Element): TooltipInfo | null {
+  const port = el.closest('.port[data-port]')
+  if (port) {
+    const portId = port.getAttribute('data-port') || ''
+    const deviceId = port.getAttribute('data-port-device') || ''
+    return { text: `${deviceId}:${portId}`, element: port }
+  }
+
+  const linkGroup = el.closest('.link-group[data-link-id]')
+  if (linkGroup) {
+    const from = linkGroup.getAttribute('data-link-from') || ''
+    const to = linkGroup.getAttribute('data-link-to') || ''
+    const bw = linkGroup.getAttribute('data-link-bandwidth')
+    const vlan = linkGroup.getAttribute('data-link-vlan')
+    const jsonAttr = linkGroup.getAttribute('data-link-json')
+
+    // For export links, show device:port ↔ destination device:port
+    const fromIsExport = from.startsWith('__export_')
+    const toIsExport = to.startsWith('__export_')
+    if ((fromIsExport || toIsExport) && jsonAttr) {
+      try {
+        const linkData = JSON.parse(jsonAttr)
+        const meta = linkData.metadata
+        if (meta?._destDevice) {
+          // Get the actual device endpoint (non-export side)
+          const localDevice = fromIsExport ? to : from
+          // Get the destination device:port from metadata
+          const destDevice = meta._destPort
+            ? `${meta._destDevice}:${meta._destPort}`
+            : meta._destDevice
+          // Show: "local device ↔ remote device"
+          let text = `${localDevice} ↔ ${destDevice}`
+          if (bw) text += `\n${bw}`
+          if (vlan) text += `\nVLAN: ${vlan}`
+          return { text, element: linkGroup }
+        }
+      } catch {
+        // Fall through to default display
+      }
+    }
+
+    let text = `${from} ↔ ${to}`
+    if (bw) text += `\n${bw}`
+    if (vlan) text += `\nVLAN: ${vlan}`
+    return { text, element: linkGroup }
+  }
+
+  const node = el.closest('.node[data-id]')
+  if (node) {
+    const json = node.getAttribute('data-device-json')
+    if (json) {
+      try {
+        const data = JSON.parse(json)
+        const lines: string[] = []
+        if (data.label) lines.push(Array.isArray(data.label) ? data.label.join(' ') : data.label)
+        if (data.type) lines.push(`Type: ${data.type}`)
+        if (data.vendor) lines.push(`Vendor: ${data.vendor}`)
+        if (data.model) lines.push(`Model: ${data.model}`)
+        return { text: lines.join('\n'), element: node }
+      } catch {
+        // fallthrough
+      }
+    }
+    return { text: node.getAttribute('data-id') || '', element: node }
+  }
+
+  return null
+}

package/src/html/viewbox.ts

@@ -1,28 +1,28 @@
-/**
- * ViewBox Utilities
- * Handles SVG viewBox parsing and manipulation
- */
-
-export interface ViewBox {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export function parseViewBox(svg: SVGSVGElement): ViewBox | null {
-  const vb = svg.getAttribute('viewBox')
-  if (!vb) return null
-  const parts = vb.split(/\s+|,/).map(Number)
-  if (parts.length !== 4 || parts.some(Number.isNaN)) return null
-  return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] }
-}
-
-export function setViewBox(svg: SVGSVGElement, vb: ViewBox, onUpdate?: () => void): void {
-  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.width} ${vb.height}`)
-  onUpdate?.()
-}
-
-export function cloneViewBox(vb: ViewBox): ViewBox {
-  return { x: vb.x, y: vb.y, width: vb.width, height: vb.height }
-}
+/**
+ * ViewBox Utilities
+ * Handles SVG viewBox parsing and manipulation
+ */
+
+export interface ViewBox {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export function parseViewBox(svg: SVGSVGElement): ViewBox | null {
+  const vb = svg.getAttribute('viewBox')
+  if (!vb) return null
+  const parts = vb.split(/\s+|,/).map(Number)
+  if (parts.length !== 4 || parts.some(Number.isNaN)) return null
+  return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] }
+}
+
+export function setViewBox(svg: SVGSVGElement, vb: ViewBox, onUpdate?: () => void): void {
+  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.width} ${vb.height}`)
+  onUpdate?.()
+}
+
+export function cloneViewBox(vb: ViewBox): ViewBox {
+  return { x: vb.x, y: vb.y, width: vb.width, height: vb.height }
+}

package/src/iife-string.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE string placeholder
+ * This file is compiled by tsc, but dist/iife-string.js is overwritten
+ * by build:iife-string with the actual IIFE content.
+ */
+
+// Placeholder - replaced at build time
+export const INTERACTIVE_IIFE = '/* IIFE placeholder - rebuild to get actual content */'

package/src/index.ts

@@ -1,25 +1,24 @@
-/**
- * @shumoku/renderer - SVG and HTML renderers for network diagrams
- */
-
-import * as html from './html/index.js'
-// Namespace exports
-import * as svg from './svg.js'
-
-export { svg, html }
-
-// Types
-export type {
-  DataAttributeOptions,
-  DeviceInfo,
-  EndpointInfo,
-  HTMLRendererOptions,
-  InteractiveInstance,
-  InteractiveOptions,
-  LinkInfo,
-  PortInfo,
-  RenderMode,
-} from './types.js'
-
-// Re-export SheetData for hierarchical rendering
-export type { SheetData } from './html/index.js'
+/**
+ * @shumoku/renderer - SVG and HTML renderers for network diagrams
+ */
+
+import * as html from './html/index.js'
+// Namespace exports
+import * as svg from './svg.js'
+
+export { svg, html }
+
+// Re-export SheetData for hierarchical rendering
+export type { SheetData } from './html/index.js'
+// Types
+export type {
+  DataAttributeOptions,
+  DeviceInfo,
+  EndpointInfo,
+  HTMLRendererOptions,
+  InteractiveInstance,
+  InteractiveOptions,
+  LinkInfo,
+  PortInfo,
+  RenderMode,
+} from './types.js'