@hienlh/ppm 0.17.57 → 0.18.0

package/src/web/components/floating-window/floating-window.tsx

@@ -0,0 +1,167 @@
+/**
+ * One floating window: geometry, gestures, keyboard, and a chrome slot.
+ *
+ * Geometry is written straight to the element instead of through React state — a drag emits
+ * a pointermove per frame and re-rendering the window (and its content) on each one is what
+ * makes a window manager feel heavy. The store is written only when a gesture ends, which is
+ * also the moment the rect is rounded to whole pixels.
+ */
+
+import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { DefaultWindowChrome } from "./default-window-chrome";
+import { TITLEBAR_HEIGHT, type WindowChrome } from "./window-chrome-contract";
+import { windowZIndex, type Bounds, type Rect } from "./window-geometry";
+import { useWindowStore, type WindowRuntimeState } from "./window-store";
+import { useWindowDrag } from "./use-window-drag";
+import { useWindowKeyboard } from "./use-window-keyboard";
+import { useWindowResize } from "./use-window-resize";
+import { WindowResizeHandles } from "./window-resize-handles";
+
+export interface FloatingWindowProps {
+  win: WindowRuntimeState;
+  /** Size of the layer container; a maximized window fills exactly this. */
+  bounds: Bounds;
+  title: string;
+  focused: boolean;
+  /** Reads the layer's CSS scale so pointer deltas can be corrected. */
+  getScale: () => number;
+  /** Told when a gesture starts/ends so the layer can raise its capture overlay. */
+  onGestureActive: (active: boolean) => void;
+  /** Skin component for the titlebar; owns its own hooks and state. */
+  chrome?: WindowChrome;
+  children: ReactNode;
+}
+
+function applyRect(el: HTMLElement | null, rect: Rect, collapsed: boolean): void {
+  if (!el) return;
+  el.style.transform = `translate3d(${Math.round(rect.x)}px, ${Math.round(rect.y)}px, 0)`;
+  el.style.width = `${Math.round(rect.w)}px`;
+  el.style.height = collapsed ? `${TITLEBAR_HEIGHT}px` : `${Math.round(rect.h)}px`;
+}
+
+export function FloatingWindow({
+  win,
+  bounds,
+  title,
+  focused,
+  getScale,
+  onGestureActive,
+  chrome,
+  children,
+}: FloatingWindowProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [gesturing, setGesturing] = useState(false);
+
+  const maximized = win.state === "maximized";
+  const minimized = win.state === "minimized";
+  const rect: Rect = maximized ? { x: 0, y: 0, w: bounds.w, h: bounds.h } : win.rect;
+
+  // Latest committed geometry, read at the first frame of a gesture (never mid-gesture,
+  // where it would compound the cumulative movement).
+  const rectRef = useRef(rect);
+  rectRef.current = rect;
+  const boundsRef = useRef(bounds);
+  boundsRef.current = bounds;
+
+  useLayoutEffect(() => {
+    applyRect(rootRef.current, rectRef.current, minimized);
+  }, [rect.x, rect.y, rect.w, rect.h, minimized]);
+
+  const setActive = useCallback(
+    (active: boolean) => {
+      setGesturing(active);
+      onGestureActive(active);
+    },
+    [onGestureActive],
+  );
+
+  const commitMove = useCallback((next: Rect, committed: boolean) => {
+    applyRect(rootRef.current, next, useWindowStore.getState().windows[win.id]?.state === "minimized");
+    if (committed) useWindowStore.getState().move(win.id, { x: next.x, y: next.y });
+  }, [win.id]);
+
+  const commitResize = useCallback((next: Rect, committed: boolean) => {
+    applyRect(rootRef.current, next, false);
+    if (committed) useWindowStore.getState().resize(win.id, next);
+  }, [win.id]);
+
+  const shared = {
+    getRect: () => rectRef.current,
+    getBounds: () => boundsRef.current,
+    getScale,
+    onGestureActive: setActive,
+  };
+  const bindDrag = useWindowDrag({ ...shared, onChange: commitMove, disabled: maximized });
+  const bindResize = useWindowResize({ ...shared, onChange: commitResize, disabled: maximized || minimized });
+
+  const close = useCallback(() => useWindowStore.getState().close(win.id), [win.id]);
+  const toggleMaximize = useCallback(() => {
+    useWindowStore.getState().setState(win.id, maximized ? "normal" : "maximized");
+  }, [win.id, maximized]);
+  const minimize = useCallback(() => {
+    useWindowStore.getState().setState(win.id, minimized ? "normal" : "minimized");
+  }, [win.id, minimized]);
+
+  const onKeyDown = useWindowKeyboard({
+    getRect: () => rectRef.current,
+    getBounds: () => boundsRef.current,
+    onMove: (next) => useWindowStore.getState().move(win.id, { x: next.x, y: next.y }),
+    onToggleMaximize: toggleMaximize,
+    onClose: close,
+    movable: !maximized,
+  });
+
+  const Chrome = chrome ?? DefaultWindowChrome;
+
+  return (
+    <div
+      ref={rootRef}
+      role="group"
+      aria-roledescription="window"
+      aria-label={title}
+      // Any pointer inside the window raises it, including clicks on its content.
+      onPointerDownCapture={() => useWindowStore.getState().focus(win.id)}
+      style={{ zIndex: windowZIndex(win.rank) }}
+      className={cn(
+        "absolute left-0 top-0 flex flex-col pointer-events-auto",
+        "rounded-[8px] border border-border bg-panel overflow-visible",
+        focused ? "shadow-2xl shadow-black/40" : "shadow-lg shadow-black/20",
+        // Transitions are for maximize/restore only; during a gesture they would lag the pointer.
+        gesturing ? "transition-none" : "transition-[transform,width,height] duration-150 motion-reduce:transition-none",
+      )}
+    >
+      <Chrome
+        id={win.id}
+        kind={win.kind}
+        title={title}
+        state={win.state}
+        focused={focused}
+        titlebarProps={{
+          ...(bindDrag() as Record<string, unknown>),
+          onKeyDown,
+          tabIndex: 0,
+          role: "toolbar",
+          "aria-label": `${title} title bar`,
+          // Scoped here rather than on document: a global user-select hack leaks into
+          // unrelated panels and survives a gesture that ends outside the window.
+          style: { touchAction: "none", userSelect: "none" },
+        }}
+        onMinimize={minimize}
+        onToggleMaximize={toggleMaximize}
+        onClose={close}
+      />
+
+
+      {/* Always mounted, even minimized — content owns per-window state (explorer history,
+          selection, filter) that a remount would wipe. Hidden via CSS, not unmounted. */}
+      <div className={cn("relative flex-1 min-h-0 overflow-hidden rounded-b-[8px] bg-panel", minimized && "hidden")}>
+        {children}
+      </div>
+
+      {!maximized && !minimized && (
+        <WindowResizeHandles bind={(handle) => bindResize(handle) as Record<string, unknown>} />
+      )}
+    </div>
+  );
+}

