@phreshos/react-ui 0.1.52 → 0.2.0

package/dist/app-layout.d.ts

@@ -1,5 +1,7 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { type SurfaceDepth } from "./surface/surface.js";
+/** At this width or less, a sidebar beside the content would crowd it out. */
+export declare const narrowAppLayoutWidth = 640;
 export interface AppLayoutProps extends HTMLAttributes<HTMLDivElement> {
     readonly children: ReactNode;
     /** The sidebar's width; eighteen times the Appearance spacing by default. */
@@ -15,16 +17,26 @@ export type AppLayoutSidebarProps = AppLayoutRegionProps & Readonly<{
     footer?: ReactNode;
 }>;
 export type AppLayoutTitleProps = HTMLAttributes<HTMLHeadingElement>;
+/** In a narrow layout, the button that opens the sidebar's Drawer; otherwise nothing. */
+declare function AppLayoutSidebarToggle(): import("react").JSX.Element | null;
+/** Whether the nearest AppLayout is narrow, and closing its sidebar's Drawer, such as after a choice in it. */
+export declare function useAppLayout(): {
+    narrow: boolean;
+    closeSidebar: () => void;
+};
 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 & Readonly<{
         /** What stays at the foot of the sidebar while the rest scrolls, such as work in progress. */
         footer?: ReactNode;
     }> & import("react").RefAttributes<HTMLElement>>;
+    SidebarToggle: typeof AppLayoutSidebarToggle;
     Header: 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>>;
+    Placeholder: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<AppLayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
 };
+export {};

package/dist/app-layout.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { PanelLeft } from "lucide-react";
+import { Button } from "./button.js";
 import { controlFontSizes, controlFontWeight } from "./control/control.js";
 import { headerHeight } from "./foundation/layout.js";
 import { resolveRadius } from "./foundation/radius.js";
@@ -8,39 +10,69 @@ import { useVisual } from "./foundation/visual.js";
 import { ScrollArea } from "./scroll-area.js";
 import { Surface } from "./surface/surface.js";
 import { containerPadding } from "./foundation/spacing.js";
-const AppLayoutContext = createContext(false);
+import { Drawer } from "./drawer.js";
+/** At this width or less, a sidebar beside the content would crowd it out. */
+export const narrowAppLayoutWidth = 640;
+const AppLayoutContext = createContext(null);
+// Kept apart from the state, so a part that names itself does not render again when it is read.
+const AppLayoutRegistry = createContext(null);
 /**
  * The frame of a program's interface: a title above a sidebar, and a header,
  * the content, and an optional footer beside them. Only the content is a
  * Surface, the same inset region as a Panel's content; the other regions sit
  * on whatever holds the layout, separated by spacing alone.
+ *
+ * At `narrowAppLayoutWidth` or less it gives the content the whole width: the title and sidebar
+ * wait in a Drawer, which `AppLayout.SidebarToggle` opens.
  */
 const AppLayoutRoot = forwardRef(function AppLayout({ children, sidebarWidth, style, ...properties }, ref) {
     const visual = useVisual();
     const inset = scale(visual.spacing, "small");
-    return _jsx(AppLayoutContext.Provider, { value: true, children: _jsx("div", { ...properties, ref: ref, style: {
-                display: "grid",
-                gridTemplateColumns: `${typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth ?? `${visual.spacing * 18}px`} minmax(0, 1fr)`,
-                gridTemplateRows: "auto minmax(0, 1fr) auto",
-                gridTemplateAreas: `"title header" "sidebar content" "sidebar footer"`,
-                columnGap: inset,
-                // The header row supplies the space above the content, as in a Panel.
-                padding: inset,
-                paddingTop: 0,
-                boxSizing: "border-box",
-                width: "100%",
-                height: "100%",
-                minWidth: 0,
-                minHeight: 0,
-                // The frame of a program: its text takes the Appearance text color.
-                color: visual.colors.foreground,
-                fontFamily: "inherit",
-                ...style
-            }, children: children }) });
+    const [element, setElement] = useState(null);
+    const narrow = useNarrow(element);
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [title, setTitle] = useState(null);
+    const [sidebarLabel, setSidebarLabel] = useState(undefined);
+    const attach = useCallback((value) => { setElement(value); assign(ref, value); }, [ref]);
+    // Widening puts the sidebar back beside the content, so its Drawer has nothing left to hold.
+    useEffect(() => { if (!narrow)
+        setSidebarOpen(false); }, [narrow]);
+    const state = useMemo(() => ({ narrow, sidebarOpen, setSidebarOpen, title, sidebarLabel }), [narrow, sidebarOpen, title, sidebarLabel]);
+    const registry = useMemo(() => ({ setTitle, setSidebarLabel }), []);
+    return _jsx(AppLayoutRegistry.Provider, { value: registry, children: _jsx(AppLayoutContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: attach, style: {
+                    position: "relative",
+                    display: "grid",
+                    gridTemplateColumns: narrow ? "minmax(0, 1fr)" : `${typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth ?? `${visual.spacing * 18}px`} minmax(0, 1fr)`,
+                    gridTemplateRows: "auto minmax(0, 1fr) auto",
+                    gridTemplateAreas: narrow ? `"header" "content" "footer"` : `"title header" "sidebar content" "sidebar footer"`,
+                    columnGap: narrow ? 0 : inset,
+                    // The header row supplies the space above the content, as in a Panel.
+                    padding: inset,
+                    paddingTop: 0,
+                    boxSizing: "border-box",
+                    width: "100%",
+                    height: "100%",
+                    minWidth: 0,
+                    minHeight: 0,
+                    // The frame of a program: its text takes the Appearance text color.
+                    color: visual.colors.foreground,
+                    fontFamily: "inherit",
+                    ...style
+                }, children: children }) }) });
 });
