@tldiagram/core-ui 1.87.0

package/src/theme.ts

@@ -0,0 +1,336 @@
+import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
+
+const config: ThemeConfig = {
+  initialColorMode: 'dark',
+  useSystemColorMode: false,
+}
+
+export default extendTheme({
+  config,
+  fonts: {
+    heading: `'Josefin Sans', system-ui, -apple-system, sans-serif`,
+    body: `'Metrophobic', system-ui, -apple-system, sans-serif`,
+  },
+  breakpoints: {
+    base: '0em',
+    sm: '30em',
+    md: '48em',
+    compact: '53em',
+    lg: '62em',
+    xl: '80em',
+    '2xl': '96em',
+  },
+  colors: {
+    clay: {
+      bg: 'var(--bg-element)',
+      out: 'color-mix(in srgb, var(--bg-element), black 10%)',
+      in: 'color-mix(in srgb, var(--bg-element), black 10%)',
+      text: '#cbd5e0',
+      dim: '#4a5568',
+    },
+    glass: {
+      bg: 'var(--bg-panel)',
+      border: 'rgba(255, 255, 255, 0.08)',
+    },
+  },
+  shadows: {
+    // Semantic shadows for glass panels
+    'panel': '0 8px 32px rgba(0,0,0,0.5)',
+    'panel-sm': '0 4px 10px rgba(0,0,0,0.3)',
+    'panel-hover': '0 6px 15px rgba(0,0,0,0.4)',
+    'node-selected': '0 0 0 3px rgba(99,179,237,0.35), 0 10px 36px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4)',
+    'node-source': '0 0 0 3px rgba(72, 151, 187, 0.55), 0 0 24px rgba(72, 149, 187, 0.25)',
+  },
+  transitions: {
+    easing: {
+      pop: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    },
+    duration: {
+      fast: '0.15s',
+      normal: '0.2s',
+      slow: '0.3s',
+    },
+  },
+  styles: {
+    global: {
+      body: { bg: 'var(--bg-main)', color: 'gray.100' },
+      '.glass': {
+        bg: 'glass.bg',
+        backdropFilter: 'blur(16px)',
+        border: '1px solid',
+        borderColor: 'glass.border',
+        boxShadow: 'panel',
+      },
+    },
+  },
+  components: {
+    Modal: {
+      baseStyle: {
+        dialog: {
+          bg: 'clay.bg',
+          borderRadius: '16px',
+          boxShadow: 'clay-out',
+          border: '1px solid rgba(255,255,255,0.06)',
+        },
+        header: {
+          color: 'gray.100',
+          fontSize: 'lg',
+          fontWeight: 'bold',
+          borderBottom: '1px solid rgba(255,255,255,0.06)',
+        },
+        body: {
+          color: 'gray.300',
+        },
+        footer: {
+          borderTop: '1px solid rgba(255,255,255,0.06)',
+        },
+      },
+    },
+    Drawer: {
+      baseStyle: {
+        dialog: {
+          bg: 'clay.bg',
+          borderLeft: '1px solid rgba(255,255,255,0.06)',
+          boxShadow: 'clay-out',
+        },
+      },
+    },
+    Menu: {
+      baseStyle: {
+        list: {
+          bg: 'clay.bg',
+          boxShadow: 'clay-out',
+          border: '1px solid rgba(255,255,255,0.08)',
+          borderRadius: '12px',
+          py: 2,
+          minW: '200px',
+          zIndex: 9999,
+        },
+        item: {
+          bg: 'transparent',
+          color: 'clay.text',
+          fontSize: 'sm',
+          _hover: { bg: 'whiteAlpha.100' },
+          _focus: { bg: 'whiteAlpha.100' },
+          _active: { bg: 'whiteAlpha.200' },
+        },
+      },
+    },
+    Tooltip: {
+      baseStyle: {
+        bg: 'clay.out',
+        color: 'clay.text',
+        fontSize: '12px',
+        borderRadius: '8px',
+        px: 3,
+        py: 1.5,
+        boxShadow: '0 8px 30px rgba(0,0,0,0.6)',
+        border: '1px solid rgba(255,255,255,0.06)',
+        zIndex: 99999,
+        arrow: {
+          bg: 'clay.out',
+        },
+      },
+    },
+    Select: {
+      variants: {
+        clay: {
+          field: {
+            bg: 'clay.out',
+            color: 'clay.text',
+            boxShadow: 'clay-out',
+            borderRadius: '8px',
+            border: '1px solid rgba(255,255,255,0.06)',
+            transition: 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+            _hover: { bg: 'color-mix(in srgb, var(--bg-element), white 15%)' },
+            _active: { bg: 'clay.in', boxShadow: 'clay-in' },
+            _focus: { ring: '1px', ringColor: 'var(--accent)' },
+            'option': {
+              bg: 'clay.bg',
+              color: 'clay.text',
+            }
+          },
+          icon: {
+            color: 'clay.text',
+          },
+        },
+        elevated: {
+          field: {
+            bg: 'whiteAlpha.100',
+            color: 'whiteAlpha.900',
+            borderRadius: 'md',
+            border: '1px solid',
+            borderColor: 'whiteAlpha.100',
+            boxShadow: '0 4px 10px rgba(0,0,0,0.3)',
+            transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+            _hover: { bg: 'whiteAlpha.200', transform: 'translateY(-1px)', boxShadow: 'panel-hover' },
+            _active: { transform: 'translateY(0)' },
+            'option': {
+              bg: 'gray.800',
+              color: 'white',
+            }
+          },
+          icon: {
+            color: 'whiteAlpha.600',
+          },
+        },
+      },
+      defaultProps: {
+        variant: 'elevated',
+      },
+    },
+    Input: {
+      variants: {
+        clay: {
+          field: {
+            bg: 'gray.800',
+            color: 'clay.text',
+            borderRadius: '8px',
+            border: '1px solid rgba(255,255,255,0.08)',
+            transition: 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+            _hover: { borderColor: 'whiteAlpha.300' },
+            _focus: { borderColor: 'var(--accent)', ring: '1px', ringColor: 'var(--accent)' },
+          },
+        },
+        elevated: {
+          field: {
+            bg: 'whiteAlpha.50',
+            color: 'white',
+            borderRadius: 'md',
+            border: '1px solid',
+            borderColor: 'whiteAlpha.100',
+            transition: 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+            _hover: { borderColor: 'whiteAlpha.300' },
+            _focus: { borderColor: 'var(--accent)', ring: '1px', ringColor: 'var(--accent)' },
+          },
+        },
+      },
+      defaultProps: {
+        variant: 'elevated',
+      },
+    },
+    Textarea: {
+      variants: {
+        clay: {
+          bg: 'gray.800',
+          color: 'clay.text',
+          borderRadius: '8px',
+          border: '1px solid rgba(255,255,255,0.08)',
+          transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+          _hover: { borderColor: 'whiteAlpha.300' },
+          _focus: { borderColor: 'var(--accent)', ring: '1px', ringColor: 'var(--accent)' },
+        },
+        elevated: {
+          bg: 'whiteAlpha.50',
+          color: 'white',
+          borderRadius: 'md',
+          border: '1px solid',
+          borderColor: 'whiteAlpha.100',
+          transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+          _hover: { borderColor: 'whiteAlpha.300' },
+          _focus: { borderColor: 'var(--accent)', ring: '1px', ringColor: 'var(--accent)' },
+        },
+      },
+      defaultProps: {
+        variant: 'elevated',
+      },
+    },
+    FormLabel: {
+      baseStyle: {
+        fontFamily: 'heading',
+        fontSize: 'sm',
+        color: 'gray.200',
+        mb: 2,
+        fontWeight: 'medium',
+      },
+    },
+    Button: {
+      variants: {
+        clay: {
+          bg: 'clay.out',
+          color: 'clay.text',
+          boxShadow: 'clay-out',
+          borderRadius: '8px',
+          transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+          _hover: {
+            bg: 'color-mix(in srgb, var(--bg-element), white 15%)',
+            boxShadow: 'clay-out-hover',
+            _disabled: { bg: 'clay.out' },
+          },
+          _active: {
+            bg: 'clay.in',
+            boxShadow: 'clay-in',
+            transform: 'translateY(1px)',
+          },
+          _focusVisible: {
+            ring: '2px',
+            ringColor: 'var(--accent)',
+            ringOffset: '1px',
+            ringOffsetColor: 'gray.900',
+          },
+        },
+        'clay-ghost': {
+          bg: 'transparent',
+          color: 'clay.dim',
+          transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+          _hover: {
+            bg: 'whiteAlpha.50',
+            color: 'clay.text',
+          },
+          _active: {
+            bg: 'whiteAlpha.100',
+            transform: 'translateY(1px)',
+          },
+          _focusVisible: {
+            ring: '2px',
+            ringColor: 'var(--accent)',
+            ringOffset: '1px',
+            ringOffsetColor: 'gray.900',
+          },
+        },
+        elevated: {
+          bg: 'whiteAlpha.100',
+          color: 'whiteAlpha.900',
+          borderRadius: 'md',
+          boxShadow: 'panel-sm',
+          border: '1px solid',
+          borderColor: 'whiteAlpha.100',
+          transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+          _hover: {
+            bg: 'whiteAlpha.200',
+            transform: 'translateY(-1px)',
+            boxShadow: 'panel-hover',
+            _disabled: {
+              bg: 'whiteAlpha.100',
+              transform: 'none',
+              boxShadow: 'panel-sm',
+            }
+          },
+          _active: { transform: 'translateY(0)' },
+          _focusVisible: {
+            ring: '2px',
+            ringColor: 'var(--accent)',
+            ringOffset: '1px',
+            ringOffsetColor: 'gray.900',
+          },
+        },
+        destructive: {
+          bg: 'red.900',
+          color: 'red.100',
+          transition: 'all 0.2s var(--chakra-transitions-easing-pop)',
+          _hover: { bg: 'red.800', transform: 'translateY(-1px)' },
+          _active: { transform: 'translateY(0)' },
+          _focusVisible: {
+            ring: '2px',
+            ringColor: 'red.400',
+            ringOffset: '1px',
+            ringOffsetColor: 'gray.900',
+          },
+        },
+      },
+      defaultProps: {
+        variant: 'elevated',
+      },
+    },
+  },
+})

