@tldiagram/core-ui 1.87.0

package/src/crossBranch/settings.ts

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import type { CrossBranchContextSettings, CrossBranchSurface } from './types'
+import { CROSS_BRANCH_DEPTH_ALL } from './types'
+
+const STORAGE_PREFIX = 'diag:cross-branch'
+
+function storageKey(surface: CrossBranchSurface) {
+  return `${STORAGE_PREFIX}:${surface}`
+}
+
+function defaultSettings(surface: CrossBranchSurface): CrossBranchContextSettings {
+  return {
+    enabled: surface !== 'zui-shared',
+    depth: CROSS_BRANCH_DEPTH_ALL,
+  }
+}
+
+function readSettings(surface: CrossBranchSurface): CrossBranchContextSettings {
+  const defaults = defaultSettings(surface)
+  if (typeof window === 'undefined') return defaults
+  const raw = window.localStorage.getItem(storageKey(surface))
+  if (!raw) return defaults
+  try {
+    const parsed = JSON.parse(raw) as Partial<CrossBranchContextSettings>
+    return {
+      enabled: parsed.enabled ?? defaults.enabled,
+      depth: typeof parsed.depth === 'number' ? parsed.depth : CROSS_BRANCH_DEPTH_ALL,
+    }
+  } catch {
+    return defaults
+  }
+}
+
+export function useCrossBranchContextSettings(surface: CrossBranchSurface) {
+  const [settings, setSettings] = useState<CrossBranchContextSettings>(() => readSettings(surface))
+
+  useEffect(() => {
+    setSettings(readSettings(surface))
+  }, [surface])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    window.localStorage.setItem(storageKey(surface), JSON.stringify(settings))
+  }, [surface, settings])
+
+  const setEnabled = useCallback((enabled: boolean) => {
+    setSettings((prev) => ({ ...prev, enabled }))
+  }, [])
+
+  const setDepth = useCallback((depth: number) => {
+    setSettings((prev) => ({ ...prev, depth }))
+  }, [])
+
+  return useMemo(() => ({
+    settings,
+    setEnabled,
+    setDepth,
+  }), [settings, setEnabled, setDepth])
+}

package/src/crossBranch/store.ts

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { api } from '../api/client'
+import type { ExploreData } from '../types'
+import { buildWorkspaceGraphSnapshot, removeConnectorFromSnapshot, removePlacementFromSnapshot, upsertConnectorInSnapshot, upsertPlacementInSnapshot } from './graph'
+import type { WorkspaceGraphSnapshot } from './types'
+
+let cachedSnapshot: WorkspaceGraphSnapshot | null = null
+let inflightLoad: Promise<WorkspaceGraphSnapshot> | null = null
+const listeners = new Set<(snapshot: WorkspaceGraphSnapshot | null) => void>()
+
+function publish(snapshot: WorkspaceGraphSnapshot | null) {
+  cachedSnapshot = snapshot
+  for (const listener of listeners) listener(snapshot)
+}
+
+export function primeWorkspaceGraphSnapshot(data: ExploreData) {
+  publish(buildWorkspaceGraphSnapshot(data))
+}
+
+export async function loadWorkspaceGraphSnapshot(force = false): Promise<WorkspaceGraphSnapshot> {
+  if (!force && cachedSnapshot) return cachedSnapshot
+  if (!force && inflightLoad) return inflightLoad
+  inflightLoad = api.explore.load().then((data) => {
+    const snapshot = buildWorkspaceGraphSnapshot(data)
+    publish(snapshot)
+    inflightLoad = null
+    return snapshot
+  }).catch((error) => {
+    inflightLoad = null
+    throw error
+  })
+  return inflightLoad
+}
+
+export function subscribeWorkspaceGraphSnapshot(listener: (snapshot: WorkspaceGraphSnapshot | null) => void) {
+  listeners.add(listener)
+  return () => { listeners.delete(listener) }
+}
+
+export function useWorkspaceGraphSnapshot(enabled = true) {
+  const [snapshot, setSnapshot] = useState<WorkspaceGraphSnapshot | null>(cachedSnapshot)
+
+  useEffect(() => subscribeWorkspaceGraphSnapshot(setSnapshot), [])
+
+  useEffect(() => {
+    if (!enabled) return
+    if (cachedSnapshot) {
+      setSnapshot(cachedSnapshot)
+      return
+    }
+    void loadWorkspaceGraphSnapshot().catch(() => { /* intentionally empty */ })
+  }, [enabled])
+
+  return snapshot
+}
+
+export function upsertConnectorGraphSnapshot(connector: Parameters<typeof upsertConnectorInSnapshot>[1]) {
+  publish(upsertConnectorInSnapshot(cachedSnapshot, connector))
+}
+
+export function removeConnectorGraphSnapshot(viewId: number, connectorId: number) {
+  publish(removeConnectorFromSnapshot(cachedSnapshot, viewId, connectorId))
+}
+
+export function upsertPlacementGraphSnapshot(viewId: number, placement: Parameters<typeof upsertPlacementInSnapshot>[2]) {
+  publish(upsertPlacementInSnapshot(cachedSnapshot, viewId, placement))
+}
+
+export function removePlacementGraphSnapshot(viewId: number, elementId: number) {
+  publish(removePlacementFromSnapshot(cachedSnapshot, viewId, elementId))
+}