package/src/web/components/floating-window/use-window-drag.ts

@@ -0,0 +1,28 @@
+/** Titlebar drag: moves a window, committing to the store only when the gesture ends. */
+
+import { useDrag } from "@use-gesture/react";
+import { clampRect, type Rect } from "./window-geometry";
+import {
+  gestureDisplacement,
+  WINDOW_DRAG_CONFIG,
+  type WindowGestureContext,
+} from "./use-window-gesture-context";
+
+export function useWindowDrag(ctx: WindowGestureContext) {
+  return useDrag(
+    ({ xy, initial, first, last, memo }) => {
+      // The rect is captured once per gesture: the displacement is cumulative from the
+      // start, so re-reading a rect that we ourselves are mutating would compound it.
+      const base: Rect = first ? { ...ctx.getRect() } : (memo as Rect);
+      if (first) ctx.onGestureActive(true);
+
+      const { dx, dy } = gestureDisplacement(xy, initial, ctx.getScale());
+      const next = clampRect({ ...base, x: base.x + dx, y: base.y + dy }, ctx.getBounds());
+      ctx.onChange(next, last);
+
+      if (last) ctx.onGestureActive(false);
+      return base;
+    },
+    { ...WINDOW_DRAG_CONFIG, enabled: !ctx.disabled },
+  );
+}

package/src/web/components/floating-window/use-window-gesture-context.ts

