@phreshos/react-ui 0.1.41 → 0.1.43

package/dist/alert.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { controlFontSizes, controlFontWeight, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { iconProps } from "./control/icon.js";
 import { meaningIcon, urgentMeaning } from "./control/meaning.js";
 import { colorLevel, resolveColor } from "./foundation/color.js";
 import { resolveRadius } from "./foundation/radius.js";
 import { Surface } from "./surface/surface.js";
+import { containerPadding } from "./foundation/spacing.js";
 /**
  * A message that stays in place, such as a failed save. It is painted in the
  * subtle level of its color, like a selection, and leads with the icon of its
@@ -21,9 +22,9 @@ export const Alert = forwardRef(function Alert({ color = "info", title, icon, ch
             gridTemplateColumns: icon === false ? "minmax(0, 1fr)" : "auto minmax(0, 1fr)",
             alignItems: "start",
             gap: metrics.gap * 2,
-            padding: metrics.spacing,
+            padding: containerPadding(metrics.visual.spacing),
             fontSize: controlFontSizes.medium,
-            lineHeight: 1.45,
+            lineHeight: controlLineHeight,
             ...style
-        }, children: [icon !== false && _jsx("span", { style: { display: "grid", height: "1.45em", alignItems: "center" }, children: icon ?? _jsx(MeaningIcon, { ...iconProps(16) }) }), _jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [title != null && _jsx("strong", { style: { fontWeight: controlFontWeight }, children: title }), children != null && _jsx("div", { children: children })] })] });
+        }, children: [icon !== false && _jsx("span", { style: { display: "grid", height: `${controlLineHeight}em`, alignItems: "center" }, children: icon ?? _jsx(MeaningIcon, { ...iconProps(16) }) }), _jsxs("div", { style: { display: "grid", gap: 2, minWidth: 0 }, children: [title != null && _jsx("strong", { style: { fontWeight: controlFontWeight }, children: title }), children != null && _jsx("div", { children: children })] })] });
 });

package/dist/app-layout.js

@@ -7,6 +7,7 @@ import { scale } from "./foundation/scale.js";
 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);
 /**
  * The frame of a program's interface: a title above a sidebar, and a header,
@@ -81,7 +82,7 @@ const AppLayoutContent = forwardRef(function AppLayoutContent({ children, style,
             // The Surface owns its shape: what scrolls inside stays within its corners.
             overflow: "clip",
             ...style
-        }, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsx("div", { style: { padding: spacing }, children: children }) }) });
+        }, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsx("div", { style: { padding: containerPadding(spacing) }, children: children }) }) });
 });
 /** An optional row below the content, such as the actions that apply to it. */
 const AppLayoutFooter = forwardRef(function AppLayoutFooter({ style, ...properties }, ref) {

package/dist/badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { controlFontSizes, controlFontWeight, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { colorLevel, resolveColor } from "./foundation/color.js";
 import { Surface } from "./surface/surface.js";
 const smaller = Object.freeze({ xsmall: "xsmall", small: "xsmall", medium: "small", large: "medium", xlarge: "large" });
@@ -23,7 +23,7 @@ export const Badge = forwardRef(function Badge({ children, color = "foreground",
             color: colorLevel(base, "strong", colors),
             fontSize: controlFontSizes[smaller[size ?? "medium"]],
             fontWeight: controlFontWeight,
-            lineHeight: 1.45,
+            lineHeight: controlLineHeight,
             whiteSpace: "nowrap",
             verticalAlign: "middle",
             ...style

package/dist/breadcrumbs.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, forwardRef, useContext } from "react";
 import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, Link as AriaLink } from "react-aria-components";
 import { ChevronRight } from "lucide-react";
-import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { controlFontWeight, controlOpacity, transition, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { iconProps } from "./control/icon.js";
 import { surfacePaint } from "./surface/surface.js";
 const BreadcrumbsContext = createContext(null);
@@ -18,7 +18,7 @@ const BreadcrumbsRoot = forwardRef(function Breadcrumbs({ children, size, style,
                 padding: 0,
                 listStyle: "none",
                 fontSize: metrics.fontSize,
-                lineHeight: 1.45,
+                lineHeight: controlLineHeight,
                 ...style
             }, children: children }) });
 });

package/dist/calendar-layout.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { isSameDay } from "@internationalized/date";
 import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, CalendarStateContext, RangeCalendarStateContext } from "react-aria-components";
 import { Button } from "./button.js";
-import { controlFontWeight, controlOpacity, transition } from "./control/control.js";
+import { controlFontWeight, controlOpacity, transition, controlLineHeight } from "./control/control.js";
 import { selectionColor } from "./control/item.js";
 import { colorOpacity, readableColor, resolveColor } from "./foundation/color.js";
 import { useDirection } from "./foundation/direction.js";
@@ -28,7 +28,7 @@ export function calendarRootStyle(metrics, style) {
         padding: metrics.spacing,
         fontFamily: "inherit",
         fontSize: metrics.fontSize,
-        lineHeight: 1.45
+        lineHeight: controlLineHeight
     };
 }
 /**

package/dist/color-slider.js

@@ -4,7 +4,7 @@ import { ColorSlider as AriaColorSlider, Label, SliderOutput, SliderTrack } from
 import { colorEdge, ColorThumb } from "./control/color-thumb.js";
 import { colorValue } from "./control/color-value.js";
 import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
-import { fieldStyle } from "./control/field.js";
+import { fieldStyle, descriptionStyle } from "./control/field.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { dimmedClass } from "./surface/surface.js";
@@ -25,5 +25,5 @@ export const ColorSlider = forwardRef(function ColorSlider({ label, description,
                         // A track is round by its form.
                         borderRadius: 9999,
                         boxShadow: colorEdge(metrics)
-                    }), children: _jsx(ColorThumb, { metrics: metrics, center: vertical ? "left" : "top" }) }), description != null && _jsx("span", { style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+                    }), children: _jsx(ColorThumb, { metrics: metrics, center: vertical ? "left" : "top" }) }), description != null && _jsx("span", { style: descriptionStyle, children: description })] }) });
 });

package/dist/control/control.d.ts

@@ -29,6 +29,10 @@ export type ControlOverrides = keyof ControlProps | keyof FieldProps | "children
 export declare const controlFontSizes: Readonly<Record<ScaleLevel, string>>;
 /** A control text size relative to an element that already applies another level. */
 export declare function relativeFontSize(level: ScaleLevel, within: ScaleLevel): string;
