@tearleads/windowing 0.1.1

package/README.md

@@ -0,0 +1,155 @@
+# @tearleads/windowing
+
+App-agnostic window management for React: window state (open, focus order,
+minimize/maximize, a per-window route and Back stack), window chrome (title
+bar, menu bar, toolbar, sidebar, status bar, resize handles), and the menu and
+sidebar primitives that chrome renders with.
+
+The package knows nothing about the applications that run inside its windows.
+It depends only on React, react-dom, and Phosphor icons.
+
+## Composing a desktop
+
+```tsx
+import {
+  useWindowActions,
+  useWindowStateData,
+  Window,
+  WindowStateProvider,
+} from "@tearleads/windowing";
+
+function Desktop() {
+  const { windows } = useWindowStateData();
+  return (
+    <div style={{ position: "relative", height: "100%" }}>
+      {windows.map((entry) => (
+        <Window key={entry.id} windowId={entry.id} />
+      ))}
+    </div>
+  );
+}
+
+function OpenNotes() {
+  const { create } = useWindowActions();
+  return (
+    <button
+      type="button"
+      onClick={() => create("Notes", 200, 160, NotesApp, { appId: "notes" })}
+    >
+      Notes
+    </button>
+  );
+}
+
+<WindowStateProvider>
+  <OpenNotes />
+  <Desktop />
+</WindowStateProvider>;
+```
+
+Windows are absolutely positioned and clamp to their parent element, so the
+desktop surface must be a positioned container.
+
+## Geometry and input
+
+Windows move by their title bar and resize by their corners with pointer
+events, so mouse, touch, and pen all work. While a gesture runs the geometry
+stays local to that window; when it ends, the window commits its `position` and
+`size` (surface-relative) to its `WindowEntry`. The first layout commits too,
+so `position` always reflects where the window sits. Without `size` a window
+takes its stylesheet's default size.
+
+To save a layout, read `position` and `size` from `useWindowStateData()`. To
+restore one, pass them back as `create` options, which take precedence over
+`create`'s viewport `x`/`y`. `setGeometry(id, { position, size })` moves or
+resizes a window programmatically.
+
+## Slots
+
+- **`ContentBoundary`** — `Window` renders a window's component inside this
+  optional wrapper, which receives the `WindowEntry`. Hosts use it to give
+  content app-specific context (a route provider, an error boundary) without the
+  window layer knowing about apps. Tearleads fills it in
+  `packages/app/src/mini-apps/MiniAppWindow.tsx`.
+- **`appId`** — an opaque string a host attaches when creating a window. The
+  window layer only stores and compares it; the host interprets it.
+
+Windows register their own menu items, title-bar actions, a Back action, and a
+sidebar through the `useWindow*` hooks, from inside the window's content.
+
+## Styles
+
+Each component imports its own stylesheet, so a bundler that handles CSS imports
+picks them up. Stylesheets are also exported by path (for example
+`@tearleads/windowing/window/WindowTitleBar.css`) for surfaces that reuse the
+chrome's look without rendering a window.
+
+The stylesheets read design tokens (colors, spacing, radii, shadows, and the
+`--window-bar-*` and `--tearleads-window-titlebar-*` chrome tokens). The package
+entry imports `tokens.css`, which defines every one of them under
+`:where(:root)`, so a page that defines none still renders a complete light
+window. That rule has zero specificity: any `:root` rule, theme, or scoped block
+the host writes overrides it. Tearleads overrides them with its own themes in
+`packages/ui/src/styles.css` and `packages/app/src/shell/layout/AppChrome.css`.
+
+Windows and menus lay out `border-box`, the box model their sizes assume. Since
+`box-sizing` does not inherit, a zero-specificity rule sets it on the window or
+menu and everything inside, including window content; any host rule overrides
+it.
+
+## Publishing
+
+Inside this workspace the package exports its TypeScript source. The npm
+package is built separately, into `dist/`, with its own generated manifest:
+
+```sh
+bun run --cwd packages/windowing package        # build dist/
+bun run --cwd packages/windowing package:smoke  # pack, install, render, typecheck, and bundle outside the workspace
+```
+
+The built package is ES modules with declarations and source maps, plus every
+stylesheet. React and react-dom are peer dependencies from 19.2, the first
+release with `useEffectEvent`; Phosphor icons is its one dependency. The
+stylesheets and the entry module (which imports `tokens.css`) are declared side
+effects, so bundlers that trust `sideEffects` keep the token defaults.
+`src/publishedPackage.test.ts` checks the built manifest and that no module
+reaches outside the package, so a new workspace import fails the package's tests
+rather than the publish. The declarations drop the stylesheet imports tsc keeps
+in them, which a consumer's typecheck could not resolve. The smoke script
+installs the lowest React the peer range admits, typechecks against the
+declarations with TypeScript's defaults, and bundles a named import with webpack.
+
+Publish from the repository root using an account that owns the `@tearleads`
+npm scope:
+
+```sh
+npm login --registry https://registry.npmjs.org
+bun run publish:npm:dry-run
+bun run publish:npm
+```
+
+`scripts/publishNpmModules.sh` publishes every Tearleads module required for the
+standalone windowing extraction. That set is only `@tearleads/windowing`: it has
+no workspace dependencies, and its React peers and Phosphor dependency already
+exist on npm. `scripts/publishWindowing.sh` is the package-specific command,
+also available as `bun run --cwd packages/windowing publish:npm`.
+
+Both commands rebuild into a fresh temporary directory, publish its generated
+consumer manifest with public access to `https://registry.npmjs.org`, and remove
+the directory on success or failure. A temporary `.npmrc` overrides any
+scope-specific registry without changing your npm configuration. A dry run
+builds and previews the same package without uploading. They accept `--dry-run`,
+`--tag <tag>` (default `latest`), and `--otp <code>`; for example:
+
+```sh
+bun run publish:npm --dry-run --tag next
+bun run publish:npm --tag next --otp 123456
+```
+
+Run `package:smoke` separately before a release to verify the packed package in
+an external consumer. It needs the network to install the consumer dependencies.
+
+`ship-pr` bumps changed workspace packages before review and merge; the generated
+manifest copies `version` from `package.json`. For a release outside that flow,
+bump the version yourself before publishing. The
+manifest declares `"license": "UNLICENSED"` until a license is chosen.

