@tldiagram/core-ui 1.87.0

package/src/config/runtime-vscode.ts

@@ -0,0 +1,46 @@
+/**
+ * VS Code webview runtime configuration.
+ *
+ * Replaces runtime.ts for the vscode webview build:
+ * - Reads server URL from window.__TLD_SERVER_URL__ instead of import.meta.env
+ * - No Capacitor dependency (isNativeApp = false)
+ */
+
+declare global {
+  interface Window {
+    __TLD_SERVER_URL__?: string
+  }
+}
+
+function trimTrailingSlash(value: string): string {
+  return value.replace(/\/+$/, '')
+}
+
+const serverUrl = trimTrailingSlash(window.__TLD_SERVER_URL__ ?? 'https://tldiagram.com')
+
+export const appBase = '/app/'
+export const routerBasename = undefined
+export const isNativeApp = false
+
+export const apiBase = `${serverUrl}/api`
+
+export function apiUrl(path: string): string {
+  return `${apiBase}${path.startsWith('/') ? path : `/${path}`}`
+}
+
+export function oauthGoogleStartUrl(): string {
+  return apiUrl('/auth/oauth/google')
+}
+
+export function oauthGithubStartUrl(): string {
+  return apiUrl('/auth/oauth/github')
+}
+
+export function oauthAppleStartUrl(): string {
+  return apiUrl('/auth/oauth/apple')
+}
+
+// Web OAuth client ID - also used as serverClientId for native Google Sign-In
+export const googleClientId = '945690634753-lcrtd97c5hnqdo5shkoaetstmtrqbk5t.apps.googleusercontent.com'
+
+export const turnstileSiteKey = '0x4AAAAAACyQUcIpN2Yuy8-a'

package/src/config/runtime.ts

@@ -0,0 +1,30 @@
+const DEFAULT_WEB_BASE = "/"
+
+function trimTrailingSlash(value: string): string {
+  return value.replace(/\/+$/, "")
+}
+
+function trim(value: string | undefined): string | undefined {
+  if (!value) return undefined
+  const cleaned = value.trim()
+  return cleaned.length > 0 ? cleaned : undefined
+}
+
+const configuredApiBase = trim(import.meta.env.VITE_API_BASE_URL)
+
+export const appBase = trim(import.meta.env.VITE_APP_BASE) ?? DEFAULT_WEB_BASE
+export const routerBasename = (() => {
+  const configuredBase = trim(import.meta.env.VITE_ROUTER_BASENAME)
+  if (configuredBase && configuredBase !== "/") return configuredBase
+  return undefined
+})()
+
+export const isNativeApp = false
+
+export const apiBase = trimTrailingSlash(
+  configuredApiBase ?? "/api",
+)
+
+export function apiUrl(path: string): string {
+  return `${apiBase}${path.startsWith("/") ? path : `/${path}`}`
+}

package/src/constants/colors.ts

