@shumoku/core 0.1.1 → 0.2.1

package/src/layout/index.ts

@@ -2,5 +2,5 @@
  * Shumoku Layout Engines
  */
 
-export { HierarchicalLayout, hierarchicalLayout } from './hierarchical.js'
 export type { HierarchicalLayoutOptions } from './hierarchical.js'
+export { HierarchicalLayout, hierarchicalLayout } from './hierarchical.js'

package/src/models/types.ts

@@ -8,13 +8,13 @@
 // ============================================
 
 export type NodeShape =
-  | 'rect'      // Rectangle [text]
-  | 'rounded'   // Rounded rectangle (text)
-  | 'circle'    // Circle ((text))
-  | 'diamond'   // Diamond {text}
-  | 'hexagon'   // Hexagon {{text}}
-  | 'cylinder'  // Database cylinder [(text)]
-  | 'stadium'   // Stadium/pill shape ([text])
+  | 'rect' // Rectangle [text]
+  | 'rounded' // Rounded rectangle (text)
+  | 'circle' // Circle ((text))
+  | 'diamond' // Diamond {text}
+  | 'hexagon' // Hexagon {{text}}
+  | 'cylinder' // Database cylinder [(text)]
+  | 'stadium' // Stadium/pill shape ([text])
   | 'trapezoid' // Trapezoid [/text/]
 
 export interface NodeStyle {
@@ -96,17 +96,17 @@ export interface Node {
 // ============================================
 
 export type LinkType =
-  | 'solid'     // Normal line -->
-  | 'dashed'    // Dashed line -.->
-  | 'thick'     // Thick line ==>
-  | 'double'    // Double line o==o
+  | 'solid' // Normal line -->
+  | 'dashed' // Dashed line -.->
+  | 'thick' // Thick line ==>
+  | 'double' // Double line o==o
   | 'invisible' // No line (for layout only)
 
 export type ArrowType =
-  | 'none'      // No arrow ---
-  | 'forward'   // Arrow at target -->
-  | 'back'      // Arrow at source <--
-  | 'both'      // Arrows at both <-->
+  | 'none' // No arrow ---
+  | 'forward' // Arrow at target -->
+  | 'back' // Arrow at source <--
+  | 'both' // Arrows at both <-->
 
 export interface LinkStyle {
   stroke?: string
@@ -123,7 +123,7 @@ export interface LinkStyle {
 export interface LinkEndpoint {
   node: string
   port?: string
-  ip?: string      // e.g., "10.57.0.1/30"
+  ip?: string // e.g., "10.57.0.1/30"
 }
 
 /**
@@ -276,9 +276,19 @@ export interface Subgraph {
  * Standard paper size presets
  */
 export type PaperSize =
-  | 'A0' | 'A1' | 'A2' | 'A3' | 'A4'
-  | 'B0' | 'B1' | 'B2' | 'B3' | 'B4'
-  | 'letter' | 'legal' | 'tabloid'
+  | 'A0'
+  | 'A1'
+  | 'A2'
+  | 'A3'
+  | 'A4'
+  | 'B0'
+  | 'B1'
+  | 'B2'
+  | 'B3'
+  | 'B4'
+  | 'letter'
+  | 'legal'
+  | 'tabloid'
 
 /**
  * Paper orientation
@@ -289,19 +299,19 @@ export type PaperOrientation = 'portrait' | 'landscape'
  * Paper size dimensions in mm
  */
 export const PAPER_SIZES: Record<PaperSize, { width: number; height: number }> = {
-  'A0': { width: 841, height: 1189 },
-  'A1': { width: 594, height: 841 },
-  'A2': { width: 420, height: 594 },
-  'A3': { width: 297, height: 420 },
-  'A4': { width: 210, height: 297 },
-  'B0': { width: 1000, height: 1414 },
-  'B1': { width: 707, height: 1000 },
-  'B2': { width: 500, height: 707 },
-  'B3': { width: 353, height: 500 },
-  'B4': { width: 250, height: 353 },
-  'letter': { width: 216, height: 279 },
-  'legal': { width: 216, height: 356 },
-  'tabloid': { width: 279, height: 432 },
+  A0: { width: 841, height: 1189 },
+  A1: { width: 594, height: 841 },
+  A2: { width: 420, height: 594 },
+  A3: { width: 297, height: 420 },
+  A4: { width: 210, height: 297 },
+  B0: { width: 1000, height: 1414 },
+  B1: { width: 707, height: 1000 },
+  B2: { width: 500, height: 707 },
+  B3: { width: 353, height: 500 },
+  B4: { width: 250, height: 353 },
+  letter: { width: 216, height: 279 },
+  legal: { width: 216, height: 356 },
+  tabloid: { width: 279, height: 432 },
 }
 
 /**
@@ -354,7 +364,7 @@ export interface CanvasSettings {
 export function paperSizeToPixels(
   size: PaperSize,
   orientation: PaperOrientation = 'portrait',
-  dpi: number = 96
+  dpi = 96,
 ): { width: number; height: number } {
   const dimensions = PAPER_SIZES[size]
   const mmToInch = 1 / 25.4
@@ -378,6 +388,38 @@ export function paperSizeToPixels(
  */
 export type ThemeType = 'light' | 'dark'
 
+export interface LegendSettings {
+  /**
+   * Show legend in the diagram
+   */
+  enabled?: boolean
+
+  /**
+   * Legend position
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+  /**
+   * Show device type icons
+   */
+  showDeviceTypes?: boolean
+
+  /**
+   * Show bandwidth indicators
+   */
+  showBandwidth?: boolean
+
+  /**
+   * Show cable/link types
+   */
+  showCableTypes?: boolean
+
+  /**
+   * Show VLAN colors
+   */
+  showVlans?: boolean
+}
+
 export interface GraphSettings {
   /**
    * Default layout direction
@@ -408,6 +450,11 @@ export interface GraphSettings {
    * Canvas/sheet size settings
    */
   canvas?: CanvasSettings
+
+  /**
+   * Legend configuration
+   */
+  legend?: boolean | LegendSettings
 }
 
 export interface NetworkGraph {
@@ -502,10 +549,10 @@ export interface LayoutNode {
 
 export interface LayoutLink {
   id: string
-  from: string          // Node ID
-  to: string            // Node ID
-  fromEndpoint: LinkEndpoint  // Full endpoint info
-  toEndpoint: LinkEndpoint    // Full endpoint info
+  from: string // Node ID
+  to: string // Node ID
+  fromEndpoint: LinkEndpoint // Full endpoint info
+  toEndpoint: LinkEndpoint // Full endpoint info
   points: Position[]
   link: Link
 }

package/src/themes/dark.ts

@@ -2,49 +2,49 @@
  * Dark theme
  */
 
-import type { Theme } from './types.js'
-import { modernTheme } from './modern.js'
 import { DeviceType } from '../models/index.js'
+import { modernTheme } from './modern.js'
+import type { Theme } from './types.js'
 
 export const darkTheme: Theme = {
   ...modernTheme,
   name: 'dark',
   variant: 'dark',
-  
+
   colors: {
     ...modernTheme.colors,
-    
+
     // Backgrounds (inverted)
     background: '#0f172a',
     surface: '#1e293b',
     surfaceHover: '#334155',
-    
+
     // Text (inverted)
     text: '#f1f5f9',
     textSecondary: '#94a3b8',
     textDisabled: '#475569',
-    
+
     // Primary (adjusted for dark)
     primary: '#60a5fa',
     primaryHover: '#3b82f6',
     primaryActive: '#2563eb',
-    
+
     // Secondary (adjusted for dark)
     secondary: '#a78bfa',
     secondaryHover: '#8b5cf6',
     secondaryActive: '#7c3aed',
-    
+
     // Status (adjusted for dark)
     success: '#34d399',
     warning: '#fbbf24',
     error: '#f87171',
     info: '#60a5fa',
-    
+
     // Links
     link: '#60a5fa',
     linkHover: '#3b82f6',
     linkDown: '#f87171',
-    
+
     // Device colors (adjusted for dark)
     devices: {
       [DeviceType.Router]: '#60a5fa',
@@ -58,7 +58,7 @@ export const darkTheme: Theme = {
       [DeviceType.Internet]: '#818cf8',
       [DeviceType.Generic]: '#64748b',
     },
-    
+
     // Module colors (adjusted for dark)
     modules: {
       core: '#1e3a8a',
@@ -68,15 +68,15 @@ export const darkTheme: Theme = {
       cloud: '#312e81',
       default: '#374151',
     },
-    
+
     // Grid
     grid: '#334155',
     guideline: '#60a5fa',
   },
-  
+
   shadows: {
     ...modernTheme.shadows,
-    
+
     // Darker shadows for dark theme
     small: {
       color: '#000000',
@@ -107,4 +107,4 @@ export const darkTheme: Theme = {
       alpha: 0.7,
     },
   },
-}
+}

package/src/themes/index.ts

@@ -2,23 +2,23 @@
  * Theme system exports
  */
 
-export * from './types.js'
-export { modernTheme } from './modern.js'
 export { darkTheme } from './dark.js'
+export { modernTheme } from './modern.js'
+export * from './types.js'
 export {
-  mergeTheme,
-  createTheme,
   applyThemeToCSS,
-  getThemeFromCSS
+  createTheme,
+  getThemeFromCSS,
+  mergeTheme,
 } from './utils.js'
 
+import { darkTheme } from './dark.js'
 // Default themes map
 import { modernTheme } from './modern.js'
-import { darkTheme } from './dark.js'
 
 export const themes = {
   modern: modernTheme,
   dark: darkTheme,
 } as const
 
-export type ThemeName = keyof typeof themes
+export type ThemeName = keyof typeof themes

package/src/themes/modern.ts

@@ -2,45 +2,45 @@
  * Modern theme - Default light theme
  */
 
-import type { Theme } from './types.js'
 import { DeviceType } from '../models/index.js'
+import type { Theme } from './types.js'
 
 export const modernTheme: Theme = {
   name: 'modern',
   variant: 'light',
-  
+
   colors: {
     // Backgrounds
     background: '#ffffff',
     surface: '#f8fafc',
     surfaceHover: '#f1f5f9',
-    
+
     // Text
     text: '#0f172a',
     textSecondary: '#64748b',
     textDisabled: '#cbd5e1',
-    
+
     // Primary (Blue)
     primary: '#3b82f6',
     primaryHover: '#2563eb',
     primaryActive: '#1d4ed8',
-    
+
     // Secondary (Purple)
     secondary: '#8b5cf6',
     secondaryHover: '#7c3aed',
     secondaryActive: '#6d28d9',
-    
+
     // Status
     success: '#10b981',
     warning: '#f59e0b',
     error: '#ef4444',
     info: '#3b82f6',
-    
+
     // Links
     link: '#3b82f6',
     linkHover: '#2563eb',
     linkDown: '#ef4444',
-    
+
     // Device colors
     devices: {
       [DeviceType.Router]: '#3b82f6',
@@ -54,7 +54,7 @@ export const modernTheme: Theme = {
       [DeviceType.Internet]: '#6366f1',
       [DeviceType.Generic]: '#94a3b8',
     },
-    
+
     // Module colors
     modules: {
       core: '#dbeafe',
@@ -64,19 +64,19 @@ export const modernTheme: Theme = {
       cloud: '#e0e7ff',
       default: '#f3f4f6',
     },
-    
+
     // Grid
     grid: '#e5e7eb',
     guideline: '#3b82f6',
   },
-  
+
   dimensions: {
     device: {
       small: { width: 60, height: 40 },
       medium: { width: 80, height: 60 },
       large: { width: 120, height: 80 },
     },
-    
+
     fontSize: {
       tiny: 10,
       small: 12,
@@ -84,14 +84,14 @@ export const modernTheme: Theme = {
       large: 16,
       huge: 20,
     },
-    
+
     lineWidth: {
       thin: 1,
       normal: 2,
       thick: 3,
       emphasis: 4,
     },
-    
+
     spacing: {
       xs: 4,
       sm: 8,
@@ -99,7 +99,7 @@ export const modernTheme: Theme = {
       lg: 24,
       xl: 32,
     },
-    
+
     radius: {
       small: 4,
       medium: 8,
@@ -107,7 +107,7 @@ export const modernTheme: Theme = {
       round: 9999,
     },
   },
-  
+
   shadows: {
     none: {
       color: 'transparent',
@@ -144,7 +144,7 @@ export const modernTheme: Theme = {
       alpha: 0.5,
     },
   },
-  
+
   animations: {
     duration: {
       instant: 0,
@@ -152,7 +152,7 @@ export const modernTheme: Theme = {
       normal: 300,
       slow: 500,
     },
-    
+
     easing: {
       linear: 'linear',
       easeIn: 'ease-in',
@@ -161,14 +161,14 @@ export const modernTheme: Theme = {
       bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
     },
   },
-  
+
   typography: {
     fontFamily: {
       sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       mono: 'ui-monospace, "Cascadia Mono", "Consolas", monospace',
       display: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     },
-    
+
     fontWeight: {
       light: 300,
       regular: 400,
@@ -176,11 +176,11 @@ export const modernTheme: Theme = {
       semibold: 600,
       bold: 700,
     },
-    
+
     letterSpacing: {
       tight: -0.025,
       normal: 0,
       wide: 0.025,
     },
   },
-}
+}

package/src/themes/types.ts

@@ -11,28 +11,28 @@ export interface ThemeColors {
   background: string
   surface: string
   surfaceHover: string
-  
+
   /**
    * Text colors
    */
   text: string
   textSecondary: string
   textDisabled: string
-  
+
   /**
    * Primary palette
    */
   primary: string
   primaryHover: string
   primaryActive: string
-  
+
   /**
    * Secondary palette
    */
   secondary: string
   secondaryHover: string
   secondaryActive: string
-  
+
   /**
    * Status colors
    */
@@ -40,19 +40,19 @@ export interface ThemeColors {
   warning: string
   error: string
   info: string
-  
+
   /**
    * Link colors
    */
   link: string
   linkHover: string
   linkDown: string
-  
+
   /**
    * Device type colors
    */
   devices: Partial<Record<DeviceType | string, string>>
-  
+
   /**
    * Module colors (for Bento Grid)
    */
@@ -64,7 +64,7 @@ export interface ThemeColors {
     cloud: string
     default: string
   }
-  
+
   /**
    * Grid and guides
    */
@@ -81,7 +81,7 @@ export interface ThemeDimensions {
     medium: { width: number; height: number }
     large: { width: number; height: number }
   }
-  
+
   /**
    * Font sizes
    */
@@ -92,7 +92,7 @@ export interface ThemeDimensions {
     large: number
     huge: number
   }
-  
+
   /**
    * Line widths
    */
@@ -102,7 +102,7 @@ export interface ThemeDimensions {
     thick: number
     emphasis: number
   }
-  
+
   /**
    * Spacing
    */
@@ -113,7 +113,7 @@ export interface ThemeDimensions {
     lg: number
     xl: number
   }
-  
+
   /**
    * Border radius
    */
@@ -154,7 +154,7 @@ export interface ThemeAnimations {
     normal: number
     slow: number
   }
-  
+
   /**
    * Easing functions
    */
@@ -176,7 +176,7 @@ export interface ThemeTypography {
     mono: string
     display: string
   }
-  
+
   /**
    * Font weights
    */
@@ -187,7 +187,7 @@ export interface ThemeTypography {
     semibold: number
     bold: number
   }
-  
+
   /**
    * Letter spacing
    */
@@ -203,37 +203,37 @@ export interface Theme {
    * Theme name
    */
   name: string
-  
+
   /**
    * Theme variant
    */
   variant: 'light' | 'dark'
-  
+
   /**
    * Color definitions
    */
   colors: ThemeColors
-  
+
   /**
    * Size definitions
    */
   dimensions: ThemeDimensions
-  
+
   /**
    * Shadow definitions
    */
   shadows: ThemeShadows
-  
+
   /**
    * Animation settings
    */
   animations: ThemeAnimations
-  
+
   /**
    * Typography settings
    */
   typography: ThemeTypography
-  
+
   /**
    * Custom properties
    */
@@ -245,7 +245,7 @@ export interface ThemeOptions {
    * Base theme to extend
    */
   extends?: Theme
-  
+
   /**
    * Partial overrides
    */
@@ -257,6 +257,6 @@ export type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends (infer U)[]
     ? DeepPartial<U>[]
     : T[P] extends readonly (infer U)[]
-    ? readonly DeepPartial<U>[]
-    : DeepPartial<T[P]>
-}
+      ? readonly DeepPartial<U>[]
+      : DeepPartial<T[P]>
+}