@phreshos/react-ui 0.1.37 → 0.1.39

package/dist/alert-dialog.d.ts

@@ -9,7 +9,7 @@ export type AlertDialogContentProps = Omit<DialogContentProps, "role">;
 export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
 /** A dialog requiring an explicit decision rather than ambient dismissal. */
 export declare const AlertDialog: typeof AlertDialogRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./button.js").ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
     Header: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -17,6 +17,6 @@ export declare const AlertDialog: typeof AlertDialogRoot & {
     Description: import("react").ForwardRefExoticComponent<import("react-aria-components").TextProps & import("react").RefAttributes<HTMLElement>>;
     Body: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<import("./dialog.js").DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-    Close: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("./button.js").ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export type AlertDialogProps = ComponentProps<typeof AlertDialogRoot>;

package/dist/button.d.ts

@@ -1,20 +1,36 @@
 import type { ReactNode } from "react";
-import { type ButtonProps as AriaButtonProps } from "react-aria-components";
+import { type ButtonProps as AriaButtonProps, type LinkProps as AriaLinkProps } from "react-aria-components";
 import { type ControlProps } from "./control/control.js";
 import type { Color } from "./foundation/color.js";
 import type { RadiusProps } from "./foundation/radius.js";
 import type { MaterialOverrides } from "./surface/material-options.js";
 import type { ShadowOverrides } from "./surface/shadow-options.js";
-type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "render" | "style">;
+type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "onPress" | "render" | "style">;
+type NativeLinkProps = Omit<AriaLinkProps, "children" | "className" | "color" | "href" | "isDisabled" | "onClick" | "onPress" | "render" | "style">;
 /** A color from Appearance or CSS; omission keeps the Button neutral. */
 export type ButtonColor = Color;
-export interface ButtonProps extends NativeButtonProps, ControlProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+interface ButtonOwnProps extends ControlProps, RadiusProps, MaterialOverrides, ShadowOverrides {
     readonly children?: ReactNode;
-    /** Prevents activation while keeping the Button focusable. */
-    readonly pending?: boolean;
     /** Runs once for a normalized pointer, Enter, or Space activation. */
     readonly onPress?: () => void;
 }
-/** A raised Surface you act on. */
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A Button that acts: a native `<button>`. */
+export interface ButtonActionProps extends NativeButtonProps, ButtonOwnProps {
+    readonly href?: undefined;
+    /** Prevents activation while keeping the Button focusable. */
+    readonly pending?: boolean;
+}
+/**
+ * A Button that goes somewhere: a native `<a>` that looks and behaves like
+ * every other Button. Links inside the app use the `navigate` given to
+ * UIProvider; any other link is followed by the browser.
+ */
+export interface ButtonLinkProps extends NativeLinkProps, ButtonOwnProps {
+    readonly href: string;
+    readonly pending?: never;
+    readonly type?: never;
+}
+export type ButtonProps = ButtonActionProps | ButtonLinkProps;
+/** A raised Surface you act on, or follow when it has an `href`. */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export {};

package/dist/button.js

@@ -1,25 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Button as AriaButton } from "react-aria-components";
+import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
 import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
 import { surfaceRender } from "./control/surface-render.js";
