polish(app-mode): pan reliability + drag perf + dot-grid polish

- Pan: hoist wheel + pointerdown handlers from the transformed
  bgRef to the full-viewport `.layout-view` so zoom-out can't
  shrink the hit area and silently break pan/zoom; panel-header
  drag stops propagation.
- Drag perf: drop FloatingPanel backdrop-blur during drag, drive
  OutputWindow position via translate3d (compositor) instead of
  top/left (layout + paint), trim transition list.
- Dot grid: share workspace pivot (kills cursor-anchored parallax),
  two-layer LOD with inverse fade (no edge bleed at zoom-in), dot
  radius scales with zoom floored at 0.6x with a pinned 0.5px AA
  ring so dots stay crisp.

src/components/appMode/layout/LayoutView.vue

@@ -44,18 +44,17 @@ watch(
 )
 
 // --- Workspace pan/zoom handlers -----------------------------------
+// Bound to `.layout-view` (always viewport-sized) rather than the
+// inner transformed bgRef, so that zoom-out doesn't shrink the hit
+// area and silently break pan/zoom. The math is rect-invariant under
+// this swap because the transform is around bgRef's center, which
+// coincides with .layout-view's center.
 const bgRef = useTemplateRef<HTMLElement>('bgRef')
 
 function handleWheel(e: WheelEvent) {
-  const el = bgRef.value
-  if (!el) return
   e.preventDefault()
-  appModeStore.zoomAt(
-    e.clientX,
-    e.clientY,
-    e.deltaY,
-    el.getBoundingClientRect()
-  )
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  appModeStore.zoomAt(e.clientX, e.clientY, e.deltaY, rect)
 }
 
 // Defer pointer capture until the pointer actually moves past a
@@ -101,23 +100,38 @@ const workspaceTransform = computed(
     `scale(${viewportScale.value})`
 )
 
-// Dot-grid LOD — the visible grid pitch scales with content while we
-// zoom in (fewer dots per viewport = feels like zooming in), but as
-// we zoom out we double the pitch whenever it would fall below a
-// density threshold so the viewport doesn't fill with visual noise.
-// Doubling keeps alignment with the previous level (every other dot
-// survives), so a "world point" under a dot stays under a dot after
-// the snap. Matches the CSS `--spacing-layout-dot` (24px) at scale=1.
+// Dot-grid LOD via two stacked layers (CSS handles the rendering in
+// `.layout-view`'s `background-image`). Both layers tile linearly with
+// the workspace scale, so they stay locked to the transformed contents
+// at all times — the parallax that the old discrete-doubling LOD
+// produced is gone. Density management is opacity-based instead: the
+// fine 1×-pitch layer fades out as you zoom out, leaving the coarse
+// 2×-pitch layer (whose dot positions are a subset of the fine layer's)
+// to carry the visual at small scales — so the user perceives
+// progressively fewer dots without any of them ever shifting.
 const DOT_SIZE_PX = 24
-const MIN_GRID_SPACING_PX = 16
 
 const gridSpacing = computed(() => {
-  let s = DOT_SIZE_PX * viewportScale.value
-  if (!(s > 0)) return DOT_SIZE_PX
-  while (s < MIN_GRID_SPACING_PX) s *= 2
-  return s
+  const s = DOT_SIZE_PX * viewportScale.value
+  return s > 0 ? s : DOT_SIZE_PX
 })
 
+const gridFineAlpha = computed(() => {
+  const s = viewportScale.value
+  if (s >= 1) return 1
+  if (s <= 0.5) return 0
+  return (s - 0.5) * 2
+})
+
+// Coarse layer is the inverse of fine — fully opaque when fine has
+// faded out, fully transparent when fine carries the grid. Without
+// this, both layers stack at full opacity above scale=1; the fine
+// dots cover the coarse ones, but their anti-aliased edges let the
+// coarse dot underneath bleed through, making every-other dot read
+// slightly darker than the fine-only ones (two visible values where
+// only one was wanted).
+const gridCoarseAlpha = computed(() => 1 - gridFineAlpha.value)
+
 // Per-input resolution + block-layout state is shared with the builder
 // via useAppPanelLayout — both views read the same `panelRows` from the
 // store so WYSIWYG holds across mode switches.
@@ -148,26 +162,34 @@ const panelSide = computed(() => resolvePanelSide(panelPreset.value))
       '--viewport-scale': viewportScale,
       '--viewport-offset-x': `${viewportOffsetX}px`,
       '--viewport-offset-y': `${viewportOffsetY}px`,
-      '--grid-spacing': `${gridSpacing}px`
+      '--grid-spacing': `${gridSpacing}px`,
+      '--grid-fine-alpha': gridFineAlpha,
+      '--grid-coarse-alpha': gridCoarseAlpha
     }"
+    @wheel="handleWheel"
+    @pointerdown="handlePointerDown"
+    @dragstart.prevent
   >
