@tldiagram/core-ui 1.87.0

package/src/api/client.ts

@@ -0,0 +1,618 @@
+import { createClient, ConnectError } from '@connectrpc/connect'
+import { toJson } from '@bufbuild/protobuf'
+import type {
+  Connector,
+  DependencyConnector,
+  DependencyElement,
+  ElementPlacement,
+  ExploreData,
+  LibraryElement,
+  PlacedElement,
+  View,
+  ViewConnector,
+  ViewLayer,
+  ViewPlacement,
+  ViewTreeNode,
+} from '../types'
+import {
+  WorkspaceService,
+  CreateViewResponseSchema,
+  UpdateViewResponseSchema,
+  ListViewsResponseSchema,
+  GetViewResponseSchema,
+  GetWorkspaceResponseSchema,
+  ListElementsResponseSchema,
+  GetElementResponseSchema,
+  CreateElementResponseSchema,
+  UpdateElementResponseSchema,
+  ListElementPlacementsResponseSchema,
+  ListPlacementsResponseSchema,
+  CreatePlacementResponseSchema,
+  ListConnectorsResponseSchema,
+  CreateConnectorResponseSchema,
+  UpdateConnectorResponseSchema,
+  ListElementNavigationsResponseSchema,
+  ListViewLayersResponseSchema,
+  CreateViewLayerResponseSchema,
+  UpdateViewLayerResponseSchema,
+  PlanElement,
+  PlanConnector,
+} from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/workspace_service_pb'
+import {
+  DependencyService,
+  ListDependenciesResponseSchema,
+} from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/dependency_service_pb'
+import {
+  ImportService,
+} from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/import_service_pb'
+import { transport } from './transport'
+
+export interface DependenciesResponse {
+  elements: DependencyElement[]
+  connectors: DependencyConnector[]
+}
+
+// ─── RPC clients ─────────────────────────────────────────────────────────────
+
+const workspaceClient = createClient(WorkspaceService, transport)
+const dependencyClient = createClient(DependencyService, transport)
+const importClient = createClient(ImportService, transport)
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+async function rpc<T>(call: () => Promise<T>): Promise<T> {
+  try {
+    return await call()
+  } catch (e) {
+    if (e instanceof ConnectError) throw new Error(e.message)
+    throw e
+  }
+}
+
+function j<T>(schema: Parameters<typeof toJson>[0], msg: Parameters<typeof toJson>[1]): T {
+  return toJson(schema, msg, { useProtoFieldName: true, emitDefaultValues: true }) as unknown as T
+}
+
+// ─── Proto → frontend type mappers ───────────────────────────────────────────
+
+interface ProtoDiagram {
+  id: number
+  ownerElementId?: number | null
+  owner_element_id?: number | null
+  name: string
+  description?: string | null
+  levelLabel?: string | null
+  level_label?: string | null
+  level?: number
+  depth?: number
+  createdAt?: string
+  created_at?: string
+  updatedAt?: string
+  updated_at?: string
+  parent_view_id?: number | null
+  children?: ProtoDiagram[]
+}
+
+function mapDiagram(d: ProtoDiagram): ViewTreeNode {
+  return {
+    id: Number(d.id),
+    owner_element_id: d.ownerElementId != null || d.owner_element_id != null
+      ? Number(d.ownerElementId ?? d.owner_element_id)
+      : null,
+    name: d.name,
+    description: d.description ?? null,
+    level_label: d.levelLabel ?? d.level_label ?? null,
+    level: d.level ?? 0,
+    depth: d.depth ?? 0,
+    created_at: d.createdAt ?? d.created_at ?? '',
+    updated_at: d.updatedAt ?? d.updated_at ?? '',
+    parent_view_id: d.parent_view_id ?? null,
+    children: (d.children ?? []).map(mapDiagram),
+  }
+}
+
+function diagramToView(d: ProtoDiagram): View {
+  return {
+    id: Number(d.id),
+    owner_element_id: d.ownerElementId != null || d.owner_element_id != null
+      ? Number(d.ownerElementId ?? d.owner_element_id)
+      : null,
+    name: d.name,
+    label: d.levelLabel ?? d.level_label ?? null,
+    is_root: (d.parent_view_id ?? null) === null,
+    created_at: d.createdAt ?? d.created_at ?? new Date().toISOString(),
+    updated_at: d.updatedAt ?? d.updated_at ?? new Date().toISOString(),
+  }
+}
+
+function protoElementToLibrary(e: Record<string, unknown>): LibraryElement {
+  return {
+    id: Number(e.id ?? 0),
+    name: String(e.name ?? ''),
+    kind: (e.kind ?? null) as string | null,
+    description: (e.description ?? null) as string | null,
+    technology: (e.technology ?? null) as string | null,
+    url: (e.url ?? null) as string | null,
+    logo_url: (e.logo_url ?? null) as string | null,
+    technology_connectors: (e.technology_connectors ?? []) as LibraryElement['technology_connectors'],
+    tags: (e.tags ?? []) as string[],
+    repo: (e.repo ?? null) as string | null,
+    branch: (e.branch ?? null) as string | null,
+    file_path: (e.file_path ?? null) as string | null,
+    language: (e.language ?? null) as string | null,
+    created_at: String(e.created_at ?? new Date().toISOString()),
+    updated_at: String(e.updated_at ?? new Date().toISOString()),
+    has_view: Boolean(e.has_view ?? false),
+    view_label: (e.view_label ?? null) as string | null,
+  }
+}
+
+function protoPlacedElement(p: Record<string, unknown>): PlacedElement {
+  return {
+    id: Number(p.id ?? 0),
+    view_id: Number(p.view_id ?? 0),
+    element_id: Number(p.element_id ?? 0),
+    position_x: Number(p.position_x ?? 0),
+    position_y: Number(p.position_y ?? 0),
+    name: String(p.name ?? ''),
+    description: (p.description ?? null) as string | null,
+    kind: (p.kind ?? null) as string | null,
+    technology: (p.technology ?? null) as string | null,
+    url: (p.url ?? null) as string | null,
+    logo_url: (p.logo_url ?? null) as string | null,
+    technology_connectors: (p.technology_connectors ?? []) as PlacedElement['technology_connectors'],
+    tags: (p.tags ?? []) as string[],
+    repo: (p.repo ?? null) as string | null,
+    branch: (p.branch ?? null) as string | null,
+    file_path: (p.file_path ?? null) as string | null,
+    language: (p.language ?? null) as string | null,
+    has_view: Boolean(p.has_view ?? false),
+    view_label: (p.view_label ?? null) as string | null,
+  }
+}
+
+function protoConnector(e: Record<string, unknown>): Connector {
+  return {
+    id: Number(e.id ?? 0),
+    view_id: Number(e.view_id ?? 0),
+    source_element_id: Number(e.source_element_id ?? 0),
+    target_element_id: Number(e.target_element_id ?? 0),
+    label: (e.label ?? null) as string | null,
+    description: (e.description ?? null) as string | null,
+    relationship: (e.relationship ?? null) as string | null,
+    direction: String(e.direction ?? 'forward'),
+    style: String(e.style ?? 'bezier'),
+    url: (e.url ?? null) as string | null,
+    source_handle: (e.source_handle ?? null) as string | null,
+    target_handle: (e.target_handle ?? null) as string | null,
+    created_at: String(e.created_at ?? new Date().toISOString()),
+    updated_at: String(e.updated_at ?? new Date().toISOString()),
+  }
+}
+
+function protoNavigation(n: Record<string, unknown>): ViewConnector {
+  return {
+    id: Number(n.id ?? 0),
+    element_id: (n.element_id ?? null) as number | null,
+    from_view_id: Number(n.from_view_id ?? 0),
+    to_view_id: Number(n.to_view_id ?? 0),
+    to_view_name: String(n.to_view_name ?? ''),
+    relation_type: String(n.relation_type ?? 'child'),
+  }
+}
+
+function protoDiagramPlacement(p: Record<string, unknown>): ViewPlacement {
+  return {
+    view_id: Number(p.view_id ?? 0),
+    view_name: String(p.view_name ?? ''),
+  }
+}
+
+function protoLayer(l: Record<string, unknown>): ViewLayer {
+  return {
+    id: Number(l.id ?? 0),
+    diagram_id: Number(l.view_id ?? l.diagram_id ?? 0),
+    name: String(l.name ?? ''),
+    tags: (l.tags ?? []) as string[],
+    color: String(l.color ?? ''),
+    created_at: String(l.created_at ?? new Date().toISOString()),
+    updated_at: String(l.updated_at ?? new Date().toISOString()),
+  }
+}
+
+export const api = {
+  system: {
+    ready: (): Promise<{ ok: boolean }> =>
+      rpc(() => workspaceClient.listViews({}).then(() => ({ ok: true }))),
+  },
+
+  user: {
+    getPreferences: (): Promise<{ accent_color: string | null; background_color: string | null; element_color: string | null }> =>
+      Promise.resolve({
+        accent_color: localStorage.getItem('diag:accent-color'),
+        background_color: localStorage.getItem('diag:background-color'),
+        element_color: localStorage.getItem('diag:element-color'),
+      }),
+    updatePreferences: async (prefs: { accent_color?: string; background_color?: string; element_color?: string }): Promise<void> => {
+      if (prefs.accent_color) localStorage.setItem('diag:accent-color', prefs.accent_color)
+      if (prefs.background_color) localStorage.setItem('diag:background-color', prefs.background_color)
+      if (prefs.element_color) localStorage.setItem('diag:element-color', prefs.element_color)
+    },
+  },
+
+  elements: {
+    list: (params?: { limit?: number; offset?: number; search?: string }): Promise<LibraryElement[]> =>
+      rpc(async () => {
+        const res = await workspaceClient.listElements({
+          limit: params?.limit ?? 0,
+          offset: params?.offset ?? 0,
+          search: params?.search ?? '',
+        })
+        const json = j<{ elements: Record<string, unknown>[] }>(ListElementsResponseSchema, res)
+        return (json.elements ?? []).map(protoElementToLibrary)
+      }),
+
+    get: (id: number): Promise<LibraryElement> =>
+      rpc(async () => {
+        const res = await workspaceClient.getElement({ elementId: id })
+        const json = j<{ element: Record<string, unknown> }>(GetElementResponseSchema, res)
+        return protoElementToLibrary(json.element ?? {})
+      }),
+
+    create: (data: Partial<LibraryElement>): Promise<LibraryElement> =>
+      rpc(async () => {
+        const res = await workspaceClient.createElement({
+          name: data.name ?? '',
+          kind: data.kind ?? '',
+          description: data.description ?? undefined,
+          technology: data.technology ?? undefined,
+          url: data.url ?? undefined,
+          logoUrl: data.logo_url ?? undefined,
+          technologyLinks: (data.technology_connectors ?? []).map(tl => ({
+            type: tl.type,
+            slug: tl.slug ?? '',
+            label: tl.label,
+            isPrimaryIcon: tl.is_primary_icon ?? false,
+          })),
+          tags: data.tags ?? [],
+          repo: data.repo ?? undefined,
+          branch: data.branch ?? undefined,
+          filePath: data.file_path ?? undefined,
+          language: data.language ?? undefined,
+        })
+        const json = j<{ element: Record<string, unknown> }>(CreateElementResponseSchema, res)
+        return protoElementToLibrary(json.element ?? {})
+      }),
+
+    update: (id: number, data: Partial<LibraryElement>): Promise<LibraryElement> =>
+      rpc(async () => {
+        const res = await workspaceClient.updateElement({
+          elementId: id,
+          name: data.name ?? undefined,
+          kind: data.kind ?? undefined,
+          description: data.description ?? undefined,
+          technology: data.technology ?? undefined,
+          url: data.url ?? undefined,
+          logoUrl: data.logo_url ?? undefined,
+          technologyLinks: (data.technology_connectors ?? []).map(tl => ({
+            type: tl.type,
+            slug: tl.slug ?? '',
+            label: tl.label,
+            isPrimaryIcon: tl.is_primary_icon ?? false,
+          })),
+          tags: data.tags ?? [],
+          repo: data.repo ?? undefined,
+          branch: data.branch ?? undefined,
+          filePath: data.file_path ?? undefined,
+          language: data.language ?? undefined,
+        })
+        const json = j<{ element: Record<string, unknown> }>(UpdateElementResponseSchema, res)
+        return protoElementToLibrary(json.element ?? {})
+      }),
+
+    delete: (_orgId: string, id: number): Promise<void> =>
+      rpc(async () => { await workspaceClient.deleteElement({ orgId: '', elementId: id }) }),
+
+    placements: (id: number): Promise<ViewPlacement[]> =>
+      rpc(async () => {
+        const res = await workspaceClient.listElementPlacements({ elementId: id })
+        const json = j<{ placements: Record<string, unknown>[] }>(ListElementPlacementsResponseSchema, res)
+        return (json.placements ?? []).map(protoDiagramPlacement)
+      }),
+  },
+
+  workspace: {
+    elements: {
+      list: (params?: { limit?: number; offset?: number; search?: string }): Promise<LibraryElement[]> =>
+        api.elements.list(params),
+      get: (id: number): Promise<LibraryElement> => api.elements.get(id),
+      create: (data: Partial<LibraryElement>): Promise<LibraryElement> => api.elements.create(data),
+      update: (id: number, data: Partial<LibraryElement>): Promise<LibraryElement> => api.elements.update(id, data),
+      delete: (_orgId: string, id: number): Promise<void> => api.elements.delete('', id),
+      placements: (id: number): Promise<ViewPlacement[]> => api.elements.placements(id),
+      navigations: {
+        list: (elementId: number, fromDiagramId: number): Promise<ViewConnector[]> =>
+          rpc(async () => {
+            const res = await workspaceClient.listElementNavigations({ elementId, fromViewId: fromDiagramId, toViewId: 0 })
+            const json = j<{ navigations: Record<string, unknown>[] }>(ListElementNavigationsResponseSchema, res)
+            return (json.navigations ?? []).map(protoNavigation)
+          }),
+        listParents: (elementId: number, toDiagramId: number): Promise<ViewConnector[]> =>
+          rpc(async () => {
+            const res = await workspaceClient.listElementNavigations({ elementId, fromViewId: 0, toViewId: toDiagramId })
+            const json = j<{ navigations: Record<string, unknown>[] }>(ListElementNavigationsResponseSchema, res)
+            return (json.navigations ?? []).map(protoNavigation)
+          }),
+      },
+    },
+
+    views: {
+      list: (): Promise<View[]> =>
+        rpc(async () => {
+          const res = await workspaceClient.listViews({})
+          const json = j<{ views: Record<string, unknown>[] }>(ListViewsResponseSchema, res)
+          return (json.views ?? []).map(v => ({
+            id: Number(v.id ?? 0),
+            owner_element_id: v.owner_element_id != null ? Number(v.owner_element_id) : null,
+            name: String(v.name ?? ''),
+            label: (v.label ?? null) as string | null,
+            is_root: Boolean(v.is_root ?? false),
+            created_at: String(v.created_at ?? new Date().toISOString()),
+            updated_at: String(v.updated_at ?? new Date().toISOString()),
+          }))
+        }),
+
+      content: (id: number): Promise<{ placements: PlacedElement[]; connectors: Connector[] }> =>
+        rpc(async () => {
+          const [placementsRes, connectorsRes] = await Promise.all([
+            workspaceClient.listPlacements({ viewId: id }),
+            workspaceClient.listConnectors({ viewId: id }),
+          ])
+          const placementJson = j<{ placements: Record<string, unknown>[] }>(ListPlacementsResponseSchema, placementsRes)
+          const connectorJson = j<{ connectors: Record<string, unknown>[] }>(ListConnectorsResponseSchema, connectorsRes)
+          return {
+            placements: (placementJson.placements ?? []).map(protoPlacedElement),
+            connectors: (connectorJson.connectors ?? []).map(protoConnector),
+          }
+        }),
+
+      tree: (): Promise<ViewTreeNode[]> =>
+        rpc(async () => {
+          const res = await workspaceClient.getWorkspace({ includeContent: false })
+          const json = j<{ views: ProtoDiagram[] }>(GetWorkspaceResponseSchema, res)
+          return (json.views ?? []).map(mapDiagram)
+        }),
+
+      get: (id: number): Promise<ViewTreeNode> =>
+        rpc(async () => {
+          const res = await workspaceClient.getView({ viewId: id })
+          const json = j<{ view?: ProtoDiagram }>(GetViewResponseSchema, res)
+          if (!json.view) throw new Error('View not found')
+          return mapDiagram(json.view)
+        }),
+
+      create: (data: { name: string; label?: string; parent_view_id?: number | null }): Promise<View> =>
+        rpc(async () => {
+          const res = await workspaceClient.createView({
+            name: data.name,
+            levelLabel: data.label ?? undefined,
+            ownerElementId: data.parent_view_id ?? undefined,
+          })
+          const json = j<{ view: ProtoDiagram }>(CreateViewResponseSchema, res)
+          return diagramToView(json.view)
+        }),
+
+      update: (id: number, data: { name: string; label?: string }): Promise<View> =>
+        rpc(async () => {
+          const res = await workspaceClient.updateView({ viewId: id, name: data.name, levelLabel: data.label ?? undefined })
+          const json = j<{ view: ProtoDiagram }>(UpdateViewResponseSchema, res)
+          return diagramToView(json.view)
+        }),
+
+      rename: (id: number, name: string): Promise<View> =>
+        rpc(async () => {
+          const res = await workspaceClient.updateView({ viewId: id, name })
+          const json = j<{ view: ProtoDiagram }>(UpdateViewResponseSchema, res)
+          return diagramToView(json.view)
+        }),
+
+      setLevel: (id: number, level: number): Promise<void> =>
+        rpc(async () => { await workspaceClient.setViewLevel({ viewId: id, level }) }),
+
+      delete: (_orgId: string, id: number): Promise<void> =>
+        rpc(async () => { await workspaceClient.deleteView({ orgId: '', viewId: id }) }),
+
+      thumbnail: async (_id: number): Promise<string | null> => null,
+
+      placements: {
+        list: (diagramId: number): Promise<ElementPlacement[]> =>
+          rpc(async () => {
+            const res = await workspaceClient.listPlacements({ viewId: diagramId })
+            const json = j<{ placements: Record<string, unknown>[] }>(ListPlacementsResponseSchema, res)
+            return (json.placements ?? []).map(protoPlacedElement).map(pe => ({
+              id: pe.id,
+              view_id: pe.view_id,
+              element_id: pe.element_id,
+              position_x: pe.position_x,
+              position_y: pe.position_y,
+            }))
+          }),
+
+        add: (diagramId: number, elementId: number, x = 100, y = 100): Promise<ElementPlacement> =>
+          rpc(async () => {
+            const res = await workspaceClient.createPlacement({ viewId: diagramId, elementId, positionX: x, positionY: y })
+            const json = j<{ placement: Record<string, unknown> }>(CreatePlacementResponseSchema, res)
+            const pe = protoPlacedElement(json.placement ?? {})
+            return { id: pe.id, view_id: pe.view_id, element_id: pe.element_id, position_x: pe.position_x, position_y: pe.position_y }
+          }),
+
+        updatePosition: (diagramId: number, elementId: number, x: number, y: number): Promise<void> =>
+          rpc(async () => { await workspaceClient.updatePlacementPosition({ viewId: diagramId, elementId, positionX: x, positionY: y }) }),
+
+        remove: (diagramId: number, elementId: number): Promise<void> =>
+          rpc(async () => { await workspaceClient.deletePlacement({ viewId: diagramId, elementId }) }),
+      },
+
+      layers: {
+        list: (diagramId: number): Promise<ViewLayer[]> =>
+          rpc(async () => {
+            const res = await workspaceClient.listViewLayers({ viewId: diagramId })
+            const json = j<{ layers: Record<string, unknown>[] }>(ListViewLayersResponseSchema, res)
+            return (json.layers ?? []).map(protoLayer)
+          }),
+
+        create: (diagramId: number, data: { name: string; tags: string[]; color?: string }): Promise<ViewLayer> =>
+          rpc(async () => {
+            const res = await workspaceClient.createViewLayer({ viewId: diagramId, name: data.name, tags: data.tags, color: data.color ?? '#888888' })
+            const json = j<{ layer: Record<string, unknown> }>(CreateViewLayerResponseSchema, res)
+            return protoLayer(json.layer ?? {})
+          }),
+
+        update: (_diagramId: number, layerId: number, data: Partial<ViewLayer>): Promise<ViewLayer> =>
+          rpc(async () => {
+            const res = await workspaceClient.updateViewLayer({ layerId, name: data.name ?? undefined, tags: data.tags ?? [], color: data.color ?? undefined })
+            const json = j<{ layer: Record<string, unknown> }>(UpdateViewLayerResponseSchema, res)
+            return protoLayer(json.layer ?? {})
+          }),
+
+        delete: (_diagramId: number, layerId: number): Promise<void> =>
+          rpc(async () => { await workspaceClient.deleteViewLayer({ layerId }) }),
+      },
+
+    },
+
+    connectors: {
+      list: (diagramId: number): Promise<Connector[]> =>
+        rpc(async () => {
+          const res = await workspaceClient.listConnectors({ viewId: diagramId })
+          const json = j<{ connectors: Record<string, unknown>[] }>(ListConnectorsResponseSchema, res)
+          return (json.connectors ?? []).map(protoConnector)
+        }),
+
+      create: (
+        diagramId: number,
+        data: {
+          source_element_id: number
+          target_element_id: number
+          label?: string
+          description?: string
+          relationship?: string
+          direction?: string
+          style?: string
+          url?: string
+          source_handle?: string | null
+          target_handle?: string | null
+        },
+      ): Promise<Connector> =>
+        rpc(async () => {
+          const res = await workspaceClient.createConnector({
+            viewId: diagramId,
+            sourceElementId: data.source_element_id,
+            targetElementId: data.target_element_id,
+            label: data.label ?? undefined,
+            description: data.description ?? undefined,
+            relationship: data.relationship ?? undefined,
+            direction: data.direction ?? undefined,
+            style: data.style ?? undefined,
+            url: data.url ?? undefined,
+            sourceHandle: data.source_handle ?? undefined,
+            targetHandle: data.target_handle ?? undefined,
+          })
+          const json = j<{ connector: Record<string, unknown> }>(CreateConnectorResponseSchema, res)
+          return protoConnector(json.connector ?? {})
+        }),
+
+      update: (
+        _diagramId: number,
+        connectorId: number,
+        data: {
+          source_element_id?: number
+          target_element_id?: number
+          label?: string
+          description?: string
+          relationship?: string
+          direction?: string
+          style?: string
+          url?: string
+          source_handle?: string | null
+          target_handle?: string | null
+        },
+      ): Promise<Connector> =>
+        rpc(async () => {
+          const res = await workspaceClient.updateConnector({
+            connectorId,
+            sourceElementId: data.source_element_id ?? undefined,
+            targetElementId: data.target_element_id ?? undefined,
+            label: data.label ?? undefined,
+            description: data.description ?? undefined,
+            relationship: data.relationship ?? undefined,
+            direction: data.direction ?? undefined,
+            style: data.style ?? undefined,
+            url: data.url ?? undefined,
+            sourceHandle: data.source_handle ?? undefined,
+            targetHandle: data.target_handle ?? undefined,
+          })
+          const json = j<{ connector: Record<string, unknown> }>(UpdateConnectorResponseSchema, res)
+          return protoConnector(json.connector ?? {})
+        }),
+
+      delete: (_orgId: string, connectorId: number): Promise<void> =>
+        rpc(async () => { await workspaceClient.deleteConnector({ orgId: '', connectorId }) }),
+    },
+  },
+
+  dependencies: {
+    list: (): Promise<DependenciesResponse> =>
+      rpc(async () => {
+        const res = await dependencyClient.listDependencies({})
+        return j<DependenciesResponse>(ListDependenciesResponseSchema, res)
+      }),
+  },
+
+  explore: {
+    load: (): Promise<ExploreData & { password_required?: boolean }> =>
+      rpc(async () => {
+        const res = await workspaceClient.getWorkspace({ includeContent: true })
+        const json = j<{
+          views: ProtoDiagram[]
+          content: Record<string, { placements: Record<string, unknown>[]; connectors: Record<string, unknown>[] }>
+          navigations: Record<string, unknown>[]
+        }>(GetWorkspaceResponseSchema, res)
+        return {
+          tree: (json.views ?? []).map(mapDiagram),
+          views: Object.fromEntries(
+            Object.entries(json.content ?? {}).map(([key, value]) => [
+              key,
+              {
+                placements: (value.placements ?? []).map(protoPlacedElement),
+                connectors: (value.connectors ?? []).map(protoConnector),
+              },
+            ])
+          ),
+          navigations: (json.navigations ?? []).map(protoNavigation),
+          password_required: false,
+        }
+      }),
+  },
+
+  import: {
+    resources: (orgId: string, data: { elements: PlanElement[]; connectors: PlanConnector[] }): Promise<{ view_id: number; view_url: string }> =>
+      rpc(async () => {
+        const res = await importClient.importResources({
+          orgId,
+          elements: data.elements,
+          connectors: data.connectors,
+        })
+        return { view_id: res.viewId, view_url: res.viewUrl }
+      }),
+    parseStructurizr: (code: string): Promise<{ elements: PlanElement[]; connectors: PlanConnector[]; warnings: string[] }> =>
+      rpc(async () => {
+        const res = await importClient.parseStructurizr({ code })
+        return {
+          elements: res.elements,
+          connectors: res.connectors,
+          warnings: res.warnings,
+        }
+      }),
+  },
+}