@@ -0,0 +1,80 @@
+// ── Accent color ────────────────────────────────────────────────────────────
+// The interactive brand color. Drives edges, selection highlights, drawing
+// stroke default, and focus indicators. Users can customize via Appearance
+// settings; the chosen value is stored in localStorage and exposed as the
+// CSS variable --accent on :root.
+
+export const ACCENT_DEFAULT = '#63b3ed'
+
+export const ACCENT_OPTIONS: { name: string; value: string }[] = [
+  { name: 'Blue', value: '#63b3ed' },
+  { name: 'Teal', value: '#4fd1c5' },
+  { name: 'Purple', value: '#b794f4' },
+  { name: 'Green', value: '#68d391' },
+  { name: 'Orange', value: '#f6ad55' },
+  { name: 'Pink', value: '#f687b3' },
+  { name: 'White', value: '#ffffff' },
+  { name: 'Black', value: '#000000' },
+  { name: 'Red', value: '#f56565' },
+  { name: 'Yellow', value: '#ecc94b' },
+]
+
+// ── Background color ─────────────────────────────────────────────────────────
+export const BACKGROUND_DEFAULT = '#0d121e'
+
+export const BACKGROUND_OPTIONS: { name: string; value: string }[] = [
+  { name: 'Midnight', value: '#0d121e' }, // Original dark blue/purplish
+  { name: 'Deep Sea', value: '#0a192f' },
+  { name: 'Obsidian', value: '#0f172a' },
+  { name: 'Coal', value: '#111111' },
+  { name: 'Space', value: '#0b0e14' },
+  { name: 'Asphalt', value: '#1a202c' },
+  { name: 'Dark', value: '#1e1e1e' },
+  { name: 'Ebony', value: '#121212' },
+  { name: 'Pitch', value: '#000000' },
+  { name: 'Charcoal', value: '#242424' },
+]
+
+// ── Element color ────────────────────────────────────────────────────────────
+export const ELEMENT_DEFAULT = '#2d3748'
+
+export const ELEMENT_OPTIONS: { name: string; value: string }[] = [
+  { name: 'Slate', value: '#2d3748' },
+  { name: 'Navy', value: '#1a365d' },
+  { name: 'Deep Purple', value: '#322659' },
+  { name: 'Dark Grey', value: '#171923' },
+  { name: 'Steel', value: '#4a5568' },
+  { name: 'Cobalt', value: '#2c5282' },
+  { name: 'Forest', value: '#22543d' },
+  { name: 'Rust', value: '#742a2a' },
+  { name: 'Bronze', value: '#744210' },
+  { name: 'Amethyst', value: '#553c9a' },
+]
+
+// ── View hierarchy ───────────────────────────────────────────────────────────
+// Blue = parent / zoom-out direction (equivalent to Chakra blue.400)
+// Teal = child  / zoom-in  direction (equivalent to Chakra teal.400)
+
+export const PARENT_VIEW_COLOR = '#63b3ed'
+export const CHILD_VIEW_COLOR = '#4fd1c5'
+
+export const PARENT_VIEW_BG = 'rgba(99,179,237,0.12)'
+export const PARENT_VIEW_BORDER = 'rgba(99,179,237,0.25)'
+export const CHILD_VIEW_BG = 'rgba(79,209,197,0.12)'
+export const CHILD_VIEW_BORDER = 'rgba(79,209,197,0.25)'
+
+// ── Drawing toolbar palette ───────────────────────────────────────────────────
+export const DRAWING_COLORS = ['#63b3ed', '#f56565', '#48bb78', '#ecc94b', '#ed64a6', '#ffffff']
+
+// ── Utility ───────────────────────────────────────────────────────────────────
+/**
+ * Convert a 6-char hex color to `rgba(r, g, b, alpha)`.
+ * Used to compute dynamic shadows from the accent value.
+ */
+export function hexToRgba(hex: string, alpha: number): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.substring(0, 2), 16)
+  const g = parseInt(h.substring(2, 4), 16)
+  const b = parseInt(h.substring(4, 6), 16)
+  return `rgba(${r},${g},${b},${alpha})`
+}

package/src/constants/diagramColors.ts

@@ -0,0 +1,9 @@
+// Re-exports - all values have moved to constants/colors.ts.
+export {
+  PARENT_VIEW_COLOR as PARENT_DIAGRAM_COLOR,
+  CHILD_VIEW_COLOR as CHILD_DIAGRAM_COLOR,
+  PARENT_VIEW_BG as PARENT_DIAGRAM_BG,
+  PARENT_VIEW_BORDER as PARENT_DIAGRAM_BORDER,
+  CHILD_VIEW_BG as CHILD_DIAGRAM_BG,
+  CHILD_VIEW_BORDER as CHILD_DIAGRAM_BORDER,
+} from './colors'

