@tearleads/windowing 0.1.1

package/window/WindowTitleBar.css

@@ -0,0 +1,88 @@
+.window-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  min-height: var(--window-bar-height);
+  padding: var(--window-bar-padding);
+  background: var(--tearleads-window-titlebar-background);
+  color: var(--tearleads-window-titlebar-text);
+  line-height: var(--window-bar-line-height);
+  cursor: grab;
+  user-select: none;
+  /* Dragging is pointer-driven; keep a touch drag from scrolling the page. */
+  touch-action: none;
+  border-radius: var(--app-radius-surface) var(--app-radius-surface) 0 0;
+}
+
+.window-titlebar-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.window-titlebar:active {
+  cursor: grabbing;
+}
+
+.window--maximized .window-titlebar {
+  cursor: default;
+  border-radius: 0;
+}
+
+.window-titlebar-buttons {
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--space-xs);
+  /* Sit above the corner resize handles, which are absolutely positioned and
+     rendered after the titlebar, so they otherwise paint over this group and
+     the top-right (--ne) handle's hit target swallows clicks on the close
+     button. The handles stay transparent, so their hover bracket still shows
+     through; only the pointer priority in the button overlap goes to the
+     buttons. */
+  position: relative;
+  z-index: 1;
+}
+
+.window-close,
+.window-maximize,
+.window-minimize {
+  /* Interactive title controls get a larger hit area than the informational
+     status/menu bars; keep their compact shared bar token unchanged. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0 var(--space-xs);
+  border: none;
+  background: none;
+  color: var(--tearleads-window-titlebar-text);
+  cursor: pointer;
+  line-height: 1;
+  border-radius: var(--app-radius-control);
+  transition: background var(--transition);
+}
+
+.window-close:hover,
+.window-maximize:hover,
+.window-minimize:hover,
+.window-close:focus-visible,
+.window-maximize:focus-visible,
+.window-minimize:focus-visible {
+  background: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.window-close:focus-visible,
+.window-maximize:focus-visible,
+.window-minimize:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -3px;
+}
+
+.window-close:hover {
+  background: var(--color-danger);
+  color: var(--color-light);
+}

package/window/WindowTitleBar.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface WindowTitleBarAction {
+    disabled?: boolean;
+    icon: ReactNode;
+    id: string;
+    label: string;
+    onClick: () => void;
+}
+export declare function WindowTitleBar({ title, titleId, onPointerDown, onMinimize, onMaximize, onClose, onMoveForward, onMoveBackward, }: {
+    title: string;
+    titleId?: string | undefined;
+    onPointerDown: (e: React.PointerEvent) => void;
+    onMinimize: () => void;
+    onMaximize: () => void;
+    onClose: () => void;
+    onMoveForward: () => void;
+    onMoveBackward: () => void;
+}): import("react").JSX.Element;

package/window/WindowTitleBar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon } from "@phosphor-icons/react/dist/csr/ArrowDown";
+import { ArrowUpIcon } from "@phosphor-icons/react/dist/csr/ArrowUp";
+import { useCallback } from "react";
+import { Menu } from "../menu/Menu.js";
+import { MenuItem } from "../menu/MenuItem.js";
+import { useContextMenuPositionState } from "../menu/useContextMenuState.js";
+import "./WindowTitleBar.css";
+import { WindowCloseButton } from "./WindowCloseButton.js";
+import { WindowMaximizeButton } from "./WindowMaximizeButton.js";
+import { WindowMinimizeButton } from "./WindowMinimizeButton.js";
+export function WindowTitleBar({ title, titleId, onPointerDown, onMinimize, onMaximize, onClose, onMoveForward, onMoveBackward, }) {
+    const { closeContextMenu, contextMenu, openContextMenuAt } = useContextMenuPositionState();
+    const handlePointerDown = useCallback((e) => {
+        const target = e.target;
+        if (e.button !== 0)
+            return;
+        // Element, not HTMLElement: an icon inside a button (including the
+        // portaled context menu, whose events bubble through React) is SVG.
+        if (target instanceof Element && target.closest("button"))
+            return;
+        onPointerDown(e);
+    }, [onPointerDown]);
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Window controls", className: "window-titlebar", onPointerDown: handlePointerDown, onContextMenu: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            openContextMenuAt({ x: event.clientX, y: event.clientY });
+        }, children: [_jsx("span", { className: "window-titlebar-title", id: titleId, title: title, children: title }), _jsxs("div", { className: "window-titlebar-buttons", children: [_jsx(WindowMinimizeButton, { onClick: onMinimize }), _jsx(WindowMaximizeButton, { onClick: onMaximize }), _jsx(WindowCloseButton, { label: "Close window", onClick: onClose })] }), contextMenu && (_jsxs(Menu, { position: contextMenu, onClose: closeContextMenu, direction: "down", children: [_jsx(MenuItem, { icon: ArrowUpIcon, label: "Move Forward", onClick: () => {
+                            onMoveForward();
+                            closeContextMenu();
+                        } }), _jsx(MenuItem, { icon: ArrowDownIcon, label: "Move Backward", onClick: () => {
+                            onMoveBackward();
+                            closeContextMenu();
+                        } })] }))] }));
+}
+//# sourceMappingURL=WindowTitleBar.js.map

package/window/WindowTitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitleBar.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/window/WindowTitleBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAkB,WAAW,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAU9D,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,EACP,aAAa,EACb,cAAc,GAUf;IACC,MAAM,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,GACxD,2BAA2B,EAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAqC,EAAE,EAAE;QACxC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC3B,mEAAmE;QACnE,oEAAoE;QACpE,IAAI,MAAM,YAAY,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;YAAE,OAAO;QAClE,aAAa,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,eACE,IAAI,EAAC,SAAS,gBACH,iBAAiB,EAC5B,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,iBAAiB,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QAC5D,CAAC,aAED,eAAM,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,YAC9D,KAAK,GACD,EACP,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,oBAAoB,IAAC,OAAO,EAAE,UAAU,GAAI,EAC7C,KAAC,oBAAoB,IAAC,OAAO,EAAE,UAAU,GAAI,EAC7C,KAAC,iBAAiB,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,GAAI,IACxD,EACL,WAAW,IAAI,CACd,MAAC,IAAI,IACH,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAC,MAAM,aAEhB,KAAC,QAAQ,IACP,IAAI,EAAE,WAAW,EACjB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,EAAE,CAAC;4BAChB,gBAAgB,EAAE,CAAC;wBACrB,CAAC,GACD,EACF,KAAC,QAAQ,IACP,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,EAAE,CAAC;4BACjB,gBAAgB,EAAE,CAAC;wBACrB,CAAC,GACD,IACG,CACR,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { ArrowDownIcon } from \"@phosphor-icons/react/dist/csr/ArrowDown\";\nimport { ArrowUpIcon } from \"@phosphor-icons/react/dist/csr/ArrowUp\";\nimport { type ReactNode, useCallback } from \"react\";\nimport { Menu } from \"../menu/Menu\";\nimport { MenuItem } from \"../menu/MenuItem\";\nimport { useContextMenuPositionState } from \"../menu/useContextMenuState\";\nimport \"./WindowTitleBar.css\";\nimport { WindowCloseButton } from \"./WindowCloseButton\";\nimport { WindowMaximizeButton } from \"./WindowMaximizeButton\";\nimport { WindowMinimizeButton } from \"./WindowMinimizeButton\";\n\nexport interface WindowTitleBarAction {\n  disabled?: boolean;\n  icon: ReactNode;\n  id: string;\n  label: string;\n  onClick: () => void;\n}\n\nexport function WindowTitleBar({\n  title,\n  titleId,\n  onPointerDown,\n  onMinimize,\n  onMaximize,\n  onClose,\n  onMoveForward,\n  onMoveBackward,\n}: {\n  title: string;\n  titleId?: string | undefined;\n  onPointerDown: (e: React.PointerEvent) => void;\n  onMinimize: () => void;\n  onMaximize: () => void;\n  onClose: () => void;\n  onMoveForward: () => void;\n  onMoveBackward: () => void;\n}) {\n  const { closeContextMenu, contextMenu, openContextMenuAt } =\n    useContextMenuPositionState();\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      const target = e.target;\n      if (e.button !== 0) return;\n      // Element, not HTMLElement: an icon inside a button (including the\n      // portaled context menu, whose events bubble through React) is SVG.\n      if (target instanceof Element && target.closest(\"button\")) return;\n      onPointerDown(e);\n    },\n    [onPointerDown],\n  );\n\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Window controls\"\n      className=\"window-titlebar\"\n      onPointerDown={handlePointerDown}\n      onContextMenu={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        openContextMenuAt({ x: event.clientX, y: event.clientY });\n      }}\n    >\n      <span className=\"window-titlebar-title\" id={titleId} title={title}>\n        {title}\n      </span>\n      <div className=\"window-titlebar-buttons\">\n        <WindowMinimizeButton onClick={onMinimize} />\n        <WindowMaximizeButton onClick={onMaximize} />\n        <WindowCloseButton label=\"Close window\" onClick={onClose} />\n      </div>\n      {contextMenu && (\n        <Menu\n          position={contextMenu}\n          onClose={closeContextMenu}\n          direction=\"down\"\n        >\n          <MenuItem\n            icon={ArrowUpIcon}\n            label=\"Move Forward\"\n            onClick={() => {\n              onMoveForward();\n              closeContextMenu();\n            }}\n          />\n          <MenuItem\n            icon={ArrowDownIcon}\n            label=\"Move Backward\"\n            onClick={() => {\n              onMoveBackward();\n              closeContextMenu();\n            }}\n          />\n        </Menu>\n      )}\n    </div>\n  );\n}\n"]}

package/window/WindowToolBar.css

@@ -0,0 +1,75 @@
+.window-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  /*
+   * Reserve an ICON-INCLUSIVE row height so an EMPTY toolbar is exactly as tall
+   * as one holding icon buttons. An action-less sub-route (e.g. a container's
+   * "Get Info" view registers no toolbar actions and no back action) renders the
+   * bar with only a spacer, collapsing it to its min-height. `--window-bar-height`
+   * only accounts for the text line box (1.25em + padding); when the inherited
+   * font size makes 1.25em smaller than the 18px action icons, a FILLED row is
+   * driven taller by the icons and exceeds that min-height. The empty bar then
+   * sits shorter, so returning to the filled view shifts the body up then down.
+   * Reserve the LARGER of the standard bar height and an icon-inclusive bar
+   * height (18px icon + the same block padding), so the empty and filled bar
+   * always clamp to the same height. Uses the literal 18px (not 1.125rem) because
+   * size={18} renders a fixed-pixel icon regardless of the root font size, so a
+   * rem here would drift out of sync under accessibility zoom or a custom root
+   * font and re-introduce the shift. Keep 18px == the icon size.
+   */
+  min-height: max(
+    var(--window-bar-height),
+    calc(18px + var(--window-bar-block-padding) * 2)
+  );
+  background: var(--color-muted);
+  border-top: var(--border-width) solid var(--color-hairline);
+  user-select: none;
+}
+
+.window-toolbar-primary,
+.window-toolbar-actions {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.window-toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.window-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  min-width: 0;
+  padding: var(--window-bar-padding);
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: var(--window-bar-line-height);
+  cursor: pointer;
+}
+
+.window-toolbar-button:hover:not(:disabled),
+.window-toolbar-button:focus-visible:not(:disabled) {
+  background: var(--emphasis-surface);
+  color: var(--emphasis-text);
+}
+
+.window-toolbar-button:disabled {
+  cursor: default;
+  opacity: var(--opacity-disabled);
+}
+
+.window-toolbar-button svg {
+  flex: 0 0 auto;
+}
+
+.window-toolbar-back-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/window/WindowToolBar.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The window's toolbar row, sitting below the File/View menu bar and above the
+ * body. It renders the same actions the routed app bar shows — the registered
+ * {@link useWindowBackAction} on the left and {@link useWindowTitleBarAction}
+ * icon buttons on the right — so a mini-app hosted in a window gets the same
+ * toolbar chrome it gets in the routed shell.
+ *
+ * The left slot resolves exactly as `RoutedPaneAppBar` does: a registered back
+ * action wins, and otherwise the button steps back through the host's own
+ * history. `showHistoryBack` turns that fallback on for a window hosting a
+ * routed mini-app, whose history is the window's Back stack (windows are not
+ * backed by browser history); the fallback is omitted when that stack is empty.
+ * Unlike the routed shell's paired Back/Forward controls, the window has no
+ * adjacent history control whose stable placement would justify a disabled
+ * Back button.
+ *
+ * Both surfaces read one shared registry (WindowMenuContext), so a mini-app
+ * registers its actions once and they appear wherever it is hosted.
+ *
+ * A window whose app never registers toolbar chrome keeps a flush menu bar/body
+ * (the row renders nothing). But once an app HAS shown chrome, the row stays
+ * mounted and reserves its {@link WindowToolBar.css} min-height even when the
+ * action set momentarily clears — on an action-less sub-route or a loading tick
+ * where the app's `show` conditions are briefly false. Unmounting the row in
+ * those windows would drop a full bar-height out of the flex column and shift
+ * the body up, then back down when the actions re-register (visible flicker).
+ *
+ * An app that wants the row on every route — a blank bar where a route carries
+ * no actions, rather than one that only appears after some route first shows
+ * chrome — reserves it via {@link useWindowToolbarReservation} (the reserved row
+ * still mounts a commit late, once that hook's effect registers, as all window
+ * chrome does).
+ */
+export declare function WindowToolBar({ canGoBack, onGoBack, showHistoryBack, }?: {
+    canGoBack?: boolean;
+    onGoBack?: (() => void) | undefined;
+    showHistoryBack?: boolean;
+}): import("react").JSX.Element | null;

