@phreshos/react-ui 0.1.41 → 0.1.42

package/dist/alert.js

@@ -6,6 +6,7 @@ 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,7 +22,7 @@ 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,
             ...style

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/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/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/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/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/toast.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,7 +54,8 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,