@tearleads/windowing 0.1.1

package/menu/useContextMenuState.js

@@ -0,0 +1,45 @@
+import { useCallback, useState } from "react";
+/**
+ * Where to open the menu: the pointer, or — when the event carries no pointer
+ * position — the trigger's own box.
+ *
+ * Keyboard activation (Enter/Space on a kebab, the context-menu key on a row)
+ * dispatches with 0,0 client coordinates, which would pin the menu to the
+ * viewport's top-left corner, far from the control that opened it. Anchoring
+ * under the trigger instead matches what the standalone kebab menus already do
+ * (see MiniAppRowActionsButton's callers). A real click at exactly 0,0 lands in
+ * the very corner of the window, where none of these triggers can sit.
+ */
+function getContextMenuPosition(event) {
+    if (event.clientX !== 0 || event.clientY !== 0) {
+        return { x: event.clientX, y: event.clientY };
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: rect.left, y: rect.bottom };
+}
+export function useContextMenuState(params) {
+    const [contextMenu, setContextMenu] = useState(null);
+    const onOpen = params?.onOpen;
+    const openContextMenu = useCallback((event, id) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onOpen?.(id);
+        setContextMenu({
+            id,
+            position: getContextMenuPosition(event),
+        });
+    }, [onOpen]);
+    const closeContextMenu = useCallback(() => setContextMenu(null), []);
+    return {
+        closeContextMenu,
+        contextMenu,
+        openContextMenu,
+    };
+}
+export function useContextMenuPositionState() {
+    const [contextMenu, setContextMenu] = useState(null);
+    const closeContextMenu = useCallback(() => setContextMenu(null), []);
+    const openContextMenuAt = useCallback((position) => setContextMenu(position), []);
+    return { closeContextMenu, contextMenu, openContextMenuAt };
+}
+//# sourceMappingURL=useContextMenuState.js.map

package/menu/useContextMenuState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContextMenuState.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/menu/useContextMenuState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAc/D;;;;;;;;;;GAUG;AACH,SAAS,sBAAsB,CAAC,KAA8B;IAC5D,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,EAAE,CAAC;QAC/C,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;IAChD,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;IACzD,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAe,MAEjD;IACC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC5C,IAAI,CACL,CAAC;IACF,MAAM,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC;IAE9B,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAA8B,EAAE,EAAO,EAAE,EAAE;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;QACb,cAAc,CAAC;YACb,EAAE;YACF,QAAQ,EAAE,sBAAsB,CAAC,KAAK,CAAC;SACxC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO;QACL,gBAAgB;QAChB,WAAW;QACX,eAAe;KAChB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B;IACzC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAC1E,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IACrE,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAsB,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,EACpD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC9D,CAAC","sourcesContent":["import { type MouseEvent, useCallback, useState } from \"react\";\nimport type { MenuPosition } from \"./Menu\";\n\nexport interface ContextMenuState<TId = string> {\n  id: TId;\n  position: MenuPosition;\n}\n\ninterface ContextMenuStateModel<TId = string> {\n  closeContextMenu: () => void;\n  contextMenu: ContextMenuState<TId> | null;\n  openContextMenu: (event: MouseEvent<HTMLElement>, id: TId) => void;\n}\n\n/**\n * Where to open the menu: the pointer, or — when the event carries no pointer\n * position — the trigger's own box.\n *\n * Keyboard activation (Enter/Space on a kebab, the context-menu key on a row)\n * dispatches with 0,0 client coordinates, which would pin the menu to the\n * viewport's top-left corner, far from the control that opened it. Anchoring\n * under the trigger instead matches what the standalone kebab menus already do\n * (see MiniAppRowActionsButton's callers). A real click at exactly 0,0 lands in\n * the very corner of the window, where none of these triggers can sit.\n */\nfunction getContextMenuPosition(event: MouseEvent<HTMLElement>): MenuPosition {\n  if (event.clientX !== 0 || event.clientY !== 0) {\n    return { x: event.clientX, y: event.clientY };\n  }\n\n  const rect = event.currentTarget.getBoundingClientRect();\n  return { x: rect.left, y: rect.bottom };\n}\n\nexport function useContextMenuState<TId = string>(params?: {\n  onOpen?: (id: TId) => void;\n}): ContextMenuStateModel<TId> {\n  const [contextMenu, setContextMenu] = useState<ContextMenuState<TId> | null>(\n    null,\n  );\n  const onOpen = params?.onOpen;\n\n  const openContextMenu = useCallback(\n    (event: MouseEvent<HTMLElement>, id: TId) => {\n      event.preventDefault();\n      event.stopPropagation();\n      onOpen?.(id);\n      setContextMenu({\n        id,\n        position: getContextMenuPosition(event),\n      });\n    },\n    [onOpen],\n  );\n\n  const closeContextMenu = useCallback(() => setContextMenu(null), []);\n\n  return {\n    closeContextMenu,\n    contextMenu,\n    openContextMenu,\n  };\n}\n\nexport function useContextMenuPositionState() {\n  const [contextMenu, setContextMenu] = useState<MenuPosition | null>(null);\n  const closeContextMenu = useCallback(() => setContextMenu(null), []);\n  const openContextMenuAt = useCallback(\n    (position: MenuPosition) => setContextMenu(position),\n    [],\n  );\n\n  return { closeContextMenu, contextMenu, openContextMenuAt };\n}\n"]}

