@liminis/editor 0.3.0 → 0.4.0

package/dist/app/editor/c4/C4InteractiveRenderer.js

@@ -1,299 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * C4InteractiveRenderer - Interactive SVG renderer with drag support
- *
- * Wraps the C4Renderer with drag-and-drop functionality for manual layout mode.
- * Maintains local position state during drag and recalculates edges in real-time.
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { C4RendererContent, computeLegendInfo } from './renderer.js';
-import { layoutC4Diagram } from './layout.js';
-import { useC4DiagramDrag } from './hooks/useC4DiagramDrag.js';
-/** Synthetic ID used to store legend position in manual positions map */
-export const LEGEND_POSITION_ID = '__legend__';
-/**
- * Collect all node IDs and their positions from the layout tree.
- */
-function collectNodePositions(nodes) {
-    const positions = {};
-    for (const node of nodes) {
-        positions[node.id] = { x: node.x, y: node.y };
-        if (node.children) {
-            Object.assign(positions, collectNodePositions(node.children));
-        }
-    }
-    return positions;
-}
-/**
- * Build a map from element ID to all its descendant IDs (recursive).
- */
-function collectDescendantIds(elements) {
-    const map = new Map();
-    function getDescendants(element) {
-        const ids = [];
-        for (const child of element.children) {
-            ids.push(child.id);
-            ids.push(...getDescendants(child));
-        }
-        return ids;
-    }
-    function visit(element) {
-        const descendants = getDescendants(element);
-        if (descendants.length > 0) {
-            map.set(element.id, descendants);
-        }
-        for (const child of element.children) {
-            visit(child);
-        }
-    }
-    for (const element of elements) {
-        visit(element);
-    }
-    return map;
-}
-/**
- * Interactive C4 diagram renderer with drag support.
- *
- * When isEditMode is true, nodes can be dragged to new positions.
- * Edges and boundaries are recalculated in real-time during drag.
- */
-export function C4InteractiveRenderer({ diagram, isDarkMode, isEditMode, manualPositions, onPositionChange, }) {
-    const svgRef = useRef(null);
-    // Local positions during drag (merged with persisted positions)
-    const [dragPositions, setDragPositions] = useState({});
-    // Ref mirror of dragPositions — always current, avoids stale closure in handleNodeDragEnd
-    const dragPositionsRef = useRef({});
-    // rAF handle for throttling drag updates
-    const rafRef = useRef(null);
-    const pendingDragRef = useRef(null);
-    // Track drag start position for computing delta (used to move children)
-    const dragStartPosRef = useRef(null);
-    // Map from element ID to its descendant IDs (for moving children with boundary)
-    const descendantMap = useMemo(() => {
-        return collectDescendantIds(diagram.elements);
-    }, [diagram.elements]);
-    // Compute the auto-layout once for seeding positions on first drag
-    const autoLayout = useMemo(() => {
-        return layoutC4Diagram(diagram);
-    }, [diagram]);
-    // Merge persisted positions with drag positions
-    const effectivePositions = useMemo(() => ({
-        ...manualPositions,
-        ...dragPositions,
-    }), [manualPositions, dragPositions]);
-    // Compute layout using effective positions
-    const layout = useMemo(() => {
-        const hasPositions = Object.keys(effectivePositions).length > 0;
-        return layoutC4Diagram(diagram, undefined, hasPositions ? effectivePositions : undefined);
-    }, [diagram, effectivePositions]);
-    /**
-     * Apply drag delta to a node and all its descendants.
-     * Returns an object with updated positions for the node and its children.
-     */
-    const applyDragWithChildren = useCallback((nodeId, x, y, basePositions) => {
-        const updates = { [nodeId]: { x, y } };
-        const childIds = descendantMap.get(nodeId);
-        if (childIds && dragStartPosRef.current) {
-            const dx = x - dragStartPosRef.current.x;
-            const dy = y - dragStartPosRef.current.y;
-            for (const childId of childIds) {
-                const childPos = basePositions[childId];
-                if (childPos) {
-                    updates[childId] = { x: childPos.x + dx, y: childPos.y + dy };
-                }
-            }
-        }
-        return updates;
-    }, [descendantMap]);
-    // Snapshot of positions at drag start (before any delta is applied to children)
-    const dragStartPositionsRef = useRef({});
-    // Helper to update both drag state and ref mirror
-    const updateDragPositions = useCallback((updater) => {
-        setDragPositions(prev => {
-            const next = updater(prev);
-            dragPositionsRef.current = next;
-            return next;
-        });
-    }, []);
-    // Handle real-time position updates during drag, throttled to rAF
-    const handleNodeDrag = useCallback((nodeId, x, y) => {
-        // On first move of a new drag, clear any stale positions from previous drag
-        if (!dragStartPosRef.current && Object.keys(dragPositionsRef.current).length > 0) {
-            dragPositionsRef.current = {};
-            setDragPositions({});
-        }
-        pendingDragRef.current = { nodeId, x, y };
-        if (rafRef.current === null) {
-            rafRef.current = requestAnimationFrame(() => {
-                rafRef.current = null;
-                const pending = pendingDragRef.current;
-                if (pending) {
-                    updateDragPositions(prev => {
-                        // On first drag, seed all node positions from current layout
-                        // to prevent other nodes from jumping to default placement
-                        if (Object.keys(prev).length === 0 && Object.keys(manualPositions).length === 0) {
-                            const seeded = collectNodePositions(autoLayout.nodes);
-                            // Record start positions for delta calculation
-                            if (!dragStartPosRef.current) {
-                                dragStartPosRef.current = seeded[pending.nodeId] ?? { x: pending.x, y: pending.y };
-                                dragStartPositionsRef.current = { ...seeded };
-                            }
-                            const updates = applyDragWithChildren(pending.nodeId, pending.x, pending.y, dragStartPositionsRef.current);
-                            return { ...seeded, ...updates };
-                        }
-                        // Record start position on first move if not already set
-                        if (!dragStartPosRef.current) {
-                            const currentPos = { ...manualPositions, ...prev };
-                            dragStartPosRef.current = currentPos[pending.nodeId] ?? { x: pending.x, y: pending.y };
-                            dragStartPositionsRef.current = { ...currentPos };
-                        }
-                        const updates = applyDragWithChildren(pending.nodeId, pending.x, pending.y, dragStartPositionsRef.current);
-                        return { ...prev, ...updates };
-                    });
-                }
-            });
-        }
-    }, [manualPositions, autoLayout.nodes, applyDragWithChildren, updateDragPositions]);
-    // Handle drag end - persist positions
-    // Uses dragPositionsRef (not dragPositions state) to avoid stale closure race
-    const handleNodeDragEnd = useCallback((nodeId, x, y) => {
-        // Cancel any pending rAF
-        if (rafRef.current !== null) {
-            cancelAnimationFrame(rafRef.current);
-            rafRef.current = null;
-        }
-        // Read latest drag positions from ref (immune to stale closure)
-        const currentDragPositions = dragPositionsRef.current;
-        // Merge all positions and persist
-        const newPositions = {
-            ...manualPositions,
-            ...currentDragPositions,
-        };
-        // If this is the first drag, populate all other nodes with their current auto-layout positions
-        if (Object.keys(manualPositions).length === 0) {
-            const autoPositions = collectNodePositions(autoLayout.nodes);
-            for (const [id, pos] of Object.entries(autoPositions)) {
-                if (!newPositions[id]) {
-                    newPositions[id] = pos;
-                }
-            }
-        }
-        // Apply final position with children
-        const basePositions = dragStartPositionsRef.current;
-        const updates = applyDragWithChildren(nodeId, x, y, basePositions);
-        Object.assign(newPositions, updates);
-        onPositionChange(newPositions);
-        // Don't clear dragPositions here — manualPositions hasn't absorbed the
-        // new values yet (Lexical update listener is async). Clearing now would
-        // cause effectivePositions to revert to stale manualPositions, producing
-        // a visual snap-back. Instead, clear in the effect below when
-        // manualPositions catches up.
-        dragStartPosRef.current = null;
-        dragStartPositionsRef.current = {};
-    }, [manualPositions, autoLayout.nodes, onPositionChange, applyDragWithChildren]);
-    // Set up drag hook (window-level listeners handle mousemove/mouseup)
-    const { draggedNodeId, startNodeDrag } = useC4DiagramDrag({
-        svgRef,
-        onNodeDrag: handleNodeDrag,
-        onNodeDragEnd: handleNodeDragEnd,
-        enabled: isEditMode,
-    });
-    // Clear drag positions once manualPositions has absorbed the persisted values.
-    // We verify absorption by comparing values — this avoids both:
-    // - Clearing mid-drag (draggedNodeId guard)
-    // - Clearing before Lexical propagates (value comparison)
-    useEffect(() => {
-        if (draggedNodeId || Object.keys(dragPositionsRef.current).length === 0)
-            return;
-        // Reset case: manualPositions was cleared (e.g., "Reset to Auto Layout")
-        if (Object.keys(manualPositions).length === 0) {
-            dragPositionsRef.current = {};
-            setDragPositions({});
-            return;
-        }
-        // Normal case: only clear once manualPositions contains the drag values
-        const absorbed = Object.entries(dragPositionsRef.current).every(([id, pos]) => {
-            const mp = manualPositions[id];
-            return mp?.x === pos.x && mp?.y === pos.y;
-        });
-        if (absorbed) {
-            dragPositionsRef.current = {};
-            setDragPositions({});
-        }
-    }, [manualPositions, draggedNodeId]);
-    // Compute legend info for hit area and position override
-    const legendInfo = useMemo(() => computeLegendInfo(layout), [layout]);
-    const legendPositionOverride = useMemo(() => {
-        const pos = effectivePositions[LEGEND_POSITION_ID];
-        return pos ?? null;
-    }, [effectivePositions]);
-    // Render with interactive wrappers
-    return (_jsx(C4InteractiveSvg, { layout: layout, isDarkMode: isDarkMode, isEditMode: isEditMode, draggedNodeId: draggedNodeId, svgRef: svgRef, onNodeMouseDown: startNodeDrag, legendInfo: legendInfo, legendPositionOverride: legendPositionOverride }));
-}
-/**
- * SVG wrapper that adds interactive overlays for drag handling.
- */
-function C4InteractiveSvg({ layout, isDarkMode, isEditMode, draggedNodeId, svgRef, onNodeMouseDown, legendInfo, legendPositionOverride, }) {
-    // Get colors based on theme
-    const handleColor = isDarkMode ? '#a0a0a0' : '#505050';
-    // Create hit areas for each node (and legend if present)
-    const hitAreas = useMemo(() => {
-        const areas = [];
-        function collectNodes(nodes) {
-            for (const node of nodes) {
-                areas.push({
-                    id: node.id,
-                    x: node.x,
-                    y: node.y,
-                    width: node.width,
-                    height: node.height,
-                });
-            }
-        }
-        collectNodes(layout.nodes);
-        // Add legend as a draggable hit area
-        if (legendInfo) {
-            const lx = legendPositionOverride?.x ?? legendInfo.x;
-            const ly = legendPositionOverride?.y ?? legendInfo.y;
-            areas.push({
-                id: LEGEND_POSITION_ID,
-                x: lx,
-                y: ly,
-                width: legendInfo.width,
-                height: legendInfo.height,
-            });
-        }
-        return areas;
-    }, [layout.nodes, legendInfo, legendPositionOverride]);
-    // Compute SVG dimensions that include potential legend overflow,
-    // mirroring the behavior of the non-interactive C4Renderer.
-    const { svgWidth, svgHeight } = useMemo(() => {
-        let w = layout.width;
-        let h = layout.height;
-        if (legendInfo) {
-            const lx = legendPositionOverride?.x ?? legendInfo.x;
-            const ly = legendPositionOverride?.y ?? legendInfo.y;
-            const legendRight = lx + legendInfo.width - layout.viewBoxX;
-            const legendBottom = ly + legendInfo.height - layout.viewBoxY;
-            if (legendRight > w)
-                w = legendRight;
-            if (legendBottom > h)
-                h = legendBottom;
-        }
-        return { svgWidth: w, svgHeight: h };
-    }, [layout.width, layout.height, layout.viewBoxX, layout.viewBoxY, legendInfo, legendPositionOverride]);
-    return (_jsx("div", { style: { position: 'relative' }, children: _jsxs("svg", { ref: svgRef, width: svgWidth, height: svgHeight, viewBox: `${layout.viewBoxX} ${layout.viewBoxY} ${svgWidth} ${svgHeight}`, xmlns: "http://www.w3.org/2000/svg", "data-diagram": "c4", style: {
-                fontFamily: 'system-ui, -apple-system, sans-serif',
-                cursor: isEditMode ? (draggedNodeId ? 'grabbing' : 'default') : 'default',
-            }, children: [_jsx(C4RendererContent, { layout: layout, isDarkMode: isDarkMode, legendPositionOverride: legendPositionOverride }), isEditMode && (_jsx("g", { className: "interactive-layer", children: hitAreas.map((area) => (_jsx("rect", { "data-node-id": area.id, x: area.x, y: area.y, width: area.width, height: area.height, fill: "transparent", stroke: "transparent", style: {
-                            cursor: draggedNodeId === area.id ? 'grabbing' : 'grab',
-                        }, onMouseDown: (e) => onNodeMouseDown(area.id, area.x, area.y, e) }, area.id))) })), isEditMode && (_jsx("g", { className: "drag-handles-layer", children: hitAreas.map((area) => (_jsx(DragHandle, { x: area.x + area.width - 20, y: area.y + 4, color: handleColor, isDragging: draggedNodeId === area.id }, `handle-${area.id}`))) }))] }) }));
-}
-/**
- * Drag handle indicator (grip icon).
- */
-function DragHandle({ x, y, color, isDragging, }) {
-    const opacity = isDragging ? 0.8 : 0.4;
-    return (_jsxs("g", { transform: `translate(${x}, ${y})`, opacity: opacity, style: { pointerEvents: 'none' }, children: [_jsx("circle", { cx: 4, cy: 4, r: 1.5, fill: color }), _jsx("circle", { cx: 12, cy: 4, r: 1.5, fill: color }), _jsx("circle", { cx: 4, cy: 8, r: 1.5, fill: color }), _jsx("circle", { cx: 12, cy: 8, r: 1.5, fill: color }), _jsx("circle", { cx: 4, cy: 12, r: 1.5, fill: color }), _jsx("circle", { cx: 12, cy: 12, r: 1.5, fill: color })] }));
-}
-export default C4InteractiveRenderer;