package/createRequiredContext.d.ts

@@ -0,0 +1,16 @@
+import { type Context } from "react";
+export interface RequiredContext<T> {
+    /** The raw context, for rendering `context.Provider` in the owning provider. */
+    context: Context<T | null>;
+    /** Non-throwing twin for surfaces that may render outside the provider. */
+    useOptional: () => T | null;
+    /** Reads the context value, throwing `errorMessage` without a provider. */
+    useRequired: () => T;
+}
+/**
+ * A context whose value is mandatory for consumers. Callers export
+ * `useRequired`/`useOptional` under their own hook names, so every
+ * provider-guard hook shares this one accessor pair instead of restating the
+ * `useContext`-then-throw boilerplate.
+ */
+export declare function createRequiredContext<T>(errorMessage: string): RequiredContext<T>;

package/createRequiredContext.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react";
+/**
+ * A context whose value is mandatory for consumers. Callers export
+ * `useRequired`/`useOptional` under their own hook names, so every
+ * provider-guard hook shares this one accessor pair instead of restating the
+ * `useContext`-then-throw boilerplate.
+ */
+export function createRequiredContext(errorMessage) {
+    const context = createContext(null);
+    function useOptional() {
+        return useContext(context);
+    }
+    function useRequired() {
+        const value = useContext(context);
+        if (value === null) {
+            throw new Error(errorMessage);
+        }
+        return value;
+    }
+    return { context, useOptional, useRequired };
+}
+//# sourceMappingURL=createRequiredContext.js.map

package/createRequiredContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRequiredContext.js","sourceRoot":"","sources":["../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/createRequiredContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWhE;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,YAAoB;IAEpB,MAAM,OAAO,GAAG,aAAa,CAAW,IAAI,CAAC,CAAC;IAE9C,SAAS,WAAW;QAClB,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED,SAAS,WAAW;QAClB,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;QAClC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC/C,CAAC","sourcesContent":["import { type Context, createContext, useContext } from \"react\";\n\nexport interface RequiredContext<T> {\n  /** The raw context, for rendering `context.Provider` in the owning provider. */\n  context: Context<T | null>;\n  /** Non-throwing twin for surfaces that may render outside the provider. */\n  useOptional: () => T | null;\n  /** Reads the context value, throwing `errorMessage` without a provider. */\n  useRequired: () => T;\n}\n\n/**\n * A context whose value is mandatory for consumers. Callers export\n * `useRequired`/`useOptional` under their own hook names, so every\n * provider-guard hook shares this one accessor pair instead of restating the\n * `useContext`-then-throw boilerplate.\n */\nexport function createRequiredContext<T>(\n  errorMessage: string,\n): RequiredContext<T> {\n  const context = createContext<T | null>(null);\n\n  function useOptional(): T | null {\n    return useContext(context);\n  }\n\n  function useRequired(): T {\n    const value = useContext(context);\n    if (value === null) {\n      throw new Error(errorMessage);\n    }\n    return value;\n  }\n\n  return { context, useOptional, useRequired };\n}\n"]}

package/index.d.ts

@@ -0,0 +1,13 @@
+export { createRequiredContext, type RequiredContext, } from "./createRequiredContext.js";
+export { Menu, type MenuPosition } from "./menu/Menu.js";
+export { MenuItem, type MenuItemProps } from "./menu/MenuItem.js";
+export { type ContextMenuState, useContextMenuPositionState, useContextMenuState, } from "./menu/useContextMenuState.js";
+export { SidebarResizeHandle, useSidebarResize } from "./sidebar/SidebarResize.js";
+export { CurrentWindowProvider, useCurrentWindow, useSuppressWindowToolbar, } from "./window/CurrentWindowContext.js";
+export { Window, type WindowContentBoundary } from "./window/Window.js";
+export { WindowTitleBarActionButtons } from "./window/WindowChromeActions.js";
+export { WindowCloseButton } from "./window/WindowCloseButton.js";
+export { useWindowBackAction, useWindowBackActionValue, useWindowFileMenuItem, useWindowRefreshMenuItem, useWindowRefreshMenuItemValue, useWindowTitleBarAction, useWindowTitleBarActions, useWindowToolbarReservation, useWindowViewMenuItem, WindowMenuProvider, } from "./window/WindowMenuContext.js";
+export { hasWindowSidebar, useRegisteredWindowSidebar, useWindowSidebar, WindowSidebarProvider, } from "./window/WindowSidebarContext.js";
+export { findTopWindow, useWindowActions, useWindowStateData, type WindowCreateOptions, type WindowEntry, type WindowGeometry, type WindowPosition, type WindowSize, type WindowStateActions, type WindowStateData, WindowStateProvider, } from "./window/WindowStateProvider/index.js";
+export { WindowToolBar } from "./window/WindowToolBar.js";

