@tldiagram/core-ui 1.87.0

package/dist/components/ZUI/types.d.ts

@@ -0,0 +1,140 @@
+import type { ProxyConnectorDetails } from '../../crossBranch/types';
+/** Pan + zoom state for the canvas viewport. */
+export interface ZUIViewState {
+    /** World-space X of the canvas origin (panX). */
+    x: number;
+    /** World-space Y of the canvas origin (panY). */
+    y: number;
+    /** Current zoom multiplier (1 = 1 world-pixel per screen-pixel). */
+    zoom: number;
+}
+/**
+ * A node in the global world-space layout.
+ *
+ * Root-level nodes are placed directly from diagram coordinates.
+ * Each node that has a linked child diagram stores that diagram's
+ * elements in `children`, expressed in child-local (diagram-editor)
+ * coordinates.  The `childScale` and `childOffset*` values map those
+ * local coords into the node's own NODE_W × NODE_H world footprint.
+ */
+export interface LayoutNode {
+    /** Unique stable id: "d{diagramId}-o{elementId}" */
+    id: string;
+    elementId: number;
+    diagramId: number;
+    worldX: number;
+    worldY: number;
+    /** Fixed: always NODE_W. */
+    worldW: number;
+    /** Fixed: always NODE_H. */
+    worldH: number;
+    label: string;
+    /** One of: person | system | container | component | database | queue | api | service | external */
+    type: string;
+    logoUrl: string | null;
+    description: string | null;
+    technology: string | null;
+    tags: string[];
+    isCircular?: boolean;
+    ancestorElementIds: number[];
+    pathElementIds: number[];
+    linkedDiagramId?: number;
+    linkedDiagramLabel?: string;
+    /** True when this node's children come from a portal (diagram-to-diagram) link, not an element-child link. */
+    isPortal?: boolean;
+    /**
+     * Child nodes in CHILD-LOCAL coordinates (same coord space as the
+     * diagram editor).  To draw them, apply:
+     *   ctx.translate(worldX, worldY)
+     *   ctx.scale(childScale, childScale)
+     *   ctx.translate(-childOffsetX, -childOffsetY)
+     *   …draw each child at child.worldX/worldY…
+     */
+    children: LayoutNode[];
+    /** Scale factor: child-local → node world-space. */
+    childScale: number;
+    /** BBox minX used to align children to top-left of node. */
+    childOffsetX: number;
+    /** BBox minY used to align children to top-left of node. */
+    childOffsetY: number;
+    edgesOut: Array<{
+        /** LayoutNode id of the target. */
+        targetId: string;
+        label: string;
+        direction: 'forward' | 'backward' | 'both' | 'bidirectional' | string;
+        sourceHandle: string | null;
+        targetHandle: string | null;
+        type: string;
+    }>;
+}
+/** Top-level group wrapping one root diagram. */
+export interface DiagramGroupLayout {
+    /** True when this group is a portal-linked target diagram (not a hierarchy root). */
+    isPortal?: boolean;
+    diagramId: number;
+    label: string;
+    description: string | null;
+    level: number;
+    levelLabel: string | null;
+    /** Top-left of this diagram in world space. */
+    worldX: number;
+    worldY: number;
+    worldW: number;
+    worldH: number;
+    /** Dimensions of the main diagram box (excluding portals below). */
+    diagramW: number;
+    diagramH: number;
+    diagramX: number;
+    diagramY: number;
+    nodes: LayoutNode[];
+    /** Edges whose both endpoints are in this diagram. */
+    edges: Array<{
+        sourceId: string;
+        targetId: string;
+        label: string;
+        direction: string;
+        sourceHandle: string | null;
+        targetHandle: string | null;
+        type: string;
+    }>;
+}
+/** Bounding box in world space. */
+export interface BBox {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/** Top-level result of the layout pass. */
+export interface ZUILayout {
+    groups: DiagramGroupLayout[];
+    /** Bounding box of the whole layout in world space. */
+    bbox: BBox;
+}
+export type HoveredItem = {
+    type: 'node';
+    data: LayoutNode;
+    absX: number;
+    absY: number;
+    absW: number;
+    absH: number;
+} | {
+    type: 'edge';
+    data: {
+        sourceId: string;
+        targetId: string;
+        label: string;
+        diagramId: number;
+        sourceObjId?: number;
+        targetObjId?: number;
+        targetDiagId?: number;
+        isPortalConn?: boolean;
+        isProxy?: boolean;
+        details?: ProxyConnectorDetails;
+    };
+    absX: number;
+    absY: number;
+} | {
+    type: 'group';
+    data: DiagramGroupLayout;
+};

package/dist/components/ZUI/useZUIInteraction.d.ts

@@ -0,0 +1,21 @@
+import type { BBox, DiagramGroupLayout, ZUIViewState, HoveredItem } from './types';
+export declare function calculateMaxZoom(groups: DiagramGroupLayout[], canvasW: number): number;
+export interface ZUIInteraction {
+    viewState: ZUIViewState;
+    /** Ref that is updated synchronously on every input event use this in RAF loops to avoid waiting for React renders. */
+    viewStateRef: React.MutableRefObject<ZUIViewState>;
+    setViewState: React.Dispatch<React.SetStateAction<ZUIViewState>>;
+    /** Call with the canvas DOMRect + layout bbox to fit all content. */
+    fitView: (canvasW: number, canvasH: number, bbox: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    }, padding?: number) => void;
+    maxZoom: number;
+    hoveredItem: HoveredItem | null;
+    setHoveredItem: (item: HoveredItem | null, force?: boolean) => void;
+    /** Set to true to prevent clearing hoveredItem (e.g. when mouse is over a popover). */
+    setHoverLocked: (locked: boolean) => void;
+}
+export declare function useZUIInteraction(canvasRef: React.RefObject<HTMLCanvasElement | null>, initialView?: ZUIViewState, groups?: DiagramGroupLayout[], bbox?: BBox, onZoom?: () => void, onPan?: () => void, isMobile?: boolean, resolveHoveredProxyItem?: (worldX: number, worldY: number, view: ZUIViewState, canvasW: number) => HoveredItem | null): ZUIInteraction;

