feat: Introduce useCardPointer for card-specific pointer events, add spatial capabilities to LayoutSystem

frontend/src/desktop/LayoutSystem.ts

@@ -20,10 +20,14 @@ export class LayoutCard implements LayoutCardState {
     height: number = 0;
     ref: HTMLElement | null = null;
 
+    private _innerRadius: number = 0;
+    private _outerRadius: number = 0;
+
     constructor(id: string, initialData: Partial<LayoutCardState> = {}, ref: HTMLElement | null = null) {
         this.id = id;
         Object.assign(this, initialData);
         this.ref = ref;
+        this.recalculateRadii();
     }
 
     setRef(ref: HTMLElement | null) {
@@ -33,9 +37,17 @@ export class LayoutCard implements LayoutCardState {
 
     update(changes: Partial<LayoutCardState>) {
         Object.assign(this, changes);
+        if (changes.width !== undefined || changes.height !== undefined) {
+            this.recalculateRadii();
+        }
         this.applyTransform();
     }
 
+    private recalculateRadii() {
+        this._innerRadius = Math.min(this.width, this.height) / 2;
+        this._outerRadius = Math.sqrt(this.width * this.width + this.height * this.height) / 2;
+    }
+
     private applyTransform() {
         if (this.ref) {
             this.ref.style.transform =
@@ -57,6 +69,14 @@ export class LayoutCard implements LayoutCardState {
             height: this.height
         };
     }
+
+    get innerRadius(): number {
+        return this._innerRadius;
+    }
+
+    get outerRadius(): number {
+        return this._outerRadius;
+    }
 }
 
 export class LayoutStore {
@@ -117,6 +137,19 @@ export class LayoutStore {
         this.update(id, { z: ++this.zCounter });
     }
 
+    getCardsInCircle(x: number, y: number, radius: number): LayoutCard[] {
+        const result: LayoutCard[] = [];
+        for (const card of this.items.values()) {
+            const dx = card.x - x;
+            const dy = card.y - y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < radius + card.outerRadius) {
+                result.push(card);
+            }
+        }
+        return result;
+    }
+
     getSnapshot() {
         return Array.from(this.items.values()).map(card => card.toSnapshot());
     }