@phreshos/react-ui 0.2.2 → 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

@@ -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,
@@ -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/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";
@@ -114,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.2.2",
+  "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",