package/dist/config/runtime-vscode.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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;
+    }
+}
+export declare const appBase = "/app/";
+export declare const routerBasename: undefined;
+export declare const isNativeApp = false;
+export declare const apiBase: string;
+export declare function apiUrl(path: string): string;
+export declare function oauthGoogleStartUrl(): string;
+export declare function oauthGithubStartUrl(): string;
+export declare function oauthAppleStartUrl(): string;
+export declare const googleClientId = "945690634753-lcrtd97c5hnqdo5shkoaetstmtrqbk5t.apps.googleusercontent.com";
+export declare const turnstileSiteKey = "0x4AAAAAACyQUcIpN2Yuy8-a";

package/dist/config/runtime.d.ts

@@ -0,0 +1,5 @@
+export declare const appBase: string;
+export declare const routerBasename: string | undefined;
+export declare const isNativeApp = false;
+export declare const apiBase: string;
+export declare function apiUrl(path: string): string;

package/dist/constants/colors.d.ts

@@ -0,0 +1,27 @@
+export declare const ACCENT_DEFAULT = "#63b3ed";
+export declare const ACCENT_OPTIONS: {
+    name: string;
+    value: string;
+}[];
+export declare const BACKGROUND_DEFAULT = "#0d121e";
+export declare const BACKGROUND_OPTIONS: {
+    name: string;
+    value: string;
+}[];
+export declare const ELEMENT_DEFAULT = "#2d3748";
+export declare const ELEMENT_OPTIONS: {
+    name: string;
+    value: string;
+}[];
+export declare const PARENT_VIEW_COLOR = "#63b3ed";
+export declare const CHILD_VIEW_COLOR = "#4fd1c5";
+export declare const PARENT_VIEW_BG = "rgba(99,179,237,0.12)";
+export declare const PARENT_VIEW_BORDER = "rgba(99,179,237,0.25)";
+export declare const CHILD_VIEW_BG = "rgba(79,209,197,0.12)";
+export declare const CHILD_VIEW_BORDER = "rgba(79,209,197,0.25)";
+export declare const DRAWING_COLORS: string[];
+/**
+ * Convert a 6-char hex color to `rgba(r, g, b, alpha)`.
+ * Used to compute dynamic shadows from the accent value.
+ */
+export declare function hexToRgba(hex: string, alpha: number): string;