+/** Secondary text, such as a description or a section header, reads a step smaller than its control. */
+export declare const secondaryFontSize = "0.92em";
+/** The line height of text in controls and the Surfaces around them. */
+export declare const controlLineHeight = 1.45;
 export declare const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export declare const controlOpacity: Readonly<{

package/dist/control/control.js

@@ -14,6 +14,10 @@ export const controlFontSizes = Object.freeze({
 export function relativeFontSize(level, within) {
     return `${Number.parseFloat(controlFontSizes[level]) / Number.parseFloat(controlFontSizes[within])}em`;
 }
+/** Secondary text, such as a description or a section header, reads a step smaller than its control. */
+export const secondaryFontSize = "0.92em";
+/** The line height of text in controls and the Surfaces around them. */
+export const controlLineHeight = 1.45;
 export const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export const controlOpacity = Object.freeze({

package/dist/control/field.d.ts

@@ -8,6 +8,8 @@ export declare function fieldStyle(metrics: ControlMetrics, style?: CSSPropertie
 export declare function FieldLabel({ label }: Readonly<{
     label?: ReactNode;
 }>): import("react").JSX.Element | null;
+/** The treatment of a control's description: a little smaller and quieter than its label. */
+export declare const descriptionStyle: CSSProperties;
 /** Description and validation text shared by every field. */
 export declare function FieldFeedback({ description, errorMessage, metrics }: Readonly<{
     description?: ReactNode;

package/dist/control/field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldError, Label, Text } from "react-aria-components";
 import { colorOpacity, mixColor } from "../foundation/color.js";
-import { controlFontWeight, controlOpacity } from "./control.js";
+import { controlFontWeight, controlOpacity, controlLineHeight, secondaryFontSize } from "./control.js";
 /**
  * The root of every value-holding component. It is the only element that
  * applies the control text scale; every part inherits from it.
@@ -14,17 +14,19 @@ export function fieldStyle(metrics, style) {
         minWidth: 0,
         fontFamily: "inherit",
         fontSize: metrics.fontSize,
-        lineHeight: 1.45,
+        lineHeight: controlLineHeight,
         ...style
     };
 }
 export function FieldLabel({ label }) {
     return label == null ? null : _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label });
 }
+/** The treatment of a control's description: a little smaller and quieter than its label. */
+export const descriptionStyle = Object.freeze({ fontSize: secondaryFontSize, opacity: controlOpacity.secondary });
 /** Description and validation text shared by every field. */
 export function FieldFeedback({ description, errorMessage, metrics }) {
     const { colors } = metrics.visual;
-    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description }), _jsx(FieldError, { style: { fontSize: "0.92em", color: mixColor(colors.danger, colors.foreground, 0.15) }, children: errorMessage })] });
+    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: descriptionStyle, children: description }), _jsx(FieldError, { style: { fontSize: descriptionStyle.fontSize, color: mixColor(colors.danger, colors.foreground, 0.15) }, children: errorMessage })] });
 }
 /** How strongly every separator shows its text color. */
 export const separatorOpacity = 0.1;