-/** The program's title above the sidebar, in the header row. */
-const AppLayoutTitle = forwardRef(function AppLayoutTitle({ style, ...properties }, ref) {
+const visuallyHidden = {
+    position: "absolute", width: 1, height: 1, margin: -1, padding: 0, border: 0,
+    overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap"
+};
+/** The program's title above the sidebar, in the header row; in a narrow layout, atop its Drawer. */
+const AppLayoutTitle = forwardRef(function AppLayoutTitle({ style, children, ...properties }, ref) {
     const { spacing } = useLayout();
+    const { narrow } = useLayoutState();
+    const { setTitle } = useRegistry();
+    useLayoutEffect(() => { setTitle(children); return () => setTitle(null); }, [children, setTitle]);
+    // Out of sight while narrow, but still the page's heading, so what is named by it keeps its name.
+    if (narrow)
+        return _jsx("h1", { ...properties, ref: ref, style: visuallyHidden, children: children });
     return _jsx("h1", { ...properties, ref: ref, style: {
             gridArea: "title",
             display: "flex",
@@ -52,12 +84,22 @@ const AppLayoutTitle = forwardRef(function AppLayoutTitle({ style, ...properties
             fontSize: controlFontSizes.large,
             fontWeight: controlFontWeight,
             ...style
-        } });
+        }, children: children });
 });
-/** The sidebar, such as a program's navigation. It scrolls on its own, above its footer. */
+/**
+ * The sidebar, such as a program's navigation. It scrolls on its own, above its footer. In a
+ * narrow layout it waits in a Drawer under the title; choosing something in it is the program's to
+ * follow with `useAppLayout().closeSidebar()`.
+ */
 const AppLayoutSidebar = forwardRef(function AppLayoutSidebar({ children, footer, style, ...properties }, ref) {
     const { spacing } = useLayout();
+    const { narrow, sidebarOpen, setSidebarOpen, title } = useLayoutState();
+    const { setSidebarLabel } = useRegistry();
     const padding = scale(spacing, "small");
+    const label = properties["aria-label"];
+    useLayoutEffect(() => { setSidebarLabel(label); return () => setSidebarLabel(undefined); }, [label, setSidebarLabel]);
+    if (narrow)
+        return _jsxs(Drawer, { open: sidebarOpen, onClose: () => setSidebarOpen(false), title: title, "aria-label": label, children: [children, footer != null && _jsx("div", { style: { paddingTop: padding }, children: footer })] });
     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. */
@@ -73,7 +115,10 @@ const AppLayoutHeader = forwardRef(function AppLayoutHeader({ style, ...properti
             ...style
         } });
 });
-/** The content, on its Surface. It scrolls on its own, padded by the Appearance spacing. */
+/**
+ * The content, on its Surface. It scrolls on its own, padded by the Appearance spacing. It is a size
+ * container, so what stands in for the content can fill what shows of it.
+ */
 const AppLayoutContent = forwardRef(function AppLayoutContent({ children, depth = "recessed", style, ...properties }, ref) {
     const { spacing, radius } = useLayout();
     return _jsx(Surface, { as: "main", ...properties, ref: ref, depth: depth, material: "extended", radius: resolveRadius("medium", radius), style: {
@@ -82,9 +127,26 @@ const AppLayoutContent = forwardRef(function AppLayoutContent({ children, depth
             minHeight: 0,
             // The Surface owns its shape: what scrolls inside stays within its corners.
             overflow: "clip",
+            containerType: "size",
             ...style
         }, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsx("div", { style: { padding: containerPadding(spacing) }, children: children }) }) });
 });
+/**
+ * What stands in for the content while there is none to show: a wait, what went wrong, or that there
+ * is nothing. It stands in the middle of the content, wherever the content would have been.
+ */
+const AppLayoutPlaceholder = forwardRef(function AppLayoutPlaceholder({ style, ...properties }, ref) {
+    const { spacing } = useLayout();
+    return _jsx("div", { ...properties, ref: ref, style: {
+            display: "grid",
+            placeItems: "center",
+            alignContent: "center",
+            gap: scale(spacing, "medium"),
+            textAlign: "center",
+            minHeight: `calc(100cqh - ${containerPadding(spacing) * 2}px)`,
+            ...style
+        } });
+});
 /** An optional row below the content, such as the actions that apply to it. */
 const AppLayoutFooter = forwardRef(function AppLayoutFooter({ style, ...properties }, ref) {
     const { spacing } = useLayout();
@@ -99,15 +161,66 @@ const AppLayoutFooter = forwardRef(function AppLayoutFooter({ style, ...properti
             ...style
         } });
 });
-function useLayout() {
-    if (!useContext(AppLayoutContext))
+/** In a narrow layout, the button that opens the sidebar's Drawer; otherwise nothing. */
+function AppLayoutSidebarToggle() {
+    const { narrow, sidebarOpen, setSidebarOpen, sidebarLabel } = useLayoutState();
+    if (!narrow)
+        return null;
+    return _jsx(Button, { iconOnly: true, depth: "flat", size: "small", "aria-label": sidebarLabel ?? "Sidebar", "aria-expanded": sidebarOpen, onPress: () => setSidebarOpen(!sidebarOpen), children: _jsx(PanelLeft, {}) });
+}
+/** Whether the nearest AppLayout is narrow, and closing its sidebar's Drawer, such as after a choice in it. */
+export function useAppLayout() {
+    const { narrow, setSidebarOpen } = useLayoutState();
+    const closeSidebar = useCallback(() => setSidebarOpen(false), [setSidebarOpen]);
+    return useMemo(() => ({ narrow, closeSidebar }), [narrow, closeSidebar]);
+}
+function useLayoutState() {
+    const state = useContext(AppLayoutContext);
+    if (!state)
+        throw new Error("AppLayout parts must be used inside AppLayout");
+    return state;
+}
+function useRegistry() {
+    const registry = useContext(AppLayoutRegistry);
+    if (!registry)
         throw new Error("AppLayout parts must be used inside AppLayout");
+    return registry;
+}
+function useLayout() {
+    useLayoutState();
     return useVisual();
 }
+/** Follows whether the layout itself, not the window, is narrow. */
+function useNarrow(element) {
+    const [narrow, setNarrow] = useState(false);
+    useLayoutEffect(() => {
+        if (!element)
+            return;
+        // A width of 0 is a layout not laid out yet, not a narrow one.
+        const follow = (width) => { if (width > 0)
+            setNarrow(width <= narrowAppLayoutWidth); };
+        follow(element.getBoundingClientRect().width);
+        if (typeof ResizeObserver !== "function")
+            return;
+        const observer = new ResizeObserver(([entry]) => { if (entry)
+            follow(entry.contentRect.width); });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element]);
+    return narrow;
+}
+function assign(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
 export const AppLayout = Object.assign(AppLayoutRoot, {
     Title: AppLayoutTitle,
     Sidebar: AppLayoutSidebar,
+    SidebarToggle: AppLayoutSidebarToggle,
     Header: AppLayoutHeader,
     Content: AppLayoutContent,
+    Placeholder: AppLayoutPlaceholder,
     Footer: AppLayoutFooter
 });

package/dist/color-field.d.ts

@@ -12,6 +12,8 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, ControlOverri
 }
 /**
  * A color typed as text: a hex value, or one channel when `channel` is set.
- * Inside a ColorPicker it edits the picker's color.
+ * Inside a ColorPicker it edits the picker's color. A hex value applies as soon
+ * as it is a whole color, as the picker's other parts apply while they move,
+ * not only when the field is left.
  */
 export declare const ColorField: import("react").ForwardRefExoticComponent<ColorFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/color-field.js

@@ -1,17 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { ColorField as AriaColorField, Input as AriaInput } from "react-aria-components";
+import { forwardRef, useContext } from "react";
+import { ColorField as AriaColorField, ColorPickerStateContext, Input as AriaInput, parseColor } from "react-aria-components";
 import { colorValue } from "./control/color-value.js";
 import { useControlMetrics } from "./control/control.js";
 import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { nativeTextStyle, TextWell } from "./control/text-control.js";
 import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
 import { dimmedClass } from "./surface/surface.js";
+/**
+ * A whole six-digit hex color, with or without its `#`. A three-digit one is
+ * also the start of a six-digit one, so it waits until the field is left.
+ */
+const completeHex = /^#?[\da-f]{6}$/i;
 /**
  * A color typed as text: a hex value, or one channel when `channel` is set.
- * Inside a ColorPicker it edits the picker's color.
+ * Inside a ColorPicker it edits the picker's color. A hex value applies as soon
+ * as it is a whole color, as the picker's other parts apply while they move,
+ * not only when the field is left.
  */
 export const ColorField = forwardRef(function ColorField({ label, description, errorMessage, disabled, readOnly, required, invalid, value, defaultValue, onChange, size, color = "background", radius, style, className, placeholder, material, ...properties }, ref) {
     const metrics = useControlMetrics(size, radius);
-    return _jsxs(AriaColorField, { ...properties, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (next) => onChange(next === null ? null : colorValue(next)) } : {}), className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(TextWell, { color: color, material: material, metrics: metrics, state: state, children: _jsx("input", { ...native }) }), style: { ...nativeTextStyle(metrics, false), fontVariantNumeric: "tabular-nums" } }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
+    const picker = useContext(ColorPickerStateContext);
+    function typed(text) {
+        if (properties.channel !== undefined || !completeHex.test(text.trim()))
+            return;
+        const next = parseColor(text.trim().startsWith("#") ? text.trim() : `#${text.trim()}`);
+        if (picker)
+            picker.setColor(next);
+        else
+            onChange?.(colorValue(next));
+    }
+    return _jsxs(AriaColorField, { ...properties, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (next) => onChange(next === null ? null : colorValue(next)) } : {}), className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(TextWell, { color: color, material: material, metrics: metrics, state: state, children: _jsx("input", { ...native, onChange: event => { native.onChange?.(event); typed(event.currentTarget.value); } }) }), style: { ...nativeTextStyle(metrics, false), fontVariantNumeric: "tabular-nums" } }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
 });

package/dist/dialog.d.ts

@@ -21,13 +21,7 @@ export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, AriaOve
     /** Whether Escape closes the Dialog. */
     readonly keyboardDismissable?: boolean;
     readonly style?: CSSProperties;
-    /**
-     * How the interface behind the Dialog is held back: `dim` darkens it, and
-     * `blur` blurs it with the Appearance material while darkening it lightly.
-     */
-    readonly variant?: DialogBackdropVariant;
 }
-export type DialogBackdropVariant = "dim" | "blur";
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DialogContentProps extends Omit<AriaDialogProps, "children" | "className" | "style">, SurfaceOwnProps {
     readonly children?: AriaDialogProps["children"];

package/dist/dialog.js

@@ -18,21 +18,25 @@ export function DialogRoot({ children, ...state }) {
 export const DialogTrigger = forwardRef(function DialogTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-// A blurred backdrop still dims a little, so the Dialog stays distinct on a
-// light canvas where blur alone barely separates it.
-const backdropDimming = { dim: 0.32, blur: 0.16 };
-export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, className, dir, dismissable = false, keyboardDismissable = true, style, variant = "dim", ...attributes }, ref) {
+/** How far every backdrop darkens the interface behind a Dialog. */
+const backdropDimming = 0.5;
+/** The share of the Appearance material's blur a backdrop takes: lighter than a frosted Surface. */
+const backdropBlurShare = 0.5;
+export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, className, dir, dismissable = false, keyboardDismissable = true, style, ...attributes }, ref) {
     const visual = useVisual();
     const inset = scale(visual.spacing, "medium");
     const colors = visual.colors;
     // The backdrop dims toward whichever Appearance color is darker, in any Theme.
     const darker = darkCanvas(colors) ? colors.background : colors.foreground;
-    const backdrop = colorOpacity(darker, backdropDimming[variant]);
-    const blur = variant === "blur" && visual.material.backdrop > 0 ? `blur(${visual.material.backdrop}px)` : undefined;
+    const backdrop = colorOpacity(darker, backdropDimming);
+    // Where the material blurs, the backdrop blurs too, more lightly; without it, it only dims.
+    const blur = visual.material.backdrop > 0 ? `blur(${visual.material.backdrop * backdropBlurShare}px)` : undefined;
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
     return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...attributes, isDismissable: dismissable, isKeyboardDismissDisabled: !keyboardDismissable, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
                     ...transition,
+                    backdropFilter: blur,
+                    WebkitBackdropFilter: blur,
                     position: "fixed",
                     inset: 0,
                     zIndex: overlayLayer,
@@ -42,8 +46,6 @@ export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, cla
                     padding: inset,
                     overflow: "auto",
                     background: backdrop,
-                    backdropFilter: blur,
-                    WebkitBackdropFilter: blur,
                     ...style
                 }, children: children })] });
 });

