@tldiagram/core-ui 1.95.0 → 2.0.0

package/dist/pages/InfiniteZoom.d.ts

@@ -5,6 +5,7 @@ interface Props {
 }
 export interface InfiniteZoomHandle {
     focusDiagram(viewId: number): boolean;
+    focusElement(viewId: number, elementId: number): boolean;
     setCameraFrame(frame: ZUICameraFrame): boolean;
 }
 declare const InfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;

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

@@ -54,6 +54,11 @@ interface CanvasInteractionOptions {
     handleElementDeleted: (id: number) => void;
     handleElementPermanentlyDeleted: (id: number) => void;
     handleConnectorDeleted: (id: number) => void;
+    onPlacementMoved?: (before: PlacedElement, after: PlacedElement) => void;
+    onPlacementRemoved?: (placement: PlacedElement) => void;
+    onConnectorUpdated?: (before: Connector, after: Connector) => void;
+    onConnectorDeleted?: (connector: Connector) => void;
+    onUnsupportedMutation?: () => void;
     handleUpdateTags: (elementId: number, tags: string[]) => Promise<void>;
     drawingCanvasRef: React.MutableRefObject<DrawingCanvasHandle | null>;
     snapToGrid?: boolean;
@@ -85,7 +90,7 @@ type InteractionStartOptions = {
     clientX?: number;
     clientY?: number;
 };
-export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements: _setViewElements, setConnectors: _setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedConnector, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
+export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _drawingMode, isMobileLayout: _isMobileLayout, rfNodesRef, rfEdgesRef: _rfEdgesRef, viewElementsRef, viewIdRef, incomingLinksRef, treeDataRef, navigateRef, containerRef, interactionSourceIdRef, hoveredZoomRef, hoverPanLockedUntilRef, setViewElements: _setViewElements, setConnectors: _setConnectors, setRfNodes, setRfEdges, setLinksMap, setParentLinksMap: _setParentLinksMap, setHoveredZoom, refreshGrid, refreshElements, stableOnConnectTo, existingElementIds, linksMapRef, parentLinksMapRef, openElementPanel: _openElementPanel, closeElementPanel: closeElementPanel, openConnectorPanel: openConnectorPanel, closeConnectorPanel: closeConnectorPanel, selectedElement, selectedConnector, connectors, layers, setSelectedElement, setSelectedEdge, setSelectedProxyConnectorDetails, openProxyConnectorPanel, closeProxyConnectorPanel, handleElementDeleted, handleElementPermanentlyDeleted, handleConnectorDeleted, onPlacementMoved, onPlacementRemoved, onConnectorUpdated, onConnectorDeleted, onUnsupportedMutation, handleUpdateTags, drawingCanvasRef, snapToGrid, onMoveStateChange, }: CanvasInteractionOptions): {
     canvasMenu: {
         x: number;
         y: number;

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

@@ -16,5 +16,7 @@ export declare function useViewContextNeighbours({ snapshot, settings, viewId, v
     contextNodes: RFNode[];
     contextConnectors: RFEdge[];
     proxyConnectorDetailsByKey: Record<string, ProxyConnectorDetails>;
+    hiddenProxyCountsByPair: Record<string, number>;
+    hiddenProxyDetailsByPair: Record<string, ProxyConnectorDetails>;
 };
 export {};

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

@@ -1,4 +1,5 @@
 import type { ViewTreeNode, PlacedElement, LibraryElement, Connector, Tag } from '../../../types';
+import type { WorkspaceVersionFollowTarget, WorkspaceVersionPreview } from '../../../context/WorkspaceVersionContext';
 interface ViewDataOptions {
     viewId: number | null;
     interactionSourceId: number | null;
@@ -13,6 +14,8 @@ interface ViewDataOptions {
     hoveredLayerTags: string[] | null;
     hoveredLayerColor: string | null;
     tagColors: Record<string, Tag>;
+    versionPreview?: WorkspaceVersionPreview | null;
+    versionFollowTarget?: WorkspaceVersionFollowTarget | null;
     stableOnZoomIn: (elementId: number) => Promise<void>;
     stableOnZoomOut: (elementId: number) => Promise<void>;
     stableOnNavigateToView: (id: number) => void;
@@ -38,7 +41,7 @@ interface ViewDataOptions {
         type: 'in' | 'out' | null;
     } | null>;
 }
-export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedConnector, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
+export declare function useViewData({ viewId, interactionSourceId, clickConnectMode, selectedConnector, activeTags, hiddenLayerTags, hoveredLayerTags, hoveredLayerColor, tagColors, versionPreview, versionFollowTarget, stableOnZoomIn, stableOnZoomOut, stableOnNavigateToView, stableOnSelect, stableOnOpenCodePreview, stableOnInteractionStart, stableOnConnectTo, stableOnStartHandleReconnect, stableOnRemoveElement, stableOnHoverZoom, hoveredZoomRef, }: ViewDataOptions): {
     view: ViewTreeNode | null | undefined;
     setView: (view: ViewTreeNode | null | undefined) => void;
     viewElements: PlacedElement[];
@@ -70,6 +73,5 @@ export declare function useViewData({ viewId, interactionSourceId, clickConnectM
     handleElementDeleted: (deletedId: number) => void;
     handleElementPermanentlyDeleted: (deletedId: number) => void;
     handleElementSaved: (saved: LibraryElement) => void;
-    setAllElements: (next: import("../../../store/useStore").StoreSetter<LibraryElement[]>) => void;
 };
 export {};

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

@@ -0,0 +1,13 @@
+export interface ViewEditHistoryAction {
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
+}
+export declare function useViewEditHistory(): {
+    canUndo: boolean;
+    canRedo: boolean;
+    isApplyingHistory: boolean;
+    pushAction: (action: ViewEditHistoryAction) => void;
+    clearHistory: () => void;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
+};

package/dist/pages/viewsJumpSearch.d.ts

@@ -0,0 +1,22 @@
+import type { ExploreData, ViewTreeNode } from '../types';
+export type JumpViewMode = 'explore' | 'hierarchy';
+export type JumpSearchResult = {
+    type: 'view';
+    key: string;
+    name: string;
+    viewId: number;
+    level: number;
+    levelLabel: string | null;
+} | {
+    type: 'element';
+    key: string;
+    name: string;
+    viewId: number;
+    viewName: string;
+    elementId: number;
+    kind: string | null;
+};
+export declare function flattenTree(roots: ViewTreeNode[]): ViewTreeNode[];
+export declare function jumpResultSubtitle(result: JumpSearchResult): string;
+export declare function jumpResultActionLabel(view: JumpViewMode): string;
+export declare function buildJumpSearchResults(term: string, flatTree: ViewTreeNode[], exploreData: ExploreData | null): JumpSearchResult[];

package/dist/pages/viewsJumpSearch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/store/useStore.d.ts

@@ -52,6 +52,7 @@ export type CanvasStoreState = ViewEditorUiState & {
     removeElementPlacement: (elementId: number) => void;
     removeElementEverywhere: (elementId: number) => void;
     mergeSavedElement: (saved: LibraryElement) => void;
+    mergeElementsInto: (sourceId: number, survivor: LibraryElement) => void;
     upsertConnector: (connector: Connector) => void;
     replaceConnector: (connector: Connector) => void;
     removeConnector: (connectorId: number) => void;
@@ -70,6 +71,8 @@ export declare function buildElementLibraryItems(allElements: LibraryElement[],
 export declare function mergeSavedElementIntoPlacements(elements: PlacedElement[], saved: LibraryElement): PlacedElement[];
 export declare function upsertConnectorInList(connectors: Connector[], connector: Connector): Connector[];
 export declare function removeConnectorFromList(connectors: Connector[], connectorId: number): Connector[];
+export declare function reassignConnectorsToElement(connectors: Connector[], fromId: number, toId: number): Connector[];
+export declare function mergeElementReplacements(elements: PlacedElement[], sourceId: number, survivor: LibraryElement): PlacedElement[];
 export declare const useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<CanvasStoreState>>;
 export declare const canvasSelectors: {
     existingElementIds: typeof selectExistingElementIds;

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export interface TechnologyConnector {
     slug?: string;
     label: string;
     is_primary_icon?: boolean;
+    isPrimaryIcon?: boolean;
 }
 export interface TechnologyCatalogItem {
     iconUrl: string;
@@ -75,6 +76,14 @@ export interface PlacedElement {
     has_view: boolean;
     view_label: string | null;
 }
+export interface VisibilityOverride {
+    view_id: number;
+    resource_type: 'element' | 'connector';
+    resource_id: number;
+    level_delta: number;
+    created_at?: string;
+    updated_at?: string;
+}
 export interface NavigationConnector {
     id: number;
     element_id: number | null;

package/dist/utils/elementIcon.d.ts

@@ -0,0 +1,2 @@
+import type { TechnologyConnector } from '../types';
+export declare function resolveElementIconUrl(logoUrl: string | null | undefined, technologyConnectors: TechnologyConnector[] | null | undefined): string | null;

package/dist/utils/elementIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/sourceEditor.d.ts

@@ -0,0 +1,7 @@
+import type { SourceEditor } from '../api/client';
+export declare function getSourceEditor(): SourceEditor;
+export declare function setSourceEditor(value: SourceEditor): void;
+export declare function useSourceEditor(): {
+    editor: SourceEditor;
+    setEditor: (value: SourceEditor) => void;
+};

package/dist/utils/watchDiffSummary.d.ts

@@ -0,0 +1,34 @@
+import type { ExploreData } from '../types';
+import type { WatchDiff } from '../api/client';
+export type WatchChangeType = 'added' | 'updated' | 'deleted' | 'initialized';
+export interface WatchResourceStat {
+    added: number;
+    updated: number;
+    deleted: number;
+    initialized: number;
+    addedLines: number;
+    removedLines: number;
+}
+export interface WatchDiffLocation {
+    key: string;
+    label: string;
+    resourceType: string;
+    resourceId?: number;
+    changeType: WatchChangeType;
+    summary?: string;
+    addedLines: number;
+    removedLines: number;
+    viewId: number;
+    viewName: string;
+}
+export interface WatchDiffSummary {
+    files: WatchResourceStat;
+    elements: WatchResourceStat;
+    connectors: WatchResourceStat;
+}
+export declare function normalizeWatchChangeType(value: string): WatchChangeType;
+export declare function emptyWatchResourceStat(): WatchResourceStat;
+export declare function summarizeWatchDiffs(diffs: WatchDiff[] | null | undefined): WatchDiffSummary;
+export declare function formatStatLine(label: string, stat: WatchResourceStat): string;
+export declare function formatTldStatLine(summary: WatchDiffSummary): string;
+export declare function buildWatchDiffLocations(data: ExploreData, diffs: WatchDiff[] | null | undefined): WatchDiffLocation[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.95.0",
+  "version": "2.0.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.11.0-20260419172603-8192c519478e.1",
+    "@buf/tldiagramcom_diagram.bufbuild_es": "^2.12.0-20260503002426-45e3166b5ec1.1",
     "@bufbuild/protobuf": "^2.11.0",
     "esbuild": "^0.25.12",
     "zustand": "^5.0.12"

package/src/App.tsx

@@ -10,7 +10,9 @@ import Settings from './pages/Settings'
 import AppearanceSettings from './pages/AppearanceSettings'
 import { HeaderProvider, useHeader } from './components/HeaderContext'
 import TopMenuBar from './components/TopMenuBar'
+import WorkspacePanel from './components/WorkspacePanel'
 import { ThemeProvider } from './context/ThemeContext'
+import { WorkspaceVersionProvider } from './context/WorkspaceVersionContext'
 import { ACCENT_DEFAULT, BACKGROUND_DEFAULT, ELEMENT_DEFAULT, hexToRgba } from './constants/colors'
 import { platform } from './platform/local'
 
@@ -20,8 +22,8 @@ function AppLayout() {
   const hideMobileBar = header && typeof header === 'object' && 'hideMobileBar' in header ? !!(header as { hideMobileBar?: boolean }).hideMobileBar : false
 
   return (
-    <Box h="100vh" display="flex" flexDirection="column" bg="var(--bg-canvas)" overflow="hidden">
-      <TopMenuBar hideMobileBar={hideMobileBar}>
+    <Box h="100dvh" display="flex" flexDirection="column" bg="var(--bg-canvas)" overflow="hidden">
+      <TopMenuBar hideMobileBar={hideMobileBar} rightSlot={<WorkspacePanel />}>
         {node}
       </TopMenuBar>
       <Box
@@ -29,7 +31,7 @@ function AppLayout() {
         mb={{ base: 'var(--topbar-content-gap)', sm: '0px' }}
         flexShrink={0}
       />
-      <Box flex="1" overflow="hidden" position="relative">
+      <Box flex="1" minH={0} overflow="hidden" position="relative">
         <Outlet />
       </Box>
     </Box>
@@ -77,7 +79,7 @@ function HomeRedirect() {
 
   if (loading) {
     return (
-      <Center h="100vh">
+      <Center h="100%">
         <Spinner size="xl" />
       </Center>
     )
@@ -97,7 +99,7 @@ export default function App() {
 
   if (!ready) {
     return (
-      <Center h="100vh">
+      <Center h="100dvh">
         <Spinner size="xl" />
       </Center>
     )
@@ -105,15 +107,17 @@ export default function App() {
 
   return (
     <ThemeProvider>
-      <Box minH="100vh" bg="var(--bg-canvas)">
+      <Box h="100dvh" bg="var(--bg-canvas)" overflow="hidden">
         <Routes>
           {platform.getRoutes({ user: null })}
 
-          <Route path="/explore/shared/:token" element={<Box h="100vh" overflow="hidden"><HeaderProvider><SharedInfiniteZoom /></HeaderProvider></Box>} />
+          <Route path="/explore/shared/:token" element={<Box h="100dvh" overflow="hidden"><HeaderProvider><WorkspaceVersionProvider><SharedInfiniteZoom /></WorkspaceVersionProvider></HeaderProvider></Box>} />
           <Route
             element={
               <HeaderProvider>
-                <AppLayout />
+                <WorkspaceVersionProvider>
+                  <AppLayout />
+                </WorkspaceVersionProvider>
               </HeaderProvider>
             }
           >