Smart alignment guides, snap system, gap reader, and resize snap

[alizme]

Summary

• Screen dragging — drag screens by name label or background, with undo/redo support via batched patches
• Alignment snap guides — edge, center, and equal-size alignment detection with 5px snap threshold; shows dashed guide lines and live distance rulers during drag
• Gap distance reader — hold Option/Alt with a frame selected, hover another frame to see edge-to-edge distances; hover the parent container to see 4-side inset distances
• Resize snap guides — when resizing a frame inside a stack/auto-layout parent, the dragged edge snaps to sibling frame edges with dashed guide lines
• Selection overlay fix — selection ring now tracks screen position during drag

New files

• alignment-guides.ts — pure snap/alignment computation (edges, centers, equal-size multi-guides, distance indicators)
• alignment-overlay.svelte — SVG overlay for guide lines and distance labels
• gap-measurement.ts — gap and inset distance computation between two rects
• gap-overlay.svelte — SVG overlay for gap measurement labels

Modified files

• canvas.svelte — screen drag handling, Alt+hover gap measurement, data-id on screen divs
• editor-state.svelte.ts — public findParent(), selectedNode in measurement effect
• selection-overlay.svelte — resize snap logic with sibling edge detection and guide SVG rendering

Test plan

• Drag a screen near another screen — verify snap guides appear at edges, centers, and matching-size edges
• Verify distance labels update live while dragging along a guide
• Verify guides and labels clear on drag end
• Undo/redo restores screen to pre-drag position
• Select a screen, hold Option/Alt, hover another screen — verify gap distance labels appear
• Select a child frame, hold Option/Alt, hover parent screen — verify 4-side inset distances
• Release Option — verify measurements clear immediately
• Verify selection ring moves in sync with dragged screen (no lag)
• Resize a child frame edge inside a stack — verify it snaps to sibling edges with guide lines
• Resize corner handles — verify both axes snap simultaneously
• Verify resize guides clear on resize end

🤖 Generated with Claude Code