@tldiagram/core-ui 2.0.7 → 2.0.9

package/dist/lib/vscodeBridge.d.ts

@@ -1,5 +1,12 @@
 import type { ExtensionToWebviewMessage, WebviewToExtensionMessage } from '../types/vscode-messages';
+declare global {
+    interface Window {
+        __TLD_VSCODE_API__?: {
+            postMessage: (msg: unknown) => void;
+        };
+    }
+}
 export declare const vscodeBridge: {
-    postMessage: (_msg: WebviewToExtensionMessage) => void;
-    onMessage: (_handler: (msg: ExtensionToWebviewMessage) => void) => (() => void);
+    postMessage: (msg: WebviewToExtensionMessage) => void;
+    onMessage: (handler: (msg: ExtensionToWebviewMessage) => void) => (() => void);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "type": "module",
   "repository": {
     "type": "git",
@@ -30,13 +30,14 @@
     "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",
+    "build:vscode": "vite build --config vite.vscode.config.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "preview": "vite preview",
     "test": "vitest run"
   },
   "dependencies": {
-    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.12.0-20260510134954-1dd1981cf3f6.1",
+    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.12.0-20260516210401-05aeb295f766.1",
     "@bufbuild/protobuf": "^2.11.0",
     "esbuild": "^0.25.12",
     "zustand": "^5.0.12"

package/src/App.tsx

@@ -20,17 +20,22 @@ 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
+  const hideTopBar = typeof window !== 'undefined' && !!window.__TLD_VSCODE__
 
   return (
     <Box h="100dvh" display="flex" flexDirection="column" bg="var(--bg-canvas)" overflow="hidden">
-      <TopMenuBar hideMobileBar={hideMobileBar} rightSlot={<WorkspacePanel />}>
-        {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}
-      />
+      {!hideTopBar && (
+        <>
+          <TopMenuBar hideMobileBar={hideMobileBar} rightSlot={<WorkspacePanel />}>
+            {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" minH={0} overflow="hidden" position="relative">
         <Outlet />
       </Box>

package/src/api/client.ts

@@ -650,15 +650,16 @@ export const api = {
         }),
 
       content: (id: number): Promise<{ placements: PlacedElement[]; connectors: Connector[] }> =>
-        (async () => {
-          const res = await fetch(apiUrl(`/views/${id}/projected-content`))
-          if (!res.ok) throw new Error('Failed to load view content')
-          const json = await res.json() as { placements?: Record<string, unknown>[]; connectors?: Record<string, unknown>[] }
+        rpc(async () => {
+          const res = await workspaceClient.getView({ viewId: id, includeContent: true })
+          const json = j<{
+            content?: { placements?: Record<string, unknown>[]; connectors?: Record<string, unknown>[] }
+          }>(GetViewResponseSchema, res)
           return {
-            placements: (json.placements ?? []).map(protoPlacedElement),
-            connectors: (json.connectors ?? []).map(protoConnector),
+            placements: (json.content?.placements ?? []).map(protoPlacedElement),
+            connectors: (json.content?.connectors ?? []).map(protoConnector),
           }
-        })(),
+        }),
 
       tree: (): Promise<ViewTreeNode[]> =>
         rpc(async () => {

package/src/api/transport-vscode.ts

@@ -1,28 +1,20 @@
 /**
  * VS Code webview transport.
  *
- * Replaces the session-cookie transport with Bearer token auth.
- * The API key and server URL are injected by the extension host
- * via window globals before this script runs.
+ * Uses the local tld CLI HTTP server URL injected by the extension host.
  */
 import { createConnectTransport } from '@connectrpc/connect-web'
 
 declare global {
   interface Window {
-    __TLD_API_KEY__?: string
     __TLD_SERVER_URL__?: string
     __TLD_DIAGRAM_ID__?: number
   }
 }
 
-const serverUrl = (window.__TLD_SERVER_URL__ ?? 'https://tldiagram.com').replace(/\/$/, '')
-const apiKey = window.__TLD_API_KEY__ ?? ''
+const serverUrl = (window.__TLD_SERVER_URL__ ?? 'http://127.0.0.1:8060').replace(/\/$/, '')
 
 export const transport = createConnectTransport({
   baseUrl: `${serverUrl}/api`,
-  fetch: (input, init) => {
-    const headers = new Headers(init?.headers)
-    if (apiKey) headers.set('Authorization', `Bearer ${apiKey}`)
-    return fetch(input, { ...init, headers })
-  },
+  fetch: (input, init) => fetch(input, init),
 })

package/src/components/ElementLibrary.tsx

@@ -122,6 +122,7 @@ function ElementLibrary({
       setHasMore(newElements.length === limit)
     } catch (err) {
       console.error('Failed to fetch elements:', err)
+      setHasMore(false)
     } finally {
       isFetching.current = false
       setLoading(false)

package/src/components/ElementNode.tsx

@@ -18,7 +18,17 @@ import {
   HANDLE_SLOT_COUNT,
 } from '../utils/edgeDistribution'
 
-function VscodeCodePreview({ filePath, isCanvasMoving }: { filePath: string; isCanvasMoving?: boolean }) {
+function VscodeCodePreview({
+  filePath,
+  fallbackSymbolName,
+  fallbackSymbolKind,
+  isCanvasMoving,
+}: {
+  filePath: string
+  fallbackSymbolName?: string
+  fallbackSymbolKind?: string | null
+  isCanvasMoving?: boolean
+}) {
   const [content, setContent] = useState<string | null>(null)
   const [startLineOffset, setStartLineOffset] = useState(0)
   const [isOpen, setIsOpen] = useState(false)
@@ -33,8 +43,8 @@ function VscodeCodePreview({ filePath, isCanvasMoving }: { filePath: string; isC
     }
   }, [anchorStr])
   const startLine = typeof anchor?.startLine === 'number' ? anchor.startLine : undefined
-  const symbolName = typeof anchor?.name === 'string' ? anchor.name : undefined
-  const symbolKind = typeof anchor?.type === 'string' ? anchor.type : undefined
+  const symbolName = typeof anchor?.name === 'string' ? anchor.name : fallbackSymbolName
+  const symbolKind = typeof anchor?.type === 'string' ? anchor.type : fallbackSymbolKind ?? undefined
 
   useEffect(() => {
     if (!isOpen) return
@@ -806,6 +816,8 @@ function ElementNode({ data, selected }: Props) {
           )}
           <VscodeCodePreview
             filePath={data.file_path}
+            fallbackSymbolName={data.name}
+            fallbackSymbolKind={data.kind}
             isCanvasMoving={data.isCanvasMoving}
           />
         </HStack>

package/src/config/runtime-vscode.ts

@@ -16,7 +16,7 @@ function trimTrailingSlash(value: string): string {
   return value.replace(/\/+$/, '')
 }
 
-const serverUrl = trimTrailingSlash(window.__TLD_SERVER_URL__ ?? 'https://tldiagram.com')
+const serverUrl = trimTrailingSlash(window.__TLD_SERVER_URL__ ?? 'http://127.0.0.1:8060')
 
 export const appBase = '/app/'
 export const routerBasename = undefined
@@ -29,9 +29,7 @@ export function apiUrl(path: string): string {
 }
 
 export function fetchApiAsset(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
-  const headers = new Headers(init?.headers)
-  if (window.__TLD_API_KEY__) headers.set('Authorization', `Bearer ${window.__TLD_API_KEY__}`)
-  return fetch(input, { ...init, headers })
+  return fetch(input, init)
 }
 
 export function oauthGoogleStartUrl(): string {

package/src/lib/vscodeBridge.ts

@@ -1,7 +1,26 @@
 import type { ExtensionToWebviewMessage, WebviewToExtensionMessage } from '../types/vscode-messages'
 
-// No-op stub used in web/native builds. Swapped for vscodeBridge-vscode.ts in VS Code builds.
+declare global {
+  interface Window {
+    __TLD_VSCODE_API__?: {
+      postMessage: (msg: unknown) => void
+    }
+  }
+}
+
+// Runtime-aware bridge. It is a no-op in web/native builds, but works when the
+// core UI is bundled directly into the VS Code webview.
 export const vscodeBridge = {
-  postMessage: (_msg: WebviewToExtensionMessage) => {},
-  onMessage: (_handler: (msg: ExtensionToWebviewMessage) => void): (() => void) => () => {},
+  postMessage: (msg: WebviewToExtensionMessage) => {
+    window.__TLD_VSCODE_API__?.postMessage(msg)
+  },
+  onMessage: (handler: (msg: ExtensionToWebviewMessage) => void): (() => void) => {
+    const listener = (event: MessageEvent) => {
+      if (event.data && typeof event.data === 'object' && 'type' in event.data) {
+        handler(event.data as ExtensionToWebviewMessage)
+      }
+    }
+    window.addEventListener('message', listener)
+    return () => window.removeEventListener('message', listener)
+  },
 }

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

@@ -8,6 +8,7 @@ declare module "*.svg" {
 declare global {
   interface Window {
     __TLD_VSCODE__?: boolean
+    __TLD_SERVER_URL__?: string
   }
 }
 

package/src/utils/technologyCatalog.ts

@@ -19,6 +19,11 @@ export function resolveWithBase(urlOrPath: string): string {
   if (urlOrPath.startsWith('http://') || urlOrPath.startsWith('https://') || urlOrPath.startsWith('data:')) {
     return urlOrPath
   }
+  const vscodeServerUrl = typeof window !== 'undefined' ? window.__TLD_SERVER_URL__?.replace(/\/+$/, '') : undefined
+  if (window.__TLD_VSCODE__ && vscodeServerUrl) {
+    const normalizedPath = urlOrPath.startsWith('/') ? urlOrPath : `/${urlOrPath}`
+    return `${vscodeServerUrl}${normalizedPath}`
+  }
 
   // When running inside the native mobile app (Capacitor), or inside an embedded webview
   // that serves content from localhost, avoid prefixing the app BASE_URL. Mobile builds and

package/src/utils/url.ts

@@ -9,6 +9,13 @@ export function resolveIconPath(path: string | null | undefined): string {
 
   // Absolute URLs and data URIs are returned as-is
   if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('data:')) return path
+  const vscodeServerUrl = typeof window !== 'undefined' ? window.__TLD_SERVER_URL__?.replace(/\/+$/, '') : undefined
+  const isVsCode = typeof window !== 'undefined' && !!window.__TLD_VSCODE__
+  if (isVsCode && vscodeServerUrl) {
+    const stripped = path.startsWith('/app/') ? path.slice('/app'.length) : path
+    const normalizedPath = stripped.startsWith('/') ? stripped : `/${stripped}`
+    return `${vscodeServerUrl}${normalizedPath}`
+  }
 
   // If running inside the native mobile app (Capacitor) OR inside an embedded
   // webview that serves content from localhost (e.g. Capacitor production webview),

package/src/vscode-entry.tsx

@@ -0,0 +1,56 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ChakraProvider } from '@chakra-ui/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import App from './App'
+import theme from './theme'
+import { ToastContainer } from './utils/toast'
+import { PlatformProvider } from './platform/PlatformContext'
+import { platform as localPlatform } from './platform/local'
+import './index.css'
+
+declare global {
+  interface Window {
+    __TLD_DIAGRAM_ID__?: number
+    __TLD_VSCODE__?: boolean
+    __TLD_VSCODE_API__?: {
+      postMessage: (msg: unknown) => void
+    }
+    __TLD_SERVER_URL__?: string
+  }
+}
+
+const diagramId = window.__TLD_DIAGRAM_ID__
+const initialPath = diagramId != null ? `/views/${diagramId}` : '/views'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ChakraProvider theme={theme}>
+        <PlatformProvider platform={localPlatform}>
+          <MemoryRouter
+            initialEntries={[initialPath]}
+            future={{
+              v7_startTransition: true,
+              v7_relativeSplatPath: true,
+            }}
+          >
+            <App />
+          </MemoryRouter>
+          <ToastContainer />
+        </PlatformProvider>
+      </ChakraProvider>
+    </QueryClientProvider>
+  </StrictMode>,
+)
+