package/src/crossBranch/types.ts

@@ -0,0 +1,102 @@
+import type { Connector, ExploreData, PlacedElement, ViewTreeNode } from '../types'
+
+export const CROSS_BRANCH_DEPTH_ALL = 5
+export const CROSS_BRANCH_DEPTH_MIN = 1
+export const CROSS_BRANCH_DEPTH_MAX = CROSS_BRANCH_DEPTH_ALL
+
+export type CrossBranchSurface = 'editor' | 'zui' | 'zui-shared'
+
+export interface CrossBranchContextSettings {
+  enabled: boolean
+  depth: number
+}
+
+export interface GraphPlacementRef {
+  viewId: number
+  viewName: string
+  element: PlacedElement
+}
+
+export interface WorkspaceGraphSnapshot {
+  source: ExploreData
+  tree: ViewTreeNode[]
+  views: Record<number, { view: ViewTreeNode; placements: PlacedElement[]; connectors: Connector[] }>
+  viewById: Record<number, ViewTreeNode>
+  placementsByViewId: Record<number, PlacedElement[]>
+  connectorsByViewId: Record<number, Connector[]>
+  placementsByElementId: Record<number, GraphPlacementRef[]>
+  childViewIdByOwnerElementId: Record<number, number>
+  descendantsByViewId: Record<number, number[]>
+  ancestorsByViewId: Record<number, number[]>
+}
+
+export interface ProxyEndpoint {
+  actualElementId: number
+  actualElementName: string
+  anchorElementId: number
+  anchorElementName: string
+  anchorViewId: number | null
+  anchorViewName: string | null
+  placementViewId: number | null
+  placementViewName: string | null
+  depth: number
+  externalToView: boolean
+  currentBranchElementId: number | null
+  commonAncestorViewId: number | null
+  commonAncestorViewName: string | null
+  mergeAncestorElementId?: number | null
+  contextPathElementIds?: number[]
+}
+
+export interface ProxyConnectorLeaf {
+  connector: Connector
+  ownerViewId: number
+  ownerViewName: string
+  source: ProxyEndpoint
+  target: ProxyEndpoint
+}
+
+export interface ProxyConnectorDetails {
+  key: string
+  label: string
+  count: number
+  sourceAnchorId: string
+  targetAnchorId: string
+  sourceAnchorName: string
+  targetAnchorName: string
+  ownerViewIds: number[]
+  ownerViewNames: string[]
+  connectors: ProxyConnectorLeaf[]
+}
+
+export interface AggregatedProxyConnector {
+  key: string
+  sourceAnchorId: string
+  targetAnchorId: string
+  direction: string
+  style: string
+  label: string
+  count: number
+  sourceElementId: number | null
+  targetElementId: number | null
+  details: ProxyConnectorDetails
+}
+
+export interface ProxyContextNode {
+  id: string
+  anchorElementId: number
+  name: string
+  sortLevel: number
+  placementViewId: number | null
+  kind: string | null
+  description: string | null
+  technology: string | null
+  logoUrl: string | null
+  technologyConnectors: PlacedElement['technology_connectors']
+  ownerViewIds: number[]
+  ownerViewNames: string[]
+  commonAncestorViewId: number | null
+  commonAncestorViewName: string | null
+  currentBranchElementId: number | null
+  connectorCount: number
+}

package/src/demo/DemoPage.tsx