package/index.js

@@ -0,0 +1,17 @@
+import "./tokens.css";
+// The public windowing API: window state, window chrome and its registration
+// hooks, and the menu and sidebar primitives the chrome renders with.
+export { createRequiredContext, } from "./createRequiredContext.js";
+export { Menu } from "./menu/Menu.js";
+export { MenuItem } from "./menu/MenuItem.js";
+export { useContextMenuPositionState, useContextMenuState, } from "./menu/useContextMenuState.js";
+export { SidebarResizeHandle, useSidebarResize } from "./sidebar/SidebarResize.js";
+export { CurrentWindowProvider, useCurrentWindow, useSuppressWindowToolbar, } from "./window/CurrentWindowContext.js";
+export { Window } from "./window/Window.js";
+export { WindowTitleBarActionButtons } from "./window/WindowChromeActions.js";
+export { WindowCloseButton } from "./window/WindowCloseButton.js";
+export { useWindowBackAction, useWindowBackActionValue, useWindowFileMenuItem, useWindowRefreshMenuItem, useWindowRefreshMenuItemValue, useWindowTitleBarAction, useWindowTitleBarActions, useWindowToolbarReservation, useWindowViewMenuItem, WindowMenuProvider, } from "./window/WindowMenuContext.js";
+export { hasWindowSidebar, useRegisteredWindowSidebar, useWindowSidebar, WindowSidebarProvider, } from "./window/WindowSidebarContext.js";
+export { findTopWindow, useWindowActions, useWindowStateData, WindowStateProvider, } from "./window/WindowStateProvider/index.js";
+export { WindowToolBar } from "./window/WindowToolBar.js";
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,6EAA6E;AAC7E,sEAAsE;AACtE,OAAO,EACL,qBAAqB,GAEtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,IAAI,EAAqB,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAsB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAEL,2BAA2B,EAC3B,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,MAAM,EAA8B,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,EAC7B,uBAAuB,EACvB,wBAAwB,EACxB,2BAA2B,EAC3B,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,gBAAgB,EAChB,0BAA0B,EAC1B,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAQlB,mBAAmB,GACpB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["import \"./tokens.css\";\n\n// The public windowing API: window state, window chrome and its registration\n// hooks, and the menu and sidebar primitives the chrome renders with.\nexport {\n  createRequiredContext,\n  type RequiredContext,\n} from \"./createRequiredContext\";\nexport { Menu, type MenuPosition } from \"./menu/Menu\";\nexport { MenuItem, type MenuItemProps } from \"./menu/MenuItem\";\nexport {\n  type ContextMenuState,\n  useContextMenuPositionState,\n  useContextMenuState,\n} from \"./menu/useContextMenuState\";\nexport { SidebarResizeHandle, useSidebarResize } from \"./sidebar/SidebarResize\";\nexport {\n  CurrentWindowProvider,\n  useCurrentWindow,\n  useSuppressWindowToolbar,\n} from \"./window/CurrentWindowContext\";\nexport { Window, type WindowContentBoundary } from \"./window/Window\";\nexport { WindowTitleBarActionButtons } from \"./window/WindowChromeActions\";\nexport { WindowCloseButton } from \"./window/WindowCloseButton\";\nexport {\n  useWindowBackAction,\n  useWindowBackActionValue,\n  useWindowFileMenuItem,\n  useWindowRefreshMenuItem,\n  useWindowRefreshMenuItemValue,\n  useWindowTitleBarAction,\n  useWindowTitleBarActions,\n  useWindowToolbarReservation,\n  useWindowViewMenuItem,\n  WindowMenuProvider,\n} from \"./window/WindowMenuContext\";\nexport {\n  hasWindowSidebar,\n  useRegisteredWindowSidebar,\n  useWindowSidebar,\n  WindowSidebarProvider,\n} from \"./window/WindowSidebarContext\";\nexport {\n  findTopWindow,\n  useWindowActions,\n  useWindowStateData,\n  type WindowCreateOptions,\n  type WindowEntry,\n  type WindowGeometry,\n  type WindowPosition,\n  type WindowSize,\n  type WindowStateActions,\n  type WindowStateData,\n  WindowStateProvider,\n} from \"./window/WindowStateProvider\";\nexport { WindowToolBar } from \"./window/WindowToolBar\";\n"]}

package/menu/Menu.css