package/dist/drawer.d.ts

@@ -16,6 +16,7 @@ export interface DrawerProps {
  * outside or Escape closes it. It slides in and back out along the same path, timed by the
  * motion of a change in place, 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.
+ * fading it would switch off the blur it draws of what is behind it. The surface itself never
+ * scrolls, so its material stays behind all of it; what it holds scrolls inside it.
  */
 export declare function Drawer({ open, onClose, title, className, style, children, ...properties }: DrawerProps): import("react").JSX.Element | null;

package/dist/drawer.js

@@ -4,6 +4,7 @@ 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 { ScrollArea } from "./scroll-area.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
@@ -11,7 +12,8 @@ import { Surface } from "./surface/surface.js";
  * outside or Escape closes it. It slides in and back out along the same path, timed by the
  * motion of a change in place, 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.
+ * fading it would switch off the blur it draws of what is behind it. The surface itself never
+ * scrolls, so its material stays behind all of it; what it holds scrolls inside it.
  */
 export function Drawer({ open, onClose, title, className, style, children, ...properties }) {
     const visual = useVisual();
@@ -47,7 +49,9 @@ export function Drawer({ open, onClose, title, className, style, children, ...pr
                     boxSizing: "border-box",
                     width: `min(${visual.spacing * 20}px, calc(100% - ${visual.spacing * 4}px))`,
                     padding: inset,
-                    overflow: "auto",
+                    display: "flex",
+                    flexDirection: "column",
+                    overflow: "hidden",
                     ...style
-                }, children: [title != null && _jsx("div", { style: { padding: `${inset}px ${inset}px ${visual.spacing}px`, fontSize: controlFontSizes.xlarge, fontWeight: controlFontWeight }, children: title }), children] })] });
+                }, children: [title != null && _jsx("div", { style: { flex: "none", padding: `${inset}px ${inset}px ${visual.spacing}px`, fontSize: controlFontSizes.xlarge, fontWeight: controlFontWeight }, children: title }), _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: children })] })] });
 }