@@ -0,0 +1,44 @@
+/** Shared plumbing between the window drag and resize gestures. */
+
+import type { Bounds, Rect } from "./window-geometry";
+
+export interface WindowGestureContext {
+  /** Rect at the moment the gesture starts — read lazily so it is never stale. */
+  getRect: () => Rect;
+  getBounds: () => Bounds;
+  /**
+   * Layer scale when an ancestor applies a CSS transform/zoom. Pointer deltas are in
+   * screen pixels, layout coordinates are not, so deltas must be divided by it or the
+   * window drifts away from the cursor.
+   */
+  getScale: () => number;
+  /** `committed` is true on the last frame of the gesture — the only time the store is written. */
+  onChange: (rect: Rect, committed: boolean) => void;
+  /** Raises the transparent capture overlay so iframes/editors cannot swallow the pointer. */
+  onGestureActive: (active: boolean) => void;
+  disabled?: boolean;
+}
+
+/** Gesture config shared by both hooks: keep the pointer captured, ignore taps. */
+export const WINDOW_DRAG_CONFIG = {
+  filterTaps: true,
+  pointer: { capture: true },
+} as const;
+
+/**
+ * Pointer displacement since the gesture started, corrected for layer scale.
+ *
+ * Derived from the raw pointer coordinates (`xy` minus `initial`) rather than the
+ * recogniser's `movement`: with a tap threshold in play, `movement` has those first pixels
+ * subtracted, which would leave the window trailing the pointer by the threshold for the
+ * rest of the gesture. Both values are cumulative from the gesture's start, so applying
+ * them to the rect captured at that moment can never drift the way per-frame deltas do.
+ */
+export function gestureDisplacement(
+  xy: readonly [number, number],
+  initial: readonly [number, number],
+  scale: number,
+): { dx: number; dy: number } {
+  const s = scale > 0 ? scale : 1;
+  return { dx: (xy[0] - initial[0]) / s, dy: (xy[1] - initial[1]) / s };
+}

package/src/web/components/floating-window/use-window-keyboard.ts

@@ -0,0 +1,55 @@
+/**
+ * Keyboard operation for a focused titlebar — the accessible path for users who cannot drag.
+ *
+ * Arrows nudge (Shift = 1 px), Alt+Enter toggles maximize, Escape closes. There is
+ * deliberately no Ctrl/Cmd+W: Chromium reserves it for the browser tab outside PWA and
+ * fullscreen contexts and ignores preventDefault, so binding it would close the app instead.
+ */
+
+import { useCallback } from "react";
+import type { KeyboardEvent } from "react";
+import { nudgeRect, type Bounds, type Rect } from "./window-geometry";
+
+const NUDGE = 10;
+const NUDGE_FINE = 1;
+
+const ARROWS: Record<string, [number, number]> = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+};
+
+export interface WindowKeyboardActions {
+  getRect: () => Rect;
+  getBounds: () => Bounds;
+  onMove: (rect: Rect) => void;
+  onToggleMaximize: () => void;
+  onClose: () => void;
+  /** Nudging a maximized window would fight the layout, so it is ignored. */
+  movable: boolean;
+}
+
+export function useWindowKeyboard(actions: WindowKeyboardActions) {
+  return useCallback(
+    (e: KeyboardEvent<HTMLElement>) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        actions.onClose();
+        return;
+      }
+      if (e.altKey && e.key === "Enter") {
+        e.preventDefault();
+        actions.onToggleMaximize();
+        return;
+      }
+      const dir = ARROWS[e.key];
+      if (!dir || !actions.movable) return;
+      // Arrows would otherwise scroll the panel behind the window.
+      e.preventDefault();
+      const step = e.shiftKey ? NUDGE_FINE : NUDGE;
+      actions.onMove(nudgeRect(actions.getRect(), dir[0] * step, dir[1] * step, actions.getBounds()));
+    },
+    [actions],
+  );
+}

package/src/web/components/floating-window/use-window-resize.ts

@@ -0,0 +1,30 @@
+/**
+ * Eight-direction resize. One `useDrag` instance is bound per handle via `bind(handle)`;
+ * the handle id arrives in `args`, so all eight edges share a single recogniser.
+ */
+
+import { useDrag } from "@use-gesture/react";
+import { applyResize, clampRect, type Rect, type ResizeHandle } from "./window-geometry";
+import {
+  gestureDisplacement,
+  WINDOW_DRAG_CONFIG,
+  type WindowGestureContext,
+} from "./use-window-gesture-context";
+
+export function useWindowResize(ctx: WindowGestureContext) {
+  return useDrag(
+    ({ args, xy, initial, first, last, memo }) => {
+      const handle = args[0] as ResizeHandle;
+      const base: Rect = first ? { ...ctx.getRect() } : (memo as Rect);
+      if (first) ctx.onGestureActive(true);
+
+      const { dx, dy } = gestureDisplacement(xy, initial, ctx.getScale());
+      const next = clampRect(applyResize(base, handle, dx, dy), ctx.getBounds());
+      ctx.onChange(next, last);
+
+      if (last) ctx.onGestureActive(false);
+      return base;
+    },
+    { ...WINDOW_DRAG_CONFIG, enabled: !ctx.disabled },
+  );
+}