package/menu/useMenuKeyboard.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useMenuKeyboard(menuRef: RefObject<HTMLDivElement | null>, ready: boolean, onClose: () => void): void;

package/menu/useMenuKeyboard.js

@@ -0,0 +1,90 @@
+import { useEffect, useEffectEvent } from "react";
+function nextControl(controls, focused, key) {
+    if (controls.length === 0)
+        return undefined;
+    const index = focused instanceof HTMLElement ? controls.indexOf(focused) : -1;
+    switch (key) {
+        case "ArrowDown":
+            return controls[(index + 1) % controls.length];
+        case "ArrowUp":
+            return controls[index < 0
+                ? controls.length - 1
+                : (index - 1 + controls.length) % controls.length];
+        case "Home":
+            return controls[0];
+        case "End":
+            return controls.at(-1);
+        default:
+            return undefined;
+    }
+}
+export function useMenuKeyboard(menuRef, ready, onClose) {
+    const close = useEffectEvent(onClose);
+    useEffect(() => {
+        const menu = menuRef.current;
+        if (!ready || !menu)
+            return;
+        const trigger = document.activeElement;
+        let dismissedByPointer = false;
+        const items = () => Array.from(menu.querySelectorAll(":is(button, input[type=checkbox]):not(:disabled):not([hidden])"));
+        const focusFirst = () => (items()[0] ?? menu).focus({ preventScroll: true });
+        focusFirst();
+        // Startup and sync can replace an action while its menu is open. Recover
+        // focus only when that replacement dropped it onto the document body.
+        const observer = new MutationObserver(() => {
+            if (!dismissedByPointer && document.activeElement === document.body) {
+                focusFirst();
+            }
+        });
+        observer.observe(menu, { childList: true, subtree: true });
+        function restoreFocus() {
+            if (trigger instanceof HTMLElement && trigger.isConnected) {
+                trigger.focus({ preventScroll: true });
+                return document.activeElement === trigger && trigger !== document.body;
+            }
+            return false;
+        }
+        function handleKeyDown(event) {
+            if (event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            if (!menu?.contains(document.activeElement))
+                return;
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                restoreFocus();
+                close();
+                return;
+            }
+            if (event.key === "Tab") {
+                if (!restoreFocus())
+                    event.preventDefault();
+                close();
+                return;
+            }
+            const next = nextControl(items(), document.activeElement, event.key);
+            if (next) {
+                event.preventDefault();
+                event.stopPropagation();
+                next.focus();
+            }
+        }
+        function handleMouseDown(event) {
+            dismissedByPointer =
+                event.target instanceof Node && !menu?.contains(event.target);
+        }
+        document.addEventListener("mousedown", handleMouseDown, true);
+        document.addEventListener("keydown", handleKeyDown, true);
+        return () => {
+            observer.disconnect();
+            document.removeEventListener("mousedown", handleMouseDown, true);
+            document.removeEventListener("keydown", handleKeyDown, true);
+            if (!dismissedByPointer &&
+                (menu.contains(document.activeElement) ||
+                    document.activeElement === document.body)) {
+                restoreFocus();
+            }
+        };
+    }, [menuRef, ready]);
+}
+//# sourceMappingURL=useMenuKeyboard.js.map

