@phreshos/react-ui 0.1.48 → 0.1.50

package/dist/app-layout.d.ts

@@ -1,15 +1,30 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { type SurfaceDepth } from "./surface/surface.js";
 export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
     readonly children: ReactNode;
     /** The sidebar's width; eighteen times the Appearance spacing by default. */
     readonly sidebarWidth?: CSSProperties["width"];
 }
 export type AppLayoutRegionProps = HTMLAttributes<HTMLElement>;
+export type AppLayoutContentProps = AppLayoutRegionProps & Readonly<{
+    /** How the content's Surface stands in the layout: recessed into it by default, or raised. */
+    depth?: SurfaceDepth;
+}>;
+export type AppLayoutSidebarProps = AppLayoutRegionProps & Readonly<{
+    /** What stays at the foot of the sidebar while the rest scrolls, such as work in progress. */
+    footer?: ReactNode;
+}>;
 export type AppLayoutTitleProps = HTMLAttributes<HTMLHeadingElement>;
 export declare const AppLayout: import("react").ForwardRefExoticComponent<AppLayoutProps & import("react").RefAttributes<HTMLDivElement>> & {
     Title: import("react").ForwardRefExoticComponent<AppLayoutTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
-    Sidebar: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & Readonly<{
+        /** What stays at the foot of the sidebar while the rest scrolls, such as work in progress. */
+        footer?: ReactNode;
+    }> & import("react").RefAttributes<HTMLElement>>;
     Header: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
-    Content: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & Readonly<{
+        /** How the content's Surface stands in the layout: recessed into it by default, or raised. */
+        depth?: SurfaceDepth;
+    }> & import("react").RefAttributes<HTMLElement>>;
     Footer: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
 };

package/dist/app-layout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext } from "react";
 import { controlFontSizes, controlFontWeight } from "./control/control.js";
 import { headerHeight } from "./foundation/layout.js";
@@ -54,10 +54,11 @@ const AppLayoutTitle = forwardRef(function AppLayoutTitle({ style, ...properties
             ...style
         } });
 });
-/** The sidebar, such as a program's navigation. It scrolls on its own. */
-const AppLayoutSidebar = forwardRef(function AppLayoutSidebar({ children, style, ...properties }, ref) {
+/** The sidebar, such as a program's navigation. It scrolls on its own, above its footer. */
+const AppLayoutSidebar = forwardRef(function AppLayoutSidebar({ children, footer, style, ...properties }, ref) {
     const { spacing } = useLayout();
-    return _jsx("aside", { ...properties, ref: ref, style: { gridArea: "sidebar", minHeight: 0, ...style }, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsx("div", { style: { padding: scale(spacing, "small") }, children: children }) }) });
+    const padding = scale(spacing, "small");
+    return _jsxs("aside", { ...properties, ref: ref, style: { gridArea: "sidebar", minHeight: 0, display: "flex", flexDirection: "column", ...style }, children: [_jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx("div", { style: { padding }, children: children }) }), footer != null && _jsx("div", { style: { flex: "none", paddingInline: padding, paddingBottom: padding }, children: footer })] });
 });
 /** The header row above the content, as tall as a Window or Panel header. */
 const AppLayoutHeader = forwardRef(function AppLayoutHeader({ style, ...properties }, ref) {
@@ -73,9 +74,9 @@ const AppLayoutHeader = forwardRef(function AppLayoutHeader({ style, ...properti
         } });
 });
 /** The content, on its Surface. It scrolls on its own, padded by the Appearance spacing. */
