@phreshos/react-ui 0.1.6 → 0.1.7

package/README.md

@@ -94,13 +94,13 @@ 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

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

@@ -10,7 +10,7 @@ const layerStyle = {
     pointerEvents: "none"
 };
 /** 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);
@@ -21,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)
@@ -55,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.6",
+  "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.13",
+    "@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.13",
+    "@phreshos/core": "^0.1.15",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",