package/src/api/transport-vscode.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+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__ ?? ''
+
+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 })
+  },
+})

package/src/api/transport.ts

@@ -0,0 +1,7 @@
+import { createConnectTransport } from "@connectrpc/connect-web"
+import { apiBase } from "../config/runtime"
+
+export const transport = createConnectTransport({
+  baseUrl: apiBase,
+  fetch: (input, init) => fetch(input, init),
+})

package/src/assets/logo-mark.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
+  <defs>
+    <filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="32" result="blur1" />
+      <feFlood flood-color="#63b3ed" flood-opacity="0.3" result="c1" />
+      <feComposite in="c1" in2="blur1" operator="in" result="glow1" />
+      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur2" />
+      <feFlood flood-color="#90cdf4" flood-opacity="0.5" result="c2" />
+      <feComposite in="c2" in2="blur2" operator="in" result="glow2" />
+      <feMerge>
+        <feMergeNode in="glow1" />
+        <feMergeNode in="glow2" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <linearGradient id="grad" x1="0" y1="0" x2="0.6" y2="1">
+      <stop offset="0"    stop-color="#90cdf4" />
+      <stop offset="0.45" stop-color="#63b3ed" />
+      <stop offset="1"    stop-color="#2b6cb0" />
+    </linearGradient>
+  </defs>
+  <!-- Scale 1024→80 (×0.078125), then apply original inner transform -->
+  <g transform="scale(0.078125)" fill-rule="evenodd">
+    <g filter="url(#glow)" transform="translate(78,118) scale(0.8)">
+      <path
+        d="M201 18s169-39 340-2c171 38 342 152 342 457S713 902 544 949c-170 48-344 19-344 19l1-566h302V217H201z M455 715c-67 83-122 141-62 48q23-35 33-62h-4a78 78 0 1 1 78-78q0 24-12 44-11 21-33 48"
+        fill="url(#grad)" />
+    </g>
+  </g>
+</svg>