@@ -0,0 +1,105 @@
+.menu {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  overflow: auto;
+  /* Touch. The menu closes on any scroll outside itself, so a swipe on it must
+     never pan the page. A menu whose content fits has no scroll range, is not
+     in the scroll chain at all, and overscroll-behavior would not apply — so
+     consume the gesture outright. When the menu, or a scroll container inside
+     it, overflows (flagged by Menu.tsx) vertical panning is allowed instead;
+     contain keeps a swipe at the end of the menu's own range from chaining
+     outward, and an inner scroller contains its own. */
+  touch-action: none;
+  overscroll-behavior: contain;
+  box-sizing: border-box;
+  background: var(--color-light);
+  border: var(--border-strong);
+  padding: var(--space-xs);
+  border-radius: var(--app-radius-surface);
+  box-shadow: var(--app-shadow-surface);
+}
+
+/* Menu items size border-box, like the window chrome (see Window.css). */
+:where(.menu) :where(*) {
+  box-sizing: border-box;
+}
+
+.menu[data-scrollable] {
+  touch-action: pan-y;
+}
+
+.menu button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-height: var(--control-height);
+  padding: var(--menu-item-padding);
+  border: none;
+  background: none;
+  color: inherit;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: var(--app-radius-control);
+}
+
+.menu button:hover:not(:disabled),
+.menu button:focus-visible:not(:disabled) {
+  background: var(--app-hover-surface);
+}
+
+.menu button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.menu-item-icon {
+  flex: 0 0 auto;
+  opacity: var(--opacity-icon);
+}
+
+.menu-item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * Touch: this popover menu is portaled to <body>, but the routed hook lives on
+ * <html>, so its items still resolve a 44px tap height in the routed layout.
+ *
+ * The row height was the only thing this block used to set, which left a
+ * compliant-by-measure row holding a mark and a label that both read as too
+ * small on a phone:
+ *
+ *   - The LABEL never saw the routed type ramp at all. The global reset gives
+ *     buttons `font-family: inherit` but NOT `font-size`, and `.menu button`
+ *     sets no size of its own, so every menu item rendered at the UA button
+ *     default (~13.3px) no matter what `--font-size-sm` resolved to. Scoped to
+ *     the routed tier deliberately: the windowed root carries the monospace
+ *     font-size quirk (~13px), which makes `sm` ~11.7px there — SMALLER than the
+ *     UA default this replaces — so applying it in both layouts would shrink the
+ *     windowed menus rather than leave them alone.
+ *   - The ICON is drawn from `size={16}`, a width/height attribute that author
+ *     CSS outranks, so one rule re-sizes every menu icon — MenuItem's own and
+ *     any icon a select-menu option supplies — to the same touch glyph size the
+ *     toolbars use. The trigger's caret sits outside `.menu`, so it is untouched.
+ *
+ * One shared menu backs every context menu in the app (Explorer, Contacts,
+ * Notes, Org Manager, Identity Manager, the panes, tables, and the window title
+ * bar), so this block is the whole fix.
+ */
+:root[data-navigation-mode="routed"] .menu button {
+  min-height: var(--control-height);
+  font-size: var(--font-size-sm);
+}
+
+:root[data-navigation-mode="routed"] .menu button svg {
+  width: var(--control-icon-size);
+  height: var(--control-icon-size);
+}

package/menu/Menu.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from "react";
+export interface MenuPosition {
+    x: number;
+    y: number;
+}
+export declare function Menu({ position, onClose, direction, keyboardNavigation, children, }: PropsWithChildren<{
+    position: MenuPosition;
+    onClose: () => void;
+    direction?: "up" | "down";
+    keyboardNavigation?: boolean;
+}>): import("react").ReactPortal;