package/dist/control/text-control.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SurfaceView } from "../surface/surface.js";
+import { controlLineHeight } from "./control.js";
 /**
  * The recessed well that holds typed content. Native text elements cannot host
  * Surface layers, so the well wraps the element that React Aria renders.
@@ -25,7 +26,7 @@ export function nativeTextStyle(metrics, multiline) {
         color: "inherit",
         caretColor: "currentColor",
         font: "inherit",
-        lineHeight: 1.45,
+        lineHeight: controlLineHeight,
         resize: multiline ? "vertical" : undefined
     };
 }

package/dist/dialog.js

@@ -8,6 +8,7 @@ import { colorOpacity, darkCanvas } from "./foundation/color.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import MotionStyle, { backdropMotionClass, overlayLayer, overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
 import { scale } from "./foundation/scale.js";
+import { containerPadding } from "./foundation/spacing.js";
 import { useVisual } from "./foundation/visual.js";
 import { floatingShadow } from "./surface/shadow-options.js";
 import { Surface } from "./surface/surface.js";
@@ -49,6 +50,7 @@ export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, cla
 export const DialogContent = forwardRef(function DialogContent({ children, className, color, material, radius, shadow, style, ...properties }, ref) {
     const visual = useVisual();
     const inset = scale(visual.spacing, "medium");
+    const padding = containerPadding(visual.spacing);
     const transition = overlayTransition(visual);
     const direction = resolveDirection(properties.dir, useDirection());
     return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
@@ -63,7 +65,7 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
                         boxSizing: "border-box",
                         width: "100%",
                         maxHeight: "inherit",
-                        padding: inset,
+                        padding,
                         overflow: "hidden",
                         ...style
                     }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
@@ -82,10 +84,11 @@ export const DialogHeader = forwardRef(function DialogHeader({ style, ...propert
 export const DialogTitle = forwardRef(function DialogTitle({ style, ...properties }, ref) {
     // The modal is portalled: owned text parts set their relative scale directly,
     // while Dialog.Body remains untouched for consumer-owned content and controls.
+    // One level above the description and the content, so the title leads them.
     return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", style: {
             margin: 0,
             fontFamily: "inherit",
-            fontSize: controlFontSizes.medium,
+            fontSize: controlFontSizes.large,
             fontWeight: controlFontWeight,
             lineHeight: 1.5,
             ...style

package/dist/disclosure.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Button as AriaButton, Disclosure as AriaDisclosure, DisclosurePanel as AriaDisclosurePanel, DisclosureStateContext } from "react-aria-components";
-import { transition, useControlMetrics } from "./control/control.js";
+import { transition, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { surfaceRender } from "./control/surface-render.js";
 import { resolveSpacing } from "./foundation/spacing.js";
 import { ChevronDown } from "lucide-react";
@@ -39,7 +39,7 @@ export const DisclosureTrigger = forwardRef(function DisclosureTrigger({ childre
             cursor: "pointer",
             font: "inherit",
             fontWeight: 500,
-            lineHeight: 1.45,
+            lineHeight: controlLineHeight,
             textAlign: "start",
             userSelect: "none",
             WebkitTapHighlightColor: "transparent",

package/dist/foundation/spacing.d.ts

@@ -9,3 +9,9 @@ export type Spacing = ScaleLevel | number | (string & {});
  */
 export declare function resolveSpacing(value: ScaleLevel, spacing: number): number;
 export declare function resolveSpacing(value: Spacing | undefined, spacing: number): CSSProperties["gap"];
+/**
+ * The padding of a Surface that holds content, such as a dialog, a panel's
+ * content, or an alert: one level above the spacing a control pads with, so a
+ * container never wraps its content as tightly as a button wraps its label.
+ */
+export declare function containerPadding(spacing: number): number;

package/dist/foundation/spacing.js

@@ -2,3 +2,11 @@ import { isScaleLevel, scale } from "./scale.js";
 export function resolveSpacing(value, spacing) {
     return isScaleLevel(value) ? scale(spacing, value) : value;
 }
+/**
+ * The padding of a Surface that holds content, such as a dialog, a panel's
+ * content, or an alert: one level above the spacing a control pads with, so a
+ * container never wraps its content as tightly as a button wraps its label.
+ */
+export function containerPadding(spacing) {
+    return scale(spacing, "large");
+}