package/menu/useMenuKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuKeyboard.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/menu/useMenuKeyboard.ts"],"names":[],"mappings":"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","sourcesContent":["import { type RefObject, useEffect, useEffectEvent } from \"react\";\n\nfunction nextControl(\n  controls: HTMLElement[],\n  focused: Element | null,\n  key: string,\n) {\n  if (controls.length === 0) return undefined;\n  const index = focused instanceof HTMLElement ? controls.indexOf(focused) : -1;\n  switch (key) {\n    case \"ArrowDown\":\n      return controls[(index + 1) % controls.length];\n    case \"ArrowUp\":\n      return controls[\n        index < 0\n          ? controls.length - 1\n          : (index - 1 + controls.length) % controls.length\n      ];\n    case \"Home\":\n      return controls[0];\n    case \"End\":\n      return controls.at(-1);\n    default:\n      return undefined;\n  }\n}\n\nexport function useMenuKeyboard(\n  menuRef: RefObject<HTMLDivElement | null>,\n  ready: boolean,\n  onClose: () => void,\n) {\n  const close = useEffectEvent(onClose);\n\n  useEffect(() => {\n    const menu = menuRef.current;\n    if (!ready || !menu) return;\n\n    const trigger = document.activeElement;\n    let dismissedByPointer = false;\n    const items = () =>\n      Array.from(\n        menu.querySelectorAll<HTMLElement>(\n          \":is(button, input[type=checkbox]):not(:disabled):not([hidden])\",\n        ),\n      );\n    const focusFirst = () =>\n      (items()[0] ?? menu).focus({ preventScroll: true });\n    focusFirst();\n    // Startup and sync can replace an action while its menu is open. Recover\n    // focus only when that replacement dropped it onto the document body.\n    const observer = new MutationObserver(() => {\n      if (!dismissedByPointer && document.activeElement === document.body) {\n        focusFirst();\n      }\n    });\n    observer.observe(menu, { childList: true, subtree: true });\n\n    function restoreFocus() {\n      if (trigger instanceof HTMLElement && trigger.isConnected) {\n        trigger.focus({ preventScroll: true });\n        return document.activeElement === trigger && trigger !== document.body;\n      }\n      return false;\n    }\n\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.altKey || event.ctrlKey || event.metaKey) return;\n      if (!menu?.contains(document.activeElement)) return;\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        event.stopPropagation();\n        restoreFocus();\n        close();\n        return;\n      }\n      if (event.key === \"Tab\") {\n        if (!restoreFocus()) event.preventDefault();\n        close();\n        return;\n      }\n      const next = nextControl(items(), document.activeElement, event.key);\n      if (next) {\n        event.preventDefault();\n        event.stopPropagation();\n        next.focus();\n      }\n    }\n\n    function handleMouseDown(event: MouseEvent) {\n      dismissedByPointer =\n        event.target instanceof Node && !menu?.contains(event.target);\n    }\n\n    document.addEventListener(\"mousedown\", handleMouseDown, true);\n    document.addEventListener(\"keydown\", handleKeyDown, true);\n    return () => {\n      observer.disconnect();\n      document.removeEventListener(\"mousedown\", handleMouseDown, true);\n      document.removeEventListener(\"keydown\", handleKeyDown, true);\n      if (\n        !dismissedByPointer &&\n        (menu.contains(document.activeElement) ||\n          document.activeElement === document.body)\n      ) {\n        restoreFocus();\n      }\n    };\n  }, [menuRef, ready]);\n}\n"]}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@tearleads/windowing",
+  "version": "0.1.1",
+  "description": "App-agnostic window management for React: window state, window chrome, and the menu and sidebar primitives it renders with.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./*.css": "./*.css"
+  },
+  "sideEffects": [
+    "*.css",
+    "./index.js"
+  ],
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10"
+  }
+}

package/sidebar/SidebarResize.css

@@ -0,0 +1,31 @@
+.sidebar-resize-handle {
+  position: relative;
+  z-index: 1;
+  align-self: stretch;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  cursor: col-resize;
+  background: transparent;
+  touch-action: none;
+}
+
+.sidebar-resize-handle::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--color-dark);
+  content: "";
+  opacity: var(--opacity-disabled);
+}
+
+.sidebar-resize-handle:hover::before,
+.sidebar-resize-handle:focus-visible::before {
+  width: 2px;
+  opacity: var(--opacity-subtle);
+}
+
+.sidebar-resize-handle:focus-visible {
+  outline: none;
+}

package/sidebar/SidebarResize.d.ts