package/dist/grid-list.d.ts

@@ -12,6 +12,11 @@ type GridListRootBaseProps<T extends object> = Omit<AriaGridListProps<T>, "class
     restColor?: Color;
     /** The narrowest an Item may be; the grid fits as many columns as that allows. Sixteen times the spacing by default. */
     itemWidth?: CSSProperties["width"];
+    /**
+     * Whether fewer Items than fit share the whole width. Off by default, so an open collection keeps
+     * its Item width whatever it holds; on for a fixed set, such as a row of counts.
+     */
+    stretch?: boolean;
     size?: ScaleLevel;
     style?: CSSProperties;
 }>;

package/dist/grid-list.js

@@ -10,11 +10,12 @@ import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { collectionHeaderStyle } from "./list-box.js";
 const GridListStyleContext = createContext(null);
 const GridListRootImplementation = forwardRef(function GridList(properties, ref) {
-    const { className, color = "primary", restColor = "default", defaultValue: _defaultValue, itemWidth, onChange: _onChange, radius, selectionMode: _selectionMode, size, style, value: _value, ...native } = properties;
+    const { className, color = "primary", restColor = "default", defaultValue: _defaultValue, itemWidth, onChange: _onChange, radius, selectionMode: _selectionMode, size, stretch = false, style, value: _value, ...native } = properties;
     const metrics = useControlMetrics(size, radius);
     const width = itemWidth ?? metrics.visual.spacing * 16;
     // As many columns as fit, each at least the Item width; a Section repeats the same columns.
-    const columns = `repeat(auto-fill, minmax(min(${typeof width === "number" ? `${width}px` : width}, 100%), 1fr))`;
+    // Stretched, the columns no Item fills fold away and the rest share their width.
+    const columns = `repeat(${stretch ? "auto-fit" : "auto-fill"}, minmax(min(${typeof width === "number" ? `${width}px` : width}, 100%), 1fr))`;
     const context = useMemo(() => ({ color, restColor, metrics, columns }), [color, restColor, 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: state => ({

package/dist/main.d.ts

@@ -13,7 +13,7 @@ export { useDirection, useDocumentDirection, type Direction } from "./foundation
 export type { Preferences, PreferencesUpdate, Theme } from "./foundation/preferences.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Surface, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceDepth, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface/surface.js";
+export { Surface, useSurfaceColor, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceDepth, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface/surface.js";
 export { resolveColor, useColor, useContrastingColor, type Color, type ColorLevel, type ColorScale } from "./foundation/color.js";
 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";
@@ -62,7 +62,7 @@ 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 AppLayoutContentProps, type AppLayoutProps, type AppLayoutRegionProps, type AppLayoutSidebarProps, type AppLayoutTitleProps } from "./app-layout.js";
+export { AppLayout, narrowAppLayoutWidth, useAppLayout, 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";
@@ -77,7 +77,7 @@ export { Popover, type PopoverProps, type PopoverTriggerProps, type PopoverConte
 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";
+export { Dialog, type DialogProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
 export { AlertDialog, type AlertDialogProps, type AlertDialogBackdropProps, type AlertDialogContentProps } from "./alert-dialog.js";
 export { Tooltip, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps } from "./tooltip.js";
 export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./foundation/layout.js";

package/dist/main.js

@@ -12,7 +12,7 @@ export { timing } from "./foundation/timing.js";
 export { useDirection, useDocumentDirection } from "./foundation/direction.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
-export { Surface } from "./surface/surface.js";
+export { Surface, useSurfaceColor } from "./surface/surface.js";
 export { resolveColor, useColor, useContrastingColor } from "./foundation/color.js";
 // Context-dependent parts are public only through their owning component family.
 export { Panel } from "./panel.js";
@@ -61,7 +61,7 @@ export { Loading } from "./loading.js";
 export { FileTrigger } from "./file-trigger.js";
 export { DropZone } from "./drop-zone.js";
 export { Fieldset } from "./fieldset.js";
-export { AppLayout } from "./app-layout.js";
+export { AppLayout, narrowAppLayoutWidth, useAppLayout } from "./app-layout.js";
 export { ColorSwatch } from "./color-swatch.js";
 export { ColorSwatchPicker } from "./color-swatch-picker.js";
 export { ColorSlider } from "./color-slider.js";

package/dist/surface/surface.d.ts

@@ -71,6 +71,15 @@ export declare const interactionShift: Readonly<{
 }>;
 /** A clear Surface has no paint to move, so it shows the same shift as a slightly stronger veil. */
 export declare const clearVeil = 1.3;
+/**
+ * The color a Surface of this color and depth is painted with at rest, before its material: a recess
+ * sinks below the color it is given; a clear Surface, with no depth or a transparent color, paints
+ * nothing. Whatever draws on a Surface and must match it, such as a terminal telling its programs
+ * what it stands on, takes this color.
+ */
+export declare function surfaceColor(color: Color, depth: SurfaceDepth, colors: Visual["colors"]): string;
+/** The color a Surface of this color and depth is painted with at rest, in the active Appearance. */
+export declare function useSurfaceColor(color?: Color, depth?: SurfaceDepth): string;
 /** Resolves every visual value of one Surface. Pure over its inputs. */
 export declare function surfacePaint(visual: Visual, color: Color, depth: SurfaceDepth, options: MaterialMode | MaterialOptions | undefined, shadowOptions: ShadowOverrides["shadow"], interaction: SurfaceInteraction | undefined): {
     fill: string;

package/dist/surface/surface.js

@@ -67,6 +67,23 @@ const materialLevel = Object.freeze({ none: 0, basic: 1, extended: 2, full: 3 })
 export const interactionShift = Object.freeze({ hovered: 0.05, pressed: 0.1 });
 /** A clear Surface has no paint to move, so it shows the same shift as a slightly stronger veil. */
 export const clearVeil = 1.3;
+/**
+ * The color a Surface of this color and depth is painted with at rest, before its material: a recess
+ * sinks below the color it is given; a clear Surface, with no depth or a transparent color, paints
+ * nothing. Whatever draws on a Surface and must match it, such as a terminal telling its programs
+ * what it stands on, takes this color.
+ */
+export function surfaceColor(color, depth, colors) {
+    const base = resolveColor(color, colors);
+    if (depth === "none" || base === "transparent")
+        return "transparent";
+    return depth === "recessed" ? recessColor(base) : base;
+}
+/** The color a Surface of this color and depth is painted with at rest, in the active Appearance. */
+export function useSurfaceColor(color = "background", depth = "raised") {
+    const { colors } = useVisual();
+    return surfaceColor(color, depth, colors);
+}
 /** Resolves every visual value of one Surface. Pure over its inputs. */
 export function surfacePaint(visual, color, depth, options, shadowOptions, interaction) {
     const { colors } = visual;
@@ -78,7 +95,7 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
     const darkness = canvasDarkness(colors);
     // A recess moves away from its surroundings toward whichever extreme has
     // room, by one constant perceptual difference on any canvas.
-    const rest = depth === "recessed" ? recessColor(base) : base;
+    const rest = depth === "recessed" ? surfaceColor(color, depth, colors) : base;
     // A clear Surface, with no depth or a transparent color, has no substance of
     // its own: it paints nothing at rest, takes the content color of whatever it
     // sits on, and only reveals interaction as a veil. With no depth, a color

package/dist/table.d.ts

@@ -32,7 +32,7 @@ export interface TableHeaderProps<T extends object = object> extends Omit<AriaTa
     readonly style?: CSSProperties;
 }
 export type TableHeaderComponent = <T extends object = object>(properties: TableHeaderProps<T> & RefAttributes<HTMLTableSectionElement | HTMLDivElement>) => ReactElement | null;
-export interface TableColumnProps extends Omit<AriaColumnProps, "allowsSorting" | "allowsArrowNavigation" | "className" | "id" | "isRowHeader" | "style"> {
+export interface TableColumnProps extends Omit<AriaColumnProps, "allowsSorting" | "allowsArrowNavigation" | "className" | "id" | "isRowHeader" | "style" | "width" | "minWidth" | "maxWidth" | "defaultWidth"> {
     /** Whether arrow keys move between cells while focus is inside this one. */
     readonly arrowNavigation?: boolean;
     /** Identity of this Column, reported in sort changes. */
@@ -41,6 +41,13 @@ export interface TableColumnProps extends Omit<AriaColumnProps, "allowsSorting"
     readonly rowHeader?: boolean;
     /** Whether pressing this Column requests a sort. */
     readonly sortable?: boolean;
+    /** The Column's width, in pixels or any CSS length. */
+    readonly width?: number | string;
+    /**
+     * For a Column without a width, which takes the room the others leave: the least it keeps when
+     * that room runs out.
+     */
+    readonly minWidth?: number | string;
     readonly className?: string;
     readonly style?: CSSProperties;
 }

package/dist/table.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useMemo } from "react";
+import { createContext, forwardRef, useCallback, useContext, useLayoutEffect, useMemo, useState } 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";
@@ -16,11 +16,25 @@ const TableStyleContext = createContext(null);
 const TableRoot = forwardRef(function Table(properties, ref) {
     const { className, color = "primary", defaultValue: _defaultValue, onAction, onChange: _onChange, onSortChange, radius, selectOnPressUp, selectionMode = "none", size, sort, style, value: _value, ...native } = properties;
     const metrics = useControlMetrics(size, radius);
-    const context = useMemo(() => ({ color, interactive: selectionMode !== "none" || onAction != null, metrics }), [color, metrics, onAction, selectionMode]);
+    // The least room each Column takes, from its width or its minimum.
+    const [least, setLeast] = useState({});
+    const measure = useCallback((column, room) => setLeast(current => {
+        if ((current[column] ?? null) === room)
+            return current;
+        const { [column]: _previous, ...rest } = current;
+        return room === null ? rest : { ...rest, [column]: room };
+    }), []);
+    const context = useMemo(() => ({ color, interactive: selectionMode !== "none" || onAction != null, metrics, measure }), [color, metrics, onAction, selectionMode, measure]);
+    const rooms = Object.values(least);
     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: state => ({
                     width: "100%",
-                    minWidth: "max-content",
+                    // Columns that state their room lay the Table out by it, and the Table never grows narrower
+                    // than all of it together: past what holds it, it is scrolled, never crushed. Otherwise the
+                    // Table is as wide as its content.
+                    ...rooms.length
+                        ? { tableLayout: "fixed", minWidth: `calc(${rooms.join(" + ")})` }
+                        : { minWidth: "max-content" },
                     borderCollapse: "separate",
                     borderSpacing: 0,
                     boxSizing: "border-box",
@@ -40,9 +54,15 @@ const TableHeaderImplementation = forwardRef(function TableHeader({ className, s
     useTableStyle();
     return _jsx(AriaTableHeader, { ...properties, ref: ref, className: className, style: style });
 });
-const TableColumn = forwardRef(function TableColumn({ sortable = false, rowHeader, arrowNavigation, children, className, style, textValue, ...properties }, ref) {
-    const { metrics } = useTableStyle();
+const TableColumn = forwardRef(function TableColumn({ sortable = false, rowHeader, arrowNavigation, children, className, style, textValue, width, minWidth, ...properties }, ref) {
+    const { metrics, measure } = useTableStyle();
     const { colors } = metrics.visual;
+    const room = width ?? minWidth;
+    const least = room === undefined ? null : typeof room === "number" ? `${room}px` : room;
+    useLayoutEffect(() => {
+        measure(properties.id, least);
+        return () => measure(properties.id, null);
+    }, [measure, properties.id, least]);
     return _jsx(AriaColumn, { ...properties, allowsArrowNavigation: arrowNavigation, ref: ref, isRowHeader: rowHeader, allowsSorting: sortable, className: className, textValue: textValue ?? (typeof children === "string" ? children : undefined), style: state => ({
             ...transition(metrics.visual, "color, outline-color"),
             height: metrics.height,
@@ -56,8 +76,9 @@ const TableColumn = forwardRef(function TableColumn({ sortable = false, rowHeade
             textAlign: "start",
             userSelect: "none",
             opacity: state.isHovered && sortable ? 1 : controlOpacity.secondary,
+            width,
             ...style
-        }), children: state => _jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: metrics.gap, minWidth: 0 }, children: [_jsx("span", { style: { minWidth: 0 }, children: typeof children === "function" ? children(state) : children }), sortable && state.sortDirection != null && _jsx(ChevronUp, { ...iconProps(14), style: { ...transition(metrics.visual, "rotate"), flexShrink: 0, rotate: state.sortDirection === "descending" ? "180deg" : "0deg" } })] }) });
+        }), children: state => _jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: metrics.gap, minWidth: 0 }, children: [_jsx("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: typeof children === "function" ? children(state) : children }), sortable && state.sortDirection != null && _jsx(ChevronUp, { ...iconProps(14), style: { ...transition(metrics.visual, "rotate"), flexShrink: 0, rotate: state.sortDirection === "descending" ? "180deg" : "0deg" } })] }) });
 });
 const TableBodyImplementation = forwardRef(function TableBody({ className, style, ...properties }, ref) {
     return _jsx(AriaTableBody, { ...properties, ref: ref, className: className, style: style });
@@ -93,6 +114,12 @@ const TableCell = forwardRef(function TableCell({ arrowNavigation, className, st
             outline: `3px solid ${state.isFocusVisible ? colorOpacity(metrics.visual.colors.primary, 0.34) : "transparent"}`,
             outlineOffset: -3,
             textAlign: "start",
+            // A narrow column cuts a cell's text short instead of letting it spill into the next. What
+            // the cell holds still paints a focus ring's width past its edge.
+            overflow: "clip",
+            overflowClipMargin: 3,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
             ...style
         }) });
 });

package/dist/typography.d.ts

@@ -19,6 +19,13 @@ export interface TextProps {
     readonly tone?: "default" | "secondary";
     /** The control text scale; omitted, the text keeps the size around it. */
     readonly size?: ScaleLevel;
+    /**
+     * Keeps the text to one line, cut short with an ellipsis where its space ends: for a name beside
+     * other things, such as an icon or a badge, in a row too narrow for all of it.
+     */
+    readonly truncate?: boolean;
+    /** What a pointer resting on it shows, such as the whole of a text cut short. */
+    readonly title?: string;
     /** A slot name when the text describes a field or item, such as `description`. */
     readonly slot?: string;
     readonly elementType?: string;

package/dist/typography.js

@@ -25,11 +25,12 @@ export const Heading = forwardRef(function Heading({ level = 2, size, style, ...
         } });
 });
 /** Running text in the tone and scale of the interface. */
-export const Text = forwardRef(function Text({ tone = "default", size, style, ...properties }, ref) {
+export const Text = forwardRef(function Text({ tone = "default", size, truncate = false, style, ...properties }, ref) {
     return _jsx(AriaText, { ...properties, ref: ref, style: {
             fontSize: size === undefined ? undefined : controlFontSizes[size],
             lineHeight: controlLineHeight,
             opacity: tone === "secondary" ? controlOpacity.secondary : undefined,
+            ...truncate && { display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
             ...style
         } });
 });

package/package.json

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