diff --git a/frontend/src/skeuomorphic_ws.css b/frontend/src/DesktopWorkspace.css
similarity index 88%
rename from frontend/src/skeuomorphic_ws.css
rename to frontend/src/DesktopWorkspace.css
index f2cab9f..efb4955 100644
--- a/frontend/src/skeuomorphic_ws.css
+++ b/frontend/src/DesktopWorkspace.css
@@ -6,6 +6,20 @@
   min-height: 0;
 }
 
+.skeuo-item {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+  cursor: grab;
+  touch-action: none;
+  transform-origin: center center;
+  transition: box-shadow 0.16s ease;
+  outline: none;
+  will-change: transform;
+}
+
 .skeuo-shell {
   flex: 1;
   display: flex;
@@ -33,28 +47,14 @@
   font-size: 0.95rem;
 }
 
-.skeuo-item {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: auto;
-  cursor: grab;
-  touch-action: none;
-  transform-origin: center center;
-  transition: transform 0.28s ease, box-shadow 0.16s ease;
-  outline: none;
-  will-change: transform;
-}
+
 
 .skeuo-item__body {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  flex-grow: 1;
 }
 
 .skeuo-item:focus-visible {
@@ -68,8 +68,8 @@
 }
 
 .skeuo-item.is-tag-target .skeuo-item__card {
-  outline: 1em dashed var(--accent);
-  outline-offset: 1.41em;
+  outline: 0.35rem dashed var(--accent);
+  outline-offset: 0.35rem;
 }
 
 .skeuo-item.is-tag-pending .skeuo-item__card {
@@ -125,12 +125,12 @@
 
 .skeuo-card__nav {
   position: absolute;
-  bottom: calc(3em * 0.707 * var(--nav-scale));
+  bottom: 1.8rem;
   left: 50%;
-  transform: translateX(-50%) scale(calc(0.707 * var(--nav-scale, 1)));
+  transform: translateX(-50%);
   transform-origin: center;
   display: flex;
-  gap: 2rem;
+  gap: 1.5rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
@@ -145,10 +145,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 3.3em;
-  height: 3.3em;
-  padding: 0.36em;
-  border-radius: 3.3em;
+  width: 2.4em;
+  height: 2.4em;
+  padding: 0.25em;
+  border-radius: 50%;
   border: none;
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
@@ -194,9 +194,17 @@ body.skeuo-cursor-remove * {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
   overflow: hidden;
-  --nav-scale: 1;
+}
+
+.skeuo-item__card img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
 }
 
 .skeuo-item__card--empty {
@@ -238,6 +246,7 @@ body.skeuo-cursor-remove * {
   color: #3b3b3b;
   max-width: 90%;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
 }
diff --git a/frontend/src/skeuomorphic_ws.jsx b/frontend/src/DesktopWorkspace.jsx
similarity index 61%
rename from frontend/src/skeuomorphic_ws.jsx
rename to frontend/src/DesktopWorkspace.jsx
index 24b3c8a..4887a39 100644
--- a/frontend/src/skeuomorphic_ws.jsx
+++ b/frontend/src/DesktopWorkspace.jsx
@@ -9,9 +9,13 @@ import React, {
 import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
 import { useAssetNavigator } from './hooks/useAssetNavigator';
 import { ArrowLeftIcon, ArrowRightIcon, RefreshIcon } from './ui/icons';
+import { clamp, formatTransform } from './desktop/math';
+import { preventAll } from './desktop/events';
+import useDocumentDrag from './desktop/useDocumentDrag';
+import { DesktopProvider, useDesktopContext } from './desktop/context';
 import PreviewZoomOverlay from './detail/PreviewZoomOverlay';
 import { getTagColorStyle } from './utils/colors';
-import './skeuomorphic_ws.css';
+import './DesktopWorkspace.css';
 
 const ITEM_WIDTH = 220;
 const ITEM_HEIGHT = 260;
@@ -35,6 +39,42 @@ const DEBUG_DRAG = false;
 const DEBUG_FOCUS = true;
 const DEBUG_DROP = true;
 
+const readTransferData = (dataTransfer, mimeTypes) => {
+  if (!dataTransfer) {
+    return null;
+  }
+  for (let index = 0; index < mimeTypes.length; index += 1) {
+    const type = mimeTypes[index];
+    try {
+      const raw = dataTransfer.getData(type);
+      if (raw) {
+        return raw;
+      }
+    } catch (
+      // eslint-disable-next-line no-empty
+      error
+    ) {}
+  }
+  return null;
+};
+
+const parseTagTransferPayload = (event) => {
+  const raw = readTransferData(event?.dataTransfer, [
+    'application/x-papercrate-tag',
+    'text/papercrate-tag',
+  ]);
+  if (!raw) {
+    return null;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch (
+    // eslint-disable-next-line no-empty
+    error
+  ) {}
+  return null;
+};
+
 const resolveTagKey = (tag) => {
   if (!tag) {
     return null;
@@ -48,14 +88,15 @@ const SkeuoPreviewCard = ({
   title,
   ensureAssetUrl,
   getDocumentAsset,
-  navScale = 1,
   prefetch = 3,
   onNavigatorSnapshot,
+  shouldLoad = true,
+  imageSize = null,
 }) => {
   const navigator = useAssetNavigator({
     document: doc,
     assetType: 'preview',
-    ensureAssetUrl,
+    ensureAssetUrl: shouldLoad ? ensureAssetUrl : null,
     getAsset: getDocumentAsset,
     prefetch,
   });
@@ -100,7 +141,6 @@ const SkeuoPreviewCard = ({
   const cardClasses = ['skeuo-item__card'];
   if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
   const showNav = hasPreview && (cardinality > 1 || canGoPrev || canGoNext);
-  const navStyle = useMemo(() => ({ '--nav-scale': navScale }), [navScale]);
 
   return (
     <div className={cardClasses.join(' ')}>
@@ -115,30 +155,25 @@ const SkeuoPreviewCard = ({
         </div>
       )}
       {showNav ? (
-        <div className="skeuo-card__nav" style={navStyle}>
+        <div className="skeuo-card__nav">
           <button
             type="button"
             className="skeuo-card__nav-button"
             onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
               navigator.goPrev();
             }}
             onPointerDown={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             onPointerUp={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             onMouseDown={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             onMouseUp={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             disabled={!canGoPrev}
             aria-label="Previous preview"
@@ -149,25 +184,20 @@ const SkeuoPreviewCard = ({
             type="button"
             className="skeuo-card__nav-button"
             onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
               navigator.goNext();
             }}
             onPointerDown={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             onPointerUp={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             onMouseDown={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             onMouseUp={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
+              preventAll(event);
             }}
             disabled={!canGoNext}
             aria-label="Next preview"
@@ -292,6 +322,8 @@ const generateInitialLayout = (
       centerY,
       rotation,
       z: currentZ,
+      width,
+      height,
     });
     maxZ = Math.max(maxZ, currentZ);
 
@@ -327,218 +359,6 @@ const cleanupPreview = (previewNode) => {
   }
 };
 
-const useDocumentDrag = ({
-  layoutRef,
-  itemRefs,
-  documentLookup,
-  ensureDocumentSize,
-  resolveBaseMetrics,
-  bringToFront,
-  setDraggingId,
-  syncLayoutSnapshot,
-  canvasSize,
-  openOverlayForDoc,
-}) => {
-  const dragStateRef = useRef(null);
-
-  const finishDrag = useCallback(
-    (pointerId) => {
-      const state = dragStateRef.current;
-      if (!state || state.pointerId !== pointerId) {
-        return;
-      }
-      const capturedTarget = state.capturedTarget;
-      if (capturedTarget && typeof capturedTarget.releasePointerCapture === 'function') {
-        try {
-          capturedTarget.releasePointerCapture(pointerId);
-        } catch (
-          // eslint-disable-next-line no-empty
-          error
-        ) {}
-      }
-      dragStateRef.current = null;
-      setDraggingId((current) => (current === state.docId ? null : current));
-      syncLayoutSnapshot();
-    },
-    [setDraggingId, syncLayoutSnapshot],
-  );
-
-  const handlePointerDown = useCallback(
-    (event, docId) => {
-      if (DEBUG_DRAG) {
-        console.log(
-          '[skeuo] handlePointerDown fired for doc',
-          docId,
-          'button',
-          event.button,
-          'pointerType',
-          event.pointerType,
-          'pointerId',
-          event.pointerId,
-        );
-      }
-      event.preventDefault();
-      const entry = layoutRef.current.get(docId) || null;
-      const doc = documentLookup.get(docId) || null;
-      const { width: docWidth, height: docHeight } = ensureDocumentSize(doc);
-      const { baseScale } = resolveBaseMetrics(doc, docWidth, docHeight);
-      const defaultCenterX = CANVAS_PADDING + docWidth / 2;
-      const defaultCenterY = CANVAS_PADDING + docHeight / 2;
-      const centerX = typeof entry?.centerX === 'number' ? entry.centerX : defaultCenterX;
-      const centerY = typeof entry?.centerY === 'number' ? entry.centerY : defaultCenterY;
-
-      if (entry && (entry.centerX !== centerX || entry.centerY !== centerY)) {
-        layoutRef.current.set(docId, { ...entry, centerX, centerY });
-      }
-
-      bringToFront(docId);
-      const capturedTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-      if (capturedTarget && typeof capturedTarget.setPointerCapture === 'function') {
-        try {
-          capturedTarget.setPointerCapture(event.pointerId);
-        } catch (
-          // eslint-disable-next-line no-empty
-          error
-        ) {}
-      }
-      dragStateRef.current = {
-        docId,
-        pointerId: event.pointerId,
-        originCenterX: centerX,
-        originCenterY: centerY,
-        startX: event.clientX,
-        startY: event.clientY,
-        rotation: entry?.rotation ?? 0,
-        moved: false,
-        locked: false,
-        width: docWidth,
-        height: docHeight,
-        scale: baseScale,
-        capturedTarget,
-      };
-      setDraggingId(docId);
-    },
-    [bringToFront, documentLookup, ensureDocumentSize, layoutRef, resolveBaseMetrics, setDraggingId],
-  );
-
-  const handlePointerMove = useCallback(
-    (event) => {
-      const state = dragStateRef.current;
-      if (!state) {
-        if (DEBUG_DRAG) {
-          console.log('[skeuo] handlePointerMove: no drag state for pointer', event.pointerId);
-        }
-        return;
-      }
-      if (state.pointerId !== event.pointerId) {
-        if (DEBUG_DRAG) {
-          console.log(
-            '[skeuo] handlePointerMove: pointer mismatch expected',
-            state.pointerId,
-            'got',
-            event.pointerId,
-          );
-        }
-        return;
-      }
-      event.preventDefault();
-      if (state.locked) {
-        if (DEBUG_DRAG) {
-          console.log('[skeuo] handlePointerMove: locked drag for doc', state.docId);
-        }
-        return;
-      }
-
-      const entry = layoutRef.current.get(state.docId);
-      if (!entry) {
-        return;
-      }
-
-      const deltaX = event.clientX - state.startX;
-      const deltaY = event.clientY - state.startY;
-      const nextCenterX = state.originCenterX + deltaX;
-      const nextCenterY = state.originCenterY + deltaY;
-
-      const docWidth = state.width;
-      const docHeight = state.height;
-      const halfWidth = docWidth / 2;
-      const halfHeight = docHeight / 2;
-      const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
-      const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
-      const minCenterX = CANVAS_PADDING + halfWidth;
-      const maxCenterX = Math.max(minCenterX, canvasWidth - CANVAS_PADDING - halfWidth);
-      const minCenterY = CANVAS_PADDING + halfHeight;
-      const maxCenterY = Math.max(minCenterY, canvasHeight - CANVAS_PADDING - halfHeight);
-      const clampedCenterX = clamp(nextCenterX, minCenterX, maxCenterX);
-      const clampedCenterY = clamp(nextCenterY, minCenterY, maxCenterY);
-
-      const prevCenterX = typeof entry.centerX === 'number' ? entry.centerX : state.originCenterX;
-      const prevCenterY = typeof entry.centerY === 'number' ? entry.centerY : state.originCenterY;
-      if (Math.abs(clampedCenterX - prevCenterX) < 0.5 && Math.abs(clampedCenterY - prevCenterY) < 0.5) {
-        if (DEBUG_DRAG) {
-          console.log('[skeuo] handlePointerMove: movement under threshold for doc', state.docId);
-        }
-        return;
-      }
-
-      const updated = { ...entry, centerX: clampedCenterX, centerY: clampedCenterY };
-      layoutRef.current.set(state.docId, updated);
-
-      const node = itemRefs.current.get(state.docId);
-      if (node) {
-        node.style.transform = formatTransform(
-          clampedCenterX,
-          clampedCenterY,
-          state.rotation,
-          state.scale || 1,
-        );
-      }
-      state.moved = true;
-      if (DEBUG_DRAG) {
-        console.log('[skeuo] handlePointerMove: moved doc', state.docId, 'to', clampedCenterX, clampedCenterY);
-      }
-    },
-    [canvasSize.height, canvasSize.width, itemRefs, layoutRef],
-  );
-
-  const handlePointerUp = useCallback(
-    (event) => {
-      const state = dragStateRef.current;
-      if (state && state.pointerId === event.pointerId) {
-        const moved = Boolean(state.moved);
-        const docId = state.docId;
-        finishDrag(event.pointerId);
-        if (!moved) {
-          const originInfo = {
-            rotation: state.rotation || 0,
-            scale: state.scale || 1,
-            width: state.width,
-            height: state.height,
-          };
-          openOverlayForDoc(docId, originInfo);
-        }
-        return;
-      }
-      finishDrag(event.pointerId);
-    },
-    [finishDrag, openOverlayForDoc],
-  );
-
-  const handlePointerCancel = useCallback(
-    (event) => {
-      finishDrag(event.pointerId);
-    },
-    [finishDrag],
-  );
-
-  return {
-    handlePointerDown,
-    handlePointerMove,
-    handlePointerUp,
-    handlePointerCancel,
-  };
-};
-
 const seededRandom = (input) => {
   const text = String(input);
   let hash = 2166136261;
@@ -558,51 +378,55 @@ const randomRangeFromSeed = (seedKey, min, max) => {
 
 const buildKey = (docId, suffix) => `${docId}::${suffix}`;
 
-const clamp = (value, min, max) => {
-  if (value < min) return min;
-  if (value > max) return max;
-  return value;
-};
-
 const clampCardDimensions = (width, height) => {
-  let nextWidth = Number(width);
-  let nextHeight = Number(height);
-  if (!Number.isFinite(nextWidth) || nextWidth <= 0 || !Number.isFinite(nextHeight) || nextHeight <= 0) {
+  let w = Number(width);
+  let h = Number(height);
+
+  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
     return null;
   }
 
-  const scaleDown = Math.min(1, CARD_MAX / nextWidth, CARD_MAX / nextHeight);
-  nextWidth *= scaleDown;
-  nextHeight *= scaleDown;
+  const scaleToFit = (maxWidth, maxHeight, currentWidth, currentHeight) => {
+    if (currentWidth <= maxWidth && currentHeight <= maxHeight) {
+      return 1;
+    }
+    return Math.min(maxWidth / currentWidth, maxHeight / currentHeight);
+  };
 
-  const minDim = Math.min(nextWidth, nextHeight);
-  if (minDim > 0 && minDim < CARD_MIN) {
-    const scaleUp = CARD_MIN / minDim;
-    nextWidth *= scaleUp;
-    nextHeight *= scaleUp;
+  const scaleToFill = (minWidth, minHeight, currentWidth, currentHeight) => {
+    if (currentWidth >= minWidth && currentHeight >= minHeight) {
+      return 1;
+    }
+    return Math.max(minWidth / currentWidth, minHeight / currentHeight);
+  };
 
-    const adjust = Math.min(1, CARD_MAX / nextWidth, CARD_MAX / nextHeight);
-    nextWidth *= adjust;
-    nextHeight *= adjust;
+  // Step 1: scale down so both dimensions fit within the maximum bounds.
+  const downScale = scaleToFit(CARD_MAX, CARD_MAX, w, h);
+  w *= downScale;
+  h *= downScale;
+
+  // Step 2: if the card is too small, scale up (preserving ratio).
+  const upScale = scaleToFill(CARD_MIN, CARD_MIN, w, h);
+  w *= upScale;
+  h *= upScale;
+
+  // Step 3: Re-apply upper bounds if the scale-up pushed us over.
+  if (w > CARD_MAX || h > CARD_MAX) {
+    const adjust = scaleToFit(CARD_MAX, CARD_MAX, w, h);
+    w *= adjust;
+    h *= adjust;
   }
 
-  nextWidth = clamp(nextWidth, CARD_MIN, CARD_MAX);
-  nextHeight = clamp(nextHeight, CARD_MIN, CARD_MAX);
-
   return {
-    width: nextWidth,
-    height: nextHeight,
+    width: w,
+    height: h,
   };
 };
 
-const formatTransform = (x, y, rotation = 0, scale = 1) =>
-  `translate3d(${x}px, ${y}px, 0) rotate(${rotation}deg) scale(${scale})`;
-
-const SkeuomorphicWorkspace = ({
+const DesktopWorkspace = ({
   documents = [],
   searchResults = null,
   onDocumentOpen,
-  resolveThumbnailUrl,
   onAssignTagToDocument = null,
   onRemoveTagFromDocument = null,
   ensureAssetUrl = null,
@@ -620,6 +444,7 @@ const SkeuomorphicWorkspace = ({
   const [layoutSnapshot, setLayoutSnapshot] = useState(() => new Map());
 
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const [visibleDocIds, setVisibleDocIds] = useState(() => new Set());
   const [draggingId, setDraggingId] = useState(null);
   const [overlayDocId, setOverlayDocId] = useState(null);
   const [overlayOriginRect, setOverlayOriginRect] = useState(null);
@@ -634,53 +459,36 @@ const SkeuomorphicWorkspace = ({
   const docSizeMapRef = useRef(new Map());
   const documentLookupRef = useRef(new Map());
   const removalCursorActiveRef = useRef(false);
-  const applySnapshotDimensions = useCallback(
-    (docId, snapshot) => {
-      if (!docId || !snapshot) {
-        return;
+  const documentLookup = useMemo(() => {
+    const map = new Map();
+    items.forEach((doc) => {
+      const key = doc?.id != null ? String(doc.id) : null;
+      if (key) {
+        map.set(key, doc);
       }
+    });
+    return map;
+  }, [items]);
 
-      const doc = documentLookupRef.current.get(docId);
-      if (!doc) {
-        return;
-      }
-
-      const width = Number(snapshot.width);
-      const height = Number(snapshot.height);
-      if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
-        return;
-      }
-
-      const normalized = clampCardDimensions(width, height);
-      if (!normalized) {
-        return;
-      }
-
-      const key = resolveSizeKey(doc);
-      const existing = docSizeMapRef.current.get(key);
-      if (existing && existing.width === normalized.width && existing.height === normalized.height) {
-        return;
-      }
-
-      docSizeMapRef.current.set(key, normalized);
-      setDocSizeVersion((value) => value + 1);
-    },
-    [],
-  );
+  useEffect(() => {
+    documentLookupRef.current = documentLookup;
+  }, [documentLookup]);
+  const applySnapshotDimensions = useCallback(() => {}, []);
   const handleNavigatorSnapshot = useCallback(
     (docId, snapshot) => {
-      if (!docId) {
+      const docKey = docId != null ? String(docId) : null;
+      if (!docKey) {
         return;
       }
 
       setPreviewSnapshots((previous) => {
-        const prevSnapshot = previous.get(docId);
+        const prevSnapshot = previous.get(docKey);
         if (!snapshot) {
-          if (!previous.has(docId)) {
+          if (!previous.has(docKey)) {
             return previous;
           }
           const next = new Map(previous);
-          next.delete(docId);
+          next.delete(docKey);
           return next;
         }
 
@@ -699,12 +507,12 @@ const SkeuomorphicWorkspace = ({
         if (sameSnapshot) {
           return previous;
         }
-        next.set(docId, snapshot);
+        next.set(docKey, snapshot);
         return next;
       });
 
       if (snapshot) {
-        applySnapshotDimensions(docId, snapshot);
+        applySnapshotDimensions(docKey, snapshot);
       }
     },
     [applySnapshotDimensions],
@@ -725,7 +533,7 @@ const SkeuomorphicWorkspace = ({
   const resolvePreviewAsset = useCallback(
     (doc) => {
       if (!doc) return null;
-      return getDocumentAsset(doc, 'preview');
+      return getDocumentAsset(doc, 'thumbnail');
     },
     [getDocumentAsset],
   );
@@ -734,14 +542,6 @@ const SkeuomorphicWorkspace = ({
     (doc) => {
       if (!doc) return null;
 
-      const snapshot = previewSnapshots.get(doc.id);
-      if (snapshot && snapshot.width && snapshot.height) {
-        return {
-          width: snapshot.width,
-          height: snapshot.height,
-        };
-      }
-
       const asset = resolvePreviewAsset(doc);
       const view = createAssetView(asset);
       const metadata = view.getPrimaryMetadata() || {};
@@ -752,7 +552,7 @@ const SkeuomorphicWorkspace = ({
       }
       return null;
     },
-    [previewSnapshots, resolvePreviewAsset],
+    [resolvePreviewAsset],
   );
 
   useEffect(() => {
@@ -760,57 +560,64 @@ const SkeuomorphicWorkspace = ({
       return;
     }
 
-    items.forEach((doc) => {
+    visibleDocIds.forEach((docId) => {
+      const doc = documentLookup.get(docId);
+      if (!doc) {
+        return;
+      }
       resolveDocumentAssetUrl(doc, 'preview', {
         ensureAssetUrl,
         getAsset: getDocumentAsset,
       });
     });
-  }, [items, ensureAssetUrl, getDocumentAsset]);
+  }, [visibleDocIds, ensureAssetUrl, getDocumentAsset, documentLookup]);
 
-  const focusCanvas = useCallback(() => {
+  const requestCanvasFocus = useCallback(() => {
     const canvas = containerRef.current;
-    if (canvas && typeof canvas.focus === 'function') {
-      const focusTarget = () => {
-        try {
-          if (DEBUG_FOCUS) {
-            console.log('[skeuo] focusCanvas -> attempting focus', canvas);
-          }
-          canvas.focus({ preventScroll: true });
-          if (DEBUG_FOCUS) {
-            console.log('[skeuo] focusCanvas: applied focus. activeElement:', document?.activeElement);
-          }
-        } catch (
-          // eslint-disable-next-line no-empty
-          error
-        ) {}
-      };
-      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
-        window.requestAnimationFrame(focusTarget);
-      } else {
-        setTimeout(focusTarget, 0);
-      }
-      if (DEBUG_FOCUS) {
-        console.log('[skeuo] focusCanvas: scheduling focus. activeElement:', document?.activeElement);
-      }
-    }
-  }, []);
-
-  const queueFocusCanvas = useCallback(() => {
-    if (typeof window === 'undefined') {
-      focusCanvas();
+    if (!canvas || typeof canvas.focus !== 'function') {
       return;
     }
-  if (DEBUG_FOCUS) {
-    console.log('[skeuo] queueFocusCanvas -> scheduling deferred focus');
-  }
-  setTimeout(() => {
-    if (DEBUG_FOCUS) {
-      console.log('[skeuo] queueFocusCanvas -> executing deferred focus');
+
+    const focusTarget = () => {
+      try {
+        if (DEBUG_FOCUS) {
+          console.log('[skeuo] focusCanvas -> attempting focus', canvas);
+        }
+        canvas.focus({ preventScroll: true });
+        if (DEBUG_FOCUS) {
+          console.log('[skeuo] focusCanvas: applied focus. activeElement:', document?.activeElement);
+        }
+      } catch (
+        // eslint-disable-next-line no-empty
+        error
+      ) {}
+    };
+
+    if (typeof window === 'undefined') {
+      focusTarget();
+      return;
     }
-      focusCanvas();
-    }, 0);
-  }, [focusCanvas]);
+
+    if (DEBUG_FOCUS) {
+      console.log('[skeuo] requestCanvasFocus -> scheduling deferred focus');
+    }
+
+    if (typeof window.requestAnimationFrame === 'function') {
+      window.requestAnimationFrame(() => {
+        if (DEBUG_FOCUS) {
+          console.log('[skeuo] requestCanvasFocus -> executing deferred focus (rAF)');
+        }
+        focusTarget();
+      });
+    } else {
+      setTimeout(() => {
+        if (DEBUG_FOCUS) {
+          console.log('[skeuo] requestCanvasFocus -> executing deferred focus (timeout)');
+        }
+        focusTarget();
+      }, 0);
+    }
+  }, []);
 
   const updateRemovalCursor = useCallback((active) => {
     if (typeof document === 'undefined') {
@@ -881,20 +688,6 @@ const SkeuomorphicWorkspace = ({
     return normalized;
   }, [resolvePreviewDimensions]);
 
-  const documentLookup = useMemo(() => {
-    const map = new Map();
-    items.forEach((doc) => {
-      if (doc?.id) {
-        map.set(doc.id, doc);
-      }
-    });
-    return map;
-  }, [items]);
-
-  useEffect(() => {
-    documentLookupRef.current = documentLookup;
-  }, [documentLookup]);
-
   useEffect(() => {
     docSizeMapRef.current = new Map();
     setDocSizeVersion((value) => value + 1);
@@ -958,7 +751,220 @@ const SkeuomorphicWorkspace = ({
     [resolvePreviewDimensions],
   );
 
-  const syncLayoutSnapshot = useCallback(() => {
+  const polygonArea = (points) => {
+  let area = 0;
+  const count = points.length;
+  for (let index = 0; index < count; index += 1) {
+    const next = (index + 1) % count;
+    area += points[index].x * points[next].y;
+    area -= points[next].x * points[index].y;
+  }
+  return area / 2;
+};
+
+const signedDistance = (ax, ay, bx, by, px, py) => (bx - ax) * (py - ay) - (by - ay) * (px - ax);
+
+const clipPolygonWithEdge = (subject, edgeStart, edgeEnd) => {
+  if (!subject.length) {
+    return [];
+  }
+  const result = [];
+  let prev = subject[subject.length - 1];
+  let prevInside = signedDistance(edgeStart.x, edgeStart.y, edgeEnd.x, edgeEnd.y, prev.x, prev.y) >= 0;
+  subject.forEach((curr) => {
+    const currInside = signedDistance(edgeStart.x, edgeStart.y, edgeEnd.x, edgeEnd.y, curr.x, curr.y) >= 0;
+    if (currInside !== prevInside) {
+      const dx = curr.x - prev.x;
+      const dy = curr.y - prev.y;
+      const denom = (edgeEnd.x - edgeStart.x) * dy - (edgeEnd.y - edgeStart.y) * dx;
+      if (Math.abs(denom) > 1e-9) {
+        const t = ((edgeStart.x - prev.x) * dy - (edgeStart.y - prev.y) * dx) / denom;
+        result.push({
+          x: edgeStart.x + t * (edgeEnd.x - edgeStart.x),
+          y: edgeStart.y + t * (edgeEnd.y - edgeStart.y),
+        });
+      }
+    }
+    if (currInside) {
+      result.push(curr);
+    }
+    prev = curr;
+    prevInside = currInside;
+  });
+  return result;
+};
+
+const clipPolygon = (subject, clipShape) => {
+  if (!subject.length) {
+    return [];
+  }
+  let output = subject;
+  let prev = clipShape[clipShape.length - 1];
+  for (let index = 0; index < clipShape.length; index += 1) {
+    const curr = clipShape[index];
+    output = clipPolygonWithEdge(output, prev, curr);
+    if (!output.length) {
+      return [];
+    }
+    prev = curr;
+  }
+  return output;
+};
+
+const isPointInsideConvex = (point, polygon) => {
+  if (!polygon.length) {
+    return false;
+  }
+  let prev = polygon[polygon.length - 1];
+  for (let index = 0; index < polygon.length; index += 1) {
+    const curr = polygon[index];
+    if (signedDistance(prev.x, prev.y, curr.x, curr.y, point.x, point.y) < -1e-6) {
+      return false;
+    }
+    prev = curr;
+  }
+  return true;
+};
+
+const polygonCentroid = (polygon) => {
+  let x = 0;
+  let y = 0;
+  polygon.forEach((point) => {
+    x += point.x;
+    y += point.y;
+  });
+  const count = polygon.length || 1;
+  return {
+    x: x / count,
+    y: y / count,
+  };
+};
+
+const recalcVisibleDocIds = useCallback(() => {
+    const layoutMap = layoutRef.current;
+    const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
+    const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
+
+    if (!layoutMap.size || canvasWidth <= 0 || canvasHeight <= 0) {
+      setVisibleDocIds((prev) => (prev.size ? new Set() : prev));
+      return;
+    }
+
+    const viewport = [
+      { x: 0, y: 0 },
+      { x: canvasWidth, y: 0 },
+      { x: canvasWidth, y: canvasHeight },
+      { x: 0, y: canvasHeight },
+    ];
+
+    const entries = [];
+    layoutMap.forEach((entry, rawId) => {
+      const docKey = rawId != null ? String(rawId) : null;
+      if (!docKey) {
+        return;
+      }
+      const doc = documentLookup.get(docKey);
+      if (!doc) {
+        return;
+      }
+      const { width: cardWidth, height: cardHeight } = ensureDocumentSize(doc);
+      const rotationDeg = Number(entry?.rotation) || 0;
+      const rotationRad = (rotationDeg * Math.PI) / 180;
+      const cosRot = Math.cos(rotationRad);
+      const sinRot = Math.sin(rotationRad);
+      const halfWidth = cardWidth / 2;
+      const halfHeight = cardHeight / 2;
+      const localCorners = [
+        { x: -halfWidth, y: -halfHeight },
+        { x: halfWidth, y: -halfHeight },
+        { x: halfWidth, y: halfHeight },
+        { x: -halfWidth, y: halfHeight },
+      ];
+      const centerX = entry?.centerX ?? CANVAS_PADDING + cardWidth / 2;
+      const centerY = entry?.centerY ?? CANVAS_PADDING + cardHeight / 2;
+      const corners = localCorners.map(({ x, y }) => ({
+        x: centerX + x * cosRot - y * sinRot,
+        y: centerY + x * sinRot + y * cosRot,
+      }));
+      const clipped = clipPolygon(corners, viewport);
+      if (!clipped.length) {
+        return;
+      }
+      entries.push({
+        key: docKey,
+        z: entry?.z ?? 0,
+        polygon: clipped,
+      });
+    });
+
+    if (!entries.length) {
+      setVisibleDocIds((prev) => (prev.size ? new Set() : prev));
+      return;
+    }
+
+    entries.sort((a, b) => (b.z || 0) - (a.z || 0));
+
+    const visiblePolygons = [];
+    const result = new Set();
+
+    entries.forEach(({ key, polygon }) => {
+      if (polygon.length < 3) {
+        return;
+      }
+
+      let fullyCovered = true;
+      for (let i = 0; i < polygon.length; i += 1) {
+        const point = polygon[i];
+        const inside = visiblePolygons.some((poly) => isPointInsideConvex(point, poly));
+        if (!inside) {
+          fullyCovered = false;
+          break;
+        }
+      }
+
+      if (fullyCovered) {
+        const centroid = polygonCentroid(polygon);
+        if (!visiblePolygons.some((poly) => isPointInsideConvex(centroid, poly))) {
+          fullyCovered = false;
+        }
+      }
+
+      if (!fullyCovered) {
+        result.add(key);
+        visiblePolygons.push(polygon);
+      }
+    });
+
+    setVisibleDocIds((prev) => {
+      if (prev.size === result.size) {
+        let same = true;
+        prev.forEach((id) => {
+          if (!result.has(id)) {
+            same = false;
+          }
+        });
+        if (same) {
+          result.forEach((id) => {
+            if (!prev.has(id)) {
+              same = false;
+            }
+          });
+        }
+        if (same) {
+          return prev;
+        }
+      }
+      return result;
+    });
+  }, [
+    canvasSize.width,
+    canvasSize.height,
+    ensureDocumentSize,
+    documentLookup,
+    docSizeVersion,
+  ]);
+
+const syncLayoutSnapshot = useCallback(() => {
     setLayoutSnapshot(new Map(layoutRef.current));
   }, []);
 
@@ -999,85 +1005,79 @@ const SkeuomorphicWorkspace = ({
     return () => observer.disconnect();
   }, []);
   useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container || !canvasSize.width || !canvasSize.height) {
-      return () => {};
+    if (!containerRef.current || !canvasSize.width || !canvasSize.height) {
+      return;
     }
 
-    const rafId = requestAnimationFrame(() => {
-      if (!items.length) {
-        layoutRef.current = new Map();
-        syncLayoutSnapshot();
+    if (!items.length) {
+      layoutRef.current = new Map();
+      syncLayoutSnapshot();
+      return;
+    }
+
+    const previous = layoutRef.current;
+    const next = new Map();
+    let maxZ = zCounterRef.current;
+    const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
+    const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
+    const docsNeedingLayout = [];
+
+    items.forEach((doc) => {
+      const { width: docWidth, height: docHeight } = ensureDocumentSize(doc);
+      const halfWidth = docWidth / 2;
+      const halfHeight = docHeight / 2;
+
+      const minCenterX = CANVAS_PADDING + halfWidth;
+      const maxCenterX = Math.max(minCenterX, canvasWidth - CANVAS_PADDING - halfWidth);
+      const minCenterY = CANVAS_PADDING + halfHeight;
+      const maxCenterY = Math.max(minCenterY, canvasHeight - CANVAS_PADDING - halfHeight);
+
+      const existing = previous.get(doc.id);
+      if (existing) {
+        const defaultCenterX = (minCenterX + maxCenterX) / 2;
+        const defaultCenterY = (minCenterY + maxCenterY) / 2;
+        const prevCenterX = typeof existing.centerX === 'number' ? existing.centerX : defaultCenterX;
+        const prevCenterY = typeof existing.centerY === 'number' ? existing.centerY : defaultCenterY;
+        const centerX = clamp(prevCenterX, minCenterX, maxCenterX);
+        const centerY = clamp(prevCenterY, minCenterY, maxCenterY);
+        const rotation = existing.rotation ?? 0;
+        const z = existing.z ?? maxZ;
+        maxZ = Math.max(maxZ, z);
+        next.set(doc.id, { centerX, centerY, rotation, z, width: docWidth, height: docHeight });
         return;
       }
 
-      const previous = layoutRef.current;
-      const next = new Map();
-      let maxZ = zCounterRef.current;
-      const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
-      const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
-      const docsNeedingLayout = [];
-
-      items.forEach((doc) => {
-        const { width: docWidth, height: docHeight } = ensureDocumentSize(doc);
-        const halfWidth = docWidth / 2;
-        const halfHeight = docHeight / 2;
-
-        const minCenterX = CANVAS_PADDING + halfWidth;
-        const maxCenterX = Math.max(minCenterX, canvasWidth - CANVAS_PADDING - halfWidth);
-        const minCenterY = CANVAS_PADDING + halfHeight;
-        const maxCenterY = Math.max(minCenterY, canvasHeight - CANVAS_PADDING - halfHeight);
-
-        const existing = previous.get(doc.id);
-        if (existing) {
-          const defaultCenterX = (minCenterX + maxCenterX) / 2;
-          const defaultCenterY = (minCenterY + maxCenterY) / 2;
-          const prevCenterX =
-            typeof existing.centerX === 'number' ? existing.centerX : defaultCenterX;
-          const prevCenterY =
-            typeof existing.centerY === 'number' ? existing.centerY : defaultCenterY;
-          const centerX = clamp(prevCenterX, minCenterX, maxCenterX);
-          const centerY = clamp(prevCenterY, minCenterY, maxCenterY);
-          const rotation = existing.rotation ?? 0;
-          const z = existing.z ?? maxZ;
-          maxZ = Math.max(maxZ, z);
-          next.set(doc.id, { centerX, centerY, rotation, z });
-          return;
-        }
-
-        docsNeedingLayout.push({
-          id: doc.id,
-          width: docWidth,
-          height: docHeight,
-          seedKey: resolveSizeKey(doc),
-        });
+      docsNeedingLayout.push({
+        id: doc.id,
+        width: docWidth,
+        height: docHeight,
+        seedKey: resolveSizeKey(doc),
       });
-
-      if (docsNeedingLayout.length) {
-        const { layout: generatedLayout, maxZ: updatedMaxZ } = generateInitialLayout(
-          docsNeedingLayout,
-          {
-            canvasWidth,
-            canvasHeight,
-            padding: CANVAS_PADDING,
-            startZ: maxZ,
-            rotationRange: ROTATION_RANGE,
-            minSpacing: 48,
-            shelfWidth: 0,
-          },
-        );
-        generatedLayout.forEach((entry, docId) => {
-          next.set(docId, entry);
-        });
-        maxZ = Math.max(maxZ, updatedMaxZ);
-      }
-
-      layoutRef.current = next;
-      zCounterRef.current = Math.max(zCounterRef.current, maxZ);
-      syncLayoutSnapshot();
     });
 
-    return () => cancelAnimationFrame(rafId);
+    if (docsNeedingLayout.length) {
+      const { layout: generatedLayout, maxZ: updatedMaxZ } = generateInitialLayout(
+        docsNeedingLayout,
+        {
+          canvasWidth,
+          canvasHeight,
+          padding: CANVAS_PADDING,
+          startZ: maxZ,
+          rotationRange: ROTATION_RANGE,
+          minSpacing: 48,
+          shelfWidth: 0,
+        },
+      );
+      generatedLayout.forEach((entry, docId) => {
+        next.set(docId, entry);
+      });
+      maxZ = Math.max(maxZ, updatedMaxZ);
+    }
+
+    layoutRef.current = next;
+    zCounterRef.current = Math.max(zCounterRef.current, maxZ);
+    syncLayoutSnapshot();
+    recalcVisibleDocIds();
   }, [
     items,
     canvasSize.width,
@@ -1085,8 +1085,13 @@ const SkeuomorphicWorkspace = ({
     docSizeVersion,
     ensureDocumentSize,
     syncLayoutSnapshot,
+    recalcVisibleDocIds,
   ]);
 
+  useEffect(() => {
+    recalcVisibleDocIds();
+  }, [recalcVisibleDocIds, items.length, canvasSize.width, canvasSize.height]);
+
   useEffect(() => {
     if (draggingId && !items.some((doc) => doc.id === draggingId)) {
       setDraggingId(null);
@@ -1101,8 +1106,9 @@ const SkeuomorphicWorkspace = ({
       const updated = { ...entry, z: zCounterRef.current };
       layoutRef.current.set(docId, updated);
       syncLayoutSnapshot();
+      recalcVisibleDocIds();
     },
-    [syncLayoutSnapshot],
+    [syncLayoutSnapshot, recalcVisibleDocIds],
   );
 
   const openOverlayForDoc = useCallback(
@@ -1110,7 +1116,8 @@ const SkeuomorphicWorkspace = ({
       if (!docId) {
         return;
       }
-      const snapshot = previewSnapshots.get(docId);
+      const docKey = String(docId);
+      const snapshot = previewSnapshots.get(docKey);
       if (!snapshot || !snapshot.url) {
         return;
       }
@@ -1133,7 +1140,7 @@ const SkeuomorphicWorkspace = ({
       }
       if (!originTransform) {
         const entry = layoutRef.current.get(docId) || null;
-        const doc = documentLookup.get(docId) || null;
+        const doc = documentLookup.get(docKey) || null;
         const { width: cardWidth, height: cardHeight } = ensureDocumentSize(doc);
         const { baseWidth, baseHeight, baseScale } = resolveBaseMetrics(doc, cardWidth, cardHeight);
         const effectiveWidth = baseWidth * baseScale;
@@ -1149,7 +1156,7 @@ const SkeuomorphicWorkspace = ({
       bringToFront(docId);
       setOverlayOriginRect(rect);
       setOverlayOriginTransform(originTransform);
-      setOverlayDocId(docId);
+      setOverlayDocId(docKey);
     },
     [
       bringToFront,
@@ -1162,26 +1169,12 @@ const SkeuomorphicWorkspace = ({
       layoutRef,
     ],
   );
-  const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } = useDocumentDrag({
-    layoutRef,
-    itemRefs,
-    documentLookup,
-    ensureDocumentSize,
-    resolveBaseMetrics,
-    bringToFront,
-    setDraggingId,
-    syncLayoutSnapshot,
-    canvasSize,
-    openOverlayForDoc,
-  });
-
   const handleTagDragEnterDoc = useCallback(
     (event, docId) => {
       if (!isTagTransfer(event)) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      preventAll(event);
       updateRemovalCursor(false);
       if (tagDropTargetId !== docId) {
         setTagDropTargetId(docId);
@@ -1195,8 +1188,7 @@ const SkeuomorphicWorkspace = ({
       if (!isTagTransfer(event)) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      preventAll(event);
       updateRemovalCursor(false);
       const activeDrag = draggingTagRef.current;
       event.dataTransfer.dropEffect = activeDrag?.sourceDocId ? 'move' : 'copy';
@@ -1211,8 +1203,7 @@ const SkeuomorphicWorkspace = ({
     if (!isTagTransfer(event)) {
       return;
     }
-    event.preventDefault();
-    event.stopPropagation();
+    preventAll(event);
     if (
       event.currentTarget instanceof HTMLElement &&
       event.relatedTarget instanceof Node &&
@@ -1246,31 +1237,22 @@ const SkeuomorphicWorkspace = ({
         }
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      preventAll(event);
       if (DEBUG_DROP) {
         console.log('[skeuo] handleTagDropOnDoc: drop accepted for doc', doc.id, 'event', event);
       }
       setTagDropTargetId(null);
 
-      let payload = null;
-      try {
-        const raw =
-          event.dataTransfer.getData('application/x-papercrate-tag') ||
-          event.dataTransfer.getData('text/papercrate-tag');
-        payload = raw ? JSON.parse(raw) : null;
-      } catch (error) {
-        if (DEBUG_DROP) {
-          console.warn('[skeuo] handleTagDropOnDoc: failed to parse payload', error);
-        }
-        payload = null;
+      const payload = parseTagTransferPayload(event);
+      if (!payload && DEBUG_DROP) {
+        console.warn('[skeuo] handleTagDropOnDoc: failed to parse payload');
       }
 
       if (!payload?.id) {
         if (DEBUG_DROP) {
           console.log('[skeuo] handleTagDropOnDoc: missing tag id payload', payload);
         }
-        queueFocusCanvas();
+        requestCanvasFocus();
         return;
       }
 
@@ -1285,7 +1267,7 @@ const SkeuomorphicWorkspace = ({
         if (DEBUG_DROP) {
           console.log('[skeuo] handleTagDropOnDoc: drop from same doc ignored', tagId);
         }
-        queueFocusCanvas();
+        requestCanvasFocus();
         return;
       }
 
@@ -1297,7 +1279,7 @@ const SkeuomorphicWorkspace = ({
         if (DEBUG_DROP) {
           console.log('[skeuo] handleTagDropOnDoc: tag already assigned', tagId);
         }
-        queueFocusCanvas();
+        requestCanvasFocus();
         return;
       }
 
@@ -1329,7 +1311,7 @@ const SkeuomorphicWorkspace = ({
         if (DEBUG_DROP) {
           console.log('[skeuo] handleTagDropOnDoc: finalizing drop for tag', tagId);
         }
-        queueFocusCanvas();
+        requestCanvasFocus();
       }
     },
     [
@@ -1337,7 +1319,7 @@ const SkeuomorphicWorkspace = ({
       markActiveTagDropHandled,
       onAssignTagToDocument,
       onRemoveTagFromDocument,
-      queueFocusCanvas,
+      requestCanvasFocus,
     ],
   );
 
@@ -1346,8 +1328,7 @@ const SkeuomorphicWorkspace = ({
       if (!isTagTransfer(event)) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      preventAll(event);
       event.dataTransfer.dropEffect = 'move';
       updateRemovalCursor(true);
       setTagDropTargetId(null);
@@ -1360,8 +1341,7 @@ const SkeuomorphicWorkspace = ({
       if (!isTagTransfer(event)) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      preventAll(event);
       if (
         event.currentTarget instanceof HTMLElement &&
         event.relatedTarget instanceof Node &&
@@ -1379,22 +1359,12 @@ const SkeuomorphicWorkspace = ({
       if (!isTagTransfer(event)) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      preventAll(event);
       updateRemovalCursor(false);
-      queueFocusCanvas();
+      requestCanvasFocus();
       setTagDropTargetId(null);
 
-      let payload = null;
-      try {
-        const raw =
-          event.dataTransfer.getData('application/x-papercrate-tag') ||
-          event.dataTransfer.getData('text/papercrate-tag');
-        payload = raw ? JSON.parse(raw) : null;
-      } catch (error) {
-        payload = null;
-      }
-
+      const payload = parseTagTransferPayload(event);
       if (!payload?.id) {
         return;
       }
@@ -1420,7 +1390,7 @@ const SkeuomorphicWorkspace = ({
       isTagTransfer,
       markActiveTagDropHandled,
       onRemoveTagFromDocument,
-      queueFocusCanvas,
+      requestCanvasFocus,
       updateRemovalCursor,
     ],
   );
@@ -1602,12 +1572,12 @@ const SkeuomorphicWorkspace = ({
       if (!shouldRemove) {
         console.log('[skeuo] dragEnd -> no removal. distance:', state.distance);
         scheduleShowNode();
-        queueFocusCanvas();
+        requestCanvasFocus();
         updateRemovalCursor(false);
         return;
       }
 
-      queueFocusCanvas();
+      requestCanvasFocus();
       updateRemovalCursor(false);
       setPendingRemovalTag({ docId: state.sourceDocId, tagId: state.tagId });
       void (async () => {
@@ -1622,9 +1592,145 @@ const SkeuomorphicWorkspace = ({
         }
       })();
     },
-    [queueFocusCanvas, handleTagDragEnd, onRemoveTagFromDocument, updateRemovalCursor],
+    [requestCanvasFocus, handleTagDragEnd, onRemoveTagFromDocument, updateRemovalCursor],
   );
 
+  const contextValue = useMemo(
+    () => ({
+      layoutRef,
+      itemRefs,
+      documentLookup,
+      ensureDocumentSize,
+      resolveBaseMetrics,
+      bringToFront,
+      setDraggingId,
+      syncLayoutSnapshot,
+      canvasSize,
+      openOverlayForDoc,
+      recalcVisibleDocIds,
+      settings: {
+        canvasPadding: CANVAS_PADDING,
+        defaultCanvasWidth: DEFAULT_CANVAS_WIDTH,
+        defaultCanvasHeight: DEFAULT_CANVAS_HEIGHT,
+        debugDrag: DEBUG_DRAG,
+      },
+      items,
+      containerRef,
+      handleCanvasDragOver,
+      handleCanvasDragLeave,
+      handleCanvasDrop,
+      layoutSnapshot,
+      visibleDocIds,
+      draggingId,
+      tagDropTargetId,
+      pendingTagDocId,
+      pendingRemovalTag,
+      onDocumentOpen,
+      ensureAssetUrl,
+      getDocumentAsset,
+      handleNavigatorSnapshot,
+      activeTagSet,
+      handleTagDragEnterDoc,
+      handleTagDragOverDoc,
+      handleTagDragLeaveDoc,
+      handleTagDropOnDoc,
+      handleDocTagPointerDown,
+      handleDocTagDragStart,
+      handleDocTagDrag,
+      handleDocTagDragEnd,
+      overlayDisplay,
+      closeOverlay,
+      overlayOriginRect,
+      overlayOriginTransform,
+    }),
+    [
+      activeTagSet,
+      bringToFront,
+      canvasSize,
+      closeOverlay,
+      containerRef,
+      draggingId,
+      ensureAssetUrl,
+      ensureDocumentSize,
+      getDocumentAsset,
+      handleCanvasDragLeave,
+      handleCanvasDragOver,
+      handleCanvasDrop,
+      handleDocTagDrag,
+      handleDocTagDragEnd,
+      handleDocTagDragStart,
+      handleDocTagPointerDown,
+      handleNavigatorSnapshot,
+      handleTagDragEnterDoc,
+      handleTagDragLeaveDoc,
+      handleTagDragOverDoc,
+      handleTagDropOnDoc,
+      itemRefs,
+      items,
+      layoutRef,
+      layoutSnapshot,
+      onDocumentOpen,
+      openOverlayForDoc,
+      overlayDisplay,
+      overlayOriginRect,
+      overlayOriginTransform,
+      pendingRemovalTag,
+      pendingTagDocId,
+      recalcVisibleDocIds,
+      resolveBaseMetrics,
+      setDraggingId,
+      syncLayoutSnapshot,
+      tagDropTargetId,
+      visibleDocIds,
+      documentLookup,
+    ],
+  );
+
+  return (
+    <DesktopProvider value={contextValue}>
+      <DesktopWorkspaceView />
+    </DesktopProvider>
+  );
+};
+
+const DesktopWorkspaceView = () => {
+  const {
+    items,
+    containerRef,
+    handleCanvasDragOver,
+    handleCanvasDragLeave,
+    handleCanvasDrop,
+    ensureDocumentSize,
+    layoutSnapshot,
+    layoutRef,
+    itemRefs,
+    visibleDocIds,
+    draggingId,
+    tagDropTargetId,
+    pendingTagDocId,
+    pendingRemovalTag,
+    onDocumentOpen,
+    ensureAssetUrl,
+    getDocumentAsset,
+    handleNavigatorSnapshot,
+    activeTagSet,
+    handleTagDragEnterDoc,
+    handleTagDragOverDoc,
+    handleTagDragLeaveDoc,
+    handleTagDropOnDoc,
+    handleDocTagPointerDown,
+    handleDocTagDragStart,
+    handleDocTagDrag,
+    handleDocTagDragEnd,
+    overlayDisplay,
+    closeOverlay,
+    overlayOriginRect,
+    overlayOriginTransform,
+  } = useDesktopContext();
+
+  const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } =
+    useDocumentDrag();
+
   return (
     <>
       <div className="skeuo-shell">
@@ -1635,142 +1741,138 @@ const SkeuomorphicWorkspace = ({
           onDragLeave={handleCanvasDragLeave}
           onDrop={handleCanvasDrop}
         >
-        {items.length === 0 ? (
-          <div className="skeuo-empty">
-            <p>No documents to show here yet. Drop files to make this space come alive.</p>
-          </div>
-        ) : (
-          items.map((doc) => {
-            const { width: cardWidth, height: cardHeight } = ensureDocumentSize(doc);
-            const { baseWidth, baseHeight, baseScale } = resolveBaseMetrics(doc, cardWidth, cardHeight);
-            const fallbackLayout = {
-              centerX: CANVAS_PADDING + cardWidth / 2,
-              centerY: CANVAS_PADDING + cardHeight / 2,
-              rotation: 0,
-              z: 1,
-            };
-            const storedLayout = layoutSnapshot.get(doc.id) ?? layoutRef.current.get(doc.id);
-            const layout = storedLayout || fallbackLayout;
-            const layoutCenterX =
-              typeof layout.centerX === 'number' ? layout.centerX : fallbackLayout.centerX;
-            const layoutCenterY =
-              typeof layout.centerY === 'number' ? layout.centerY : fallbackLayout.centerY;
-            const rotation = layout.rotation || 0;
-            const zoomScale = baseScale;
-            const transform = formatTransform(
-              Math.round(layoutCenterX),
-              Math.round(layoutCenterY),
-              rotation,
-              zoomScale,
-            );
-            const style = {
-              transform,
-              zIndex: layout.z ?? 1,
-            };
-            const bodyStyle = {
-              width: Math.round(baseWidth),
-              height: Math.round(baseHeight),
-            };
-            const totalScale = zoomScale > 0 ? zoomScale : 1;
-            const inverseTagScale = totalScale > 0 ? 1 / totalScale : 1;
-            const tagsStyle = { '--tag-scale': inverseTagScale };
-            const title = doc.title || doc.original_name || 'Document';
-            const dragging = draggingId === doc.id;
-            const tags = Array.isArray(doc.tags) ? doc.tags : [];
-            const docTagKeys = tags
-              .map((tag) => resolveTagKey(tag))
-              .filter(Boolean);
-            const matchesFilter =
-              activeTagSet.size === 0 || docTagKeys.some((key) => activeTagSet.has(key));
-            const dropActive = tagDropTargetId === doc.id;
-            const dropPending = pendingTagDocId === doc.id;
-            const itemClasses = ['skeuo-item'];
-            if (dragging) itemClasses.push('is-dragging');
-            if (dropActive) itemClasses.push('is-tag-target');
-            if (dropPending) itemClasses.push('is-tag-pending');
-            if (!matchesFilter) itemClasses.push('is-filtered-out');
-            const docTagTokens = docTagKeys.join(' ');
-            return (
-              <div
-                key={doc.id}
-                className={itemClasses.join(' ')}
-                style={style}
-                role="button"
-                data-doc-id={doc.id}
-                data-tag-ids={docTagTokens || undefined}
-                aria-hidden={matchesFilter ? undefined : 'true'}
-                ref={(node) => {
-                  if (node) {
-                    itemRefs.current.set(doc.id, node);
-                  } else {
-                    itemRefs.current.delete(doc.id);
-                  }
-                }}
-                onPointerDown={(event) => handlePointerDown(event, doc.id)}
-                onPointerMove={handlePointerMove}
-                onPointerUp={handlePointerUp}
-                onPointerCancel={handlePointerCancel}
-                onDragEnter={(event) => handleTagDragEnterDoc(event, doc.id)}
-                onDragOver={(event) => handleTagDragOverDoc(event, doc.id)}
-                onDragLeave={(event) => handleTagDragLeaveDoc(event, doc.id)}
-                onDrop={(event) => handleTagDropOnDoc(event, doc)}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    onDocumentOpen?.(doc.id);
-                  }
-                }}
-              >
-                <div className="skeuo-item__body" style={bodyStyle}>
-                  <SkeuoPreviewCard
-                    doc={doc}
-                    title={title}
-                    ensureAssetUrl={ensureAssetUrl}
-                    getDocumentAsset={getDocumentAsset}
-                    navScale={inverseTagScale}
-                    onNavigatorSnapshot={handleNavigatorSnapshot}
-                  />
-                  {tags.length > 0 && (
-                    <div className="skeuo-item__tags" aria-hidden="true" style={tagsStyle}>
-                      {tags.map((tag) => {
-                        const key = tag.id || tag.label || String(tag);
-                        if (
-                          pendingRemovalTag &&
-                          pendingRemovalTag.docId === doc.id &&
-                          pendingRemovalTag.tagId === tag.id
-                        ) {
-                          return null;
-                        }
-                        const colorStyle = getTagColorStyle(tag.color);
-                        const pendingRemoval =
-                          pendingRemovalTag &&
-                          pendingRemovalTag.docId === doc.id &&
-                          pendingRemovalTag.tagId === tag.id;
-                        const tagClasses = ['badge', 'tag-chip', 'tag-chip--draggable'];
-                        if (pendingRemoval) tagClasses.push('tag-chip--tear-pending');
-                        return (
-                          <span
-                            key={key}
-                            className={tagClasses.join(' ')}
-                            style={colorStyle || undefined}
-                            title={tag.label || 'Tag'}
-                            draggable
-                            onPointerDown={(event) => handleDocTagPointerDown(event, doc, tag)}
-                            onDragStart={(event) => handleDocTagDragStart(event, doc, tag)}
-                            onDrag={handleDocTagDrag}
-                            onDragEnd={(event) => handleDocTagDragEnd(event)}
-                          >
-                            <span className="tag-chip__label">{tag.label || 'Tag'}</span>
-                          </span>
-                        );
-                      })}
-                    </div>
-                  )}
+          {items.length === 0 ? (
+            <div className="skeuo-empty">
+              <p>No documents to show here yet. Drop files to make this space come alive.</p>
+            </div>
+          ) : (
+            items.map((doc) => {
+              const sizeInfo = ensureDocumentSize(doc);
+              const { width: cardWidth, height: cardHeight } = sizeInfo;
+              const layout = layoutSnapshot.get(doc.id) ?? layoutRef.current.get(doc.id);
+              if (
+                !layout ||
+                !Number.isFinite(layout.centerX) ||
+                !Number.isFinite(layout.centerY)
+              ) {
+                return null;
+              }
+              const layoutCenterX = layout.centerX;
+              const layoutCenterY = layout.centerY;
+              const rotation = layout.rotation || 0;
+              const originX = layoutCenterX - cardWidth / 2;
+              const originY = layoutCenterY - cardHeight / 2;
+              const transform = formatTransform(
+                Math.round(originX),
+                Math.round(originY),
+                rotation,
+                1,
+              );
+              const style = {
+                transform,
+                zIndex: layout.z ?? 1,
+                width: Math.round(cardWidth),
+                height: Math.round(cardHeight),
+              };
+              const docKey = doc?.id != null ? String(doc.id) : null;
+              const shouldLoad = docKey ? visibleDocIds.has(docKey) : false;
+              const title = doc.title || doc.original_name || 'Document';
+              const dragging = draggingId === doc.id;
+              const tags = Array.isArray(doc.tags) ? doc.tags : [];
+              const docTagKeys = tags
+                .map((tag) => resolveTagKey(tag))
+                .filter(Boolean);
+              const matchesFilter =
+                activeTagSet.size === 0 || docTagKeys.some((key) => activeTagSet.has(key));
+              const dropActive = tagDropTargetId === doc.id;
+              const dropPending = pendingTagDocId === doc.id;
+              const itemClasses = ['skeuo-item'];
+              if (dragging) itemClasses.push('is-dragging');
+              if (dropActive) itemClasses.push('is-tag-target');
+              if (dropPending) itemClasses.push('is-tag-pending');
+              if (!matchesFilter) itemClasses.push('is-filtered-out');
+              const docTagTokens = docTagKeys.join(' ');
+              return (
+                <div
+                  key={doc.id}
+                  className={itemClasses.join(' ')}
+                  style={style}
+                  role="button"
+                  data-doc-id={doc.id}
+                  data-tag-ids={docTagTokens || undefined}
+                  aria-hidden={matchesFilter ? undefined : 'true'}
+                  ref={(node) => {
+                    if (node) {
+                      itemRefs.current.set(doc.id, node);
+                    } else {
+                      itemRefs.current.delete(doc.id);
+                    }
+                  }}
+                  onPointerDown={(event) => handlePointerDown(event, doc.id)}
+                  onPointerMove={handlePointerMove}
+                  onPointerUp={handlePointerUp}
+                  onPointerCancel={handlePointerCancel}
+                  onDragEnter={(event) => handleTagDragEnterDoc(event, doc.id)}
+                  onDragOver={(event) => handleTagDragOverDoc(event, doc.id)}
+                  onDragLeave={(event) => handleTagDragLeaveDoc(event, doc.id)}
+                  onDrop={(event) => handleTagDropOnDoc(event, doc)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      preventAll(event);
+                      onDocumentOpen?.(doc.id);
+                    }
+                  }}
+                >
+                  <div className="skeuo-item__body">
+                    <SkeuoPreviewCard
+                      doc={doc}
+                      title={title}
+                      ensureAssetUrl={ensureAssetUrl}
+                      getDocumentAsset={getDocumentAsset}
+                      onNavigatorSnapshot={handleNavigatorSnapshot}
+                      shouldLoad={shouldLoad}
+                    />
+                    {tags.length > 0 && (
+                      <div className="skeuo-item__tags" aria-hidden="true">
+                        {tags.map((tag) => {
+                          const key = tag.id || tag.label || String(tag);
+                          if (
+                            pendingRemovalTag &&
+                            pendingRemovalTag.docId === doc.id &&
+                            pendingRemovalTag.tagId === tag.id
+                          ) {
+                            return null;
+                          }
+                          const colorStyle = getTagColorStyle(tag.color);
+                          const pendingRemoval =
+                            pendingRemovalTag &&
+                            pendingRemovalTag.docId === doc.id &&
+                            pendingRemovalTag.tagId === tag.id;
+                          const tagClasses = ['badge', 'tag-chip', 'tag-chip--draggable'];
+                          if (pendingRemoval) tagClasses.push('tag-chip--tear-pending');
+                          return (
+                            <span
+                              key={key}
+                              className={tagClasses.join(' ')}
+                              style={colorStyle || undefined}
+                              title={tag.label || 'Tag'}
+                              draggable
+                              onPointerDown={(event) => handleDocTagPointerDown(event, doc, tag)}
+                              onDragStart={(event) => handleDocTagDragStart(event, doc, tag)}
+                              onDrag={handleDocTagDrag}
+                              onDragEnd={(event) => handleDocTagDragEnd(event)}
+                            >
+                              <span className="tag-chip__label">{tag.label || 'Tag'}</span>
+                            </span>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
-            );
-          })
-        )}
+              );
+            })
+          )}
         </div>
       </div>
       <PreviewZoomOverlay
@@ -1784,9 +1886,9 @@ const SkeuomorphicWorkspace = ({
   );
 };
 
-export default SkeuomorphicWorkspace;
+export default DesktopWorkspace;
 
-export const createSkeuomorphicSurface = ({ workspaceProps, renderSidebarToggle }) => {
+export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) => {
   if (!workspaceProps) {
     return null;
   }
@@ -1821,7 +1923,7 @@ export const createSkeuomorphicSurface = ({ workspaceProps, renderSidebarToggle
     key: 'workspace',
     variant: 'workspace',
     header: { title, subtitle, leading, actions },
-    content: <SkeuomorphicWorkspace {...workspaceProps} />,
+    content: <DesktopWorkspace {...workspaceProps} />,
     supportsDetail: false,
   };
 };
diff --git a/frontend/src/desktop/context.js b/frontend/src/desktop/context.js
new file mode 100644
index 0000000..1c381f2
--- /dev/null
+++ b/frontend/src/desktop/context.js
@@ -0,0 +1,17 @@
+import React, { createContext, useContext } from 'react';
+
+const DesktopContext = createContext(null);
+
+export const DesktopProvider = ({ value, children }) => (
+  <DesktopContext.Provider value={value}>{children}</DesktopContext.Provider>
+);
+
+export const useDesktopContext = () => {
+  const context = useContext(DesktopContext);
+  if (!context) {
+    throw new Error('useDesktopContext must be used within a DesktopProvider');
+  }
+  return context;
+};
+
+export default DesktopContext;
diff --git a/frontend/src/desktop/events.js b/frontend/src/desktop/events.js
new file mode 100644
index 0000000..4fb85ac
--- /dev/null
+++ b/frontend/src/desktop/events.js
@@ -0,0 +1,17 @@
+export const preventAll = (event) => {
+  if (!event) {
+    return;
+  }
+  try {
+    event.preventDefault();
+  } catch (
+    // eslint-disable-next-line no-empty
+    error
+  ) {}
+  try {
+    event.stopPropagation();
+  } catch (
+    // eslint-disable-next-line no-empty
+    error
+  ) {}
+};
diff --git a/frontend/src/desktop/math.js b/frontend/src/desktop/math.js
new file mode 100644
index 0000000..8854f38
--- /dev/null
+++ b/frontend/src/desktop/math.js
@@ -0,0 +1,8 @@
+export const clamp = (value, min, max) => {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+};
+
+export const formatTransform = (x, y, rotation = 0, scale = 1) =>
+  `translate3d(${x}px, ${y}px, 0) rotate(${rotation}deg) scale(${scale})`;
diff --git a/frontend/src/desktop/useDocumentDrag.js b/frontend/src/desktop/useDocumentDrag.js
new file mode 100644
index 0000000..7f58792
--- /dev/null
+++ b/frontend/src/desktop/useDocumentDrag.js
@@ -0,0 +1,248 @@
+import { useCallback, useRef } from 'react';
+import { useDesktopContext } from './context';
+import { preventAll } from './events';
+import { clamp, formatTransform } from './math';
+
+const useDocumentDrag = () => {
+  const {
+    layoutRef,
+    itemRefs,
+    documentLookup,
+    ensureDocumentSize,
+    resolveBaseMetrics,
+    bringToFront,
+    setDraggingId,
+    syncLayoutSnapshot,
+    canvasSize,
+    openOverlayForDoc,
+    recalcVisibleDocIds,
+    settings,
+  } = useDesktopContext();
+
+  const dragStateRef = useRef(null);
+  const { canvasPadding, defaultCanvasWidth, defaultCanvasHeight, debugDrag } = settings;
+
+  const finishDrag = useCallback(
+    (pointerId) => {
+      const state = dragStateRef.current;
+      if (!state || state.pointerId !== pointerId) {
+        return;
+      }
+      const capturedTarget = state.capturedTarget;
+      if (capturedTarget && typeof capturedTarget.releasePointerCapture === 'function') {
+        try {
+          capturedTarget.releasePointerCapture(pointerId);
+        } catch (
+          // eslint-disable-next-line no-empty
+          error
+        ) {}
+      }
+      dragStateRef.current = null;
+      setDraggingId((current) => (current === state.docId ? null : current));
+      syncLayoutSnapshot();
+    },
+    [setDraggingId, syncLayoutSnapshot],
+  );
+
+  const handlePointerDown = useCallback(
+    (event, docId) => {
+      if (debugDrag) {
+        console.log(
+          '[skeuo] handlePointerDown fired for doc',
+          docId,
+          'button',
+          event.button,
+          'pointerType',
+          event.pointerType,
+          'pointerId',
+          event.pointerId,
+        );
+      }
+      preventAll(event);
+      const entry = layoutRef.current.get(docId) || null;
+      const docKey = docId != null ? String(docId) : null;
+      const doc = docKey ? documentLookup.get(docKey) : null;
+      const { width: docWidth, height: docHeight } = ensureDocumentSize(doc);
+      const { baseScale } = resolveBaseMetrics(doc, docWidth, docHeight);
+      const normalizedBaseScale =
+        Number.isFinite(baseScale) && baseScale > 0 ? baseScale : 1;
+      const defaultCenterX = canvasPadding + docWidth / 2;
+      const defaultCenterY = canvasPadding + docHeight / 2;
+      const centerX = typeof entry?.centerX === 'number' ? entry.centerX : defaultCenterX;
+      const centerY = typeof entry?.centerY === 'number' ? entry.centerY : defaultCenterY;
+
+      if (entry && (entry.centerX !== centerX || entry.centerY !== centerY)) {
+        layoutRef.current.set(docId, { ...entry, centerX, centerY });
+      }
+
+      bringToFront(docId);
+      const capturedTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+      if (capturedTarget && typeof capturedTarget.setPointerCapture === 'function') {
+        try {
+          capturedTarget.setPointerCapture(event.pointerId);
+        } catch (
+          // eslint-disable-next-line no-empty
+          error
+        ) {}
+      }
+      dragStateRef.current = {
+        docId,
+        pointerId: event.pointerId,
+        originCenterX: centerX,
+        originCenterY: centerY,
+        startX: event.clientX,
+        startY: event.clientY,
+        rotation: entry?.rotation ?? 0,
+        moved: false,
+        locked: false,
+        width: docWidth,
+        height: docHeight,
+        dragScale: 1,
+        baseScale: normalizedBaseScale,
+        capturedTarget,
+      };
+      setDraggingId(docId);
+    },
+    [
+      bringToFront,
+      canvasPadding,
+      documentLookup,
+      ensureDocumentSize,
+      layoutRef,
+      resolveBaseMetrics,
+      setDraggingId,
+      debugDrag,
+    ],
+  );
+
+  const handlePointerMove = useCallback(
+    (event) => {
+      const state = dragStateRef.current;
+      if (!state) {
+        if (debugDrag) {
+          console.log('[skeuo] handlePointerMove: no drag state for pointer', event.pointerId);
+        }
+        return;
+      }
+      if (state.pointerId !== event.pointerId) {
+        if (debugDrag) {
+          console.log(
+            '[skeuo] handlePointerMove: pointer mismatch expected',
+            state.pointerId,
+            'got',
+            event.pointerId,
+          );
+        }
+        return;
+      }
+      preventAll(event);
+      if (state.locked) {
+        if (debugDrag) {
+          console.log('[skeuo] handlePointerMove: locked drag for doc', state.docId);
+        }
+        return;
+      }
+
+      const entry = layoutRef.current.get(state.docId);
+      if (!entry) {
+        return;
+      }
+
+      const deltaX = event.clientX - state.startX;
+      const deltaY = event.clientY - state.startY;
+      const nextCenterX = state.originCenterX + deltaX;
+      const nextCenterY = state.originCenterY + deltaY;
+
+      const docWidth = state.width;
+      const docHeight = state.height;
+      const halfWidth = docWidth / 2;
+      const halfHeight = docHeight / 2;
+      const canvasWidth = canvasSize.width || defaultCanvasWidth;
+      const canvasHeight = canvasSize.height || defaultCanvasHeight;
+      const minCenterX = canvasPadding + halfWidth;
+      const maxCenterX = Math.max(minCenterX, canvasWidth - canvasPadding - halfWidth);
+      const minCenterY = canvasPadding + halfHeight;
+      const maxCenterY = Math.max(minCenterY, canvasHeight - canvasPadding - halfHeight);
+      const clampedCenterX = clamp(nextCenterX, minCenterX, maxCenterX);
+      const clampedCenterY = clamp(nextCenterY, minCenterY, maxCenterY);
+
+      const prevCenterX = typeof entry.centerX === 'number' ? entry.centerX : state.originCenterX;
+      const prevCenterY = typeof entry.centerY === 'number' ? entry.centerY : state.originCenterY;
+      if (Math.abs(clampedCenterX - prevCenterX) < 0.5 && Math.abs(clampedCenterY - prevCenterY) < 0.5) {
+        if (debugDrag) {
+          console.log('[skeuo] handlePointerMove: movement under threshold for doc', state.docId);
+        }
+        return;
+      }
+
+      const updated = { ...entry, centerX: clampedCenterX, centerY: clampedCenterY };
+      layoutRef.current.set(state.docId, updated);
+
+      const node = itemRefs.current.get(state.docId);
+      if (node) {
+        node.style.transform = formatTransform(
+          clampedCenterX - state.width / 2,
+          clampedCenterY - state.height / 2,
+          state.rotation,
+          state.dragScale || 1,
+        );
+      }
+      state.moved = true;
+      if (debugDrag) {
+        console.log('[skeuo] handlePointerMove: moved doc', state.docId, 'to', clampedCenterX, clampedCenterY);
+      }
+      recalcVisibleDocIds();
+    },
+    [
+      canvasPadding,
+      canvasSize.height,
+      canvasSize.width,
+      defaultCanvasHeight,
+      defaultCanvasWidth,
+      itemRefs,
+      layoutRef,
+      recalcVisibleDocIds,
+      debugDrag,
+    ],
+  );
+
+  const handlePointerUp = useCallback(
+    (event) => {
+      const state = dragStateRef.current;
+      if (state && state.pointerId === event.pointerId) {
+        const moved = Boolean(state.moved);
+        const docId = state.docId;
+        const shouldOpen = !moved && event.detail >= 2;
+        finishDrag(event.pointerId);
+        if (shouldOpen) {
+          const originInfo = {
+            rotation: state.rotation || 0,
+            scale: state.baseScale || 1,
+            width: state.width,
+            height: state.height,
+          };
+          openOverlayForDoc(docId, originInfo);
+        }
+        return;
+      }
+      finishDrag(event.pointerId);
+    },
+    [finishDrag, openOverlayForDoc],
+  );
+
+  const handlePointerCancel = useCallback(
+    (event) => {
+      finishDrag(event.pointerId);
+    },
+    [finishDrag],
+  );
+
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerCancel,
+  };
+};
+
+export default useDocumentDrag;
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 6c3bfb3..f93fbb7 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -32,7 +32,7 @@ import Sidebar from './sidebar/Sidebar';
 import { ChevronsRightIcon } from './ui/icons';
 import { createDocumentsSurface } from './documents/DocumentsTable';
 import { createPreviewSurface } from './preview/PreviewWorkspace';
-import { createSkeuomorphicSurface } from './skeuomorphic_ws';
+import { createDesktopSurface } from './DesktopWorkspace';
 import { AppShellContext, useAppShell } from './appShellContext';
 
 const runtimeApiBase =
@@ -5526,7 +5526,7 @@ const DocumentsRoute = () => {
     if (!isWorkspace) {
       return null;
     }
-    return createSkeuomorphicSurface({
+    return createDesktopSurface({
       workspaceProps: skeuoWorkspaceProps,
       renderSidebarToggle,
     });
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 93bfaaf..d1e9f3d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -14,11 +14,10 @@
   --border: oklch(0.92 0.002 calc(270deg + var(--warmth)));
 
   /* --- Accent (primary) --- */
-  --accent: oklch(0.61 0.20 calc(260deg + var(--warmth)));
-  --accent-hover: oklch(0.70 0.18 calc(260deg + var(--warmth)));
+  --accent: oklch(0.61 0.2 calc(250deg + var(--warmth)));
+  --accent-hover: oklch(0.70 0.02 calc(100deg + var(--warmth)));
   --on-accent: oklch(1 0 0);
 
-  /* --- Derived accent states --- */
   --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
   --accent-elevated: color-mix(in oklch, var(--accent) 16%, transparent);
   --accent-elevated-strong: color-mix(in oklch, var(--accent) 22%, transparent);
@@ -27,6 +26,12 @@
   --accent-focus: color-mix(in oklch, var(--accent) 85%, transparent);
   --surface-overlay: color-mix(in oklch, white 82%, transparent);
 
+  /* -- Selection --- */
+  --selection: oklch(0.61 0.01 calc(100deg + var(--warmth)));
+
+  /* --- Derived accent states --- */
+  --selection-soft: color-mix(in oklch, var(--selection) 12%, transparent);
+
   /* --- Shadows & overlays --- */
   --shadow-faint: color-mix(in oklch, black 6%, transparent);
   --shadow-soft: color-mix(in oklch, black 12%, transparent);
@@ -46,11 +51,12 @@
   --danger-subtle: color-mix(in oklch, var(--danger) 8%, transparent);
 
   /* --- Explorer states --- */
-  --row-hover-bg: color-mix(in oklch, var(--accent) 6%, transparent);
-  --row-active-bg: color-mix(in oklch, var(--accent) 12%, transparent);
-  --sidebar-hover-bg: color-mix(in oklch, var(--accent) 8%, transparent);
-  --sidebar-active-bg: color-mix(in oklch, var(--accent) 16%, transparent);
+  --row-hover-bg: color-mix(in oklch, var(--selection) 6%, transparent);
+  --row-active-bg: color-mix(in oklch, var(--selection) 12%, transparent);
+  --sidebar-hover-bg: color-mix(in oklch, var(--selection) 8%, transparent);
+  --sidebar-active-bg: color-mix(in oklch, var(--selection) 16%, transparent);
   --selection-ring: oklch(0.78 0.16 calc(260deg + var(--warmth)));
+  --sidebar-active-pill-border: color-mix(in oklch, var(--accent) 64%, transparent);
 
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
@@ -1408,7 +1414,7 @@ button.danger:hover:not([disabled]) {
 .sidebar-tag-pill:hover {
   transform: none;
   box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
-  border-color: var(--accent-soft, rgba(59, 130, 246, 0.35));
+  border-color: var(--accent-soft);
 }
 
 .sidebar-tag-pill:focus-visible {
@@ -1417,8 +1423,8 @@ button.danger:hover:not([disabled]) {
 }
 
 .sidebar-tag-pill.active {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1.5px var(--accent);
+  border-color: var(--sidebar-active-pill-border);
+  box-shadow: 0 0 0 1.5px var(--sidebar-active-pill-border);
 }
 
 .sidebar-tag-cloud--has-active .sidebar-tag-pill:not(.active) {
@@ -1458,8 +1464,8 @@ button.danger:hover:not([disabled]) {
 }
 
 .sidebar-correspondent-item.active {
-  background: var(--accent-soft, rgba(59, 130, 246, 0.18));
-  box-shadow: 0 0 0 1px var(--accent-soft, rgba(59, 130, 246, 0.24));
+  background: var(--sidebar-active-bg, rgba(59, 130, 246, 0.18));
+  box-shadow: 0 0 0 1px var(--sidebar-active-bg, rgba(59, 130, 246, 0.24));
   color: var(--fg);
 }
 
@@ -1703,7 +1709,7 @@ button.danger:hover:not([disabled]) {
 }
 
 .documents-panel tbody tr.document.selected {
-  background: var(--accent-soft);
+  background: var(--selection-soft);
   box-shadow: inset 2px 0 0 var(--accent-outline-strong);
 }