package/dist/grid-list.d.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties, ReactElement, RefAttributes } from "react";
+import type { GridListHeaderProps as AriaGridListHeaderProps, GridListItemProps as AriaGridListItemProps, GridListProps as AriaGridListProps, GridListSectionProps as AriaGridListSectionProps } from "react-aria-components";
+import { type MultipleSelectionProps, type MultipleStringSelection, type NoSelectionProps, type SingleStringSelectionProps } from "./control/selection.js";
+import type { Color } from "./foundation/color.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+type GridListRootBaseProps<T extends object> = Omit<AriaGridListProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "layout" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style"> & RadiusProps & Readonly<{
+    className?: string;
+    /** Color laid beneath selected Items. */
+    color?: 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"];
+    size?: ScaleLevel;
+    style?: CSSProperties;
+}>;
+/** Cards to show only, such as the progress of work, with nothing to choose. */
+export type GridListNoSelectionProps = NoSelectionProps;
+export type GridListSingleSelectionProps = SingleStringSelectionProps & Readonly<{
+    selectionMode?: "single";
+}>;
+export type GridListMultipleValue = MultipleStringSelection;
+export type GridListMultipleSelectionProps = MultipleSelectionProps;
+/** A collection laid out as a grid of cards. Single selection is the default; `none` only shows them. */
+export type GridListRootProps<T extends object = object> = GridListRootBaseProps<T> & (GridListNoSelectionProps | GridListSingleSelectionProps | GridListMultipleSelectionProps);
+export type GridListRootComponent = <T extends object = object>(properties: GridListRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export interface GridListItemProps<T = object> extends Omit<AriaGridListItemProps<T>, "className" | "id" | "isDisabled" | "render" | "style"> {
+    /** Identity of this Item within its collection. */
+    readonly id: string;
+    readonly className?: string;
+    /** Color laid beneath this Item when it is selected. */
+    readonly color?: Color;
+    readonly disabled?: boolean;
+    readonly style?: CSSProperties;
+}
+export type GridListItemComponent = <T = object>(properties: GridListItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export interface GridListSectionProps<T extends object = object> extends Omit<AriaGridListSectionProps<T>, "className" | "style"> {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export type GridListSectionComponent = <T extends object = object>(properties: GridListSectionProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export type GridListHeaderProps = Omit<AriaGridListHeaderProps, "style"> & Readonly<{
+    style?: CSSProperties;
+}>;
+/** A selectable grid of cards whose Items and Sections remain independently composable. */
+export declare const GridList: GridListRootComponent & {
+    Item: GridListItemComponent;
+    Section: GridListSectionComponent;
+    Header: import("react").ForwardRefExoticComponent<Omit<AriaGridListHeaderProps, "style"> & Readonly<{
+        style?: CSSProperties;
+    }> & RefAttributes<HTMLDivElement>>;
+};
+export type GridListProps<T extends object = object> = GridListRootProps<T>;
+export {};

package/dist/grid-list.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { separatorColor } from "./control/field.js";
+import { 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";
+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", defaultValue: _defaultValue, itemWidth, onChange: _onChange, radius, selectionMode: _selectionMode, size, 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))`;
+    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: {
+                    display: "grid",
+                    gridTemplateColumns: columns,
+                    gap: metrics.gap * 2,
+                    minWidth: 0,
+                    padding: metrics.listInset,
+                    boxSizing: "border-box",
+                    outline: "none",
+                    fontFamily: "inherit",
+                    fontSize: metrics.fontSize,
+                    ...style
+                } }) }) });
+});
+/** One card. It holds whatever it is given, shows its edge at rest, and a check in its corner when selected. */
+const GridListItemImplementation = forwardRef(function GridListItem({ children, className, color, disabled = false, style, textValue, ...properties }, ref) {
+    const inherited = useGridListStyle();
+    const itemColor = color ?? inherited.color;
+    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,
+            hovered: state.isHovered,
+            pressed: state.isPressed,
+            focusVisible: state.isFocusVisible,
+            disabled: state.isDisabled
+        }, metrics.radius)), style: {
+            position: "relative",
+            display: "grid",
+            alignContent: "start",
+            gap: metrics.gap,
+            minWidth: 0,
+            padding: metrics.inset,
+            boxSizing: "border-box",
+            cursor: disabled ? "not-allowed" : "pointer",
+            userSelect: "none",
+            outlineOffset: -1,
+            ...style
+        }, children: state => _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", style: {
+                        position: "absolute",
+                        inset: 0,
+                        // The card's own radius: the edge sits inside the grid cell, not directly in the card.
+                        borderRadius: metrics.radius,
+                        border: `1px solid ${separatorColor(metrics)}`,
+                        opacity: state.isSelected ? 0 : 1,
+                        pointerEvents: "none"
+                    } }), typeof children === "function" ? children(state) : children, _jsx("span", { style: { position: "absolute", insetBlockStart: metrics.inset, insetInlineEnd: metrics.inset, display: "flex" }, children: _jsx(SelectionMark, { visible: state.isSelected }) })] }) });
+});
+/** A Section spans the whole grid and lays its own Items out in the same columns. */
+const GridListSectionImplementation = forwardRef(function GridListSection({ className, style, ...properties }, ref) {
+    const { metrics, columns } = useGridListStyle();
+    return _jsx(AriaGridListSection, { ...properties, ref: ref, className: className, style: {
+            gridColumn: "1 / -1",
+            display: "grid",
+            gridTemplateColumns: columns,
+            gap: metrics.gap * 2,
+            minWidth: 0,
+            ...style
+        } });
+});
+/** A Section's heading, across the whole row. */
+const GridListHeader = forwardRef(function GridListHeader({ style, ...properties }, ref) {
+    const { metrics } = useGridListStyle();
+    return _jsx(AriaGridListHeader, { ...properties, ref: ref, style: collectionHeaderStyle(metrics, { gridColumn: "1 / -1", paddingInline: 0, ...style }) });
+});
+function useGridListStyle() {
+    const context = useContext(GridListStyleContext);
+    if (context == null)
+        throw new Error("GridList parts must be used inside GridList");
+    return context;
+}
+/** A selectable grid of cards whose Items and Sections remain independently composable. */
+export const GridList = Object.assign(GridListRootImplementation, {
+    Item: GridListItemImplementation,
+    Section: GridListSectionImplementation,
+    Header: GridListHeader
+});