-    <!-- Workspace layer: the viewport transform lives here, so the
-         LinearPreview contents (welcome, image, arrange) zoom + pan
-         together. Wheel + pointerdown handlers are attached to this
-         wrapper; the chrome + panel are siblings (not descendants),
-         so their events never trigger workspace navigation.
-         The dot grid is painted on `.layout-view` (always viewport-
-         sized) with dynamic background-size + background-position
-         driven by the viewport vars above, so the grid pattern
-         visually matches the transformed content without the
-         element itself needing to be scaled. -->
+    <!-- Workspace layer: the viewport transform lives on this inner
+         div so the LinearPreview contents (welcome, image, arrange)
+         zoom + pan together. Wheel + pointerdown handlers are bound
+         to the OUTER `.layout-view` (always viewport-sized) so pan
+         and zoom work even when the user has zoomed out and the
+         transformed inner div has shrunk to a fraction of the
+         viewport — otherwise clicks in the empty area around the
+         shrunken workspace miss the listener entirely and pan stops
+         responding until a recenter. Chrome + panel are siblings of
+         this inner div but children of `.layout-view`; OutputWindow
+         and panel headers stop pointerdown propagation so their own
+         drags don't double-fire as pans.
+         The dot grid is painted on `.layout-view` itself with a
+         dynamic background-size + background-position driven by the
+         viewport vars above, so the grid pattern visually matches
+         the transformed content without the element needing to scale. -->
     <div
       ref="bgRef"
       class="layout-view__background"
       :style="{ transform: workspaceTransform }"
-      @wheel="handleWheel"
-      @pointerdown="handlePointerDown"
-      @dragstart.prevent
     >
       <LinearPreview hide-chrome />
     </div>
@@ -204,21 +226,61 @@ const panelSide = computed(() => resolvePanelSide(panelPreset.value))
   position: absolute;
   inset: 0;
   background-color: var(--color-layout-canvas);
-  /* Dot grid — stays on the viewport-sized element (never scales
-     itself) but its background-size scales with `--viewport-scale`
-     so the pattern visually matches the transformed content, and
-     background-position shifts with `--viewport-offset-{x,y}` so it
-     pans with the content. That way the grid always covers the
-     viewport regardless of zoom level, and lines up with whatever
-     LinearPreview is rendering inside the transformed workspace. */
-  background-image: radial-gradient(
-    circle,
-    var(--color-layout-grid-dot) 1px,
-    transparent 1.5px
-  );
-  background-size: var(--grid-spacing, var(--spacing-layout-dot))
-    var(--grid-spacing, var(--spacing-layout-dot));
-  background-position: var(--viewport-offset-x, 0) var(--viewport-offset-y, 0);
+  /* Dot grid — two stacked layers tile across the viewport so the
+     grid always covers it regardless of zoom. The fine layer (1×
+     pitch) sits on top and fades with `--grid-fine-alpha` as you zoom
+     out; the coarse layer (2× pitch) is always at full opacity and
+     carries the visual at small scales. The coarse layer's positions
+     are a subset of the fine's, so fading the fine out leaves a
+     subset of the same dots — no jump. Both `background-position`
+     entries use `calc(50% + offset)` so the grid shares the same
+     pivot as the workspace `transform` (which is `transform-origin:
+     center` plus the same offset). With percent-based positioning,
+     CSS auto-compensates for the differing image sizes so each
+     layer's center dot lands at the same viewport point — making the
+     coarse layer's positions perfectly align with every-other fine
+     dot. */
+  /* Dot radii scale with `--viewport-scale` so the dot-to-tile ratio
+     stays constant. Floored at 0.6× so the dots stay visible at
+     extreme zoom-out instead of dissolving into sub-pixel noise. The
+     anti-aliasing ring (the gap between the solid stop and the
+     transparent stop) is pinned to a constant 0.5px regardless of
+     zoom — without that pin, zooming in scaled up the AA halo too,
+     and the dots read as soft/blurry instead of crisp. */
+  --dot-scale: max(0.6, var(--viewport-scale, 1));
+  --dot-radius: calc(1px * var(--dot-scale));
+  --dot-fade-radius: calc(var(--dot-radius) + 0.5px);
+  background-image:
+    radial-gradient(
+      circle,
+      color-mix(
+          in srgb,
+          var(--color-layout-grid-dot) calc(100% * var(--grid-fine-alpha, 1)),
+          transparent
+        )
+        var(--dot-radius),
+      transparent var(--dot-fade-radius)
+    ),
+    radial-gradient(
+      circle,
+      color-mix(
+          in srgb,
+          var(--color-layout-grid-dot) calc(100% * var(--grid-coarse-alpha, 0)),
+          transparent
+        )
+        var(--dot-radius),
+      transparent var(--dot-fade-radius)
+    );
+  background-size:
+    var(--grid-spacing, var(--spacing-layout-dot))
+      var(--grid-spacing, var(--spacing-layout-dot)),
+    calc(var(--grid-spacing, var(--spacing-layout-dot)) * 2)
+      calc(var(--grid-spacing, var(--spacing-layout-dot)) * 2);
+  background-position:
+    calc(50% + var(--viewport-offset-x, 0))
+      calc(50% + var(--viewport-offset-y, 0)),
+    calc(50% + var(--viewport-offset-x, 0))
+      calc(50% + var(--viewport-offset-y, 0));
   /* Clip the transformed workspace (+ any other absolute-positioned
      children) to the viewport box so panning out doesn't paint above
      the top workflow-tabs bar. */