package/menu/Menu.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import "./Menu.css";
+import { useMenuKeyboard } from "./useMenuKeyboard.js";
+const MENU_VIEWPORT_MARGIN_PX = 8;
+const MEASUREMENT_MENU_STYLE = {
+    left: MENU_VIEWPORT_MARGIN_PX,
+    pointerEvents: "none",
+    top: MENU_VIEWPORT_MARGIN_PX,
+    visibility: "hidden",
+};
+// Fractional layout or zoom can report a spurious pixel of overflow; treat
+// that as fitting, since a false positive hands touch panning to the page.
+const SCROLL_OVERFLOW_TOLERANCE_PX = 1;
+function overflows(element) {
+    return (element.scrollHeight > element.clientHeight + SCROLL_OVERFLOW_TOLERANCE_PX);
+}
+/**
+ * Whether touch should be allowed to pan inside the menu: its own box scrolls,
+ * or a descendant scroll container (a select menu's option list) does. The
+ * menu box is a scroll container by its stylesheet; descendants qualify by
+ * their computed overflow so a plain overflowing block does not count.
+ */
+function hasTouchScrollableContent(menu) {
+    if (overflows(menu)) {
+        return true;
+    }
+    for (const element of Array.from(menu.querySelectorAll("*"))) {
+        if (!overflows(element)) {
+            continue;
+        }
+        const overflowY = getComputedStyle(element).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Dismiss the menu on a pointer press or a scroll outside it. The closer is
+ * read through an effect event: consumers commonly pass an inline one, and
+ * the document listeners should subscribe once, not on every render.
+ */
+function useMenuOutsideDismissal(menuRef, onClose) {
+    const close = useEffectEvent(onClose);
+    useEffect(() => {
+        function handleClick(e) {
+            const target = e.target;
+            if (!(target instanceof Node)) {
+                close();
+                return;
+            }
+            if (menuRef.current && !menuRef.current.contains(target)) {
+                close();
+            }
+        }
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, [menuRef]);
+    // The menu is anchored once, from its trigger's position, so a scroll
+    // anywhere else would leave it floating where the trigger used to be. Close
+    // it instead. Scrolls inside the menu — its own overflow, or a list it
+    // hosts — are the menu working as intended. Capture phase, because scroll
+    // events do not bubble. The check covers this menu's own subtree only: a
+    // nested Menu is portaled to the body too, so scrolling one would close its
+    // parent. Nothing nests menus today; revisit here if that changes.
+    useEffect(() => {
+        function handleScroll(e) {
+            const target = e.target;
+            if (target instanceof Node && menuRef.current?.contains(target)) {
+                return;
+            }
+            close();
+        }
+        document.addEventListener("scroll", handleScroll, true);
+        return () => document.removeEventListener("scroll", handleScroll, true);
+    }, [menuRef]);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function createInitialMenuPlacement(position, direction) {
+    return {
+        anchorDirection: direction,
+        anchorX: position.x,
+        anchorY: position.y,
+        left: position.x,
+        maxHeight: undefined,
+        maxWidth: undefined,
+        measured: false,
+        top: position.y,
+    };
+}
+function placeMenuInViewport(input) {
+    const availableWidth = Math.max(0, input.viewportWidth - MENU_VIEWPORT_MARGIN_PX * 2);
+    const availableHeight = Math.max(0, input.viewportHeight - MENU_VIEWPORT_MARGIN_PX * 2);
+    const boundedWidth = Math.min(input.width, availableWidth);
+    const boundedHeight = Math.min(input.height, availableHeight);
+    const maxLeft = Math.max(MENU_VIEWPORT_MARGIN_PX, input.viewportWidth - MENU_VIEWPORT_MARGIN_PX - boundedWidth);
+    const maxTop = Math.max(MENU_VIEWPORT_MARGIN_PX, input.viewportHeight - MENU_VIEWPORT_MARGIN_PX - boundedHeight);
+    const preferredTop = input.direction === "up"
+        ? input.position.y - boundedHeight
+        : input.position.y;
+    return {
+        anchorDirection: input.direction,
+        anchorX: input.position.x,
+        anchorY: input.position.y,
+        left: clamp(input.position.x, MENU_VIEWPORT_MARGIN_PX, maxLeft),
+        maxHeight: availableHeight > 0 ? availableHeight : undefined,
+        maxWidth: availableWidth > 0 ? availableWidth : undefined,
+        measured: true,
+        top: clamp(preferredTop, MENU_VIEWPORT_MARGIN_PX, maxTop),
+    };
+}
+export function Menu({ position, onClose, direction = "up", keyboardNavigation = true, children, }) {
+    const menuRef = useRef(null);
+    useMenuOutsideDismissal(menuRef, onClose);
+    const { x, y } = position;
+    const [placement, setPlacement] = useState(() => createInitialMenuPlacement(position, direction));
+    // Whether anything in the menu scrolls, so the stylesheet can let touch pan
+    // it while consuming swipes on a menu that fits (see Menu.css).
+    const [scrollable, setScrollable] = useState(false);
+    // Re-measure after every commit as well as on resize below: children can be
+    // swapped or filtered while the menu is open without its box changing size,
+    // which moves scrollHeight but not the ResizeObserver. setState bails out
+    // when the answer is unchanged.
+    useLayoutEffect(() => {
+        const menu = menuRef.current;
+        if (menu) {
+            setScrollable(hasTouchScrollableContent(menu));
+        }
+    });
+    useLayoutEffect(() => {
+        const menu = menuRef.current;
+        if (!menu) {
+            return;
+        }
+        const updatePlacement = () => {
+            const rect = menu.getBoundingClientRect();
+            setPlacement(placeMenuInViewport({
+                direction,
+                height: rect.height,
+                position,
+                viewportHeight: window.innerHeight,
+                viewportWidth: window.innerWidth,
+                width: rect.width,
+            }));
+            setScrollable(hasTouchScrollableContent(menu));
+        };
+        updatePlacement();
+        const observer = new ResizeObserver(updatePlacement);
+        observer.observe(menu);
+        window.addEventListener("resize", updatePlacement);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("resize", updatePlacement);
+        };
+    }, [x, y, direction]);
+    const placementMatchesAnchor = placement.measured &&
+        placement.anchorX === position.x &&
+        placement.anchorY === position.y &&
+        placement.anchorDirection === direction;
+    useMenuKeyboard(menuRef, placementMatchesAnchor && keyboardNavigation, onClose);
+    const menuStyle = placementMatchesAnchor
+        ? {
+            left: placement.left,
+            maxHeight: placement.maxHeight,
+            maxWidth: placement.maxWidth,
+            top: placement.top,
+        }
+        : MEASUREMENT_MENU_STYLE;
+    return createPortal(_jsx("div", { ref: menuRef, className: "menu", "data-scrollable": scrollable || undefined, style: menuStyle, tabIndex: -1, children: children }), document.body);
+}
+//# sourceMappingURL=Menu.js.map

package/menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,YAAY,CAAC;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAClC,MAAM,sBAAsB,GAAkB;IAC5C,IAAI,EAAE,uBAAuB;IAC7B,aAAa,EAAE,MAAM;IACrB,GAAG,EAAE,uBAAuB;IAC5B,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,2EAA2E;AAC3E,2EAA2E;AAC3E,MAAM,4BAA4B,GAAG,CAAC,CAAC;AAEvC,SAAS,SAAS,CAAC,OAAoB;IACrC,OAAO,CACL,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,4BAA4B,CAC3E,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,yBAAyB,CAAC,IAAiB;IAClD,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,GAAG,CAAC,CAAC,EAAE,CAAC;QAC1E,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,SAAS;QACX,CAAC;QACD,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC;QACtD,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;YACnD,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;GAIG;AACH,SAAS,uBAAuB,CAC9B,OAAyC,EACzC,OAAmB;IAEnB,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,WAAW,CAAC,CAAa;YAChC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC,EAAE,CAAC;gBAC9B,KAAK,EAAE,CAAC;gBACR,OAAO;YACT,CAAC;YAED,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBACzD,KAAK,EAAE,CAAC;YACV,CAAC;QACH,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,sEAAsE;IACtE,4EAA4E;IAC5E,uEAAuE;IACvE,0EAA0E;IAC1E,yEAAyE;IACzE,4EAA4E;IAC5E,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,YAAY,CAAC,CAAQ;YAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,MAAM,YAAY,IAAI,IAAI,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAChE,OAAO;YACT,CAAC;YACD,KAAK,EAAE,CAAC;QACV,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB,CAAC;AAkBD,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IACpD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,0BAA0B,CACjC,QAAsB,EACtB,SAAwB;IAExB,OAAO;QACL,eAAe,EAAE,SAAS;QAC1B,OAAO,EAAE,QAAQ,CAAC,CAAC;QACnB,OAAO,EAAE,QAAQ,CAAC,CAAC;QACnB,IAAI,EAAE,QAAQ,CAAC,CAAC;QAChB,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,KAAK;QACf,GAAG,EAAE,QAAQ,CAAC,CAAC;KAChB,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,KAO5B;IACC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAC7B,CAAC,EACD,KAAK,CAAC,aAAa,GAAG,uBAAuB,GAAG,CAAC,CAClD,CAAC;IACF,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAC9B,CAAC,EACD,KAAK,CAAC,cAAc,GAAG,uBAAuB,GAAG,CAAC,CACnD,CAAC;IACF,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,uBAAuB,EACvB,KAAK,CAAC,aAAa,GAAG,uBAAuB,GAAG,YAAY,CAC7D,CAAC;IACF,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,uBAAuB,EACvB,KAAK,CAAC,cAAc,GAAG,uBAAuB,GAAG,aAAa,CAC/D,CAAC;IACF,MAAM,YAAY,GAChB,KAAK,CAAC,SAAS,KAAK,IAAI;QACtB,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,GAAG,aAAa;QAClC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO;QACL,eAAe,EAAE,KAAK,CAAC,SAAS;QAChC,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QACzB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,uBAAuB,EAAE,OAAO,CAAC;QAC/D,SAAS,EAAE,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;QAC5D,QAAQ,EAAE,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;QACzD,QAAQ,EAAE,IAAI;QACd,GAAG,EAAE,KAAK,CAAC,YAAY,EAAE,uBAAuB,EAAE,MAAM,CAAC;KAC1D,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,kBAAkB,GAAG,IAAI,EACzB,QAAQ,GAMR;IACA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,uBAAuB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC9C,0BAA0B,CAAC,QAAQ,EAAE,SAAS,CAAC,CAChD,CAAC;IACF,4EAA4E;IAC5E,gEAAgE;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,4EAA4E;IAC5E,4EAA4E;IAC5E,0EAA0E;IAC1E,gCAAgC;IAChC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,IAAI,EAAE,CAAC;YACT,aAAa,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC1C,YAAY,CACV,mBAAmB,CAAC;gBAClB,SAAS;gBACT,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,QAAQ;gBACR,cAAc,EAAE,MAAM,CAAC,WAAW;gBAClC,aAAa,EAAE,MAAM,CAAC,UAAU;gBAChC,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CACH,CAAC;YACF,aAAa,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;QACF,eAAe,EAAE,CAAC;QAClB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,eAAe,CAAC,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACvB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtB,MAAM,sBAAsB,GAC1B,SAAS,CAAC,QAAQ;QAClB,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC;QAChC,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC;QAChC,SAAS,CAAC,eAAe,KAAK,SAAS,CAAC;IAC1C,eAAe,CACb,OAAO,EACP,sBAAsB,IAAI,kBAAkB,EAC5C,OAAO,CACR,CAAC;IACF,MAAM,SAAS,GAAkB,sBAAsB;QACrD,CAAC,CAAC;YACE,IAAI,EAAE,SAAS,CAAC,IAAI;YACpB,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,GAAG,EAAE,SAAS,CAAC,GAAG;SACnB;QACH,CAAC,CAAC,sBAAsB,CAAC;IAE3B,OAAO,YAAY,CACjB,cACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,MAAM,qBACC,UAAU,IAAI,SAAS,EACxC,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACL,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ,CAAC","sourcesContent":["import {\n  type CSSProperties,\n  type PropsWithChildren,\n  type RefObject,\n  useEffect,\n  useEffectEvent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./Menu.css\";\nimport { useMenuKeyboard } from \"./useMenuKeyboard\";\n\nconst MENU_VIEWPORT_MARGIN_PX = 8;\nconst MEASUREMENT_MENU_STYLE: CSSProperties = {\n  left: MENU_VIEWPORT_MARGIN_PX,\n  pointerEvents: \"none\",\n  top: MENU_VIEWPORT_MARGIN_PX,\n  visibility: \"hidden\",\n};\n\n// Fractional layout or zoom can report a spurious pixel of overflow; treat\n// that as fitting, since a false positive hands touch panning to the page.\nconst SCROLL_OVERFLOW_TOLERANCE_PX = 1;\n\nfunction overflows(element: HTMLElement): boolean {\n  return (\n    element.scrollHeight > element.clientHeight + SCROLL_OVERFLOW_TOLERANCE_PX\n  );\n}\n\n/**\n * Whether touch should be allowed to pan inside the menu: its own box scrolls,\n * or a descendant scroll container (a select menu's option list) does. The\n * menu box is a scroll container by its stylesheet; descendants qualify by\n * their computed overflow so a plain overflowing block does not count.\n */\nfunction hasTouchScrollableContent(menu: HTMLElement): boolean {\n  if (overflows(menu)) {\n    return true;\n  }\n\n  for (const element of Array.from(menu.querySelectorAll<HTMLElement>(\"*\"))) {\n    if (!overflows(element)) {\n      continue;\n    }\n    const overflowY = getComputedStyle(element).overflowY;\n    if (overflowY === \"auto\" || overflowY === \"scroll\") {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/**\n * Dismiss the menu on a pointer press or a scroll outside it. The closer is\n * read through an effect event: consumers commonly pass an inline one, and\n * the document listeners should subscribe once, not on every render.\n */\nfunction useMenuOutsideDismissal(\n  menuRef: RefObject<HTMLDivElement | null>,\n  onClose: () => void,\n): void {\n  const close = useEffectEvent(onClose);\n\n  useEffect(() => {\n    function handleClick(e: MouseEvent) {\n      const target = e.target;\n      if (!(target instanceof Node)) {\n        close();\n        return;\n      }\n\n      if (menuRef.current && !menuRef.current.contains(target)) {\n        close();\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [menuRef]);\n\n  // The menu is anchored once, from its trigger's position, so a scroll\n  // anywhere else would leave it floating where the trigger used to be. Close\n  // it instead. Scrolls inside the menu — its own overflow, or a list it\n  // hosts — are the menu working as intended. Capture phase, because scroll\n  // events do not bubble. The check covers this menu's own subtree only: a\n  // nested Menu is portaled to the body too, so scrolling one would close its\n  // parent. Nothing nests menus today; revisit here if that changes.\n  useEffect(() => {\n    function handleScroll(e: Event) {\n      const target = e.target;\n      if (target instanceof Node && menuRef.current?.contains(target)) {\n        return;\n      }\n      close();\n    }\n    document.addEventListener(\"scroll\", handleScroll, true);\n    return () => document.removeEventListener(\"scroll\", handleScroll, true);\n  }, [menuRef]);\n}\n\nexport interface MenuPosition {\n  x: number;\n  y: number;\n}\n\ninterface MenuPlacement {\n  anchorDirection: \"up\" | \"down\";\n  anchorX: number;\n  anchorY: number;\n  left: number;\n  maxHeight: number | undefined;\n  maxWidth: number | undefined;\n  measured: boolean;\n  top: number;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction createInitialMenuPlacement(\n  position: MenuPosition,\n  direction: \"up\" | \"down\",\n): MenuPlacement {\n  return {\n    anchorDirection: direction,\n    anchorX: position.x,\n    anchorY: position.y,\n    left: position.x,\n    maxHeight: undefined,\n    maxWidth: undefined,\n    measured: false,\n    top: position.y,\n  };\n}\n\nfunction placeMenuInViewport(input: {\n  direction: \"up\" | \"down\";\n  height: number;\n  position: MenuPosition;\n  viewportHeight: number;\n  viewportWidth: number;\n  width: number;\n}): MenuPlacement {\n  const availableWidth = Math.max(\n    0,\n    input.viewportWidth - MENU_VIEWPORT_MARGIN_PX * 2,\n  );\n  const availableHeight = Math.max(\n    0,\n    input.viewportHeight - MENU_VIEWPORT_MARGIN_PX * 2,\n  );\n  const boundedWidth = Math.min(input.width, availableWidth);\n  const boundedHeight = Math.min(input.height, availableHeight);\n  const maxLeft = Math.max(\n    MENU_VIEWPORT_MARGIN_PX,\n    input.viewportWidth - MENU_VIEWPORT_MARGIN_PX - boundedWidth,\n  );\n  const maxTop = Math.max(\n    MENU_VIEWPORT_MARGIN_PX,\n    input.viewportHeight - MENU_VIEWPORT_MARGIN_PX - boundedHeight,\n  );\n  const preferredTop =\n    input.direction === \"up\"\n      ? input.position.y - boundedHeight\n      : input.position.y;\n\n  return {\n    anchorDirection: input.direction,\n    anchorX: input.position.x,\n    anchorY: input.position.y,\n    left: clamp(input.position.x, MENU_VIEWPORT_MARGIN_PX, maxLeft),\n    maxHeight: availableHeight > 0 ? availableHeight : undefined,\n    maxWidth: availableWidth > 0 ? availableWidth : undefined,\n    measured: true,\n    top: clamp(preferredTop, MENU_VIEWPORT_MARGIN_PX, maxTop),\n  };\n}\n\nexport function Menu({\n  position,\n  onClose,\n  direction = \"up\",\n  keyboardNavigation = true,\n  children,\n}: PropsWithChildren<{\n  position: MenuPosition;\n  onClose: () => void;\n  direction?: \"up\" | \"down\";\n  keyboardNavigation?: boolean;\n}>) {\n  const menuRef = useRef<HTMLDivElement>(null);\n  useMenuOutsideDismissal(menuRef, onClose);\n  const { x, y } = position;\n  const [placement, setPlacement] = useState(() =>\n    createInitialMenuPlacement(position, direction),\n  );\n  // Whether anything in the menu scrolls, so the stylesheet can let touch pan\n  // it while consuming swipes on a menu that fits (see Menu.css).\n  const [scrollable, setScrollable] = useState(false);\n\n  // Re-measure after every commit as well as on resize below: children can be\n  // swapped or filtered while the menu is open without its box changing size,\n  // which moves scrollHeight but not the ResizeObserver. setState bails out\n  // when the answer is unchanged.\n  useLayoutEffect(() => {\n    const menu = menuRef.current;\n    if (menu) {\n      setScrollable(hasTouchScrollableContent(menu));\n    }\n  });\n\n  useLayoutEffect(() => {\n    const menu = menuRef.current;\n    if (!menu) {\n      return;\n    }\n\n    const updatePlacement = () => {\n      const rect = menu.getBoundingClientRect();\n      setPlacement(\n        placeMenuInViewport({\n          direction,\n          height: rect.height,\n          position,\n          viewportHeight: window.innerHeight,\n          viewportWidth: window.innerWidth,\n          width: rect.width,\n        }),\n      );\n      setScrollable(hasTouchScrollableContent(menu));\n    };\n    updatePlacement();\n    const observer = new ResizeObserver(updatePlacement);\n    observer.observe(menu);\n    window.addEventListener(\"resize\", updatePlacement);\n    return () => {\n      observer.disconnect();\n      window.removeEventListener(\"resize\", updatePlacement);\n    };\n  }, [x, y, direction]);\n\n  const placementMatchesAnchor =\n    placement.measured &&\n    placement.anchorX === position.x &&\n    placement.anchorY === position.y &&\n    placement.anchorDirection === direction;\n  useMenuKeyboard(\n    menuRef,\n    placementMatchesAnchor && keyboardNavigation,\n    onClose,\n  );\n  const menuStyle: CSSProperties = placementMatchesAnchor\n    ? {\n        left: placement.left,\n        maxHeight: placement.maxHeight,\n        maxWidth: placement.maxWidth,\n        top: placement.top,\n      }\n    : MEASUREMENT_MENU_STYLE;\n\n  return createPortal(\n    <div\n      ref={menuRef}\n      className=\"menu\"\n      data-scrollable={scrollable || undefined}\n      style={menuStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n}\n"]}

package/menu/MenuItem.d.ts

@@ -0,0 +1,9 @@
+import type { Icon } from "@phosphor-icons/react";
+import type { MouseEventHandler } from "react";
+export interface MenuItemProps {
+    icon?: Icon;
+    label: string;
+    disabled?: boolean;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export declare function MenuItem({ icon: IconComponent, label, disabled, onClick, }: MenuItemProps): import("react").JSX.Element;

package/menu/MenuItem.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MenuItem({ icon: IconComponent, label, disabled, onClick, }) {
+    return (_jsxs("button", { type: "button", disabled: disabled, onClick: onClick, children: [IconComponent && (_jsx(IconComponent, { "aria-hidden": "true", className: "menu-item-icon", focusable: "false", size: 16, weight: "regular" })), _jsx("span", { className: "menu-item-label", children: label })] }));
+}
+//# sourceMappingURL=MenuItem.js.map

package/menu/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../../../../Users/a2f0/github/tearleads5/packages/windowing/src/menu/MenuItem.tsx"],"names":[],"mappings":";AAUA,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EAAE,aAAa,EACnB,KAAK,EACL,QAAQ,EACR,OAAO,GACO;IACd,OAAO,CACL,kBAAQ,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,aACvD,aAAa,IAAI,CAChB,KAAC,aAAa,mBACA,MAAM,EAClB,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAC,OAAO,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAC,SAAS,GAChB,CACH,EACD,eAAM,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAQ,IACzC,CACV,CAAC;AACJ,CAAC","sourcesContent":["import type { Icon } from \"@phosphor-icons/react\";\nimport type { MouseEventHandler } from \"react\";\n\nexport interface MenuItemProps {\n  icon?: Icon;\n  label: string;\n  disabled?: boolean;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport function MenuItem({\n  icon: IconComponent,\n  label,\n  disabled,\n  onClick,\n}: MenuItemProps) {\n  return (\n    <button type=\"button\" disabled={disabled} onClick={onClick}>\n      {IconComponent && (\n        <IconComponent\n          aria-hidden=\"true\"\n          className=\"menu-item-icon\"\n          focusable=\"false\"\n          size={16}\n          weight=\"regular\"\n        />\n      )}\n      <span className=\"menu-item-label\">{label}</span>\n    </button>\n  );\n}\n"]}

package/menu/useContextMenuState.d.ts

@@ -0,0 +1,20 @@
+import { type MouseEvent } from "react";
+import type { MenuPosition } from "./Menu.js";
+export interface ContextMenuState<TId = string> {
+    id: TId;
+    position: MenuPosition;
+}
+interface ContextMenuStateModel<TId = string> {
+    closeContextMenu: () => void;
+    contextMenu: ContextMenuState<TId> | null;
+    openContextMenu: (event: MouseEvent<HTMLElement>, id: TId) => void;
+}
+export declare function useContextMenuState<TId = string>(params?: {
+    onOpen?: (id: TId) => void;
+}): ContextMenuStateModel<TId>;
+export declare function useContextMenuPositionState(): {
+    closeContextMenu: () => void;
+    contextMenu: MenuPosition | null;
+    openContextMenuAt: (position: MenuPosition) => void;
+};
+export {};