package/dist/list-box.js

@@ -1,7 +1,7 @@
 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, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, ListBoxSection as AriaListBoxSection } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { controlFontWeight, controlOpacity, useControlMetrics, secondaryFontSize } from "./control/control.js";
 import { itemStyle, itemSurface, SelectionMark } from "./control/item.js";
 import { ariaSelection } from "./control/selection.js";
 import { surfaceRender } from "./control/surface-render.js";
@@ -52,7 +52,7 @@ export function collectionHeaderStyle(metrics, style) {
     return {
         paddingInline: metrics.inset,
         paddingBlock: metrics.gap,
-        fontSize: "0.92em",
+        fontSize: secondaryFontSize,
         fontWeight: controlFontWeight,
         opacity: controlOpacity.secondary,
         ...style

package/dist/main.d.ts

@@ -32,6 +32,7 @@ export { Switch, type SwitchProps } from "./switch.js";
 export { Select, type SelectProps } from "./select.js";
 export { ComboBox, type ComboBoxProps } from "./combo-box.js";
 export { ListBox, type ListBoxProps, type ListBoxSingleSelectionProps, type ListBoxMultipleSelectionProps, type ListBoxMultipleValue, type ListBoxItemProps, type ListBoxSectionProps, type ListBoxHeaderProps } from "./list-box.js";
+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";
@@ -50,6 +51,7 @@ export { Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsItemProps } from ".
 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 { 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";

package/dist/main.js

@@ -31,6 +31,7 @@ export { Switch } from "./switch.js";
 export { Select } from "./select.js";
 export { ComboBox } from "./combo-box.js";
 export { ListBox } from "./list-box.js";
+export { GridList } from "./grid-list.js";
 export { Tabs } from "./tabs.js";
 export { Table } from "./table.js";
 export { Tree } from "./tree.js";
@@ -49,6 +50,7 @@ export { Breadcrumbs } from "./breadcrumbs.js";
 export { Avatar } from "./avatar.js";
 export { TagGroup } from "./tag-group.js";
 export { Skeleton } from "./skeleton.js";
+export { Snippet, copyText } from "./snippet.js";
 export { toast, ToastRegion } from "./toast.js";
 export { Readiness, useReadiness, useRequirement } from "./readiness.js";
 export { Loading } from "./loading.js";

package/dist/panel.js

@@ -7,6 +7,7 @@ import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { paintClass, usePaintClasses } from "./surface/paint-class.js";
 import { Surface } from "./surface/surface.js";
+import { containerPadding } from "./foundation/spacing.js";
 const PanelContext = createContext({ color: undefined, hasHeader: false, radius: undefined });
 export const PanelHeader = forwardRef(function PanelHeader({ style, ...properties }, ref) {
     const { spacing } = useVisual();
@@ -40,7 +41,7 @@ export const PanelRoot = forwardRef(function Panel({ children, style, ...propert
 export const PanelContent = forwardRef(function PanelContent({ className, style, ...properties }, ref) {
     const { spacing } = useVisual();
     const inset = scale(spacing, "small");
-    const padding = scale(spacing, "medium");
+    const padding = containerPadding(spacing);
     const { color, hasHeader, radius } = useContext(PanelContext);
     // A zero-specificity class keeps the padding a default: any consumer class
     // or style still sets its own.

package/dist/radio.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Label, RadioButton, RadioField, RadioGroup as AriaRadioGroup, Text } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
-import { FieldFeedback, fieldStyle } from "./control/field.js";
+import { controlFontWeight, useControlMetrics } from "./control/control.js";
+import { FieldFeedback, fieldStyle, descriptionStyle } from "./control/field.js";
 import { ToggleIndicator, toggleRowStyle } from "./control/toggle.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
@@ -29,7 +29,7 @@ const RadioGroupItem = forwardRef(function RadioGroupItem({ label, description,
                                 focusVisible: state.isFocusVisible,
                                 invalid: state.isInvalid,
                                 disabled: state.isDisabled
-                            } }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary, paddingInlineStart: metrics.indicator + metrics.gap }, children: description })] });
+                            } }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { ...descriptionStyle, paddingInlineStart: metrics.indicator + metrics.gap }, children: description })] });
 });
 /** One exclusive-choice field whose options are its Items. */
 export const RadioGroup = Object.assign(RadioGroupRoot, {

package/dist/segmented-control.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useId, useMemo } from "react";
 import { ToggleButton as AriaToggleButton, ToggleButtonGroup as AriaToggleButtonGroup } from "react-aria-components";
-import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
-import { fieldStyle } from "./control/field.js";
+import { controlFontWeight, useControlMetrics } from "./control/control.js";
+import { fieldStyle, descriptionStyle } from "./control/field.js";
 import { SelectionItemLabel, selectionItemStyle, selectionListStyle, SelectionTrack } from "./control/selection-track.js";
 import { stringKey } from "./control/selection.js";
 import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
@@ -25,7 +25,7 @@ const SegmentedControlRoot = forwardRef(function SegmentedControl({ label, descr
                                 const [key] = keys;
                                 if (key !== undefined)
                                     onChange?.(stringKey(key));
-                            }, isDisabled: disabled, style: selectionListStyle(orientation), children: children }) }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+                            }, isDisabled: disabled, style: selectionListStyle(orientation), children: children }) }) }), description != null && _jsx("span", { id: descriptionId, style: descriptionStyle, children: description })] }) });
 });
 /** One option; its label may lead with an icon. */
 const SegmentedControlItem = forwardRef(function SegmentedControlItem({ children, disabled, className, style, ...properties }, ref) {

package/dist/select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton, Select as AriaSelect, SelectValue } from "react-aria-components";
-import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { controlOpacity, transition, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { surfaceRender } from "./control/surface-render.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
@@ -54,7 +54,7 @@ export function fieldTriggerStyle(metrics, disabled) {
         border: 0,
         background: "none",
         font: "inherit",
-        lineHeight: 1.45,
+        lineHeight: controlLineHeight,
         textAlign: "start",
         cursor: disabled ? "not-allowed" : "pointer"
     };

package/dist/slider.js

@@ -5,7 +5,7 @@ import { Slider as BaseSlider } from "@base-ui/react/slider";
 import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
-import { fieldStyle } from "./control/field.js";
+import { fieldStyle, descriptionStyle } from "./control/field.js";
 import { lightColor } from "./foundation/color.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { SurfaceView, dimmedClass } from "./surface/surface.js";
@@ -68,5 +68,5 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
                                             height: thumb,
                                             cursor: state.disabled ? "not-allowed" : state.dragging ? "grabbing" : "grab",
                                             scale: state.dragging ? "0.92" : "1"
-                                        } }) })] }) }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+                                        } }) })] }) }) }), description != null && _jsx("span", { id: descriptionId, style: descriptionStyle, children: description })] }) });
 });