package/dist/constants/diagramColors.d.ts

@@ -0,0 +1 @@
+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/dist/context/ThemeContext.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+interface ThemeContextValue {
+    accent: string;
+    setAccent: (value: string) => void;
+    background: string;
+    setBackground: (value: string) => void;
+    elementColor: string;
+    setElementColor: (value: string) => void;
+}
+export declare function ThemeProvider({ children, isAuthenticated, defaultAccent, defaultBackground, defaultElementColor, storagePrefix, }: {
+    children: ReactNode;
+    isAuthenticated?: boolean;
+    defaultAccent?: string;
+    defaultBackground?: string;
+    defaultElementColor?: string;
+    storagePrefix?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Backward compatibility alias
+ * @deprecated Use useTheme() instead
+ */
+export declare function useAccentColor(): {
+    accent: string;
+    setAccent: (value: string) => void;
+};
+export {};

package/dist/crossBranch/graph.d.ts

@@ -0,0 +1,13 @@
+import type { Connector, ExploreData, PlacedElement } from '../types';
+import type { WorkspaceGraphSnapshot } from './types';
+export declare function buildWorkspaceGraphSnapshot(data: ExploreData): WorkspaceGraphSnapshot;
+export declare function isDescendantView(snapshot: WorkspaceGraphSnapshot, maybeDescendantId: number | null | undefined, ancestorId: number | null | undefined): boolean;
+export declare function findLowestCommonAncestorViewId(snapshot: WorkspaceGraphSnapshot, leftViewId: number | null | undefined, rightViewId: number | null | undefined): number | null;
+export declare function relativeOwnerElementPath(snapshot: WorkspaceGraphSnapshot, ancestorViewId: number, descendantViewId: number): number[];
+export declare function viewName(snapshot: WorkspaceGraphSnapshot, viewId: number | null | undefined): string | null;
+export declare function allConnectors(snapshot: WorkspaceGraphSnapshot): Connector[];
+export declare function upsertConnectorInSnapshot(snapshot: WorkspaceGraphSnapshot | null, connector: Connector): WorkspaceGraphSnapshot | null;
+export declare function removeConnectorFromSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, connectorId: number): WorkspaceGraphSnapshot | null;
+export declare function upsertPlacementInSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, placement: PlacedElement): WorkspaceGraphSnapshot | null;
+export declare function removePlacementFromSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, elementId: number): WorkspaceGraphSnapshot | null;
+export declare function overrideViewContentInSnapshot(snapshot: WorkspaceGraphSnapshot | null, viewId: number, placements: PlacedElement[], connectors: Connector[]): WorkspaceGraphSnapshot | null;

package/dist/crossBranch/resolve.d.ts