package/src/context/ThemeContext.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { ACCENT_DEFAULT, BACKGROUND_DEFAULT, ELEMENT_DEFAULT, hexToRgba } from '../constants/colors'
+import { api } from '../api/client'
+
+const ACCENT_KEY = 'diag:accent-color'
+const BG_KEY = 'diag:background-color'
+const ELEMENT_COLOR_KEY = 'diag:element-color'
+
+/** Convert hex to "r,g,b" triplet for use in rgba(var(--rgb), alpha). */
+function toRgbTriplet(hex: string): string {
+  const rgba = hexToRgba(hex, 1)
+  // hexToRgba returns "rgba(r,g,b,1)" - extract "r,g,b"
+  return rgba.slice(5, -3)
+}
+
+function applyAccentVars(hex: string) {
+  document.documentElement.style.setProperty('--accent', hex)
+  document.documentElement.style.setProperty('--accent-rgb', toRgbTriplet(hex))
+}
+
+function applyBgVars(hex: string) {
+  document.documentElement.style.setProperty('--bg-main', hex)
+  document.documentElement.style.setProperty('--bg-main-rgb', toRgbTriplet(hex))
+
+  // Also derive canvas background (slightly darker)
+  // For simplicity, we just use the same or a hardcoded variant for now,
+  // but we could use color-mix if we wanted true derivation.
+  // document.documentElement.style.setProperty('--bg-canvas', `color-mix(in srgb, ${hex}, black 20%)`)
+}
+
+function applyElementVars(hex: string) {
+  document.documentElement.style.setProperty('--bg-element', hex)
+  document.documentElement.style.setProperty('--bg-element-rgb', toRgbTriplet(hex))
+}
+
+interface ThemeContextValue {
+  accent: string
+  setAccent: (value: string) => void
+  background: string
+  setBackground: (value: string) => void
+  elementColor: string
+  setElementColor: (value: string) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  accent: ACCENT_DEFAULT,
+  setAccent: () => { },
+  background: BACKGROUND_DEFAULT,
+  setBackground: () => { },
+  elementColor: ELEMENT_DEFAULT,
+  setElementColor: () => { },
+})
+
+export function ThemeProvider({
+  children,
+  isAuthenticated,
+  defaultAccent,
+  defaultBackground,
+  defaultElementColor,
+  storagePrefix,
+}: {
+  children: ReactNode
+  isAuthenticated?: boolean
+  defaultAccent?: string
+  defaultBackground?: string
+  defaultElementColor?: string
+  storagePrefix?: string
+}) {
+  const accentKey = storagePrefix ? `${storagePrefix}:accent-color` : ACCENT_KEY
+  const bgKey = storagePrefix ? `${storagePrefix}:background-color` : BG_KEY
+  const elementKey = storagePrefix ? `${storagePrefix}:element-color` : ELEMENT_COLOR_KEY
+
+  const [accent, setAccentState] = useState<string>(
+    () => localStorage.getItem(accentKey) ?? defaultAccent ?? ACCENT_DEFAULT,
+  )
+  const [background, setBackgroundState] = useState<string>(
+    () => localStorage.getItem(bgKey) ?? defaultBackground ?? BACKGROUND_DEFAULT,
+  )
+  const [elementColor, setElementColorState] = useState<string>(
+    () => localStorage.getItem(elementKey) ?? defaultElementColor ?? ELEMENT_DEFAULT,
+  )
+
+  // Apply CSS vars whenever accent or background changes
+  useEffect(() => {
+    applyAccentVars(accent)
+  }, [accent])
+
+  useEffect(() => {
+    applyBgVars(background)
+  }, [background])
+
+  useEffect(() => {
+    applyElementVars(elementColor)
+  }, [elementColor])
+
+  // Fetch server preferences only when authenticated and NOT in namespaced/demo mode
+  useEffect(() => {
+    if (!isAuthenticated || storagePrefix) return
+    api.user.getPreferences().then((prefs) => {
+      if (prefs.accent_color && prefs.accent_color !== accent) {
+        localStorage.setItem(accentKey, prefs.accent_color)
+        setAccentState(prefs.accent_color)
+      }
+      if (prefs.background_color && prefs.background_color !== background) {
+        localStorage.setItem(bgKey, prefs.background_color)
+        setBackgroundState(prefs.background_color)
+      }
+      if (prefs.element_color && prefs.element_color !== elementColor) {
+        localStorage.setItem(elementKey, prefs.element_color)
+        setElementColorState(prefs.element_color)
+      }
+    }).catch(() => { })
+  }, [isAuthenticated, storagePrefix]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  function setAccent(value: string) {
+    localStorage.setItem(accentKey, value)
+    setAccentState(value)
+    if (!storagePrefix) {
+      api.user.updatePreferences({ accent_color: value }).catch(() => { })
+    }
+  }
+
+  function setBackground(value: string) {
+    localStorage.setItem(bgKey, value)
+    setBackgroundState(value)
+    if (!storagePrefix) {
+      api.user.updatePreferences({ background_color: value }).catch(() => { })
+    }
+  }
+
+  function setElementColor(value: string) {
+    localStorage.setItem(elementKey, value)
+    setElementColorState(value)
+    if (!storagePrefix) {
+      api.user.updatePreferences({ element_color: value }).catch(() => { })
+    }
+  }
+
+  return (
+    <ThemeContext.Provider value={{ accent, setAccent, background, setBackground, elementColor, setElementColor }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}
+
+/**
+ * Backward compatibility alias
+ * @deprecated Use useTheme() instead
+ */
+export function useAccentColor() {
+  const { accent, setAccent } = useTheme()
+  return { accent, setAccent }
+}

package/src/crossBranch/graph.ts

@@ -0,0 +1,207 @@
+import type { Connector, ExploreData, PlacedElement, ViewTreeNode } from '../types'
+import type { GraphPlacementRef, WorkspaceGraphSnapshot } from './types'
+
+function cloneViewTree(nodes: ViewTreeNode[]): ViewTreeNode[] {
+  return nodes.map((node) => ({
+    ...node,
+    children: cloneViewTree(node.children ?? []),
+  }))
+}
+
+function flattenTree(nodes: ViewTreeNode[], out: ViewTreeNode[] = []): ViewTreeNode[] {
+  for (const node of nodes) {
+    out.push(node)
+    flattenTree(node.children ?? [], out)
+  }
+  return out
+}
+
+function collectDescendants(viewById: Record<number, ViewTreeNode>, parentId: number): number[] {
+  const result: number[] = []
+  const visit = (viewId: number) => {
+    result.push(viewId)
+    const node = viewById[viewId]
+    for (const child of node?.children ?? []) visit(child.id)
+  }
+  visit(parentId)
+  return result
+}
+
+function viewNameOf(viewById: Record<number, ViewTreeNode>, viewId: number): string {
+  return viewById[viewId]?.name ?? `View ${viewId}`
+}
+
+function deepCloneExploreData(data: ExploreData): ExploreData {
+  return {
+    tree: cloneViewTree(data.tree ?? []),
+    navigations: [...(data.navigations ?? [])],
+    views: Object.fromEntries(
+      Object.entries(data.views ?? {}).map(([key, value]) => [
+        key,
+        {
+          placements: [...(value.placements ?? [])],
+          connectors: [...(value.connectors ?? [])],
+        },
+      ]),
+    ),
+  }
+}
+
+export function buildWorkspaceGraphSnapshot(data: ExploreData): WorkspaceGraphSnapshot {
+  const tree = cloneViewTree(data.tree ?? [])
+  const flatTree = flattenTree(tree)
+  const viewById = Object.fromEntries(flatTree.map((view) => [view.id, view])) as Record<number, ViewTreeNode>
+
+  const placementsByViewId: Record<number, PlacedElement[]> = {}
+  const connectorsByViewId: Record<number, Connector[]> = {}
+  const placementsByElementId: Record<number, GraphPlacementRef[]> = {}
+
+  for (const view of flatTree) {
+    const content = data.views?.[String(view.id)]
+    const placements = [...(content?.placements ?? [])]
+    const connectors = [...(content?.connectors ?? [])]
+    placementsByViewId[view.id] = placements
+    connectorsByViewId[view.id] = connectors
+
+    for (const placement of placements) {
+      placementsByElementId[placement.element_id] ??= []
+      placementsByElementId[placement.element_id].push({
+        viewId: view.id,
+        viewName: view.name,
+        element: placement,
+      })
+    }
+  }
+
+  const childViewIdByOwnerElementId = flatTree.reduce<Record<number, number>>((acc, view) => {
+    if (view.owner_element_id != null) acc[view.owner_element_id] = view.id
+    return acc
+  }, {})
+
+  const ancestorsByViewId = flatTree.reduce<Record<number, number[]>>((acc, view) => {
+    const lineage: number[] = []
+    let cursor: ViewTreeNode | undefined = view
+    while (cursor) {
+      lineage.push(cursor.id)
+      cursor = cursor.parent_view_id != null ? viewById[cursor.parent_view_id] : undefined
+    }
+    acc[view.id] = lineage.reverse()
+    return acc
+  }, {})
+
+  const descendantsByViewId = flatTree.reduce<Record<number, number[]>>((acc, view) => {
+    acc[view.id] = collectDescendants(viewById, view.id)
+    return acc
+  }, {})
+
+  const views = flatTree.reduce<Record<number, { view: ViewTreeNode; placements: PlacedElement[]; connectors: Connector[] }>>((acc, view) => {
+    acc[view.id] = {
+      view,
+      placements: placementsByViewId[view.id] ?? [],
+      connectors: connectorsByViewId[view.id] ?? [],
+    }
+    return acc
+  }, {})
+
+  return {
+    source: deepCloneExploreData(data),
+    tree,
+    views,
+    viewById,
+    placementsByViewId,
+    connectorsByViewId,
+    placementsByElementId,
+    childViewIdByOwnerElementId,
+    descendantsByViewId,
+    ancestorsByViewId,
+  }
+}
+
+export function isDescendantView(snapshot: WorkspaceGraphSnapshot, maybeDescendantId: number | null | undefined, ancestorId: number | null | undefined): boolean {
+  if (maybeDescendantId == null || ancestorId == null) return false
+  return snapshot.ancestorsByViewId[maybeDescendantId]?.includes(ancestorId) ?? false
+}
+
+export function findLowestCommonAncestorViewId(snapshot: WorkspaceGraphSnapshot, leftViewId: number | null | undefined, rightViewId: number | null | undefined): number | null {
+  if (leftViewId == null || rightViewId == null) return null
+  const leftAncestors = snapshot.ancestorsByViewId[leftViewId] ?? []
+  const rightAncestors = new Set(snapshot.ancestorsByViewId[rightViewId] ?? [])
+  let best: number | null = null
+  for (const candidate of leftAncestors) {
+    if (rightAncestors.has(candidate)) best = candidate
+  }
+  return best
+}
+
+export function relativeOwnerElementPath(snapshot: WorkspaceGraphSnapshot, ancestorViewId: number, descendantViewId: number): number[] {
+  const descendantAncestors = snapshot.ancestorsByViewId[descendantViewId] ?? []
+  const ancestorIndex = descendantAncestors.indexOf(ancestorViewId)
+  if (ancestorIndex === -1) return []
+  const relativeViewIds = descendantAncestors.slice(ancestorIndex + 1)
+  return relativeViewIds
+    .map((viewId) => snapshot.viewById[viewId]?.owner_element_id ?? null)
+    .filter((elementId): elementId is number => elementId != null)
+}
+
+export function viewName(snapshot: WorkspaceGraphSnapshot, viewId: number | null | undefined): string | null {
+  if (viewId == null) return null
+  return viewNameOf(snapshot.viewById, viewId)
+}
+
+export function allConnectors(snapshot: WorkspaceGraphSnapshot): Connector[] {
+  return Object.values(snapshot.connectorsByViewId).flat()
+}
+
+export function upsertConnectorInSnapshot(snapshot: WorkspaceGraphSnapshot | null, connector: Connector): WorkspaceGraphSnapshot | null {
+  if (!snapshot) return snapshot
+  const next = deepCloneExploreData(snapshot.source)
+  const viewKey = String(connector.view_id)
+  next.views[viewKey] ??= { placements: [], connectors: [] }
+  next.views[viewKey].connectors = [
+    connector,
+    ...next.views[viewKey].connectors.filter((existing) => existing.id !== connector.id),
+  ]
+  return buildWorkspaceGraphSnapshot(next)
+}
+
+export function removeConnectorFromSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, connectorId: number): WorkspaceGraphSnapshot | null {
+  if (!snapshot) return snapshot
+  const next = deepCloneExploreData(snapshot.source)
+  const viewKey = String(viewId)
+  if (next.views[viewKey]) {
+    next.views[viewKey].connectors = next.views[viewKey].connectors.filter((connector) => connector.id !== connectorId)
+  }
+  return buildWorkspaceGraphSnapshot(next)
+}
+
+export function upsertPlacementInSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, placement: PlacedElement): WorkspaceGraphSnapshot | null {
+  if (!snapshot) return snapshot
+  const next = deepCloneExploreData(snapshot.source)
+  const viewKey = String(viewId)
+  next.views[viewKey] ??= { placements: [], connectors: [] }
+  next.views[viewKey].placements = [
+    placement,
+    ...next.views[viewKey].placements.filter((existing) => existing.element_id !== placement.element_id),
+  ]
+  return buildWorkspaceGraphSnapshot(next)
+}
+
+export function removePlacementFromSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, elementId: number): WorkspaceGraphSnapshot | null {
+  if (!snapshot) return snapshot
+  const next = deepCloneExploreData(snapshot.source)
+  const viewKey = String(viewId)
+  if (next.views[viewKey]) {
+    next.views[viewKey].placements = next.views[viewKey].placements.filter((placement) => placement.element_id !== elementId)
+  }
+  return buildWorkspaceGraphSnapshot(next)
+}
+
+export function overrideViewContentInSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, placements: PlacedElement[], connectors: Connector[]): WorkspaceGraphSnapshot | null {
+  if (!snapshot) return snapshot
+  const next = deepCloneExploreData(snapshot.source)
+  next.views[String(viewId)] = {
+    placements: [...placements],
+    connectors: [...connectors],
+  }
+  return buildWorkspaceGraphSnapshot(next)
+}