@phreshos/react-ui 0.1.46 → 0.1.48

package/dist/context-menu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useContext, useEffect, useRef } from "react";
+import { Children, cloneElement, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
+import { ClearPressResponder } from "react-aria/private/interactions/PressResponder";
 import { MenuTrigger as AriaMenuTrigger, OverlayTriggerStateContext, Pressable as AriaPressable } from "react-aria-components";
 import { ariaOpenState } from "./control/open-state.js";
 import { Menu } from "./menu.js";
@@ -8,7 +9,12 @@ export function ContextMenuRoot({ children, ...state }) {
     return _jsx(AriaMenuTrigger, { ...ariaOpenState(state), trigger: "contextMenu", children: children });
 }
 export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger({ children, disabled }, ref) {
-    return _jsx(AriaPressable, { ref: ref, isDisabled: disabled, children: children });
+    // The menu's press state belongs to the trigger alone. What the trigger holds, such as the rows of a
+    // list, keeps its own presses instead of all showing the menu's.
+    const child = Children.only(children);
+    const held = child.props.children;
+    const content = held === undefined ? child : cloneElement(child, undefined, _jsx(ClearPressResponder, { children: held }));
+    return _jsx(AriaPressable, { ref: ref, isDisabled: disabled, children: content });
 });
 function setRef(ref, value) {
     if (typeof ref === "function")

package/dist/dialog.js

@@ -53,9 +53,12 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
     const padding = containerPadding(visual.spacing);
     const transition = overlayTransition(visual);
     const direction = resolveDirection(properties.dir, useDirection());
+    // The width belongs to the centered modal, so a Dialog of any width stays centered; the Surface fills it.
+    const { width = "32rem", maxWidth, ...surfaceStyle } = style ?? {};
     return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
                     ...transition,
-                    width: `min(32rem, calc(100vw - ${inset * 2}px))`,
+                    width,
+                    maxWidth: maxWidth ?? `calc(100vw - ${inset * 2}px)`,
                     maxHeight: `calc(100vh - ${inset * 2}px)`,
                     outline: "none"
                 }, children: _jsx(Surface, { className: className, color: color, material: material, 
@@ -67,7 +70,7 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
                         maxHeight: "inherit",
                         padding,
                         overflow: "hidden",
-                        ...style
+                        ...surfaceStyle
                     }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
                             display: "grid",
                             gap: inset,

package/dist/surface/surface.d.ts

@@ -14,8 +14,10 @@ export type { ShadowOptions } from "./shadow-options.js";
  *   flat     — a region level with its surroundings: only a boundary.
  *   recessed — something that holds content: a slightly deeper paint and an
  *              inner shadow instead of an outer one.
+ *   none     — part of its surroundings: nothing painted at rest; hover, press,
+ *              and focus still show.
  */
-export type SurfaceDepth = "raised" | "flat" | "recessed";
+export type SurfaceDepth = "raised" | "flat" | "recessed" | "none";
 export interface SurfaceOwnProps extends MaterialOverrides, ShadowOverrides, RadiusProps {
     readonly color?: Color;
     readonly depth?: SurfaceDepth;

package/dist/surface/surface.js

@@ -79,9 +79,12 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
     // A recess moves away from its surroundings toward whichever extreme has
     // room, by one constant perceptual difference on any canvas.
     const rest = depth === "recessed" ? recessColor(base) : base;
-    // A transparent Surface has no substance of its own: it takes the content
-    // color of whatever it sits on and only reveals interaction as a veil.
-    const clear = base === "transparent";
+    // 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";
+    const tinted = depth === "none" && base !== "transparent" && base !== colors.default;
     const fill = clear
         ? shift > 0 ? colorOpacity(colors.foreground, shift * clearVeil) : "transparent"
         : mixColor(rest, colors.foreground, shift);
@@ -131,7 +134,7 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
         fill,
         // The label is chosen once for the resting paint: interaction shades stay
         // close to it, and re-deciding per state would flip text on near-ties.
-        text: clear ? "inherit" : readableColor(rest, colors),
+        text: tinted ? base : clear ? "inherit" : readableColor(rest, colors),
         ring: colorOpacity(ringBase, 0.34),
         shadow: [hairline, outer === "none" ? null : outer].filter(Boolean).join(", ") || "none",
         distortion: level >= materialLevel.full && translucent ? material.distortion : 0,
@@ -188,6 +191,11 @@ const edgeLightEnds = Object.freeze({
     recessed: {
         light: { edge: 0.45, side: 0.12, spill: 0, hairline: 0.12 },
         dark: { edge: 0.12, side: 0.04, spill: 0, hairline: 0.45 }
+    },
+    // Without depth nothing is edged; the ends only complete the table.
+    none: {
+        light: { edge: 0, side: 0, spill: 0, hairline: 0 },
+        dark: { edge: 0, side: 0, spill: 0, hairline: 0 }
     }
 });
 /** A separate compositor pass for refraction, present only when it is visible. */

package/package.json

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