package/src/web/components/floating-window/window-chrome-contract.ts

@@ -0,0 +1,38 @@
+/**
+ * Contract between the window frame and whatever draws its titlebar.
+ *
+ * The frame owns geometry, gestures and keyboard handling; a chrome implementation owns
+ * only the look. Everything a titlebar needs to be draggable and operable arrives in
+ * `titlebarProps` — a chrome that spreads it gets drag, focus and keyboard for free.
+ */
+
+import type { ComponentType, HTMLAttributes } from "react";
+import type { WindowKind, WindowVisualState } from "./window-store-types";
+
+export interface WindowChromeProps {
+  id: string;
+  kind: WindowKind;
+  title: string;
+  state: WindowVisualState;
+  /** True when this window is frontmost — chrome should dim its titlebar otherwise. */
+  focused: boolean;
+  /**
+   * Spread on the titlebar element. Carries the drag recogniser, the keyboard handler,
+   * `tabIndex`, and the `touch-action`/`user-select` suppression the gesture needs.
+   * A chrome may append its own className/style; it must not drop these.
+   */
+  titlebarProps: HTMLAttributes<HTMLElement> & { tabIndex: number };
+  onMinimize: () => void;
+  onToggleMaximize: () => void;
+  onClose: () => void;
+}
+
+/**
+ * Rendered as an element by the frame, so a skin owns its own hooks and state (hover and
+ * focus handling for traffic lights, animation, its own effects) without touching the
+ * frame's hook order.
+ */
+export type WindowChrome = ComponentType<WindowChromeProps>;
+
+/** Titlebar height the frame reserves when a window is collapsed (minimised). */
+export const TITLEBAR_HEIGHT = 36;

package/src/web/components/floating-window/window-content-registry.ts

@@ -0,0 +1,51 @@
+/**
+ * Maps a window `kind` to the component that fills its body.
+ *
+ * The registry is the only coupling point between the generic window layer and real
+ * features: adding a kind means adding an entry here plus a title resolver, and nothing in
+ * the frame, store or gestures changes. Entries are lazy so a window's content (and its
+ * icon/virtualisation deps) never lands in the initial bundle.
+ */
+
+import { lazy, type ComponentType, type LazyExoticComponent } from "react";
+import { ExplorerSkinChrome } from "@/components/os-explorer/skins/explorer-skin-chrome";
+import type { WindowChrome } from "./window-chrome-contract";
+import type { WindowKind } from "./window-store-types";
+
+export interface WindowContentProps {
+  /** Window id — content may call the store to close/retitle itself. */
+  id: string;
+  /** Kind-specific state persisted with the window (e.g. the explorer's current path). */
+  payload?: Record<string, unknown>;
+}
+
+export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentType<WindowContentProps>>> = {
+  explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
+};
+
+/**
+ * Per-kind titlebar chrome. `FloatingWindow` renders `chrome` directly with no
+ * `<Suspense>` around it, so — unlike `WINDOW_CONTENT` — entries here must be plain,
+ * synchronously-renderable components, not `lazy()`.
+ */
+export const WINDOW_CHROME: Partial<Record<WindowKind, WindowChrome>> = {
+  explorer: ExplorerSkinChrome,
+};
+
+/** Chrome for a window kind, or `undefined` to fall back to `DefaultWindowChrome`. */
+export function chromeFor(kind: WindowKind): WindowChrome | undefined {
+  return WINDOW_CHROME[kind];
+}
+
+/** Titlebar text for a window. Falls back to the kind's generic name. */
+export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>): string {
+  const explicit = payload?.title;
+  if (typeof explicit === "string" && explicit.trim()) return explicit;
+  const path = payload?.path;
+  if (kind === "explorer" && typeof path === "string" && path) {
+    const segments = path.split(/[\\/]/).filter(Boolean);
+    // A drive or POSIX root has no last segment worth showing; the raw path is the name.
+    return segments[segments.length - 1] ?? path;
+  }
+  return "Explorer";
+}

