@tldiagram/core-ui 1.87.0

package/dist/types/index.d.ts

@@ -0,0 +1,193 @@
+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 declare const ELEMENT_TYPES: readonly ["person", "system", "container", "component", "database", "queue", "api", "service", "external"];
+export type ElementType = (typeof ELEMENT_TYPES)[number];
+export declare const TYPE_COLORS: Record<string, string>;

package/dist/types/vscode-messages.d.ts

@@ -0,0 +1,60 @@
+import type { LibraryElement } from './index';
+export interface WorkspaceSymbol {
+    name: string;
+    kind: string;
+    filePath: string;
+    startLine: number;
+}
+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;
+};
+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;
+};

package/dist/utils/edgeDistribution.d.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties } from 'react';
+import { Position } from 'reactflow';
+export declare const HANDLE_SLOT_COUNT = 5;
+export declare const HANDLE_SLOT_GAP = 12;
+export declare const HANDLE_SLOT_CENTER_INDEX: number;
+export type LogicalHandleSide = 'top' | 'bottom' | 'left' | 'right';
+export declare const DEFAULT_SOURCE_HANDLE_SIDE: LogicalHandleSide;
+export declare const DEFAULT_TARGET_HANDLE_SIDE: LogicalHandleSide;
+export declare function getLogicalHandleId(handleId: string | null | undefined, fallback?: LogicalHandleSide | null): LogicalHandleSide | null;
+export declare function getVisualHandleSlot(groupIndex: number, groupCount: number): number;
+export declare function getVisualHandleSlotFromId(handleId: string | null | undefined): number | null;
+export declare function getVisualHandleId(side: LogicalHandleSide, slot: number): string;
+export declare function getVisualHandleIdForGroup(side: LogicalHandleSide, groupIndex: number, groupCount: number): string;
+export declare function ensureVisualHandleId(handleId: string | null | undefined, fallback: LogicalHandleSide): string | null;
+export declare function getHandleSlotOffset(slot: number): number;
+export declare function getHandleSlotOffsetFromId(handleId: string | null | undefined): number;
+export declare function getVisualHandleStyle(position: Position, slot: number): CSSProperties;
+export declare function getHandleFlowPosition(nodeX: number, nodeY: number, width: number, height: number, handleId: string | null | undefined, fallback: LogicalHandleSide): {
+    x: number;
+    y: number;
+    side: "top";
+} | {
+    x: number;
+    y: number;
+    side: "bottom";
+} | {
+    x: number;
+    y: number;
+    side: "left";
+} | {
+    x: number;
+    y: number;
+    side: "right";
+};

package/dist/utils/githubApi.d.ts

@@ -0,0 +1,4 @@
+type RepoVisibility = 'public' | 'private' | 'unknown';
+export declare function githubRequest(path: string): Promise<Response>;
+export declare function getGithubRepoVisibility(repoSlug: string): Promise<RepoVisibility>;
+export {};

package/dist/utils/githubCache.d.ts

@@ -0,0 +1,17 @@
+declare class GithubCache {
+    private cache;
+    constructor();
+    private load;
+    private save;
+    private cleanup;
+    getBranches(repo: string): string[] | null;
+    setBranches(repo: string, data: string[]): void;
+    getTree(repo: string, branch: string): string[] | null;
+    setTree(repo: string, branch: string, data: string[]): void;
+    getContent(rawUrl: string): string | null;
+    setContent(rawUrl: string, data: string): void;
+    getRepoPublic(slug: string): boolean | null;
+    setRepoPublic(slug: string, isPublic: boolean): void;
+}
+export declare const githubCache: GithubCache;
+export {};

package/dist/utils/ids.d.ts

@@ -0,0 +1,2 @@
+export declare function parseNumericId(value: string | null | undefined): number | null;
+export declare function idToString(value: number | null | undefined): string;

package/dist/utils/technologyCatalog.d.ts

@@ -0,0 +1,15 @@
+import type { TechnologyCatalogItem } from '../types';
+interface SearchableCatalogItem {
+    item: TechnologyCatalogItem;
+    haystack: string;
+}
+interface TechnologyCatalogIndex {
+    items: TechnologyCatalogItem[];
+    searchable: SearchableCatalogItem[];
+    bySlug: Map<string, TechnologyCatalogItem>;
+}
+export declare function resolveWithBase(urlOrPath: string): string;
+export declare function getTechnologyCatalogIndex(): Promise<TechnologyCatalogIndex>;
+export declare function searchTechnologyCatalog(query: string, maxResults?: number): Promise<TechnologyCatalogItem[]>;
+export declare function getTechnologyCatalogItemBySlug(slug: string): Promise<TechnologyCatalogItem | null>;
+export {};

package/dist/utils/toast.d.ts