-const AppLayoutContent = forwardRef(function AppLayoutContent({ children, style, ...properties }, ref) {
+const AppLayoutContent = forwardRef(function AppLayoutContent({ children, depth = "recessed", style, ...properties }, ref) {
     const { spacing, radius } = useLayout();
-    return _jsx(Surface, { as: "main", ...properties, ref: ref, material: "extended", radius: resolveRadius("medium", radius), style: {
+    return _jsx(Surface, { as: "main", ...properties, ref: ref, depth: depth, material: "extended", radius: resolveRadius("medium", radius), style: {
             gridArea: "content",
             minWidth: 0,
             minHeight: 0,

package/dist/button.d.ts

@@ -25,7 +25,10 @@ interface ButtonOwnProps extends ControlProps, RadiusProps, MaterialOverrides, S
 /** A Button that acts: a native `<button>`. */
 export interface ButtonActionProps extends NativeButtonProps, ButtonOwnProps {
     readonly href?: undefined;
-    /** Prevents activation while keeping the Button focusable. */
+    /**
+     * Work the Button started is under way: a Spinner shows in its place, the Button keeps its size
+     * and its name, and it stays focusable without activating.
+     */
     readonly pending?: boolean;
 }
 /**

package/dist/button.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
-import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { transition, useControlMetrics } from "./control/control.js";
 import { surfaceRender } from "./control/surface-render.js";
+import { Spinner } from "./spinner.js";
 /** A raised Surface you act on, or follow when it has an `href`. */
 export const Button = forwardRef(function Button(properties, ref) {
     const { children, color = "default", depth, disabled, iconOnly = false, radius, size, style, className, material, shadow, ...rest } = properties;
@@ -33,7 +34,7 @@ export const Button = forwardRef(function Button(properties, ref) {
     const { pending = false, type = "button", ...action } = rest;
     // Disabled state is read from React Aria, so a Button placed in a slot, such
     // as a calendar's month buttons, follows the owner that disables it.
-    return _jsx(AriaButton, { ...action, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => surface(state, pending)), style: state => buttonStyle(metrics, iconOnly, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: children });
+    return _jsx(AriaButton, { ...action, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => surface(state, pending)), style: state => buttonStyle(metrics, iconOnly, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: pending ? _jsxs(_Fragment, { children: [_jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: metrics.gap, opacity: 0 }, children: children }), _jsx("span", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center" }, children: _jsx(Spinner, { decorative: true, color: "currentColor", style: { width: metrics.indicator, height: metrics.indicator } }) })] }) : children });
 });
 function buttonStyle(metrics, iconOnly, pressed, disabled, pending, style) {
     return {
@@ -62,7 +63,7 @@ function buttonStyle(metrics, iconOnly, pressed, disabled, pending, style) {
         WebkitTapHighlightColor: "transparent",
         cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",
         scale: pressed ? "0.97" : "1",
-        ...(pending ? { opacity: controlOpacity.pending } : {}),
+        ...(pending ? { position: "relative" } : {}),
         ...style
     };
 }

package/dist/context-menu.d.ts

@@ -21,6 +21,9 @@ export declare const ContextMenu: typeof ContextMenuRoot & {
         Section: <T extends object = object>(properties: import("./menu.js").MenuSectionProps<T>) => import("react").ReactElement | null;
         Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;
         Separator: import("react").ForwardRefExoticComponent<import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>>;
+        Submenu: (({ children, delay }: import("./menu.js").MenuSubmenuProps) => import("react").JSX.Element) & {
+            Content: import("react").ForwardRefExoticComponent<import("./menu.js").MenuSubmenuContentProps & import("react").RefAttributes<HTMLElement>>;
+        };
     };
 };
 export type ContextMenuProps = ComponentProps<typeof ContextMenuRoot>;

package/dist/context-menu.js

@@ -36,6 +36,9 @@ export const ContextMenuContent = forwardRef(function ContextMenuContent(propert
             const target = event.target;
             if (target instanceof Node && contentRef.current?.contains(target))
                 return;
+            // A Submenu opens in its own overlay; a press inside it is still inside this menu.
+            if (target instanceof Element && target.closest('[data-trigger="SubmenuTrigger"]'))
+                return;
             state?.close();
         }
         document.addEventListener("pointerdown", dismiss, true);

package/dist/control/control.d.ts

@@ -36,7 +36,6 @@ export declare const controlLineHeight = 1.45;
 export declare const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export declare const controlOpacity: Readonly<{
-    pending: 0.68;
     secondary: 0.66;
     placeholder: 0.55;
 }>;

package/dist/control/control.js

@@ -21,7 +21,6 @@ export const controlLineHeight = 1.45;
 export const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export const controlOpacity = Object.freeze({
-    pending: 0.68,
     secondary: 0.66,
     placeholder: 0.55
 });

package/dist/control/item.d.ts

@@ -35,3 +35,8 @@ export declare function itemStyle(metrics: ControlMetrics, disabled: boolean): C
 export declare function SelectionMark({ visible }: Readonly<{
     visible: boolean;
 }>): import("react").JSX.Element;
+/**
+ * A collection that a drag would drop into as a whole, outlined as focus is, so it reads as the place
+ * that takes the drop.
+ */
+export declare function dropTargetOutline(metrics: ControlMetrics, dropTarget: boolean | undefined): CSSProperties;

package/dist/control/item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { colorLevel, mixColor, resolveColor } from "../foundation/color.js";
+import { colorLevel, colorOpacity, mixColor, resolveColor } from "../foundation/color.js";
 import { clearVeil, interactionShift, surfacePaint } from "../surface/surface.js";
 import { transition } from "./control.js";
 import { Check } from "lucide-react";
@@ -55,3 +55,10 @@ export function itemStyle(metrics, disabled) {
 export function SelectionMark({ visible }) {
     return _jsx(Check, { ...iconProps(14), style: { flexShrink: 0, marginInlineStart: "auto", opacity: visible ? 1 : 0 } });
 }
+/**
+ * A collection that a drag would drop into as a whole, outlined as focus is, so it reads as the place
+ * that takes the drop.
+ */
+export function dropTargetOutline(metrics, dropTarget) {
+    return dropTarget ? { outline: `3px solid ${colorOpacity(metrics.visual.colors.primary, 0.34)}`, outlineOffset: -3 } : {};
+}

package/dist/control/selection.js

@@ -1,3 +1,9 @@
+/**
+ * The selection React Aria reported for each value handed out. It also remembers where a range
+ * started, which the strings alone lose; when the same value comes back, React Aria gets its own
+ * selection again, so Shift extends from the entry chosen last.
+ */
+const reported = new WeakMap();
 export function toAriaSelection(value) {
     if (value === undefined)
         return undefined;
@@ -7,7 +13,7 @@ export function toAriaSelection(value) {
         return new Set();
     if (typeof value === "string")
         return new Set([value]);
-    return new Set(value);
+    return reported.get(value) ?? new Set(value);
 }
 export function stringKey(value) {
     if (typeof value !== "string")
@@ -21,7 +27,11 @@ export function singleSelection(selection) {
     return selection === "all" ? null : optionalStringKey(selection.values().next().value ?? null);
 }
 export function multipleSelection(selection) {
-    return selection === "all" ? "all" : [...selection].map(stringKey);
+    if (selection === "all")
+        return "all";
+    const value = [...selection].map(stringKey);
+    reported.set(value, selection);
+    return value;
 }
 export function stringKeys(values) {
     return [...values].map(stringKey);

package/dist/document-theme.d.ts

@@ -1,12 +1,17 @@
+import { type ReactElement } from "react";
 /**
  * Keeps the document's color scheme on the Theme of the nearest UIProvider,
  * or on the browser's without one. It writes the Theme into the document's
  * `<meta name="color-scheme">`, creating the element when the document has
  * none, before the browser paints, and follows every change. It renders
- * nothing; place it once, where the Theme that owns the page is provided.
+ * nothing in place; place it once, where the Theme that owns the page is
+ * provided.
  *
  * A page embedded in a frame needs its color scheme to match the frame's, or
  * the browser paints the frame opaque instead of letting what is behind it
  * show.
+ *
+ * A change of Theme takes the page there in one step; the Desktop around the
+ * page carries the movement from one Theme to the other.
  */
-export declare function DocumentTheme(): null;
+export declare function DocumentTheme(): ReactElement;

package/dist/document-theme.js

@@ -1,18 +1,53 @@
-import { useLayoutEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
 import { usePreferences } from "./foundation/visual.js";
+/** Marks the document while its Theme changes, so what it paints changes in one step. */
+const changing = "data-phreshos-theme-change";
+/**
+ * While the Theme changes, nothing in the document eases toward the new colors: the Desktop that
+ * holds the page moves from one Theme to the other as a whole, and a page easing on its own would
+ * keep changing after the Desktop has finished. Pseudo-elements carry Surface paint, so they
+ * change at once too.
+ */
+const instantThemeRule = `
+html[${changing}] *,
+html[${changing}] *::before,
+html[${changing}] *::after {
+  transition-delay: 0s !important;
+  transition-duration: 0s !important;
+}
+`;
 /**
  * Keeps the document's color scheme on the Theme of the nearest UIProvider,
  * or on the browser's without one. It writes the Theme into the document's
  * `<meta name="color-scheme">`, creating the element when the document has
  * none, before the browser paints, and follows every change. It renders
- * nothing; place it once, where the Theme that owns the page is provided.
+ * nothing in place; place it once, where the Theme that owns the page is
+ * provided.
  *
  * A page embedded in a frame needs its color scheme to match the frame's, or
  * the browser paints the frame opaque instead of letting what is behind it
  * show.
+ *
+ * A change of Theme takes the page there in one step; the Desktop around the
+ * page carries the movement from one Theme to the other.
  */
 export function DocumentTheme() {
     const { theme } = usePreferences();
+    const shown = useRef(theme);
+    useLayoutEffect(() => {
+        if (shown.current === theme)
+            return;
+        shown.current = theme;
+        // Set before the browser paints the new colors, and kept until they have been painted.
+        const root = document.documentElement;
+        root.setAttribute(changing, "");
+        let frame = requestAnimationFrame(() => { frame = requestAnimationFrame(() => root.removeAttribute(changing)); });
+        return () => {
+            cancelAnimationFrame(frame);
+            root.removeAttribute(changing);
+        };
+    }, [theme]);
     useLayoutEffect(() => {
         const existing = document.head.querySelector('meta[name="color-scheme" i]');
         const meta = existing ?? document.head.appendChild(Object.assign(document.createElement("meta"), { name: "color-scheme" }));
@@ -25,5 +60,5 @@ export function DocumentTheme() {
                 meta.remove();
         };
     }, [theme]);
-    return null;
+    return _jsx("style", { href: "phreshos-document-theme", precedence: "phreshos", children: instantThemeRule });
 }

package/dist/drag-and-drop.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Dragging entries out of a collection and dropping onto it, for Table, GridList, and Tree: pass what
+ * `useDragAndDrop` returns as the collection's `dragAndDropHooks`. Drags are the browser's own, so
+ * they reach other frames and other applications, and files dragged in from the machine arrive as
+ * drop items of kind `file` or `directory`. What a drag would drop into shows as chosen.
+ */
+export { useDragAndDrop, type DragAndDropHooks, type DragAndDropOptions, type DropItem, type DropOperation, type DirectoryDropItem, type FileDropItem, type TextDropItem } from "react-aria-components";

package/dist/drag-and-drop.js

@@ -0,0 +1,7 @@
+/**
+ * Dragging entries out of a collection and dropping onto it, for Table, GridList, and Tree: pass what
+ * `useDragAndDrop` returns as the collection's `dragAndDropHooks`. Drags are the browser's own, so
+ * they reach other frames and other applications, and files dragged in from the machine arrive as
+ * drop items of kind `file` or `directory`. What a drag would drop into shows as chosen.
+ */
+export { useDragAndDrop } from "react-aria-components";

package/dist/drawer.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from "react";
+export interface DrawerProps {
+    readonly open: boolean;
+    /** Called for a press outside the Drawer or for Escape. */
+    readonly onClose: () => void;
+    /** Shown at its top, such as the name of what it belongs to. */
+    readonly title?: ReactNode;
+    readonly "aria-label"?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly children: ReactNode;
+}
+/**
+ * A narrow layout's sidebar, over its content from the start side, such as the navigation a narrow
+ * window gives up to its content. It is placed in its nearest positioned container. A press
+ * outside or Escape closes it. It slides in and back out along the same path, timed by the
+ * Appearance transaction, the way out its own animation so its end is seen; without motion it
+ * simply shows and goes. Only its position moves:
+ * fading it would switch off the blur it draws of what is behind it.
+ */
+export declare function Drawer({ open, onClose, title, className, style, children, ...properties }: DrawerProps): import("react").JSX.Element | null;

package/dist/drawer.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import MotionStyle, { overlayTransition } from "./foundation/motion-style.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { Surface } from "./surface/surface.js";
+/**
+ * A narrow layout's sidebar, over its content from the start side, such as the navigation a narrow
+ * window gives up to its content. It is placed in its nearest positioned container. A press
+ * outside or Escape closes it. It slides in and back out along the same path, timed by the
+ * Appearance transaction, the way out its own animation so its end is seen; without motion it
+ * simply shows and goes. Only its position moves:
+ * fading it would switch off the blur it draws of what is behind it.
+ */
+export function Drawer({ open, onClose, title, className, style, children, ...properties }) {
+    const visual = useVisual();
+    const animated = visual.duration > 0;
+    const inset = scale(visual.spacing, "small");
+    // It stays while it slides out, and leaves once the slide ends.
+    const [present, setPresent] = useState(open);
+    useEffect(() => { if (open)
+        setPresent(true);
+    else if (!animated)
+        setPresent(false); }, [open, animated]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // Escape closes the Drawer alone, not a surface that holds it.
+        const close = (event) => { if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose();
+        } };
+        addEventListener("keydown", close, true);
+        return () => removeEventListener("keydown", close, true);
+    }, [open, onClose]);
+    if (!present)
+        return null;
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), open && _jsx("div", { "data-drawer-scrim": "", style: { position: "absolute", inset: 0, zIndex: 10 }, onPointerDown: onClose }), _jsxs(Surface, { ...properties, "data-drawer": "", "data-state": animated ? open ? "opening" : "closing" : undefined, material: "full", className: ["phreshos-ui-drawer", className].filter(Boolean).join(" "), onAnimationEnd: () => { if (!open)
+                    setPresent(false); }, style: {
+                    ...overlayTransition(visual),
+                    position: "absolute",
+                    insetBlock: inset,
+                    insetInlineStart: inset,
+                    zIndex: 11,
+                    boxSizing: "border-box",
+                    width: `min(${visual.spacing * 20}px, calc(100% - ${visual.spacing * 4}px))`,
+                    padding: inset,
+                    overflow: "auto",
+                    ...style
+                }, children: [title != null && _jsx("div", { style: { padding: `${inset}px ${inset}px ${visual.spacing}px`, fontSize: controlFontSizes.xlarge, fontWeight: controlFontWeight }, children: title }), children] })] });
+}

package/dist/dropdown-menu.d.ts

@@ -17,6 +17,9 @@ export declare const DropdownMenu: typeof DropdownMenuRoot & {
         Section: <T extends object = object>(properties: import("./menu.js").MenuSectionProps<T>) => import("react").ReactElement | null;
         Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;
         Separator: import("react").ForwardRefExoticComponent<import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>>;
+        Submenu: (({ children, delay }: import("./menu.js").MenuSubmenuProps) => import("react").JSX.Element) & {
+            Content: import("react").ForwardRefExoticComponent<import("./menu.js").MenuSubmenuContentProps & import("react").RefAttributes<HTMLElement>>;
+        };
     };
 };
 export type DropdownMenuProps = ComponentProps<typeof DropdownMenuRoot>;

package/dist/foundation/motion-style.js

@@ -45,6 +45,22 @@ const stylesheet = `
   color: inherit;
   opacity: 0.55;
 }
+.phreshos-ui-text-control::-webkit-search-cancel-button,
+.phreshos-ui-text-control::-webkit-search-decoration {
+  display: none;
+}
+.phreshos-ui-drawer[data-state="opening"] {
+  animation: phreshos-ui-drawer-in var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing);
+}
+.phreshos-ui-drawer[data-state="closing"] {
+  animation: phreshos-ui-drawer-out var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) forwards;
+}
+:dir(rtl).phreshos-ui-drawer[data-state="opening"] { animation-name: phreshos-ui-drawer-in-rtl; }
+:dir(rtl).phreshos-ui-drawer[data-state="closing"] { animation-name: phreshos-ui-drawer-out-rtl; }
+@keyframes phreshos-ui-drawer-in { from { translate: calc(-100% - 1rem) 0; } }
+@keyframes phreshos-ui-drawer-out { to { translate: calc(-100% - 1rem) 0; } }
+@keyframes phreshos-ui-drawer-in-rtl { from { translate: calc(100% + 1rem) 0; } }
+@keyframes phreshos-ui-drawer-out-rtl { to { translate: calc(100% + 1rem) 0; } }
 @keyframes phreshos-ui-spin {
   to { rotate: 360deg; }
 }

package/dist/grid-list.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { GridList as AriaGridList, GridListHeader as AriaGridListHeader, GridListItem as AriaGridListItem, GridListSection as AriaGridListSection } from "react-aria-components";
 import { useControlMetrics } from "./control/control.js";
-import { itemSurface, SelectionMark } from "./control/item.js";
+import { dropTargetOutline, itemSurface, SelectionMark } from "./control/item.js";
 import { ariaSelection } from "./control/selection.js";
 import { surfaceRender } from "./control/surface-render.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
@@ -17,7 +17,7 @@ const GridListRootImplementation = forwardRef(function GridList(properties, ref)
     const columns = `repeat(auto-fill, minmax(min(${typeof width === "number" ? `${width}px` : width}, 100%), 1fr))`;
     const context = useMemo(() => ({ color, metrics, columns }), [color, metrics, columns]);
     const direction = resolveDirection(native.dir, useDirection());
-    return _jsx(GridListStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaGridList, { ...native, ...ariaSelection(properties, "single"), ref: ref, dir: direction, layout: "grid", className: className, style: {
+    return _jsx(GridListStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaGridList, { ...native, ...ariaSelection(properties, "single"), ref: ref, dir: direction, layout: "grid", className: className, style: state => ({
                     display: "grid",
                     gridTemplateColumns: columns,
                     gap: metrics.gap * 2,
@@ -27,8 +27,10 @@ const GridListRootImplementation = forwardRef(function GridList(properties, ref)
                     outline: "none",
                     fontFamily: "inherit",
                     fontSize: metrics.fontSize,
+                    borderRadius: metrics.radius,
+                    ...dropTargetOutline(metrics, state.isDropTarget),
                     ...style
-                } }) }) });
+                }) }) }) });
 });
 /** One card. It holds whatever it is given, and shows a check in its corner when selected. */
 const GridListItemImplementation = forwardRef(function GridListItem({ children, className, color, disabled = false, style, textValue, ...properties }, ref) {
@@ -37,7 +39,8 @@ const GridListItemImplementation = forwardRef(function GridListItem({ children,
     const { metrics } = inherited;
     return _jsx(AriaGridListItem, { ...properties, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => ({
             ...itemSurface(metrics.visual, itemColor, {
-                selected: state.isSelected,
+                // What a drag would drop into shows as chosen.
+                selected: state.isSelected || state.isDropTarget === true,
                 hovered: state.isHovered,
                 pressed: state.isPressed,
                 focusVisible: state.isFocusVisible,
@@ -45,7 +48,7 @@ const GridListItemImplementation = forwardRef(function GridListItem({ children,
             }, metrics.radius),
             // Unlike a list row, a card is a whole Surface: flat, in the default color at rest, in its
             // selection color once selected, with the default material in both.
-            ...(state.isSelected ? {} : { color: "default" }),
+            ...(state.isSelected || state.isDropTarget === true ? {} : { color: "default" }),
             material: undefined
         })), style: {
             position: "relative",

package/dist/loading.d.ts

@@ -1,20 +1,23 @@
 import type { CSSProperties } from "react";
 import { type ReadinessProps } from "./readiness.js";
-import { type SurfaceOwnProps } from "./surface/surface.js";
-/** The cover is a Surface: its own props set its color, depth, material, and radius. */
-export interface LoadingProps extends Pick<ReadinessProps, "children" | "delay">, SurfaceOwnProps {
+export interface LoadingProps extends Pick<ReadinessProps, "children" | "delay"> {
+    /** Class of the layer that shows the loading. */
     readonly className?: string;
+    /** Style of the layer that shows the loading, such as where it stands. */
     readonly style?: CSSProperties;
     /** Lists every requirement with a message, each with its own progress, instead of one message. */
     readonly steps?: boolean;
 }
 /**
- * A Readiness boundary drawn the way the System draws loading: a Surface that
- * covers the waiting interface, with a Spinner and the message of the first
- * waiting requirement, or every step. A requirement's detail is its message
- * when it is a string; other requirements are waited for without being shown.
+ * A Readiness boundary drawn the way the System draws loading: the waiting
+ * interface is hidden, not covered, and a Spinner with the message of the
+ * first waiting requirement, or every step, stands where it will be. Nothing
+ * is painted behind the Spinner, so the Surface the interface sits on shows
+ * through. A requirement's detail is its message when it is a string; other
+ * requirements are waited for without being shown.
  *
- * The cover fills the nearest positioned ancestor, which owns its shape. It appears at once and
- * fades out with the Appearance transaction when everything is ready.
+ * The loading fills the nearest positioned ancestor. It appears at once; when
+ * everything is ready it fades out with the Appearance transaction and the
+ * interface appears whole at once.
  */
-export declare function Loading({ children, delay, steps, ...surface }: LoadingProps): import("react").JSX.Element;
+export declare function Loading({ children, delay, steps, className, style }: LoadingProps): import("react").JSX.Element;

package/dist/loading.js

@@ -3,23 +3,34 @@ import { useEffect, useRef, useState } from "react";
 import { Check } from "lucide-react";
 import { useControlMetrics } from "./control/control.js";
 import { iconProps } from "./control/icon.js";
-import { Readiness } from "./readiness.js";
+import { Readiness, useReadiness } from "./readiness.js";
 import { Spinner, spinnerDiameter } from "./spinner.js";
-import { Surface } from "./surface/surface.js";
 import { Text } from "./typography.js";
 /**
- * A Readiness boundary drawn the way the System draws loading: a Surface that
- * covers the waiting interface, with a Spinner and the message of the first
- * waiting requirement, or every step. A requirement's detail is its message
- * when it is a string; other requirements are waited for without being shown.
+ * A Readiness boundary drawn the way the System draws loading: the waiting
+ * interface is hidden, not covered, and a Spinner with the message of the
+ * first waiting requirement, or every step, stands where it will be. Nothing
+ * is painted behind the Spinner, so the Surface the interface sits on shows
+ * through. A requirement's detail is its message when it is a string; other
+ * requirements are waited for without being shown.
  *
- * The cover fills the nearest positioned ancestor, which owns its shape. It appears at once and
- * fades out with the Appearance transaction when everything is ready.
+ * The loading fills the nearest positioned ancestor. It appears at once; when
+ * everything is ready it fades out with the Appearance transaction and the
+ * interface appears whole at once.
  */
-export function Loading({ children, delay, steps = false, ...surface }) {
-    return _jsx(Readiness, { delay: delay, status: state => _jsx(LoadingCover, { state: state, steps: steps, surface: surface }), children: children });
+export function Loading({ children, delay, steps = false, className, style }) {
+    return _jsx(Readiness, { delay: delay, status: state => _jsx(LoadingStatus, { state: state, steps: steps, className: className, style: style }), children: _jsx(Hidden, { children: children }) });
 }
-function LoadingCover({ state, steps, surface }) {
+/**
+ * Hides the waiting interface while it keeps its layout, so it appears whole and in place. It
+ * draws no box of its own, so the interface stays a direct part of the layout around it; such a
+ * box cannot fade, which is why the interface appears at once.
+ */
+function Hidden({ children }) {
+    const { ready } = useReadiness();
+    return _jsx("div", { "data-loading-content": "", style: { display: "contents", visibility: ready ? undefined : "hidden" }, children: children });
+}
+function LoadingStatus({ state, steps, className, style }) {
     const metrics = useControlMetrics();
     const { duration, easing } = metrics.visual;
     const { ready } = state;
@@ -39,21 +50,19 @@ function LoadingCover({ state, steps, surface }) {
         shown.current = state.requirements.flatMap(requirement => typeof requirement.detail === "string" ? [{ message: requirement.detail, ready: requirement.ready }] : []);
     if (gone)
         return null;
-    const { depth = "flat", radius = 0, style, ...paint } = surface;
-    const cover = {
+    const layer = {
         position: "absolute",
         inset: 0,
         display: "grid",
         placeItems: "center",
         opacity: ready ? 0 : 1,
-        // New waiting covers at once; only readiness fades.
+        // New waiting shows at once; only readiness fades.
         transition: ready ? `opacity ${duration}ms ${easing}` : "none",
         pointerEvents: ready ? "none" : undefined,
         ...style
     };
     const progress = steps ? _jsx(StepList, { steps: shown.current }) : _jsx(Message, { message: shown.current.find(step => !step.ready)?.message });
-    // Flat and without a shape of its own by default: the container it fills owns its shape.
-    return _jsx(Surface, { ...paint, depth: depth, radius: radius, role: "status", "aria-hidden": ready || undefined, style: cover, children: progress });
+    return _jsx("div", { className: className, role: "status", "aria-hidden": ready || undefined, style: layer, children: progress });
 }
 function Message({ message }) {
     const metrics = useControlMetrics();

package/dist/main.d.ts

@@ -17,6 +17,7 @@ export { resolveColor, useColor, useContrastingColor, type Color, type ColorLeve
 export { Panel, type PanelProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
 export { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps, type WindowMoveCaptureProps } from "./window.js";
 export { default as useWindowMoveHandle, type WindowMoveHandle } from "./use-window-move-handle.js";
+export { Drawer, type DrawerProps } from "./drawer.js";
 export { Button, type ButtonActionProps, type ButtonColor, type ButtonLinkProps, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";
@@ -36,7 +37,7 @@ export { ListBox, type ListBoxProps, type ListBoxSingleSelectionProps, type List
 export { GridList, type GridListProps, type GridListNoSelectionProps, type GridListSingleSelectionProps, type GridListMultipleSelectionProps, type GridListMultipleValue, type GridListItemProps, type GridListSectionProps, type GridListHeaderProps } from "./grid-list.js";
 export { Tabs, type TabsProps, type TabsListProps, type TabsTabProps, type TabsPanelsProps, type TabsPanelProps } from "./tabs.js";
 export { Table, type TableProps, type TableNoSelectionProps, type TableSingleSelectionProps, type TableMultipleSelectionProps, type TableMultipleValue, type TableSort, type TableSortDirection, type TableHeaderProps, type TableColumnProps, type TableBodyProps, type TableRowProps, type TableCellProps } from "./table.js";
-export { Tree, type TreeProps, type TreeNoSelectionProps, type TreeSingleSelectionProps, type TreeMultipleSelectionProps, type TreeMultipleValue, type TreeItemProps, type TreeContentProps, type TreeCollectionProps } from "./tree.js";
+export { Tree, type TreeProps, type TreeNoSelectionProps, type TreeSingleSelectionProps, type TreeMultipleSelectionProps, type TreeMultipleValue, type TreeItemProps, type TreeContentProps, type TreeCollectionProps, type TreeLoadMoreProps } from "./tree.js";
 export { Slider, type SliderProps } from "./slider.js";
 export { ProgressBar, type ProgressBarProps } from "./progress-bar.js";
 export { Spinner, type SpinnerProps } from "./spinner.js";
@@ -53,13 +54,14 @@ export { Avatar, type AvatarProps } from "./avatar.js";
 export { TagGroup, type TagGroupProps, type TagGroupTagProps } from "./tag-group.js";
 export { Skeleton, type SkeletonProps } from "./skeleton.js";
 export { Snippet, copyText, type SnippetProps } from "./snippet.js";
+export { useDragAndDrop, type DragAndDropHooks, type DragAndDropOptions, type DropItem, type DropOperation, type DirectoryDropItem, type FileDropItem, type TextDropItem } from "./drag-and-drop.js";
 export { toast, ToastRegion, type ToastContent, type ToastOptions, type ToastRegionProps } from "./toast.js";
 export { Readiness, useReadiness, useRequirement, type ReadinessProps, type ReadinessState, type Requirement } from "./readiness.js";
 export { Loading, type LoadingProps } from "./loading.js";
 export { FileTrigger, type FileTriggerProps } from "./file-trigger.js";
 export { DropZone, type DropZoneProps } from "./drop-zone.js";
 export { Fieldset, type FieldsetProps } from "./fieldset.js";
-export { AppLayout, type AppLayoutProps, type AppLayoutRegionProps, type AppLayoutTitleProps } from "./app-layout.js";
+export { AppLayout, type AppLayoutContentProps, type AppLayoutProps, type AppLayoutRegionProps, type AppLayoutSidebarProps, type AppLayoutTitleProps } from "./app-layout.js";
 export { ColorSwatch, type ColorSwatchProps } from "./color-swatch.js";
 export { ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchPickerItemProps } from "./color-swatch-picker.js";
 export { ColorSlider, type ColorSliderProps } from "./color-slider.js";
@@ -71,7 +73,7 @@ export { Toolbar, type ToolbarProps, type ToolbarGroupProps, type ToolbarSeparat
 export { Disclosure, type DisclosureProps, type DisclosureTriggerProps, type DisclosureContentProps } from "./disclosure.js";
 export { Accordion, type AccordionProps, type AccordionSingleExpansionProps, type AccordionMultipleExpansionProps, type AccordionItemProps } from "./accordion.js";
 export { Popover, type PopoverProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverDialogProps, type PopoverTitleProps, type PopoverCloseProps } from "./popover.js";
-export { Menu, type MenuProps, type MenuNoSelectionProps, type MenuSingleSelectionProps, type MenuMultipleSelectionProps, type MenuMultipleValue, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps } from "./menu.js";
+export { Menu, type MenuProps, type MenuNoSelectionProps, type MenuSingleSelectionProps, type MenuMultipleSelectionProps, type MenuMultipleValue, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps, type MenuSubmenuProps, type MenuSubmenuContentProps } from "./menu.js";
 export { DropdownMenu, type DropdownMenuProps, type DropdownMenuTriggerProps } from "./dropdown-menu.js";
 export { ContextMenu, type ContextMenuProps, type ContextMenuTriggerProps, type ContextMenuContentProps } from "./context-menu.js";
 export { Dialog, type DialogProps, type DialogTriggerProps, type DialogBackdropProps, type DialogBackdropVariant, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";

package/dist/main.js

@@ -17,6 +17,7 @@ export { resolveColor, useColor, useContrastingColor } from "./foundation/color.
 export { Panel } from "./panel.js";
 export { Window } from "./window.js";
 export { default as useWindowMoveHandle } from "./use-window-move-handle.js";
+export { Drawer } from "./drawer.js";
 export { Button } from "./button.js";
 export { Input } from "./input.js";
 export { Textarea } from "./textarea.js";
@@ -52,6 +53,7 @@ export { Avatar } from "./avatar.js";
 export { TagGroup } from "./tag-group.js";
 export { Skeleton } from "./skeleton.js";
 export { Snippet, copyText } from "./snippet.js";
+export { useDragAndDrop } from "./drag-and-drop.js";
 export { toast, ToastRegion } from "./toast.js";
 export { Readiness, useReadiness, useRequirement } from "./readiness.js";
 export { Loading } from "./loading.js";

package/dist/menu.d.ts

@@ -4,6 +4,7 @@ import { type MultipleSelectionProps, type MultipleStringSelection, type NoSelec
 import type { Color } from "./foundation/color.js";
 import type { RadiusProps } from "./foundation/radius.js";
 import type { ScaleLevel } from "./foundation/scale.js";
+import { type PopoverContentProps } from "./popover.js";
 type MenuRootBaseProps<T extends object> = Omit<AriaMenuProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onAction" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style" | "shouldFocusWrap" | "shouldCloseOnSelect"> & RadiusProps & Readonly<{
     className?: string;
     /** Whether activating an Item closes the menu. Defaults to `true`. */
@@ -38,12 +39,24 @@ export type MenuItemComponent = <T = object>(properties: MenuItemProps<T> & RefA
 export type MenuSectionProps<T extends object = object> = Omit<AriaMenuSectionProps<T>, "defaultSelectedKeys" | "selectedKeys" | "onSelectionChange" | "selectionMode" | "disallowEmptySelection" | "shouldCloseOnSelect">;
 export type MenuHeaderProps = AriaHeaderProps;
 export type MenuSeparatorProps = AriaSeparatorProps;
+export interface MenuSubmenuProps {
+    /** The Item that opens the Submenu, then its `Menu.Submenu.Content`. */
+    readonly children: [ReactElement, ReactElement];
+    /** Milliseconds the pointer rests on the Item before the Submenu opens. */
+    readonly delay?: number;
+}
+/** An Item that opens another Menu beside it. */
+declare function MenuSubmenu({ children, delay }: MenuSubmenuProps): import("react").JSX.Element;
+export type MenuSubmenuContentProps = Omit<PopoverContentProps, "placement">;
 /** A keyboard-navigable collection of commands or selectable options. */
 export declare const Menu: MenuRootComponent & {
     Item: MenuItemComponent;
     Section: <T extends object = object>(properties: MenuSectionProps<T>) => ReactElement | null;
     Header: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
     Separator: import("react").ForwardRefExoticComponent<AriaSeparatorProps & RefAttributes<HTMLElement>>;
+    Submenu: typeof MenuSubmenu & {
+        Content: import("react").ForwardRefExoticComponent<MenuSubmenuContentProps & RefAttributes<HTMLElement>>;
+    };
 };
 export type MenuProps<T extends object = object> = MenuRootProps<T>;
 export {};

package/dist/menu.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
-import { Header as AriaHeader, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, Separator as AriaSeparator } from "react-aria-components";
-import { useControlMetrics } from "./control/control.js";
+import { Header as AriaHeader, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, Separator as AriaSeparator, SubmenuTrigger as AriaSubmenuTrigger } from "react-aria-components";
+import { ChevronRight } from "lucide-react";
+import { controlOpacity, useControlMetrics } from "./control/control.js";
 import { separatorColor } from "./control/field.js";
 import { itemStyle, itemSurface, SelectionMark } from "./control/item.js";
 import { ariaSelection, stringKey } from "./control/selection.js";
 import { surfaceRender } from "./control/surface-render.js";
 import { collectionHeaderStyle } from "./list-box.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { iconProps } from "./control/icon.js";
+import { MenuContent } from "./popover.js";
 const MenuStyleContext = createContext(null);
 const MenuRootImplementation = forwardRef(function Menu(properties, ref) {
     const { className, closeOnSelect, color = "primary", defaultValue: _defaultValue, focusWrap, onAction, onChange: _onChange, radius, selectionMode = "none", size, style, value: _value, ...native } = properties;
@@ -30,6 +34,7 @@ const MenuRootImplementation = forwardRef(function Menu(properties, ref) {
 const MenuItemImplementation = forwardRef(function MenuItem({ children, className, closeOnSelect, color, disabled = false, style, textValue, ...properties }, ref) {
     const { color: inherited, metrics, itemRadius, selecting } = useMenuStyle();
     const itemColor = color ?? inherited;
+    const direction = resolveDirection(properties.dir, useDirection());
     return _jsx(AriaMenuItem, { ...properties, shouldCloseOnSelect: closeOnSelect, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => itemSurface(metrics.visual, itemColor, {
             selected: state.isSelected,
             // Keyboard focus moves the highlight through a menu the way the pointer does;
@@ -38,7 +43,7 @@ const MenuItemImplementation = forwardRef(function MenuItem({ children, classNam
             pressed: state.isPressed,
             focusVisible: false,
             disabled: state.isDisabled
-        }, itemRadius)), style: { ...itemStyle(metrics, disabled), ...style }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, selecting && _jsx(SelectionMark, { visible: state.isSelected })] }) });
+        }, itemRadius)), style: { ...itemStyle(metrics, disabled), ...style }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, selecting && _jsx(SelectionMark, { visible: state.isSelected }), state.hasSubmenu && _jsx(ChevronRight, { ...iconProps(14), style: { marginInlineStart: "auto", opacity: controlOpacity.secondary, rotate: direction === "rtl" ? "180deg" : undefined } })] }) });
 });
 const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
     const { metrics } = useMenuStyle();
@@ -55,6 +60,14 @@ const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }
             ...style
         } });
 });
+/** An Item that opens another Menu beside it. */
+function MenuSubmenu({ children, delay }) {
+    return _jsx(AriaSubmenuTrigger, { delay: delay, children: children });
+}
+/** The Submenu's own Menu, opening beside its Item toward the reading direction's end. */
+const MenuSubmenuContent = forwardRef(function MenuSubmenuContent(properties, ref) {
+    return _jsx(MenuContent, { ...properties, ref: ref, placement: "end top" });
+});
 function useMenuStyle() {
     const context = useContext(MenuStyleContext);
     if (context == null)
@@ -66,5 +79,6 @@ export const Menu = Object.assign(MenuRootImplementation, {
     Item: MenuItemImplementation,
     Section: AriaMenuSection,
     Header: MenuHeader,
-    Separator: MenuSeparator
+    Separator: MenuSeparator,
+    Submenu: Object.assign(MenuSubmenu, { Content: MenuSubmenuContent })
 });

package/dist/spinner.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ProgressBar as AriaProgressBar } from "react-aria-components";
 import { useControlMetrics } from "./control/control.js";
-import { colorOpacity, resolveColor } from "./foundation/color.js";
-import MotionStyle from "./foundation/motion-style.js";
+import { resolveColor } from "./foundation/color.js";
+import MotionStyle, { loopDuration } from "./foundation/motion-style.js";
 import { scale } from "./foundation/scale.js";
 /** A standalone status stays visibly distinct from the compact control indicator. */
 export function spinnerDiameter(spacing, size) {
@@ -25,7 +25,7 @@ export const Spinner = forwardRef(function Spinner({ className, color = "primary
         verticalAlign: "middle",
         ...style
     };
-    const indicator = _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsxs("svg", { "data-spinner-indicator": "", "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", style: { display: "block", animation: metrics.visual.duration > 0 ? `phreshos-ui-spin ${Math.max(600, metrics.visual.appearance.transaction.duration * 5)}ms linear infinite` : undefined }, children: [_jsx("circle", { "data-spinner-track": "", cx: "12", cy: "12", r: "9", stroke: colorOpacity(arc, 0.2), strokeWidth: "3" }), _jsx("circle", { "data-spinner-fill": "", cx: "12", cy: "12", r: "9", pathLength: "100", stroke: arc, strokeWidth: "3", strokeLinecap: "round", strokeDasharray: "30 70" })] })] });
+    const indicator = _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx("svg", { "data-spinner-indicator": "", "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", style: { display: "block", animation: metrics.visual.duration > 0 ? `phreshos-ui-spin ${loopDuration(metrics.visual)}ms linear infinite` : undefined }, children: _jsx("circle", { "data-spinner-fill": "", cx: "12", cy: "12", r: "11", pathLength: "100", stroke: arc, strokeWidth: "2", strokeDasharray: "75 25", transform: "rotate(-90 12 12)" }) })] });
     if (decorative)
         return _jsx("div", { ...properties, ref: ref, "aria-hidden": "true", className: className, style: rootStyle, children: indicator });
     return _jsx(AriaProgressBar, { ...properties, ref: ref, "aria-label": label, className: className, isIndeterminate: true, style: rootStyle, children: indicator });

package/dist/table.js

@@ -3,7 +3,7 @@ import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableHeader as AriaTableHeader } from "react-aria-components";
 import { controlFontWeight, controlOpacity, transition, useControlMetrics, secondaryFontSize } from "./control/control.js";
 import { separatorColor } from "./control/field.js";
-import { itemPaint } from "./control/item.js";
+import { dropTargetOutline, itemPaint } from "./control/item.js";
 import { ariaSelection, stringKey } from "./control/selection.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { colorOpacity } from "./foundation/color.js";
@@ -18,7 +18,7 @@ const TableRoot = forwardRef(function Table(properties, ref) {
     const metrics = useControlMetrics(size, radius);
     const context = useMemo(() => ({ color, interactive: selectionMode !== "none" || onAction != null, metrics }), [color, metrics, onAction, selectionMode]);
     const direction = resolveDirection(native.dir, useDirection());
-    return _jsx(TableStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTable, { ...native, shouldSelectOnPressUp: selectOnPressUp, ...ariaSelection(properties, "none"), ...(sort === undefined ? {} : { sortDescriptor: sort }), ref: ref, dir: direction, className: className, onRowAction: onAction == null ? undefined : key => onAction(stringKey(key)), onSortChange: onSortChange == null ? undefined : descriptor => onSortChange(tableSort(descriptor)), style: {
+    return _jsx(TableStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTable, { ...native, shouldSelectOnPressUp: selectOnPressUp, ...ariaSelection(properties, "none"), ...(sort === undefined ? {} : { sortDescriptor: sort }), ref: ref, dir: direction, className: className, onRowAction: onAction == null ? undefined : key => onAction(stringKey(key)), onSortChange: onSortChange == null ? undefined : descriptor => onSortChange(tableSort(descriptor)), style: state => ({
                     width: "100%",
                     minWidth: "max-content",
                     borderCollapse: "separate",
@@ -29,8 +29,9 @@ const TableRoot = forwardRef(function Table(properties, ref) {
                     overflow: "hidden",
                     fontFamily: "inherit",
                     fontSize: metrics.fontSize,
+                    ...dropTargetOutline(metrics, state.isDropTarget),
                     ...style
-                } }) }) });
+                }) }) }) });
 });
 function tableSort(descriptor) {
     return { column: stringKey(descriptor.column), direction: descriptor.direction };
@@ -68,7 +69,8 @@ const TableRowImplementation = forwardRef(function TableRow({ className, disable
     return _jsx(AriaRow, { ...properties, ref: ref, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", isDisabled: disabled, onAction: onAction, style: state => ({
             ...transition(metrics.visual, "background-color, color, outline-color"),
             ...itemPaint(metrics.visual, color, {
-                selected: state.isSelected,
+                // What a drag would drop into shows as chosen.
+                selected: state.isSelected || state.isDropTarget === true,
                 hovered: responds && state.isHovered,
                 pressed: responds && state.isPressed,
                 focusVisible: false,

package/dist/tooltip.d.ts

@@ -4,7 +4,9 @@ import { type ButtonActionProps } from "./button.js";
 import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
 import { type Direction } from "./foundation/direction.js";
 import { type SurfaceOwnProps } from "./surface/surface.js";
-export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTriggerProps, "delay" | "closeDelay" | "trigger">> & Readonly<{
+export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTriggerProps, "closeDelay" | "trigger">> & Readonly<{
+    /** Milliseconds the pointer rests on the trigger before the Tooltip opens: four Appearance transactions by default. */
+    delay?: number;
     /** Whether the Tooltip is prevented from opening. */
     disabled?: boolean;
     /** Whether pressing the trigger closes the Tooltip. Defaults to `true`. */
@@ -18,6 +20,8 @@ export interface TooltipContentProps extends Omit<AriaTooltipProps, AriaOverlayI
     readonly children?: ReactNode;
     readonly className?: string;
     readonly dir?: Direction;
+    /** DOM container that owns the positioned overlay's coordinate space. */
+    readonly portalContainer?: Element;
     readonly style?: CSSProperties;
 }
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tooltip.js

@@ -12,17 +12,19 @@ import { useVisual } from "./foundation/visual.js";
 import { floatingShadow } from "./surface/shadow-options.js";
 import { Surface } from "./surface/surface.js";
 export function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }) {
-    return _jsx(AriaTooltipTrigger, { ...ariaOpenState(state), delay: delay, closeDelay: closeDelay, trigger: trigger, isDisabled: disabled, shouldCloseOnPress: closeOnPress, children: children });
+    // A pointer resting on a trigger for four Appearance transactions is asking what it is.
+    const rest = useVisual().appearance.transaction.duration * 4;
+    return _jsx(AriaTooltipTrigger, { ...ariaOpenState(state), delay: delay ?? rest, closeDelay: closeDelay, trigger: trigger, isDisabled: disabled, shouldCloseOnPress: closeOnPress, children: children });
 }
 export const TooltipTrigger = forwardRef(function TooltipTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", dir, ...attributes }, ref) {
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", dir, portalContainer, ...attributes }, ref) {
     const visual = useVisual();
     const inset = scale(visual.spacing, "small");
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
                         boxSizing: "border-box",
                         maxWidth: "28em",
                         paddingBlock: inset,

package/dist/tree.d.ts

@@ -41,11 +41,21 @@ export interface TreeContentProps extends AriaTreeItemContentProps {
     readonly children: AriaTreeItemContentProps["children"];
 }
 export type TreeCollectionProps<T extends object = object> = AriaCollectionProps<T>;
+export type TreeLoadMoreProps = Readonly<{
+    /** Asks for more Items once the end of the list comes near while scrolling. */
+    onLoadMore: () => void;
+}>;
+/**
+ * The end of a list shown in parts, such as a long folder: when scrolling brings it near, the
+ * list is asked for more. It is placed after the Items it follows, at their level, and draws nothing.
+ */
+declare function TreeLoadMore({ onLoadMore }: TreeLoadMoreProps): import("react").JSX.Element;
 /** Hierarchical navigation with independently controlled expansion, selection, and actions. */
 export declare const Tree: TreeRootComponent & {
     Item: TreeItemComponent;
     Content: import("react").ForwardRefExoticComponent<TreeContentProps & RefAttributes<Element>>;
     Collection: typeof AriaCollection;
+    LoadMore: typeof TreeLoadMore;
 };
 export type TreeProps<T extends object = object> = TreeRootProps<T>;
 export {};

package/dist/tree.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
-import { Button as AriaButton, Collection as AriaCollection, Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent } from "react-aria-components";
+import { Button as AriaButton, Collection as AriaCollection, Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, TreeLoadMoreItem as AriaTreeLoadMoreItem } from "react-aria-components";
 import { proportionalRadius, transition, useControlMetrics } from "./control/control.js";
-import { itemPaint, itemStyle } from "./control/item.js";
+import { dropTargetOutline, itemPaint, itemStyle } from "./control/item.js";
 import { ariaSelection, stringKey, stringKeys } from "./control/selection.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { colorOpacity } from "./foundation/color.js";
@@ -18,7 +18,7 @@ const TreeRootImplementation = forwardRef(function Tree(properties, ref) {
     const itemRadius = metrics.radius;
     const direction = resolveDirection(native.dir, useDirection());
     const context = useMemo(() => ({ color, direction, interactive: selectionMode !== "none" || onAction != null, metrics, itemRadius }), [color, direction, metrics, itemRadius, onAction, selectionMode]);
-    return _jsx(TreeStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTree, { ...native, shouldSelectOnPressUp: selectOnPressUp, ...ariaSelection(properties, "none"), ...(expanded !== undefined ? { expandedKeys: new Set(expanded) } : {}), ...(defaultExpanded !== undefined ? { defaultExpandedKeys: new Set(defaultExpanded) } : {}), ...(onExpandedChange !== undefined ? { onExpandedChange: (keys) => onExpandedChange(stringKeys(keys)) } : {}), ref: ref, dir: direction, className: className, onAction: onAction == null ? undefined : key => onAction(stringKey(key)), style: {
+    return _jsx(TreeStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTree, { ...native, shouldSelectOnPressUp: selectOnPressUp, ...ariaSelection(properties, "none"), ...(expanded !== undefined ? { expandedKeys: new Set(expanded) } : {}), ...(defaultExpanded !== undefined ? { defaultExpandedKeys: new Set(defaultExpanded) } : {}), ...(onExpandedChange !== undefined ? { onExpandedChange: (keys) => onExpandedChange(stringKeys(keys)) } : {}), ref: ref, dir: direction, className: className, onAction: onAction == null ? undefined : key => onAction(stringKey(key)), style: state => ({
                     display: "grid",
                     alignContent: "start",
                     gap: 2,
@@ -28,8 +28,10 @@ const TreeRootImplementation = forwardRef(function Tree(properties, ref) {
                     outline: "none",
                     fontFamily: "inherit",
                     fontSize: metrics.fontSize,
+                    borderRadius: metrics.radius,
+                    ...dropTargetOutline(metrics, state.isDropTarget),
                     ...style
-                } }) }) });
+                }) }) }) });
 });
 /** Tree entries use the collection Item treatment as their own paint. */
 const TreeItemImplementation = forwardRef(function TreeItem({ arrowNavigation, className, disabled = false, expandable, onAction, style, ...properties }, ref) {
@@ -39,7 +41,8 @@ const TreeItemImplementation = forwardRef(function TreeItem({ arrowNavigation, c
             return {
                 ...itemStyle(metrics, state.isDisabled),
                 ...itemPaint(metrics.visual, color, {
-                    selected: state.isSelected,
+                    // What a drag would drop into shows as chosen.
+                    selected: state.isSelected || state.isDropTarget === true,
                     hovered: responds && state.isHovered,
                     pressed: responds && state.isPressed,
                     focusVisible: false,
@@ -75,6 +78,13 @@ const TreeContent = forwardRef(function TreeContent({ children }, ref) {
                         }), children: _jsx(ChevronRight, { ...iconProps(14), style: { ...transition(metrics.visual, "rotate"), rotate: state.isExpanded ? "90deg" : direction === "rtl" ? "180deg" : "0deg" } }) })
                     : _jsx("span", { "aria-hidden": "true", style: { flex: `0 0 ${box}px` } }), _jsx("span", { style: { flex: "1 1 auto", minWidth: 0, display: "flex", alignItems: "center", gap: metrics.gap }, children: typeof children === "function" ? children(state) : children })] }) });
 });
+/**
+ * The end of a list shown in parts, such as a long folder: when scrolling brings it near, the
+ * list is asked for more. It is placed after the Items it follows, at their level, and draws nothing.
+ */
+function TreeLoadMore({ onLoadMore }) {
+    return _jsx(AriaTreeLoadMoreItem, { onLoadMore: onLoadMore });
+}
 function useTreeStyle() {
     const context = useContext(TreeStyleContext);
     if (context == null)
@@ -85,5 +95,6 @@ function useTreeStyle() {
 export const Tree = Object.assign(TreeRootImplementation, {
     Item: TreeItemImplementation,
     Content: TreeContent,
-    Collection: AriaCollection
+    Collection: AriaCollection,
+    LoadMore: TreeLoadMore
 });

package/dist/use-window-move-handle.d.ts

@@ -1,4 +1,4 @@
-import type { BeginWindowMoveGesture } from "@phreshos/core";
+import type { BeginPresentationMoveGesture } from "@phreshos/core";
 import { type PointerEventHandler } from "react";
 export interface WindowMoveHandle {
     onPointerDown: PointerEventHandler<HTMLElement>;
@@ -8,4 +8,4 @@ export interface WindowMoveHandle {
     onLostPointerCapture: PointerEventHandler<HTMLElement>;
 }
 /** Turns one DOM element into a move handle for any compatible host gesture. */
-export default function useWindowMoveHandle(beginMoveGesture?: BeginWindowMoveGesture, onError?: (error: unknown) => void): WindowMoveHandle;
+export default function useWindowMoveHandle(beginMoveGesture?: BeginPresentationMoveGesture, onError?: (error: unknown) => void): WindowMoveHandle;

package/dist/window.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
-import type { BeginWindowMoveGesture } from "@phreshos/core";
+import type { BeginPresentationMoveGesture } from "@phreshos/core";
 import { type ButtonActionProps } from "./button.js";
 import { type Color } from "./foundation/color.js";
 import { type SurfaceProps } from "./surface/surface.js";
@@ -16,7 +16,7 @@ export interface WindowHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
     /** Base color inherited by header-owned text and icons. */
     readonly color?: Color;
     /** Hands an intentional header drag to its host after the pointer threshold. */
-    readonly beginMoveGesture?: BeginWindowMoveGesture;
+    readonly beginMoveGesture?: BeginPresentationMoveGesture;
     /** Whether the represented window is currently maximized. */
     readonly maximized?: boolean;
     /** Toggles the represented window between maximized and restored states. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -57,7 +57,7 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@internationalized/date": "^3.12.3",
-    "@phreshos/core": "^0.1.65",
+    "@phreshos/core": "^0.1.67",
     "colorjs.io": "^0.7.1",
     "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",