package/src/web/components/floating-window/window-geometry.ts

@@ -0,0 +1,121 @@
+/**
+ * Pure geometry for the floating window layer — no DOM, no React, so every rule
+ * (min size, on-screen clamping, per-handle resize, spawn cascade) is unit-testable.
+ *
+ * All coordinates are relative to the layer container (the app content area), not the
+ * browser viewport: the nav rail must stay usable while a window is maximised.
+ */
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/** Size of the layer container the rects live in. */
+export interface Bounds {
+  w: number;
+  h: number;
+}
+
+export type ResizeHandle = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+
+export const RESIZE_HANDLES: ResizeHandle[] = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+
+export const MIN_SIZE = { w: 360, h: 240 } as const;
+
+/**
+ * How much of the titlebar must remain reachable after a clamp. A window dragged past an
+ * edge keeps this many pixels inside the layer so it can always be grabbed back.
+ */
+export const KEEP_VISIBLE = 48;
+
+/** Offset between consecutive spawns, matching desktop window managers. */
+export const CASCADE_STEP = 24;
+
+/** Hard cap on simultaneous windows so the z-band stays inside 30..38. */
+export const MAX_WINDOWS = 8;
+
+/** Base z-index of the layer; strictly below the app's z-40 backdrops and z-50 popovers. */
+export const Z_BASE = 30;
+
+const PREFERRED = { w: 880, h: 560 } as const;
+const SPAWN_MARGIN = 48;
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+/** Inline z-index for a window at `rank` (0 = backmost). Never exceeds Z_BASE + 8. */
+export function windowZIndex(rank: number): number {
+  return Z_BASE + clamp(Math.trunc(rank), 0, MAX_WINDOWS);
+}
+
+/**
+ * Fit a rect inside the layer: at least MIN_SIZE, never wider/taller than the layer, and
+ * positioned so KEEP_VISIBLE px of the titlebar row stay inside. Values are rounded to
+ * whole pixels — sub-pixel transforms blur text on high-DPI screens.
+ */
+export function clampRect(rect: Rect, bounds: Bounds): Rect {
+  const w = Math.max(MIN_SIZE.w, Math.min(rect.w, Math.max(bounds.w, MIN_SIZE.w)));
+  const h = Math.max(MIN_SIZE.h, Math.min(rect.h, Math.max(bounds.h, MIN_SIZE.h)));
+  // Left edge may go negative (window hangs off the left) as long as its right edge
+  // still shows KEEP_VISIBLE px; the top edge may never go above the layer, or the
+  // titlebar becomes unreachable.
+  const x = clamp(rect.x, KEEP_VISIBLE - w, Math.max(KEEP_VISIBLE - w, bounds.w - KEEP_VISIBLE));
+  const y = clamp(rect.y, 0, Math.max(0, bounds.h - KEEP_VISIBLE));
+  return { x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) };
+}
+
+/**
+ * Apply a drag delta to one of the 8 handles.
+ *
+ * Edges anchored by the handle stay put; the opposite edge moves. Shrinking past the
+ * minimum stops the moving edge instead of pushing the anchored one, which is what makes
+ * a resize feel like a native window instead of sliding away under the cursor.
+ */
+export function applyResize(
+  rect: Rect,
+  handle: ResizeHandle,
+  dx: number,
+  dy: number,
+  min: { w: number; h: number } = MIN_SIZE,
+): Rect {
+  let { x, y, w, h } = rect;
+
+  if (handle.includes("e")) {
+    w = Math.max(min.w, rect.w + dx);
+  } else if (handle.includes("w")) {
+    const right = rect.x + rect.w;
+    w = Math.max(min.w, rect.w - dx);
+    x = right - w;
+  }
+
+  if (handle.includes("s")) {
+    h = Math.max(min.h, rect.h + dy);
+  } else if (handle.includes("n")) {
+    const bottom = rect.y + rect.h;
+    h = Math.max(min.h, rect.h - dy);
+    y = bottom - h;
+  }
+
+  return { x, y, w, h };
+}
+
+/**
+ * Where a newly opened window goes: cascaded from the top-left by CASCADE_STEP per existing
+ * window, wrapping before it would walk off the layer.
+ */
+export function cascadeSpawnRect(existing: Rect[], bounds: Bounds): Rect {
+  const w = Math.min(PREFERRED.w, Math.max(MIN_SIZE.w, bounds.w - SPAWN_MARGIN * 2));
+  const h = Math.min(PREFERRED.h, Math.max(MIN_SIZE.h, bounds.h - SPAWN_MARGIN * 2));
+  const step = existing.length % MAX_WINDOWS;
+  return clampRect(
+    { x: SPAWN_MARGIN + step * CASCADE_STEP, y: SPAWN_MARGIN + step * CASCADE_STEP, w, h },
+    bounds,
+  );
+}
+
+/** Nudge step for arrow keys on a focused titlebar (Shift = fine-grained). */
+export function nudgeRect(rect: Rect, dx: number, dy: number, bounds: Bounds): Rect {
+  return clampRect({ ...rect, x: rect.x + dx, y: rect.y + dy }, bounds);
+}

