@shumoku/core 0.1.1 → 0.2.1

package/package.json

@@ -1,92 +1,88 @@
-{
-  "name": "@shumoku/core",
-  "version": "0.1.1",
-  "description": "Core library for shumoku network topology visualization",
-  "license": "MIT",
-  "author": "konoe-akitoshi",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/konoe-akitoshi/shumoku.git",
-    "directory": "packages/@shumoku/core"
-  },
-  "homepage": "https://shumoku.packof.me/",
-  "bugs": {
-    "url": "https://github.com/konoe-akitoshi/shumoku/issues"
-  },
-  "keywords": [
-    "network",
-    "topology",
-    "diagram",
-    "visualization",
-    "svg"
-  ],
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./models": {
-      "types": "./dist/models/index.d.ts",
-      "import": "./dist/models/index.js"
-    },
-    "./parser": {
-      "types": "./dist/parser/index.d.ts",
-      "import": "./dist/parser/index.js"
-    },
-    "./layout": {
-      "types": "./dist/layout/index.d.ts",
-      "import": "./dist/layout/index.js"
-    },
-    "./renderer": {
-      "types": "./dist/renderer/index.d.ts",
-      "import": "./dist/renderer/index.js"
-    },
-    "./themes": {
-      "types": "./dist/themes/index.d.ts",
-      "import": "./dist/themes/index.js"
-    },
-    "./icons": {
-      "types": "./dist/icons/index.d.ts",
-      "import": "./dist/icons/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check ."
-  },
-  "dependencies": {
-    "elkjs": "^0.11.0",
-    "pixi.js": "^8.5.2"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.0",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.5"
-  },
-  "peerDependencies": {
-    "@pixi/react": "^8.0.0",
-    "react": "^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@pixi/react": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@shumoku/core",
+  "version": "0.2.1",
+  "description": "Core library for shumoku network topology visualization",
+  "license": "MIT",
+  "author": "konoe-akitoshi",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/konoe-akitoshi/shumoku.git",
+    "directory": "packages/@shumoku/core"
+  },
+  "homepage": "https://shumoku.packof.me/",
+  "bugs": {
+    "url": "https://github.com/konoe-akitoshi/shumoku/issues"
+  },
+  "keywords": [
+    "network",
+    "topology",
+    "diagram",
+    "visualization",
+    "svg"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./models": {
+      "types": "./dist/models/index.d.ts",
+      "import": "./dist/models/index.js"
+    },
+    "./parser": {
+      "types": "./dist/parser/index.d.ts",
+      "import": "./dist/parser/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js"
+    },
+    "./themes": {
+      "types": "./dist/themes/index.d.ts",
+      "import": "./dist/themes/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest --passWithNoTests",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check ."
+  },
+  "dependencies": {
+    "elkjs": "^0.11.0",
+    "pixi.js": "^8.5.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.7",
+    "typescript": "^5.6.3",
+    "vitest": "^4.0.17"
+  },
+  "peerDependencies": {
+    "@pixi/react": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@pixi/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/constants.ts

@@ -0,0 +1,35 @@
+// Layout and rendering constants
+// These values are shared between layout engines and renderers to ensure consistency
+
+/** Default icon size in pixels (both width and height for square icons) */
+export const DEFAULT_ICON_SIZE = 40
+
+/** Gap between icon and label in pixels */
+export const ICON_LABEL_GAP = 8
+
+/** Line height for node labels in pixels */
+export const LABEL_LINE_HEIGHT = 16
+
+/** Vertical padding inside node box in pixels */
+export const NODE_VERTICAL_PADDING = 16
+
+/** Horizontal padding inside node box in pixels */
+export const NODE_HORIZONTAL_PADDING = 16
+
+/** Minimum spacing between ports in pixels (fallback when no labels) */
+export const MIN_PORT_SPACING = 48
+
+/** Port label font size in pixels */
+export const PORT_LABEL_FONT_SIZE = 9
+
+/** Character width ratio relative to font size (for proportional fonts ~0.55, monospace ~0.6) */
+export const CHAR_WIDTH_RATIO = 0.55
+
+/** Padding around port label for spacing calculation */
+export const PORT_LABEL_PADDING = 16
+
+/** Maximum icon width as percentage of node width (0.0 - 1.0) */
+export const MAX_ICON_WIDTH_RATIO = 0.6
+
+/** Estimated character width for node label width calculation (larger font) */
+export const ESTIMATED_CHAR_WIDTH = 7

package/src/icons/build-icons.ts

@@ -3,9 +3,9 @@
  * Run with: bun src/icons/build-icons.ts
  */
 
-import * as fs from 'fs'
-import * as path from 'path'
-import { fileURLToPath } from 'url'
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -111,7 +111,9 @@ function generateTypeScript(icons: Record<string, string>): string {
   lines.push('/**')
   lines.push(' * Register vendor icons (called by @shumoku/icons)')
   lines.push(' */')
-  lines.push('export function registerVendorIcons(vendor: string, icons: Record<string, IconEntry>): void {')
+  lines.push(
+    'export function registerVendorIcons(vendor: string, icons: Record<string, IconEntry>): void {',
+  )
   lines.push('  vendorIconRegistry[vendor] = icons')
   lines.push('}')
   lines.push('')
@@ -125,7 +127,9 @@ function generateTypeScript(icons: Record<string, string>): string {
   lines.push('  resource?: string')
   lines.push('): IconEntry | undefined {')
   lines.push("  if (vendor === 'default' || !vendor) {")
-  lines.push('    const content = defaultIcons[service] || (resource ? defaultIcons[resource] : undefined)')
+  lines.push(
+    '    const content = defaultIcons[service] || (resource ? defaultIcons[resource] : undefined)',
+  )
   lines.push('    return content ? { default: content } : undefined')
   lines.push('  }')
   lines.push('')
@@ -135,7 +139,9 @@ function generateTypeScript(icons: Record<string, string>): string {
   lines.push('  const key = resource ? `${service}/${resource}` : service')
   lines.push('  const entry = vendorIcons[key]')
   lines.push('  if (!entry) {')
-  lines.push("    const serviceKey = Object.keys(vendorIcons).find(k => k.startsWith(service + '/'))")
+  lines.push(
+    "    const serviceKey = Object.keys(vendorIcons).find(k => k.startsWith(service + '/'))",
+  )
   lines.push('    if (serviceKey) return vendorIcons[serviceKey]')
   lines.push('    return undefined')
   lines.push('  }')

package/src/icons/generated-icons.ts

@@ -17,17 +17,17 @@ export interface IconEntry {
 // Default network device icons
 const defaultIcons: Record<string, string> = {
   'access-point': `<path d="M12 10a2 2 0 100 4 2 2 0 000-4zm-4.5-2.5a6.5 6.5 0 019 0l-1.4 1.4a4.5 4.5 0 00-6.2 0l-1.4-1.4zm-2.8-2.8a10 10 0 0114.6 0l-1.4 1.4a8 8 0 00-11.8 0L4.7 4.7z"/>`,
-  'cloud': `<path d="M19.4 10.6A7 7 0 006 12a5 5 0 00.7 9.9h11.8a4.5 4.5 0 00.9-8.9z"/>`,
-  'database': `<path d="M12 4c-4.4 0-8 1.3-8 3v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7c0-1.7-3.6-3-8-3zm0 2c3.3 0 6 .9 6 2s-2.7 2-6 2-6-.9-6-2 2.7-2 6-2zM6 10.5c1.4.7 3.5 1 6 1s4.6-.3 6-1V12c0 1.1-2.7 2-6 2s-6-.9-6-2v-1.5zm0 4c1.4.7 3.5 1 6 1s4.6-.3 6-1V16c0 1.1-2.7 2-6 2s-6-.9-6-2v-1.5z"/>`,
-  'firewall': `<path d="M12 2L4 6v6c0 5.5 3.4 10.3 8 12 4.6-1.7 8-6.5 8-12V6l-8-4zm0 2.2l6 3v5.3c0 4.3-2.6 8.1-6 9.5-3.4-1.4-6-5.2-6-9.5V7.2l6-3z"/> <path d="M11 8h2v5h-2V8zm0 6h2v2h-2v-2z"/>`,
-  'generic': `<path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2z"/>`,
-  'internet': `<path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c.6 0 1.3.8 1.8 2H10.2c.5-1.2 1.2-2 1.8-2zm-3.2.7A8 8 0 005 10h2.5c.1-2 .5-3.7 1.3-5.3zm6.4 0c.8 1.6 1.2 3.3 1.3 5.3H19a8 8 0 00-3.8-5.3zM5 12h2.5c.1 2 .5 3.7 1.3 5.3A8 8 0 015 12zm4.5 0h5c0 1.5-.3 3-1 4h-3c-.7-1-1-2.5-1-4zm7 0H19a8 8 0 01-3.8 5.3c.8-1.6 1.2-3.3 1.3-5.3zM10.2 18h3.6c-.5 1.2-1.2 2-1.8 2s-1.3-.8-1.8-2z"/>`,
+  cloud: `<path d="M19.4 10.6A7 7 0 006 12a5 5 0 00.7 9.9h11.8a4.5 4.5 0 00.9-8.9z"/>`,
+  database: `<path d="M12 4c-4.4 0-8 1.3-8 3v10c0 1.7 3.6 3 8 3s8-1.3 8-3V7c0-1.7-3.6-3-8-3zm0 2c3.3 0 6 .9 6 2s-2.7 2-6 2-6-.9-6-2 2.7-2 6-2zM6 10.5c1.4.7 3.5 1 6 1s4.6-.3 6-1V12c0 1.1-2.7 2-6 2s-6-.9-6-2v-1.5zm0 4c1.4.7 3.5 1 6 1s4.6-.3 6-1V16c0 1.1-2.7 2-6 2s-6-.9-6-2v-1.5z"/>`,
+  firewall: `<path d="M12 2L4 6v6c0 5.5 3.4 10.3 8 12 4.6-1.7 8-6.5 8-12V6l-8-4zm0 2.2l6 3v5.3c0 4.3-2.6 8.1-6 9.5-3.4-1.4-6-5.2-6-9.5V7.2l6-3z"/> <path d="M11 8h2v5h-2V8zm0 6h2v2h-2v-2z"/>`,
+  generic: `<path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2 2h8v2H8V8zm0 4h8v2H8v-2z"/>`,
+  internet: `<path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c.6 0 1.3.8 1.8 2H10.2c.5-1.2 1.2-2 1.8-2zm-3.2.7A8 8 0 005 10h2.5c.1-2 .5-3.7 1.3-5.3zm6.4 0c.8 1.6 1.2 3.3 1.3 5.3H19a8 8 0 00-3.8-5.3zM5 12h2.5c.1 2 .5 3.7 1.3 5.3A8 8 0 015 12zm4.5 0h5c0 1.5-.3 3-1 4h-3c-.7-1-1-2.5-1-4zm7 0H19a8 8 0 01-3.8 5.3c.8-1.6 1.2-3.3 1.3-5.3zM10.2 18h3.6c-.5 1.2-1.2 2-1.8 2s-1.3-.8-1.8-2z"/>`,
   'l2-switch': `<path d="M3 8h18v8H3V8zm2 2v4h14v-4H5zm2 1h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z"/>`,
   'l3-switch': `<path d="M3 6h18v12H3V6zm2 2v8h14V8H5zm2 2h4v1H7v-1zm6 0h4v1h-4v-1zm-6 3h4v1H7v-1zm6 0h4v1h-4v-1z"/>`,
   'load-balancer': `<path d="M12 4L4 8l8 4 8-4-8-4zm0 2.5L16 8l-4 2-4-2 4-1.5zM4 12l8 4 8-4v2l-8 4-8-4v-2zm0 4l8 4 8-4v2l-8 4-8-4v-2z"/>`,
-  'router': `<path d="M4 8h16v8H4V8zm2 2v4h12v-4H6zm1 1h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z"/>`,
-  'server': `<path d="M4 4h16v4H4V4zm0 6h16v4H4v-4zm0 6h16v4H4v-4zm2-10v2h2V6H6zm0 6v2h2v-2H6zm0 6v2h2v-2H6zm10-12v2h2V6h-2zm0 6v2h2v-2h-2zm0 6v2h2v-2h-2z"/>`,
-  'vpn': `<path d="M12 2L4 5v6.5c0 5.3 3.4 10 8 11.5 4.6-1.5 8-6.2 8-11.5V5l-8-3zm0 4a3 3 0 110 6 3 3 0 010-6zm-4 8h8v1c0 2-1.8 3-4 3s-4-1-4-3v-1z"/>`,
+  router: `<path d="M4 8h16v8H4V8zm2 2v4h12v-4H6zm1 1h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z"/>`,
+  server: `<path d="M4 4h16v4H4V4zm0 6h16v4H4v-4zm0 6h16v4H4v-4zm2-10v2h2V6H6zm0 6v2h2v-2H6zm0 6v2h2v-2H6zm10-12v2h2V6h-2zm0 6v2h2v-2h-2zm0 6v2h2v-2h-2z"/>`,
+  vpn: `<path d="M12 2L4 5v6.5c0 5.3 3.4 10 8 11.5 4.6-1.5 8-6.2 8-11.5V5l-8-3zm0 4a3 3 0 110 6 3 3 0 010-6zm-4 8h8v1c0 2-1.8 3-4 3s-4-1-4-3v-1z"/>`,
 }
 
 // Map DeviceType to icon key
@@ -57,7 +57,7 @@ export function getDeviceIcon(type?: DeviceType): string | undefined {
 }
 
 // Vendor icon registry (populated by @shumoku/icons if installed)
-let vendorIconRegistry: Record<string, Record<string, IconEntry>> = {}
+const vendorIconRegistry: Record<string, Record<string, IconEntry>> = {}
 
 /**
  * Register vendor icons (called by @shumoku/icons)
@@ -72,7 +72,7 @@ export function registerVendorIcons(vendor: string, icons: Record<string, IconEn
 export function getVendorIconEntry(
   vendor: string,
   service: string,
-  resource?: string
+  resource?: string,
 ): IconEntry | undefined {
   if (vendor === 'default' || !vendor) {
     const content = defaultIcons[service] || (resource ? defaultIcons[resource] : undefined)
@@ -85,7 +85,7 @@ export function getVendorIconEntry(
   const key = resource ? `${service}/${resource}` : service
   const entry = vendorIcons[key]
   if (!entry) {
-    const serviceKey = Object.keys(vendorIcons).find(k => k.startsWith(service + '/'))
+    const serviceKey = Object.keys(vendorIcons).find((k) => k.startsWith(`${service}/`))
     if (serviceKey) return vendorIcons[serviceKey]
     return undefined
   }
@@ -99,7 +99,7 @@ export function getVendorIcon(
   vendor: string,
   service: string,
   resource?: string,
-  theme: IconThemeVariant = 'default'
+  theme: IconThemeVariant = 'default',
 ): string | undefined {
   const entry = getVendorIconEntry(vendor, service, resource)
   if (!entry) return undefined

package/src/index.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { darkTheme, HierarchicalLayout, modernTheme, version } from './index.js'
+import type { NetworkGraph } from './models/index.js'
+
+describe('@shumoku/core', () => {
+  describe('exports', () => {
+    it('should export version', () => {
+      expect(version).toBeDefined()
+    })
+
+    it('should export HierarchicalLayout', () => {
+      expect(HierarchicalLayout).toBeDefined()
+    })
+
+    it('should export themes', () => {
+      expect(modernTheme).toBeDefined()
+      expect(darkTheme).toBeDefined()
+    })
+  })
+
+  describe('HierarchicalLayout', () => {
+    it('should create instance', () => {
+      const engine = new HierarchicalLayout()
+      expect(engine).toBeInstanceOf(HierarchicalLayout)
+    })
+
+    it('should layout empty graph', async () => {
+      const engine = new HierarchicalLayout()
+      const graph: NetworkGraph = {
+        nodes: [],
+        links: [],
+      }
+      const result = await engine.layout(graph)
+      expect(result).toBeDefined()
+      expect(result.nodes).toBeDefined()
+      expect(result.links).toBeDefined()
+    })
+
+    it('should layout graph with nodes only', async () => {
+      const engine = new HierarchicalLayout()
+      const graph: NetworkGraph = {
+        nodes: [
+          { id: 'router1', label: 'Router 1', type: 'router' },
+          { id: 'switch1', label: 'Switch 1', type: 'l2-switch' },
+        ],
+        links: [],
+      }
+      const result = await engine.layout(graph)
+      expect(result.nodes.size).toBe(2)
+    })
+  })
+
+  describe('themes', () => {
+    it('should have modernTheme with required properties', () => {
+      expect(modernTheme.name).toBeDefined()
+      expect(modernTheme.colors).toBeDefined()
+      expect(modernTheme.colors.background).toBeDefined()
+    })
+
+    it('should have darkTheme with required properties', () => {
+      expect(darkTheme.name).toBeDefined()
+      expect(darkTheme.colors).toBeDefined()
+      expect(darkTheme.colors.background).toBeDefined()
+    })
+  })
+})

package/src/index.ts

@@ -2,20 +2,16 @@
  * @shumoku/core - Network topology visualization core library
  */
 
-// Models
-export * from './models/index.js'
-
+// Constants
+export * from './constants.js'
+// Icons
+export * from './icons/index.js'
 // Layout
 export * from './layout/index.js'
-
+// Models
+export * from './models/index.js'
 // Themes
 export * from './themes/index.js'
 
-// Icons
-export * from './icons/index.js'
-
-// Renderer
-export * from './renderer/index.js'
-
 // Version
 export const version = '0.0.0'