package/dist/app/editor/c4/edge-clipping.d.ts

@@ -1,24 +0,0 @@
-/**
- * Edge line clipping utilities for C4 diagrams.
- *
- * Computes where edge polylines intersect label bounding boxes and splits
- * them into visible segments, creating clean gaps around label text.
- */
-import type { Point } from './types.js';
-/**
- * Estimate the half-width and half-height of a label's bounding box.
- */
-export declare function estimateLabelSize(label: string, fontSize: number): {
-    halfW: number;
-    halfH: number;
-};
-/**
- * Build clipped edge path strings that leave a gap where the label sits.
- *
- * Transforms points into the label's local coordinate system (accounting for
- * rotation), finds where line segments cross the label bounding box, and
- * splits the polyline into visible portions outside the box.
- *
- * @returns SVG path data strings for each visible segment
- */
-export declare function buildClippedEdgePaths(points: Point[], labelCenter: Point, labelHalfW: number, labelHalfH: number, angleDeg: number): string[];

package/dist/app/editor/c4/edge-clipping.js

@@ -1,139 +0,0 @@
-/**
- * Edge line clipping utilities for C4 diagrams.
- *
- * Computes where edge polylines intersect label bounding boxes and splits
- * them into visible segments, creating clean gaps around label text.
- */
-// =============================================================================
-// CONSTANTS
-// =============================================================================
-/** Average character width as a ratio of font size (for monospace-ish system fonts) */
-const AVG_CHAR_WIDTH_RATIO = 0.55;
-/** Horizontal padding around label text for the clipping box */
-const LABEL_PADDING_X = 3;
-/** Vertical padding around label text for the clipping box */
-const LABEL_PADDING_Y = 4;
-// =============================================================================
-// LABEL SIZE ESTIMATION
-// =============================================================================
-/**
- * Estimate the half-width and half-height of a label's bounding box.
- */
-export function estimateLabelSize(label, fontSize) {
-    const avgCharWidth = fontSize * AVG_CHAR_WIDTH_RATIO;
-    const halfW = (label.length * avgCharWidth) / 2 + LABEL_PADDING_X;
-    const halfH = fontSize / 2 + LABEL_PADDING_Y;
-    return { halfW, halfH };
-}
-// =============================================================================
-// POLYLINE CLIPPING
-// =============================================================================
-/**
- * Build clipped edge path strings that leave a gap where the label sits.
- *
- * Transforms points into the label's local coordinate system (accounting for
- * rotation), finds where line segments cross the label bounding box, and
- * splits the polyline into visible portions outside the box.
- *
- * @returns SVG path data strings for each visible segment
- */
-export function buildClippedEdgePaths(points, labelCenter, labelHalfW, labelHalfH, angleDeg) {
-    const angleRad = (-angleDeg * Math.PI) / 180;
-    const cosA = Math.cos(angleRad);
-    const sinA = Math.sin(angleRad);
-    const toLocal = (p) => ({
-        x: (p.x - labelCenter.x) * cosA - (p.y - labelCenter.y) * sinA,
-        y: (p.x - labelCenter.x) * sinA + (p.y - labelCenter.y) * cosA,
-    });
-    const isInBox = (p) => {
-        const l = toLocal(p);
-        return Math.abs(l.x) < labelHalfW && Math.abs(l.y) < labelHalfH;
-    };
-    const findCrossings = (p1, p2) => {
-        const l1 = toLocal(p1);
-        const l2 = toLocal(p2);
-        const dx = l2.x - l1.x;
-        const dy = l2.y - l1.y;
-        const ts = [];
-        for (const bx of [-labelHalfW, labelHalfW]) {
-            if (dx !== 0) {
-                const t = (bx - l1.x) / dx;
-                if (t > 0 && t < 1) {
-                    const y = l1.y + t * dy;
-                    if (Math.abs(y) <= labelHalfH)
-                        ts.push(t);
-                }
-            }
-        }
-        for (const by of [-labelHalfH, labelHalfH]) {
-            if (dy !== 0) {
-                const t = (by - l1.y) / dy;
-                if (t > 0 && t < 1) {
-                    const x = l1.x + t * dx;
-                    if (Math.abs(x) <= labelHalfW)
-                        ts.push(t);
-                }
-            }
-        }
-        return ts.sort((a, b) => a - b);
-    };
-    const lerp = (p1, p2, t) => ({
-        x: p1.x + (p2.x - p1.x) * t,
-        y: p1.y + (p2.y - p1.y) * t,
-    });
-    const visibleSegments = [];
-    let current = [];
-    for (let i = 0; i < points.length; i++) {
-        const p = points[i];
-        const inside = isInBox(p);
-        if (i === 0) {
-            if (!inside)
-                current.push(p);
-            continue;
-        }
-        const prev = points[i - 1];
-        const prevInside = isInBox(prev);
-        const crossings = findCrossings(prev, p);
-        if (!prevInside && !inside && crossings.length === 0) {
-            current.push(p);
-        }
-        else if (!prevInside && !inside && crossings.length === 1) {
-            // Tangent touch — treat as no clipping
-            current.push(p);
-        }
-        else if (!prevInside && !inside && crossings.length >= 2) {
-            current.push(lerp(prev, p, crossings[0]));
-            visibleSegments.push(current);
-            current = [lerp(prev, p, crossings[crossings.length - 1]), p];
-        }
-        else if (!prevInside && inside) {
-            if (crossings.length > 0) {
-                current.push(lerp(prev, p, crossings[0]));
-            }
-            if (current.length >= 2)
-                visibleSegments.push(current);
-            current = [];
-        }
-        else if (prevInside && !inside) {
-            if (crossings.length > 0) {
-                current = [lerp(prev, p, crossings[crossings.length - 1])];
-            }
-            current.push(p);
-        }
-        // both inside — skip
-    }
-    if (current.length >= 2) {
-        visibleSegments.push(current);
-    }
-    const paths = visibleSegments
-        .filter((seg) => seg.length >= 2)
-        .map((seg) => seg.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' '));
-    // Fallback: if clipping consumed the entire edge, draw the original path
-    // rather than leaving a floating arrowhead with no line
-    if (paths.length === 0 && points.length >= 2) {
-        return [
-            points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' '),
-        ];
-    }
-    return paths;
-}

