@arach/arc 0.4.2 → 0.4.4

package/lib/index.d.ts

@@ -1,67 +1,109 @@
-import { Connector as ArcConnector } from './components/ArcDiagram';
-import { ConnectorStyle as ArcConnectorStyle } from './components/ArcDiagram';
-import { default as ArcDiagram } from './components/ArcDiagram';
-import { ArcDiagramData } from './components/ArcDiagram';
-import { ArcDiagramData as ArcDiagramData_2 } from '../components/ArcDiagram';
-import { default as ArcDiagramIsometric } from './iso/ArcDiagram';
-import { NodeData as ArcNodeData } from './components/ArcDiagram';
-import { NodePosition as ArcNodePosition } from './components/ArcDiagram';
-import { AutoDiagramInput } from './utils/autoLayout';
-import { autoLayout } from './utils/autoLayout';
-import { ColorPalette } from './utils/themes';
-import { configToYaml } from './utils/yamlConfig';
-import { createAutoLayout } from './utils/autoLayout';
-import { deleteDiagramSession } from './utils/sessionStorage';
-import { deriveSessionId } from './utils/sessionStorage';
-import { default as DiagramCanvas } from './components/editor/DiagramCanvas';
-import { DiagramColor } from './components/ArcDiagram';
-import { default as DiagramEditor } from './components/editor/DiagramEditor';
-import { DiagramLayout } from './components/ArcDiagram';
-import { DiagramMode } from './components/ArcDiagram';
-import { DiagramSession } from './utils/sessionStorage';
-import { EditorProvider } from './components/editor/EditorProvider';
-import { generateSessionId } from './utils/sessionStorage';
-import { getColorShading } from './utils/isometric';
-import { getTheme } from './utils/themes';
-import { getThemeList } from './utils/themes';
-import { ISO_COLORS } from './utils/isometric';
-import { isoBoundingBox } from './utils/isometric';
-import { isoBox } from './utils/isometric';
-import { isoShading } from './utils/isometric';
-import { isoToScreen } from './utils/isometric';
-import { listDiagramSessions } from './utils/sessionStorage';
-import { loadDiagramSession } from './utils/sessionStorage';
-import { NodeSize } from './components/ArcDiagram';
-import { parseYamlConfig } from './utils/yamlConfig';
-import { renderToElement } from './iso/vanilla';
-import { renderToString } from './iso/vanilla';
-import { saveDiagramSession } from './utils/sessionStorage';
-import { screenToIsoFloor } from './utils/isometric';
-import { Theme } from './utils/themes';
-import { ThemeId } from './components/ArcDiagram';
-import { THEMES } from './utils/themes';
-import { useColorMode } from './components/editor/EditorProvider';
-import { useDiagram } from './components/editor/EditorProvider';
-import { useDiagramMeta } from './components/editor/EditorProvider';
-import { useEditor } from './components/editor/EditorProvider';
-import { useEditorState } from './components/editor/EditorProvider';
-import { useResolvedTheme } from './components/editor/EditorProvider';
-import { useThemeId } from './components/editor/EditorProvider';
-import { useViewMode } from './components/editor/EditorProvider';
-
-export { ArcConnector }
-
-export { ArcConnectorStyle }
-
-export { ArcDiagram }
-
-export { ArcDiagramData }
-
-export { ArcDiagramIsometric }
-
-export { ArcNodeData }
-
-export { ArcNodePosition }
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+declare type AnchorPosition = 'left' | 'right' | 'top' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+
+declare type AnchorPosition_2 = 'left' | 'right' | 'top' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+
+export declare interface ArcConnector {
+    from: string;
+    to: string;
+    fromAnchor: AnchorPosition;
+    toAnchor: AnchorPosition;
+    style: string;
+    curve?: 'natural' | 'step';
+}
+
+export declare interface ArcConnectorStyle {
+    color: DiagramColor;
+    strokeWidth: number;
+    label?: string;
+    labelAlign?: LabelAlign;
+    dashed?: boolean;
+}
+
+export declare function ArcDiagram({ data, className, interactive, mode, theme, label, labelPosition, defaultZoom, zoomLevels, showArcToggle, showAutoLayout, showControls, showMinimap, frame, hoverEffects, onNodeHover, titleBlock, maxFitZoom, }: ArcDiagramProps): JSX.Element;
+
+export declare interface ArcDiagramData {
+    id?: string;
+    layout: DiagramLayout;
+    nodes: Record<string, ArcNodePosition>;
+    nodeData: Record<string, ArcNodeData>;
+    connectors: ArcConnector[];
+    connectorStyles: Record<string, ArcConnectorStyle>;
+}
+
+declare interface ArcDiagramData_2 {
+    layout: DiagramLayout_2;
+    nodes: Record<string, NodePosition_2>;
+    nodeData: Record<string, NodeData>;
+    connectors: Connector[];
+    connectorStyles: Record<string, ConnectorStyle_2>;
+}
+
+export declare function ArcDiagramIsometric({ config, options, className, style, onNodeClick, onLayerClick }: ArcDiagramProps_2): JSX.Element;
+
+declare interface ArcDiagramProps {
+    data: ArcDiagramData;
+    className?: string;
+    interactive?: boolean;
+    mode?: DiagramMode;
+    theme?: ThemeId;
+    /** Override the diagram label. Defaults to data.id */
+    label?: string;
+    /** Which corner the label sits in. Default: 'top-left'. Zoom controls auto-avoid it. */
+    labelPosition?: LabelCorner;
+    /** Initial zoom level. Use 'fit' to auto-fit content, or a number (e.g., 0.75). Default: 1 */
+    defaultZoom?: number | 'fit';
+    /** Max zoom when defaultZoom='fit'. E.g., 0.85 caps fit at 85%. Default: 1 */
+    maxFitZoom?: number;
+    /** Custom zoom level steps. Default: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2] */
+    zoomLevels?: number[];
+    /** Show the .arc source toggle button. Default: true */
+    showArcToggle?: boolean;
+    /** Show the auto-layout button. Default: false */
+    showAutoLayout?: boolean;
+    /** Show zoom controls even when not interactive (branded reader chrome). Default: follows `interactive` */
+    showControls?: boolean;
+    /** Show a minimap overview (bottom-left). Default: false */
+    showMinimap?: boolean;
+    /** Override the edge/frame treatment (else the theme's brand.frame). */
+    frame?: BrandSpec['frame'];
+    /** Control hover behavior. true = all effects (default), false = none, object = granular control */
+    hoverEffects?: boolean | HoverEffectsConfig;
+    /** Called when a node is hovered/clicked (nodeId) or released (null) */
+    onNodeHover?: (nodeId: string | null) => void;
+    /** Override the engineering title-block fields (shown when the theme opts in). */
+    titleBlock?: TitleBlockInfo;
+}
+
+declare interface ArcDiagramProps_2 {
+    config: DiagramConfig;
+    options?: PlayerOptions;
+    className?: string;
+    style?: default_2.CSSProperties;
+    /** Fired when a node box is clicked (drill-in). */
+    onNodeClick?: (node: DiagramNode, meta: {
+        tier: number;
+        index: number;
+    }) => void;
+    /** Fired when a layer floor is clicked (solo). */
+    onLayerClick?: (tier: number) => void;
+}
+
+export declare interface ArcNodeData {
+    icon: string;
+    name: string;
+    subtitle?: string;
+    description?: string;
+    color: DiagramColor;
+}
+
+export declare interface ArcNodePosition {
+    x: number;
+    y: number;
+    size: NodeSize;
+}
 
 export declare interface AsciiOptions {
     /** Pixels per character horizontally (default: 8) */
@@ -78,13 +120,125 @@ export declare interface AsciiOptions {
     showLabels?: boolean;
 }
 
-export { AutoDiagramInput }
+/**
+ * Generate a diagram from minimal input — no positions or anchors needed.
+ */
+export declare interface AutoDiagramInput {
+    nodeData: ArcDiagramData_2['nodeData'];
+    connectors: Array<Omit<Connector, 'fromAnchor' | 'toAnchor'> & {
+        fromAnchor?: AnchorPosition_2;
+        toAnchor?: AnchorPosition_2;
+    }>;
+    connectorStyles: ArcDiagramData_2['connectorStyles'];
+    layout?: LayoutOptions;
+}
 
-export { autoLayout }
+/**
+ * Auto-layout an ArcDiagramData.
+ *
+ * Uses LR flow within rows. When layers exceed the target width,
+ * wraps into multiple rows — combining LR and TB to maximize
+ * use of the available 2D space.
+ */
+export declare function autoLayout(data: ArcDiagramData_2, options?: LayoutOptions): ArcDiagramData_2;
+
+declare interface BrandSpec {
+    /** Font stack for the whole diagram (node names inherit this). */
+    fontFamily?: string;
+    /** Monospace stack for subtitles + connector labels. */
+    monoFamily?: string;
+    /** Stylesheet URL injected once so the families load (e.g. Google Fonts). */
+    fontImport?: string;
+    /** Node + icon corner radius (CSS length). '0px' = square tiles. */
+    nodeRadius?: string;
+    /** Node border width (CSS length), overrides the default 2px. */
+    nodeBorderWidth?: string;
+    /** Uppercase + letter-space the subtitle and connector labels. */
+    upperLabels?: boolean;
+    /** Arrowhead shape at connector ends. */
+    arrowhead?: 'triangle' | 'chevron';
+    /** Background grid system. */
+    gridType?: 'dots' | 'lines' | 'crosshair' | 'none';
+    /** Edge/frame treatment at the diagram boundary. */
+    frame?: 'hairline' | 'inset' | 'brackets' | 'ticks' | 'cropmarks' | 'corners' | 'sheet' | 'reticle' | 'none';
+    /** Render an engineering-drawing title block in the bottom-right corner. */
+    titleBlock?: boolean;
+    /** Node silhouette when nodeRadius is not set explicitly. */
+    nodeShape?: 'rounded' | 'square' | 'chamfer' | 'pill';
+    /** Overall node opacity (0–1). */
+    nodeOpacity?: number;
+    /** Frosted glass backdrop on nodes. */
+    nodeGlass?: boolean;
+    /** Colored accent stripe on the node shell. */
+    accentBar?: 'left' | 'top' | 'none';
+    /** Soft bloom on connector strokes. */
+    connectorGlow?: boolean;
+}
 
-export { ColorPalette }
+export declare interface ColorPalette {
+    violet: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    emerald: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    blue: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    amber: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    sky: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    zinc: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    rose: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+    orange: {
+        border: string;
+        bg: string;
+        icon: string;
+        stroke: string;
+    };
+}
 
-export { configToYaml }
+/**
+ * Convert a DiagramConfig back to YAML string
+ */
+export declare function configToYaml(config: DiagramConfig_2): string;
+
+declare interface Connector {
+    from: string;
+    to: string;
+    fromAnchor: AnchorPosition_2;
+    toAnchor: AnchorPosition_2;
+    style: string;
+    curve?: 'natural' | 'step';
+}
 
 export declare interface ConnectorStyle {
     color: string;
@@ -97,15 +251,40 @@ export declare interface ConnectorStyle {
     showEndpoints?: boolean;
 }
 
-export { createAutoLayout }
+declare interface ConnectorStyle_2 {
+    color: DiagramColor_2;
+    strokeWidth: number;
+    label?: string;
+    dashed?: boolean;
+}
+
+export declare function createAutoLayout(input: AutoDiagramInput): ArcDiagramData_2;
 
-export { deleteDiagramSession }
+/** Delete a diagram session */
+export declare function deleteDiagramSession(id: string): void;
 
-export { deriveSessionId }
+/** Derive a URL-safe session ID from a diagram's source path or ID */
+export declare function deriveSessionId(source: string): string;
 
-export { DiagramCanvas }
+export declare function DiagramCanvas({ onViewportChange, embedConfig, zoomConfig, themeOverride, isDark }: DiagramCanvasProps): JSX.Element;
 
-export { DiagramColor }
+declare interface DiagramCanvasProps {
+    onViewportChange?: (bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    embedConfig?: EmbedConfig;
+    zoomConfig?: ZoomConfig;
+    /** Override canvas background with an Arc theme. */
+    themeOverride?: string;
+    isDark?: boolean;
+}
+
+export declare type DiagramColor = 'violet' | 'emerald' | 'blue' | 'amber' | 'sky' | 'zinc' | 'rose' | 'orange';
+
+declare type DiagramColor_2 = 'violet' | 'emerald' | 'blue' | 'amber' | 'sky' | 'zinc' | 'rose' | 'orange';
 
 export declare interface DiagramConfig {
     id?: string;
@@ -135,9 +314,50 @@ export declare interface DiagramConfig {
     }[];
 }
 
-export { DiagramEditor }
+declare interface DiagramConfig_2 {
+    title: string;
+    description: string;
+    theme: 'dark' | 'light';
+    canvas: {
+        width: number;
+        height: number;
+    };
+    origin: {
+        x: number;
+        y: number;
+    };
+    cornerRadius?: number;
+    tiers: TierConfig_2[];
+    floorSize: {
+        width: number;
+        depth: number;
+    };
+    nodes: DiagramNode_2[];
+    pillars?: {
+        x: number;
+        y: number;
+        fromTier: number;
+        toTier: number;
+    }[];
+}
 
-export { DiagramLayout }
+export declare function DiagramEditor({ initialData, themeId, colorMode, sessionId, initialDiagramMeta, }: {
+    initialData?: any;
+    themeId?: string | null;
+    colorMode?: 'light' | 'dark';
+    sessionId?: string | null;
+    initialDiagramMeta?: Record<string, any>;
+}): JSX.Element;
+
+export declare interface DiagramLayout {
+    width: number;
+    height: number;
+}
+
+declare interface DiagramLayout_2 {
+    width: number;
+    height: number;
+}
 
 export declare interface DiagramMeta {
     themeId?: string | null;
@@ -149,7 +369,7 @@ export declare interface DiagramMeta {
     sourceUrl?: string;
 }
 
-export { DiagramMode }
+export declare type DiagramMode = 'dark' | 'light';
 
 export declare interface DiagramNode {
     tier: number;
@@ -163,11 +383,47 @@ export declare interface DiagramNode {
     opacity?: number;
     blur?: number;
     translucent?: boolean;
+    /** Optional link target; clicking the node surfaces this (declarative click hook). */
+    link?: string;
 }
 
-export { DiagramSession }
+declare interface DiagramNode_2 {
+    tier: number;
+    x: number;
+    y: number;
+    width: number;
+    depth: number;
+    height: number;
+    color: string;
+    label: string;
+    opacity?: number;
+    blur?: number;
+    translucent?: boolean;
+}
+
+export declare interface DiagramSession {
+    diagram: any;
+    themeId: string | null;
+    colorMode: 'light' | 'dark';
+    diagramMeta: Record<string, any>;
+    updatedAt: number;
+    name?: string;
+    originalDiagram?: any;
+}
 
-export { EditorProvider }
+declare interface EditorContextType {
+    state: typeof initialState;
+    dispatch: React.Dispatch<any>;
+    actions: Record<string, (...args: any[]) => void>;
+}
+
+export declare function EditorProvider({ children, initialDiagram, initialThemeId, initialColorMode, initialDiagramMeta }: {
+    children: React.ReactNode;
+    initialDiagram?: any;
+    initialThemeId?: string | null;
+    initialColorMode?: 'light' | 'dark';
+    initialDiagramMeta?: Record<string, any>;
+}): JSX.Element;
 
 export declare interface EmbedConfig {
     defaultViewMode?: ViewMode;
@@ -181,32 +437,198 @@ export declare interface EmbedConfig {
     showGrid?: boolean;
 }
 
-export { generateSessionId }
+/** Generate a short session ID (first 8 hex chars of a UUID for brevity in URLs) */
+export declare function generateSessionId(): string;
 
-export { getColorShading }
+/** Shading for a named preset color (falls back to `slate` when unknown). */
+export declare function getColorShading(colorName: string): IsoShadingResult;
 
-export { getTheme }
+export declare function getTheme(id: ThemeId): Theme;
 
-export { getThemeList }
+export declare function getThemeList(): {
+    id: ThemeId;
+    name: string;
+    description: string;
+}[];
+
+declare interface HoverEffectsConfig {
+    /** Dim unrelated nodes/connectors. Default: true */
+    dim?: boolean;
+    /** 0–1 opacity for dimmed nodes. Connectors dim to ~56% of this. Default: 0.45 */
+    dimOpacity?: number;
+    /** Lift hovered node up 2px. Default: true */
+    lift?: boolean;
+    /** Colored glow shadow on hover. Default: true */
+    glow?: boolean;
+    /** Thicken connected edges. Default: true */
+    highlightEdges?: boolean;
+}
 
-export { ISO_COLORS }
+declare const initialState: {
+    diagram: {
+        layout: {
+            width: number;
+            height: number;
+        };
+        grid: {
+            enabled: boolean;
+            size: number;
+            color: string;
+            opacity: number;
+            type: "dots" | "lines";
+        };
+        nodes: {};
+        nodeData: {};
+        connectors: any[];
+        connectorStyles: {
+            [x: string]: ConnectorStyle;
+        };
+        groups: any[];
+        images: any[];
+        exportZone: any;
+    };
+    editor: {
+        selectedNodeIds: any[];
+        selectedConnectorIndex: any;
+        selectedGroupId: any;
+        selectedImageId: any;
+        mode: string;
+        pendingConnector: any;
+        pendingGroup: any;
+        isDragging: boolean;
+        dragOffset: {
+            x: number;
+            y: number;
+        };
+        dragNodeOffsets: {};
+        template: string;
+        zoom: number;
+        viewMode: string;
+        themeId: string;
+        colorMode: string;
+    };
+    meta: {
+        filename: any;
+        isDirty: boolean;
+        lastSaved: any;
+        diagramMeta: {};
+    };
+    history: {
+        past: any[];
+        future: any[];
+    };
+};
+
+/** Preset HSL palettes matching Arc's diagram colors. */
+export declare const ISO_COLORS: {
+    violet: IsoColorDef;
+    blue: IsoColorDef;
+    cyan: IsoColorDef;
+    emerald: IsoColorDef;
+    amber: IsoColorDef;
+    rose: IsoColorDef;
+    slate: IsoColorDef;
+    zinc: IsoColorDef;
+};
+
+/** Screen-space bounding box of an isometric box. */
+export declare function isoBoundingBox(width: number, depth: number, height: number, originX?: number, originY?: number): IsoBoundingBoxResult;
+
+/** Screen-space bounding box of an isometric box. */
+declare interface IsoBoundingBoxResult {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+}
+
+/** SVG path strings for an isometric box (cuboid) with its visible faces. */
+export declare function isoBox(width: number, depth: number, height: number, originX?: number, originY?: number, radius?: number): IsoBoxPaths;
+
+/** The SVG paths that draw an isometric box: flat faces (path strings), rounded
+ *  corners (arrays of shaded segments, empty when `radius` is 0), and outline. */
+declare interface IsoBoxPaths {
+    top: string;
+    left: string;
+    right: string;
+    cornerFrontLeft: IsoBoxSegment[];
+    cornerFrontRight: IsoBoxSegment[];
+    cornerBackLeft: IsoBoxSegment[];
+    cornerBackRight: IsoBoxSegment[];
+    outline: string;
+}
+
+/** One shaded segment of a rounded box corner. */
+declare interface IsoBoxSegment {
+    path: string;
+    intensity: number;
+}
+
+/** HSL preset for a named diagram color. */
+declare interface IsoColorDef {
+    hue: number;
+    saturation: number;
+    lightness: number;
+}
+
+/** 2D screen point produced by the iso projection. */
+declare interface IsoScreenPoint {
+    screenX: number;
+    screenY: number;
+}
 
-export { isoBoundingBox }
+/** Standard iso face shading derived from a base HSL hue (or color name). */
+export declare function isoShading(baseHue: number | string, saturation?: number, baseLightness?: number): IsoShadingResult;
 
-export { isoBox }
+/** Per-face shading colors (CSS color strings). */
+declare interface IsoShadingResult {
+    top: string;
+    right: string;
+    left: string;
+}
+
+/** Convert 3D isometric coordinates to 2D screen coordinates. */
+export declare function isoToScreen(x: number, y: number, z?: number): IsoScreenPoint;
+
+declare type LabelAlign = 'left' | 'right' | 'center';
 
-export { isoShading }
+declare type LabelCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
-export { isoToScreen }
+declare interface LayoutOptions {
+    /** Horizontal gap between columns */
+    columnGap?: number;
+    /** Vertical gap between nodes within a column */
+    nodeGap?: number;
+    /** Vertical gap between wrapped rows */
+    rowGap?: number;
+    /** Padding around the entire diagram */
+    padding?: number;
+}
 
-export { listDiagramSessions }
+/** List all saved diagram sessions, sorted by most recent */
+export declare function listDiagramSessions(): Array<{
+    id: string;
+    name?: string;
+    updatedAt: number;
+}>;
 
-export { loadDiagramSession }
+/** Load a diagram session from localStorage */
+export declare function loadDiagramSession(id: string): DiagramSession | null;
+
+declare interface NodeData {
+    icon: string;
+    name: string;
+    subtitle?: string;
+    description?: string;
+    color: DiagramColor_2;
+}
 
 export declare interface NodePosition {
     x: number;
     y: number;
-    size: NodeSize_2;
+    size: NodeSize_3;
     width?: number;
     height?: number;
     z?: number;
@@ -214,27 +636,118 @@ export declare interface NodePosition {
     isoDepth?: number;
 }
 
-export { NodeSize }
+declare interface NodePosition_2 {
+    x: number;
+    y: number;
+    size: NodeSize_2;
+}
+
+export declare type NodeSize = 'xs' | 's' | 'm' | 'l';
 
-declare type NodeSize_2 = 'large' | 'normal' | 'small';
+declare type NodeSize_2 = 's' | 'm' | 'l';
 
-export { parseYamlConfig }
+declare type NodeSize_3 = 'large' | 'normal' | 'small';
 
-export declare function renderAscii(data: ArcDiagramData_2, options?: AsciiOptions): string;
+/**
+ * Parse YAML config into DiagramConfig
+ *
+ * Supported format:
+ * ```yaml
+ * title: Data Platform
+ * description: Domain-driven architecture
+ * theme: light
+ * canvas: 1100x720
+ * floor: 460x280
+ * corner: 14
+ *
+ * colors:
+ *   db: &db blue
+ *   svc: &svc violet
+ *
+ * tiers:
+ *   - Data @ 0
+ *   - Services @ 150
+ *   - Domains @ 300
+ *
+ * nodes:
+ *   0:  # Tier 0
+ *     - SQL       *db  25,25   120x90x34
+ *     - NoSQL     *db  165,25  120x90x34
+ *   1:  # Tier 1
+ *     - Ingest    *svc 20,20   100x80x40 { opacity=0.8 }
+ * ```
+ */
+export declare function parseYamlConfig(yamlStr: string): DiagramConfig_2;
+
+declare interface PlayerOptions {
+    /** Enable hover effects */
+    interactive?: boolean;
+    /** Enable zoom/pan */
+    zoomable?: boolean;
+    /** Show tier labels */
+    showLabels?: boolean;
+    /** Animation on load */
+    animate?: boolean;
+    /** On hover, lift the hovered layer out of the stack (default: true when interactive) */
+    expandOnHover?: boolean;
+}
 
-export { renderToElement }
+export declare function renderAscii(data: ArcDiagramData, options?: AsciiOptions): string;
 
-export { renderToString }
+/**
+ * Render diagram to a DOM element
+ */
+export declare function renderToElement(container: HTMLElement, config: DiagramConfig): void;
 
-export { saveDiagramSession }
+/**
+ * Render diagram to SVG string (for SSR or static export)
+ */
+export declare function renderToString(config: DiagramConfig): string;
 
-export { screenToIsoFloor }
+/** Save a diagram session to localStorage */
+export declare function saveDiagramSession(id: string, data: Omit<DiagramSession, 'updatedAt'>): void;
 
-export { Theme }
+/** Convert 2D screen coordinates to the isometric floor position (z = 0). */
+export declare function screenToIsoFloor(screenX: number, screenY: number): { x: number; y: number };
 
-export { ThemeId }
+export declare interface Theme {
+    id: ThemeId;
+    name: string;
+    description: string;
+    light: {
+        palette: ColorPalette;
+        background: ThemeBackground;
+        text: {
+            primary: string;
+            secondary: string;
+            muted: string;
+        };
+    };
+    dark: {
+        palette: ColorPalette;
+        background: ThemeBackground;
+        text: {
+            primary: string;
+            secondary: string;
+            muted: string;
+        };
+    };
+    /** Optional brand design language (typography, node shape, arrows). */
+    brand?: BrandSpec;
+}
 
-export { THEMES }
+declare interface ThemeBackground {
+    container: string;
+    grid: {
+        color: string;
+        opacity: number;
+        size: number;
+    };
+}
+
+export declare type ThemeId = 'default' | 'warm' | 'cool' | 'mono' | 'engineering' | 'workbench' | 'tactical' | 'command';
+
+export declare const THEMES: Record<ThemeId, Theme>;
 
 /**
  * Arc Isometric Types
@@ -247,24 +760,113 @@ export declare interface TierConfig {
     borderColor?: string;
     nodeOpacity?: number;
     blur?: number;
+    /** Projected (screen-space) offset applied to the whole layer AFTER isometric projection.
+     *  Staggers layers in the picture plane — e.g. { x: 0, y: -40 } lifts a layer up the projected
+     *  Y axis; { x: -60, y: 0 } pushes one left on −X. Purely declarative; default = no offset. */
+    offset?: {
+        x: number;
+        y: number;
+    };
 }
 
-export { useColorMode }
-
-export { useDiagram }
-
-export { useDiagramMeta }
+declare interface TierConfig_2 {
+    name: string;
+    elevation: number;
+    floorColor?: string;
+    floorOpacity?: number;
+    borderColor?: string;
+    nodeOpacity?: number;
+    blur?: number;
+}
 
-export { useEditor }
+/** Content for the engineering-drawing title block (Engineering theme). */
+declare interface TitleBlockInfo {
+    /** Project / drawing title shown in the top strip. */
+    title?: string;
+    /** Drawing number. Defaults to the diagram label (data.id). */
+    drawing?: string;
+    /** Scale field. Default 'NTS'. */
+    scale?: string;
+    /** Revision field. Default 'A'. */
+    rev?: string;
+    /** Sheet field. Default '1 / 1'. */
+    sheet?: string;
+}
 
-export { useEditorState }
+export declare function useColorMode(): string;
 
-export { useResolvedTheme }
+export declare function useDiagram(): {
+    layout: {
+        width: number;
+        height: number;
+    };
+    grid: {
+        enabled: boolean;
+        size: number;
+        color: string;
+        opacity: number;
+        type: "dots" | "lines";
+    };
+    nodes: {};
+    nodeData: {};
+    connectors: any[];
+    connectorStyles: {
+        [x: string]: ConnectorStyle;
+    };
+    groups: any[];
+    images: any[];
+    exportZone: any;
+};
+
+export declare function useDiagramMeta(): {};
+
+export declare function useEditor(): EditorContextType;
+
+export declare function useEditorState(): {
+    selectedNodeIds: any[];
+    selectedConnectorIndex: any;
+    selectedGroupId: any;
+    selectedImageId: any;
+    mode: string;
+    pendingConnector: any;
+    pendingGroup: any;
+    isDragging: boolean;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+    dragNodeOffsets: {};
+    template: string;
+    zoom: number;
+    viewMode: string;
+    themeId: string;
+    colorMode: string;
+};
+
+/** Returns the active theme's brand spec (typography, node shape, connector treatment). */
+export declare function useResolvedBrand(): BrandSpec;
+
+/** Returns the resolved theme palette (light or dark) for the current theme and color mode. */
+export declare function useResolvedTheme(): {
+    palette: ColorPalette;
+    background: ThemeBackground;
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+    };
+};
 
-export { useThemeId }
+export declare function useThemeId(): string;
 
-export { useViewMode }
+export declare function useViewMode(): string;
 
 export declare type ViewMode = '2d' | 'isometric';
 
+declare interface ZoomConfig {
+    defaultZoom?: number | 'fit';
+    zoomLevels?: number[];
+    zoomStep?: number;
+}
+
 export { }