@@ -0,0 +1,184 @@
+/**
+ * Demo entry point.
+ * Overrides the real `api` singleton with localStorage-backed implementations
+ * and patches window.history to redirect /views/:id → /demo/:id, all for the
+ * lifetime of this component. Restores everything on unmount.
+ * No auth required; served at /demo and /demo/:id routes.
+ */
+
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Box } from '@chakra-ui/react'
+import { api } from '../api/client'
+import ViewEditor from '../pages/ViewEditor'
+import { HeaderProvider } from '../components/HeaderContext'
+import { ThemeProvider } from '../context/ThemeContext'
+import { demoApi, initDemoStore } from './store'
+import { DEMO_VIEW_EDITOR_OPTIONS } from './viewEditor'
+
+// ── Override helpers ──────────────────────────────────────────────────────────
+
+type ApiOverride = Record<string, unknown>
+
+/**
+ * Swap api methods + patch window.history so any /views/:id navigation is
+ * silently rewritten to /demo/:id before React Router processes it.
+ * Returns a function that restores everything.
+ */
+function applyOverrides(): () => void {
+  const originals: [obj: ApiOverride, key: string, original: unknown][] = []
+
+  function swap(obj: ApiOverride, key: string, replacement: unknown) {
+    originals.push([obj, key, obj[key]])
+    obj[key] = replacement
+  }
+
+  // elements
+  const realElements = api.elements as unknown as ApiOverride
+  const demoElements = demoApi.elements as ApiOverride
+  for (const key of ['list', 'get', 'create', 'update', 'delete', 'placements']) {
+    swap(realElements, key, demoElements[key])
+  }
+
+  // workspace.elements
+  const realWsElements = (api.workspace as unknown as ApiOverride).elements as ApiOverride
+  const demoWsElements = demoApi.workspace.elements as ApiOverride
+  for (const key of ['list', 'get', 'create', 'update', 'delete', 'placements']) {
+    swap(realWsElements, key, demoWsElements[key])
+  }
+
+  // workspace.orgs.tagColors
+  const realTagColors = ((api.workspace as unknown as ApiOverride).orgs as ApiOverride).tagColors as ApiOverride
+  const demoTagColors = demoApi.workspace.orgs.tagColors as ApiOverride
+  for (const key of ['list', 'set']) {
+    swap(realTagColors, key, demoTagColors[key])
+  }
+
+  // workspace.views top-level methods + nested namespaces
+  const realViews = (api.workspace as unknown as ApiOverride).views as ApiOverride
+  const demoViews = demoApi.workspace.views as ApiOverride
+  for (const key of ['list', 'get', 'content', 'tree', 'create', 'update', 'delete', 'thumbnail', 'rename', 'setLevel', 'reparent']) {
+    swap(realViews, key, demoViews[key])
+  }
+  for (const ns of ['placements', 'layers', 'reactions', 'threads']) {
+    const realNs = realViews[ns] as ApiOverride
+    const demoNs = demoViews[ns] as ApiOverride
+    for (const key of Object.keys(demoNs)) {
+      swap(realNs, key, demoNs[key])
+    }
+  }
+
+  // workspace.connectors
+  const realConnectors = (api.workspace as unknown as ApiOverride).connectors as ApiOverride
+  const demoConnectors = demoApi.workspace.connectors as ApiOverride
+  for (const key of ['list', 'create', 'update', 'delete']) {
+    swap(realConnectors, key, demoConnectors[key])
+  }
+
+  // explore.load (cross-branch graph snapshot)
+  const realExplore = (api as unknown as ApiOverride).explore as ApiOverride
+  swap(realExplore, 'load', demoApi.explore.load)
+
+  // ── Patch window.history so /views/:id → /demo/:id before React Router sees it
+  const origPush = window.history.pushState.bind(window.history)
+  const origReplace = window.history.replaceState.bind(window.history)
+
+  function rewriteUrl(url: string | URL | null | undefined): string | URL | null | undefined {
+    if (typeof url !== 'string') return url
+    return url.replace(/\/views\/(\d+)/, '/demo/$1')
+  }
+
+  window.history.pushState = (state, title, url) => origPush(state, title, rewriteUrl(url))
+  window.history.replaceState = (state, title, url) => origReplace(state, title, rewriteUrl(url))
+
+  return () => {
+    for (const [obj, key, original] of originals) {
+      obj[key] = original
+    }
+    window.history.pushState = origPush
+    window.history.replaceState = origReplace
+  }
+}
+
+// ── Inner component overrides applied before children mount ─────────────────
+
+function DemoApp({
+  revealProgress,
+}: {
+  revealProgress: number
+}) {
+  // useState initializer runs synchronously during the first render of this
+  // component instance, before any child component mounts or any hook effect
+  // runs. This guarantees api overrides are in place for ViewEditor's first fetch.
+  const [restore] = useState<() => void>(() => {
+    initDemoStore()
+    return applyOverrides()
+  })
+
+  useEffect(() => restore, [restore])
+
+  return (
+    <ViewEditor
+      demoOptions={{ ...DEMO_VIEW_EDITOR_OPTIONS, revealProgress }}
+    />
+  )
+}
+
+// ── DemoNavigator: redirects bare /demo to the first root view ────────────────
+
+export function DemoNavigator() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    // Call demoApi directly no need to apply global overrides here, which
+    // would otherwise be cleaned up after DemoApp mounts and clobber its patches.
+    initDemoStore()
+    demoApi.workspace.views.tree().then((tree) => {
+      const root = tree.find((v) => v.parent_view_id === null)
+      navigate(root ? `/demo/${root.id}` : '/demo/1', { replace: true })
+    }).catch(() => navigate('/demo/1', { replace: true }))
+  }, [navigate])
+
+  return null
+}
+
+// ── DemoPage ──────────────────────────────────────────────────────────────────
+
+export default function DemoPage() {
+  const [revealProgress, setRevealProgress] = useState(() => (window.self === window.top ? 1 : 0))
+
+  useEffect(() => {
+    if (window.self === window.top) {
+      setRevealProgress(1)
+      return
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      const data = event.data as { type?: unknown; progress?: unknown } | null
+      if (!data || data.type !== 'tldiagram-demo-progress') return
+
+      const nextProgress = Number(data.progress)
+      if (!Number.isFinite(nextProgress)) return
+
+      setRevealProgress(Math.max(0, Math.min(1, nextProgress)))
+    }
+
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [])
+
+  return (
+    <ThemeProvider
+      storagePrefix="diag:demo"
+      defaultAccent="#63b3ed"
+      defaultBackground="#0d121e"
+      defaultElementColor="#2d3748"
+    >
+      <Box minH="100vh" bg="var(--bg-canvas)" style={{ '--editor-top-offset': '0px' } as React.CSSProperties}>
+        <HeaderProvider>
+          <DemoApp revealProgress={revealProgress} />
+        </HeaderProvider>
+      </Box>
+    </ThemeProvider>
+  )
+}

package/src/demo/seed.ts

@@ -0,0 +1,67 @@
+import type { LibraryElement, PlacedElement, Connector, ViewTreeNode, ViewLayer } from '../types'
+
+const NOW = new Date().toISOString()
+
+export const DEMO_ELEMENTS: LibraryElement[] = [
+  { id: 1, name: 'User', kind: 'person', description: 'End user of the system', technology: null, url: null, logo_url: "https://tldiagram.com/app/icons/azure-users.png", technology_connectors: [], tags: ['external'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 2, name: 'Web App', kind: 'service', description: 'React single-page application', technology: 'React', url: null, logo_url: "https://tldiagram.com/app/icons/react.png", technology_connectors: [], tags: ['frontend'], has_view: true, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 3, name: 'API Gateway', kind: 'service', description: 'REST API gateway', technology: 'Golang', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 4, name: 'Auth Service', kind: 'service', description: 'Handles authentication & sessions', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 5, name: 'Frontend', kind: 'service', description: 'React frontend bundle', technology: 'React', url: null, logo_url: null, technology_connectors: [], tags: ['frontend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 6, name: 'Backend', kind: 'service', description: 'Core business logic API', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 7, name: 'PostgreSQL', kind: 'database', description: 'Primary relational database', technology: 'PostgreSQL', url: null, logo_url: null, technology_connectors: [], tags: ['data'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 8, name: 'Redis Cache', kind: 'database', description: 'In-memory cache and session store', technology: 'Redis', url: null, logo_url: null, technology_connectors: [], tags: ['data'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+  { id: 9, name: 'CDN', kind: 'service', description: 'Content delivery network', technology: 'Cloudflare', url: null, logo_url: null, technology_connectors: [], tags: ['external', 'infrastructure'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
+]
+
+export const DEMO_VIEWS: ViewTreeNode[] = [
+  {
+    id: 1, name: 'System Context', description: 'Top-level system context view', level_label: 'Context', level: 1, depth: 0,
+    owner_element_id: null, parent_view_id: null, created_at: NOW, updated_at: NOW, children: [
+      {
+        id: 2, name: 'Web App – Containers', description: 'Container-level view of the Web App', level_label: 'Container', level: 2, depth: 1,
+        owner_element_id: 2, parent_view_id: 1, created_at: NOW, updated_at: NOW, children: [],
+      },
+    ],
+  },
+]
+
+type ViewPlacements = Record<number, PlacedElement[]>
+type ViewConnectors = Record<number, Connector[]>
+
+export const DEMO_PLACEMENTS: ViewPlacements = {
+  1: [
+    { id: 101, view_id: 1, element_id: 1, position_x: 80, position_y: 200, name: 'User', kind: 'person', description: 'End user of the system', technology: null, url: null, logo_url: "https://tldiagram.com/app/icons/azure-users.png", technology_connectors: [], tags: ['external'], has_view: false, view_label: null },
+    { id: 102, view_id: 1, element_id: 2, position_x: 380, position_y: 200, name: 'Web App', kind: 'service', description: 'React single-page application', technology: 'React', url: null, logo_url: "https://tldiagram.com/app/icons/react.png", technology_connectors: [], tags: ['frontend'], has_view: true, view_label: null },
+    { id: 103, view_id: 1, element_id: 3, position_x: 680, position_y: 200, name: 'API Gateway', kind: 'service', description: 'REST API gateway', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null },
+    { id: 104, view_id: 1, element_id: 4, position_x: 380, position_y: 400, name: 'Auth Service', kind: 'service', description: 'Handles authentication & sessions', technology: 'Auth0', url: null, logo_url: "https://tldiagram.com/app/icons/auth0.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null },
+    { id: 105, view_id: 1, element_id: 9, position_x: 380, position_y: 0, name: 'CDN', kind: 'service', description: 'Content delivery network', technology: 'Cloudflare', url: null, logo_url: "https://tldiagram.com/app/icons/cloudflare.png", technology_connectors: [], tags: ['external', 'infrastructure'], has_view: false, view_label: null },
+    { id: 106, view_id: 1, element_id: 10, position_x: 680, position_y: 0, name: 'Stripe', kind: 'service', description: 'Payment', technology: 'Stripe', url: null, logo_url: "https://tldiagram.com/app/icons/stripe.png", technology_connectors: [], tags: ['external', 'billing'], has_view: false, view_label: null },
+  ],
+  2: [
+    { id: 201, view_id: 2, element_id: 5, position_x: 80, position_y: 200, name: 'Frontend', kind: 'service', description: 'React frontend bundle', technology: 'React', url: null, logo_url: "https://tldiagram.com/app/icons/react.png", technology_connectors: [], tags: ['frontend'], has_view: false, view_label: null },
+    { id: 202, view_id: 2, element_id: 6, position_x: 380, position_y: 200, name: 'Backend', kind: 'service', description: 'Core business logic API', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null },
+    { id: 203, view_id: 2, element_id: 7, position_x: 680, position_y: 200, name: 'PostgreSQL', kind: 'database', description: 'Primary relational database', technology: 'PostgreSQL', url: null, logo_url: "https://tldiagram.com/app/icons/postgresql.png", technology_connectors: [], tags: ['data'], has_view: false, view_label: null },
+    { id: 204, view_id: 2, element_id: 8, position_x: 680, position_y: 400, name: 'Redis Cache', kind: 'database', description: 'In-memory cache and session store', technology: 'Redis', url: null, logo_url: "https://tldiagram.com/app/icons/redis.png", technology_connectors: [], tags: ['data'], has_view: false, view_label: null },
+  ],
+}
+
+export const DEMO_CONNECTORS: ViewConnectors = {
+  1: [
+    { id: 1001, view_id: 1, source_element_id: 1, target_element_id: 2, label: 'Uses', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
+    { id: 1002, view_id: 1, source_element_id: 2, target_element_id: 3, label: 'API calls', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
+    { id: 1003, view_id: 1, source_element_id: 2, target_element_id: 4, label: 'Auth', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'bottom', target_handle: 'top', created_at: NOW, updated_at: NOW },
+    { id: 1004, view_id: 1, source_element_id: 2, target_element_id: 9, label: 'Serves via', description: null, relationship: null, direction: 'backward', style: 'bezier', url: null, source_handle: 'top', target_handle: 'bottom', created_at: NOW, updated_at: NOW },
+    { id: 1005, view_id: 1, source_element_id: 3, target_element_id: 10, label: 'Billing', description: null, relationship: null, direction: 'both', style: 'bezier', url: null, source_handle: 'top', target_handle: 'bottom', created_at: NOW, updated_at: NOW },
+  ],
+  2: [
+    { id: 2001, view_id: 2, source_element_id: 5, target_element_id: 6, label: 'HTTP/JSON', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
+    { id: 2002, view_id: 2, source_element_id: 6, target_element_id: 7, label: 'Reads / Writes', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
+    { id: 2003, view_id: 2, source_element_id: 6, target_element_id: 8, label: 'Cache', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'bottom', target_handle: 'left', created_at: NOW, updated_at: NOW },
+  ],
+}
+
+export const DEMO_LAYERS: Record<number, ViewLayer[]> = {
+  1: [],
+  2: [],
+}