@@ -0,0 +1,22 @@
+import type { PlacedElement } from '../types';
+import type { AggregatedProxyConnector, CrossBranchContextSettings, ProxyConnectorDetails, ProxyContextNode, WorkspaceGraphSnapshot } from './types';
+export interface ViewProxyGraphResult {
+    proxyNodes: ProxyContextNode[];
+    proxyConnectors: AggregatedProxyConnector[];
+    proxyConnectorDetailsByKey: Record<string, ProxyConnectorDetails>;
+}
+export declare function resolveViewProxyGraph(snapshot: WorkspaceGraphSnapshot | null, currentViewId: number | null, currentViewElements: PlacedElement[], settings: CrossBranchContextSettings): ViewProxyGraphResult;
+export interface ZUIResolvedConnector {
+    key: string;
+    sourceElementId: number;
+    targetElementId: number;
+    sourceAnchorElementId: number;
+    targetAnchorElementId: number;
+    sourceNodeId: string;
+    targetNodeId: string;
+    direction: string;
+    style: string;
+    label: string;
+    details: ProxyConnectorDetails;
+}
+export declare function resolveZUIProxyConnectors(snapshot: WorkspaceGraphSnapshot | null, visibleNodeIdsByElementId: Map<number, string>, settings: CrossBranchContextSettings): ZUIResolvedConnector[];

package/dist/crossBranch/settings.d.ts

@@ -0,0 +1,6 @@
+import type { CrossBranchContextSettings, CrossBranchSurface } from './types';
+export declare function useCrossBranchContextSettings(surface: CrossBranchSurface): {
+    settings: CrossBranchContextSettings;
+    setEnabled: (enabled: boolean) => void;
+    setDepth: (depth: number) => void;
+};

package/dist/crossBranch/store.d.ts

@@ -0,0 +1,11 @@
+import type { ExploreData } from '../types';
+import { upsertConnectorInSnapshot, upsertPlacementInSnapshot } from './graph';
+import type { WorkspaceGraphSnapshot } from './types';
+export declare function primeWorkspaceGraphSnapshot(data: ExploreData): void;
+export declare function loadWorkspaceGraphSnapshot(force?: boolean): Promise<WorkspaceGraphSnapshot>;
+export declare function subscribeWorkspaceGraphSnapshot(listener: (snapshot: WorkspaceGraphSnapshot | null) => void): () => void;
+export declare function useWorkspaceGraphSnapshot(enabled?: boolean): WorkspaceGraphSnapshot | null;
+export declare function upsertConnectorGraphSnapshot(connector: Parameters<typeof upsertConnectorInSnapshot>[1]): void;
+export declare function removeConnectorGraphSnapshot(viewId: number, connectorId: number): void;
+export declare function upsertPlacementGraphSnapshot(viewId: number, placement: Parameters<typeof upsertPlacementInSnapshot>[2]): void;
+export declare function removePlacementGraphSnapshot(viewId: number, elementId: number): void;

package/dist/crossBranch/types.d.ts