package/dist/app/editor/c4/hooks/useC4DiagramDrag.d.ts

@@ -1,38 +0,0 @@
-/**
- * useC4DiagramDrag - Hook for drag interaction on C4 diagram elements
- *
- * Provides drag-and-drop functionality for repositioning C4 diagram elements.
- * Uses window-level listeners during drag so the interaction continues even
- * when the cursor leaves the SVG bounds.
- */
-import { RefObject } from 'react';
-export interface UseC4DiagramDragProps {
-    /** Reference to the SVG element */
-    svgRef: RefObject<SVGSVGElement | null>;
-    /** Callback fired during drag with new position */
-    onNodeDrag?: (nodeId: string, x: number, y: number) => void;
-    /** Callback fired when drag ends */
-    onNodeDragEnd?: (nodeId: string, x: number, y: number) => void;
-    /** Whether drag interaction is enabled */
-    enabled: boolean;
-}
-export interface UseC4DiagramDragReturn {
-    /** ID of the node currently being dragged */
-    draggedNodeId: string | null;
-    /** Whether a drag is in progress */
-    isDragging: boolean;
-    /** Start dragging a node */
-    startNodeDrag: (nodeId: string, nodeX: number, nodeY: number, e: React.MouseEvent) => void;
-    /** Convert screen coordinates to SVG coordinates */
-    screenToSvg: (clientX: number, clientY: number) => {
-        x: number;
-        y: number;
-    } | null;
-}
-/**
- * Hook for managing drag interactions on C4 diagram nodes.
- *
- * During a drag, mousemove and mouseup are handled on `window` so the
- * interaction continues seamlessly when the cursor moves outside the SVG.
- */
-export declare function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }: UseC4DiagramDragProps): UseC4DiagramDragReturn;

