@phreshos/react-ui 0.1.5 → 0.1.7

package/README.md

@@ -94,17 +94,19 @@ texture:
 </Surface>
 
 <Surface color="strong" grain="large">...</Surface>
-<Surface color="#101114" grain={0.2} animation={8} backdrop={4} opacity={0.9}>...</Surface>
+<Surface color="#101114" grain={0.2} grainAnimation={8} backdrop={4} opacity={0.9}>...</Surface>
 <Surface distortion={70} waves={8} ripples={4} saturation={1.4} brightness={1.04}>...</Surface>
 ```
 
 `color` resolves from `Theme.background`; its semantic levels derive from that
 same source and a direct color remains an explicit local override. `grain`,
-`grainAmount`, `animation`, `backdrop`, `opacity`, `distortion`, `waves`,
+`grainAmount`, `grainAnimation`, `backdrop`, `opacity`, `distortion`, `waves`,
 `ripples`, `saturation`, and `brightness` resolve from `Theme.surface`, accept
 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-material.d.ts

@@ -1,5 +1,5 @@
 interface SurfaceMaterialProps {
-    readonly animation: number;
+    readonly grainAnimation: number;
     readonly color: string;
     readonly distortion: number;
     readonly grain: number;
@@ -10,5 +10,5 @@ interface SurfaceMaterialProps {
     readonly waves: number;
 }
 /** The locally owned SVG paint layer inside one Surface. */
-export declare function SurfaceMaterial({ animation, color, distortion, grain, grainAmount, identity, opacity, ripples, waves }: SurfaceMaterialProps): import("react").JSX.Element | null;
+export declare function SurfaceMaterial({ color, distortion, grain, grainAmount, grainAnimation, identity, opacity, ripples, waves }: SurfaceMaterialProps): import("react").JSX.Element | null;
 export {};

package/dist/surface-material.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef } from "react";
 /** The locally owned SVG paint layer inside one Surface. */
-export function SurfaceMaterial({ animation, color, distortion, grain, grainAmount, identity, opacity, ripples, waves }) {
+export function SurfaceMaterial({ color, distortion, grain, grainAmount, grainAnimation, identity, opacity, ripples, waves }) {
     const seed = useMemo(() => seedFrom(identity), [identity]);
     const hasPaint = opacity > 0;
     const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
@@ -11,14 +11,14 @@ export function SurfaceMaterial({ animation, color, distortion, grain, grainAmou
     const paths = useRef([]);
     useEffect(() => {
         paths.current.forEach((path, tone) => path?.setAttribute("d", initial[tone] ?? ""));
-        if (animation === 0 || !hasGrain || !svg.current)
+        if (grainAnimation === 0 || !hasGrain || !svg.current)
             return;
         const paint = (frame) => {
             const values = grainPaths(seed, frame, grainAmount);
             paths.current.forEach((path, tone) => path?.setAttribute("d", values[tone] ?? ""));
         };
-        return animate(svg.current, animation, paint);
-    }, [animation, grainAmount, hasGrain, initial, seed]);
+        return animate(svg.current, grainAnimation, paint);
+    }, [grainAnimation, grainAmount, hasGrain, initial, seed]);
     if (!hasPaint && !hasDistortion)
         return null;
     return _jsxs("svg", { ref: svg, "data-surface-material": "", "aria-hidden": "true", focusable: "false", style: {

package/dist/surface.d.ts

@@ -11,7 +11,7 @@ export type SurfaceProps = Omit<ComponentPropsWithoutRef<"div">, "color" | "opac
     /** Theme-derived level or direct retained grain amount from zero to one. */
     grainAmount?: ScaleLevel | number;
     /** Theme-derived level or direct grain changes per second from zero to 16. */
-    animation?: ScaleLevel | number;
+    grainAnimation?: ScaleLevel | number;
     /** Theme-derived level or direct backdrop blur from zero to 24 CSS pixels. */
     backdrop?: ScaleLevel | number;
     /** Theme-derived level or direct material opacity from zero to one. */
@@ -36,7 +36,7 @@ export declare const Surface: import("react").ForwardRefExoticComponent<Omit<Omi
     /** Theme-derived level or direct retained grain amount from zero to one. */
     grainAmount?: ScaleLevel | number;
     /** Theme-derived level or direct grain changes per second from zero to 16. */
-    animation?: ScaleLevel | number;
+    grainAnimation?: ScaleLevel | number;
     /** Theme-derived level or direct backdrop blur from zero to 24 CSS pixels. */
     backdrop?: ScaleLevel | number;
     /** Theme-derived level or direct material opacity from zero to one. */

package/dist/surface.js

@@ -9,9 +9,8 @@ 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) {
+export const Surface = forwardRef(function Surface({ backdrop, brightness, children, color, distortion, grain, grainAmount, grainAnimation, opacity, ripples, saturation, style, waves, ...properties }, forwardedRef) {
     const theme = useTheme();
     const identity = `phresh-surface-${useId().replaceAll(":", "")}`;
     const element = useRef(null);
@@ -22,7 +21,7 @@ export const Surface = forwardRef(function Surface({ animation, backdrop, bright
         else if (forwardedRef)
             forwardedRef.current = node;
     }, [forwardedRef]);
-    const resolved = resolveSurface({ animation, backdrop, brightness, color, distortion, grain, grainAmount, opacity, ripples, saturation, waves }, theme);
+    const resolved = resolveSurface({ backdrop, brightness, color, distortion, grain, grainAmount, grainAnimation, opacity, ripples, saturation, waves }, theme);
     useLayoutEffect(() => {
         const surface = element.current;
         if (surface)
@@ -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. */
@@ -59,7 +55,7 @@ function BackdropLayer({ filter, name, zIndex }) {
 }
 function resolveSurface(values, theme) {
     const material = {
-        animation: resolveScale(values.animation, theme.surface.animation, themeLimits.surface.animation),
+        grainAnimation: resolveScale(values.grainAnimation, theme.surface.grainAnimation, themeLimits.surface.grainAnimation),
         color: resolveColor(values.color, theme.background),
         distortion: resolveScale(values.distortion, theme.surface.distortion, themeLimits.surface.distortion),
         grain: resolveScale(values.grain, theme.surface.grain, themeLimits.surface.grain),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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.15",
     "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.15",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",