@@ -0,0 +1,18 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+export declare function useSidebarResize({ defaultWidth, initialWidth, }: {
+    defaultWidth: number;
+    initialWidth?: number | null;
+}): {
+    handleKeyDown: (event: ReactKeyboardEvent<HTMLHRElement>) => void;
+    handlePointerDown: (event: ReactPointerEvent<HTMLHRElement>) => void;
+    resolvedWidth: number;
+    sidebarRef: RefObject<HTMLDivElement | null>;
+    width: number | null;
+};
+export declare function SidebarResizeHandle({ className, controls, currentWidth, onKeyDown, onPointerDown, }: {
+    className: string;
+    controls?: string | undefined;
+    currentWidth: number;
+    onKeyDown: (event: ReactKeyboardEvent<HTMLHRElement>) => void;
+    onPointerDown: (event: ReactPointerEvent<HTMLHRElement>) => void;
+}): import("react").JSX.Element;

package/sidebar/SidebarResize.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import "./SidebarResize.css";
+const MIN_WIDTH = 80;
+const MAX_WIDTH = 400;
+const KEYBOARD_RESIZE_STEP = 10;
+function clampSidebarWidth(width) {
+    return Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, width));
+}
+function useSidebarDragEffect({ active, draggingRef, endDrag, setWidth, }) {
+    useEffect(() => {
+        if (!active) {
+            return;
+        }
+        function handlePointerMove(event) {
+            const dragState = draggingRef.current;
+            if (!dragState || event.pointerId !== dragState.pointerId) {
+                return;
+            }
+            const dx = event.clientX - dragState.startX;
+            setWidth(clampSidebarWidth(dragState.startWidth + dx));
+        }
+        function handlePointerEnd(event) {
+            if (event.pointerId === draggingRef.current?.pointerId) {
+                endDrag();
+            }
+        }
+        document.addEventListener("pointermove", handlePointerMove);
+        document.addEventListener("pointerup", handlePointerEnd);
+        document.addEventListener("pointercancel", handlePointerEnd);
+        return () => {
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerEnd);
+            document.removeEventListener("pointercancel", handlePointerEnd);
+            endDrag();
+        };
+    }, [active, draggingRef, endDrag, setWidth]);
+}
+export function useSidebarResize({ defaultWidth, initialWidth = defaultWidth, }) {
+    const [width, setWidth] = useState(initialWidth);
+    const [isDragging, setIsDragging] = useState(false);
+    const sidebarRef = useRef(null);
+    const draggingRef = useRef(null);
+    const readCurrentWidth = useCallback(() => {
+        if (width !== null) {
+            return width;
+        }
+        const measuredWidth = sidebarRef.current?.getBoundingClientRect().width;
+        return measuredWidth && measuredWidth > 0
+            ? clampSidebarWidth(measuredWidth)
+            : defaultWidth;
+    }, [defaultWidth, width]);
+    const endDrag = useCallback(() => {
+        if (!draggingRef.current) {
+            return;
+        }
+        draggingRef.current = null;
+        setIsDragging(false);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+    }, []);
+    useSidebarDragEffect({
+        active: isDragging,
+        draggingRef,
+        endDrag,
+        setWidth,
+    });
+    const handlePointerDown = useCallback((event) => {
+        if (event.button !== 0 || !event.isPrimary) {
+            return;
+        }
+        event.preventDefault();
+        const startWidth = readCurrentWidth();
+        draggingRef.current = {
+            pointerId: event.pointerId,
+            startWidth,
+            startX: event.clientX,
+        };
+        setWidth(startWidth);
+        setIsDragging(true);
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+    }, [readCurrentWidth]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "Home") {
+            event.preventDefault();
+            setWidth(MIN_WIDTH);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setWidth(MAX_WIDTH);
+            return;
+        }
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+            return;
+        }
+        event.preventDefault();
+        const direction = event.key === "ArrowLeft" ? -1 : 1;
+        const multiplier = event.shiftKey ? 5 : 1;
+        setWidth((currentWidth) => clampSidebarWidth((currentWidth ?? readCurrentWidth()) +
+            direction * KEYBOARD_RESIZE_STEP * multiplier));
+    }, [readCurrentWidth]);
+    return {
+        handleKeyDown,
+        handlePointerDown,
+        resolvedWidth: readCurrentWidth(),
+        sidebarRef,
+        width,
+    };
+}
+export function SidebarResizeHandle({ className, controls, currentWidth, onKeyDown, onPointerDown, }) {
+    return (_jsx("hr", { "aria-controls": controls, "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemax": MAX_WIDTH, "aria-valuemin": MIN_WIDTH, "aria-valuenow": currentWidth, className: `sidebar-resize-handle ${className}`, onKeyDown: onKeyDown, onPointerDown: onPointerDown, tabIndex: 0 }));
+}
+//# sourceMappingURL=SidebarResize.js.map