package/dist/app/editor/c4/hooks/useC4DiagramDrag.js

@@ -1,112 +0,0 @@
-/**
- * useC4DiagramDrag - Hook for drag interaction on C4 diagram elements
- *
- * Provides drag-and-drop functionality for repositioning C4 diagram elements.
- * Uses window-level listeners during drag so the interaction continues even
- * when the cursor leaves the SVG bounds.
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-/**
- * Hook for managing drag interactions on C4 diagram nodes.
- *
- * During a drag, mousemove and mouseup are handled on `window` so the
- * interaction continues seamlessly when the cursor moves outside the SVG.
- */
-export function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }) {
-    const [draggedNodeId, setDraggedNodeId] = useState(null);
-    // Track the offset from cursor to node origin for smooth dragging
-    const dragOffsetRef = useRef({ x: 0, y: 0 });
-    // Track the last known position for dragEnd callback
-    const lastPositionRef = useRef({ x: 0, y: 0 });
-    // Locked CTM inverse captured at drag start — prevents the accelerating
-    // feedback loop where canvas expansion changes the scale mid-drag
-    const lockedCtmInverseRef = useRef(null);
-    // Refs for callbacks so window listeners always see latest values
-    const onNodeDragRef = useRef(onNodeDrag);
-    onNodeDragRef.current = onNodeDrag;
-    const onNodeDragEndRef = useRef(onNodeDragEnd);
-    onNodeDragEndRef.current = onNodeDragEnd;
-    const draggedNodeIdRef = useRef(null);
-    /**
-     * Convert screen (client) coordinates to SVG coordinates.
-     * Uses the locked CTM from drag start if available, otherwise live CTM.
-     */
-    const screenToSvg = useCallback((clientX, clientY) => {
-        const svg = svgRef.current;
-        if (!svg)
-            return null;
-        const point = svg.createSVGPoint();
-        point.x = clientX;
-        point.y = clientY;
-        const inverse = lockedCtmInverseRef.current ?? svg.getScreenCTM()?.inverse();
-        if (!inverse)
-            return null;
-        const svgPoint = point.matrixTransform(inverse);
-        return { x: svgPoint.x, y: svgPoint.y };
-    }, [svgRef]);
-    const screenToSvgRef = useRef(screenToSvg);
-    screenToSvgRef.current = screenToSvg;
-    /**
-     * Start dragging a node.
-     * Locks the screen-to-SVG transform so canvas resizing during drag
-     * doesn't cause accelerating movement.
-     */
-    const startNodeDrag = useCallback((nodeId, nodeX, nodeY, e) => {
-        if (!enabled)
-            return;
-        e.stopPropagation();
-        e.preventDefault();
-        // Lock the CTM at drag start
-        const svg = svgRef.current;
-        const ctm = svg?.getScreenCTM();
-        lockedCtmInverseRef.current = ctm ? ctm.inverse() : null;
-        const svgPoint = screenToSvg(e.clientX, e.clientY);
-        if (!svgPoint)
-            return;
-        dragOffsetRef.current = {
-            x: svgPoint.x - nodeX,
-            y: svgPoint.y - nodeY,
-        };
-        lastPositionRef.current = { x: nodeX, y: nodeY };
-        draggedNodeIdRef.current = nodeId;
-        setDraggedNodeId(nodeId);
-    }, [enabled, screenToSvg, svgRef]);
-    // Attach window-level listeners while dragging
-    useEffect(() => {
-        if (!draggedNodeId)
-            return;
-        const handleMouseMove = (e) => {
-            const nodeId = draggedNodeIdRef.current;
-            if (!nodeId)
-                return;
-            const svgPoint = screenToSvgRef.current(e.clientX, e.clientY);
-            if (!svgPoint)
-                return;
-            const newX = svgPoint.x - dragOffsetRef.current.x;
-            const newY = svgPoint.y - dragOffsetRef.current.y;
-            lastPositionRef.current = { x: newX, y: newY };
-            onNodeDragRef.current?.(nodeId, newX, newY);
-        };
-        const handleMouseUp = () => {
-            const nodeId = draggedNodeIdRef.current;
-            if (!nodeId)
-                return;
-            onNodeDragEndRef.current?.(nodeId, lastPositionRef.current.x, lastPositionRef.current.y);
-            draggedNodeIdRef.current = null;
-            lockedCtmInverseRef.current = null;
-            setDraggedNodeId(null);
-        };
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [draggedNodeId]);
-    return {
-        draggedNodeId,
-        isDragging: draggedNodeId !== null,
-        startNodeDrag,
-        screenToSvg,
-    };
-}

package/dist/app/editor/c4/layout.d.ts

@@ -1,25 +0,0 @@
-/**
- * C4 Layout Engine
- *
- * Uses @dagrejs/dagre for directed graph auto-layout of C4 architecture diagrams.
- * Supports nested elements (systems containing containers containing components)
- * with proper boundary group padding.
- */
-import type { C4Diagram, LayoutResult, LayoutNode, LayoutEdge, LayoutOptions, Point, ManualLayout } from './types.js';
-/**
- * Layout a C4 diagram using dagre for auto-positioning,
- * or manual positions if provided.
- *
- * @param diagram - The parsed C4 diagram AST
- * @param options - Layout configuration options
- * @param manualPositions - Optional manual positions for elements (bypasses dagre)
- * @returns Layout result with positioned nodes and routed edges
- */
-export declare function layoutC4Diagram(diagram: C4Diagram, options?: LayoutOptions, manualPositions?: Record<string, {
-    x: number;
-    y: number;
-}>): LayoutResult;
-/**
- * Re-export types for convenience.
- */
-export type { LayoutResult, LayoutNode, LayoutEdge, LayoutOptions, Point, ManualLayout };