@ai-matrx/summon 0.0.0 → 0.1.0

package/dist/window.js

@@ -0,0 +1,4003 @@
+"use client";
+
+// src/window/WindowPanel.tsx
+import React, { useCallback as useCallback4, useEffect as useEffect5, useId as useId2, useLayoutEffect, useRef as useRef4, useState as useState5 } from "react";
+import { announceLayerFront, FloatingLayer as FloatingLayer2, useFloatingLayerZIndex as useFloatingLayerZIndex2, usePortalContainer, PortalContainerProvider as PortalContainerProvider2 } from "@ai-matrx/design-system";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@ai-matrx/design-system";
+import { cn as cn9 } from "@ai-matrx/design-system/cn";
+import { useIsMobile } from "@ai-matrx/kit/media-query";
+import { createPortal as createPortal3 } from "react-dom";
+import {
+  arrangeActiveWindows,
+  clampWindowRect as clampWindowRect2,
+  overlaysRawActions,
+  DEFAULT_INSTANCE_ID as DEFAULT_INSTANCE_ID2,
+  dockWindow as dockWindow3,
+  buildDockWindowPayload as buildDockWindowPayload3,
+  getOverlayMeta as getOverlayMeta3,
+  safeViewportDims as safeViewportDims2,
+  selectAllWindows,
+  selectOverlayData as selectOverlayData2,
+  selectPopoutCandidateId,
+  selectPopoutMode as selectPopoutMode3,
+  selectWindowPersistence,
+  selectWindowsHidden,
+  updateWindowPersistence,
+  updateWindowRect as updateWindowRect2,
+  ackOverlayRender,
+  clearOverlayRender
+} from "@ai-matrx/summon";
+import { useOptionalOverlayInstance, useSummonDispatch as useSummonDispatch4, useSummonPorts as useSummonPorts3, useSummonSelector as useSummonSelector5, useSummonStore as useSummonStore2 } from "@ai-matrx/summon/react";
+
+// src/window/icons.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function glyph(children) {
+  return function Glyph(props) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        ...props,
+        children
+      }
+    );
+  };
+}
+var XIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+] }));
+var MinusIcon = glyph(/* @__PURE__ */ jsx("path", { d: "M5 12h14" }));
+var Maximize2Icon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 3-7 7" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 21H3v-6" })
+] }));
+var Minimize2Icon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "m14 10 7-7" }),
+  /* @__PURE__ */ jsx("path", { d: "M20 10h-6V4" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 21 7-7" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 14h6v6" })
+] }));
+var RectangleVerticalIcon = glyph(/* @__PURE__ */ jsx("rect", { width: "12", height: "20", x: "6", y: "2", rx: "2" }));
+var PanelLeftCloseIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "m16 15-3-3 3-3" })
+] }));
+var PanelLeftIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" })
+] }));
+var AppWindowIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 4v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M2 8h20" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 4v4" })
+] }));
+var SaveIcon = glyph(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" })
+  ] })
+);
+var TriangleAlertIcon = glyph(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] })
+);
+var ArrowLeftToLineIcon = glyph(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 19V5" }),
+  /* @__PURE__ */ jsx("path", { d: "m13 6-6 6 6 6" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 12h14" })
+] }));
+
+// src/window/LayoutIcon.tsx
+import { cn } from "@ai-matrx/design-system/cn";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function LayoutIcon({
+  type,
+  className
+}) {
+  const baseBox = "w-[18px] h-[18px] border-[1.5px] border-current rounded-sm shrink-0 flex items-center justify-center p-[1px] gap-[1px] overflow-hidden";
+  const filled = "bg-current rounded-[1px]";
+  const flexRow = "flex flex-row w-full h-full gap-[1px]";
+  const flexCol = "flex flex-col w-full h-full gap-[1px]";
+  let content = null;
+  switch (type) {
+    case "left-half":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: cn("w-1/2 h-full", filled) }),
+        /* @__PURE__ */ jsx2("div", { className: "w-1/2 h-full" })
+      ] });
+      break;
+    case "right-half":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-1/2 h-full" }),
+        /* @__PURE__ */ jsx2("div", { className: cn("w-1/2 h-full", filled) })
+      ] });
+      break;
+    case "top-half":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexCol, children: [
+        /* @__PURE__ */ jsx2("div", { className: cn("w-full h-1/2", filled) }),
+        /* @__PURE__ */ jsx2("div", { className: "w-full h-1/2" })
+      ] });
+      break;
+    case "bottom-half":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexCol, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-full h-1/2" }),
+        /* @__PURE__ */ jsx2("div", { className: cn("w-full h-1/2", filled) })
+      ] });
+      break;
+    case "centre":
+      content = /* @__PURE__ */ jsx2("div", { className: cn("w-1/2 h-1/2", filled) });
+      break;
+    case "full":
+      content = /* @__PURE__ */ jsx2("div", { className: cn("w-full h-full", filled) });
+      break;
+    // Grid variants
+    case "grid4":
+      content = /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 grid-rows-2 gap-[1px] w-full h-full", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx2("div", { className: filled }, i)) });
+      break;
+    case "grid6":
+      content = /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 grid-rows-2 gap-[1px] w-full h-full", children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsx2("div", { className: filled }, i)) });
+      break;
+    case "grid8":
+      content = /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-4 grid-rows-2 gap-[1px] w-full h-full", children: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => /* @__PURE__ */ jsx2("div", { className: filled }, i)) });
+      break;
+    case "grid9":
+      content = /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 grid-rows-3 gap-[1px] w-full h-full", children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => /* @__PURE__ */ jsx2("div", { className: filled }, i)) });
+      break;
+    case "grid12":
+      content = /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-4 grid-rows-3 gap-[1px] w-full h-full", children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => /* @__PURE__ */ jsx2("div", { className: filled }, i)) });
+      break;
+    // Stack variants
+    case "stackRight2":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-1/2 h-full" }),
+        /* @__PURE__ */ jsxs2("div", { className: "w-1/2 h-full flex flex-col gap-[1px]", children: [
+          /* @__PURE__ */ jsx2("div", { className: cn("w-full h-1/2", filled) }),
+          /* @__PURE__ */ jsx2("div", { className: cn("w-full h-1/2", filled) })
+        ] })
+      ] });
+      break;
+    case "stackRight3":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-2/3 h-full" }),
+        /* @__PURE__ */ jsx2("div", { className: "w-1/3 h-full flex flex-col gap-[1px]", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx2("div", { className: cn("w-full flex-1", filled) }, i)) })
+      ] });
+      break;
+    case "stackRight4":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-3/4 h-full" }),
+        /* @__PURE__ */ jsx2("div", { className: "w-1/4 h-full flex flex-col gap-[1px]", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx2("div", { className: cn("w-full flex-1", filled) }, i)) })
+      ] });
+      break;
+    case "stackRight5":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-4/5 h-full" }),
+        /* @__PURE__ */ jsx2("div", { className: "w-1/5 h-full flex flex-col gap-[1px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx2("div", { className: cn("w-full flex-1", filled) }, i)) })
+      ] });
+      break;
+    case "stackLeft2":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsxs2("div", { className: "w-1/2 h-full flex flex-col gap-[1px]", children: [
+          /* @__PURE__ */ jsx2("div", { className: cn("w-full h-1/2", filled) }),
+          /* @__PURE__ */ jsx2("div", { className: cn("w-full h-1/2", filled) })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "w-1/2 h-full" })
+      ] });
+      break;
+    case "stackLeft3":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-1/3 h-full flex flex-col gap-[1px]", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx2("div", { className: cn("w-full flex-1", filled) }, i)) }),
+        /* @__PURE__ */ jsx2("div", { className: "w-2/3 h-full" })
+      ] });
+      break;
+    case "stackLeft4":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-1/4 h-full flex flex-col gap-[1px]", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx2("div", { className: cn("w-full flex-1", filled) }, i)) }),
+        /* @__PURE__ */ jsx2("div", { className: "w-3/4 h-full" })
+      ] });
+      break;
+    case "stackLeft5":
+      content = /* @__PURE__ */ jsxs2("div", { className: flexRow, children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-1/5 h-full flex flex-col gap-[1px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx2("div", { className: cn("w-full flex-1", filled) }, i)) }),
+        /* @__PURE__ */ jsx2("div", { className: "w-4/5 h-full" })
+      ] });
+      break;
+  }
+  return /* @__PURE__ */ jsx2("div", { className: cn(baseBox, className), children: content });
+}
+function LayoutIconButton({
+  onClick,
+  type,
+  className
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex items-center justify-center flex-1 h-8 rounded-md transition-colors",
+        "hover:bg-accent/80 text-foreground/50 hover:text-foreground",
+        className
+      ),
+      onClick,
+      onPointerDown: (e) => e.stopPropagation(),
+      title: type,
+      children: /* @__PURE__ */ jsx2(LayoutIcon, { type })
+    }
+  );
+}
+
+// src/window/useWindowPanel.ts
+import { useEffect, useRef, useCallback, useId, useState } from "react";
+import { useSummonDispatch, useSummonSelector, useSummonStore } from "@ai-matrx/summon/react";
+import {
+  registerWindow,
+  unregisterWindow,
+  focusWindow,
+  restoreWindow,
+  maximizeWindow,
+  minimizeWindow,
+  updateWindowRect,
+  updateWindowTitle,
+  setPopoutCandidate,
+  clampWindowRect,
+  selectWindow,
+  confirmWindowRestored,
+  windowSessionKey
+} from "@ai-matrx/summon";
+
+// src/window/popout/popoutDragDetector.ts
+var DEFAULT_DRAG_OUT_CONFIG = {
+  outsideThreshold: 80,
+  dwellMs: 250
+};
+var INITIAL_DRAG_OUT_STATE = {
+  isCandidate: false,
+  outsideSinceMs: null
+};
+function evaluateDragOut(e, prev, cfg, vpW, vpH, now) {
+  const { clientX, clientY } = e;
+  const { outsideThreshold, dwellMs } = cfg;
+  const pastLeft = -clientX;
+  const pastRight = clientX - vpW;
+  const pastTop = -clientY;
+  const pastBottom = clientY - vpH;
+  const maxPast = Math.max(pastLeft, pastRight, pastTop, pastBottom);
+  const isOutsideEnough = maxPast >= outsideThreshold;
+  if (!isOutsideEnough) {
+    if (prev.isCandidate || prev.outsideSinceMs !== null) {
+      return {
+        state: { isCandidate: false, outsideSinceMs: null },
+        shouldTrigger: false
+      };
+    }
+    return { state: prev, shouldTrigger: false };
+  }
+  const outsideSince = prev.outsideSinceMs ?? now;
+  const dwellMet = now - outsideSince >= dwellMs;
+  const wasCandidate = prev.isCandidate;
+  const nowCandidate = dwellMet;
+  return {
+    state: { isCandidate: nowCandidate, outsideSinceMs: outsideSince },
+    shouldTrigger: !wasCandidate && nowCandidate
+  };
+}
+
+// src/window/useWindowPanel.ts
+import { safeViewportDims } from "@ai-matrx/summon";
+
+// src/window/utils/autoOpenPlacement.ts
+import { globalSlot } from "@ai-matrx/kit/global-slot";
+var GAP = 12;
+var SIBLING_GAP = 8;
+var AUTO_OPEN_MIN_WIDTH = 280;
+function marks() {
+  return globalSlot("ai-matrx.summon.window.autoOpenedMarks", () => /* @__PURE__ */ new Set());
+}
+var markKey = (overlayId, instanceId) => `${overlayId}::${instanceId}`;
+function markAutoOpened(overlayId, instanceId) {
+  marks().add(markKey(overlayId, instanceId));
+}
+function isAutoOpened(overlayId, instanceId) {
+  return marks().has(markKey(overlayId, instanceId));
+}
+function clearAutoOpened(overlayId, instanceId) {
+  marks().delete(markKey(overlayId, instanceId));
+}
+function canvasWidth() {
+  if (typeof document === "undefined") return 0;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue("--shell-canvas-w");
+  const px = Number.parseFloat(raw);
+  return Number.isFinite(px) && px > 0 ? px : 0;
+}
+var CONTROL_SELECTOR = 'button, a[href], input, textarea, select, [role="button"], [role="tab"], [data-clickable]';
+function measureWorkingColumn() {
+  if (typeof document === "undefined") return null;
+  const root = document.querySelector("[data-matrx-page-scroll]") ?? document.querySelector("main") ?? document.querySelector(".shell-main");
+  if (!root) return null;
+  const rootRect = root.getBoundingClientRect();
+  let left = Infinity;
+  let right = -Infinity;
+  const nodes = root.querySelectorAll(CONTROL_SELECTOR);
+  const limit = Math.min(nodes.length, 600);
+  for (let i = 0; i < limit; i += 1) {
+    const el = nodes[i];
+    if (!el) continue;
+    if (el.closest("[data-window-panel], [data-matrx-window]")) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 8 || r.height < 8) continue;
+    if (r.bottom < rootRect.top || r.top > rootRect.bottom) continue;
+    if (r.right < 0 || r.left > window.innerWidth) continue;
+    left = Math.min(left, r.left);
+    right = Math.max(right, r.right);
+  }
+  return Number.isFinite(left) ? { left, right } : null;
+}
+var AUTO_OPEN_NO_ROOM_EVENT = "matrx:auto-open-no-room";
+function autoOpenHasRoom() {
+  if (typeof window === "undefined") return false;
+  const vw = window.innerWidth;
+  if (vw < 768) return false;
+  const column = measureWorkingColumn();
+  if (!column) return true;
+  const leftRoot = document.querySelector("main")?.getBoundingClientRect().left ?? 0;
+  const free = Math.max(vw - canvasWidth() - column.right - GAP * 2, column.left - leftRoot - GAP * 2);
+  return free >= AUTO_OPEN_MIN_WIDTH;
+}
+function resolveAutoOpenPlacement(args) {
+  const { vh } = args.viewport;
+  const vw = args.viewport.vw - canvasWidth();
+  const column = measureWorkingColumn();
+  const rightFree = column ? vw - column.right - GAP * 2 : vw;
+  const leftRoot = typeof document !== "undefined" ? document.querySelector("main")?.getBoundingClientRect().left ?? 0 : 0;
+  const leftFree = column ? column.left - leftRoot - GAP * 2 : 0;
+  const side = rightFree >= leftFree ? "right" : "left";
+  const free = Math.max(rightFree, leftFree);
+  const need = Math.min(args.minWidth, AUTO_OPEN_MIN_WIDTH);
+  const parked = {
+    rect: {
+      x: Math.max(GAP, vw - args.width - GAP),
+      y: args.top,
+      width: args.width,
+      height: args.height
+    },
+    minimized: true
+  };
+  if (free < need) return parked;
+  const width = Math.max(need, Math.min(args.width, Math.floor(free)));
+  const x = side === "right" ? vw - width - GAP : Math.max(GAP, Math.round(leftRoot + GAP));
+  const inGutter = args.siblings.filter(
+    (s) => s.x + s.width > x && s.x < x + width
+  );
+  const y = inGutter.length ? Math.max(...inGutter.map((s) => s.y + s.height)) + SIBLING_GAP : args.top;
+  const room = vh - y - GAP;
+  if (room < args.minHeight) return parked;
+  const share = inGutter.length ? room : Math.floor((vh - args.top - GAP) / 2);
+  const height = Math.min(room, Math.max(args.minHeight, Math.min(args.height, share)));
+  return { rect: { x, y, width, height }, minimized: false };
+}
+
+// src/window/useWindowPanel.ts
+import { holdDragCursor } from "@ai-matrx/design-system";
+var MIN_WIDTH = 180;
+var MIN_HEIGHT = 80;
+var DEFAULT_WIDTH = 320;
+var DEFAULT_HEIGHT = 400;
+var RESIZE_CURSOR = {
+  e: "ew-resize",
+  w: "ew-resize",
+  n: "ns-resize",
+  s: "ns-resize",
+  se: "nwse-resize",
+  nw: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize"
+};
+function resolveSize(value, fallback) {
+  if (value === void 0) return fallback;
+  if (typeof value === "number") return value;
+  const { vw, vh } = safeViewportDims();
+  if (value.endsWith("vh")) return Math.round(parseFloat(value) / 100 * vh);
+  if (value.endsWith("vw")) return Math.round(parseFloat(value) / 100 * vw);
+  return parseFloat(value) || fallback;
+}
+var CASCADE_COUNT = /* @__PURE__ */ Symbol.for("matrx.windowPanels.defaultCascade");
+var CASCADE_STEP = 28;
+var CASCADE_WRAP = 6;
+function resetDefaultWindowCascade() {
+  globalThis[CASCADE_COUNT] = 0;
+}
+function nextCascadeStep() {
+  const host = globalThis;
+  const seen = host[CASCADE_COUNT] ?? 0;
+  host[CASCADE_COUNT] = seen + 1;
+  return seen % CASCADE_WRAP * CASCADE_STEP;
+}
+var NARROW_VIEWPORT = 768;
+var autoDocked = /* @__PURE__ */ new Set();
+var autoOrder = /* @__PURE__ */ new Map();
+var autoOrderNext = 0;
+var earlierDocked = (id) => (other) => other.id !== id && other.state === "windowed" && autoDocked.has(other.id) && (autoOrder.get(other.id) ?? 0) < (autoOrder.get(id) ?? 0);
+var AUTO_REPLACE_TICKS = 40;
+function shellHeaderClearance() {
+  const GAP2 = 12;
+  if (typeof document === "undefined") return 44 + GAP2;
+  const root = getComputedStyle(document.documentElement);
+  const raw = root.getPropertyValue("--shell-header-h").trim();
+  const n = parseFloat(raw);
+  const h = raw.endsWith("rem") ? n * (parseFloat(root.fontSize) || 16) : n;
+  return (Number.isFinite(h) && h > 0 ? h : 44) + GAP2;
+}
+function resolvePosition(pos, w, h) {
+  const { vw, vh } = safeViewportDims();
+  const pad = 40;
+  const top = shellHeaderClearance();
+  switch (pos) {
+    case "top-left":
+      return { x: pad, y: top };
+    case "top-right":
+      return { x: Math.max(0, vw - w - pad), y: top };
+    case "bottom-left":
+      return { x: pad, y: Math.max(0, vh - h - pad) };
+    case "bottom-right":
+      return { x: Math.max(0, vw - w - pad), y: Math.max(0, vh - h - pad) };
+    case "center":
+      return {
+        x: Math.max(0, (vw - w) / 2),
+        y: Math.max(top, (vh - h) / 4)
+      };
+    default: {
+      const cascade = nextCascadeStep();
+      if (vw < NARROW_VIEWPORT) {
+        return {
+          x: Math.max(0, Math.min(vw - w, (vw - w) / 2)),
+          y: Math.max(0, Math.min(vh - h, top + cascade))
+        };
+      }
+      return {
+        x: Math.max(0, vw - w - pad - cascade),
+        y: Math.max(0, Math.min(vh - h, top + cascade))
+      };
+    }
+  }
+}
+function useWindowPanel(opts = {}) {
+  const reactId = useId();
+  const id = opts.id ?? reactId;
+  const dispatch = useSummonDispatch();
+  const store = useSummonStore();
+  const entry = useSummonSelector(selectWindow(id));
+  const minWidth = opts.minWidth ?? MIN_WIDTH;
+  const minHeight = opts.minHeight ?? MIN_HEIGHT;
+  const maxWidth = opts.maxWidth ?? Infinity;
+  const maxHeight = opts.maxHeight ?? Infinity;
+  const [isInteracting, setIsInteracting] = useState(false);
+  useEffect(() => {
+    const w = opts.initialRect?.width ?? resolveSize(opts.width, DEFAULT_WIDTH);
+    const h = opts.initialRect?.height ?? resolveSize(opts.height, DEFAULT_HEIGHT);
+    const { vw, vh } = safeViewportDims();
+    let autoPlaced = null;
+    if (opts.autoOpened && vw >= NARROW_VIEWPORT) {
+      if (!autoOrder.has(id)) autoOrder.set(id, autoOrderNext++);
+      const siblings = Object.values(store.getState().windowManager.windows).filter(earlierDocked(id)).map((win) => win.windowed);
+      autoPlaced = resolveAutoOpenPlacement({
+        width: w,
+        height: h,
+        minWidth,
+        minHeight,
+        top: shellHeaderClearance(),
+        viewport: { vw, vh },
+        siblings
+      });
+      if (!autoPlaced.minimized) autoDocked.add(id);
+      else if (opts.onAutoNoRoom) window.setTimeout(() => opts.onAutoNoRoom?.(), 0);
+    }
+    const pos = autoPlaced ? { x: autoPlaced.rect.x, y: autoPlaced.rect.y } : opts.initialRect?.x !== void 0 || opts.initialRect?.y !== void 0 ? {
+      x: opts.initialRect?.x ?? Math.max(0, (vw - w) / 2),
+      y: opts.initialRect?.y ?? Math.max(0, (vh - h) / 4)
+    } : resolvePosition(opts.position, w, h);
+    const initial = autoPlaced ? { ...autoPlaced.rect } : { ...pos, width: w, height: h };
+    dispatch(
+      registerWindow({
+        id,
+        ...opts.title === void 0 ? {} : { title: opts.title },
+        initial,
+        ...autoPlaced?.minimized ? { initialState: "minimized" } : opts.initialState === void 0 ? {} : { initialState: opts.initialState },
+        ...opts.persistence === void 0 ? {} : { persistence: opts.persistence },
+        // Sanitized dims: a degenerate 0×0 measurement must never become the
+        // clamp target, or every rect collapses to garbage (see safeViewportDims).
+        viewport: { width: vw, height: vh }
+      })
+    );
+    const pendingKey = opts.persistence ? windowSessionKey(
+      opts.persistence.overlayId,
+      opts.persistence.instanceId
+    ) : null;
+    const confirmationTimer = pendingKey ? window.setTimeout(() => {
+      dispatch(confirmWindowRestored(pendingKey));
+    }, 0) : null;
+    return () => {
+      if (confirmationTimer !== null) window.clearTimeout(confirmationTimer);
+      autoDocked.delete(id);
+      autoOrder.delete(id);
+      dispatch(unregisterWindow(id));
+    };
+  }, [id]);
+  const autoTouchedRef = useRef(false);
+  useEffect(() => {
+    if (isInteracting) autoTouchedRef.current = true;
+  }, [isInteracting]);
+  useEffect(() => {
+    if (!opts.autoOpened) return void 0;
+    let ticks = 0;
+    let lastMinimized = null;
+    const timer = window.setInterval(() => {
+      ticks += 1;
+      if (ticks > AUTO_REPLACE_TICKS) {
+        window.clearInterval(timer);
+        return;
+      }
+      const win = store.getState().windowManager.windows[id];
+      if (!win || autoTouchedRef.current) return;
+      const { vw, vh } = safeViewportDims();
+      if (vw < NARROW_VIEWPORT) return;
+      const isMin = win.state === "minimized";
+      if (lastMinimized !== null && isMin !== lastMinimized) {
+        autoTouchedRef.current = true;
+        return;
+      }
+      if (win.state !== "windowed" && !isMin) return;
+      const siblings = Object.values(store.getState().windowManager.windows).filter(earlierDocked(id)).map((o) => o.windowed);
+      const next = resolveAutoOpenPlacement({
+        width: win.windowed.width,
+        height: win.windowed.height,
+        minWidth,
+        minHeight,
+        top: shellHeaderClearance(),
+        viewport: { vw, vh },
+        siblings
+      });
+      if (next.minimized) {
+        autoDocked.delete(id);
+        if (opts.onAutoNoRoom) {
+          window.clearInterval(timer);
+          opts.onAutoNoRoom();
+          return;
+        }
+        if (!isMin) {
+          dispatch(minimizeWindow({ id, viewportWidth: vw, viewportHeight: vh }));
+        }
+        lastMinimized = true;
+        return;
+      }
+      autoDocked.add(id);
+      if (isMin) dispatch(restoreWindow(id));
+      const cur = store.getState().windowManager.windows[id]?.windowed;
+      if (!cur || Math.abs(cur.x - next.rect.x) > 4 || Math.abs(cur.y - next.rect.y) > 4 || Math.abs(cur.width - next.rect.width) > 4 || Math.abs(cur.height - next.rect.height) > 4) {
+        dispatch(updateWindowRect({ id, rect: next.rect }));
+      }
+      lastMinimized = false;
+    }, 1e3);
+    return () => window.clearInterval(timer);
+  }, [opts.autoOpened, id, minWidth, minHeight, store, dispatch]);
+  useEffect(() => {
+    if (opts.title !== void 0) {
+      dispatch(updateWindowTitle({ id, title: opts.title }));
+    }
+  }, [id, opts.title, dispatch]);
+  const dragStart = useRef(null);
+  const onTriggerPopout = opts.onTriggerPopout;
+  const onTriggerPopoutRef = useRef(onTriggerPopout);
+  useEffect(() => {
+    onTriggerPopoutRef.current = onTriggerPopout;
+  }, [onTriggerPopout]);
+  const onDragStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      dispatch(focusWindow(id));
+      if (!entry || entry.state === "maximized") return;
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        wx: entry.windowed.x,
+        wy: entry.windowed.y
+      };
+      setIsInteracting(true);
+      const releaseCursor = holdDragCursor();
+      let dragOutState = INITIAL_DRAG_OUT_STATE;
+      let lastClientX = e.clientX;
+      let lastClientY = e.clientY;
+      const popoutEnabled = onTriggerPopoutRef.current !== void 0;
+      const onMove = (ev) => {
+        if (!dragStart.current) return;
+        const nx = dragStart.current.wx + (ev.clientX - dragStart.current.mx);
+        const ny = dragStart.current.wy + (ev.clientY - dragStart.current.my);
+        dispatch(updateWindowRect({ id, rect: { x: nx, y: ny } }));
+        lastClientX = ev.clientX;
+        lastClientY = ev.clientY;
+        if (!popoutEnabled) return;
+        const result = evaluateDragOut(
+          { clientX: ev.clientX, clientY: ev.clientY },
+          dragOutState,
+          DEFAULT_DRAG_OUT_CONFIG,
+          window.innerWidth,
+          window.innerHeight,
+          performance.now()
+        );
+        if (result.state.isCandidate !== dragOutState.isCandidate) {
+          dispatch(
+            setPopoutCandidate({ id: result.state.isCandidate ? id : null })
+          );
+        }
+        dragOutState = result.state;
+      };
+      const onUp = () => {
+        const wasCandidate = dragOutState.isCandidate;
+        const dragOrigin = dragStart.current;
+        dragStart.current = null;
+        setIsInteracting(false);
+        releaseCursor();
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        document.removeEventListener("pointercancel", onUp);
+        if (popoutEnabled && dragOutState.isCandidate) {
+          dispatch(setPopoutCandidate({ id: null }));
+        }
+        if (wasCandidate && onTriggerPopoutRef.current && entry) {
+          const lastRect = {
+            x: dragOrigin?.wx ?? entry.windowed.x,
+            y: dragOrigin?.wy ?? entry.windowed.y,
+            width: entry.windowed.width,
+            height: entry.windowed.height
+          };
+          onTriggerPopoutRef.current(lastRect);
+        } else {
+          const { vw, vh, degenerate } = safeViewportDims();
+          if (!degenerate) {
+            dispatch(
+              clampWindowRect({ id, viewportWidth: vw, viewportHeight: vh })
+            );
+          }
+        }
+        void lastClientX;
+        void lastClientY;
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+      document.addEventListener("pointercancel", onUp);
+    },
+    [dispatch, id, entry]
+  );
+  const onResizeStart = useCallback(
+    (edge) => (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dispatch(focusWindow(id));
+      if (!entry || entry.state !== "windowed") return;
+      const startMx = e.clientX;
+      const startMy = e.clientY;
+      const { x, y, width, height } = entry.windowed;
+      setIsInteracting(true);
+      const releaseCursor = holdDragCursor(RESIZE_CURSOR[edge]);
+      const onMove = (ev) => {
+        const dx = ev.clientX - startMx;
+        const dy = ev.clientY - startMy;
+        let nx = x, ny = y, nw = width, nh = height;
+        if (edge.includes("e"))
+          nw = Math.min(maxWidth, Math.max(minWidth, width + dx));
+        if (edge.includes("s"))
+          nh = Math.min(maxHeight, Math.max(minHeight, height + dy));
+        if (edge.includes("w")) {
+          nw = Math.min(maxWidth, Math.max(minWidth, width - dx));
+          nx = x + (width - nw);
+        }
+        if (edge.includes("n")) {
+          nh = Math.min(maxHeight, Math.max(minHeight, height - dy));
+          ny = y + (height - nh);
+        }
+        dispatch(
+          updateWindowRect({
+            id,
+            rect: { x: nx, y: ny, width: nw, height: nh }
+          })
+        );
+      };
+      const onUp = () => {
+        setIsInteracting(false);
+        releaseCursor();
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        document.removeEventListener("pointercancel", onUp);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+      document.addEventListener("pointercancel", onUp);
+    },
+    [dispatch, id, entry, minWidth, minHeight, maxWidth, maxHeight]
+  );
+  const onFocus = useCallback(() => dispatch(focusWindow(id)), [dispatch, id]);
+  const onRestore = useCallback(
+    () => dispatch(restoreWindow(id)),
+    [dispatch, id]
+  );
+  const onMaximize = useCallback(
+    () => dispatch(maximizeWindow(id)),
+    [dispatch, id]
+  );
+  const onMinimize = useCallback(() => {
+    const { vw, vh } = safeViewportDims();
+    dispatch(
+      minimizeWindow({ id, viewportWidth: vw, viewportHeight: vh })
+    );
+  }, [dispatch, id]);
+  const onToggleMaximize = useCallback(() => {
+    if (entry?.state === "maximized") dispatch(restoreWindow(id));
+    else dispatch(maximizeWindow(id));
+  }, [dispatch, id, entry]);
+  const rect = entry?.windowed ?? {
+    x: 0,
+    y: 0,
+    width: opts.initialRect?.width ?? resolveSize(opts.width, DEFAULT_WIDTH),
+    height: opts.initialRect?.height ?? resolveSize(opts.height, DEFAULT_HEIGHT)
+  };
+  return {
+    id,
+    windowState: entry?.state ?? "windowed",
+    rect,
+    zIndex: entry?.zIndex ?? 1e3,
+    onDragStart,
+    onResizeStart,
+    onFocus,
+    onRestore,
+    onMaximize,
+    onMinimize,
+    onToggleMaximize,
+    isInteracting
+  };
+}
+
+// src/window/utils/useIsClient.ts
+import { useSyncExternalStore } from "react";
+var subscribe = () => () => {
+};
+function useIsClient() {
+  return useSyncExternalStore(subscribe, () => true, () => false);
+}
+
+// src/window/utils/useDebugFlag.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+var noSubscribe = () => () => {
+};
+function useDebugFlag(debug) {
+  return useSyncExternalStore2(
+    debug.subscribe ? (listener) => debug.subscribe?.(listener) ?? (() => {
+    }) : noSubscribe,
+    () => debug.enabled(),
+    () => false
+  );
+}
+
+// src/window/WindowPanel.tsx
+import { useOverlayLink } from "@ai-matrx/summon/url";
+
+// src/window/utils/urlSyncIdentity.ts
+function resolveWindowUrlSyncKey(registryKey, explicitKey) {
+  return registryKey ?? explicitKey;
+}
+
+// src/window/utils/sanitizeWindowData.ts
+var DROPPED = /* @__PURE__ */ Symbol("dropped-window-value");
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function sanitizeWindowData(value, allowedKeys) {
+  if (!isRecord(value) || allowedKeys.length === 0) return {};
+  const ancestors = /* @__PURE__ */ new WeakSet();
+  const copy = (item) => {
+    if (item === void 0 || typeof item === "function" || typeof item === "symbol") return DROPPED;
+    if (typeof item === "bigint") return item.toString();
+    if (typeof item === "number" && !Number.isFinite(item)) return null;
+    if (item === null || typeof item !== "object") return item;
+    if (item instanceof Date) return item.toJSON();
+    if (ancestors.has(item)) return DROPPED;
+    ancestors.add(item);
+    let result;
+    if (Array.isArray(item)) {
+      result = item.map((child) => {
+        const copied = copy(child);
+        return copied === DROPPED ? null : copied;
+      });
+    } else if (Object.getPrototypeOf(item) === Object.prototype || Object.getPrototypeOf(item) === null) {
+      result = Object.fromEntries(
+        Object.entries(item).flatMap(([key, child]) => {
+          const copied = copy(child);
+          return copied === DROPPED ? [] : [[key, copied]];
+        })
+      );
+    } else {
+      result = DROPPED;
+    }
+    ancestors.delete(item);
+    return result;
+  };
+  try {
+    const allowed = new Set(allowedKeys);
+    const selected = Object.fromEntries(Object.entries(value).filter(([key]) => allowed.has(key)));
+    ancestors.add(value);
+    const copied = copy(selected);
+    const parsed = JSON.parse(JSON.stringify(copied === DROPPED ? {} : copied) || "{}");
+    return isRecord(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+// src/window/WindowPanel.tsx
+import { useWindowConfig, WindowSelectionSurface } from "@ai-matrx/summon/window-host";
+
+// src/window/mobile/MobileDrawerSurface.tsx
+import { useState as useState2 } from "react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle
+} from "@ai-matrx/design-system";
+import { Button } from "@ai-matrx/design-system";
+import { cn as cn3 } from "@ai-matrx/design-system/cn";
+
+// src/window/chrome/MobileTitleRow.tsx
+import { cn as cn2 } from "@ai-matrx/design-system/cn";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MOBILE_WINDOW_TITLE_TEXT = "line-clamp-2 break-words text-sm font-medium leading-snug text-foreground";
+function isTextTitle(title) {
+  return typeof title === "string" || typeof title === "number";
+}
+function mobileWindowTitleClass(title) {
+  return isTextTitle(title) ? cn2("min-w-0 flex-1", MOBILE_WINDOW_TITLE_TEXT) : "flex min-w-0 flex-1 items-center overflow-hidden text-sm font-medium";
+}
+function MobileWindowTitle({
+  title,
+  className
+}) {
+  if (title == null || title === "") return /* @__PURE__ */ jsx3("div", { className: cn2("min-w-0 flex-1", className) });
+  return /* @__PURE__ */ jsx3("div", { "data-window-mobile-title": "", className: cn2(mobileWindowTitleClass(title), className), children: title });
+}
+function MobileWindowTitleRow({
+  leading,
+  trailing,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-window-mobile-title-row": "",
+      className: cn2("flex min-h-11 items-center gap-1.5 py-1", className),
+      children: [
+        leading,
+        children,
+        trailing
+      ]
+    }
+  );
+}
+function MobileWindowActionsRow({
+  leading,
+  actions,
+  className
+}) {
+  if (!leading && !actions) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-window-mobile-actions-row": "",
+      className: cn2("flex min-h-10 items-center gap-1.5 pb-1", className),
+      children: [
+        leading,
+        actions ? /* @__PURE__ */ jsx3("div", { className: "ml-auto flex items-center gap-1", children: actions }) : null
+      ]
+    }
+  );
+}
+
+// src/window/mobile/MobileDrawerSurface.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MobileDrawerSurface({
+  title,
+  children,
+  onClose,
+  sidebar,
+  footer,
+  isOpen,
+  actionsLeft,
+  actionsRight,
+  bodyClassName,
+  surfaceLayer,
+  sizeToContent = false,
+  hideClose = false,
+  sidebarAs = "drawer"
+}) {
+  const [sidebarOpen, setSidebarOpen] = useState2(false);
+  const hasSidebar = !!sidebar;
+  return /* @__PURE__ */ jsxs4(
+    Drawer,
+    {
+      open: isOpen,
+      onOpenChange: (next) => {
+        if (!next) onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          DrawerContent,
+          {
+            "data-surface-layer": surfaceLayer,
+            className: cn3(
+              "max-h-[85dvh] px-0 pb-safe flex flex-col",
+              sizeToContent ? "h-auto" : "h-[85dvh]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs4("div", { className: "-mt-3 flex flex-col px-3 border-b border-border/50 shrink-0", children: [
+                /* @__PURE__ */ jsx4(
+                  MobileWindowTitleRow,
+                  {
+                    className: "py-0",
+                    trailing: hideClose ? null : /* @__PURE__ */ jsx4(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx4(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-8 w-8 shrink-0",
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ jsx4(XIcon, { className: "w-4 h-4" })
+                      }
+                    ) }),
+                    children: /* @__PURE__ */ jsx4(
+                      DrawerTitle,
+                      {
+                        "data-window-mobile-title": "",
+                        className: mobileWindowTitleClass(title),
+                        children: title
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  MobileWindowActionsRow,
+                  {
+                    leading: actionsLeft ? /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-1 shrink-0", children: actionsLeft }) : null,
+                    actions: actionsRight || hasSidebar ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                      actionsRight,
+                      hasSidebar && /* @__PURE__ */ jsx4(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "icon",
+                          className: "h-8 w-8",
+                          "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar",
+                          onClick: () => setSidebarOpen((v) => !v),
+                          children: /* @__PURE__ */ jsx4(PanelLeftIcon, { className: "w-4 h-4" })
+                        }
+                      )
+                    ] }) : null
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4(DrawerDescription, { className: "sr-only", children: typeof title === "string" ? title : "Mobile window" }),
+              /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex min-h-0 overflow-hidden", children: [
+                hasSidebar && sidebarAs === "inline" && sidebarOpen && /* @__PURE__ */ jsx4("div", { className: "w-2/5 min-w-[160px] border-r border-border/50 overflow-y-auto", children: sidebar }),
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: cn3(
+                      "flex-1 min-h-0 overflow-auto",
+                      bodyClassName
+                    ),
+                    children
+                  }
+                )
+              ] }),
+              footer && /* @__PURE__ */ jsx4("div", { className: "border-t border-border/50 shrink-0", children: footer })
+            ]
+          }
+        ),
+        hasSidebar && sidebarAs === "drawer" && /* @__PURE__ */ jsx4(
+          Drawer,
+          {
+            open: sidebarOpen,
+            onOpenChange: setSidebarOpen,
+            direction: "right",
+            children: /* @__PURE__ */ jsxs4(DrawerContent, { className: "h-[85dvh] max-h-[85dvh] w-[85vw] max-w-[420px] ml-auto flex flex-col", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border/50 shrink-0", children: [
+                /* @__PURE__ */ jsx4(DrawerTitle, { className: "flex-1 text-sm font-medium", children: "Menu" }),
+                /* @__PURE__ */ jsx4(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx4(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": "Close sidebar",
+                    children: /* @__PURE__ */ jsx4(XIcon, { className: "w-4 h-4" })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx4(DrawerDescription, { className: "sr-only", children: "Sidebar menu" }),
+              /* @__PURE__ */ jsx4("div", { className: "flex-1 min-h-0 overflow-auto", children: sidebar })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/window/mobile/MobileCardSurface.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import { FloatingLayer, useFloatingLayerZIndex } from "@ai-matrx/design-system";
+import { Button as Button2 } from "@ai-matrx/design-system";
+import { cn as cn4 } from "@ai-matrx/design-system/cn";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function MobileCardSurface({
+  title,
+  children,
+  onClose,
+  footer,
+  isOpen,
+  actionsRight,
+  bodyClassName,
+  surfaceLayer,
+  maxHeight = "60dvh"
+}) {
+  const cardRef = useRef2(null);
+  useEffect2(() => {
+    if (!isOpen) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape" && !e.defaultPrevented) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isOpen, onClose]);
+  const zIndex = useFloatingLayerZIndex(9999);
+  if (!isOpen) return null;
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx5(FloatingLayer, { children: /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: cardRef,
+        "data-surface-layer": surfaceLayer,
+        role: "dialog",
+        "aria-modal": "false",
+        className: cn4(
+          "fixed right-3 bottom-3 left-3 sm:left-auto sm:right-3",
+          "w-auto sm:w-[92vw] sm:max-w-[420px]",
+          "flex flex-col",
+          "rounded-xl overflow-hidden",
+          "bg-card/97 backdrop-blur-xl border border-border/60 shadow-2xl",
+          // Themes can override via --window-surface-* tokens in globals.css
+          "animate-[card-enter_var(--window-surface-enter-duration,220ms)_var(--window-surface-easing,ease-out)]"
+        ),
+        style: { maxHeight, zIndex, paddingBottom: "env(safe-area-inset-bottom)" },
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col pl-3 pr-1 border-b border-border/50 shrink-0", children: [
+            /* @__PURE__ */ jsx5(
+              MobileWindowTitleRow,
+              {
+                trailing: /* @__PURE__ */ jsx5(
+                  Button2,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-11 w-11 shrink-0",
+                    "aria-label": "Close",
+                    onClick: onClose,
+                    children: /* @__PURE__ */ jsx5(XIcon, { className: "w-3.5 h-3.5" })
+                  }
+                ),
+                children: /* @__PURE__ */ jsx5(MobileWindowTitle, { title })
+              }
+            ),
+            /* @__PURE__ */ jsx5(MobileWindowActionsRow, { actions: actionsRight })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: cn4("flex-1 min-h-0 overflow-auto", bodyClassName), children }),
+          footer && /* @__PURE__ */ jsx5("div", { className: "border-t border-border/50 shrink-0", children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/window/chrome/DebugStrip.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function DebugStrip({ rect, zIndex }) {
+  const [vp, setVp] = useState3(
+    () => typeof window === "undefined" ? { vw: 0, vh: 0, sw: 0, sh: 0, dpr: 1 } : {
+      vw: window.innerWidth,
+      vh: window.innerHeight,
+      sw: window.screen.width,
+      sh: window.screen.height,
+      dpr: window.devicePixelRatio ?? 1
+    }
+  );
+  useEffect3(() => {
+    const update = () => setVp({
+      vw: window.innerWidth,
+      vh: window.innerHeight,
+      sw: window.screen.width,
+      sh: window.screen.height,
+      dpr: window.devicePixelRatio ?? 1
+    });
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  const windowEntries = [
+    ["x", rect.x],
+    ["y", rect.y],
+    ["w", rect.width],
+    ["h", rect.height],
+    ["z", zIndex]
+  ];
+  const viewportEntries = [
+    ["vw", vp.vw],
+    ["vh", vp.vh],
+    ["sw", vp.sw],
+    ["sh", vp.sh],
+    ["dpr", vp.dpr]
+  ];
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-0.5 px-3 py-1.5 border-b border-warning/20 bg-warning/5 shrink-0 font-mono text-[10px]", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ jsx6("span", { className: "text-warning uppercase tracking-wide text-[9px]", children: "win" }),
+      windowEntries.map(([label, val]) => /* @__PURE__ */ jsxs6(
+        "span",
+        {
+          className: "inline-flex items-center gap-0.5 leading-none",
+          children: [
+            /* @__PURE__ */ jsxs6("span", { className: "text-warning", children: [
+              label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx6("span", { className: "text-warning font-bold tabular-nums", children: Math.round(val) })
+          ]
+        },
+        label
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ jsx6("span", { className: "text-info uppercase tracking-wide text-[9px]", children: "vp" }),
+      viewportEntries.map(([label, val]) => /* @__PURE__ */ jsxs6(
+        "span",
+        {
+          className: "inline-flex items-center gap-0.5 leading-none",
+          children: [
+            /* @__PURE__ */ jsxs6("span", { className: "text-info", children: [
+              label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx6("span", { className: "text-info font-bold tabular-nums", children: typeof val === "number" && !Number.isInteger(val) ? val.toFixed(2) : Math.round(val) })
+          ]
+        },
+        label
+      ))
+    ] })
+  ] });
+}
+
+// src/window/chrome/chromeClasses.ts
+import { cn as cn5 } from "@ai-matrx/design-system/cn";
+var WINDOW_CHROME_INTERACTIVE = "[&_button:not(:disabled)]:cursor-pointer [&_a]:cursor-pointer [&_[role=button]:not([aria-disabled=true])]:cursor-pointer [&_summary]:cursor-pointer [&_label:has(input,[role=checkbox],[role=radio])]:cursor-pointer";
+var WINDOW_CHROME_ACTIONS = cn5(
+  "flex items-center gap-0.5 shrink-0 text-foreground/80 [&_svg]:text-foreground/80",
+  WINDOW_CHROME_INTERACTIVE
+);
+
+// src/window/chrome/MobileHeader.tsx
+import { SegmentedControl } from "@ai-matrx/design-system/controls";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function MobileWindowHeader({
+  title,
+  actionsRight,
+  onMinimize,
+  onClose,
+  hasSidebar,
+  activePaneMobile,
+  onSetActivePane
+}) {
+  const trafficLights = onClose || onMinimize ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+    onClose && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center",
+        onClick: onClose,
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsx7("span", { className: "flex h-6 w-6 items-center justify-center rounded-full matrx-window-light-close", children: /* @__PURE__ */ jsx7(XIcon, { className: "h-2.5 w-2.5 matrx-window-light-glyph" }) })
+      }
+    ),
+    onMinimize && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center",
+        onClick: onMinimize,
+        "aria-label": "Minimize",
+        children: /* @__PURE__ */ jsx7("span", { className: "flex h-6 w-6 items-center justify-center rounded-full matrx-window-light-minimize", children: /* @__PURE__ */ jsx7(
+          MinusIcon,
+          {
+            className: "h-2.5 w-2.5 matrx-window-light-glyph"
+          }
+        ) })
+      }
+    )
+  ] }) : null;
+  const paneToggle = hasSidebar ? /* @__PURE__ */ jsx7(SegmentedControl, { "aria-label": "Pane", value: activePaneMobile, onValueChange: onSetActivePane, data: [{ value: "sidebar", label: "Sidebar" }, { value: "main", label: "Content" }] }) : null;
+  return /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 flex-col border-b border-border/50 bg-muted/40 px-2 select-none", children: [
+    /* @__PURE__ */ jsx7(MobileWindowTitleRow, { leading: trafficLights, children: /* @__PURE__ */ jsx7(MobileWindowTitle, { title, className: "pr-1" }) }),
+    /* @__PURE__ */ jsx7(
+      MobileWindowActionsRow,
+      {
+        leading: paneToggle,
+        actions: actionsRight ? /* @__PURE__ */ jsx7("div", { className: WINDOW_CHROME_ACTIONS, children: actionsRight }) : null
+      }
+    )
+  ] });
+}
+
+// src/window/chrome/DeprecationBanner.tsx
+import { useState as useState4 } from "react";
+import { cn as cn6 } from "@ai-matrx/design-system/cn";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function DeprecationBanner({
+  replacedBy,
+  note,
+  className
+}) {
+  const [dismissed, setDismissed] = useState4(false);
+  if (dismissed) return null;
+  const message = note ?? (replacedBy ? `Deprecated \u2014 moved to "${replacedBy}". This window will be removed soon.` : "Deprecated \u2014 this window will be removed soon.");
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn6(
+        "shrink-0 flex items-start gap-2 px-2 py-1 border-b border-destructive/40 bg-destructive/10 text-destructive-ink text-[11px] leading-tight",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx8(TriangleAlertIcon, { className: "w-3.5 h-3.5 mt-[1px] shrink-0" }),
+        /* @__PURE__ */ jsx8("span", { className: "flex-1 break-words", children: message }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss deprecation notice",
+            className: "shrink-0 rounded hover:bg-destructive/20 p-0.5 transition-colors",
+            onClick: () => setDismissed(true),
+            children: /* @__PURE__ */ jsx8(XIcon, { className: "w-3 h-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/window/chrome/PopoutTopBar.tsx
+import { cn as cn7 } from "@ai-matrx/design-system/cn";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function PopoutTopBar({
+  title,
+  actionsLeft,
+  actionsRight,
+  onDock
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: cn7(
+        "flex items-center gap-1.5 px-2 py-1 min-h-[32px] shrink-0",
+        "border-b border-border/50 bg-muted/40 select-none"
+      ),
+      children: [
+        actionsLeft && /* @__PURE__ */ jsx9("div", { className: WINDOW_CHROME_ACTIONS, children: actionsLeft }),
+        /* @__PURE__ */ jsx9("div", { className: "flex-1 flex items-center justify-center min-w-0", children: /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-foreground/80 truncate", children: title ?? "" }) }),
+        actionsRight && /* @__PURE__ */ jsx9("div", { className: WINDOW_CHROME_ACTIONS, children: actionsRight }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: cn7(
+              "ml-1 p-1 rounded hover:bg-accent/60 transition-colors shrink-0 cursor-pointer",
+              "text-foreground/60 hover:text-foreground"
+            ),
+            onClick: onDock,
+            title: "Dock window",
+            "aria-label": "Dock window back to parent",
+            children: /* @__PURE__ */ jsx9(ArrowLeftToLineIcon, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/window/popout/featureDetection.ts
+function detectPopoutCapability() {
+  if (typeof window === "undefined") return "none";
+  const w = window;
+  if (w.documentPictureInPicture && typeof w.documentPictureInPicture.requestWindow === "function") {
+    return "pip";
+  }
+  if (typeof window.open === "function") {
+    return "popup";
+  }
+  return "none";
+}
+function supportsDocumentPictureInPicture() {
+  return detectPopoutCapability() === "pip";
+}
+function supportsAnyPopout() {
+  return detectPopoutCapability() !== "none";
+}
+
+// src/window/popout/usePopoutWindow.ts
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useSummonDispatch as useSummonDispatch2, useSummonPorts, useSummonSelector as useSummonSelector2 } from "@ai-matrx/summon/react";
+import {
+  popOutWindow,
+  dockWindow,
+  selectActivePipWindowId,
+  selectPopoutMode
+} from "@ai-matrx/summon";
+
+// src/window/popout/popoutWindowMap.ts
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { globalSlot as globalSlot2 } from "@ai-matrx/kit/global-slot";
+var slot = () => globalSlot2("ai-matrx.summon.window.popoutWindows", () => ({ map: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Set() }));
+function notify() {
+  for (const fn of slot().listeners) fn();
+}
+function setPopoutWindow(id, win) {
+  const { map } = slot();
+  const prev = map.get(id);
+  if (prev === win) return;
+  map.set(id, win);
+  notify();
+}
+function deletePopoutWindow(id) {
+  const { map } = slot();
+  if (!map.has(id)) return;
+  map.delete(id);
+  notify();
+}
+function getPopoutWindow(id) {
+  return slot().map.get(id) ?? null;
+}
+function forEachPopoutWindow(cb) {
+  for (const [id, win] of slot().map) cb(win, id);
+}
+function subscribePopoutWindowMap(listener) {
+  const { listeners } = slot();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function usePopoutWindowRef(id) {
+  return useSyncExternalStore3(
+    subscribePopoutWindowMap,
+    () => getPopoutWindow(id),
+    // SSR snapshot — popouts are never present during SSR.
+    () => null
+  );
+}
+
+// src/window/popout/cloneStyles.ts
+var RESET_CSS = `
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`.trim();
+var POPOUT_DATA_ATTR = "data-popout-clone";
+var RESET_MARKER = "reset";
+function cloneStylesIntoDocument(source, target) {
+  injectResetStylesheet(target);
+  cloneAllStyleAndLinkNodes(source, target);
+  cloneAdoptedStylesheets(source, target);
+  mirrorHtmlAttributes(source, target);
+  const headObserver = new MutationObserver((mutations) => {
+    handleHeadMutations(mutations, target);
+  });
+  headObserver.observe(source.head, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ["href", "media"]
+  });
+  const htmlObserver = new MutationObserver(() => {
+    mirrorHtmlAttributes(source, target);
+  });
+  htmlObserver.observe(source.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "data-scroll-behavior"]
+  });
+  return {
+    dispose() {
+      headObserver.disconnect();
+      htmlObserver.disconnect();
+    }
+  };
+}
+function injectResetStylesheet(target) {
+  const existing = target.head.querySelector(
+    `style[${POPOUT_DATA_ATTR}="${RESET_MARKER}"]`
+  );
+  if (existing) return;
+  const style = target.createElement("style");
+  style.setAttribute(POPOUT_DATA_ATTR, RESET_MARKER);
+  style.textContent = RESET_CSS;
+  target.head.insertBefore(style, target.head.firstChild);
+}
+function cloneAllStyleAndLinkNodes(source, target) {
+  const nodes = source.head.querySelectorAll("style, link[rel='stylesheet']");
+  nodes.forEach((node) => {
+    cloneOneStyleOrLink(node, target);
+  });
+}
+function cloneOneStyleOrLink(node, target) {
+  if (node.tagName === "STYLE") {
+    const clone = target.createElement("style");
+    clone.textContent = node.textContent ?? "";
+    copyDataAttributes(node, clone);
+    clone.setAttribute(POPOUT_DATA_ATTR, getNodeKey(node));
+    target.head.appendChild(clone);
+    return clone;
+  }
+  if (node.tagName === "LINK" && node.rel === "stylesheet") {
+    const link = node;
+    const clone = target.createElement("link");
+    clone.rel = "stylesheet";
+    if (link.href) clone.href = link.href;
+    if (link.media) clone.media = link.media;
+    if (link.crossOrigin) clone.crossOrigin = link.crossOrigin;
+    if (link.integrity) clone.integrity = link.integrity;
+    copyDataAttributes(link, clone);
+    clone.setAttribute(POPOUT_DATA_ATTR, getNodeKey(node));
+    target.head.appendChild(clone);
+    return clone;
+  }
+  return null;
+}
+function getNodeKey(node) {
+  if (node.tagName === "STYLE") {
+    return "style:" + cheapHash(node.textContent ?? "");
+  }
+  if (node.tagName === "LINK") {
+    const href = node.href || "";
+    return "link:" + href;
+  }
+  return "other:" + Math.random().toString(36).slice(2);
+}
+function cheapHash(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) {
+    h = (h << 5) + h + s.charCodeAt(i) | 0;
+  }
+  return (h >>> 0).toString(36);
+}
+function copyDataAttributes(from, to) {
+  for (const attr of Array.from(from.attributes)) {
+    if (attr.name.startsWith("data-")) {
+      if (attr.name === POPOUT_DATA_ATTR) continue;
+      to.setAttribute(attr.name, attr.value);
+    }
+  }
+}
+function cloneAdoptedStylesheets(source, target) {
+  if (Array.isArray(source.adoptedStyleSheets) && source.adoptedStyleSheets.length > 0) {
+    try {
+      target.adoptedStyleSheets = [...source.adoptedStyleSheets];
+    } catch {
+    }
+  }
+}
+function mirrorHtmlAttributes(source, target) {
+  const src = source.documentElement;
+  const tgt = target.documentElement;
+  if (tgt.className !== src.className) {
+    tgt.className = src.className;
+  }
+  for (const attr of ["data-theme", "data-scroll-behavior", "lang"]) {
+    const v = src.getAttribute(attr);
+    if (v === null) {
+      if (tgt.hasAttribute(attr)) tgt.removeAttribute(attr);
+    } else if (tgt.getAttribute(attr) !== v) {
+      tgt.setAttribute(attr, v);
+    }
+  }
+}
+function handleHeadMutations(mutations, target) {
+  for (const m of mutations) {
+    m.addedNodes.forEach((n) => {
+      if (!(n instanceof Element)) return;
+      if (n.tagName === "STYLE" || n.tagName === "LINK" && n.rel === "stylesheet") {
+        cloneOneStyleOrLink(n, target);
+      }
+    });
+    m.removedNodes.forEach((n) => {
+      if (!(n instanceof Element)) return;
+      if (n.tagName !== "STYLE" && n.tagName !== "LINK") return;
+      const key = getNodeKey(n);
+      const cloneEl = target.head.querySelector(
+        `[${POPOUT_DATA_ATTR}="${cssEscape(key)}"]`
+      );
+      if (cloneEl) cloneEl.remove();
+    });
+    if (m.type === "characterData" && m.target.parentElement?.tagName === "STYLE") {
+      const styleEl = m.target.parentElement;
+      const oldKey = findExistingMirrorByContent(target, styleEl.textContent ?? "");
+      const newKey = getNodeKey(styleEl);
+      if (oldKey && oldKey !== newKey) {
+        const mirror = target.head.querySelector(
+          `[${POPOUT_DATA_ATTR}="${cssEscape(oldKey)}"]`
+        );
+        if (mirror) {
+          mirror.textContent = styleEl.textContent ?? "";
+          mirror.setAttribute(POPOUT_DATA_ATTR, newKey);
+        }
+      }
+    }
+    if (m.type === "attributes" && m.target instanceof HTMLLinkElement && m.target.rel === "stylesheet") {
+      const link = m.target;
+      const allClones = target.head.querySelectorAll(
+        `link[${POPOUT_DATA_ATTR}]`
+      );
+      cloneOneStyleOrLink(link, target);
+      void allClones;
+    }
+  }
+}
+function findExistingMirrorByContent(target, text) {
+  const styles = target.head.querySelectorAll(
+    `style[${POPOUT_DATA_ATTR}^="style:"]`
+  );
+  for (const s of Array.from(styles)) {
+    if (s.textContent === text) return null;
+  }
+  if (styles.length > 0) {
+    return styles[0]?.getAttribute(POPOUT_DATA_ATTR) ?? null;
+  }
+  return null;
+}
+function cssEscape(s) {
+  return s.replace(/(["\\])/g, "\\$1");
+}
+
+// src/window/popout/popoutPendingStorage.ts
+var STORAGE_KEY = "matrx_popout_pending";
+function readState() {
+  if (typeof window === "undefined") return { windowIds: [] };
+  try {
+    const raw = window.sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return { windowIds: [] };
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed.windowIds)) return { windowIds: [] };
+    return {
+      windowIds: parsed.windowIds.filter(
+        (id) => typeof id === "string"
+      )
+    };
+  } catch {
+    return { windowIds: [] };
+  }
+}
+function writeState(state2) {
+  if (typeof window === "undefined") return;
+  try {
+    if (state2.windowIds.length === 0) {
+      window.sessionStorage.removeItem(STORAGE_KEY);
+    } else {
+      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state2));
+    }
+  } catch {
+  }
+}
+function markPopoutPending(windowId) {
+  const state2 = readState();
+  if (!state2.windowIds.includes(windowId)) {
+    state2.windowIds.push(windowId);
+    writeState(state2);
+  }
+}
+function clearPopoutPending(windowId) {
+  const state2 = readState();
+  const next = state2.windowIds.filter((id) => id !== windowId);
+  if (next.length !== state2.windowIds.length) {
+    writeState({ windowIds: next });
+  }
+}
+function getPendingPopoutWindowIds() {
+  return readState().windowIds;
+}
+function clearAllPopoutPending() {
+  writeState({ windowIds: [] });
+}
+
+// src/window/popout/usePopoutWindow.ts
+import { buildDockWindowPayload } from "@ai-matrx/summon";
+import { openOutbound } from "@ai-matrx/kit/outbound";
+function usePopoutWindow(windowId) {
+  const dispatch = useSummonDispatch2();
+  const { notify: notify3 } = useSummonPorts();
+  const popoutMode = useSummonSelector2(selectPopoutMode(windowId));
+  const activePipWindowId = useSummonSelector2(selectActivePipWindowId);
+  const stylesDisposeRef = useRef3(null);
+  const handleClose = useCallback2(() => {
+    const win = getPopoutWindow(windowId);
+    if (!win && process.env.NODE_ENV !== "production") {
+    }
+    stylesDisposeRef.current?.();
+    stylesDisposeRef.current = null;
+    deletePopoutWindow(windowId);
+    clearPopoutPending(windowId);
+    dispatch(dockWindow(buildDockWindowPayload(windowId)));
+    try {
+      win?.close();
+    } catch {
+    }
+    if (process.env.NODE_ENV !== "production" && win) {
+      console.info(`[popout] closed window for "${windowId}"`);
+    }
+  }, [dispatch, windowId]);
+  const openPopout = useCallback2(
+    async (opts) => {
+      const capability = detectPopoutCapability();
+      if (capability === "none") {
+        notify3.error("Pop-out not supported", {
+          description: "Your browser doesn't support floating windows."
+        });
+        return { ok: false, reason: "no-capability" };
+      }
+      const slotTakenByOther = activePipWindowId !== null && activePipWindowId !== windowId;
+      let pipWin = null;
+      let mode = "popup";
+      if (capability === "pip" && !slotTakenByOther) {
+        try {
+          const w = window;
+          if (w.documentPictureInPicture) {
+            pipWin = await w.documentPictureInPicture.requestWindow({
+              width: Math.max(200, Math.round(opts.width)),
+              height: Math.max(120, Math.round(opts.height))
+            });
+            mode = "pip";
+          }
+        } catch (err) {
+          console.warn(
+            "[popout] Document PiP request failed, falling back to popup:",
+            err
+          );
+        }
+      }
+      if (!pipWin) {
+        const features = [
+          "popup=yes",
+          `width=${Math.max(200, Math.round(opts.width))}`,
+          `height=${Math.max(120, Math.round(opts.height))}`
+        ].join(",");
+        try {
+          pipWin = openOutbound("", `popout-${windowId}`, features);
+          mode = "popup";
+        } catch (err) {
+          console.error("[popout] window.open failed:", err);
+        }
+      }
+      if (!pipWin) {
+        notify3.error("Pop-up blocked", {
+          description: "Please allow pop-ups for this site to use floating windows."
+        });
+        return { ok: false, reason: "popup-blocked" };
+      }
+      try {
+        pipWin.document.title = opts.title;
+      } catch {
+      }
+      stylesDisposeRef.current = cloneStylesIntoDocument(
+        window.document,
+        pipWin.document
+      ).dispose;
+      pipWin.addEventListener("pagehide", handleClose, { once: true });
+      setPopoutWindow(windowId, pipWin);
+      markPopoutPending(windowId);
+      dispatch(popOutWindow({ id: windowId, mode }));
+      if (process.env.NODE_ENV !== "production") {
+        console.info(
+          `[popout] opened ${mode} window for "${windowId}" (${opts.width}x${opts.height})`
+        );
+      }
+      return { ok: true, mode };
+    },
+    [activePipWindowId, dispatch, handleClose, notify3, windowId]
+  );
+  const close = useCallback2(() => {
+    const win = getPopoutWindow(windowId);
+    if (!win) {
+      dispatch(dockWindow(buildDockWindowPayload(windowId)));
+      return;
+    }
+    try {
+      win.close();
+    } catch {
+      handleClose();
+    }
+  }, [dispatch, handleClose, windowId]);
+  useEffect4(() => {
+    if (popoutMode === null && getPopoutWindow(windowId) !== null) {
+      try {
+        getPopoutWindow(windowId)?.close();
+      } catch {
+        handleClose();
+      }
+    }
+  }, [popoutMode, windowId, handleClose]);
+  useEffect4(() => {
+    const onBeforeUnload = () => {
+      try {
+        getPopoutWindow(windowId)?.close();
+      } catch {
+      }
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+    };
+  }, [windowId]);
+  return { openPopout, close };
+}
+
+// src/window/popout/usePopoutControl.ts
+import { useCallback as useCallback3 } from "react";
+import { useSummonDispatch as useSummonDispatch3 } from "@ai-matrx/summon/react";
+import {
+  dockWindow as dockWindow2
+} from "@ai-matrx/summon";
+import { buildDockWindowPayload as buildDockWindowPayload2 } from "@ai-matrx/summon";
+import { globalSlot as globalSlot3 } from "@ai-matrx/kit/global-slot";
+var openers = () => globalSlot3("ai-matrx.summon.window.popoutOpeners", () => /* @__PURE__ */ new Map());
+function registerPopoutOpener(windowId, fn) {
+  openers().set(windowId, fn);
+  return () => {
+    if (openers().get(windowId) === fn) {
+      openers().delete(windowId);
+    }
+  };
+}
+function getPopoutOpener(windowId) {
+  return openers().get(windowId) ?? null;
+}
+function usePopoutControl() {
+  const dispatch = useSummonDispatch3();
+  const popOut = useCallback3(
+    async (windowId, opts) => {
+      const opener = getPopoutOpener(windowId);
+      if (!opener) {
+        return { ok: false, reason: "not-mounted" };
+      }
+      return opener(opts);
+    },
+    []
+  );
+  const dock = useCallback3(
+    (windowId) => {
+      const payload = buildDockWindowPayload2(windowId);
+      dispatch(dockWindow2(payload));
+    },
+    [dispatch]
+  );
+  return { popOut, dock };
+}
+function buildPopoutOpts(rect, opts) {
+  return {
+    width: opts?.width ?? rect?.width ?? 480,
+    height: opts?.height ?? rect?.height ?? 320,
+    title: opts?.title ?? "Window"
+  };
+}
+
+// src/window/popout/PopoutPortal.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import { useSummonSelector as useSummonSelector3 } from "@ai-matrx/summon/react";
+import { selectPopoutMode as selectPopoutMode2 } from "@ai-matrx/summon";
+
+// src/window/popout/PopoutShell.tsx
+import { useMemo } from "react";
+import { PortalContainerProvider } from "@ai-matrx/design-system";
+
+// src/window/popout/PopoutContext.tsx
+import { createContext, useContext } from "react";
+var DEFAULT_VALUE = {
+  popoutDocument: null,
+  popoutWindow: null,
+  popoutContainer: null,
+  mode: null
+};
+var PopoutContext = createContext(DEFAULT_VALUE);
+function usePopout() {
+  return useContext(PopoutContext);
+}
+
+// src/window/popout/PopoutShell.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function PopoutShell({
+  popoutWindow,
+  mode,
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      popoutDocument: popoutWindow.document,
+      popoutWindow,
+      popoutContainer: popoutWindow.document.body,
+      mode
+    }),
+    [popoutWindow, mode]
+  );
+  return /* @__PURE__ */ jsx10(PopoutContext.Provider, { value, children: /* @__PURE__ */ jsx10(PortalContainerProvider, { container: value.popoutContainer, children }) });
+}
+
+// src/window/popout/PopoutPortal.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function PopoutPortal({ windowId, children }) {
+  const popoutWin = usePopoutWindowRef(windowId);
+  const popoutMode = useSummonSelector3(selectPopoutMode2(windowId));
+  if (!popoutWin || popoutMode === null) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx11(PopoutShell, { popoutWindow: popoutWin, mode: popoutMode, children }),
+    popoutWin.document.body
+  );
+}
+
+// src/window/tray/traySnapshotMap.ts
+import { globalSlot as globalSlot4 } from "@ai-matrx/kit/global-slot";
+var MAX_SNAPSHOTS = 16;
+var state = () => globalSlot4("ai-matrx.summon.window.traySnapshots", () => ({ map: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Set() }));
+function notify2() {
+  for (const fn of state().listeners) fn();
+}
+function revoke(url) {
+  if (url && typeof URL !== "undefined" && typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
+}
+function setTraySnapshot(id, blob) {
+  const { map } = state();
+  revoke(map.get(id));
+  const objectUrl = URL.createObjectURL(blob);
+  map.delete(id);
+  map.set(id, objectUrl);
+  while (map.size > MAX_SNAPSHOTS) {
+    const oldestId = map.keys().next().value;
+    if (oldestId === void 0) break;
+    revoke(map.get(oldestId));
+    map.delete(oldestId);
+  }
+  notify2();
+}
+function clearTraySnapshot(id) {
+  const { map } = state();
+  const objectUrl = map.get(id);
+  if (!objectUrl) return;
+  map.delete(id);
+  revoke(objectUrl);
+  notify2();
+}
+function getTraySnapshot(id) {
+  return state().map.get(id) ?? null;
+}
+function subscribeTraySnapshotMap(listener) {
+  const { listeners } = state();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+// src/window/tray/defaultTraySnapshotCapture.ts
+var MAX_CAPTURE_ELEMENT_COUNT = 3e3;
+var TRANSPARENT_PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+async function loadToCanvas() {
+  try {
+    const mod = await import("html-to-image");
+    return mod.toCanvas;
+  } catch {
+    return null;
+  }
+}
+async function captureElementThumbnail(element, options = {}) {
+  const toCanvas = await loadToCanvas();
+  if (!toCanvas) return null;
+  const sourceWidth = Math.max(1, element.offsetWidth);
+  const sourceHeight = Math.max(1, element.offsetHeight);
+  const maxEdge = Math.max(64, options.maxEdge ?? 320);
+  const scale = Math.min(1, maxEdge / Math.max(sourceWidth, sourceHeight));
+  const canvas = await toCanvas(element, {
+    pixelRatio: 1,
+    canvasWidth: Math.max(1, Math.round(sourceWidth * scale)),
+    canvasHeight: Math.max(1, Math.round(sourceHeight * scale)),
+    skipFonts: true,
+    imagePlaceholder: TRANSPARENT_PIXEL,
+    onImageErrorHandler: () => void 0
+  });
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve, "image/webp", options.quality ?? 0.62);
+  });
+}
+async function defaultTraySnapshotCapture(bodyEl) {
+  try {
+    if (bodyEl.querySelectorAll("*").length > MAX_CAPTURE_ELEMENT_COUNT || bodyEl.offsetWidth < 8 || bodyEl.offsetHeight < 8) {
+      return null;
+    }
+    const blob = await captureElementThumbnail(bodyEl);
+    return blob && await isFlatImage(blob) ? null : blob;
+  } catch {
+    return null;
+  }
+}
+async function isFlatImage(blob) {
+  try {
+    const bitmap = await createImageBitmap(blob);
+    const size = 24;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return false;
+    ctx.drawImage(bitmap, 0, 0, size, size);
+    bitmap.close();
+    const { data } = ctx.getImageData(0, 0, size, size);
+    const r0 = data[0] ?? 0;
+    const g0 = data[1] ?? 0;
+    const b0 = data[2] ?? 0;
+    const a0 = data[3] ?? 0;
+    for (let i = 0; i < data.length; i += 4) {
+      if (Math.abs((data[i] ?? 0) - r0) > 6 || Math.abs((data[i + 1] ?? 0) - g0) > 6 || Math.abs((data[i + 2] ?? 0) - b0) > 6 || Math.abs((data[i + 3] ?? 0) - a0) > 6) {
+        return false;
+      }
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/window/tray/MinimizedWindowContent.tsx
+import { getOverlayMeta as getOverlayMeta2 } from "@ai-matrx/summon";
+
+// src/window/tray/TrayChipPreview.tsx
+import { Component, memo, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { cn as cn8 } from "@ai-matrx/design-system/cn";
+import { getOverlayMeta, selectOverlayData, DEFAULT_INSTANCE_ID } from "@ai-matrx/summon";
+import { useSummonPorts as useSummonPorts2, useSummonSelector as useSummonSelector4 } from "@ai-matrx/summon/react";
+import { getTrayPreviewEntry } from "@ai-matrx/summon/window-host";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function isPlainRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+var TrayChipPreview = memo(function TrayChipPreview2({
+  registryKey,
+  snapshotKey,
+  overlayInstanceId = DEFAULT_INSTANCE_ID,
+  previewData,
+  title
+}) {
+  const meta = getOverlayMeta(registryKey);
+  const { Preview } = getTrayPreviewEntry(registryKey);
+  const ports = useSummonPorts2();
+  const overlayData = useSummonSelector4((state2) => meta ? selectOverlayData(state2, meta.id, overlayInstanceId) : null);
+  const collectedData = useSummonSelector4((state2) => state2.windowManager.windows[snapshotKey]?.persistence?.data);
+  const registryLabel = meta?.label ?? null;
+  const fallback = /* @__PURE__ */ jsx12(TraySnapshotImage, { snapshotKey, registryLabel, title });
+  if (Preview) {
+    const ctx = {
+      data: previewData ?? collectedData ?? (isPlainRecord(overlayData) ? overlayData : {}),
+      overlayId: meta?.id ?? registryKey,
+      instanceId: overlayInstanceId,
+      title
+    };
+    return /* @__PURE__ */ jsx12(
+      PreviewBoundary,
+      {
+        fallback,
+        onError: (error) => ports.errors.capture(error, { where: "tray-preview", overlayId: registryKey }),
+        children: /* @__PURE__ */ jsx12("div", { className: "flex-1 px-3 py-1 overflow-hidden text-xs text-muted-foreground", children: /* @__PURE__ */ jsx12(Preview, { ...ctx }) })
+      }
+    );
+  }
+  return fallback;
+});
+var PreviewBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+var DefaultTrayChipBody = memo(function DefaultTrayChipBody2({ label }) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-1 flex-col justify-between overflow-hidden bg-gradient-to-br from-muted/45 via-background to-primary/5 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+      /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "flex h-8 w-8 shrink-0 flex-col gap-1 rounded-md border border-border/60 bg-background/70 p-1.5 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx12("span", { className: "h-1 w-4 rounded-full bg-primary/45" }),
+            /* @__PURE__ */ jsx12("span", { className: "h-1 w-3 rounded-full bg-muted-foreground/25" }),
+            /* @__PURE__ */ jsx12("span", { className: "h-1 w-4 rounded-full bg-muted-foreground/15" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate text-xs font-medium text-foreground", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "matrx-window-tile-meta flex items-center justify-between gap-2 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx12("span", { className: "truncate uppercase tracking-wide", children: "Window" }),
+      /* @__PURE__ */ jsx12("span", { className: "shrink-0", children: "Click to restore" })
+    ] })
+  ] });
+});
+var TraySnapshotImage = memo(function TraySnapshotImage2({
+  snapshotKey,
+  registryLabel,
+  title
+}) {
+  const snapshot = useSyncExternalStore4(
+    subscribeTraySnapshotMap,
+    () => getTraySnapshot(snapshotKey),
+    () => null
+  );
+  if (!snapshot) return /* @__PURE__ */ jsx12(DefaultTrayChipBody, { label: registryLabel ?? title });
+  return /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-hidden bg-muted/30 relative", children: /* @__PURE__ */ jsx12(
+    "img",
+    {
+      src: snapshot,
+      alt: "",
+      className: cn8("w-full h-full object-cover", "opacity-90 hover:opacity-100 transition-opacity"),
+      draggable: false
+    }
+  ) });
+});
+
+// src/window/tray/MinimizedWindowContent.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function MinimizedWindowContent({
+  registryKey,
+  snapshotKey,
+  overlayInstanceId,
+  previewData,
+  title,
+  onRestore
+}) {
+  const label = title ?? getOverlayMeta2(registryKey)?.label ?? "";
+  return /* @__PURE__ */ jsx13(
+    "button",
+    {
+      type: "button",
+      onClick: onRestore,
+      title: "Click to restore",
+      className: "flex min-h-0 flex-1 flex-col text-left focus:outline-none",
+      children: /* @__PURE__ */ jsx13(
+        TrayChipPreview,
+        {
+          registryKey,
+          snapshotKey,
+          overlayInstanceId,
+          previewData,
+          title: label
+        }
+      )
+    }
+  );
+}
+
+// src/window/WindowPanel.tsx
+import { getTrayPreviewEntry as getTrayPreviewEntry2 } from "@ai-matrx/summon/window-host";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var GLIDE_SETTLE_MS = 800;
+var HANDLES = [
+  {
+    edge: "e",
+    className: "absolute right-0 top-2 bottom-2 w-2.5 translate-x-1/2 cursor-ew-resize"
+  },
+  {
+    edge: "w",
+    className: "absolute left-0 top-2 bottom-2 w-2.5 -translate-x-1/2 cursor-ew-resize"
+  },
+  {
+    edge: "s",
+    className: "absolute bottom-0 left-2 right-2 h-2.5 translate-y-1/2 cursor-ns-resize"
+  },
+  {
+    // Start after the traffic-light hot zone (w-28) — top-left is close/minimize/maximize.
+    edge: "n",
+    className: "absolute top-0 left-2 right-2 h-2.5 -translate-y-1/2 cursor-ns-resize"
+  },
+  {
+    edge: "se",
+    className: "absolute bottom-0 right-0 w-2.5 h-2.5 -translate-x-1/4 -translate-y-1/4 cursor-nwse-resize"
+  },
+  {
+    edge: "sw",
+    className: "absolute bottom-0 left-0 w-2.5 h-2.5 -translate-x-1/4 -translate-y-1/4 cursor-nesw-resize"
+  },
+  {
+    edge: "ne",
+    className: "absolute top-0 right-0 w-2.5 h-2.5 -translate-x-1/4 -translate-y-1/4 cursor-nesw-resize"
+  },
+  {
+    edge: "nw",
+    className: "absolute top-0 left-0 w-2.5 h-2.5 -translate-x-1/4 -translate-y-1/4 cursor-nwse-resize"
+  }
+];
+function WindowPanelBodyShell({
+  bodyRef,
+  fitContent,
+  isMaximized,
+  bodyClassName,
+  captureDimensions,
+  children
+}) {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref: bodyRef,
+      className: cn9(
+        // The structural guard ring is part of the body surface, not window
+        // chrome. Painting it with the canonical page background keeps the
+        // 2px resize-handle gutter visually continuous with full-bleed bodies
+        // such as Chat instead of exposing the card-coloured window shell.
+        "relative z-0 min-h-0 flex-1 overflow-hidden bg-background pointer-events-none",
+        !isMaximized && "p-0.5",
+        fitContent && "overflow-visible",
+        captureDimensions && "matrx-window-body-offscreen"
+      ),
+      "data-window-panel-body-shell": true,
+      style: captureDimensions ?? void 0,
+      children: /* @__PURE__ */ jsx14(
+        "div",
+        {
+          className: cn9(
+            "h-full min-h-0 overflow-auto pointer-events-auto",
+            !isMaximized && "matrx-window-body-inner",
+            bodyClassName
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+var MINIMIZED_TILE_Z_FLOOR = 5e3;
+function WindowPanel({
+  children,
+  title,
+  titleNode,
+  actions,
+  actionsLeft,
+  actionsRight,
+  onClose,
+  bodyClassName,
+  className,
+  mobilePresentationOverride,
+  surfaceLayer,
+  mobileSizeToContent,
+  closeOnEscape = false,
+  mobileHideClose = false,
+  minWidth,
+  minHeight,
+  urlSyncKey,
+  urlSyncId,
+  urlSyncArgs,
+  sidebar,
+  sidebarDefaultSize = 200,
+  sidebarMinSize = 100,
+  defaultSidebarOpen = true,
+  sidebarClassName,
+  sidebarExpandsWindow = false,
+  secondaryPanel,
+  secondaryPanelOpen,
+  secondaryPanelDefaultSize = 360,
+  secondaryPanelMinSize = 240,
+  secondaryPanelClassName,
+  footer,
+  footerLeft,
+  footerCenter,
+  footerRight,
+  footerVariant = "bar",
+  fitContent = false,
+  overlayId: overlayIdProp,
+  boundToOverlay,
+  onCollectData,
+  captureTraySnapshot,
+  overlayInstanceId: overlayInstanceIdProp,
+  hidePopOutButton = false,
+  ...hookOpts
+}) {
+  const instance = useOptionalOverlayInstance();
+  const instanceMatches = instance !== null && (boundToOverlay === true || instance.overlayId === overlayIdProp);
+  const overlayId = overlayIdProp ?? (boundToOverlay && instance ? instance.overlayId : void 0);
+  const overlayInstanceId = overlayInstanceIdProp ?? (instanceMatches ? instance.instanceId : void 0);
+  const ports = useSummonPorts3();
+  const windowConfig = useWindowConfig();
+  const reactId = useId2();
+  const id = hookOpts.id ?? reactId;
+  const trayRegistryKey = overlayId ?? id;
+  const isMobile = useIsMobile();
+  const surfaceLayerAttrs = surfaceLayer ? { "data-surface-layer": surfaceLayer } : void 0;
+  const isMounted = useIsClient();
+  const registryMeta = overlayId ? getOverlayMeta3(overlayId) : void 0;
+  const registryEntry = registryMeta?.window;
+  const effectiveInstanceId = overlayInstanceId ?? DEFAULT_INSTANCE_ID2;
+  const [autoOpened] = useState5(
+    () => Boolean(overlayId) && isAutoOpened(overlayId, effectiveInstanceId)
+  );
+  useEffect5(() => {
+    if (!overlayId) return void 0;
+    let timer;
+    return () => {
+      timer = window.setTimeout(
+        () => clearAutoOpened(overlayId, effectiveInstanceId),
+        100
+      );
+      void timer;
+    };
+  }, [overlayId, effectiveInstanceId]);
+  const preservationEnabled = Boolean(
+    overlayId && registryEntry?.preservation && !registryEntry.ephemeral && (registryMeta?.instance !== "multi" || overlayInstanceId)
+  );
+  const overlayLaunchData = useSummonSelector5(
+    (state2) => overlayId ? selectOverlayData2(state2, overlayId, effectiveInstanceId) : null
+  );
+  const initialPreservationData = registryEntry?.preservation ? sanitizeWindowData(overlayLaunchData, registryEntry.preservation.dataKeys) : {};
+  const popoutCapability = isMounted ? detectPopoutCapability() : null;
+  const popout = usePopoutWindow(id);
+  useEffect5(() => {
+    return registerPopoutOpener(id, popout.openPopout);
+  }, [id, popout.openPopout]);
+  const handleDragOutPopout = useCallback4(
+    (draggedRect) => {
+      void popout.openPopout({
+        width: draggedRect.width,
+        height: draggedRect.height,
+        title: typeof title === "string" ? title : "Window"
+      });
+    },
+    [popout, title]
+  );
+  const onTriggerPopout = !isMobile && popoutCapability !== "none" ? handleDragOutPopout : void 0;
+  const autoDispatch = useSummonDispatch4();
+  const {
+    windowState,
+    rect,
+    zIndex: managerZIndex,
+    onDragStart,
+    onResizeStart,
+    onFocus,
+    onRestore,
+    onMaximize,
+    onMinimize,
+    onToggleMaximize,
+    isInteracting
+  } = useWindowPanel({
+    ...hookOpts,
+    id,
+    title,
+    autoOpened,
+    onAutoNoRoom: autoOpened ? () => {
+      window.dispatchEvent(
+        new CustomEvent(AUTO_OPEN_NO_ROOM_EVENT, { detail: { overlayId, instanceId: effectiveInstanceId } })
+      );
+      if (overlayId) autoDispatch(overlaysRawActions.closeOverlay({ overlayId, instanceId: effectiveInstanceId }));
+    } : void 0,
+    minWidth,
+    minHeight,
+    onTriggerPopout,
+    ...preservationEnabled && overlayId ? {
+      persistence: {
+        overlayId,
+        instanceId: effectiveInstanceId,
+        data: initialPreservationData,
+        sidebarOpen: defaultSidebarOpen,
+        sidebarSize: sidebarDefaultSize
+      }
+    } : {}
+  });
+  const liftedZIndex = useFloatingLayerZIndex2(managerZIndex);
+  const zIndex = windowState === "minimized" ? Math.max(liftedZIndex, MINIMIZED_TILE_Z_FLOOR + managerZIndex) : liftedZIndex;
+  const dispatch = useSummonDispatch4();
+  const windowsHidden = useSummonSelector5(selectWindowsHidden);
+  const isDebugMode = useDebugFlag(ports.debug);
+  useEffect5(() => {
+    announceLayerFront(
+      document.querySelector(`[data-window-id="${CSS.escape(id)}"]`)
+    );
+  }, [id, managerZIndex]);
+  const claimFront = (event) => {
+    announceLayerFront(event.currentTarget.closest("[data-window-id]") ?? event.currentTarget);
+  };
+  const allWindows = useSummonSelector5(selectAllWindows);
+  const isTopWindow = !isMobile ? true : allWindows.find((w) => w.state !== "minimized")?.id === id;
+  const [activePaneMobile, setActivePaneMobile] = useState5(
+    "main"
+  );
+  const effectiveUrlSyncKey = resolveWindowUrlSyncKey(registryMeta?.link?.key, urlSyncKey);
+  const effectiveUrlSyncId = urlSyncId ?? (effectiveUrlSyncKey ? overlayId : void 0);
+  useOverlayLink(effectiveUrlSyncKey, effectiveUrlSyncId, urlSyncArgs);
+  const deprecation = registryEntry?.deprecated;
+  const isDeprecated = !!deprecation;
+  const deprecatedRingClass = isDeprecated ? "ring-2 ring-destructive ring-offset-2 ring-offset-background" : "";
+  const hasSidebar = !!sidebar;
+  const [sidebarOpen, setSidebarOpen] = useState5(defaultSidebarOpen);
+  const [sidebarSize, setSidebarSize] = useState5(
+    sidebarDefaultSize
+  );
+  const restoredPersistence = useSummonSelector5(selectWindowPersistence(id));
+  const sidebarPanelRef = useRef4(null);
+  const restoredChromeAppliedRef = useRef4(false);
+  const handleSaveWindowState = useCallback4(() => {
+    if (!overlayId || !preservationEnabled || !registryEntry?.preservation) {
+      return;
+    }
+    let collected = {};
+    try {
+      collected = onCollectData?.() ?? {};
+    } catch (error) {
+      ports.errors.capture(error, { where: "window-preservation collector", overlayId, instanceId: effectiveInstanceId });
+    }
+    const base = sanitizeWindowData({ ...initialPreservationData, ...collected }, registryEntry.preservation.dataKeys);
+    dispatch(
+      updateWindowPersistence({
+        id,
+        data: base,
+        sidebarOpen,
+        ...sidebarSize === null ? {} : { sidebarSize }
+      })
+    );
+  }, [
+    overlayId,
+    preservationEnabled,
+    registryEntry,
+    effectiveInstanceId,
+    initialPreservationData,
+    id,
+    sidebarOpen,
+    sidebarSize,
+    onCollectData,
+    ports,
+    dispatch
+  ]);
+  const saveRef = useRef4(handleSaveWindowState);
+  useEffect5(() => {
+    saveRef.current = handleSaveWindowState;
+  }, [handleSaveWindowState]);
+  useEffect5(() => {
+    if (!preservationEnabled) return;
+    saveRef.current();
+  }, [preservationEnabled, overlayLaunchData, onCollectData]);
+  const handleClose = useCallback4(() => {
+    if (instanceMatches && instance && instance.overlayId === overlayId) {
+      instance.close();
+    } else if (boundToOverlay) {
+      ports.errors.capture(new Error("[summon] WindowPanel boundToOverlay rendered outside an overlay instance"), { windowId: id });
+    } else if (overlayId) {
+      const hasExactOverlayIdentity = registryMeta?.instance !== "multi" || Boolean(overlayInstanceId);
+      if (hasExactOverlayIdentity) {
+        dispatch(overlaysRawActions.closeOverlay({ overlayId, instanceId: effectiveInstanceId }));
+      } else if (!onClose) {
+        ports.errors.capture(new Error(`[summon] Cannot close multi-instance ${overlayId} without overlayInstanceId or onClose.`), { overlayId });
+      }
+    }
+    onClose?.();
+  }, [boundToOverlay, dispatch, effectiveInstanceId, id, instance, instanceMatches, onClose, overlayId, overlayInstanceId, ports, registryMeta?.instance]);
+  useEffect5(() => {
+    if (!closeOnEscape || isMobile) return void 0;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      const layered = Array.from(
+        document.querySelectorAll(
+          `[data-radix-popper-content-wrapper], [role="menu"], [role="listbox"], [role="dialog"][data-state="open"], [role="alertdialog"], ${windowConfig.escapeYieldSelector}`
+        )
+      ).some(
+        (el2) => el2.getClientRects().length > 0 && getComputedStyle(el2).visibility !== "hidden" && !el2.closest(`[data-window-id="${CSS.escape(id)}"]`)
+      );
+      if (layered) return;
+      const mine = document.querySelector(
+        `[data-window-panel][data-window-id="${CSS.escape(id)}"]`
+      );
+      if (!mine) return;
+      const z = (el2) => Number(getComputedStyle(el2).zIndex) || 0;
+      const top = Array.from(
+        document.querySelectorAll("[data-window-panel][data-window-id]")
+      ).reduce((best, el2) => !best || z(el2) > z(best) ? el2 : best, null);
+      if (top !== mine) return;
+      e.preventDefault();
+      handleClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [closeOnEscape, isMobile, id, handleClose, windowConfig.escapeYieldSelector]);
+  useEffect5(() => {
+    if (!restoredPersistence || restoredChromeAppliedRef.current) return;
+    restoredChromeAppliedRef.current = true;
+    setSidebarOpen(restoredPersistence.sidebarOpen);
+    setSidebarSize(restoredPersistence.sidebarSize);
+    if (!restoredPersistence.sidebarOpen) {
+      sidebarPanelRef.current?.collapse();
+    } else if (restoredPersistence.sidebarSize) {
+      sidebarPanelRef.current?.resize(restoredPersistence.sidebarSize);
+    }
+  }, [restoredPersistence]);
+  const [fitContentEl, fitContentRef] = useState5(null);
+  const fitContentStore = useSummonStore2();
+  const fitPlacedRef = useRef4(false);
+  const [glideReady, setGlideReady] = useState5(false);
+  useEffect5(() => {
+    const timer = window.setTimeout(() => setGlideReady(true), GLIDE_SETTLE_MS);
+    return () => window.clearTimeout(timer);
+  }, []);
+  useEffect5(() => {
+    if (isInteracting) fitPlacedRef.current = true;
+  }, [isInteracting]);
+  const fitPresetPosition = hookOpts.position;
+  const fitMayReplace = hookOpts.initialRect?.x === void 0 && hookOpts.initialRect?.y === void 0;
+  useEffect5(() => {
+    if (!fitContent || isMobile || windowState !== "windowed") return void 0;
+    const el2 = fitContentEl;
+    if (!el2) return void 0;
+    let active = true;
+    const ro = new ResizeObserver((entries) => {
+      if (!active || fitContentStore.getState().windowManager.windows[id]?.state !== "windowed") return;
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      const borderH = el2.offsetHeight - el2.clientHeight;
+      const borderW = el2.offsetWidth - el2.clientWidth;
+      const fitWidth = Math.ceil(width + borderW);
+      const fitHeight = Math.ceil(height + borderH);
+      const placeNow = !fitPlacedRef.current && fitMayReplace && fitPresetPosition !== void 0;
+      dispatch(
+        updateWindowRect2({
+          id,
+          rect: {
+            width: fitWidth,
+            height: fitHeight,
+            ...placeNow ? resolvePosition(fitPresetPosition, fitWidth, fitHeight) : {}
+          }
+        })
+      );
+    });
+    ro.observe(el2);
+    return () => {
+      active = false;
+      ro.disconnect();
+    };
+  }, [fitContent, fitContentEl, isMobile, windowState, id, dispatch, fitContentStore, fitPresetPosition, fitMayReplace]);
+  const toggleSidebar = useCallback4(() => {
+    const panel = sidebarPanelRef.current;
+    if (!panel) return;
+    if (sidebarOpen) {
+      if (sidebarExpandsWindow) {
+        dispatch(
+          updateWindowRect2({
+            id,
+            rect: { width: rect.width - sidebarDefaultSize }
+          })
+        );
+        requestAnimationFrame(() => panel.collapse());
+      } else {
+        panel.collapse();
+      }
+    } else {
+      if (sidebarExpandsWindow) {
+        dispatch(
+          updateWindowRect2({
+            id,
+            rect: { width: rect.width + sidebarDefaultSize }
+          })
+        );
+        requestAnimationFrame(() => panel.resize(sidebarDefaultSize));
+      } else {
+        panel.resize(sidebarDefaultSize);
+      }
+    }
+  }, [
+    sidebarOpen,
+    sidebarDefaultSize,
+    sidebarExpandsWindow,
+    dispatch,
+    id,
+    rect.width
+  ]);
+  const handleSidebarResize = useCallback4(
+    (panelSize) => {
+      setSidebarOpen(panelSize.asPercentage > 0);
+      if (panelSize.inPixels > 0) setSidebarSize(panelSize.inPixels);
+      if (preservationEnabled) {
+        dispatch(
+          updateWindowPersistence({
+            id,
+            sidebarOpen: panelSize.asPercentage > 0,
+            sidebarSize: panelSize.inPixels > 0 ? panelSize.inPixels : sidebarSize
+          })
+        );
+      }
+    },
+    [dispatch, id, preservationEnabled, sidebarSize]
+  );
+  const portalTarget = isMounted ? document.body : null;
+  const [bodyHost] = useState5(() => {
+    if (typeof document === "undefined") return null;
+    const host = document.createElement("div");
+    host.className = "matrx-window-body-host";
+    host.setAttribute("data-window-body-host", "");
+    return host;
+  });
+  useEffect5(() => {
+    if (!overlayId) return void 0;
+    ackOverlayRender(overlayId, id);
+    return () => clearOverlayRender(overlayId, id);
+  }, [overlayId, id]);
+  const resolvedActionsRight = actionsRight ?? actions ?? null;
+  const snapLeft = useCallback4(() => {
+    const { vw, vh } = safeViewportDims2();
+    dispatch(
+      updateWindowRect2({
+        id,
+        rect: { x: 0, y: 0, width: Math.round(vw / 2), height: vh }
+      })
+    );
+  }, [dispatch, id]);
+  const snapRight = useCallback4(() => {
+    const { vw, vh } = safeViewportDims2();
+    const half = Math.round(vw / 2);
+    dispatch(
+      updateWindowRect2({
+        id,
+        rect: { x: half, y: 0, width: vw - half, height: vh }
+      })
+    );
+  }, [dispatch, id]);
+  const snapTop = useCallback4(() => {
+    const { vw, vh } = safeViewportDims2();
+    dispatch(
+      updateWindowRect2({
+        id,
+        rect: { x: 0, y: 0, width: vw, height: Math.round(vh / 2) }
+      })
+    );
+  }, [dispatch, id]);
+  const snapBottom = useCallback4(() => {
+    const { vw, vh } = safeViewportDims2();
+    const half = Math.round(vh / 2);
+    dispatch(
+      updateWindowRect2({
+        id,
+        rect: { x: 0, y: half, width: vw, height: vh - half }
+      })
+    );
+  }, [dispatch, id]);
+  const snapCentre = useCallback4(() => {
+    const { vw, vh } = safeViewportDims2();
+    const w = Math.min(rect.width, vw);
+    const h = Math.min(rect.height, vh);
+    dispatch(
+      updateWindowRect2({
+        id,
+        rect: {
+          x: Math.round((vw - w) / 2),
+          y: Math.round((vh - h) / 2),
+          width: w,
+          height: h
+        }
+      })
+    );
+  }, [dispatch, id, rect.width, rect.height]);
+  const arrangeAll = useCallback4(
+    (layout) => {
+      const { vw, vh } = safeViewportDims2();
+      dispatch(
+        arrangeActiveWindows({
+          layout,
+          viewportWidth: vw,
+          viewportHeight: vh
+        })
+      );
+    },
+    [dispatch]
+  );
+  const popoutMode = useSummonSelector5(selectPopoutMode3(id));
+  const outerPopout = usePopout();
+  const outerPortalContainer = usePortalContainer();
+  const popoutWin = usePopoutWindowRef(id);
+  const ownPopout = popoutMode !== null && popoutWin !== null;
+  const bodyPopoutValue = React.useMemo(
+    () => ownPopout && popoutWin ? { popoutDocument: popoutWin.document, popoutWindow: popoutWin, popoutContainer: popoutWin.document.body, mode: popoutMode } : outerPopout,
+    [ownPopout, popoutWin, popoutMode, outerPopout]
+  );
+  const bodyPortalContainer = ownPopout && popoutWin ? popoutWin.document.body : outerPortalContainer;
+  const popoutCandidateId = useSummonSelector5(selectPopoutCandidateId);
+  const canShowPopOut = !hidePopOutButton && !isMobile && popoutCapability !== "none" && windowState !== "minimized" && popoutMode === null;
+  const handlePopOut = useCallback4(() => {
+    void popout.openPopout({
+      width: rect.width,
+      height: rect.height,
+      title: typeof title === "string" ? title : "Window"
+    });
+  }, [popout, rect.width, rect.height, title]);
+  const handleDockBack = useCallback4(() => {
+    dispatch(dockWindow3(buildDockWindowPayload3(id)));
+  }, [dispatch, id]);
+  const bodyRef = useRef4(null);
+  const retainedBodyDimensionsRef = useRef4(null);
+  const captureGenerationRef = useRef4(0);
+  const trayPreviewEntry = getTrayPreviewEntry2(trayRegistryKey);
+  const effectiveTrayCapture = captureTraySnapshot ?? trayPreviewEntry.captureTraySnapshot ?? (trayPreviewEntry.Preview ? void 0 : defaultTraySnapshotCapture);
+  const [pendingTrayCapture, setPendingTrayCapture] = useState5(null);
+  const [trayPreviewData, setTrayPreviewData] = useState5(void 0);
+  const handleMinimize = useCallback4(() => {
+    let collected;
+    try {
+      collected = onCollectData?.();
+    } catch (error) {
+      ports.errors.capture(error, { where: "window preview collector", windowId: trayRegistryKey });
+    }
+    if (collected && typeof collected === "object") {
+      setTrayPreviewData(collected);
+    }
+    if (preservationEnabled) saveRef.current();
+    const bodyEl = bodyRef.current;
+    const generation = ++captureGenerationRef.current;
+    if (bodyEl) {
+      const bounds = bodyEl.getBoundingClientRect();
+      retainedBodyDimensionsRef.current = {
+        width: Math.max(1, Math.round(bounds.width)),
+        height: Math.max(1, Math.round(bounds.height))
+      };
+    }
+    if (effectiveTrayCapture && bodyEl) {
+      const bounds = bodyEl.getBoundingClientRect();
+      setPendingTrayCapture({
+        capture: effectiveTrayCapture,
+        width: Math.max(1, Math.round(bounds.width)),
+        height: Math.max(1, Math.round(bounds.height)),
+        generation
+      });
+    } else {
+      setPendingTrayCapture(null);
+    }
+    onMinimize();
+  }, [
+    effectiveTrayCapture,
+    onCollectData,
+    onMinimize,
+    ports,
+    preservationEnabled,
+    trayRegistryKey
+  ]);
+  useEffect5(() => {
+    if (windowState !== "minimized" || !pendingTrayCapture) return void 0;
+    const bodyEl = bodyRef.current;
+    if (!bodyEl) {
+      setPendingTrayCapture(null);
+      return void 0;
+    }
+    let cancelled = false;
+    const { capture, generation } = pendingTrayCapture;
+    let timeoutId;
+    const timeout = new Promise((resolve) => {
+      timeoutId = setTimeout(() => resolve(null), 800);
+    });
+    void Promise.race([capture(bodyEl), timeout]).then((blob) => {
+      if (blob && !cancelled && captureGenerationRef.current === generation) {
+        setTraySnapshot(id, blob);
+      }
+    }).catch((err) => {
+      if (!cancelled) ports.errors.capture(err, { where: "captureTraySnapshot", windowId: id });
+    }).finally(() => {
+      if (timeoutId) clearTimeout(timeoutId);
+      if (!cancelled && captureGenerationRef.current === generation) {
+        setPendingTrayCapture(
+          (current) => current?.generation === generation ? null : current
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [id, pendingTrayCapture, ports, windowState]);
+  const handleRestoreClearingSnapshot = useCallback4(() => {
+    captureGenerationRef.current += 1;
+    setPendingTrayCapture(null);
+    clearTraySnapshot(id);
+    onRestore();
+  }, [id, onRestore]);
+  useEffect5(() => {
+    return () => {
+      captureGenerationRef.current += 1;
+      clearTraySnapshot(id);
+    };
+  }, [id]);
+  const previousTrayStateRef = useRef4(windowState);
+  useEffect5(() => {
+    const wasMinimized = previousTrayStateRef.current === "minimized";
+    previousTrayStateRef.current = windowState;
+    if (!wasMinimized || windowState === "minimized") return;
+    const invalidGeneration = ++captureGenerationRef.current;
+    clearTraySnapshot(id);
+    queueMicrotask(() => {
+      setPendingTrayCapture(
+        (current) => current && current.generation < invalidGeneration ? null : current
+      );
+    });
+  }, [id, windowState]);
+  const prevStateRef = useRef4(windowState);
+  const prevPopoutModeRef = useRef4(popoutMode);
+  useEffect5(() => {
+    const wasNonWindowed = prevStateRef.current !== "windowed" || prevPopoutModeRef.current !== null;
+    const isNowWindowed = windowState === "windowed" && popoutMode === null;
+    prevStateRef.current = windowState;
+    prevPopoutModeRef.current = popoutMode;
+    if (wasNonWindowed && isNowWindowed) {
+      const { vw, vh, degenerate } = safeViewportDims2();
+      if (degenerate) return;
+      dispatch(clampWindowRect2({ id, viewportWidth: vw, viewportHeight: vh }));
+    }
+  }, [dispatch, id, windowState, popoutMode]);
+  const isMinimized = windowState === "minimized";
+  const isMaximized = windowState === "maximized";
+  const isPopoutCandidate = popoutCandidateId === id;
+  useEffect5(() => {
+    if (!isMobile || !isMinimized) return;
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (!cancelled) handleRestoreClearingSnapshot();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [handleRestoreClearingSnapshot, isMinimized, isMobile]);
+  const minimizedTitle = title?.trim() || getOverlayMeta3(trayRegistryKey)?.label || "Window";
+  const header = /* @__PURE__ */ jsx14(
+    WindowHeader,
+    {
+      title: titleNode ?? title,
+      minimizedTitle,
+      actionsLeft,
+      actionsRight: resolvedActionsRight,
+      onDragStart,
+      onMinimize: handleMinimize,
+      onToggleMaximize,
+      onClose: handleClose,
+      onRestore: handleRestoreClearingSnapshot,
+      isMaximized,
+      isMinimized,
+      snapLeft,
+      snapRight,
+      snapTop,
+      snapBottom,
+      snapCentre,
+      arrangeAll,
+      hasSidebar,
+      sidebarOpen,
+      onToggleSidebar: toggleSidebar,
+      onSaveWindowState: overlayId ? handleSaveWindowState : void 0,
+      onPopOut: canShowPopOut ? handlePopOut : void 0
+    }
+  );
+  const hasSecondaryPanel = secondaryPanel != null && (secondaryPanelOpen ?? true);
+  const innerBody = hasSidebar || hasSecondaryPanel ? /* @__PURE__ */ jsxs11(ResizablePanelGroup, { orientation: "horizontal", className: "h-full min-h-0", children: [
+    hasSidebar && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsx14(
+        ResizablePanel,
+        {
+          id: "sidebar",
+          panelRef: sidebarPanelRef,
+          defaultSize: sidebarOpen ? sidebarDefaultSize : 0,
+          minSize: sidebarMinSize,
+          collapsible: true,
+          collapsedSize: 0,
+          groupResizeBehavior: "preserve-pixel-size",
+          onResize: handleSidebarResize,
+          style: { overflow: "hidden" },
+          children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: cn9(
+                "h-full flex flex-col min-h-0 overflow-y-auto scrollbar-thin",
+                sidebarClassName
+              ),
+              children: sidebar
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        ResizableHandle,
+        {
+          className: sidebarOpen ? void 0 : "w-0 opacity-0 pointer-events-none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14(ResizablePanel, { id: "body", minSize: 200, className: "min-h-0", children: /* @__PURE__ */ jsx14("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children }) }),
+    hasSecondaryPanel && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsx14(ResizableHandle, {}),
+      /* @__PURE__ */ jsx14(
+        ResizablePanel,
+        {
+          id: "secondary",
+          defaultSize: secondaryPanelDefaultSize,
+          minSize: secondaryPanelMinSize,
+          groupResizeBehavior: "preserve-pixel-size",
+          style: { overflow: "hidden" },
+          children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: cn9(
+                "h-full flex flex-col min-h-0",
+                secondaryPanelClassName
+              ),
+              children: secondaryPanel
+            }
+          )
+        }
+      )
+    ] })
+  ] }) : children;
+  const bodyContent = /* @__PURE__ */ jsx14(WindowSelectionSurface, { children: isDeprecated ? /* @__PURE__ */ jsxs11("div", { className: "h-full flex flex-col min-h-0", children: [
+    /* @__PURE__ */ jsx14(
+      DeprecationBanner,
+      {
+        replacedBy: deprecation?.replacement,
+        note: deprecation?.reason
+      }
+    ),
+    /* @__PURE__ */ jsx14("div", { className: "flex-1 min-h-0", children: innerBody })
+  ] }) : innerBody });
+  const hasZonedFooter = footerLeft || footerCenter || footerRight;
+  const hasFooter = footer || hasZonedFooter;
+  const zonedFooter = /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-1 shrink-0", children: footerLeft }),
+    /* @__PURE__ */ jsx14("div", { className: "flex-1 flex items-center justify-center gap-1", children: footerCenter }),
+    /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-1 shrink-0", children: footerRight })
+  ] });
+  const footerBar = hasFooter ? /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: cn9(
+        // Always: detach from scroll + separate from the body with a top border.
+        "shrink-0 border-t border-border/50",
+        WINDOW_CHROME_INTERACTIVE,
+        footerVariant === "bar" && // Compact metadata-bar chrome — thin chips, tiny buttons/icons. Crushes
+        // rich content; consumers with a composer/input bar pass footerVariant="rich".
+        "flex items-center gap-1 px-2 py-1 rounded-b-xl bg-muted/40 select-none text-xs [&_svg]:h-3 [&_svg]:w-3 [&_button]:h-5 [&_button]:text-xs"
+      ),
+      onPointerDown: (e) => e.stopPropagation(),
+      children: footer ?? (footerVariant === "bar" ? zonedFooter : /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-1", children: zonedFooter }))
+    }
+  ) : null;
+  const bodyPortal = isMounted && bodyHost && !isMobile ? createPortal3(
+    /* @__PURE__ */ jsx14(PopoutContext.Provider, { value: bodyPopoutValue, children: /* @__PURE__ */ jsx14(PortalContainerProvider2, { container: bodyPortalContainer, children: /* @__PURE__ */ jsx14("div", { className: "contents", onPointerDown: onFocus, onPointerDownCapture: claimFront, onFocusCapture: claimFront, children: bodyContent }) }) }),
+    bodyHost
+  ) : null;
+  if (isMobile) {
+    const mobilePresentation = mobilePresentationOverride ?? registryEntry?.mobile ?? "fullscreen";
+    const mobileSidebarAs = registryEntry?.mobileSidebarAs ?? "drawer";
+    if (mobilePresentation === "hidden") {
+      if (process.env.NODE_ENV !== "production" && overlayId) {
+        console.warn(
+          `[WindowPanel] overlay "${overlayId}" has window.mobile: "hidden" but was opened on a phone. Give its definition another presentation or gate opening.`
+        );
+      }
+      return null;
+    }
+    if (mobilePresentation === "drawer") {
+      return /* @__PURE__ */ jsx14(
+        MobileDrawerSurface,
+        {
+          isOpen: true,
+          title: titleNode ?? title,
+          onClose: handleClose,
+          sidebar,
+          sidebarAs: mobileSidebarAs,
+          footer: footerBar,
+          actionsLeft,
+          actionsRight: resolvedActionsRight,
+          bodyClassName,
+          surfaceLayer,
+          sizeToContent: mobileSizeToContent,
+          hideClose: mobileHideClose,
+          children: /* @__PURE__ */ jsx14(WindowSelectionSurface, { children })
+        }
+      );
+    }
+    if (mobilePresentation === "card") {
+      return /* @__PURE__ */ jsx14(
+        MobileCardSurface,
+        {
+          isOpen: true,
+          title: titleNode ?? title,
+          onClose: handleClose,
+          footer: footerBar,
+          actionsRight: resolvedActionsRight,
+          bodyClassName,
+          surfaceLayer,
+          children: /* @__PURE__ */ jsx14(WindowSelectionSurface, { children })
+        }
+      );
+    }
+    const mobileBody = hasSidebar && activePaneMobile === "sidebar" ? /* @__PURE__ */ jsx14("div", { className: cn9("h-full overflow-y-auto", sidebarClassName), children: sidebar }) : children;
+    const mobileEl = /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ...surfaceLayerAttrs,
+        className: cn9(
+          "fixed inset-0 flex flex-col",
+          "bg-card/98 backdrop-blur-md",
+          "overflow-hidden",
+          deprecatedRingClass,
+          className
+        ),
+        style: {
+          top: windowConfig.mobileTopOffset,
+          zIndex,
+          display: isTopWindow && !isMinimized ? void 0 : "none",
+          visibility: windowsHidden ? "hidden" : void 0
+        },
+        onPointerDown: onFocus,
+        onPointerDownCapture: claimFront,
+        onFocusCapture: claimFront,
+        children: [
+          /* @__PURE__ */ jsx14(
+            MobileWindowHeader,
+            {
+              title: titleNode ?? title,
+              actionsRight: resolvedActionsRight,
+              onClose: handleClose,
+              hasSidebar,
+              activePaneMobile,
+              onSetActivePane: setActivePaneMobile
+            }
+          ),
+          isDebugMode && /* @__PURE__ */ jsx14(DebugStrip, { rect, zIndex }),
+          /* @__PURE__ */ jsx14("div", { className: cn9("flex-1 overflow-auto min-h-0", bodyClassName), children: /* @__PURE__ */ jsx14(WindowSelectionSurface, { children: mobileBody }) }),
+          footerBar
+        ]
+      }
+    );
+    return portalTarget ? createPortal3(/* @__PURE__ */ jsx14(FloatingLayer2, { children: mobileEl }), portalTarget) : null;
+  }
+  if (popoutMode !== null) {
+    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      /* @__PURE__ */ jsx14(PopoutPortal, { windowId: id, children: /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          ...surfaceLayerAttrs,
+          className: "h-full w-full flex flex-col bg-card text-foreground",
+          children: [
+            /* @__PURE__ */ jsx14(
+              PopoutTopBar,
+              {
+                title: titleNode ?? title,
+                actionsRight: resolvedActionsRight,
+                onDock: handleDockBack
+              }
+            ),
+            isDebugMode && /* @__PURE__ */ jsx14(DebugStrip, { rect, zIndex }),
+            /* @__PURE__ */ jsx14("div", { className: cn9("flex-1 overflow-auto min-h-0", bodyClassName), children: /* @__PURE__ */ jsx14(BodyMount, { host: bodyHost }) }),
+            footerBar
+          ]
+        }
+      ) }),
+      bodyPortal
+    ] });
+  }
+  const el = /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref: fitContent ? fitContentRef : void 0,
+      "data-window-panel": "",
+      "data-window-id": id,
+      ...surfaceLayerAttrs,
+      ...isMinimized ? { "data-matrx-floating-bottom": "" } : {},
+      className: cn9(
+        "fixed",
+        isMaximized ? "overflow-hidden" : "overflow-visible",
+        "matrx-window-enter",
+        // Programmatic rect changes glide; pointer drag/resize stays 1:1.
+        glideReady && !isInteracting && "matrx-window-glide",
+        // Drag-out candidate: ring-2 highlight signals "release here to pop out".
+        isPopoutCandidate && "ring-2 ring-primary ring-offset-2 ring-offset-background transition-shadow",
+        deprecatedRingClass,
+        className
+      ),
+      style: {
+        ...isMaximized ? { inset: 0, width: "100vw", height: "100dvh" } : {
+          left: rect.x,
+          top: rect.y,
+          ...fitContent && !isMinimized ? { width: "max-content", height: "auto" } : { width: rect.width, height: rect.height }
+        },
+        zIndex,
+        // Cap CSS mins to the current rect so arrange/snap geometry wins.
+        // Uncapped minWidth (e.g. 640) was overriding tile widths and stacking
+        // every left-edge window on top of each other.
+        minWidth: isMaximized || isMinimized ? 0 : fitContent ? minWidth ?? 180 : Math.min(minWidth ?? 180, rect.width),
+        minHeight: isMaximized || isMinimized ? 0 : fitContent ? minHeight ?? 80 : Math.min(minHeight ?? 80, rect.height),
+        visibility: windowsHidden ? "hidden" : void 0
+      },
+      onPointerDown: onFocus,
+      onPointerDownCapture: claimFront,
+      onFocusCapture: claimFront,
+      onDoubleClick: isMinimized ? handleRestoreClearingSnapshot : void 0,
+      children: [
+        !isMinimized && !isMaximized && HANDLES.map((h) => /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: cn9(
+              h.className,
+              "z-50 hover:bg-primary/20 transition-colors"
+            ),
+            style: { touchAction: "none" },
+            onPointerDown: onResizeStart(h.edge)
+          },
+          h.edge
+        )),
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: cn9(
+              "flex h-full w-full min-h-0 flex-col",
+              // Opaque window surface: a window is a solid card, never glass —
+              // glass belongs only on bars floating over moving content (tap-target
+              // placement rule 1). A see-through window let the page underneath
+              // read through its content (Watch AI, 2026-10-12).
+              isMaximized ? "bg-card border border-border shadow-2xl" : "rounded-xl bg-card border border-border shadow-xl",
+              "overflow-hidden"
+            ),
+            children: [
+              header,
+              isDebugMode && !isMinimized && /* @__PURE__ */ jsx14(DebugStrip, { rect, zIndex }),
+              /* @__PURE__ */ jsx14(
+                WindowPanelBodyShell,
+                {
+                  bodyRef,
+                  fitContent,
+                  isMaximized,
+                  bodyClassName,
+                  captureDimensions: isMinimized ? pendingTrayCapture ? {
+                    width: pendingTrayCapture.width,
+                    height: pendingTrayCapture.height
+                  } : retainedBodyDimensionsRef.current ?? {
+                    width: Math.max(1, rect.width),
+                    height: Math.max(1, rect.height)
+                  } : null,
+                  children: /* @__PURE__ */ jsx14(BodyMount, { host: bodyHost })
+                }
+              ),
+              isMinimized && /* @__PURE__ */ jsx14(
+                MinimizedWindowContent,
+                {
+                  registryKey: trayRegistryKey,
+                  snapshotKey: id,
+                  overlayInstanceId,
+                  previewData: trayPreviewData,
+                  title: minimizedTitle,
+                  onRestore: handleRestoreClearingSnapshot
+                }
+              ),
+              !isMinimized && footerBar,
+              isPopoutCandidate && /* @__PURE__ */ jsx14("div", { className: "absolute inset-0 z-30 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx14("div", { className: "px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-xs font-medium shadow-lg", children: "Release to pop out" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    portalTarget ? createPortal3(/* @__PURE__ */ jsx14(FloatingLayer2, { children: el }), portalTarget) : null,
+    bodyPortal
+  ] });
+}
+function BodyMount({ host }) {
+  const slotRef = useRef4(null);
+  useLayoutEffect(() => {
+    const slot2 = slotRef.current;
+    if (!slot2 || !host) return void 0;
+    slot2.appendChild(host);
+    return () => {
+      if (host.parentNode === slot2) slot2.removeChild(host);
+    };
+  }, [host]);
+  return /* @__PURE__ */ jsx14("div", { ref: slotRef, className: "contents", "data-window-body-slot": "" });
+}
+function PopOutHeaderButton({ onClick }) {
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      className: "p-0.5 rounded hover:bg-accent/60 transition-colors text-foreground/60 hover:text-foreground cursor-pointer",
+      onClick,
+      onPointerDown: (e) => e.stopPropagation(),
+      title: "Pop out into a separate window",
+      "aria-label": "Pop out into a separate window",
+      children: /* @__PURE__ */ jsx14(AppWindowIcon, { className: "w-3.5 h-3.5" })
+    }
+  );
+}
+function WindowHeader({
+  title,
+  minimizedTitle,
+  actionsLeft,
+  actionsRight,
+  onDragStart,
+  onMinimize,
+  onToggleMaximize,
+  onRestore,
+  onClose,
+  isMaximized,
+  isMinimized,
+  snapLeft,
+  snapRight,
+  snapTop,
+  snapBottom,
+  snapCentre,
+  arrangeAll,
+  hasSidebar,
+  sidebarOpen,
+  onToggleSidebar,
+  onSaveWindowState,
+  onPopOut
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn9(
+        // 🚨 NEW-8 — the header is a CONTAINER, so a consumer's title/actions can
+        // answer the WINDOW's width instead of the viewport's (`sm:` cannot know
+        // a window is 360px on a 1440px screen — that is how D4 stayed invisible).
+        // The name is `window-header`; `lib/detail/core/headerGeometry.ts` holds it.
+        "@container/window-header",
+        // Open: three in-flow columns — left zone, title, right zone. The two
+        // side columns share the free space equally (never less than their
+        // real content), so the title sits at the WINDOW's centre whatever
+        // each side carries, and still truncates instead of running under an
+        // action cluster when space is tight (D4). Minimized has no title
+        // column, so it keeps the plain row.
+        isMinimized ? "matrx-window-header-row relative flex items-center justify-between gap-1 px-2 py-1 z-20 shrink-0" : "matrx-window-header-grid relative items-center gap-1 px-2 py-1 z-20 shrink-0",
+        "border-b border-border/50 bg-muted/40 select-none",
+        isMaximized || isMinimized ? "cursor-default" : "cursor-grab active:cursor-grabbing",
+        isMinimized && "h-8 min-h-8 py-0 border-b border-border/50"
+      ),
+      "data-window-panel-state": isMinimized ? "minimized" : void 0,
+      style: isMaximized || isMinimized ? void 0 : { touchAction: "none" },
+      onPointerDown: isMaximized || isMinimized ? void 0 : onDragStart,
+      children: [
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: cn9(
+              "group/tl absolute top-0 left-0 bottom-0 flex items-center z-20",
+              hasSidebar ? "w-28" : "w-24"
+            ),
+            onPointerDown: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx14("div", { className: "pl-2", children: /* @__PURE__ */ jsx14(
+              TrafficLightGroup,
+              {
+                isMinimized,
+                isMaximized,
+                onClose,
+                onMinimize,
+                onRestore,
+                onToggleMaximize,
+                snapLeft,
+                snapRight,
+                snapTop,
+                snapBottom,
+                snapCentre,
+                arrangeAll,
+                hasSidebar,
+                sidebarOpen,
+                onToggleSidebar,
+                onSaveWindowState,
+                onPopOut
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 z-10 shrink-0", children: [
+          /* @__PURE__ */ jsx14("div", { className: hasSidebar ? "w-28" : "w-24" }),
+          !isMinimized && actionsLeft && /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: WINDOW_CHROME_ACTIONS,
+              onPointerDown: (e) => e.stopPropagation(),
+              children: actionsLeft
+            }
+          )
+        ] }),
+        isMinimized ? /* @__PURE__ */ jsx14("div", { className: "absolute top-0 bottom-0 left-20 right-2 flex items-center justify-start pointer-events-none", children: /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: "matrx-window-minimized-title block min-w-0 truncate leading-none font-semibold text-foreground",
+            "data-minimized-window-title": true,
+            children: minimizedTitle
+          }
+        ) }) : null,
+        !isMinimized && /* @__PURE__ */ jsx14("div", { className: "flex min-w-0 flex-1 items-center justify-center overflow-hidden", children: typeof title === "string" || title == null ? /* @__PURE__ */ jsx14("span", { className: "min-w-0 truncate text-xs font-medium text-foreground/80", children: title ?? "" }) : /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: "flex min-w-0 max-w-full items-center overflow-hidden whitespace-nowrap",
+            onPointerDown: (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              if (target.closest(
+                'a, button, input, select, textarea, [role="button"], [role="menuitem"], [data-window-no-drag]'
+              )) {
+                event.stopPropagation();
+              }
+            },
+            children: title
+          }
+        ) }),
+        /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-end gap-1 z-10 shrink-0", children: !isMinimized && (onPopOut || actionsRight) && /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: WINDOW_CHROME_ACTIONS,
+            onPointerDown: (e) => e.stopPropagation(),
+            children: [
+              onPopOut ? /* @__PURE__ */ jsx14(PopOutHeaderButton, { onClick: onPopOut }) : null,
+              actionsRight
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function TrafficLightGroup({
+  isMinimized,
+  isMaximized,
+  onClose,
+  onMinimize,
+  onRestore,
+  onToggleMaximize,
+  snapLeft,
+  snapRight,
+  snapTop,
+  snapBottom,
+  snapCentre,
+  arrangeAll,
+  hasSidebar,
+  sidebarOpen,
+  onToggleSidebar,
+  onSaveWindowState,
+  onPopOut
+}) {
+  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 shrink-0 cursor-default", children: [
+    /* @__PURE__ */ jsx14(
+      TrafficLight,
+      {
+        color: "red",
+        icon: /* @__PURE__ */ jsx14(XIcon, { className: "w-2 h-2 matrx-window-light-glyph" }),
+        onClick: onClose ?? void 0,
+        disabled: !onClose,
+        "aria-label": "Close"
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      TrafficLight,
+      {
+        color: "yellow",
+        icon: isMinimized ? /* @__PURE__ */ jsx14(
+          Maximize2Icon,
+          {
+            className: "w-2 h-2 matrx-window-light-glyph"
+          }
+        ) : /* @__PURE__ */ jsx14(
+          MinusIcon,
+          {
+            className: "w-2 h-2 matrx-window-light-glyph"
+          }
+        ),
+        onClick: isMinimized ? onRestore : onMinimize,
+        "aria-label": isMinimized ? "Restore" : "Minimize"
+      }
+    ),
+    !isMinimized && /* @__PURE__ */ jsx14(
+      GreenTrafficLight,
+      {
+        isMaximized,
+        onToggleMaximize,
+        onRestore,
+        snapLeft,
+        snapRight,
+        snapTop,
+        snapBottom,
+        snapCentre,
+        arrangeAll,
+        onSaveWindowState,
+        onPopOut
+      }
+    ),
+    hasSidebar && !isMinimized && /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        className: "ml-0.5 p-0.5 rounded hover:bg-accent/60 transition-colors text-foreground/60 group-hover/tl:text-foreground cursor-pointer",
+        onClick: onToggleSidebar,
+        title: sidebarOpen ? "Hide sidebar" : "Show sidebar",
+        "aria-label": sidebarOpen ? "Hide sidebar" : "Show sidebar",
+        children: sidebarOpen ? /* @__PURE__ */ jsx14(PanelLeftCloseIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx14(PanelLeftIcon, { className: "w-3.5 h-3.5" })
+      }
+    )
+  ] });
+}
+function TrafficLight({
+  color,
+  icon,
+  onClick,
+  disabled,
+  "aria-label": label
+}) {
+  const base = "w-3.5 h-3.5 rounded-full flex items-center justify-center transition-colors shrink-0 relative";
+  const colours = color === "red" ? disabled ? "matrx-window-light-disabled cursor-default" : "matrx-window-light-close cursor-pointer" : "matrx-window-light-minimize cursor-pointer";
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      className: cn9(base, colours),
+      onClick: disabled ? void 0 : onClick,
+      onPointerDown: (e) => e.stopPropagation(),
+      "aria-label": label,
+      disabled,
+      children: /* @__PURE__ */ jsx14(
+        "span",
+        {
+          className: cn9(
+            "opacity-0 transition-opacity duration-100",
+            !disabled && "group-hover/tl:opacity-100"
+          ),
+          children: icon
+        }
+      )
+    }
+  );
+}
+function GreenTrafficLight({
+  isMaximized,
+  onToggleMaximize,
+  onRestore,
+  snapLeft,
+  snapRight,
+  snapTop,
+  snapBottom,
+  snapCentre,
+  arrangeAll,
+  onSaveWindowState,
+  onPopOut
+}) {
+  const [dropdownOpen, setDropdownOpen] = useState5(false);
+  const leaveTimer = useRef4(null);
+  const containerRef = useRef4(null);
+  const openDropdown = () => {
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    setDropdownOpen(true);
+  };
+  const scheduleClose = () => {
+    leaveTimer.current = setTimeout(() => {
+      setDropdownOpen(false);
+    }, 120);
+  };
+  const handleAction = (fn) => {
+    fn();
+    setDropdownOpen(false);
+  };
+  useEffect5(() => {
+    if (!dropdownOpen) return void 0;
+    const onPointerOutside = (e) => {
+      const target = e.target;
+      if (containerRef.current && !containerRef.current.contains(target)) {
+        if (target.closest?.("[data-radix-portal]")) return;
+        setDropdownOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerOutside);
+    return () => document.removeEventListener("pointerdown", onPointerOutside);
+  }, [dropdownOpen]);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative",
+      onMouseEnter: openDropdown,
+      onMouseLeave: scheduleClose,
+      children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: cn9(
+              "w-3.5 h-3.5 rounded-full flex items-center justify-center transition-colors shrink-0",
+              "matrx-window-light-maximize cursor-pointer"
+            ),
+            onClick: (e) => {
+              if ("ontouchstart" in window || navigator.maxTouchPoints > 0) {
+                setDropdownOpen((prev) => !prev);
+              } else {
+                handleAction(onToggleMaximize);
+              }
+            },
+            onPointerDown: (e) => e.stopPropagation(),
+            "aria-label": isMaximized ? "Restore" : "Maximize",
+            children: /* @__PURE__ */ jsx14("span", { className: "opacity-0 group-hover/tl:opacity-100 transition-opacity duration-100 flex items-center justify-center relative w-full h-full", children: isMaximized ? /* @__PURE__ */ jsx14(
+              Minimize2Icon,
+              {
+                className: "w-2 h-2 matrx-window-light-glyph absolute"
+              }
+            ) : /* @__PURE__ */ jsx14(
+              Maximize2Icon,
+              {
+                className: "w-2 h-2 matrx-window-light-glyph absolute"
+              }
+            ) })
+          }
+        ),
+        dropdownOpen && /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: cn9(
+              "absolute left-0 top-full mt-1.5 z-50",
+              "w-52 rounded-xl overflow-hidden",
+              "bg-card/95 backdrop-blur-xl border border-border shadow-2xl",
+              "py-1 text-xs"
+            ),
+            onMouseEnter: openDropdown,
+            onMouseLeave: scheduleClose,
+            children: [
+              !isMaximized && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                /* @__PURE__ */ jsx14("div", { className: "matrx-window-tile-meta px-3 pt-1.5 pb-1 font-semibold text-muted-foreground uppercase tracking-wider", children: "Move & Resize" }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 px-2 pb-2", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 justify-center", children: [
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(snapLeft),
+                        type: "left-half"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(snapRight),
+                        type: "right-half"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(snapTop),
+                        type: "top-half"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(snapBottom),
+                        type: "bottom-half"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 justify-center", children: [
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(snapCentre),
+                        type: "centre"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(onToggleMaximize),
+                        type: "full"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx14("div", { className: "border-t border-border/50 my-1" }),
+                /* @__PURE__ */ jsx14("div", { className: "matrx-window-tile-meta px-3 pt-1.5 pb-1 font-semibold text-muted-foreground uppercase tracking-wider", children: "Arrange All" }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 px-2 pb-2", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 justify-center", children: [
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("grid4")),
+                        type: "grid4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("grid6")),
+                        type: "grid6"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("grid8")),
+                        type: "grid8"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("grid9")),
+                        type: "grid9"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("grid12")),
+                        type: "grid12"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 justify-center", children: [
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackRight2")),
+                        type: "stackRight2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackRight3")),
+                        type: "stackRight3"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackRight4")),
+                        type: "stackRight4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackRight5")),
+                        type: "stackRight5"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 justify-center", children: [
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackLeft2")),
+                        type: "stackLeft2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackLeft3")),
+                        type: "stackLeft3"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackLeft4")),
+                        type: "stackLeft4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      LayoutIconButton,
+                      {
+                        onClick: () => handleAction(() => arrangeAll("stackLeft5")),
+                        type: "stackLeft5"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx14("div", { className: "border-t border-border/50 my-1" })
+              ] }),
+              /* @__PURE__ */ jsx14(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center gap-2.5 w-full px-3 py-1.5 hover:bg-accent transition-colors text-foreground/80",
+                  onClick: () => handleAction(onToggleMaximize),
+                  onPointerDown: (e) => e.stopPropagation(),
+                  children: isMaximized ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                    /* @__PURE__ */ jsx14(Minimize2Icon, { className: "w-3.5 h-3.5 shrink-0" }),
+                    " Exit Full Screen"
+                  ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                    /* @__PURE__ */ jsx14(RectangleVerticalIcon, { className: "w-3.5 h-3.5 shrink-0" }),
+                    " Enter Full Screen"
+                  ] })
+                }
+              ),
+              isMaximized && /* @__PURE__ */ jsxs11(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center gap-2.5 w-full px-3 py-1.5 hover:bg-accent transition-colors text-foreground/80",
+                  onClick: () => handleAction(onRestore),
+                  onPointerDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx14(Maximize2Icon, { className: "w-3.5 h-3.5 shrink-0" }),
+                    "Restore window"
+                  ]
+                }
+              ),
+              onPopOut && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                /* @__PURE__ */ jsx14("div", { className: "border-t border-border/50 my-1" }),
+                /* @__PURE__ */ jsxs11(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex items-center gap-2.5 w-full px-3 py-1.5 transition-colors text-foreground/80 hover:bg-accent",
+                    onClick: () => handleAction(onPopOut),
+                    onPointerDown: (e) => e.stopPropagation(),
+                    title: "Pop out into a separate window",
+                    children: [
+                      /* @__PURE__ */ jsx14(AppWindowIcon, { className: "w-3.5 h-3.5 shrink-0" }),
+                      /* @__PURE__ */ jsx14("span", { className: "flex-1 text-left", children: "Pop out" })
+                    ]
+                  }
+                )
+              ] }),
+              onSaveWindowState && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                /* @__PURE__ */ jsx14("div", { className: "border-t border-border/50 my-1" }),
+                /* @__PURE__ */ jsxs11(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex items-center gap-2.5 w-full px-3 py-1.5 hover:bg-accent transition-colors text-foreground/80",
+                    onClick: () => handleAction(onSaveWindowState),
+                    onPointerDown: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsx14(SaveIcon, { className: "w-3.5 h-3.5 shrink-0" }),
+                      "Save window state"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/window.ts
+import {
+  WindowsProvider,
+  useWindowConfig as useWindowConfig2,
+  WindowSelectionSurface as WindowSelectionSurface2,
+  DEFAULT_WINDOW_CONFIG,
+  DEFAULT_ESCAPE_YIELD_SELECTOR,
+  DEFAULT_MOBILE_TOP_OFFSET
+} from "@ai-matrx/summon/window-host";
+import { WindowTraySync } from "@ai-matrx/summon/window-host";
+
+// src/window/WindowSidebar.tsx
+import { cn as cn10 } from "@ai-matrx/design-system/cn";
+import { ScrollArea } from "@ai-matrx/design-system";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function WindowSidebar({
+  items,
+  activeItem,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx15(ScrollArea, { className: cn10("flex-1 w-full", className), children: /* @__PURE__ */ jsx15("div", { className: "py-2", children: items.map((item) => {
+    const Icon = item.icon;
+    const isActive = item.value === activeItem;
+    return /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        onClick: () => onSelect(item.value),
+        title: item.description,
+        className: cn10(
+          "w-full flex items-center gap-2.5 px-3 py-2 text-left text-xs transition-colors",
+          isActive ? "bg-primary/10 text-primary-ink border-r-2 border-primary" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx15("span", { className: "truncate", children: item.label })
+        ]
+      },
+      item.value
+    );
+  }) }) });
+}
+
+// src/window/useOverlaySurfaceRenderAck.ts
+import { useEffect as useEffect6 } from "react";
+import { ackOverlaySurfaceRender, clearOverlaySurfaceRender } from "@ai-matrx/summon";
+function useOverlaySurfaceRenderAck(overlayId, active) {
+  useEffect6(() => {
+    if (!active) return void 0;
+    ackOverlaySurfaceRender(overlayId);
+    return () => clearOverlaySurfaceRender(overlayId);
+  }, [active, overlayId]);
+}
+
+// src/window.ts
+import {
+  registerTrayPreview,
+  getTrayPreviewEntry as getTrayPreviewEntry3,
+  resetTrayPreviews
+} from "@ai-matrx/summon/window-host";
+
+// src/window/tray/TrayStatusChip.tsx
+import { cn as cn11 } from "@ai-matrx/design-system/cn";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+var TONE_CLASSES = {
+  neutral: {
+    fg: "text-muted-foreground",
+    dot: "bg-muted-foreground/50"
+  },
+  info: {
+    fg: "text-info",
+    dot: "bg-info"
+  },
+  warning: {
+    fg: "text-warning",
+    dot: "bg-warning"
+  },
+  elevated: {
+    fg: "text-warning",
+    dot: "bg-warning"
+  },
+  critical: {
+    fg: "text-destructive",
+    dot: "bg-destructive"
+  }
+};
+function TrayStatusChip({
+  icon: Icon,
+  tone,
+  count,
+  caption,
+  segments,
+  pulse
+}) {
+  const t = TONE_CLASSES[tone];
+  const visibleSegments = (segments ?? []).filter((s) => s.count > 0);
+  const showBreakdown = visibleSegments.length > 1;
+  const hasCount = typeof count === "number";
+  return /* @__PURE__ */ jsxs13("div", { className: "flex h-full items-center gap-1.5 overflow-hidden", children: [
+    /* @__PURE__ */ jsx16(
+      Icon,
+      {
+        className: cn11("h-3.5 w-3.5 shrink-0", t.fg, pulse && "animate-pulse"),
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 items-baseline gap-1", children: [
+      hasCount ? /* @__PURE__ */ jsx16("span", { className: cn11("text-xs font-semibold tabular-nums", t.fg), children: count }) : null,
+      caption ? /* @__PURE__ */ jsx16("span", { className: "truncate text-[11px] text-muted-foreground", children: caption }) : null
+    ] }),
+    showBreakdown ? /* @__PURE__ */ jsx16("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: visibleSegments.map((s, i) => /* @__PURE__ */ jsxs13(
+      "span",
+      {
+        className: "flex items-center gap-0.5",
+        title: s.label ? `${s.count} ${s.label}` : void 0,
+        children: [
+          /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: cn11(
+                "h-1.5 w-1.5 rounded-full",
+                TONE_CLASSES[s.tone].dot
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx16("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: s.count })
+        ]
+      },
+      i
+    )) }) : null
+  ] });
+}
+
+// src/window/popout/usePopoutContainer.ts
+function usePopoutContainer() {
+  return usePopout().popoutContainer ?? void 0;
+}
+
+// src/window/utils/mayRaiseUnbidden.ts
+import { getOverlayMeta as getOverlayMeta4 } from "@ai-matrx/summon";
+function isUnderRoute(pathname, route) {
+  if (pathname === route) return true;
+  const base = route.endsWith("/") ? route.slice(0, -1) : route;
+  return pathname === base || pathname.startsWith(`${base}/`);
+}
+function describeHome(h) {
+  return typeof h === "string" ? h : `${h.route} (exact)`;
+}
+function mayRaiseUnbidden(overlayId, pathname) {
+  const entry = getOverlayMeta4(overlayId);
+  const declared = entry?.window?.unbiddenHome ?? [];
+  const home = declared.map(describeHome);
+  if (home.length === 0) {
+    const reason = entry ? `window "${overlayId}" declared no unbiddenHome in the window registry, so it may not open itself on any route` : `overlay "${overlayId}" is not in the window registry, so it has no declared home and may not open itself anywhere`;
+    console.warn(`[window-panels] unbidden raise refused \u2014 ${reason}`);
+    return { allowed: false, reason, code: "no-declared-home", home };
+  }
+  if (!pathname) {
+    const reason = `window "${overlayId}" was asked to open itself with no current route, so its home (${home.join(", ")}) could not be confirmed`;
+    console.warn(`[window-panels] unbidden raise refused \u2014 ${reason}`);
+    return { allowed: false, reason, code: "away-from-home", home };
+  }
+  const matched = declared.find(
+    (h) => typeof h === "string" ? isUnderRoute(pathname, h) : pathname === h.route
+  );
+  const match = matched === void 0 ? void 0 : describeHome(matched);
+  if (!match) {
+    const reason = `window "${overlayId}" lives on ${home.join(", ")} \u2014 not on "${pathname}" \u2014 so it is deferred until the viewer is on one of its own surfaces`;
+    console.info(`[window-panels] unbidden raise deferred \u2014 ${reason}`);
+    return { allowed: false, reason, code: "away-from-home", home };
+  }
+  return {
+    allowed: true,
+    reason: `window "${overlayId}" is on its declared home "${match}"`,
+    home
+  };
+}
+
+// src/window/utils/lazy-bundle-guard.ts
+import { globalSlot as globalSlot5 } from "@ai-matrx/kit/global-slot";
+var guard = () => globalSlot5("ai-matrx.summon.lazyBundleGuard", () => {
+  const state2 = { bootInProgress: typeof window !== "undefined", reported: /* @__PURE__ */ new Set() };
+  if (state2.bootInProgress) {
+    setTimeout(() => {
+      state2.bootInProgress = false;
+    }, 0);
+  }
+  return state2;
+});
+guard();
+function assertLazyLoaded(moduleId, report) {
+  if (typeof window === "undefined") return;
+  const callSiteStack = (new Error("call site").stack ?? "").split("\n").filter((line) => !/lazy-bundle-guard\.|at Error\s*$|^Error/i.test(line)).join("\n");
+  queueMicrotask(() => {
+    const state2 = guard();
+    if (!state2.bootInProgress || state2.reported.has(moduleId)) return;
+    state2.reported.add(moduleId);
+    const message = `${moduleId} was parsed during initial app boot. Lazily rendered modules MUST load through their definition's render import \u2014 never statically from a route, layout, provider, or any module in the boot graph. (Reported once per session per module.)`;
+    if (report) {
+      report(message, callSiteStack);
+      return;
+    }
+    console.warn(
+      "[overlays bundle leak]",
+      `
+${message}${callSiteStack ? `
+
+Eager-import chain (top frame is the file that statically imported it):
+${callSiteStack}` : ""}`
+    );
+  });
+}
+export {
+  AUTO_OPEN_MIN_WIDTH,
+  AUTO_OPEN_NO_ROOM_EVENT,
+  DEFAULT_DRAG_OUT_CONFIG,
+  DEFAULT_ESCAPE_YIELD_SELECTOR,
+  DEFAULT_MOBILE_TOP_OFFSET,
+  DEFAULT_WINDOW_CONFIG,
+  INITIAL_DRAG_OUT_STATE,
+  LayoutIcon,
+  LayoutIconButton,
+  MOBILE_WINDOW_TITLE_TEXT,
+  MinimizedWindowContent,
+  MobileCardSurface,
+  MobileDrawerSurface,
+  MobileWindowActionsRow,
+  MobileWindowTitle,
+  MobileWindowTitleRow,
+  PopoutContext,
+  TrayChipPreview,
+  TrayStatusChip,
+  WindowPanel,
+  WindowSelectionSurface2 as WindowSelectionSurface,
+  WindowSidebar,
+  WindowTraySync,
+  WindowsProvider,
+  assertLazyLoaded,
+  autoOpenHasRoom,
+  buildPopoutOpts,
+  captureElementThumbnail,
+  clearAllPopoutPending,
+  clearAutoOpened,
+  clearTraySnapshot,
+  defaultTraySnapshotCapture,
+  detectPopoutCapability,
+  evaluateDragOut,
+  forEachPopoutWindow,
+  getPendingPopoutWindowIds,
+  getPopoutOpener,
+  getPopoutWindow,
+  getTrayPreviewEntry3 as getTrayPreviewEntry,
+  getTraySnapshot,
+  isAutoOpened,
+  isUnderRoute,
+  markAutoOpened,
+  mayRaiseUnbidden,
+  measureWorkingColumn,
+  mobileWindowTitleClass,
+  registerTrayPreview,
+  resetDefaultWindowCascade,
+  resetTrayPreviews,
+  resolveAutoOpenPlacement,
+  resolvePosition,
+  sanitizeWindowData,
+  setTraySnapshot,
+  subscribePopoutWindowMap,
+  subscribeTraySnapshotMap,
+  supportsAnyPopout,
+  supportsDocumentPictureInPicture,
+  useOverlaySurfaceRenderAck,
+  usePopout,
+  usePopoutContainer,
+  usePopoutControl,
+  usePopoutWindow,
+  usePopoutWindowRef,
+  useWindowConfig2 as useWindowConfig,
+  useWindowPanel
+};
+//# sourceMappingURL=window.js.map