@tldiagram/core-ui 1.91.0 → 1.93.0

package/src/components/LayoutSection.tsx

@@ -21,11 +21,10 @@ import { ChevronDownIcon, ChevronRightIcon } from './Icons'
 import { api } from '../api/client'
 import type { ViewTreeNode } from '../types'
 
-type Algorithm = 'elk' | 'force'
+type Algorithm = 'dagre' | 'force'
 
-interface ElkConfig {
-  algorithm: 'layered' | 'force' | 'mrtree' | 'box'
-  direction: 'RIGHT' | 'LEFT' | 'DOWN' | 'UP'
+interface DagreConfig {
+  direction: 'TB' | 'BT' | 'LR' | 'RL'
   nodeSpacing: number
   layerSpacing: number
 }
@@ -41,7 +40,7 @@ const NODE_W = 200
 const NODE_H = 120
 
 const ALGO_META: Record<Algorithm, { label: string }> = {
-  elk: { label: 'Layered' },
+  dagre: { label: 'Layered' },
   force: { label: 'Organic' },
 }
 
@@ -52,13 +51,12 @@ interface Props {
 
 export default function LayoutSection({ view, canEdit }: Props) {
   const [open, setOpen] = useState(false)
-  const [algo, setAlgo] = useState<Algorithm>('elk')
+  const [algo, setAlgo] = useState<Algorithm>('dagre')
   const [running, setRunning] = useState(false)
   const [collisionRunning, setCollisionRunning] = useState(false)
 
-  const [elkConfig, setElkConfig] = useState<ElkConfig>({
-    algorithm: 'layered',
-    direction: 'DOWN',
+  const [dagreConfig, setDagreConfig] = useState<DagreConfig>({
+    direction: 'TB',
     nodeSpacing: 75,
     layerSpacing: 75,
   })
@@ -199,8 +197,8 @@ export default function LayoutSection({ view, canEdit }: Props) {
       ])
 
       let positions: Map<number, { x: number; y: number }>
-      if (algo === 'elk') {
-        positions = await runElk(objs, edgeList)
+      if (algo === 'dagre') {
+        positions = await runDagre(objs, edgeList)
       } else {
         positions = await runForce(objs, edgeList)
       }
@@ -271,46 +269,45 @@ export default function LayoutSection({ view, canEdit }: Props) {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const runElk = async (objs: any[], edgeList: any[]) => {
+  const runDagre = async (objs: any[], edgeList: any[]) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ELKModule = await import('elkjs/lib/elk.bundled.js') as any
-    const elk = new ELKModule.default()
-
-    const layoutOptions: Record<string, string> = {
-      'elk.algorithm': elkConfig.algorithm,
-      'elk.spacing.nodeNode': String(elkConfig.nodeSpacing),
-    }
-    if (elkConfig.algorithm === 'layered') {
-      layoutOptions['elk.direction'] = elkConfig.direction
-      layoutOptions['elk.layered.spacing.nodeNodeBetweenLayers'] = String(elkConfig.layerSpacing)
-    }
+    const dagreModule = await import('dagre') as any
+    const dagre = dagreModule.default ?? dagreModule
 
     const objSet = new Set<number>(objs.map((o: { element_id?: number }) => Number(o.element_id)))
-    const graph = {
-      id: 'root',
-      layoutOptions,
-      children: objs.map((obj: { element_id: number }) => ({
-        id: String(obj.element_id),
-        width: NODE_W,
-        height: NODE_H,
-      })),
-      edges: edgeList
-        .filter((e: { source_element_id: number; target_element_id: number }) =>
-          objSet.has(e.source_element_id) && objSet.has(e.target_element_id)
-        )
-        .map((e: { id: number; source_element_id: number; target_element_id: number }) => ({
-          id: String(e.id),
-          sources: [String(e.source_element_id)],
-          targets: [String(e.target_element_id)],
-        })),
-    }
+    const graph = new dagre.graphlib.Graph({ multigraph: true })
+    graph.setGraph({
+      rankdir: dagreConfig.direction,
+      nodesep: dagreConfig.nodeSpacing,
+      ranksep: dagreConfig.layerSpacing,
+      marginx: 0,
+      marginy: 0,
+    })
+    graph.setDefaultEdgeLabel(() => ({}))
+
+    objs.forEach((obj: { element_id: number }) => {
+      graph.setNode(String(obj.element_id), { width: NODE_W, height: NODE_H })
+    })
+
+    edgeList
+      .filter((e: { source_element_id: number; target_element_id: number }) =>
+        objSet.has(e.source_element_id) && objSet.has(e.target_element_id)
+      )
+      .forEach((e: { id: number; source_element_id: number; target_element_id: number }) => {
+        graph.setEdge(String(e.source_element_id), String(e.target_element_id), {}, String(e.id))
+      })
+
+    dagre.layout(graph)
 
-    const result = await elk.layout(graph)
     const positions = new Map<number, { x: number; y: number }>()
-    result.children?.forEach((child: { id: string; x?: number; y?: number }) => {
-      const id = Number(child.id)
+    graph.nodes().forEach((nodeId: string) => {
+      const id = Number(nodeId)
       if (!Number.isFinite(id)) return
-      positions.set(id, { x: child.x ?? 0, y: child.y ?? 0 })
+      const node = graph.node(nodeId) as { x?: number; y?: number }
+      positions.set(id, {
+        x: (node.x ?? 0) - NODE_W / 2,
+        y: (node.y ?? 0) - NODE_H / 2,
+      })
     })
     return positions
   }
@@ -428,54 +425,34 @@ export default function LayoutSection({ view, canEdit }: Props) {
             border="1px solid"
             borderColor="whiteAlpha.100"
           >
-            {algo === 'elk' ? (
+            {algo === 'dagre' ? (
               <Grid templateColumns="1fr 1fr" gap={4}>
                 <FormControl gridColumn="span 2">
-                  <FormLabel {...LabelStyle}>Algorithm</FormLabel>
+                  <FormLabel {...LabelStyle}>Direction</FormLabel>
                   <Select
                     size="xs"
                     variant="filled"
                     bg="whiteAlpha.100"
                     border="none"
                     _hover={{ bg: 'whiteAlpha.200' }}
-                    value={elkConfig.algorithm}
-                    onChange={e => setElkConfig(c => ({ ...c, algorithm: e.target.value as ElkConfig['algorithm'] }))}
+                    value={dagreConfig.direction}
+                    onChange={e => setDagreConfig(c => ({ ...c, direction: e.target.value as DagreConfig['direction'] }))}
                   >
-                    <option value="layered">Layered</option>
-                    <option value="force">Force</option>
-                    <option value="mrtree">Mr. Tree</option>
-                    <option value="box">Box</option>
+                    <option value="TB">Top → Bottom</option>
+                    <option value="BT">Bottom → Top</option>
+                    <option value="LR">Left → Right</option>
+                    <option value="RL">Right → Left</option>
                   </Select>
                 </FormControl>
 
-                {elkConfig.algorithm === 'layered' && (
-                  <FormControl gridColumn="span 2">
-                    <FormLabel {...LabelStyle}>Direction</FormLabel>
-                    <Select
-                      size="xs"
-                      variant="filled"
-                      bg="whiteAlpha.100"
-                      border="none"
-                      _hover={{ bg: 'whiteAlpha.200' }}
-                      value={elkConfig.direction}
-                      onChange={e => setElkConfig(c => ({ ...c, direction: e.target.value as ElkConfig['direction'] }))}
-                    >
-                      <option value="DOWN">Top → Bottom</option>
-                      <option value="UP">Bottom → Top</option>
-                      <option value="RIGHT">Left → Right</option>
-                      <option value="LEFT">Right → Left</option>
-                    </Select>
-                  </FormControl>
-                )}
-
                 <FormControl>
                   <FormLabel {...LabelStyle}>Element Gap</FormLabel>
                   <NumberInput
                     size="xs"
                     variant="filled"
-                    value={elkConfig.nodeSpacing}
+                    value={dagreConfig.nodeSpacing}
                     min={10} max={400} step={10}
-                    onChange={(_, v) => !isNaN(v) && setElkConfig(c => ({ ...c, nodeSpacing: v }))}
+                    onChange={(_, v) => !isNaN(v) && setDagreConfig(c => ({ ...c, nodeSpacing: v }))}
                   >
                     <NumberInputField bg="whiteAlpha.100" border="none" />
                     <NumberInputStepper>
@@ -485,24 +462,22 @@ export default function LayoutSection({ view, canEdit }: Props) {
                   </NumberInput>
                 </FormControl>
 
-                {elkConfig.algorithm === 'layered' && (
-                  <FormControl>
-                    <FormLabel {...LabelStyle}>Layer Gap</FormLabel>
-                    <NumberInput
-                      size="xs"
-                      variant="filled"
-                      value={elkConfig.layerSpacing}
-                      min={10} max={400} step={10}
-                      onChange={(_, v) => !isNaN(v) && setElkConfig(c => ({ ...c, layerSpacing: v }))}
-                    >
-                      <NumberInputField bg="whiteAlpha.100" border="none" />
-                      <NumberInputStepper>
-                        <NumberIncrementStepper border="none" />
-                        <NumberDecrementStepper border="none" />
-                      </NumberInputStepper>
-                    </NumberInput>
-                  </FormControl>
-                )}
+                <FormControl>
+                  <FormLabel {...LabelStyle}>Layer Gap</FormLabel>
+                  <NumberInput
+                    size="xs"
+                    variant="filled"
+                    value={dagreConfig.layerSpacing}
+                    min={10} max={400} step={10}
+                    onChange={(_, v) => !isNaN(v) && setDagreConfig(c => ({ ...c, layerSpacing: v }))}
+                  >
+                    <NumberInputField bg="whiteAlpha.100" border="none" />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper border="none" />
+                      <NumberDecrementStepper border="none" />
+                    </NumberInputStepper>
+                  </NumberInput>
+                </FormControl>
               </Grid>
             ) : (
               <Grid templateColumns="1fr 1fr" gap={4}>

package/src/components/ViewGridNode.tsx

@@ -137,7 +137,7 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
 
     return () => {
       active = false
-      if (url) {
+      if (url?.startsWith('blob:')) {
         URL.revokeObjectURL(url)
       }
     }
@@ -224,9 +224,6 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
               display="block"
               p={2}
               bg="var(--bg-card-solid)"
-              style={{
-                filter: 'brightness(0) saturate(100%) invert(35%) sepia(26%) forum-blue(82%) hue-rotate(180deg) brightness(95%) contrast(90%)',
-              }}
             />
           ) : (
             <Flex

package/src/components/ZUI/renderer.ts

@@ -37,6 +37,7 @@ export interface ScreenRect {
   bottom: number
 }
 
+const frameLabelRects: ScreenRect[] = []
 
 /**
  * Returns a world-space font size that, when multiplied by zoom,
@@ -62,19 +63,61 @@ const TYPE_COLOR_400: Record<string, string> = {
 }
 
 /** Border color: type .400 at 50% alpha - bold branded tint */
+const typeBorderColorCache = new Map<string, string>()
 function typeBorderColor(type: string, alpha = 0.5): string {
+  const cacheKey = `${type}:${alpha}`
+  const cached = typeBorderColorCache.get(cacheKey)
+  if (cached) return cached
+
   const color = TYPE_COLOR_400[type]
   const hex = typeof color === 'string' ? color : '#a0aec0'
   const r = parseInt(hex.slice(1, 3), 16)
   const g = parseInt(hex.slice(3, 5), 16)
   const b = parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r},${g},${b},${alpha})`
+  const rgba = `rgba(${r},${g},${b},${alpha})`
+  typeBorderColorCache.set(cacheKey, rgba)
+  return rgba
+}
+
+interface RendererThemeVars {
+  canvasBg: string
+  nodeBg: string
+  accent: string
+  labelBg: string
+}
+
+const themeFallbacks: RendererThemeVars = {
+  canvasBg: '#0d121e',
+  nodeBg: '#2d3748',
+  accent: '#63b3ed',
+  labelBg: '#171923',
 }
 
-/** Read a CSS custom property value from :root (resolves color-mix, etc.). */
-function readCSSVar(name: string, fallback: string): string {
-  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
-  return v || fallback
+let cachedThemeVars: RendererThemeVars = themeFallbacks
+let themeObserverStarted = false
+
+function refreshThemeVars(): void {
+  if (typeof document === 'undefined') return
+  const styles = getComputedStyle(document.documentElement)
+  cachedThemeVars = {
+    canvasBg: styles.getPropertyValue('--bg-main').trim() || themeFallbacks.canvasBg,
+    nodeBg: styles.getPropertyValue('--bg-element').trim() || themeFallbacks.nodeBg,
+    accent: styles.getPropertyValue('--accent').trim() || themeFallbacks.accent,
+    labelBg: styles.getPropertyValue('--chakra-colors-gray-900').trim() || themeFallbacks.labelBg,
+  }
+}
+
+function getThemeVars(): RendererThemeVars {
+  if (!themeObserverStarted && typeof document !== 'undefined') {
+    themeObserverStarted = true
+    refreshThemeVars()
+    const update = () => refreshThemeVars()
+    const mo = new MutationObserver(update)
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] })
+    window.matchMedia?.('(prefers-color-scheme: dark)').addEventListener?.('change', update)
+    window.matchMedia?.('(prefers-color-scheme: light)').addEventListener?.('change', update)
+  }
+  return cachedThemeVars
 }
 
 // ── Geometry helpers ───────────────────────────────────────────────
@@ -133,14 +176,6 @@ function rectsOverlap(a: ScreenRect, b: ScreenRect): boolean {
   return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
 }
 
-function worldToScreen(matrix: DOMMatrix, x: number, y: number) {
-  return new DOMPoint(x, y).matrixTransform(matrix)
-}
-
-function screenToWorld(matrix: DOMMatrix, x: number, y: number) {
-  return new DOMPoint(x, y).matrixTransform(matrix.inverse())
-}
-
 export function pickEdgeLabelPosition(
   matrix: DOMMatrix,
   midX: number,
@@ -151,7 +186,8 @@ export function pickEdgeLabelPosition(
   dy: number,
   occupiedLabelRects: ScreenRect[],
 ) {
-  const screenMid = worldToScreen(matrix, midX, midY)
+  const screenMidX = matrix.a * midX + matrix.c * midY + matrix.e
+  const screenMidY = matrix.b * midX + matrix.d * midY + matrix.f
   const screenTextW = Math.max(1, textW * matrix.a)
   const screenTextH = Math.max(1, textH * matrix.d)
   const gap = 6
@@ -161,21 +197,38 @@ export function pickEdgeLabelPosition(
   const normalY = dx / length
   const tangentX = dx / length
   const tangentY = dy / length
-  const candidateOffsets = [
-    { x: 0, y: 0 },
-    { x: normalX * step, y: normalY * step },
-    { x: -normalX * step, y: -normalY * step },
-    { x: normalX * step * 2, y: normalY * step * 2 },
-    { x: -normalX * step * 2, y: -normalY * step * 2 },
-    { x: tangentX * step, y: tangentY * step },
-    { x: -tangentX * step, y: -tangentY * step },
-    { x: tangentX * step + normalX * step, y: tangentY * step + normalY * step },
-    { x: -tangentX * step - normalX * step, y: -tangentY * step - normalY * step },
-  ]
-
-  for (const offset of candidateOffsets) {
-    const centerX = screenMid.x + offset.x
-    const centerY = screenMid.y + offset.y
+
+  for (let i = 0; i < 9; i++) {
+    let offsetX = 0
+    let offsetY = 0
+    if (i === 1) {
+      offsetX = normalX * step
+      offsetY = normalY * step
+    } else if (i === 2) {
+      offsetX = -normalX * step
+      offsetY = -normalY * step
+    } else if (i === 3) {
+      offsetX = normalX * step * 2
+      offsetY = normalY * step * 2
+    } else if (i === 4) {
+      offsetX = -normalX * step * 2
+      offsetY = -normalY * step * 2
+    } else if (i === 5) {
+      offsetX = tangentX * step
+      offsetY = tangentY * step
+    } else if (i === 6) {
+      offsetX = -tangentX * step
+      offsetY = -tangentY * step
+    } else if (i === 7) {
+      offsetX = tangentX * step + normalX * step
+      offsetY = tangentY * step + normalY * step
+    } else if (i === 8) {
+      offsetX = -tangentX * step - normalX * step
+      offsetY = -tangentY * step - normalY * step
+    }
+
+    const centerX = screenMidX + offsetX
+    const centerY = screenMidY + offsetY
     const rect: ScreenRect = {
       left: centerX - screenTextW / 2 - gap,
       top: centerY - screenTextH / 2 - gap / 2,
@@ -184,15 +237,21 @@ export function pickEdgeLabelPosition(
     }
     if (occupiedLabelRects.some((existing) => rectsOverlap(rect, existing))) continue
     occupiedLabelRects.push(rect)
-    const worldPoint = screenToWorld(matrix, centerX, centerY)
-    return { x: worldPoint.x, y: worldPoint.y }
+    const det = matrix.a * matrix.d - matrix.b * matrix.c
+    if (det === 0) return { x: midX, y: midY }
+    const translatedX = centerX - matrix.e
+    const translatedY = centerY - matrix.f
+    return {
+      x: (matrix.d * translatedX - matrix.c * translatedY) / det,
+      y: (-matrix.b * translatedX + matrix.a * translatedY) / det,
+    }
   }
 
   const fallbackRect: ScreenRect = {
-    left: screenMid.x - screenTextW / 2 - gap,
-    top: screenMid.y - screenTextH / 2 - gap / 2,
-    right: screenMid.x + screenTextW / 2 + gap,
-    bottom: screenMid.y + screenTextH / 2 + gap / 2,
+    left: screenMidX - screenTextW / 2 - gap,
+    top: screenMidY - screenTextH / 2 - gap / 2,
+    right: screenMidX + screenTextW / 2 + gap,
+    bottom: screenMidY + screenTextH / 2 + gap / 2,
   }
   occupiedLabelRects.push(fallbackRect)
   return { x: midX, y: midY }
@@ -301,9 +360,15 @@ function parseHex(hex: string): { r: number; g: number; b: number } {
 }
 
 /** Derive a portal tint color from the accent: same hue, very low alpha. */
+const portalTintColorCache = new Map<string, string>()
 function portalTintColor(accent: string, alpha: number): string {
+  const cacheKey = `${accent}:${alpha}`
+  const cached = portalTintColorCache.get(cacheKey)
+  if (cached) return cached
   const { r, g, b } = parseHex(accent)
-  return `rgba(${r},${g},${b},${alpha})`
+  const rgba = `rgba(${r},${g},${b},${alpha})`
+  portalTintColorCache.set(cacheKey, rgba)
+  return rgba
 }
 
 /** Draw a squiggly line from (x1, y1) to (x2, y2). */
@@ -719,24 +784,38 @@ function drawNode(
 
 // ── Edge drawing ───────────────────────────────────────────────────
 
-function drawEdges(
-  ctx: CanvasRenderingContext2D,
-  nodes: LayoutNode[],
-  alpha: number,
-  zoom: number,
-  thresholds: { start: number; end: number },
-  accent: string,
-  labelBg: string,
-  occupiedLabelRects: ScreenRect[],
-): void {
-  if (alpha < 0.05) return
-  const nodeMap = new Map(nodes.map((n) => [n.id, n]))
-  const handleUsage: Record<string, { edgeKey: string; type: 'source' | 'target'; otherNodeCoord: number }[]> = {}
+interface HandleUsage {
+  edgeKey: string
+  type: 'source' | 'target'
+  otherNodeCoord: number
+}
 
-  nodes.forEach((node) => {
-    node.edgesOut.forEach((edge, edgeIndex) => {
+interface DrawEdgesLayoutMetadata {
+  nodeMap: Map<string, LayoutNode>
+  handleUsage: Record<string, HandleUsage[]>
+  handleUsageIndex: Record<string, number>
+}
+
+const drawEdgesMetadataCache = new WeakMap<LayoutNode[], DrawEdgesLayoutMetadata>()
+const emptyHandleUsage: HandleUsage[] = []
+
+function getDrawEdgesLayoutMetadata(nodes: LayoutNode[]): DrawEdgesLayoutMetadata {
+  const cached = drawEdgesMetadataCache.get(nodes)
+  if (cached) return cached
+
+  const nodeMap = new Map<string, LayoutNode>()
+  const handleUsage: Record<string, HandleUsage[]> = {}
+  const handleUsageIndex: Record<string, number> = {}
+
+  for (const node of nodes) {
+    nodeMap.set(node.id, node)
+  }
+
+  for (const node of nodes) {
+    for (let edgeIndex = 0; edgeIndex < node.edgesOut.length; edgeIndex++) {
+      const edge = node.edgesOut[edgeIndex]
       const target = nodeMap.get(edge.targetId)
-      if (!target) return
+      if (!target) continue
 
       const edgeKey = `${node.id}:${edgeIndex}`
       const sourceSide = getLogicalHandleId(edge.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
@@ -761,12 +840,34 @@ function drawEdges(
           ? node.worldY + node.worldH / 2
           : node.worldX + node.worldW / 2,
       })
-    })
-  })
+    }
+  }
 
-  Object.values(handleUsage).forEach((usages) => {
+  for (const [usageKey, usages] of Object.entries(handleUsage)) {
     usages.sort((a, b) => a.otherNodeCoord - b.otherNodeCoord)
-  })
+    for (let i = 0; i < usages.length; i++) {
+      const usage = usages[i]
+      handleUsageIndex[`${usageKey}:${usage.edgeKey}:${usage.type}`] = i
+    }
+  }
+
+  const metadata = { nodeMap, handleUsage, handleUsageIndex }
+  drawEdgesMetadataCache.set(nodes, metadata)
+  return metadata
+}
+
+function drawEdges(
+  ctx: CanvasRenderingContext2D,
+  nodes: LayoutNode[],
+  alpha: number,
+  zoom: number,
+  thresholds: { start: number; end: number },
+  accent: string,
+  labelBg: string,
+  occupiedLabelRects: ScreenRect[],
+): void {
+  if (alpha < 0.05) return
+  const { nodeMap, handleUsage, handleUsageIndex } = getDrawEdgesLayoutMetadata(nodes)
 
   for (const node of nodes) {
     for (const [edgeIndex, edge] of node.edgesOut.entries()) {
@@ -807,10 +908,12 @@ function drawEdges(
       const edgeKey = `${node.id}:${edgeIndex}`
       const sourceSide = getLogicalHandleId(edge.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? DEFAULT_SOURCE_HANDLE_SIDE
       const targetSide = getLogicalHandleId(edge.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? DEFAULT_TARGET_HANDLE_SIDE
-      const srcGroup = handleUsage[`${node.id}-${sourceSide}`] ?? []
-      const tgtGroup = handleUsage[`${target.id}-${targetSide}`] ?? []
-      const sourceGroupIndex = srcGroup.findIndex((usage) => usage.edgeKey === edgeKey && usage.type === 'source')
-      const targetGroupIndex = tgtGroup.findIndex((usage) => usage.edgeKey === edgeKey && usage.type === 'target')
+      const srcKey = `${node.id}-${sourceSide}`
+      const tgtKey = `${target.id}-${targetSide}`
+      const srcGroup = handleUsage[srcKey] ?? emptyHandleUsage
+      const tgtGroup = handleUsage[tgtKey] ?? emptyHandleUsage
+      const sourceGroupIndex = handleUsageIndex[`${srcKey}:${edgeKey}:source`] ?? -1
+      const targetGroupIndex = handleUsageIndex[`${tgtKey}:${edgeKey}:target`] ?? -1
 
       const sH = getHandlePos(
         effXSource,
@@ -1095,11 +1198,7 @@ export function renderFrame(
   canvasW: number,
   canvasH: number,
 ): ScreenRect[] {
-  // Read user-customisable CSS vars once per frame
-  const canvasBg = readCSSVar('--bg-main', '#0d121e')
-  const nodeBg = readCSSVar('--bg-element', '#2d3748')
-  const accent = readCSSVar('--accent', '#63b3ed')
-  const labelBg = readCSSVar('--chakra-colors-gray-900', '#171923')
+  const { canvasBg, nodeBg, accent, labelBg } = getThemeVars()
 
   ctx.clearRect(0, 0, canvasW, canvasH)
 
@@ -1114,7 +1213,8 @@ export function renderFrame(
   ctx.scale(view.zoom, view.zoom)
 
   const thresholds = getExpandThresholds(canvasW)
-  const occupiedLabelRects: ScreenRect[] = []
+  const occupiedLabelRects = frameLabelRects
+  occupiedLabelRects.length = 0
 
   for (const group of groups) {
     if (!isVisible(group.worldX, group.worldY, group.worldW, group.worldH, view, canvasW, canvasH)) {