package/dist/snippet.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from "react";
+export interface SnippetProps {
+    /** The text to show and copy. */
+    readonly children: string;
+    /** Sets the text in the monospace font, for commands and code. */
+    readonly code?: boolean;
+    /** Names the copy button for assistive technology; "Copy" by default. */
+    readonly copyLabel?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * A block of text meant to be copied whole, such as a command or a message to
+ * hand on. It sits in a recess, can be selected at once, and copies itself
+ * from the button in its corner.
+ */
+export declare const Snippet: import("react").ForwardRefExoticComponent<SnippetProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Writes text to the clipboard and reports whether it could. A Program's frame
+ * may refuse the Clipboard API, so the older copy command is tried after it.
+ */
+export declare function copyText(text: string): Promise<boolean>;

package/dist/snippet.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { controlFontSizes, useControlMetrics } from "./control/control.js";
+import { iconProps } from "./control/icon.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { Button } from "./button.js";
+import { Surface } from "./surface/surface.js";
+import { scale } from "./foundation/scale.js";
+/**
+ * A block of text meant to be copied whole, such as a command or a message to
+ * hand on. It sits in a recess, can be selected at once, and copies itself
+ * from the button in its corner.
+ */
+export const Snippet = forwardRef(function Snippet({ children, code = false, copyLabel = "Copy", className, style }, ref) {
+    const metrics = useControlMetrics("small");
+    const { spacing, radius } = metrics.visual;
+    const [copied, setCopied] = useState(false);
+    // A recess holding one value, like a field: it pads as a control does, not as a container.
+    const padding = scale(spacing, "medium");
+    return _jsxs(Surface, { ref: ref, className: className, color: "background", depth: "recessed", radius: resolveRadius("medium", radius), style: {
+            position: "relative",
+            display: "block",
+            // Room at the end for the copy button, so text never runs under it.
+            padding,
+            paddingInlineEnd: padding + metrics.height + metrics.gap,
+            // Its text reads at the size of a field's value, whatever surrounds it.
+            fontSize: controlFontSizes.medium,
+            ...style
+        }, children: [_jsx("div", { style: {
+                    whiteSpace: "pre-wrap",
+                    overflowWrap: "anywhere",
+                    userSelect: "all",
+                    lineHeight: 1.6,
+                    fontFamily: code ? "ui-monospace, SFMono-Regular, Menlo, monospace" : "inherit",
+                    fontSize: code ? "0.9em" : undefined
+                }, children: children }), _jsx(Button, { size: "small", shadow: false, "aria-label": copied ? "Copied" : copyLabel, style: { position: "absolute", insetBlockStart: padding / 2, insetInlineEnd: padding / 2, width: metrics.height, paddingInline: 0 }, onPress: () => void copyText(children).then(setCopied), children: copied ? _jsx(Check, { ...iconProps(14) }) : _jsx(Copy, { ...iconProps(14) }) })] });
+});
+/**
+ * Writes text to the clipboard and reports whether it could. A Program's frame
+ * may refuse the Clipboard API, so the older copy command is tried after it.
+ */
+export async function copyText(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch {
+        const field = document.createElement("textarea");
+        field.value = text;
+        field.setAttribute("readonly", "");
+        field.style.position = "fixed";
+        field.style.opacity = "0";
+        document.body.append(field);
+        field.select();
+        const copied = document.execCommand("copy");
+        field.remove();
+        return copied;
+    }
+}

package/dist/table.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 } from "./control/control.js";
+import { controlFontWeight, controlOpacity, transition, useControlMetrics, secondaryFontSize } from "./control/control.js";
 import { separatorColor } from "./control/field.js";
 import { itemPaint } from "./control/item.js";
 import { ariaSelection, stringKey } from "./control/selection.js";