src/components/appMode/layout/OutputWindow.vue

@@ -182,8 +182,15 @@ const combinedMenuEntries = computed<MenuItem[]>(() => {
       maximized
         ? { inset: '0px', zIndex: zIndex ?? 30 }
         : {
-            left: `${wx}px`,
-            top: `${wy}px`,
+            // Position via translate3d (compositor-only) instead of
+            // top/left (layout + paint). Updating top/left every
+            // pointermove during a drag shares the main thread with
+            // the latent-preview decode, which is what made dragging
+            // an OutputWindow feel laggy mid-run. transform keeps the
+            // move on the GPU, freeing main-thread budget. The `0`
+            // forces a 3D layer so the browser allocates a composite
+            // layer up-front rather than promoting on first move.
+            transform: `translate3d(${wx}px, ${wy}px, 0)`,
             width: `${width}px`,
             zIndex: zIndex ?? 30,
             // Drop height when collapsed (header-only) or when

src/components/appMode/layout/panels/FloatingPanel.vue

@@ -26,8 +26,8 @@ import { useAppModeStore } from '@/stores/appModeStore'
 
 import PanelDragPreview from './PanelDragPreview.vue'
 import { PANEL_PRESET_CLASSES } from './panelPresetClasses'
-import { isDockPreset, isFloatBottom, panelSide } from './panelTypes';
-import type { PanelPreset } from './panelTypes';
+import { isDockPreset, isFloatBottom, panelSide } from './panelTypes'
+import type { PanelPreset } from './panelTypes'
 import { usePanelDrag } from './usePanelDrag'
 import { usePanelResize } from './usePanelResize'
 
@@ -118,22 +118,24 @@ const sectionClass = computed(() =>
     // presets fall back to the default --panel-dock-width token.
     !isDocked.value && 'w-(--panel-dock-width,440px)',
     'max-w-[calc(100vw-var(--spacing-layout-outer)*2)]',
-    'rounded-[10px] border border-white/8 bg-layout-cell backdrop-blur-sm',
+    'rounded-[10px] border border-white/8 bg-layout-cell',
+    // Drop backdrop-blur while the panel is being dragged. Backdrop-
+    // filter is the most expensive CSS effect we use, and when the
+    // layer behind the panel is repainting every frame (latent
+    // preview / progress bar during a run), the GPU has to recompose
+    // the blur each frame, which tanks drag framerate. Idle keeps the
+    // glassy look; dragging drops it for smoothness.
+    !isDragging.value && 'backdrop-blur-sm',
     'shadow-[0_2px_4px_rgb(0_0_0/0.4),0_16px_48px_rgb(0_0_0/0.45)]',
     'duration-layout ease-layout',
-    // Split the transition property list by drag state: while dragging,
-    // only opacity tweens (position is driven by pointer, not CSS) so
-    // the multi-property transition below would cause a trailing easing
-    // pop when the commit lands.
-    //
-    // Fade the live panel heavily while dragging so the PanelDragPreview
-    // (which may land at the same preset the panel is already docked
-    // at — e.g., mousing around the right half while docked-right)
-    // reads as the dominant blue outline rather than being masked by
-    // the live panel's own contents.
+    // While dragging only opacity tweens (position is driven by the
+    // pointer, not CSS) so the multi-property transition below would
+    // cause a trailing easing pop when the commit lands. Fade the live
+    // panel heavily so the PanelDragPreview reads as the dominant blue
+    // outline rather than being masked by the live panel's contents.
     movable && isDragging.value
       ? 'opacity-[0.15] transition-opacity'
-      : 'transition-[top,bottom,left,right,max-height,height,opacity]',
+      : 'transition-[top,bottom,left,right,opacity]',
     PANEL_PRESET_CLASSES[preset.value],
     // Collapsed: release the off-corner anchor + any cap so the section
     // shrinks to header-only. Top-anchored presets stay pinned at the

src/components/appMode/layout/panels/usePanelDrag.ts

@@ -170,6 +170,10 @@ export function usePanelDrag(opts: UsePanelDragOptions) {
     // isDragging + snapTarget stay unchanged until the movement
     // threshold is crossed — so a plain click on the header is a no-op.
     e.preventDefault()
+    // Stop bubbling so LayoutView's pan handler (now bound to the
+    // outer `.layout-view`) doesn't also start a workspace pan from
+    // this same press.
+    e.stopPropagation()
   }
 
   return {