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

frontend/src/desktop/DesktopWorkspace.tsx

@@ -10,6 +10,7 @@ import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
 import DesktopDocumentCard from './DesktopDocumentCard';
 import usePreviewMetadata from './hooks/usePreviewMetadata';
 import useDeskTagInteractions from './tags/useDeskTagInteractions';
+import { useCardPointer } from './useCardPointer';
 import '../styles/workspace/workspace-layout.css';
 import '../styles/workspace/workspace-items.css';
 import '../styles/workspace/workspace-cards.css';
@@ -54,6 +55,21 @@ export interface DesktopWorkspaceProps {
   onDocumentTagDrop?: (docId: Identifier, tag: any) => void;
 }
 
+// Wrapper to handle hooks per card
+const DesktopDocumentContainer: React.FC<React.ComponentProps<typeof DesktopDocumentCard>> = React.memo((props) => {
+  const { layoutCard, selected } = props;
+  // We assume layoutCard is always present in this context
+  const cardPointerHandlers = useCardPointer(layoutCard!, !!selected);
+
+  return (
+    <DesktopDocumentCard
+      {...props}
+      cardPointerHandlers={cardPointerHandlers}
+    />
+  );
+});
+DesktopDocumentContainer.displayName = 'DesktopDocumentContainer';
+
 const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
   entries,
   ensureAssetUrl,
@@ -149,18 +165,18 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
     <>
       <div
         className="desk-shell"
-        onPointerDown={(e) => {
-          if (e.target === e.currentTarget) {
-            onClearSelection();
-            focusShell();
-          }
-        }}
       >
         <div
           className="desk-canvas"
           ref={containerRef}
           tabIndex={0}
           onKeyDown={handleShellKeyDown}
+          onPointerDown={(e) => {
+            if (e.target === e.currentTarget) {
+              onClearSelection();
+              focusShell();
+            }
+          }}
         >
           {items.map((doc, index) => {
             const docId = doc.id ? String(doc.id) : `temp-${index}`;
@@ -173,7 +189,7 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
             });
 
             return (
-              <DesktopDocumentCard
+              <DesktopDocumentContainer
                 key={docId}
                 doc={doc}
                 style={{
@@ -191,7 +207,6 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
                 ensureAssetUrl={ensureAssetUrl}
                 getDocumentAsset={getDocumentAsset}
                 handleNavigatorSnapshot={() => { }}
-                cardPointerHandlers={undefined}
                 onDocumentActivate={onDocumentActivate}
                 layoutCard={layoutCard}
                 onTagDragEnter={tagInteractions.handleTagDragEnterDoc}