@@ -50,7 +50,7 @@ const TableColumn = forwardRef(function TableColumn({ sortable = false, rowHeade
             outline: `3px solid ${state.isFocusVisible ? colorOpacity(colors.primary, 0.34) : "transparent"}`,
             outlineOffset: -3,
             cursor: sortable ? "pointer" : "default",
-            fontSize: "0.92em",
+            fontSize: secondaryFontSize,
             fontWeight: controlFontWeight,
             textAlign: "start",
             userSelect: "none",

package/dist/toast.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, UNSTABLE_Toast as AriaToast, UNSTABLE_ToastContent as AriaToastContent, UNSTABLE_ToastQueue as AriaToastQueue, UNSTABLE_ToastRegion as AriaToastRegion } from "react-aria-components";
 import { X } from "lucide-react";
-import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics, controlLineHeight } from "./control/control.js";
 import { FieldButton } from "./control/field-button.js";
 import { iconProps } from "./control/icon.js";
 import { meaningIcon } from "./control/meaning.js";
@@ -11,6 +11,7 @@ import { resolveRadius } from "./foundation/radius.js";
 import { scale } from "./foundation/scale.js";
 import { Surface } from "./surface/surface.js";
 import { floatingShadow } from "./surface/shadow-options.js";
+import { containerPadding } from "./foundation/spacing.js";
 const queue = new AriaToastQueue({ maxVisibleToasts: 5 });
 /**
  * Shows a brief message that does not interrupt, such as "Saved". It appears
@@ -53,10 +54,11 @@ export function ToastRegion({ className, style }) {
                                 gridTemplateColumns: "auto minmax(0, 1fr) auto",
                                 alignItems: "start",
                                 gap: metrics.gap * 2,
-                                padding: metrics.spacing,
+                                padding: containerPadding(visual.spacing),
+                                // The close button carries its own padding, so the end keeps less.
                                 paddingInlineEnd: metrics.spacing / 2,
                                 fontSize: controlFontSizes.medium,
-                                lineHeight: 1.45
-                            }, children: [_jsx("span", { style: { display: "grid", height: "1.45em", alignItems: "center", color: colorLevel(resolveColor(color, visual.colors), "strong", visual.colors) }, children: _jsx(Icon, { ...iconProps(Math.round(metrics.height / 2)) }) }), _jsxs(AriaToastContent, { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(Text, { slot: "title", style: { fontWeight: controlFontWeight }, children: item.content.title }), item.content.description != null && _jsx(Text, { slot: "description", style: { opacity: controlOpacity.secondary }, children: item.content.description })] }), _jsx(FieldButton, { slot: "close", metrics: metrics, "aria-label": "Close", children: _jsx(X, { ...iconProps(Math.round(metrics.height / 2)) }) })] }) });
+                                lineHeight: controlLineHeight
+                            }, children: [_jsx("span", { style: { display: "grid", height: `${controlLineHeight}em`, alignItems: "center", color: colorLevel(resolveColor(color, visual.colors), "strong", visual.colors) }, children: _jsx(Icon, { ...iconProps(16) }) }), _jsxs(AriaToastContent, { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(Text, { slot: "title", style: { fontWeight: controlFontWeight }, children: item.content.title }), item.content.description != null && _jsx(Text, { slot: "description", style: { opacity: controlOpacity.secondary }, children: item.content.description })] }), _jsx(FieldButton, { slot: "close", metrics: metrics, "aria-label": "Close", children: _jsx(X, { ...iconProps(14) }) })] }) });
                 } })] });
 }

package/dist/typography.d.ts

@@ -33,6 +33,7 @@ export interface KbdProps {
     readonly className?: string;
     readonly style?: CSSProperties;
 }
+/** Running text sets its lines at this height, relative to its size. */
 /**
  * A key to press, drawn as a small raised keycap. Its label takes the control
  * text scale, and the cap is as tall as the line of text around it, so it

package/dist/typography.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Heading as AriaHeading, Keyboard as AriaKeyboard, Text as AriaText } from "react-aria-components";
-import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, controlLineHeight, controlOpacity, useControlMetrics } from "./control/control.js";
 import { scale, scaleMultiplier } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { Surface } from "./surface/surface.js";
@@ -28,13 +28,12 @@ export const Heading = forwardRef(function Heading({ level = 2, size, style, ...
 export const Text = forwardRef(function Text({ tone = "default", size, style, ...properties }, ref) {
     return _jsx(AriaText, { ...properties, ref: ref, style: {
             fontSize: size === undefined ? undefined : controlFontSizes[size],
-            lineHeight: textLineHeight,
+            lineHeight: controlLineHeight,
             opacity: tone === "secondary" ? controlOpacity.secondary : undefined,
             ...style
         } });
 });
 /** Running text sets its lines at this height, relative to its size. */
-const textLineHeight = 1.45;
 /**
  * A key to press, drawn as a small raised keycap. Its label takes the control
  * text scale, and the cap is as tall as the line of text around it, so it
@@ -43,7 +42,7 @@ const textLineHeight = 1.45;
 export const Kbd = forwardRef(function Kbd({ children, className, style }, ref) {
     const metrics = useControlMetrics("xsmall");
     const label = Number.parseFloat(controlFontSizes.medium);
-    const cap = `${textLineHeight / label}em`;
+    const cap = `${controlLineHeight / label}em`;
     return _jsx(AriaKeyboard, { ref: ref, className: className, style: { display: "inline-block", verticalAlign: "middle", lineHeight: 1 }, children: _jsx(Surface, { as: "span", radius: metrics.radius, shadow: false, style: {
                 display: "inline-flex",
                 alignItems: "center",

package/package.json

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