@@ -0,0 +1,15 @@
+import { UseToastOptions, ToastId } from '@chakra-ui/react';
+declare const chakraToast: any, ToastContainer: any;
+/**
+ * Global toast utility that intercepts 'error' status toasts to combine multiple
+ * backend errors into a single notification with a counter.
+ */
+interface CustomToast {
+    (options: UseToastOptions): ToastId | undefined;
+    close: typeof chakraToast.close;
+    closeAll: typeof chakraToast.closeAll;
+    update: typeof chakraToast.update;
+    isActive: typeof chakraToast.isActive;
+}
+declare const toast: CustomToast;
+export { toast, ToastContainer };

package/dist/utils/treesitter.d.ts

@@ -0,0 +1,13 @@
+import Parser from 'web-tree-sitter';
+export declare function initTreeSitter(): Promise<void>;
+export type SupportedLanguage = 'javascript' | 'typescript' | 'python' | 'java' | 'cpp' | 'go' | 'rust';
+export declare function detectLanguage(path: string): SupportedLanguage | null;
+export declare function getParser(language: SupportedLanguage): Promise<Parser>;
+export interface ParsedSymbol {
+    name: string;
+    type: string;
+    startLine: number;
+    endLine: number;
+}
+export declare function extractSymbols(tree: Parser.Tree, language: SupportedLanguage): ParsedSymbol[];
+export declare function findSymbolByName(tree: Parser.Tree, language: SupportedLanguage, name: string, type: string): ParsedSymbol | null;

package/dist/utils/url.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Resolves a static asset path (like a logo or icon) taking into account
+ * the environment (dev vs production, web vs native Capacitor).
+ */
+export declare function resolveIconPath(path: string | null | undefined): string;
+/**
+ * Normalizes any git repository reference to an "owner/repo" slug:
+ *   - SSH:   git@github.com:owner/repo.git  → owner/repo
+ *   - HTTPS: https://github.com/owner/repo.git → owner/repo
+ *   - Plain: owner/repo                     → owner/repo
+ */
+export declare function parseRepoSlug(repo: string): string;

package/package.json