package/sidebar/SidebarResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarResize.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/sidebar/SidebarResize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAML,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG,EAAE,CAAC;AACrB,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAQhC,SAAS,iBAAiB,CAAC,KAAa;IACtC,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,SAAS,oBAAoB,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,GAMT;IACC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,SAAS,iBAAiB,CAAC,KAAmB;YAC5C,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC;YACtC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,EAAE,CAAC;gBAC1D,OAAO;YACT,CAAC;YAED,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC;YAC5C,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC;QACzD,CAAC;QAED,SAAS,gBAAgB,CAAC,KAAmB;YAC3C,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC;gBACvD,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC;QACzD,QAAQ,CAAC,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;QAC7D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;YAC/D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC;YAC5D,QAAQ,CAAC,mBAAmB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;YAChE,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,GAAG,YAAY,GAI5B;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,YAAY,CAAC,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;QACxE,OAAO,aAAa,IAAI,aAAa,GAAG,CAAC;YACvC,CAAC,CAAC,iBAAiB,CAAC,aAAa,CAAC;YAClC,CAAC,CAAC,YAAY,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;QAChC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,oBAAoB,CAAC;QACnB,MAAM,EAAE,UAAU;QAClB,WAAW;QACX,OAAO;QACP,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAuC,EAAE,EAAE;QAC1C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YAC3C,OAAO;QACT,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,UAAU,GAAG,gBAAgB,EAAE,CAAC;QACtC,WAAW,CAAC,OAAO,GAAG;YACpB,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,UAAU;YACV,MAAM,EAAE,KAAK,CAAC,OAAO;SACtB,CAAC;QACF,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC;QAC1C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;IAC1C,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAwC,EAAE,EAAE;QAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,OAAO;QACT,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CACxB,iBAAiB,CACf,CAAC,YAAY,IAAI,gBAAgB,EAAE,CAAC;YAClC,SAAS,GAAG,oBAAoB,GAAG,UAAU,CAChD,CACF,CAAC;IACJ,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,OAAO;QACL,aAAa;QACb,iBAAiB;QACjB,aAAa,EAAE,gBAAgB,EAAE;QACjC,UAAU;QACV,KAAK;KACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,aAAa,GAOd;IACC,OAAO,CACL,8BACiB,QAAQ,gBACZ,gBAAgB,sBACV,UAAU,mBACZ,SAAS,mBACT,SAAS,mBACT,YAAY,EAC3B,SAAS,EAAE,yBAAyB,SAAS,EAAE,EAC/C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,CAAC,GACX,CACH,CAAC;AACJ,CAAC","sourcesContent":["import {\n  type Dispatch,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport \"./SidebarResize.css\";\n\nconst MIN_WIDTH = 80;\nconst MAX_WIDTH = 400;\nconst KEYBOARD_RESIZE_STEP = 10;\n\ninterface DragState {\n  pointerId: number;\n  startWidth: number;\n  startX: number;\n}\n\nfunction clampSidebarWidth(width: number) {\n  return Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, width));\n}\n\nfunction useSidebarDragEffect({\n  active,\n  draggingRef,\n  endDrag,\n  setWidth,\n}: {\n  active: boolean;\n  draggingRef: RefObject<DragState | null>;\n  endDrag: () => void;\n  setWidth: Dispatch<SetStateAction<number | null>>;\n}) {\n  useEffect(() => {\n    if (!active) {\n      return;\n    }\n\n    function handlePointerMove(event: PointerEvent) {\n      const dragState = draggingRef.current;\n      if (!dragState || event.pointerId !== dragState.pointerId) {\n        return;\n      }\n\n      const dx = event.clientX - dragState.startX;\n      setWidth(clampSidebarWidth(dragState.startWidth + dx));\n    }\n\n    function handlePointerEnd(event: PointerEvent) {\n      if (event.pointerId === draggingRef.current?.pointerId) {\n        endDrag();\n      }\n    }\n\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    document.addEventListener(\"pointerup\", handlePointerEnd);\n    document.addEventListener(\"pointercancel\", handlePointerEnd);\n    return () => {\n      document.removeEventListener(\"pointermove\", handlePointerMove);\n      document.removeEventListener(\"pointerup\", handlePointerEnd);\n      document.removeEventListener(\"pointercancel\", handlePointerEnd);\n      endDrag();\n    };\n  }, [active, draggingRef, endDrag, setWidth]);\n}\n\nexport function useSidebarResize({\n  defaultWidth,\n  initialWidth = defaultWidth,\n}: {\n  defaultWidth: number;\n  initialWidth?: number | null;\n}) {\n  const [width, setWidth] = useState<number | null>(initialWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const sidebarRef = useRef<HTMLDivElement>(null);\n  const draggingRef = useRef<DragState | null>(null);\n\n  const readCurrentWidth = useCallback(() => {\n    if (width !== null) {\n      return width;\n    }\n\n    const measuredWidth = sidebarRef.current?.getBoundingClientRect().width;\n    return measuredWidth && measuredWidth > 0\n      ? clampSidebarWidth(measuredWidth)\n      : defaultWidth;\n  }, [defaultWidth, width]);\n\n  const endDrag = useCallback(() => {\n    if (!draggingRef.current) {\n      return;\n    }\n\n    draggingRef.current = null;\n    setIsDragging(false);\n    document.body.style.cursor = \"\";\n    document.body.style.userSelect = \"\";\n  }, []);\n\n  useSidebarDragEffect({\n    active: isDragging,\n    draggingRef,\n    endDrag,\n    setWidth,\n  });\n\n  const handlePointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLHRElement>) => {\n      if (event.button !== 0 || !event.isPrimary) {\n        return;\n      }\n\n      event.preventDefault();\n      const startWidth = readCurrentWidth();\n      draggingRef.current = {\n        pointerId: event.pointerId,\n        startWidth,\n        startX: event.clientX,\n      };\n      setWidth(startWidth);\n      setIsDragging(true);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [readCurrentWidth],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLHRElement>) => {\n      if (event.key === \"Home\") {\n        event.preventDefault();\n        setWidth(MIN_WIDTH);\n        return;\n      }\n\n      if (event.key === \"End\") {\n        event.preventDefault();\n        setWidth(MAX_WIDTH);\n        return;\n      }\n\n      if (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") {\n        return;\n      }\n\n      event.preventDefault();\n      const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n      const multiplier = event.shiftKey ? 5 : 1;\n      setWidth((currentWidth) =>\n        clampSidebarWidth(\n          (currentWidth ?? readCurrentWidth()) +\n            direction * KEYBOARD_RESIZE_STEP * multiplier,\n        ),\n      );\n    },\n    [readCurrentWidth],\n  );\n\n  return {\n    handleKeyDown,\n    handlePointerDown,\n    resolvedWidth: readCurrentWidth(),\n    sidebarRef,\n    width,\n  };\n}\n\nexport function SidebarResizeHandle({\n  className,\n  controls,\n  currentWidth,\n  onKeyDown,\n  onPointerDown,\n}: {\n  className: string;\n  controls?: string | undefined;\n  currentWidth: number;\n  onKeyDown: (event: ReactKeyboardEvent<HTMLHRElement>) => void;\n  onPointerDown: (event: ReactPointerEvent<HTMLHRElement>) => void;\n}) {\n  return (\n    <hr\n      aria-controls={controls}\n      aria-label=\"Resize sidebar\"\n      aria-orientation=\"vertical\"\n      aria-valuemax={MAX_WIDTH}\n      aria-valuemin={MIN_WIDTH}\n      aria-valuenow={currentWidth}\n      className={`sidebar-resize-handle ${className}`}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n      tabIndex={0}\n    />\n  );\n}\n"]}

