@phreshos/react-ui 0.1.40 → 0.1.41

package/dist/surface/grain.d.ts

@@ -4,6 +4,15 @@
  * without also fading that layer's backdrop.
  */
 export declare function grainImage(seed: number, amount: number, opacity: number): string;
+/**
+ * One grain texture as a shared class. Its name comes from the texture's own
+ * parameters, so server and browser rendering agree on it, and the rule is
+ * written once however many Surfaces use it instead of inline on each.
+ */
+export declare function grainTexture(seed: number, amount: number, opacity: number): Readonly<{
+    name: string;
+    rule: string;
+}>;
 /**
  * One texture serves every Surface. Each Surface tiles it from its own origin,
  * so neighbours never align, and equal paints can share one generated class.

package/dist/surface/grain.js

@@ -20,6 +20,15 @@ export function grainImage(seed, amount, opacity) {
     resources.set(key, resource);
     return resource;
 }
+/**
+ * One grain texture as a shared class. Its name comes from the texture's own
+ * parameters, so server and browser rendering agree on it, and the rule is
+ * written once however many Surfaces use it instead of inline on each.
+ */
+export function grainTexture(seed, amount, opacity) {
+    const name = `phreshos-grain-${seed}-${amount}-${Math.round(opacity * 1_000)}`.replace(/[^a-z0-9-]/gi, "_");
+    return { name, rule: `:where(.${name}) { --phreshos-surface-grain: ${grainImage(seed, amount, opacity)} }` };
+}
 /**
  * One texture serves every Surface. Each Surface tiles it from its own origin,
  * so neighbours never align, and equal paints can share one generated class.

package/dist/surface/surface.d.ts

@@ -76,6 +76,10 @@ export declare function surfacePaint(visual: Visual, color: Color, depth: Surfac
     ring: string;
     shadow: string;
     distortion: number;
+    grain: Readonly<{
+        name: string;
+        rule: string;
+    }> | null;
     variables: CSSProperties;
 };
 /**

package/dist/surface/surface.js

@@ -3,7 +3,7 @@ import { createElement, forwardRef, useId, useInsertionEffect } from "react";
 import { canvasDarkness, colorOpacity, contrast, mixColor, readableColor, recessColor, resolveColor } from "../foundation/color.js";
 import { resolveRadius } from "../foundation/radius.js";
 import { useVisual } from "../foundation/visual.js";
-import { grainImage, grainSeed, grainSize } from "./grain.js";
+import { grainSeed, grainSize, grainTexture } from "./grain.js";
 import { flushPaintRules, paintClass, usePaintClasses } from "./paint-class.js";
 import { resolveMaterialOptions } from "./material-options.js";
 import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
@@ -35,10 +35,10 @@ export const SurfaceView = forwardRef(function Surface({ as: Element = "div", co
     return createElement(Element, {
         ...properties,
         ref,
-        className: [surfaceClass, painted, dimmedClass(interaction?.disabled ?? false), className].filter(Boolean).join(" "),
+        className: [surfaceClass, paint.grain?.name, painted, dimmedClass(interaction?.disabled ?? false), className].filter(Boolean).join(" "),
         // Without a document (server rendering), the same declarations travel inline.
         style: painted === undefined ? { ...inlineDeclarations(declarations), ...style } : style
-    }, _jsx(SurfaceStyle, {}), paint.distortion > 0 && _jsx(Refraction, { identity: identity, distortion: paint.distortion }), children);
+    }, _jsx(SurfaceStyle, {}), paint.grain && _jsx(GrainStyle, { grain: paint.grain }), paint.distortion > 0 && _jsx(Refraction, { identity: identity, distortion: paint.distortion }), children);
 });
 function inlineDeclarations(declarations) {
     const result = {};
@@ -94,8 +94,8 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
         ? [material.backdrop > 0 ? `blur(${material.backdrop}px)` : "", material.saturation !== 1 ? `saturate(${material.saturation})` : ""].filter(Boolean).join(" ")
         : "";
     const grain = level >= materialLevel.basic && material.grain > 0 && material.grainAmount > 0
-        ? grainImage(grainSeed, material.grainAmount, level === materialLevel.basic ? material.grain * material.opacity : material.grain)
-        : "none";
+        ? grainTexture(grainSeed, material.grainAmount, level === materialLevel.basic ? material.grain * material.opacity : material.grain)
+        : null;
     const ringBase = interaction?.invalid
         ? colors.danger
         : !clear && (contrast(base, colors.background) ?? 1) >= 1.6 ? base : colors.primary;
@@ -135,9 +135,11 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
         ring: colorOpacity(ringBase, 0.34),
         shadow: [hairline, outer === "none" ? null : outer].filter(Boolean).join(", ") || "none",
         distortion: level >= materialLevel.full && translucent ? material.distortion : 0,
+        grain,
         variables: {
             "--phreshos-surface-paint": translucent ? colorOpacity(fill, opacity) : fill,
-            "--phreshos-surface-grain": grain,
+            // A grain texture arrives through its shared class; without one the layer is empty.
+            ...(grain === null ? { "--phreshos-surface-grain": "none" } : {}),
             "--phreshos-surface-frost": frost || "none",
             "--phreshos-surface-rim": rim,
             "--phreshos-surface-spill-top": spill("top"),
@@ -243,6 +245,10 @@ const stylesheet = `
   mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
 }
 `;
+/** One rule per grain texture, hoisted and deduplicated by React like the stylesheet below. */
+function GrainStyle({ grain }) {
+    return _jsx("style", { href: grain.name, precedence: "phreshos", children: grain.rule });
+}
 /** React hoists and deduplicates this stylesheet, including inside portals. */
 function SurfaceStyle() {
     return _jsx("style", { href: "phreshos-react-ui-surface", precedence: "phreshos", children: stylesheet });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,