@@ -0,0 +1,159 @@
+{
+  "name": "@tldiagram/core-ui",
+  "version": "1.87.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Mertcikla/tld"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "prepare:icons": "go run ../scripts/extract_icons.go ./public",
+    "strip:icons": "rm -rf dist/icons dist/icons.json",
+    "dev": "vite --config vite.config.ts",
+    "predev": "npm run prepare:icons",
+    "dev:lib": "vite build --config vite.lib.config.ts --watch",
+    "build": "npm run build:lib && npm run strip:icons",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
+    "prebuild:app": "npm run prepare:icons",
+    "build:app": "tsc && vite build --config vite.config.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.11.0-20260419172603-8192c519478e.1",
+    "@bufbuild/protobuf": "^2.11.0",
+    "esbuild": "^0.25.12"
+  },
+  "peerDependencies": {
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "^2.10.4",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.40.0",
+    "@connectrpc/connect": "^2.1.1",
+    "@connectrpc/connect-web": "^2.1.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@uiw/react-codemirror": "^4.25.8",
+    "d3-force": "^3.0.0",
+    "elkjs": "^0.11.1",
+    "framer-motion": "^11.18.2",
+    "html-to-image": "^1.11.13",
+    "mermaid-ast": "^0.8.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.1",
+    "reactflow": "^11.11.4",
+    "web-tree-sitter": "0.21.0"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/lang-cpp": {
+      "optional": true
+    },
+    "@codemirror/lang-java": {
+      "optional": true
+    },
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/lang-python": {
+      "optional": true
+    },
+    "@codemirror/lang-rust": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/theme-one-dark": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@uiw/react-codemirror": {
+      "optional": true
+    },
+    "web-tree-sitter": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "^2.10.4",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.40.0",
+    "@connectrpc/connect": "^2.1.1",
+    "@connectrpc/connect-web": "^2.1.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@eslint/js": "^9.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@uiw/react-codemirror": "^4.25.8",
+    "@vitejs/plugin-react": "^4.3.4",
+    "d3-force": "^3.0.0",
+    "elkjs": "^0.11.1",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "framer-motion": "^11.18.2",
+    "globals": "^15.0.0",
+    "html-to-image": "^1.11.13",
+    "mermaid-ast": "^0.8.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.1",
+    "reactflow": "^11.11.4",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^6.0.3",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.2",
+    "web-tree-sitter": "^0.21.0"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-arm64-gnu": "^4.59.0",
+    "@rollup/rollup-linux-arm64-musl": "^4.59.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --fix"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react'
+import { Routes, Route, Navigate, Outlet } from 'react-router-dom'
+import { Box, Spinner, Center } from '@chakra-ui/react'
+import { api } from './api/client'
+import ViewEditor from './pages/ViewEditor'
+import ViewsPage from './pages/Views'
+import Dependencies from './pages/Dependencies'
+import { SharedInfiniteZoom } from './pages/InfiniteZoom'
+import Settings from './pages/Settings'
+import AppearanceSettings from './pages/AppearanceSettings'
+import { HeaderProvider, useHeader } from './components/HeaderContext'
+import TopMenuBar from './components/TopMenuBar'
+import DemoPage, { DemoNavigator } from './demo/DemoPage'
+import { ThemeProvider } from './context/ThemeContext'
+import { ACCENT_DEFAULT, BACKGROUND_DEFAULT, ELEMENT_DEFAULT, hexToRgba } from './constants/colors'
+import { platform } from './platform/local'
+
+function AppLayout() {
+  const header = useHeader()
+  const node = header && typeof header === 'object' && 'node' in header ? (header as { node: React.ReactNode }).node : header
+  const hideMobileBar = header && typeof header === 'object' && 'hideMobileBar' in header ? !!(header as { hideMobileBar?: boolean }).hideMobileBar : false
+
+  return (
+    <Box h="100vh" display="flex" flexDirection="column" bg="var(--bg-canvas)" overflow="hidden">
+      <TopMenuBar hideMobileBar={hideMobileBar}>
+        {node}
+      </TopMenuBar>
+      <Box
+        h={{ base: 'var(--topbar-h-mobile-total)', sm: 'var(--topbar-h-total)' }}
+        mb={{ base: 'var(--topbar-content-gap)', sm: '0px' }}
+        flexShrink={0}
+      />
+      <Box flex="1" overflow="hidden" position="relative">
+        <Outlet />
+      </Box>
+    </Box>
+  )
+}
+
+;(() => {
+  const accent = localStorage.getItem('diag:accent-color') ?? ACCENT_DEFAULT
+  document.documentElement.style.setProperty('--accent', accent)
+  const rgba = hexToRgba(accent, 1)
+  document.documentElement.style.setProperty('--accent-rgb', rgba.slice(5, -3))
+
+  const background = localStorage.getItem('diag:background-color') ?? BACKGROUND_DEFAULT
+  document.documentElement.style.setProperty('--bg-main', background)
+  const bgRgba = hexToRgba(background, 1)
+  document.documentElement.style.setProperty('--bg-main-rgb', bgRgba.slice(5, -3))
+
+  const elementColor = localStorage.getItem('diag:element-color') ?? ELEMENT_DEFAULT
+  document.documentElement.style.setProperty('--bg-element', elementColor)
+  const objRgba = hexToRgba(elementColor, 1)
+  document.documentElement.style.setProperty('--bg-element-rgb', objRgba.slice(5, -3))
+})()
+
+function HomeRedirect() {
+  const [loading, setLoading] = useState(true)
+  const [target, setTarget] = useState<string | null>(null)
+
+  useEffect(() => {
+    let mounted = true
+    api.workspace.views
+      .tree()
+      .then((tree) => {
+        if (!mounted) return
+        const roots = (tree || []).filter((view) => view.parent_view_id === null)
+        if (roots.length > 0) setTarget(`/views/${roots[0].id}`)
+        else setTarget('/views')
+      })
+      .catch(() => mounted && setTarget('/views'))
+      .finally(() => mounted && setLoading(false))
+
+    return () => {
+      mounted = false
+    }
+  }, [])
+
+  if (loading) {
+    return (
+      <Center h="100vh">
+        <Spinner size="xl" />
+      </Center>
+    )
+  }
+
+  return <Navigate to={target || '/views'} replace />
+}
+
+export default function App() {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    api.system.ready()
+      .then(() => platform.initPlatform())
+      .finally(() => setReady(true))
+  }, [])
+
+  if (!ready) {
+    return (
+      <Center h="100vh">
+        <Spinner size="xl" />
+      </Center>
+    )
+  }
+
+  return (
+    <ThemeProvider>
+      <Box minH="100vh" bg="var(--bg-canvas)">
+        <Routes>
+          {platform.getRoutes({ user: null })}
+
+          <Route path="/explore/shared/:token" element={<Box h="100vh" overflow="hidden"><HeaderProvider><SharedInfiniteZoom /></HeaderProvider></Box>} />
+          <Route path="/demo" element={<DemoNavigator />} />
+          <Route path="/demo/:id" element={<DemoPage />} />
+
+          <Route
+            element={
+              <HeaderProvider>
+                <AppLayout />
+              </HeaderProvider>
+            }
+          >
+            <Route index element={<HomeRedirect />} />
+            <Route path="views" element={<ViewsPage />} />
+            <Route path="views/:id" element={<ViewEditor />} />
+            <Route path="dependencies" element={<Dependencies />} />
+            <Route path="explore" element={<Navigate to="/views" replace />} />
+            <Route path="settings" element={<Settings />}>
+              <Route index element={<Navigate to="appearance" replace />} />
+              {platform.getSettingsRoutes({ user: null })}
+              <Route path="appearance" element={<AppearanceSettings />} />
+            </Route>
+          </Route>
+
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Box>
+    </ThemeProvider>
+  )
+}