package/src/types/index.ts

@@ -0,0 +1,234 @@
+export interface TechnologyConnector {
+  type: 'catalog' | 'custom'
+  slug?: string
+  label: string
+  is_primary_icon?: boolean
+}
+
+export interface TechnologyCatalogItem {
+  iconUrl: string
+  name: string
+  provider: string
+  docsUrl: string
+  description: string
+  websiteUrl: string
+  nameShort: string
+  defaultSlug: string
+}
+
+export interface Tag {
+  name: string
+  color: string
+  description: string | null
+}
+
+export interface LibraryElement {
+  id: number
+  name: string
+  kind: string | null
+  description: string | null
+  technology: string | null
+  url: string | null
+  logo_url: string | null
+  technology_connectors: TechnologyConnector[]
+  tags: string[]
+  repo?: string | null
+  branch?: string | null
+  file_path?: string | null
+  language?: string | null
+  created_at: string
+  updated_at: string
+  has_view: boolean
+  view_label: string | null
+}
+
+export interface View {
+  id: number
+  owner_element_id: number | null
+  name: string
+  label: string | null
+  is_root: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface ElementPlacement {
+  id: number
+  view_id: number
+  element_id: number
+  position_x: number
+  position_y: number
+}
+
+export interface PlacedElement {
+  id: number
+  view_id: number
+  element_id: number
+  position_x: number
+  position_y: number
+  name: string
+  description: string | null
+  kind: string | null
+  technology: string | null
+  url: string | null
+  logo_url: string | null
+  technology_connectors: TechnologyConnector[]
+  tags: string[]
+  repo?: string | null
+  branch?: string | null
+  file_path?: string | null
+  language?: string | null
+  has_view: boolean
+  view_label: string | null
+}
+
+export interface NavigationConnector {
+  id: number
+  element_id: number | null
+  from_view_id: number
+  to_view_id: number
+  to_view_name: string
+  relation_type: string
+}
+
+export interface Connector {
+  id: number
+  view_id: number
+  source_element_id: number
+  target_element_id: number
+  label: string | null
+  description: string | null
+  relationship: string | null
+  direction: string
+  style: string
+  url: string | null
+  source_handle: string | null
+  target_handle: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface ViewTreeNode {
+  id: number
+  owner_element_id?: number | null
+  name: string
+  description: string | null
+  level_label: string | null
+  level: number
+  depth: number
+  created_at: string
+  updated_at: string
+  parent_view_id: number | null
+  children: ViewTreeNode[]
+}
+
+export interface ViewLayer {
+  id: number
+  diagram_id: number
+  name: string
+  tags: string[]
+  color?: string
+  created_at?: string
+  updated_at?: string
+}
+
+export interface DependencyElement {
+  id: string
+  name: string
+  description?: string | null
+  type?: string | null
+  technology?: string | null
+  url?: string | null
+  logo_url?: string | null
+  technology_connectors: TechnologyConnector[]
+  tags: string[]
+  repo?: string | null
+  branch?: string | null
+  language?: string | null
+  file_path?: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface DependencyConnector {
+  id: string
+  view_id: string
+  source_element_id: string
+  target_element_id: string
+  label?: string | null
+  description?: string | null
+  relationship_type?: string | null
+  direction: string
+  connector_type: string
+  url?: string | null
+  source_handle?: string | null
+  target_handle?: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface ViewConnector {
+  id: number
+  element_id: number | null
+  from_view_id: number
+  to_view_id: number
+  to_view_name: string
+  relation_type: string
+}
+
+export interface ViewConnectorsResult {
+  child_links: ViewConnector[]
+  parent_links: ViewConnector[]
+}
+
+export interface IncomingViewConnector {
+  id: number
+  element_id: number
+  element_name: string
+  from_view_id: number
+  from_view_name: string
+  to_view_id: number
+}
+
+export interface ViewPlacement {
+  view_id: number
+  view_name: string
+}
+
+export interface ExploreViewData {
+  placements: PlacedElement[]
+  connectors: Connector[]
+}
+
+export interface ExploreData {
+  tree: ViewTreeNode[]
+  views: Record<string, ExploreViewData>
+  navigations: ViewConnector[]
+  password_required?: boolean
+}
+
+export const ELEMENT_TYPES = [
+  'person',
+  'system',
+  'container',
+  'component',
+  'database',
+  'queue',
+  'api',
+  'service',
+  'external',
+] as const
+
+export type ElementType = (typeof ELEMENT_TYPES)[number]
+
+export const TYPE_COLORS: Record<string, string> = {
+  person: 'teal',
+  system: 'blue',
+  container: 'purple',
+  component: 'orange',
+  database: 'cyan',
+  queue: 'yellow',
+  api: 'green',
+  service: 'pink',
+  external: 'gray',
+}

package/src/types/offline-ambient.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+declare module "*.svg" {
+  const src: string
+  export default src
+}
+
+declare global {
+  interface Window {
+    __TLD_VSCODE__?: boolean
+  }
+}
+
+export {}

package/src/types/vscode-messages.ts

@@ -0,0 +1,32 @@
+import type { LibraryElement } from './index'
+
+export interface WorkspaceSymbol {
+  name: string
+  kind: string
+  filePath: string
+  startLine: number
+}
+
+// Messages sent from the VS Code extension host to the webview
+export type ExtensionToWebviewMessage =
+  | { type: 'workspace-symbols'; requestId: string; symbols: WorkspaceSymbol[] }
+  | { type: 'workspace-files'; requestId: string; files: string[] }
+  | { type: 'element-placed'; elementId: number; x: number; y: number }
+  | { type: 'focus-element'; elementId: number }
+  | { type: 'diagnostics-update'; elementId: number; severity: string; message: string }
+  | { type: 'file-content'; requestId: string; content: string; startLineOffset: number }
+
+// Messages sent from the webview to the VS Code extension host
+export type WebviewToExtensionMessage =
+  | { type: 'ready' }
+  | {
+      type: 'open-file'
+      filePath: string
+      startLine?: number
+      symbolName?: string
+      symbolKind?: string
+    }
+  | { type: 'request-workspace-files'; requestId: string; pattern: string }
+  | { type: 'request-symbol-list-for-file'; requestId: string; filePath: string }
+  | { type: 'diagram-loaded'; diagramId: number; elements: LibraryElement[] }
+  | { type: 'request-file-content'; requestId: string; filePath: string; startLine: number }