package/window/WindowToolBar.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretLeftIcon } from "@phosphor-icons/react/dist/csr/CaretLeft";
+import { useState } from "react";
+import "./WindowToolBar.css";
+import { WindowTitleBarActionButtons } from "./WindowChromeActions.js";
+import { useWindowBackActionValue, useWindowTitleBarActions, useWindowToolbarReservationReleased, useWindowToolbarReserved, } from "./WindowMenuContext.js";
+/**
+ * The window's toolbar row, sitting below the File/View menu bar and above the
+ * body. It renders the same actions the routed app bar shows — the registered
+ * {@link useWindowBackAction} on the left and {@link useWindowTitleBarAction}
+ * icon buttons on the right — so a mini-app hosted in a window gets the same
+ * toolbar chrome it gets in the routed shell.
+ *
+ * The left slot resolves exactly as `RoutedPaneAppBar` does: a registered back
+ * action wins, and otherwise the button steps back through the host's own
+ * history. `showHistoryBack` turns that fallback on for a window hosting a
+ * routed mini-app, whose history is the window's Back stack (windows are not
+ * backed by browser history); the fallback is omitted when that stack is empty.
+ * Unlike the routed shell's paired Back/Forward controls, the window has no
+ * adjacent history control whose stable placement would justify a disabled
+ * Back button.
+ *
+ * Both surfaces read one shared registry (WindowMenuContext), so a mini-app
+ * registers its actions once and they appear wherever it is hosted.
+ *
+ * A window whose app never registers toolbar chrome keeps a flush menu bar/body
+ * (the row renders nothing). But once an app HAS shown chrome, the row stays
+ * mounted and reserves its {@link WindowToolBar.css} min-height even when the
+ * action set momentarily clears — on an action-less sub-route or a loading tick
+ * where the app's `show` conditions are briefly false. Unmounting the row in
+ * those windows would drop a full bar-height out of the flex column and shift
+ * the body up, then back down when the actions re-register (visible flicker).
+ *
+ * An app that wants the row on every route — a blank bar where a route carries
+ * no actions, rather than one that only appears after some route first shows
+ * chrome — reserves it via {@link useWindowToolbarReservation} (the reserved row
+ * still mounts a commit late, once that hook's effect registers, as all window
+ * chrome does).
+ */
+export function WindowToolBar({ canGoBack = false, onGoBack, showHistoryBack = false, } = {}) {
+    const backAction = useWindowBackActionValue();
+    const actions = useWindowTitleBarActions();
+    const reserved = useWindowToolbarReserved();
+    const reservationReleased = useWindowToolbarReservationReleased();
+    const showBack = backAction !== null || (showHistoryBack && canGoBack);
+    const hasChrome = backAction !== null || showHistoryBack || actions.length > 0;
+    // Latch: this window's app has shown toolbar chrome at least once, so keep the
+    // row reserved from here on rather than collapsing it on a transient empty.
+    // Seed from the mount-time value so a window that already has chrome does not
+    // latch during render at all; the render-phase set below catches chrome that
+    // first appears after mount, without an effect's extra committed render pass.
+    const [hasShownChrome, setHasShownChrome] = useState(hasChrome);
+    let latchedChrome = hasShownChrome;
+    if (hasChrome && !latchedChrome) {
+        setHasShownChrome(true);
+        latchedChrome = true;
+    }
+    else if (!hasChrome && reservationReleased && latchedChrome) {
+        setHasShownChrome(false);
+        latchedChrome = false;
+    }
+    if (!hasChrome && !latchedChrome && !reserved) {
+        return null;
+    }
+    const backLabel = backAction?.label ?? "Back";
+    return (_jsxs("div", { "aria-label": "Toolbar", className: "window-toolbar", role: "toolbar", children: [_jsx("div", { className: "window-toolbar-primary", children: showBack && (_jsxs("button", { "aria-label": backLabel, className: "window-toolbar-button", disabled: backAction?.disabled ?? false, title: backLabel, type: "button", onClick: backAction?.onClick ?? onGoBack, children: [_jsx(CaretLeftIcon, { "aria-hidden": true, size: 18 }), _jsx("span", { className: "window-toolbar-back-label", children: backLabel })] })) }), _jsx("div", { className: "window-toolbar-spacer" }), actions.length > 0 && (_jsx("div", { className: "window-toolbar-actions", children: _jsx(WindowTitleBarActionButtons, { actions: actions, className: "window-toolbar-button" }) }))] }));
+}
+//# sourceMappingURL=WindowToolBar.js.map

