@phreshos/react-ui 0.1.47 → 0.1.49

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/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/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/dialog.js

@@ -53,9 +53,12 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
     const padding = containerPadding(visual.spacing);
     const transition = overlayTransition(visual);
     const direction = resolveDirection(properties.dir, useDirection());
+    // The width belongs to the centered modal, so a Dialog of any width stays centered; the Surface fills it.
+    const { width = "32rem", maxWidth, ...surfaceStyle } = style ?? {};
     return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
                     ...transition,
-                    width: `min(32rem, calc(100vw - ${inset * 2}px))`,
+                    width,
+                    maxWidth: maxWidth ?? `calc(100vw - ${inset * 2}px)`,
                     maxHeight: `calc(100vh - ${inset * 2}px)`,
                     outline: "none"
                 }, children: _jsx(Surface, { className: className, color: color, material: material, 
@@ -67,7 +70,7 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
                         maxHeight: "inherit",
                         padding,
                         overflow: "hidden",
-                        ...style
+                        ...surfaceStyle
                     }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
                             display: "grid",
                             gap: inset,

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/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/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

@@ -36,7 +36,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 +53,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 +72,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

@@ -52,6 +52,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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "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.66",
     "colorjs.io": "^0.7.1",
     "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",