package/tokens.css

@@ -0,0 +1,63 @@
+/*
+ * Defaults for every design token the window chrome reads, at zero
+ * specificity: a host's own values (any :root rule, a theme, an app-scoped
+ * block) always win, and a page that defines none still gets a complete light
+ * window. The values match Tearleads' light theme.
+ */
+:where(:root) {
+  --color-dark: #333;
+  --color-light: #fff;
+  --color-muted: #eee;
+  --color-danger: #b00020;
+  --color-hairline: color-mix(in srgb, var(--color-dark) 18%, transparent);
+  --emphasis-surface: var(--color-dark);
+  --emphasis-text: var(--color-light);
+
+  --border-width: 1px;
+  --border-strong-color: var(--color-dark);
+  --border-strong: var(--border-width) solid var(--border-strong-color);
+
+  --space-2xs: 0.125rem;
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --font-size-sm: 0.9rem;
+  --control-height: 2rem;
+  --control-icon-size: 1rem;
+  --menu-item-padding: var(--space-sm) var(--space-md);
+
+  --opacity-disabled: 0.5;
+  --opacity-icon: 0.6;
+  --opacity-subtle: 0.85;
+  --scrollbar-gutter: auto;
+  --transition: 0.18s ease;
+
+  --window-bar-line-height: 1.25em;
+  --window-bar-block-padding: var(--space-xs);
+  --window-bar-inline-padding: var(--space-sm);
+  --window-bar-height: calc(
+    var(--window-bar-line-height) +
+    (var(--window-bar-block-padding) * 2)
+  );
+  --window-bar-padding: var(--window-bar-block-padding)
+    var(--window-bar-inline-padding);
+  --tearleads-window-titlebar-background: var(--color-dark);
+  --tearleads-window-titlebar-text: var(--color-light);
+
+  --app-radius-control: 0.375rem;
+  --app-radius-surface: 0.75rem;
+  --app-hover-surface: color-mix(
+    in srgb,
+    var(--color-dark) 8%,
+    var(--color-light)
+  );
+  --app-shadow-surface: 0 0.5rem 2rem rgb(0 0 0 / 14%);
+  --app-shadow-window:
+    0 1rem 3rem rgb(0 0 0 / 12%), 0 0.25rem 0.75rem rgb(0 0 0 / 8%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(:root) {
+    --transition: 0s;
+  }
+}

package/window/CurrentWindowContext.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from "react";
+interface CurrentWindowContextValue {
+    close: () => void;
+    id: string;
+    overlayHost: HTMLElement | null;
+    showStatusMessage: (message: string) => void;
+    /**
+     * Hide the window's toolbar row until the returned release is called. Refcounted,
+     * so overlapping suppressions restore the row only once the last one releases.
+     */
+    suppressToolbar: () => () => void;
+}
+export declare function CurrentWindowProvider({ children, close, id, overlayHost, showStatusMessage, suppressToolbar, }: PropsWithChildren<CurrentWindowContextValue>): import("react").JSX.Element;
+export declare function useCurrentWindow(): CurrentWindowContextValue | null;
+/**
+ * Drop the host window's toolbar row while `active`.
+ *
+ * A full-pane overlay (the image viewer) carries its own toolbar, and the
+ * window's row would otherwise stack directly above it — two toolbars, one of
+ * them driving chrome the overlay covers. Outside a window this is inert, since
+ * the routed shell's overlays cover the whole viewport already.
+ *
+ * Suppressing in a layout effect keeps the row from being painted alongside the
+ * overlay's own toolbar for a frame and then resizing the pane out from under it.
+ */
+export declare function useSuppressWindowToolbar(active: boolean): void;
+export {};

package/window/CurrentWindowContext.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo, } from "react";
+const CurrentWindowContext = createContext(null);
+export function CurrentWindowProvider({ children, close, id, overlayHost, showStatusMessage, suppressToolbar, }) {
+    const value = useMemo(() => ({ close, id, overlayHost, showStatusMessage, suppressToolbar }), [close, id, overlayHost, showStatusMessage, suppressToolbar]);
+    return (_jsx(CurrentWindowContext.Provider, { value: value, children: children }));
+}
+export function useCurrentWindow() {
+    return useContext(CurrentWindowContext);
+}
+/**
+ * Drop the host window's toolbar row while `active`.
+ *
+ * A full-pane overlay (the image viewer) carries its own toolbar, and the
+ * window's row would otherwise stack directly above it — two toolbars, one of
+ * them driving chrome the overlay covers. Outside a window this is inert, since
+ * the routed shell's overlays cover the whole viewport already.
+ *
+ * Suppressing in a layout effect keeps the row from being painted alongside the
+ * overlay's own toolbar for a frame and then resizing the pane out from under it.
+ */
+export function useSuppressWindowToolbar(active) {
+    const suppressToolbar = useCurrentWindow()?.suppressToolbar;
+    useLayoutEffect(() => {
+        if (!active || !suppressToolbar) {
+            return;
+        }
+        return suppressToolbar();
+    }, [active, suppressToolbar]);
+}
+//# sourceMappingURL=CurrentWindowContext.js.map