@@ -0,0 +1,96 @@
+import type { Connector, ExploreData, PlacedElement, ViewTreeNode } from '../types';
+export declare const CROSS_BRANCH_DEPTH_ALL = 5;
+export declare const CROSS_BRANCH_DEPTH_MIN = 1;
+export declare const CROSS_BRANCH_DEPTH_MAX = 5;
+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/dist/demo/DemoPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,137 @@
+/**
+ * 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[]>;
+        };
+    };
+};

package/dist/demo/viewEditor.d.ts

@@ -0,0 +1,26 @@
+import { type MutableRefObject, type RefObject } from 'react';
+import { type Node as RFNode, type ReactFlowInstance } from 'reactflow';
+export interface ViewEditorDemoOptions {
+    revealProgress?: number;
+    disableImportExport?: boolean;
+    hideFlowControls?: boolean;
+    disableOnboarding?: boolean;
+}
+export declare const DEMO_VIEW_EDITOR_OPTIONS: Omit<ViewEditorDemoOptions, 'revealProgress'>;
+interface UseDemoRevealViewportArgs {
+    demoOptions?: ViewEditorDemoOptions;
+    containerRef: RefObject<HTMLDivElement | null>;
+    rfNodesRef: MutableRefObject<RFNode[]>;
+    rfReadyRef: MutableRefObject<boolean>;
+    needsFitViewRef: MutableRefObject<boolean>;
+    computedMinZoom: number;
+    setViewport: ReactFlowInstance['setViewport'];
+    resetKey: number | null;
+}
+export declare function useDemoRevealViewport({ demoOptions, containerRef, rfNodesRef, rfReadyRef, needsFitViewRef, computedMinZoom, setViewport, resetKey, }: UseDemoRevealViewportArgs): {
+    clampedRevealProgress: number | null;
+    applyDemoRevealViewport: () => boolean;
+    disableImportExport: boolean;
+    hideFlowControls: boolean;
+};
+export {};

package/dist/favicon.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+  <defs>
+    <clipPath id="roundsq">
+      <rect width="1024" height="1024" rx="224" ry="224" />
+    </clipPath>
+    <filter id="dshadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="32" result="blur1" />
+      <feFlood flood-color="#63b3ed" flood-opacity="0.3" result="c1" />
+      <feComposite in="c1" in2="blur1" operator="in" result="glow1" />
+      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur2" />
+      <feFlood flood-color="#90cdf4" flood-opacity="0.5" result="c2" />
+      <feComposite in="c2" in2="blur2" operator="in" result="glow2" />
+      <feDropShadow dx="0" dy="20" stdDeviation="20" flood-color="#000" flood-opacity="0.9"
+        result="drop" />
+      <feMerge>
+        <feMergeNode in="glow1" />
+        <feMergeNode in="glow2" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <linearGradient id="dgrad" x1="0" y1="0" x2="0.6" y2="1">
+      <stop offset="0" stop-color="#90cdf4" />
+      <stop offset="0.45" stop-color="#63b3ed" />
+      <stop offset="1" stop-color="#2b6cb0" />
+    </linearGradient>
+  </defs>
+  <g clip-path="url(#roundsq)" transform="matrix(1, 0, 0, 1, -1.4210854715202004e-14, 0)">
+    <g filter="url(#dshadow)" transform="translate(78, 118) scale(0.8)" fill-rule="evenodd">
+      <path
+        d="M201 18s169-39 340-2c171 38 342 152 342 457S713 902 544 949c-170 48-344 19-344 19l1-566h302V217H201z M455 715c-67 83-122 141-62 48q23-35 33-62h-4a78 78 0 1 1 78-78q0 24-12 44-11 21-33 48"
+        fill="url(#dgrad)" />
+    </g>
+  </g>
+</svg>

package/dist/hooks/useSafeFitView.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+/**
+ * Wraps React Flow's fitView with protections against the d3-zoom NaN
+ * poisoning bug that occurs when the container is narrow at load time.
+ *
+ * Guards:
+ * 1. Container width - skips fitView if container is too narrow for d3-zoom
+ *    to compute a valid transform.
+ * 2. Post-call NaN check - if the viewport is still NaN after the call,
+ *    resets to a known-safe fallback.
+ *
+ * Returns `boolean`: true if fitView was attempted, false if skipped.
+ */
+export declare function useSafeFitView(containerRef?: RefObject<HTMLElement | null>): {
+    safeFitView: (options?: Parameters<import("reactflow").FitView>[0]) => boolean;
+};

package/dist/index.css

@@ -0,0 +1 @@
+.panel-search-container{padding:.75rem;flex-shrink:0}.panel-search-input{background-color:#ffffff0a!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:10px!important;font-size:.75rem!important;transition:all .2s ease!important}.panel-search-input:focus{background-color:#ffffff14!important;border-color:var(--accent)!important;box-shadow:none!important}.panel-action-button{width:100%;height:100%;padding:8px 12px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease}.panel-action-button:hover:not(:disabled){background-color:#ffffff0f}.panel-action-button:active:not(:disabled){transform:translateY(1px)}.panel-action-icon-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#ffffff0f;border:1px solid rgba(255,255,255,.08);margin-right:.75rem;flex-shrink:0;transition:all .2s ease}.panel-action-button:hover .panel-action-icon-container{color:var(--accent)}.panel-section-title{font-size:.7rem;font-weight:700;color:#ffffffe6;letter-spacing:.02em;text-transform:uppercase;padding:1rem 1rem .75rem}