@phreshos/react-ui 0.1.5 → 0.1.6

package/README.md

@@ -105,6 +105,8 @@ same source and a direct color remains an explicit local override. `grain`,
 their semantic levels or direct values, and remain bounded by Core's Theme
 limits. Radius and foreground remain ordinary Theme styles. Grain intensity
 controls tonal distance while grain amount controls retained cell density.
+Each Surface owns one uniform one-pixel inset edge derived from its resolved
+material color; consumers supply only their radius and do not redraw the edge.
 When either is zero, Surface creates no grain pattern or paths. Refraction and
 native frost use independent backdrop layers so blur does not soften the
 displaced image. Enabled organic, wave, and ripple fields are combined

package/dist/surface.js

@@ -9,7 +9,6 @@ const layerStyle = {
     borderRadius: "inherit",
     pointerEvents: "none"
 };
-const borderOpacity = 0.3;
 /** Contains content above locally owned Surface material layers. */
 export const Surface = forwardRef(function Surface({ animation, backdrop, brightness, children, color, distortion, grain, grainAmount, opacity, ripples, saturation, style, waves, ...properties }, forwardedRef) {
     const theme = useTheme();
@@ -32,20 +31,17 @@ export const Surface = forwardRef(function Surface({ animation, backdrop, bright
             borderRadius: theme.radius,
             color: theme.foreground,
             ...style
-        }, children: [resolved.refracts && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), resolved.frost && _jsx(BackdropLayer, { name: "frost", filter: resolved.frost, zIndex: -2 }), _jsx(SurfaceBorder, { color: resolved.material.color }), _jsx(SurfaceMaterial, { identity: identity, ...resolved.material }), children] });
+        }, children: [resolved.refracts && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), resolved.frost && _jsx(BackdropLayer, { name: "frost", filter: resolved.frost, zIndex: -2 }), _jsx(SurfaceBorder, { color: resolved.material.color, opacity: resolveScale("large", resolved.material.opacity, themeLimits.surface.opacity) }), _jsx(SurfaceMaterial, { identity: identity, ...resolved.material }), children] });
 });
-/** Draws one continuous edge from the same color as the Surface material. */
-function SurfaceBorder({ color }) {
-    const highlight = `color-mix(in oklch, ${color} 88%, white)`;
-    const shade = `color-mix(in oklch, ${color} 94%, black)`;
+/** Draws one uniform inset edge from the same color as the Surface material. */
+function SurfaceBorder({ color, opacity }) {
+    const edge = `color-mix(in oklch, ${color} 94%, black)`;
     return _jsx("div", { "data-surface-border": "", "aria-hidden": "true", style: {
             ...layerStyle,
             zIndex: 0,
-            borderStyle: "solid",
-            borderWidth: 1,
-            borderColor: `${highlight} ${shade} ${shade} ${highlight}`,
             boxSizing: "border-box",
-            opacity: borderOpacity
+            boxShadow: `inset 0 0 0 1px ${edge}`,
+            opacity
         } });
 }
 /** Keeps refraction and native frost in independent compositor passes. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -52,7 +52,7 @@
     "prepack": "node --run test && node --run build"
   },
   "peerDependencies": {
-    "@phreshos/core": "^0.1.9",
+    "@phreshos/core": "^0.1.13",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.9",
+    "@phreshos/core": "^0.1.13",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",