-/** A raised Surface you act on. */
-export const Button = forwardRef(function Button({ children, color = "default", disabled, pending = false, radius, size, style, className, material, shadow, type = "button", ...properties }, ref) {
+/** A raised Surface you act on, or follow when it has an `href`. */
+export const Button = forwardRef(function Button(properties, ref) {
+    const { children, color = "default", disabled, radius, size, style, className, material, shadow, ...rest } = properties;
     const metrics = useControlMetrics(size, radius);
+    const surface = (state, pending) => ({
+        color,
+        material,
+        shadow,
+        radius: metrics.radius,
+        interaction: {
+            hovered: !state.isDisabled && !pending && state.isHovered,
+            pressed: !state.isDisabled && !pending && state.isPressed,
+            focusVisible: state.isFocusVisible,
+            disabled: state.isDisabled
+        }
+    });
+    if (rest.href !== undefined) {
+        const { pending: _pending, type: _type, ...link } = rest;
+        return _jsx(AriaLink, { ...link, ref: ref, className: className, isDisabled: disabled, render: (native, state) => {
+                // A disabled link has no destination: React Aria expects a span without an href.
+                const { href: _href, ...inert } = native;
+                return state.isDisabled
+                    ? surfaceRender("span", state => surface(state, false))(inert, state)
+                    : surfaceRender("a", state => surface(state, false))(native, state);
+            }, style: state => buttonStyle(metrics, !state.isDisabled && state.isPressed, state.isDisabled, false, style), children: children });
+    }
+    const { pending = false, type = "button", ...action } = rest;
     // Disabled state is read from React Aria, so a Button placed in a slot, such
     // as a calendar's month buttons, follows the owner that disables it.
-    return _jsx(AriaButton, { ...properties, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => ({
-            color,
-            material,
-            shadow,
-            radius: metrics.radius,
-            interaction: {
-                hovered: !state.isDisabled && !pending && state.isHovered,
-                pressed: !state.isDisabled && !pending && state.isPressed,
-                focusVisible: state.isFocusVisible,
-                disabled: state.isDisabled
-            }
-        })), style: state => buttonStyle(metrics, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: children });
+    return _jsx(AriaButton, { ...action, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => surface(state, pending)), style: state => buttonStyle(metrics, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: children });
 });
 function buttonStyle(metrics, pressed, disabled, pending, style) {
     return {

package/dist/calendar-layout.js

@@ -4,8 +4,8 @@ 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 { selectionLevel } from "./control/item.js";
-import { colorLevel, colorOpacity, readableColor, resolveColor } from "./foundation/color.js";
+import { selectionColor } from "./control/item.js";
+import { colorOpacity, readableColor, resolveColor } from "./foundation/color.js";
 import { useDirection } from "./foundation/direction.js";
 import { dimmedClass, surfacePaint } from "./surface/surface.js";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -51,7 +51,7 @@ function daySelection(state, calendar) {
 }
 /**
  * A chosen day is the calendar's one decision, so it takes the full color;
- * the days inside a range take the selection level; every other day only veils.
+ * the days inside a range take the selection color; every other day only veils.
  */
 function cellStyle(metrics, color, state, selection, range) {
     const { visual } = metrics;
@@ -61,7 +61,7 @@ function cellStyle(metrics, color, state, selection, range) {
     const fill = endpoint
         ? base
         : selection.selected
-            ? colorLevel(base, selectionLevel, colors)
+            ? selectionColor(base, colors)
             : "transparent";
     const paint = surfacePaint(visual, fill, "flat", "none", false, {
         hovered: state.isHovered || state.isFocused,

package/dist/color-picker.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { type ButtonProps } from "./button.js";
+import { type ButtonActionProps } from "./button.js";
 import { type OpenStateProps } from "./control/open-state.js";
 import { type PopoverContentProps } from "./popover.js";
 export type ColorPickerRootProps = OpenStateProps & Readonly<{
@@ -15,10 +15,10 @@ export type ColorPickerRootProps = OpenStateProps & Readonly<{
  * components edit it, which all follow the picker's color.
  */
 declare function ColorPickerRoot({ value, defaultValue, onChange, children, ...state }: ColorPickerRootProps): import("react").JSX.Element;
-export type ColorPickerTriggerProps = ButtonProps;
+export type ColorPickerTriggerProps = ButtonActionProps;
 export type ColorPickerContentProps = PopoverContentProps;
 export declare const ColorPicker: typeof ColorPickerRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
 };
 export {};

package/dist/control/item.d.ts

@@ -1,13 +1,16 @@
 import type { CSSProperties } from "react";
+import type { AppearanceColors } from "../foundation/appearance.js";
 import { type Color } from "../foundation/color.js";
 import type { Visual } from "../foundation/visual.js";
 import { type ControlMetrics } from "./control.js";
 import type { SurfaceRenderProps } from "./surface-render.js";
 /**
- * The level that marks what is selected, in every collection and inside a
- * calendar range.
+ * What marks a selection, in every collection and inside a calendar range:
+ * the subtle level of its color under the same veil as hover. The veil keeps
+ * a light color apart from its canvas, so a selection never shows less
+ * clearly than hovering does.
  */
-export declare const selectionLevel = "subtle";
+export declare function selectionColor(base: string, colors: AppearanceColors): string;
 export type ItemState = Readonly<{
     selected: boolean;
     hovered: boolean;
@@ -17,7 +20,7 @@ export type ItemState = Readonly<{
 }>;
 /**
  * One entry of a collection. At rest it has no paint of its own; hover and
- * press veil it, and selection lays the selection level of the collection
+ * press veil it, and selection lays the selection color of the collection
  * color beneath it. Every collection uses this same treatment.
  */
 export declare function itemSurface(visual: Visual, color: Color, state: ItemState, radius: CSSProperties["borderRadius"]): SurfaceRenderProps;

package/dist/control/item.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { colorLevel, resolveColor } from "../foundation/color.js";
-import { surfacePaint } from "../surface/surface.js";
+import { colorLevel, mixColor, resolveColor } from "../foundation/color.js";
+import { clearVeil, interactionShift, surfacePaint } from "../surface/surface.js";
 import { transition } from "./control.js";
 import { Check } from "lucide-react";
 import { iconProps } from "./icon.js";
 /**
- * The level that marks what is selected, in every collection and inside a
- * calendar range.
+ * What marks a selection, in every collection and inside a calendar range:
+ * the subtle level of its color under the same veil as hover. The veil keeps
+ * a light color apart from its canvas, so a selection never shows less
+ * clearly than hovering does.
  */
-export const selectionLevel = "subtle";
+export function selectionColor(base, colors) {
+    return mixColor(colorLevel(base, "subtle", colors), colors.foreground, interactionShift.hovered * clearVeil);
+}
 /**
  * One entry of a collection. At rest it has no paint of its own; hover and
- * press veil it, and selection lays the selection level of the collection
+ * press veil it, and selection lays the selection color of the collection
  * color beneath it. Every collection uses this same treatment.
  */
 export function itemSurface(visual, color, state, radius) {
     return {
-        color: state.selected ? colorLevel(resolveColor(color, visual.colors), selectionLevel, visual.colors) : "transparent",
+        color: state.selected ? selectionColor(resolveColor(color, visual.colors), visual.colors) : "transparent",
         depth: "flat",
         material: "none",
         radius,
@@ -25,7 +29,7 @@ export function itemSurface(visual, color, state, radius) {
 }
 /** The same treatment as a plain paint, for elements that cannot host a Surface. */
 export function itemPaint(visual, color, state) {
-    const paint = surfacePaint(visual, state.selected ? colorLevel(resolveColor(color, visual.colors), selectionLevel, visual.colors) : "transparent", "flat", "none", false, itemInteraction(state));
+    const paint = surfacePaint(visual, state.selected ? selectionColor(resolveColor(color, visual.colors), visual.colors) : "transparent", "flat", "none", false, itemInteraction(state));
     return { background: paint.fill, color: paint.text };
 }
 function itemInteraction(state) {

package/dist/dialog.d.ts

@@ -1,13 +1,13 @@
 import type { ComponentProps, CSSProperties, HTMLAttributes, ReactNode } from "react";
 import type { DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps, TextProps as AriaTextProps } from "react-aria-components";
-import { type ButtonProps } from "./button.js";
+import { type ButtonActionProps } from "./button.js";
 import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
 import { type Direction } from "./foundation/direction.js";
 import { type SurfaceOwnProps } from "./surface/surface.js";
 export type DialogRootProps = OverlayRootProps;
 export declare function DialogRoot({ children, ...state }: DialogRootProps): import("react").JSX.Element;
-export type DialogTriggerProps = ButtonProps;
-export declare const DialogTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogTriggerProps = ButtonActionProps;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /**
  * The layer behind a Dialog. Its open state belongs to the Dialog root; the
  * backdrop only decides how the Dialog may be dismissed.
@@ -45,11 +45,11 @@ export type DialogBodyProps = HTMLAttributes<HTMLDivElement>;
 export declare const DialogBody: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
 export type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
 export declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-export type DialogCloseProps = ButtonProps;
-export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogCloseProps = ButtonActionProps;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A modal dialog whose behavioral and structural roles remain independently composable. */
 export declare const Dialog: typeof DialogRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLElement>>;
     Header: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -57,6 +57,6 @@ export declare const Dialog: typeof DialogRoot & {
     Description: import("react").ForwardRefExoticComponent<AriaTextProps & import("react").RefAttributes<HTMLElement>>;
     Body: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-    Close: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export type DialogProps = ComponentProps<typeof DialogRoot>;

package/dist/dropdown-menu.d.ts

@@ -1,14 +1,14 @@
 import type { ComponentProps } from "react";
 import type { MenuTriggerProps as AriaMenuTriggerProps } from "react-aria-components";
-import { type ButtonProps } from "./button.js";
+import { type ButtonActionProps } from "./button.js";
 import { type OverlayRootProps } from "./control/open-state.js";
 export type DropdownMenuRootProps = OverlayRootProps & Readonly<Pick<AriaMenuTriggerProps, "trigger">>;
 export declare function DropdownMenuRoot({ children, trigger, ...state }: DropdownMenuRootProps): import("react").JSX.Element;
-export type DropdownMenuTriggerProps = ButtonProps;
-export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DropdownMenuTriggerProps = ButtonActionProps;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A button-triggered overlay. Its Content owns positioning; Menu owns commands and selection. */
 export declare const DropdownMenu: typeof DropdownMenuRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<import("./popover.js").PopoverContentProps & Readonly<{
         nonModal?: boolean;
     }> & import("react").RefAttributes<HTMLElement>>;

package/dist/foundation/provider.d.ts

@@ -7,7 +7,13 @@ export interface UIProviderProps {
     readonly children: ReactNode;
     /** Establishes the concrete direction inherited by the provider subtree. */
     readonly direction?: Direction;
+    /**
+     * Follows a link inside the app, such as a Button `href`, with the app's own
+     * router instead of a page load. Links to other sites, links with a `target`,
+     * and modified clicks are left to the browser.
+     */
+    readonly navigate?: (href: string) => void;
     readonly preferences?: PreferencesUpdate;
 }
 /** Establishes only the explicitly supplied UI values for a React subtree. */
-export declare function UIProvider({ appearance, children, direction, preferences }: UIProviderProps): import("react").JSX.Element;
+export declare function UIProvider({ appearance, children, direction, navigate, preferences }: UIProviderProps): import("react").JSX.Element;

package/dist/foundation/provider.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LucideProvider } from "lucide-react";
 import { useMemo } from "react";
+import { RouterProvider } from "react-aria-components";
 import { mergeAppearance } from "./appearance.js";
 import { DirectionContext, fixedDirectionSource } from "./direction.js";
 import { AppearanceContext, fixedPreferencesSource, PreferencesContext, useAppearance, usePreferences } from "./visual.js";
 const directionBoundaryStyle = { display: "contents" };
 /** Establishes only the explicitly supplied UI values for a React subtree. */
-export function UIProvider({ appearance, children, direction, preferences }) {
+export function UIProvider({ appearance, children, direction, navigate, preferences }) {
     let subtree = children;
     const directionSource = useMemo(() => direction === undefined ? undefined : fixedDirectionSource(direction), [direction]);
     if (preferences !== undefined)
@@ -16,6 +17,8 @@ export function UIProvider({ appearance, children, direction, preferences }) {
     if (directionSource !== undefined) {
         subtree = _jsx(DirectionContext.Provider, { value: directionSource, children: _jsx("div", { dir: direction, style: directionBoundaryStyle, children: subtree }) });
     }
+    if (navigate !== undefined)
+        subtree = _jsx(RouterProvider, { navigate: navigate, children: subtree });
     // Icons are not a supplied value: every provider gives its subtree the same
     // icon treatment. An icon follows its text size and color, with a constant
     // 1.5px stroke; a `size` or `strokeWidth` on the icon still wins.

package/dist/main.d.ts

@@ -16,7 +16,7 @@ export { resolveColor, useColor, useContrastingColor, type Color, type ColorLeve
 export { Panel, type PanelProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
 export { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps, type WindowMoveCaptureProps } from "./window.js";
 export { default as useWindowMoveHandle, type WindowMoveHandle } from "./use-window-move-handle.js";
-export { Button, type ButtonColor, type ButtonProps } from "./button.js";
+export { Button, type ButtonActionProps, type ButtonColor, type ButtonLinkProps, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";
 export { DateField, type DateFieldProps } from "./date-field.js";

package/dist/panel.js

@@ -5,7 +5,7 @@ import { headerHeight } from "./foundation/layout.js";
 import { resolveRadius } from "./foundation/radius.js";
 import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
-import { paintClass, paintClassesAvailable } from "./surface/paint-class.js";
+import { paintClass, usePaintClasses } from "./surface/paint-class.js";
 import { Surface } from "./surface/surface.js";
 const PanelContext = createContext({ color: undefined, hasHeader: false, radius: undefined });
 export const PanelHeader = forwardRef(function PanelHeader({ style, ...properties }, ref) {
@@ -44,7 +44,7 @@ export const PanelContent = forwardRef(function PanelContent({ className, style,
     const { color, hasHeader, radius } = useContext(PanelContext);
     // A zero-specificity class keeps the padding a default: any consumer class
     // or style still sets its own.
-    const padded = paintClassesAvailable ? paintClass(`padding: ${padding}px`) : undefined;
+    const padded = usePaintClasses() ? paintClass(`padding: ${padding}px`) : undefined;
     return _jsx(Surface, { color: color, material: "extended", radius: radius, ...properties, ref: ref, className: [padded, className].filter(Boolean).join(" ") || undefined, style: {
             ...(padded === undefined ? { padding } : {}),
             minWidth: 0,

package/dist/popover.d.ts

@@ -1,13 +1,13 @@
 import type { ComponentProps, CSSProperties, ReactNode } from "react";
 import type { DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, PopoverProps as AriaPopoverProps } from "react-aria-components";
-import { type ButtonProps } from "./button.js";
+import { type ButtonActionProps } from "./button.js";
 import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
 import { type Direction } from "./foundation/direction.js";
 import { type SurfaceOwnProps } from "./surface/surface.js";
 export type PopoverRootProps = OverlayRootProps;
 export declare function PopoverRoot({ children, ...state }: PopoverRootProps): import("react").JSX.Element;
-export type PopoverTriggerProps = ButtonProps;
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverTriggerProps = ButtonActionProps;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /**
  * The floating Surface of an overlay. Its open state belongs to the family
  * root, so this part takes placement, its own Surface, and ordinary element
@@ -26,18 +26,18 @@ export type PopoverDialogProps = AriaDialogProps;
 export declare const PopoverDialog: import("react").ForwardRefExoticComponent<AriaDialogProps & import("react").RefAttributes<HTMLElement>>;
 export type PopoverTitleProps = AriaHeadingProps;
 export declare const PopoverTitle: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export type PopoverCloseProps = ButtonProps;
-export declare const PopoverClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverCloseProps = ButtonActionProps;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** Positioned content that holds a Menu; it keeps the Appearance radius like every shell. */
 export declare const MenuContent: import("react").ForwardRefExoticComponent<PopoverContentProps & Readonly<{
     nonModal?: boolean;
 }> & import("react").RefAttributes<HTMLElement>>;
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export declare const Popover: typeof PopoverRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
     Dialog: import("react").ForwardRefExoticComponent<AriaDialogProps & import("react").RefAttributes<HTMLElement>>;
     Title: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-    Close: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export type PopoverProps = ComponentProps<typeof PopoverRoot>;

package/dist/surface/paint-class.d.ts

@@ -4,3 +4,10 @@ export declare function paintClass(declarations: string): string;
 export declare function flushPaintRules(): void;
 /** Whether generated rules can reach a document in this environment. */
 export declare const paintClassesAvailable: boolean;
+/**
+ * Whether this render may use paint classes. Server rendering sends paints
+ * inline, so hydration renders inline too and matches the server HTML; React
+ * then renders again with classes. Without this, the server's inline paint
+ * would stay on the element, because hydration does not patch attributes.
+ */
+export declare function usePaintClasses(): boolean;

package/dist/surface/paint-class.js

@@ -1,3 +1,4 @@
+import { useSyncExternalStore } from "react";
 /**
  * Every distinct Surface paint becomes one shared class. Surfaces repeat the
  * same few paints across a whole interface, so changing Theme or hovering a
@@ -34,3 +35,13 @@ export function flushPaintRules() {
 }
 /** Whether generated rules can reach a document in this environment. */
 export const paintClassesAvailable = typeof document !== "undefined";
+const unchanging = () => () => undefined;
+/**
+ * Whether this render may use paint classes. Server rendering sends paints
+ * inline, so hydration renders inline too and matches the server HTML; React
+ * then renders again with classes. Without this, the server's inline paint
+ * would stay on the element, because hydration does not patch attributes.
+ */
+export function usePaintClasses() {
+    return useSyncExternalStore(unchanging, () => paintClassesAvailable, () => false);
+}

package/dist/surface/surface.d.ts

@@ -62,6 +62,13 @@ export declare const Surface: SurfaceComponent;
  * calendar's days, are disabled with it and do not fade a second time.
  */
 export declare function dimmedClass(disabled: boolean, className?: string): string | undefined;
+/** How far hover and press move a paint toward the text color. */
+export declare const interactionShift: Readonly<{
+    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 declare const clearVeil = 1.3;
 /** 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;
@@ -71,3 +78,14 @@ export declare function surfacePaint(visual: Visual, color: Color, depth: Surfac
     distortion: number;
     variables: CSSProperties;
 };
+/**
+ * How far the inward spill reaches: at most a fixed depth, and less on short
+ * Surfaces. At a fixed depth a small button was lit through nearly half its
+ * height and read as swollen, while a large panel barely changes.
+ *
+ * The limit is the height of the spill's background layer, not the gradient's
+ * size: browsers reject a size that mixes pixels and percentages inside
+ * radial-gradient(), and one rejected layer drops the whole background,
+ * grain included.
+ */
+export declare const spillDepth = "min(6px, 12%)";

package/dist/surface/surface.js

@@ -4,7 +4,7 @@ import { canvasDarkness, colorOpacity, contrast, mixColor, readableColor, recess
 import { resolveRadius } from "../foundation/radius.js";
 import { useVisual } from "../foundation/visual.js";
 import { grainImage, grainSeed, grainSize } from "./grain.js";
-import { flushPaintRules, paintClass, paintClassesAvailable } from "./paint-class.js";
+import { flushPaintRules, paintClass, usePaintClasses } from "./paint-class.js";
 import { resolveMaterialOptions } from "./material-options.js";
 import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
 /**
@@ -30,7 +30,7 @@ export const SurfaceView = forwardRef(function Surface({ as: Element = "div", co
         "outline-offset: 1px",
         `border-radius: ${typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius}`
     ].join("; ");
-    const painted = paintClassesAvailable ? paintClass(declarations) : undefined;
+    const painted = usePaintClasses() ? paintClass(declarations) : undefined;
     useInsertionEffect(flushPaintRules);
     return createElement(Element, {
         ...properties,
@@ -63,12 +63,16 @@ const disabledOpacity = 0.46;
 const dimmed = "phreshos-dimmed";
 const surfaceClass = "phreshos-surface";
 const materialLevel = Object.freeze({ none: 0, basic: 1, extended: 2, full: 3 });
+/** How far hover and press move a paint toward the text color. */
+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;
 /** Resolves every visual value of one Surface. Pure over its inputs. */
 export function surfacePaint(visual, color, depth, options, shadowOptions, interaction) {
     const { colors } = visual;
     const base = resolveColor(color, colors);
     const active = interaction !== undefined && !interaction.disabled;
-    const shift = active ? interaction.pressed ? 0.1 : interaction.hovered ? 0.05 : 0 : 0;
+    const shift = active ? interaction.pressed ? interactionShift.pressed : interaction.hovered ? interactionShift.hovered : 0 : 0;
     // Recessed paint sinks slightly below its surroundings; interaction then
     // moves the same base toward the content color so every state stays related.
     const darkness = canvasDarkness(colors);
@@ -79,7 +83,7 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
     // color of whatever it sits on and only reveals interaction as a veil.
     const clear = base === "transparent";
     const fill = clear
-        ? shift > 0 ? colorOpacity(colors.foreground, shift * 1.3) : "transparent"
+        ? shift > 0 ? colorOpacity(colors.foreground, shift * clearVeil) : "transparent"
         : mixColor(rest, colors.foreground, shift);
     const mode = clear ? "none" : typeof options === "object" ? "full" : options ?? "basic";
     const level = materialLevel[mode];
@@ -107,8 +111,10 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
     const rim = edged
         ? `linear-gradient(to right, transparent, ${colorOpacity(light, lit.side)} 18%, ${colorOpacity(light, lit.edge)} 50%, ${colorOpacity(light, lit.side)} 82%, transparent)`
         : "none";
+    // The spill fills its own background layer, whose height the stylesheet
+    // limits (see spillDepth).
     const spill = (edge) => edged && lit.spill > 0
-        ? `radial-gradient(50% 6px at 50% ${edge === "top" ? "0" : "100%"}, ${colorOpacity(light, lit.spill)}, transparent)`
+        ? `radial-gradient(50% 100% at 50% ${edge === "top" ? "0" : "100%"}, ${colorOpacity(light, lit.spill)}, transparent)`
         : "none";
     // A recessed Surface holds a value, so focus and validity also claim its hairline.
     const claimed = interaction?.invalid || (depth === "recessed" && interaction?.focusVisible);
@@ -141,6 +147,17 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
         }
     };
 }
+/**
+ * How far the inward spill reaches: at most a fixed depth, and less on short
+ * Surfaces. At a fixed depth a small button was lit through nearly half its
+ * height and read as swollen, while a large panel barely changes.
+ *
+ * The limit is the height of the spill's background layer, not the gradient's
+ * size: browsers reject a size that mixes pixels and percentages inside
+ * radial-gradient(), and one rejected layer drops the whole background,
+ * grain included.
+ */
+export const spillDepth = "min(6px, 12%)";
 /** How much light each part of the rim receives, interpolated along the canvas darkness. */
 function edgeLight(depth, darkness) {
     const { light, dark } = edgeLightEnds[depth];
@@ -210,7 +227,9 @@ const stylesheet = `
   z-index: -1;
   background-color: var(--phreshos-surface-paint);
   background-image: var(--phreshos-surface-spill-top), var(--phreshos-surface-spill-bottom), var(--phreshos-surface-grain);
-  background-size: auto, auto, ${grainSize}px ${grainSize}px;
+  background-size: 100% ${spillDepth}, 100% ${spillDepth}, ${grainSize}px ${grainSize}px;
+  background-position: center top, center bottom, 0 0;
+  background-repeat: no-repeat, no-repeat, repeat;
   -webkit-backdrop-filter: var(--phreshos-surface-frost);
   backdrop-filter: var(--phreshos-surface-frost);
   transition: background-color var(--phreshos-surface-duration) var(--phreshos-surface-easing);

package/dist/tooltip.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, CSSProperties, ReactNode } from "react";
 import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps as AriaTooltipTriggerProps } from "react-aria-components";
-import { type ButtonProps } from "./button.js";
+import { type ButtonActionProps } from "./button.js";
 import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
 import { type Direction } from "./foundation/direction.js";
 import { type SurfaceOwnProps } from "./surface/surface.js";
@@ -11,8 +11,8 @@ export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTrigg
     closeOnPress?: boolean;
 }>;
 export declare function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }: TooltipRootProps): import("react").JSX.Element;
-export type TooltipTriggerProps = ButtonProps;
-export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type TooltipTriggerProps = ButtonActionProps;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** The floating Surface of a Tooltip: its placement, its own Surface, and element attributes. */
 export interface TooltipContentProps extends Omit<AriaTooltipProps, AriaOverlayInternals | "children" | "className" | "color" | "style" | "dir">, SurfaceOwnProps {
     readonly children?: ReactNode;
@@ -23,7 +23,7 @@ export interface TooltipContentProps extends Omit<AriaTooltipProps, AriaOverlayI
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
 /** A description shown from the focus and hover state of its trigger. */
 export declare const Tooltip: typeof TooltipRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export type TooltipProps = ComponentProps<typeof TooltipRoot>;

package/dist/window.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import type { BeginWindowMoveGesture } from "@phreshos/core";
-import { type ButtonProps } from "./button.js";
+import { type ButtonActionProps } from "./button.js";
 import { type Color } from "./foundation/color.js";
 import { type SurfaceProps } from "./surface/surface.js";
 /** The material shell that establishes the complete header-and-content layout. */
@@ -27,7 +27,7 @@ export interface WindowIdentityProps extends Omit<HTMLAttributes<HTMLDivElement>
 }
 export type WindowCenterProps = HTMLAttributes<HTMLDivElement>;
 export type WindowActionsProps = HTMLAttributes<HTMLDivElement>;
-export type WindowActionProps = Omit<ButtonProps, "size">;
+export type WindowActionProps = Omit<ButtonActionProps, "size">;
 export type WindowControlProps = Omit<WindowActionProps, "children">;
 export interface WindowMaximizeProps extends WindowControlProps {
     readonly maximized?: boolean;

package/package.json

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