@phreshos/react-ui 0.2.1 → 0.3.0

package/dist/dialog.d.ts

@@ -20,6 +20,8 @@ export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, AriaOve
     readonly dismissable?: boolean;
     /** Whether Escape closes the Dialog. */
     readonly keyboardDismissable?: boolean;
+    /** DOM container the Dialog is drawn in, such as one that scales what it holds; the document's body by default. */
+    readonly portalContainer?: Element;
     readonly style?: CSSProperties;
 }
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/dialog.js

@@ -11,7 +11,7 @@ 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";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 export function DialogRoot({ children, ...state }) {
     return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
@@ -22,7 +22,7 @@ export const DialogTrigger = forwardRef(function DialogTrigger(properties, ref)
 const backdropDimming = 0.5;
 /** The share of the Appearance material's blur a backdrop takes: lighter than a frosted Surface. */
 const backdropBlurShare = 0.5;
-export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, className, dir, dismissable = false, keyboardDismissable = true, style, ...attributes }, ref) {
+export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, className, dir, dismissable = false, keyboardDismissable = true, portalContainer, style, ...attributes }, ref) {
     const visual = useVisual();
     const inset = scale(visual.spacing, "medium");
     const colors = visual.colors;
@@ -33,7 +33,7 @@ export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, cla
     const blur = visual.material.backdrop > 0 ? `blur(${visual.material.backdrop * backdropBlurShare}px)` : undefined;
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...attributes, isDismissable: dismissable, isKeyboardDismissDisabled: !keyboardDismissable, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...attributes, isDismissable: dismissable, isKeyboardDismissDisabled: !keyboardDismissable, UNSTABLE_portalContainer: portalContainer, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
                     ...transition,
                     backdropFilter: blur,
                     WebkitBackdropFilter: blur,
@@ -63,24 +63,24 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
                     maxWidth: maxWidth ?? `calc(100vw - ${inset * 2}px)`,
                     maxHeight: `calc(100vh - ${inset * 2}px)`,
                     outline: "none"
-                }, children: _jsx(Surface, { className: className, color: color, material: material, 
-                    // Dialog content is composed by its consumer, so no owned rounded shape
-                    // sits at a known inset; it keeps the plain Appearance radius like Popover.
-                    radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
-                        boxSizing: "border-box",
-                        width: "100%",
-                        maxHeight: "inherit",
-                        padding,
-                        overflow: "hidden",
-                        ...surfaceStyle
-                    }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
-                            display: "grid",
-                            gap: inset,
-                            minWidth: 0,
-                            minHeight: 0,
+                }, children: _jsx(FloatingLayer, { children: _jsx(Surface, { className: className, color: color, material: material, 
+                        // Dialog content is composed by its consumer, so no owned rounded shape
+                        // sits at a known inset; it keeps the plain Appearance radius like Popover.
+                        radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
+                            boxSizing: "border-box",
+                            width: "100%",
                             maxHeight: "inherit",
-                            outline: "none"
-                        }, children: children }) }) })] });
+                            padding,
+                            overflow: "hidden",
+                            ...surfaceStyle
+                        }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
+                                display: "grid",
+                                gap: inset,
+                                minWidth: 0,
+                                minHeight: 0,
+                                maxHeight: "inherit",
+                                outline: "none"
+                            }, children: children }) }) }) })] });
 });
 export const DialogHeader = forwardRef(function DialogHeader({ style, ...properties }, ref) {
     const gap = scale(useVisual().spacing, "small");
@@ -109,7 +109,9 @@ export const DialogDescription = forwardRef(function DialogDescription({ style,
         } });
 });
 export const DialogBody = forwardRef(function DialogBody({ style, ...properties }, ref) {
-    return _jsx("div", { ...properties, ref: ref, style: { minWidth: 0, minHeight: 0, ...style } });
+    // What a Body holds stands apart, as the Header's and the Footer's parts do.
+    const gap = scale(useVisual().spacing, "medium");
+    return _jsx("div", { ...properties, ref: ref, style: { display: "grid", gap, minWidth: 0, minHeight: 0, ...style } });
 });
 export const DialogFooter = forwardRef(function DialogFooter({ style, ...properties }, ref) {
     const gap = scale(useVisual().spacing, "small");

package/dist/panel.js

@@ -6,7 +6,7 @@ import { resolveRadius } from "./foundation/radius.js";
 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 { FloatingLayer, 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) {
@@ -29,14 +29,14 @@ export const PanelRoot = forwardRef(function Panel({ children, style, ...propert
     const hasHeader = Children.toArray(children).some(child => isValidElement(child) && child.type === PanelHeader);
     // The shell and its content share one radius: the Appearance radius.
     const radius = resolveRadius(properties.radius ?? "medium", useVisual().radius);
-    return _jsx(PanelContext.Provider, { value: { color: properties.color, hasHeader, radius }, children: _jsx(Surface, { material: "full", ...properties, ref: ref, radius: radius, style: {
-                display: "grid",
-                gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
-                minWidth: 0,
-                minHeight: 0,
-                maxHeight: "inherit",
-                ...style
-            }, children: children }) });
+    return _jsx(PanelContext.Provider, { value: { color: properties.color, hasHeader, radius }, children: _jsx(FloatingLayer, { children: _jsx(Surface, { material: "full", ...properties, ref: ref, radius: radius, style: {
+                    display: "grid",
+                    gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+                    minWidth: 0,
+                    minHeight: 0,
+                    maxHeight: "inherit",
+                    ...style
+                }, children: children }) }) });
 });
 export const PanelContent = forwardRef(function PanelContent({ className, style, ...properties }, ref) {
     const { spacing } = useVisual();

package/dist/popover.js

@@ -10,7 +10,7 @@ import { resolveDirectionalPlacement } from "./foundation/overlay-placement.js";
 import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { floatingShadow } from "./surface/shadow-options.js";
-import { Surface } from "./surface/surface.js";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 export function PopoverRoot({ children, ...state }) {
     return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
@@ -22,13 +22,13 @@ const PositionedContent = forwardRef(function PositionedContent({ children, clas
     const inset = scale(visual.spacing, "small");
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...attributes, isNonModal: nonModal, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, shadow: shadow ?? floatingShadow(visual.shadow), radius: radius, style: {
-                        boxSizing: "border-box",
-                        maxWidth: `calc(100vw - ${inset * 2}px)`,
-                        maxHeight: `calc(100vh - ${inset * 2}px)`,
-                        outline: "none",
-                        ...style
-                    }, children: children }) })] });
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...attributes, isNonModal: nonModal, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(FloatingLayer, { children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, shadow: shadow ?? floatingShadow(visual.shadow), radius: radius, style: {
+                            boxSizing: "border-box",
+                            maxWidth: `calc(100vw - ${inset * 2}px)`,
+                            maxHeight: `calc(100vh - ${inset * 2}px)`,
+                            outline: "none",
+                            ...style
+                        }, children: children }) }) })] });
 });
 export const PopoverContent = forwardRef(function PopoverContent(properties, ref) {
     return _jsx(PositionedContent, { ...properties, ref: ref });

package/dist/surface/surface.d.ts

@@ -47,6 +47,13 @@ export interface SurfaceInteraction {
     /** Marks a value-holding Surface whose current value is rejected. */
     readonly invalid?: boolean;
 }
+/**
+ * A layer that floats above everything, such as a popover, a dialog, or a panel: it is not inside the
+ * Surface it was opened from, so what it holds has nothing around it to keep apart from.
+ */
+export declare function FloatingLayer({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
 /**
  * How far a nested Surface keeps from the one it sits on: farther on a dark canvas, where
  * differences read smaller.

package/dist/surface/surface.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, createElement, forwardRef, useContext, useId, useInsertionEffect } from "react";
-import { canvasDarkness, colorOpacity, contrast, mixColor, readableColor, recessColor, resolveColor, separateColor } from "../foundation/color.js";
+import { canvasDarkness, colorOpacity, contrast, mixColor, perceivedDistance, readableColor, recessColor, resolveColor, separateColor } from "../foundation/color.js";
 import { resolveRadius } from "../foundation/radius.js";
 import { useVisual } from "../foundation/visual.js";
 import { grainSeed, grainSize, grainTexture } from "./grain.js";
@@ -9,6 +9,13 @@ import { resolveMaterialOptions } from "./material-options.js";
 import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
 /** The resting paint of the nearest painted Surface around, which a nested Surface keeps apart from. */
 const SurroundingPaint = createContext(null);
+/**
+ * A layer that floats above everything, such as a popover, a dialog, or a panel: it is not inside the
+ * Surface it was opened from, so what it holds has nothing around it to keep apart from.
+ */
+export function FloatingLayer({ children }) {
+    return _jsx(SurroundingPaint.Provider, { value: null, children: children });
+}
 /**
  * How far a nested Surface keeps from the one it sits on: farther on a dark canvas, where
  * differences read smaller.
@@ -107,14 +114,20 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
     const darkness = canvasDarkness(colors);
     // A recess moves away from its surroundings toward whichever extreme has
     // room, by one constant perceptual difference on any canvas.
-    const own = depth === "recessed" ? surfaceColor(color, depth, colors) : base;
+    const recess = depth === "recessed" ? surfaceColor(color, depth, colors) : base;
+    // A recess that would vanish into paint like its own, such as a field or a checkbox in a well,
+    // sinks one step below that paint instead.
+    const own = depth === "recessed" && surroundings !== null && (perceivedDistance(recess, surroundings) ?? Infinity) < nestingDistance(darkness)
+        ? recessColor(surroundings)
+        : recess;
     // A clear Surface, with no depth or a transparent color, has no substance of
     // its own: it paints nothing at rest, takes the content color of whatever it
     // sits on, and only reveals interaction as a veil. With no depth, a color
     // other than the neutral one colors its content instead of a fill.
     const clear = depth === "none" || base === "transparent";
     // A raised or level Surface nested in another keeps apart from it, however deep the nesting goes.
-    // A recess keeps its own constant depth below its color, so a well reads the same wherever it is.
+    // A recess keeps its own constant depth below its color, so a well reads the same wherever it is,
+    // unless it would vanish into what it sits on (above).
     const rest = clear || depth === "recessed" || surroundings === null ? own : separateColor(own, surroundings, nestingDistance(darkness));
     const tinted = depth === "none" && base !== "transparent" && base !== colors.default;
     const fill = clear

package/dist/tooltip.js

@@ -11,7 +11,7 @@ import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { timing } from "./foundation/timing.js";
 import { floatingShadow } from "./surface/shadow-options.js";
-import { Surface } from "./surface/surface.js";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 export function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }) {
     // A pointer resting on a trigger for four changes in place is asking what it is.
     const rest = timing("change", { tempo: useVisual().appearance.tempo }).duration * 4;
@@ -25,16 +25,16 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, cla
     const inset = scale(visual.spacing, "small");
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
-                        boxSizing: "border-box",
-                        maxWidth: "28em",
-                        paddingBlock: inset,
-                        paddingInline: inset * 1.5,
-                        outline: "none",
-                        fontSize: controlFontSizes.small,
-                        lineHeight: controlLineHeight,
-                        ...style
-                    }, children: children }) })] });
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(FloatingLayer, { children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
+                            boxSizing: "border-box",
+                            maxWidth: "28em",
+                            paddingBlock: inset,
+                            paddingInline: inset * 1.5,
+                            outline: "none",
+                            fontSize: controlFontSizes.small,
+                            lineHeight: controlLineHeight,
+                            ...style
+                        }, children: children }) }) })] });
 });
 /** A description shown from the focus and hover state of its trigger. */
 export const Tooltip = Object.assign(TooltipRoot, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -57,7 +57,7 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@internationalized/date": "^3.12.3",
-    "@phreshos/core": "^0.2.0",
+    "@phreshos/core": "^0.3.0",
     "colorjs.io": "^0.7.1",
     "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",