package/window/WindowToolBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowToolBar.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/window/WindowToolBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mCAAmC,EACnC,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,eAAe,GAAG,KAAK,MAKrB,EAAE;IACJ,MAAM,UAAU,GAAG,wBAAwB,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,wBAAwB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,wBAAwB,EAAE,CAAC;IAC5C,MAAM,mBAAmB,GAAG,mCAAmC,EAAE,CAAC;IAClE,MAAM,QAAQ,GAAG,UAAU,KAAK,IAAI,IAAI,CAAC,eAAe,IAAI,SAAS,CAAC,CAAC;IACvE,MAAM,SAAS,GACb,UAAU,KAAK,IAAI,IAAI,eAAe,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,+EAA+E;IAC/E,4EAA4E;IAC5E,8EAA8E;IAC9E,6EAA6E;IAC7E,8EAA8E;IAC9E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAChE,IAAI,aAAa,GAAG,cAAc,CAAC;IACnC,IAAI,SAAS,IAAI,CAAC,aAAa,EAAE,CAAC;QAChC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,aAAa,GAAG,IAAI,CAAC;IACvB,CAAC;SAAM,IAAI,CAAC,SAAS,IAAI,mBAAmB,IAAI,aAAa,EAAE,CAAC;QAC9D,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,aAAa,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,SAAS,GAAG,UAAU,EAAE,KAAK,IAAI,MAAM,CAAC;IAE9C,OAAO,CACL,6BAAgB,SAAS,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,aACjE,cAAK,SAAS,EAAC,wBAAwB,YACpC,QAAQ,IAAI,CACX,gCACc,SAAS,EACrB,SAAS,EAAC,uBAAuB,EACjC,QAAQ,EAAE,UAAU,EAAE,QAAQ,IAAI,KAAK,EACvC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,QAAQ,aAExC,KAAC,aAAa,yBAAa,IAAI,EAAE,EAAE,GAAI,EACvC,eAAM,SAAS,EAAC,2BAA2B,YAAE,SAAS,GAAQ,IACvD,CACV,GACG,EACN,cAAK,SAAS,EAAC,uBAAuB,GAAG,EACxC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,cAAK,SAAS,EAAC,wBAAwB,YACrC,KAAC,2BAA2B,IAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,uBAAuB,GACjC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { CaretLeftIcon } from \"@phosphor-icons/react/dist/csr/CaretLeft\";\nimport { useState } from \"react\";\nimport \"./WindowToolBar.css\";\nimport { WindowTitleBarActionButtons } from \"./WindowChromeActions\";\nimport {\n  useWindowBackActionValue,\n  useWindowTitleBarActions,\n  useWindowToolbarReservationReleased,\n  useWindowToolbarReserved,\n} from \"./WindowMenuContext\";\n\n/**\n * The window's toolbar row, sitting below the File/View menu bar and above the\n * body. It renders the same actions the routed app bar shows — the registered\n * {@link useWindowBackAction} on the left and {@link useWindowTitleBarAction}\n * icon buttons on the right — so a mini-app hosted in a window gets the same\n * toolbar chrome it gets in the routed shell.\n *\n * The left slot resolves exactly as `RoutedPaneAppBar` does: a registered back\n * action wins, and otherwise the button steps back through the host's own\n * history. `showHistoryBack` turns that fallback on for a window hosting a\n * routed mini-app, whose history is the window's Back stack (windows are not\n * backed by browser history); the fallback is omitted when that stack is empty.\n * Unlike the routed shell's paired Back/Forward controls, the window has no\n * adjacent history control whose stable placement would justify a disabled\n * Back button.\n *\n * Both surfaces read one shared registry (WindowMenuContext), so a mini-app\n * registers its actions once and they appear wherever it is hosted.\n *\n * A window whose app never registers toolbar chrome keeps a flush menu bar/body\n * (the row renders nothing). But once an app HAS shown chrome, the row stays\n * mounted and reserves its {@link WindowToolBar.css} min-height even when the\n * action set momentarily clears — on an action-less sub-route or a loading tick\n * where the app's `show` conditions are briefly false. Unmounting the row in\n * those windows would drop a full bar-height out of the flex column and shift\n * the body up, then back down when the actions re-register (visible flicker).\n *\n * An app that wants the row on every route — a blank bar where a route carries\n * no actions, rather than one that only appears after some route first shows\n * chrome — reserves it via {@link useWindowToolbarReservation} (the reserved row\n * still mounts a commit late, once that hook's effect registers, as all window\n * chrome does).\n */\nexport function WindowToolBar({\n  canGoBack = false,\n  onGoBack,\n  showHistoryBack = false,\n}: {\n  canGoBack?: boolean;\n  onGoBack?: (() => void) | undefined;\n  showHistoryBack?: boolean;\n} = {}) {\n  const backAction = useWindowBackActionValue();\n  const actions = useWindowTitleBarActions();\n  const reserved = useWindowToolbarReserved();\n  const reservationReleased = useWindowToolbarReservationReleased();\n  const showBack = backAction !== null || (showHistoryBack && canGoBack);\n  const hasChrome =\n    backAction !== null || showHistoryBack || actions.length > 0;\n  // Latch: this window's app has shown toolbar chrome at least once, so keep the\n  // row reserved from here on rather than collapsing it on a transient empty.\n  // Seed from the mount-time value so a window that already has chrome does not\n  // latch during render at all; the render-phase set below catches chrome that\n  // first appears after mount, without an effect's extra committed render pass.\n  const [hasShownChrome, setHasShownChrome] = useState(hasChrome);\n  let latchedChrome = hasShownChrome;\n  if (hasChrome && !latchedChrome) {\n    setHasShownChrome(true);\n    latchedChrome = true;\n  } else if (!hasChrome && reservationReleased && latchedChrome) {\n    setHasShownChrome(false);\n    latchedChrome = false;\n  }\n\n  if (!hasChrome && !latchedChrome && !reserved) {\n    return null;\n  }\n\n  const backLabel = backAction?.label ?? \"Back\";\n\n  return (\n    <div aria-label=\"Toolbar\" className=\"window-toolbar\" role=\"toolbar\">\n      <div className=\"window-toolbar-primary\">\n        {showBack && (\n          <button\n            aria-label={backLabel}\n            className=\"window-toolbar-button\"\n            disabled={backAction?.disabled ?? false}\n            title={backLabel}\n            type=\"button\"\n            onClick={backAction?.onClick ?? onGoBack}\n          >\n            <CaretLeftIcon aria-hidden size={18} />\n            <span className=\"window-toolbar-back-label\">{backLabel}</span>\n          </button>\n        )}\n      </div>\n      <div className=\"window-toolbar-spacer\" />\n      {actions.length > 0 && (\n        <div className=\"window-toolbar-actions\">\n          <WindowTitleBarActionButtons\n            actions={actions}\n            className=\"window-toolbar-button\"\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/window/useWindowGeometry.d.ts