package/src/web/components/floating-window/window-layer.tsx

@@ -0,0 +1,92 @@
+/**
+ * Host for all floating windows, sized to the app's content area.
+ *
+ * It is deliberately a plain absolutely-positioned child of the content wrapper rather than
+ * a body-level portal: window coordinates stay relative to the working area, so a maximized
+ * window covers the panels but never the nav rail, and the container's own resize is what
+ * triggers re-clamping.
+ *
+ * The layer is desktop-only. Below the `md` breakpoint it renders nothing and never touches
+ * the store, leaving the mobile sheet presentation free to own the same content.
+ */
+
+import { Suspense, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { FloatingWindow } from "./floating-window";
+import { chromeFor, WINDOW_CONTENT, windowTitle } from "./window-content-registry";
+import { Z_BASE, MAX_WINDOWS } from "./window-geometry";
+import { useWindowStore, windowsInRankOrder } from "./window-store";
+
+export function WindowLayer() {
+  const isMobile = useIsMobile();
+  if (isMobile) return null;
+  return <DesktopWindowLayer />;
+}
+
+function DesktopWindowLayer() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const windows = useWindowStore((s) => s.windows);
+  const bounds = useWindowStore((s) => s.bounds);
+  const [capturing, setCapturing] = useState(false);
+
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      const scale = el.offsetWidth > 0 ? r.width / el.offsetWidth : 1;
+      // Report layout pixels, not scaled screen pixels, so rects match the CSS coordinates
+      // the windows are positioned in.
+      return { w: Math.round(r.width / scale), h: Math.round(r.height / scale) };
+    };
+    const store = useWindowStore.getState();
+    store.setBounds(measure());
+    store.restoreAll(measure());
+    // Panels, the sidebar and the browser all resize this box; window.resize alone misses
+    // the first two and would leave windows stranded outside the layer.
+    const observer = new ResizeObserver(() => useWindowStore.getState().setBounds(measure()));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const getScale = useCallback(() => {
+    const el = containerRef.current;
+    if (!el || el.offsetWidth === 0) return 1;
+    return el.getBoundingClientRect().width / el.offsetWidth;
+  }, []);
+
+  const ordered = windowsInRankOrder(windows);
+  const frontId = ordered[ordered.length - 1]?.id;
+
+  return (
+    <div ref={containerRef} className="absolute inset-0 overflow-hidden pointer-events-none">
+      {ordered.map((win) => {
+        const Content = WINDOW_CONTENT[win.kind];
+        const title = windowTitle(win.kind, win.payload);
+        return (
+          <FloatingWindow
+            key={win.id}
+            win={win}
+            bounds={bounds}
+            title={title}
+            focused={win.id === frontId}
+            getScale={getScale}
+            onGestureActive={setCapturing}
+            chrome={chromeFor(win.kind)}
+          >
+            <Suspense fallback={<div className="p-3 text-xs text-text-2">Loading…</div>}>
+              <Content id={win.id} payload={win.payload} />
+            </Suspense>
+          </FloatingWindow>
+        );
+      })}
+
+      {/* Transparent capture surface: iframes and editors swallow pointer events, which
+          would stall a drag the moment the cursor crossed one. Stays inside the window
+          z-band so app popovers and dialogs remain above it. */}
+      {capturing && (
+        <div className="absolute inset-0 pointer-events-auto" style={{ zIndex: Z_BASE + MAX_WINDOWS }} />
+      )}
+    </div>
+  );
+}