feat: Add spatial workspace architecture design document and refactor card drag logic to use new LayoutCard drag state management.

frontend/src/desktop/LayoutSystem.ts

@@ -25,6 +25,7 @@ export class LayoutCard implements LayoutCardState {
     public store: LayoutStore;
     public dragStartX: number = 0;
     public dragStartY: number = 0;
+    private dragOffset: { x: number, y: number } | null = null;
 
     constructor(id: string, store: LayoutStore, initialData: Partial<LayoutCardState> = {}, ref: HTMLElement | null = null) {
         this.id = id;
@@ -39,11 +40,28 @@ export class LayoutCard implements LayoutCardState {
         this.applyTransform();
     }
 
-    captureDragStart() {
+    beginDrag(offset: { x: number, y: number }) {
+        this.dragOffset = offset;
         this.dragStartX = this.x;
         this.dragStartY = this.y;
     }
 
+    continueDrag(delta: { x: number, y: number }) {
+        if (!this.dragOffset) return;
+
+        const newX = this.x + delta.x;
+        const newY = this.y + delta.y;
+
+        this.update({
+            x: newX,
+            y: newY
+        });
+    }
+
+    finishDrag() {
+        this.dragOffset = null;
+    }
+
     update(changes: Partial<LayoutCardState>) {
         Object.assign(this, changes);
         if (changes.width !== undefined || changes.height !== undefined) {