package/window/CurrentWindowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrentWindowContext.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/window/CurrentWindowContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAEb,UAAU,EACV,eAAe,EACf,OAAO,GACR,MAAM,OAAO,CAAC;AAcf,MAAM,oBAAoB,GAAG,aAAa,CACxC,IAAI,CACL,CAAC;AAEF,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,EAAE,EACF,WAAW,EACX,iBAAiB,EACjB,eAAe,GAC8B;IAC7C,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC,EACtE,CAAC,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAC7D,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACxC,QAAQ,GACqB,CACjC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC1C,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,wBAAwB,CAAC,MAAe;IACtD,MAAM,eAAe,GAAG,gBAAgB,EAAE,EAAE,eAAe,CAAC;IAE5D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QACD,OAAO,eAAe,EAAE,CAAC;IAC3B,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;AAChC,CAAC","sourcesContent":["import {\n  createContext,\n  type PropsWithChildren,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n} from \"react\";\n\ninterface CurrentWindowContextValue {\n  close: () => void;\n  id: string;\n  overlayHost: HTMLElement | null;\n  showStatusMessage: (message: string) => void;\n  /**\n   * Hide the window's toolbar row until the returned release is called. Refcounted,\n   * so overlapping suppressions restore the row only once the last one releases.\n   */\n  suppressToolbar: () => () => void;\n}\n\nconst CurrentWindowContext = createContext<CurrentWindowContextValue | null>(\n  null,\n);\n\nexport function CurrentWindowProvider({\n  children,\n  close,\n  id,\n  overlayHost,\n  showStatusMessage,\n  suppressToolbar,\n}: PropsWithChildren<CurrentWindowContextValue>) {\n  const value = useMemo(\n    () => ({ close, id, overlayHost, showStatusMessage, suppressToolbar }),\n    [close, id, overlayHost, showStatusMessage, suppressToolbar],\n  );\n\n  return (\n    <CurrentWindowContext.Provider value={value}>\n      {children}\n    </CurrentWindowContext.Provider>\n  );\n}\n\nexport function useCurrentWindow() {\n  return useContext(CurrentWindowContext);\n}\n\n/**\n * Drop the host window's toolbar row while `active`.\n *\n * A full-pane overlay (the image viewer) carries its own toolbar, and the\n * window's row would otherwise stack directly above it — two toolbars, one of\n * them driving chrome the overlay covers. Outside a window this is inert, since\n * the routed shell's overlays cover the whole viewport already.\n *\n * Suppressing in a layout effect keeps the row from being painted alongside the\n * overlay's own toolbar for a frame and then resizing the pane out from under it.\n */\nexport function useSuppressWindowToolbar(active: boolean) {\n  const suppressToolbar = useCurrentWindow()?.suppressToolbar;\n\n  useLayoutEffect(() => {\n    if (!active || !suppressToolbar) {\n      return;\n    }\n    return suppressToolbar();\n  }, [active, suppressToolbar]);\n}\n"]}

package/window/Window.css

@@ -0,0 +1,32 @@
+/*
+ * The chrome's sizes assume border-box (a maximized window fills its surface at
+ * 100%, border included), and box-sizing does not inherit, so the window sets
+ * it on everything it renders. At zero specificity, any host rule wins.
+ */
+:where(.window),
+:where(.window) :where(*) {
+  box-sizing: border-box;
+}
+
+.window {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 900px;
+  height: 600px;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 200px;
+  min-height: 100px;
+  background: var(--color-light);
+  border: var(--border-strong);
+  border-radius: var(--app-radius-surface);
+  box-shadow: var(--app-shadow-window);
+}
+
+.window--maximized {
+  min-width: unset;
+  min-height: unset;
+  border-radius: 0;
+  box-shadow: none;
+}

package/window/Window.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType, type PropsWithChildren } from "react";
+import { type WindowEntry } from "./WindowStateProvider/index.js";
+export type WindowContentBoundary = ComponentType<PropsWithChildren<{
+    entry: WindowEntry;
+}>>;
+interface WindowProps {
+    ContentBoundary?: WindowContentBoundary | undefined;
+    windowId: string;
+}
+export declare function Window({ ContentBoundary, windowId }: WindowProps): import("react").JSX.Element | null;
+export {};