@tldiagram/core-ui 1.90.1 → 1.92.0

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.d.ts

@@ -161,7 +161,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
         clientX: number;
         clientY: number;
     }) => void;
-    showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect") => void;
+    showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect", forceConnect?: boolean) => void;
     onNodesChange: (changes: NodeChange[]) => void;
     onEdgesChange: (changes: EdgeChange[]) => void;
     onNodeDragStart: NodeDragHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.90.1",
+  "version": "1.92.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -10,7 +10,6 @@ import Settings from './pages/Settings'
 import AppearanceSettings from './pages/AppearanceSettings'
 import { HeaderProvider, useHeader } from './components/HeaderContext'
 import TopMenuBar from './components/TopMenuBar'
-import DemoPage, { DemoNavigator } from './demo/DemoPage'
 import { ThemeProvider } from './context/ThemeContext'
 import { ACCENT_DEFAULT, BACKGROUND_DEFAULT, ELEMENT_DEFAULT, hexToRgba } from './constants/colors'
 import { platform } from './platform/local'
@@ -111,9 +110,6 @@ export default function App() {
           {platform.getRoutes({ user: null })}
 
           <Route path="/explore/shared/:token" element={<Box h="100vh" overflow="hidden"><HeaderProvider><SharedInfiniteZoom /></HeaderProvider></Box>} />
-          <Route path="/demo" element={<DemoNavigator />} />
-          <Route path="/demo/:id" element={<DemoPage />} />
-
           <Route
             element={
               <HeaderProvider>

package/src/index.ts

@@ -148,7 +148,6 @@ export * from './crossBranch/store'
 export * from './crossBranch/types'
 
 // ─── Demo ────────────────────────────────────────────────────────────────────
-export { default as DemoPage, DemoNavigator } from './demo/DemoPage'
 export * from './demo/viewEditor'
 
 // ─── Utilities ───────────────────────────────────────────────────────────────

package/src/pages/ViewEditor/components/EditorMenus.tsx

@@ -26,7 +26,7 @@ interface ConnectorContextMenuProps {
   onDelete: (edgeId: number) => void
 }
 
-export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = ({
+export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = React.memo(({
   menu,
   onEdit,
   onMoveSource,
@@ -68,14 +68,15 @@ export const ConnectorContextMenu: React.FC<ConnectorContextMenuProps> = ({
       </VStack>
     </Box>
   )
-}
+})
+ConnectorContextMenu.displayName = 'ConnectorContextMenu'
 
 interface CanvasContextMenuProps {
   menu: { x: number; y: number; flowX: number; flowY: number } | null
   onAddElement: (x: number, y: number) => void
 }
 
-export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({ menu, onAddElement }) => {
+export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = React.memo(({ menu, onAddElement }) => {
   const { canEdit, snapToGrid, setSnapToGrid } = useViewEditorContext()
   if (!menu) return null
 
@@ -109,4 +110,5 @@ export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({ menu, onAd
       </VStack>
     </Box>
   )
-}
+})
+CanvasContextMenu.displayName = 'CanvasContextMenu'

package/src/pages/ViewEditor/components/EditorOverlays.tsx

@@ -22,7 +22,7 @@ interface EditorOverlaysProps {
   rfNodes: RFNode[]
 }
 
-export const EditorOverlays: React.FC<EditorOverlaysProps> = ({
+export const EditorOverlays: React.FC<EditorOverlaysProps> = React.memo(({
   connectGhostPos,
   clickConnectMode,
   clickConnectCursorPos,
@@ -169,4 +169,5 @@ export const EditorOverlays: React.FC<EditorOverlaysProps> = ({
 
     </>
   )
-}
+})
+EditorOverlays.displayName = 'EditorOverlays'

package/src/pages/ViewEditor/components/EmptyCanvasState.tsx

@@ -6,7 +6,7 @@ interface EmptyCanvasStateProps {
   hasNodes: boolean
 }
 
-export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = ({ isMobile, hasNodes }) => {
+export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = React.memo(({ isMobile, hasNodes }) => {
   if (hasNodes) return null
 
   return (
@@ -39,4 +39,5 @@ export const EmptyCanvasState: React.FC<EmptyCanvasStateProps> = ({ isMobile, ha
       </Text>
     </Box>
   )
-}
+})
+EmptyCanvasState.displayName = 'EmptyCanvasState'

package/src/pages/ViewEditor/hooks/useCanvasInteractions.ts

@@ -36,7 +36,6 @@ import {
 } from '../../../utils/edgeDistribution'
 
 const SNAP_RADIUS = 75
-const CONTEXT_BOUNDARY_INSET = 36
 
 interface CanvasInteractionOptions {
   viewId: number | null
@@ -260,37 +259,29 @@ export function useCanvasInteractions({
   const openConnectorPanelRef = useRef(openConnectorPanel)
   openConnectorPanelRef.current = openConnectorPanel
 
-  const resolvePickerMode = useCallback((flowX: number, flowY: number, preferredMode: 'add' | 'connect') => {
+  const resolvePickerMode = useCallback((flowX: number, flowY: number, preferredMode: 'add' | 'connect', forceConnect = false) => {
     if (preferredMode !== 'connect') return preferredMode
+    if (forceConnect) return 'connect'
 
-    const mainNodes = rfNodesRef.current.filter((node) => node.type === 'elementNode')
-    if (mainNodes.length === 0) return preferredMode
-
-    let minX = Infinity
-    let minY = Infinity
-    let maxX = -Infinity
-    let maxY = -Infinity
-
-    for (const node of mainNodes) {
-      const width = node.width ?? 200
-      const height = node.height ?? 90
-      minX = Math.min(minX, node.position.x)
-      minY = Math.min(minY, node.position.y)
-      maxX = Math.max(maxX, node.position.x + width)
-      maxY = Math.max(maxY, node.position.y + height)
-    }
+    const boundaryNode = rfNodesRef.current.find((node) => node.type === 'ContextBoundaryElement')
+    if (!boundaryNode) return 'add'
+
+    const boundaryData = boundaryNode.data as { width?: number; height?: number } | undefined
+    const width = boundaryData?.width ?? boundaryNode.width
+    const height = boundaryData?.height ?? boundaryNode.height
+    if (width == null || height == null) return 'add'
 
     const withinBoundary =
-      flowX >= minX - CONTEXT_BOUNDARY_INSET &&
-      flowX <= maxX + CONTEXT_BOUNDARY_INSET &&
-      flowY >= minY - CONTEXT_BOUNDARY_INSET &&
-      flowY <= maxY + CONTEXT_BOUNDARY_INSET
+      flowX >= boundaryNode.position.x &&
+      flowX <= boundaryNode.position.x + width &&
+      flowY >= boundaryNode.position.y &&
+      flowY <= boundaryNode.position.y + height
 
     return withinBoundary ? 'add' : 'connect'
   }, [rfNodesRef])
 
   // ── showAddingElementAt ─────────────────────────────────────────────────────
-  const showAddingElementAt = useCallback((clientX: number, clientY: number, expandResults = false, mode: 'add' | 'connect' = 'add') => {
+  const showAddingElementAt = useCallback((clientX: number, clientY: number, expandResults = false, mode: 'add' | 'connect' = 'add', forceConnect = false) => {
     const rect = containerRef.current?.getBoundingClientRect()
     if (!rect) return
     const flowPos = screenToFlowPositionRef.current({ x: clientX, y: clientY })
@@ -305,7 +296,7 @@ export function useCanvasInteractions({
       ? Math.max(100, Math.min(px, rect.width - 450))
       : Math.max(120, Math.min(px, rect.width - 120))
     const y = Math.max(40, Math.min(py, rect.height - 250))
-    setAddingElementAt({ x, y, flowX, flowY, expandResults, mode: resolvePickerMode(flowX, flowY, mode) })
+    setAddingElementAt({ x, y, flowX, flowY, expandResults, mode: resolvePickerMode(flowX, flowY, mode, forceConnect) })
   }, [containerRef, snapToGrid, resolvePickerMode])
 
   // ── Inline element adder handlers ───────────────────────────────────────────
@@ -633,7 +624,7 @@ export function useCanvasInteractions({
     } else {
       setPendingConnectionSource(sourceElementId)
       suppressNextPaneClickRef.current = true
-      showAddingElementAt(clientX, clientY, true, 'connect')
+      showAddingElementAt(clientX, clientY, true, 'connect', 'shiftKey' in event && event.shiftKey)
     }
   }, [canEdit, setConnectors, showAddingElementAt, rfNodesRef, viewIdRef])
 
@@ -913,7 +904,7 @@ export function useCanvasInteractions({
       } else {
         setInteractionSourceId(null)
         setPendingConnectionSource(sourceId)
-        showAddingElementAt(e.clientX, e.clientY, true, 'connect')
+        showAddingElementAt(e.clientX, e.clientY, true, 'connect', e.shiftKey)
       }
       return
     }

package/src/pages/ViewEditor/hooks/useViewContextNeighbours.ts

@@ -112,7 +112,7 @@ export function useViewContextNeighbours({
     const centerY = (minY + maxY) / 2
     const boundaryW = maxX - minX
     const boundaryH = maxY - minY
-    const totalInset = 100
+    const totalInset = 200
     const padding = 180
     const radiusX = boundaryW / 2 + padding
     const radiusY = boundaryH / 2 + padding

package/src/pages/ViewEditor/index.tsx

@@ -13,7 +13,7 @@ import ReactFlow, {
   useReactFlow,
   applyNodeChanges,
 } from 'reactflow'
-import type { EdgeMarker as RFEdgeMarker, Node as RFNode, NodeChange } from 'reactflow'
+import type { Edge as RFEdge, EdgeMarker as RFEdgeMarker, Node as RFNode, NodeChange } from 'reactflow'
 import 'reactflow/dist/style.css'
 import { toPng, toSvg } from 'html-to-image'
 import {
@@ -708,64 +708,105 @@ function ViewEditorInner({
   const contextNodeIdsRef = useRef<Set<string>>(new Set())
   useEffect(() => {
     contextNodeIdsRef.current = new Set(contextNodes.map((n) => n.id))
-    setLiveContextNodes((prev) =>
-      contextNodes.map((n) => {
-        const existing = prev.find((p) => p.id === n.id)
+    setLiveContextNodes((prev) => {
+      const prevById = new Map(prev.map((p) => [p.id, p]))
+      return contextNodes.map((n) => {
+        const existing = prevById.get(n.id)
         if (existing?.width != null && existing?.height != null) {
           return { ...n, width: existing.width, height: existing.height }
         }
         return n
       })
-    )
+    })
   }, [contextNodes])
 
+  const fadedNodeCacheRef = useRef<WeakMap<RFNode, RFNode>>(new WeakMap())
+  const fadedEdgeCacheRef = useRef<WeakMap<RFEdge, RFEdge>>(new WeakMap())
+
   const flowNodes = useMemo(() => {
-    const allNodes = [...liveContextNodes, ...rfNodes]
-    const selectedNodeIds = new Set(allNodes.filter((n) => n.selected).map((n) => n.id))
+    const allNodes = liveContextNodes.length === 0
+      ? rfNodes
+      : rfNodes.length === 0
+        ? liveContextNodes
+        : [...liveContextNodes, ...rfNodes]
+
+    let hasNodeSel = false
+    const selectedNodeIds = new Set<string>()
+    for (const n of allNodes) {
+      if (n.selected) { selectedNodeIds.add(n.id); hasNodeSel = true }
+    }
+
+    const allEdges = contextConnectors.length === 0
+      ? rfEdges
+      : rfEdges.length === 0
+        ? contextConnectors
+        : [...contextConnectors, ...rfEdges]
 
-    const allEdges = [...contextConnectors, ...rfEdges]
     const selectedEdgeEndPoints = new Set<string>()
-    allEdges.forEach((e) => {
+    let hasEdgeSel = false
+    for (const e of allEdges) {
       if (e.selected) {
         selectedEdgeEndPoints.add(e.source)
         selectedEdgeEndPoints.add(e.target)
+        hasEdgeSel = true
       }
-    })
+    }
 
     const neighborNodeIds = new Set<string>()
-    if (selectedNodeIds.size > 0) {
-      allEdges.forEach((e) => {
+    if (hasNodeSel) {
+      for (const e of allEdges) {
         if (selectedNodeIds.has(e.source)) neighborNodeIds.add(e.target)
         if (selectedNodeIds.has(e.target)) neighborNodeIds.add(e.source)
-      })
+      }
     }
 
-    if (selectedNodeIds.size === 0 && selectedEdgeEndPoints.size === 0) return allNodes
+    if (!hasNodeSel && !hasEdgeSel) return allNodes
 
+    const cache = fadedNodeCacheRef.current
     return allNodes.map((n) => {
       const isHighlighted = selectedNodeIds.has(n.id) || selectedEdgeEndPoints.has(n.id) || neighborNodeIds.has(n.id)
       if (isHighlighted) return n
-      return {
+      const cached = cache.get(n)
+      if (cached) return cached
+      const faded: RFNode = {
         ...n,
         style: { ...n.style, opacity: (Number(n.style?.opacity ?? 1)) * 0.2 },
       }
+      cache.set(n, faded)
+      return faded
     })
   }, [liveContextNodes, rfNodes, contextConnectors, rfEdges])
 
   const flowEdges = useMemo(() => {
-    const allEdges = [...contextConnectors, ...rfEdges]
-    const allNodes = [...liveContextNodes, ...rfNodes]
-    const selectedNodeIds = new Set(allNodes.filter((n) => n.selected).map((n) => n.id))
-    const hasEdgeSelection = allEdges.some((e) => e.selected)
+    const allEdges = contextConnectors.length === 0
+      ? rfEdges
+      : rfEdges.length === 0
+        ? contextConnectors
+        : [...contextConnectors, ...rfEdges]
+    const allNodes = liveContextNodes.length === 0
+      ? rfNodes
+      : rfNodes.length === 0
+        ? liveContextNodes
+        : [...liveContextNodes, ...rfNodes]
+
+    const selectedNodeIds = new Set<string>()
+    let hasNodeSel = false
+    for (const n of allNodes) {
+      if (n.selected) { selectedNodeIds.add(n.id); hasNodeSel = true }
+    }
+    let hasEdgeSel = false
+    for (const e of allEdges) { if (e.selected) { hasEdgeSel = true; break } }
 
-    if (selectedNodeIds.size === 0 && !hasEdgeSelection) return allEdges
+    if (!hasNodeSel && !hasEdgeSel) return allEdges
 
+    const cache = fadedEdgeCacheRef.current
     return allEdges.map((e) => {
       const isHighlighted = e.selected || selectedNodeIds.has(e.source) || selectedNodeIds.has(e.target)
       if (isHighlighted) return e
-
+      const cached = cache.get(e)
+      if (cached) return cached
       const multiplier = 0.2
-      return {
+      const faded: RFEdge = {
         ...e,
         style: { ...e.style, opacity: (Number(e.style?.opacity ?? 0.8)) * multiplier },
         labelStyle: e.labelStyle ? { ...e.labelStyle, opacity: (Number(e.labelStyle.opacity ?? 1)) * multiplier } : undefined,
@@ -773,6 +814,8 @@ function ViewEditorInner({
         markerEnd: fadeMarker(e.markerEnd, multiplier),
         markerStart: fadeMarker(e.markerStart, multiplier),
       }
+      cache.set(e, faded)
+      return faded
     })
   }, [contextConnectors, rfEdges, liveContextNodes, rfNodes])
 
@@ -870,13 +913,18 @@ function ViewEditorInner({
       [-vw * VIEW_EDITOR_EMPTY_EXTENT_RATIO, -vh * VIEW_EDITOR_EMPTY_EXTENT_RATIO],
       [vw * VIEW_EDITOR_EMPTY_EXTENT_RATIO, vh * VIEW_EDITOR_EMPTY_EXTENT_RATIO],
     ]
-    if (flowNodes.length === 0 && drawingPaths.length === 0) {
+    const boundsNodes = liveContextNodes.length === 0
+      ? rfNodes
+      : rfNodes.length === 0
+        ? liveContextNodes
+        : [...liveContextNodes, ...rfNodes]
+    if (boundsNodes.length === 0 && drawingPaths.length === 0) {
       setComputedMinZoom((prev) => prev === VIEW_EDITOR_MIN_ZOOM_FLOOR ? prev : VIEW_EDITOR_MIN_ZOOM_FLOOR)
       setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, emptyExtent) ? prev : emptyExtent)
       return
     }
     let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
-    for (const n of flowNodes) {
+    for (const n of boundsNodes) {
       minX = Math.min(minX, n.position.x); minY = Math.min(minY, n.position.y)
       maxX = Math.max(maxX, n.position.x + (n.width ?? 180)); maxY = Math.max(maxY, n.position.y + (n.height ?? 80))
     }
@@ -903,7 +951,7 @@ function ViewEditorInner({
     const cx = (minX + maxX) / 2; const cy = (minY + maxY) / 2
     const nextTranslateExtent: [[number, number], [number, number]] = [[cx - spanX / 2, cy - spanY / 2], [cx + spanX / 2, cy + spanY / 2]]
     setComputedTranslateExtent((prev) => areTranslateExtentsEqual(prev, nextTranslateExtent) ? prev : nextTranslateExtent)
-  }, [flowNodes, drawingPaths])
+  }, [rfNodes, liveContextNodes, drawingPaths])
 
   // ── Keyboard shortcuts for drawing ────────────────────────────────────────
   useEffect(() => {
@@ -951,7 +999,27 @@ function ViewEditorInner({
   // ── Share ──────────────────────────────────────────────────────────────────
   const onShare = useCallback(() => {}, [])
 
+  const handleExplorerHoverZoom = useCallback((elementId: number | null, type: 'in' | 'out' | null) => {
+    setHoveredZoom(type && elementId ? { elementId, type } : null)
+  }, [])
+  const handleToggleExplorer = useCallback(() => setIsExplorerOpen((v) => !v), [])
+  const handleCloseLibrary = useCallback(() => setLibraryOpen(false), [])
+  const handleCreateNewLibraryRef = useRef<() => void>(() => {})
+  const handleCreateNewLibrary = useCallback(() => handleCreateNewLibraryRef.current(), [])
+  const handleFocusModeChange = useCallback((v: boolean) => setCrossBranchEnabled(!v), [setCrossBranchEnabled])
+  const handleOpenExport = useCallback(() => exportModal.onOpen(), [exportModal])
+  const handleConnectorSave = useCallback((updated: Connector) => {
+    upsertConnectorGraphSnapshot(updated)
+    setConnectors((prev) => prev.map((c) => (c.id === updated.id ? updated : c)))
+  }, [setConnectors])
+  const handleConnectorDeleteInPanel = useCallback((edgeId: number) => {
+    if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
+    setConnectors((prev) => prev.filter((c) => c.id !== edgeId))
+  }, [setConnectors, viewId])
+  const handleViewSave = useCallback((updated: ViewTreeNode) => setView(updated), [setView])
+
   // ── Library helpers ────────────────────────────────────────────────────────
+  // Assigned below; referenced by memoized callbacks (e.g. ElementLibrary onCreateNew).
   const handleAddElementAtCenter = useCallback((forceCenter = false) => {
     if (!canEdit) return
     const rect = containerRef.current?.getBoundingClientRect()
@@ -965,6 +1033,7 @@ function ViewEditorInner({
     }
     showAddingElementAt(cx, cy, true)
   }, [canEdit, showAddingElementAt, lastMousePosRef])
+  handleCreateNewLibraryRef.current = () => handleAddElementAtCenter(true)
 
   const handleTapAdd = useCallback(async (obj: WorkspaceElement) => {
     if (!canEdit || !viewId || existingElementIds.has(obj.id)) return
@@ -1177,8 +1246,8 @@ function ViewEditorInner({
               treeNodes={treeData}
               linksMap={linksMap} viewElements={viewElements}
               onNavigate={canvas.stableOnNavigateToView}
-              onHoverZoom={(elementId, type) => setHoveredZoom(type && elementId ? { elementId, type } : null)}
-              isOpen={isExplorerOpen} onToggle={() => setIsExplorerOpen((v) => !v)}
+              onHoverZoom={handleExplorerHoverZoom}
+              isOpen={isExplorerOpen} onToggle={handleToggleExplorer}
               isMobile={isMobileLayout}
               activeTags={activeTags}
               setActiveTags={handleSetActiveTags}
@@ -1288,9 +1357,9 @@ function ViewEditorInner({
               hasDrawingPaths={drawingPaths.length > 0} drawingVisible={drawingVisible} setDrawingVisible={setDrawingVisible}
               extrasOpen={extrasOpen} setExtrasOpen={setExtrasOpen}
               focusMode={!crossBranchSettings.enabled}
-              onFocusModeChange={(v) => setCrossBranchEnabled(!v)}
+              onFocusModeChange={handleFocusModeChange}
               disableImportExport={disableImportExport}
-              onImport={importModal.onOpen} onExport={() => exportModal.onOpen()} onShare={onShare}
+              onImport={importModal.onOpen} onExport={handleOpenExport} onShare={onShare}
               allTags={availableTags}
               layers={layers}
               tagColors={tagColors}
@@ -1310,8 +1379,8 @@ function ViewEditorInner({
         <ElementLibrary
           existingElementIds={existingElementIds}
           existingElements={existingElements}
-          onCreateNew={() => handleAddElementAtCenter(true)} refresh={libraryRefresh}
-          isOpen={libraryOpen} onClose={() => setLibraryOpen(false)}
+          onCreateNew={handleCreateNewLibrary} refresh={libraryRefresh}
+          isOpen={libraryOpen} onClose={handleCloseLibrary}
           onTapAdd={canEdit ? handleTapAdd : undefined}
           onFindElement={handleFindElement}
           onTouchDrop={canEdit ? handleTouchDrop : undefined}
@@ -1334,14 +1403,8 @@ function ViewEditorInner({
         <ConnectorPanel
           isOpen={connectorPanel.isOpen} onClose={connectorPanel.onClose} connector={selectedEdge}
           orgId={''}
-          onSave={(updated: Connector) => {
-            upsertConnectorGraphSnapshot(updated)
-            setConnectors((prev) => prev.map((connector) => (connector.id === updated.id ? updated : connector)))
-          }} autoSave
-          onDelete={(edgeId: number) => {
-            if (viewId != null) removeConnectorGraphSnapshot(viewId, edgeId)
-            setConnectors((prev) => prev.filter((connector) => connector.id !== edgeId))
-          }}
+          onSave={handleConnectorSave} autoSave
+          onDelete={handleConnectorDeleteInPanel}
           hasBackdrop={isMobileLayout}
           connectorPanelAfterContentSlot={connectorPanelAfterContentSlot}
         />
@@ -1355,7 +1418,7 @@ function ViewEditorInner({
         <ViewPanel
           isOpen={viewDetails.isOpen} onClose={viewDetails.onClose}
           view={view as ViewTreeNode}
-          onSave={(updated) => setView(updated)} hasBackdrop={isMobileLayout}
+          onSave={handleViewSave} hasBackdrop={isMobileLayout}
         />
 
         <ExportModal

package/dist/demo/DemoPage.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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.
- */
-export declare function DemoNavigator(): null;
-export default function DemoPage(): import("react/jsx-runtime").JSX.Element;

package/dist/demo/seed.d.ts

@@ -1,9 +0,0 @@
-import type { LibraryElement, PlacedElement, Connector, ViewTreeNode, ViewLayer } from '../types';
-export declare const DEMO_ELEMENTS: LibraryElement[];
-export declare const DEMO_VIEWS: ViewTreeNode[];
-type ViewPlacements = Record<number, PlacedElement[]>;
-type ViewConnectors = Record<number, Connector[]>;
-export declare const DEMO_PLACEMENTS: ViewPlacements;
-export declare const DEMO_CONNECTORS: ViewConnectors;
-export declare const DEMO_LAYERS: Record<number, ViewLayer[]>;
-export {};

package/dist/demo/store.d.ts

@@ -1,137 +0,0 @@
-/**
- * localStorage-backed store for the demo mode.
- * Implements the subset of the `api` interface used by ViewEditor and its hooks.
- * Data is scoped under the `diag:demo:*` key namespace to avoid colliding
- * with a real logged-in session.
- */
-import type { LibraryElement, PlacedElement, Connector, ViewTreeNode, ViewLayer, Tag, ElementPlacement, ExploreData } from '../types';
-export declare function initDemoStore(): void;
-export declare function resetDemoStore(): void;
-export declare const demoApi: {
-    explore: {
-        load: () => Promise<ExploreData>;
-    };
-    elements: {
-        list: (_params?: unknown) => Promise<LibraryElement[]>;
-        get: (id: number) => Promise<LibraryElement>;
-        create: (data: Partial<LibraryElement>) => Promise<LibraryElement>;
-        update: (id: number, data: Partial<LibraryElement>) => Promise<LibraryElement>;
-        delete: (_orgId: string, id: number) => Promise<void>;
-        placements: (id: number) => Promise<ElementPlacement[]>;
-    };
-    workspace: {
-        orgs: {
-            tagColors: {
-                list: () => Promise<Record<string, Tag>>;
-                set: (tag: string, color: string, description?: string) => Promise<void>;
-            };
-        };
-        views: {
-            list: () => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }[]>;
-            get: (id: number) => Promise<ViewTreeNode>;
-            content: (id: number) => Promise<{
-                placements: PlacedElement[];
-                connectors: Connector[];
-            }>;
-            tree: () => Promise<ViewTreeNode[]>;
-            create: (data: {
-                name: string;
-                label?: string;
-                parent_view_id?: number | null;
-            }) => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }>;
-            update: (id: number, data: {
-                name: string;
-                label?: string;
-            }) => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }>;
-            delete: (_orgId: string, id: number) => Promise<void>;
-            placements: {
-                list: (viewId: number) => Promise<ElementPlacement[]>;
-                add: (viewId: number, elementId: number, x?: number, y?: number) => Promise<ElementPlacement>;
-                updatePosition: (viewId: number, elementId: number, x: number, y: number) => Promise<void>;
-                remove: (viewId: number, elementId: number) => Promise<void>;
-            };
-            layers: {
-                list: (viewId: number) => Promise<ViewLayer[]>;
-                create: (viewId: number, data: {
-                    name: string;
-                    tags: string[];
-                    color?: string;
-                }) => Promise<ViewLayer>;
-                update: (viewId: number, layerId: number, data: Partial<ViewLayer>) => Promise<ViewLayer>;
-                delete: (viewId: number, layerId: number) => Promise<void>;
-            };
-            reactions: {
-                list: (_viewId: number) => Promise<never[]>;
-            };
-            threads: {
-                listForElement: () => Promise<never[]>;
-                listForConnector: () => Promise<never[]>;
-                createForElement: () => Promise<never>;
-                createForConnector: () => Promise<never>;
-                addComment: () => Promise<never>;
-                resolve: () => Promise<void>;
-            };
-            thumbnail: (_id: number) => Promise<null>;
-            rename: (id: number, name: string) => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }>;
-            setLevel: () => Promise<void>;
-            reparent: () => Promise<never>;
-        };
-        connectors: {
-            list: (viewId: number) => Promise<Connector[]>;
-            create: (viewId: 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>;
-            update: (viewId: number, connectorId: number, data: Partial<Connector>) => Promise<Connector>;
-            delete: (_orgId: string, connectorId: number) => Promise<void>;
-        };
-        elements: {
-            list: (params?: unknown) => Promise<LibraryElement[]>;
-            get: (id: number) => Promise<LibraryElement>;
-            create: (data: Partial<LibraryElement>) => Promise<LibraryElement>;
-            update: (id: number, data: Partial<LibraryElement>) => Promise<LibraryElement>;
-            delete: (orgId: string, id: number) => Promise<void>;
-            placements: (id: number) => Promise<ElementPlacement[]>;
-        };
-    };
-};