@@ -0,0 +1,16 @@
+import { type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+import type { ResizeCorner } from "./WindowResizeHandle.js";
+import { type WindowEntry, type WindowPosition, type WindowSize } from "./WindowStateProvider/index.js";
+import { type LiveGeometry } from "./windowGeometry.js";
+export declare function useWindowGeometry(entry: WindowEntry, maximized: boolean, windowRef: RefObject<HTMLElement | null>): {
+    commit: () => void;
+    hold: (holding: boolean) => void;
+    handlePointerDown: (event: ReactPointerEvent) => void;
+    handleResizePointerDown: (event: ReactPointerEvent, corner: ResizeCorner) => void;
+    position: WindowPosition | null;
+    size: WindowSize | null;
+    grow: (deltaWidth: number, deltaHeight: number) => void;
+    nudge: (deltaX: number, deltaY: number) => void;
+    restore: (saved: LiveGeometry) => void;
+    snapshot: () => LiveGeometry;
+};

package/window/useWindowGeometry.js

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { useWindowLayout } from "./useWindowLayout.js";
+import { useWindowActions, } from "./WindowStateProvider/index.js";
+import { clampWindowPosition, MIN_HEIGHT, MIN_WIDTH, resizeWindowWithinContainer, } from "./windowGeometry.js";
+// Pointer events cover mouse, touch, and pen alike. The live geometry stays in
+// component state while a gesture runs, so only this window re-renders per
+// frame; the gesture's end commits it to the shared window state once.
+function useWindowPointerTracking(windowRef, dragging, resizing, clamp, setPosition, setSize, finish) {
+    useEffect(() => {
+        // Only the pointer that started a gesture drives it, so a second finger
+        // cannot move the window or end the drag.
+        function isGesturePointer(event) {
+            const gesture = resizing.current ?? dragging.current;
+            return gesture !== null && gesture.pointerId === event.pointerId;
+        }
+        function handlePointerMove(event) {
+            if (!isGesturePointer(event)) {
+                return;
+            }
+            if (resizing.current) {
+                const nextFrame = resizeWindowWithinContainer(resizing.current, event.clientX, event.clientY, windowRef.current?.parentElement ?? null);
+                setPosition(nextFrame.position);
+                setSize(nextFrame.size);
+                return;
+            }
+            if (dragging.current) {
+                setPosition(clamp(event.clientX - dragging.current.offsetX, event.clientY - dragging.current.offsetY));
+            }
+        }
+        function handlePointerEnd(event) {
+            if (!isGesturePointer(event)) {
+                return;
+            }
+            dragging.current = null;
+            resizing.current = null;
+            finish();
+        }
+        document.addEventListener("pointermove", handlePointerMove);
+        document.addEventListener("pointerup", handlePointerEnd);
+        document.addEventListener("pointercancel", handlePointerEnd);
+        document.addEventListener("lostpointercapture", handlePointerEnd);
+        return () => {
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerEnd);
+            document.removeEventListener("pointercancel", handlePointerEnd);
+            document.removeEventListener("lostpointercapture", handlePointerEnd);
+        };
+    }, [clamp, dragging, finish, resizing, setPosition, setSize, windowRef]);
+}
+function useLiveGeometry(entry) {
+    const { setGeometry } = useWindowActions();
+    const [position, setPositionState] = useState(null);
+    const [size, setSizeState] = useState(entry.size ?? null);
+    // Mirrors the live state so a gesture's end commits the latest frame.
+    const live = useRef({
+        position: null,
+        size: entry.size ?? null,
+    });
+    const setPosition = useCallback((value) => {
+        live.current.position = value;
+        setPositionState(value);
+    }, []);
+    const setSize = useCallback((value) => {
+        live.current.size = value;
+        setSizeState(value);
+    }, []);
+    const commit = useCallback(() => {
+        const committedPosition = live.current.position;
+        if (committedPosition) {
+            setGeometry(entry.id, {
+                position: committedPosition,
+                size: live.current.size ?? undefined,
+            });
+        }
+    }, [entry.id, setGeometry]);
+    // The committed size is the source of truth between gestures: a restored
+    // layout or host call applies it, and clearing it restores the default size.
+    useEffect(() => {
+        setSize(entry.size ?? null);
+    }, [entry.size, setSize]);
+    return { commit, live, position, setPosition, setSize, size };
+}
+// Stepwise geometry for keyboard move and resize. Steps stay local until the
+// caller commits, like a pointer gesture; restore puts a snapshot back.
+function useSteppedGeometry(windowRef, maximized, live, clamp, setPosition, setSize) {
+    const nudge = useCallback((deltaX, deltaY) => {
+        const current = live.current.position;
+        if (!current || maximized) {
+            return;
+        }
+        setPosition(clamp(current.x + deltaX, current.y + deltaY));
+    }, [clamp, live, maximized, setPosition]);
+    const grow = useCallback((deltaWidth, deltaHeight) => {
+        const element = windowRef.current;
+        const current = live.current.position;
+        if (!element || !current || maximized) {
+            return;
+        }
+        // Step from the size on screen: a requested size below the stylesheet
+        // minimums renders at the minimum, so growing from it would show nothing.
+        const requested = live.current.size;
+        const base = requested
+            ? {
+                height: Math.max(MIN_HEIGHT, requested.height),
+                width: Math.max(MIN_WIDTH, requested.width),
+            }
+            : { height: element.offsetHeight, width: element.offsetWidth };
+        const container = element.parentElement;
+        const maxWidth = container
+            ? container.clientWidth - current.x
+            : Number.POSITIVE_INFINITY;
+        const maxHeight = container
+            ? container.clientHeight - current.y
+            : Number.POSITIVE_INFINITY;
+        setSize({
+            height: Math.max(MIN_HEIGHT, Math.min(base.height + deltaHeight, maxHeight)),
+            width: Math.max(MIN_WIDTH, Math.min(base.width + deltaWidth, maxWidth)),
+        });
+    }, [live, maximized, setSize, windowRef]);
+    const snapshot = useCallback(() => ({ ...live.current }), [live]);
+    const restore = useCallback((saved) => {
+        if (saved.position) {
+            setPosition(saved.position);
+        }
+        setSize(saved.size);
+    }, [setPosition, setSize]);
+    return { grow, nudge, restore, snapshot };
+}
+// Keeps a gesture's pointer events coming to the window even when the pointer
+// passes over an iframe, whose document would otherwise swallow the release.
+// Synthetic events carry no active pointer, so a failed capture is fine.
+function capturePointer(event) {
+    try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }
+    catch {
+        // Not an active pointer; the document listeners still track the gesture.
+    }
+}
+// Starts a drag from the title bar or a resize from a corner. The gesture
+// itself is tracked on the document by useWindowPointerTracking.
+function useGestureStarts(windowRef, maximized, position, dragging, resizing) {
+    const handlePointerDown = useCallback((event) => {
+        // One gesture at a time: a second pointer pressing the title bar or a
+        // corner mid-gesture must not take it over.
+        if (!position || maximized || dragging.current || resizing.current) {
+            return;
+        }
+        dragging.current = {
+            offsetX: event.clientX - position.x,
+            offsetY: event.clientY - position.y,
+            pointerId: event.pointerId,
+        };
+        capturePointer(event);
+    }, [dragging, maximized, position, resizing]);
+    const handleResizePointerDown = useCallback((event, corner) => {
+        if (maximized ||
+            !position ||
+            !windowRef.current ||
+            dragging.current ||
+            resizing.current) {
+            return;
+        }
+        event.stopPropagation();
+        capturePointer(event);
+        const el = windowRef.current;
+        const computed = getComputedStyle(el);
+        const borderBox = computed.boxSizing === "border-box";
+        resizing.current = {
+            corner,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            startLeft: position.x,
+            startTop: position.y,
+            startWidth: parseFloat(computed.width),
+            startHeight: parseFloat(computed.height),
+            borderX: borderBox ? 0 : el.offsetWidth - el.clientWidth,
+            borderY: borderBox ? 0 : el.offsetHeight - el.clientHeight,
+        };
+    }, [maximized, position, resizing, windowRef]);
+    return { handlePointerDown, handleResizePointerDown };
+}
+export function useWindowGeometry(entry, maximized, windowRef) {
+    const { commit, live, position, setPosition, setSize, size } = useLiveGeometry(entry);
+    const dragging = useRef(null);
+    const resizing = useRef(null);
+    // Maximizing or minimizing mid-gesture (a second touch on the title bar's
+    // controls) abandons the gesture: its frames were measured at the normal
+    // size, so the live geometry goes back to the committed geometry.
+    useEffect(() => {
+        if (!(maximized || entry.minimized)) {
+            return;
+        }
+        if (!dragging.current && !resizing.current) {
+            return;
+        }
+        dragging.current = null;
+        resizing.current = null;
+        setSize(entry.size ?? null);
+        if (entry.position) {
+            setPosition(entry.position);
+        }
+    }, [
+        entry.minimized,
+        entry.position,
+        entry.size,
+        maximized,
+        setPosition,
+        setSize,
+    ]);
+    const clamp = useCallback((x, y) => clampWindowPosition(windowRef.current, x, y, live.current.size), [live, windowRef]);
+    const { hold } = useWindowLayout({
+        clamp,
+        commit,
+        dragging,
+        entry,
+        live,
+        resizing,
+        setPosition,
+        size,
+        windowRef,
+    });
+    // A finished gesture commits its geometry, then runs any layout it held
+    // off (a surface resize mid-gesture), even when the geometry did not change.
+    const finishGesture = useCallback(() => {
+        commit();
+        hold(false);
+    }, [commit, hold]);
+    useWindowPointerTracking(windowRef, dragging, resizing, clamp, setPosition, setSize, finishGesture);
+    const { handlePointerDown, handleResizePointerDown } = useGestureStarts(windowRef, maximized, position, dragging, resizing);
+    const stepped = useSteppedGeometry(windowRef, maximized, live, clamp, setPosition, setSize);
+    return {
+        ...stepped,
+        commit,
+        hold,
+        handlePointerDown,
+        handleResizePointerDown,
+        position,
+        size,
+    };
+}
+//# sourceMappingURL=useWindowGeometry.js.map