@phreshos/react-ui 0.1.16 → 0.1.17

package/dist/surface-material.js

@@ -1,128 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { colorLightness, colorOpacity, orderColors } from "./color.js";
-import { scale } from "./scale.js";
-/** The locally owned fill, refraction definition, and glass rim inside one Surface. */
-export function SurfaceMaterial({ color, distortion, foreground, grain, grainAmount, identity, opacity, ripples, waves }) {
-    const element = useRef(null);
-    const [colors, setColors] = useState(null);
-    const seed = useMemo(() => seedFrom(identity), [identity]);
-    const hasPaint = opacity > 0;
-    const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
-    const hasDistortion = distortion > 0 || waves > 0 || ripples > 0;
-    const initial = useMemo(() => hasGrain ? grainPaths(seed, grainAmount) : [], [grainAmount, hasGrain, seed]);
-    // Resolve variables, currentColor, and CSS expressions in this Surface's
-    // own scope before comparing colors. Layout effects settle before paint.
-    useLayoutEffect(() => {
-        const material = element.current;
-        const view = material?.ownerDocument.defaultView;
-        if (!material || !view || !hasPaint)
-            return;
-        const computed = view.getComputedStyle(material);
-        const background = computed.fill;
-        const foreground = computed.color;
-        if (colors?.background === background && colors.foreground === foreground)
-            return;
-        setColors({ ...orderColors(background, foreground), background, foreground, lightness: Math.max(0, Math.min(1, colorLightness(background))) });
-    });
-    if (!hasPaint && !hasDistortion)
-        return null;
-    return _jsxs(Fragment, { children: [_jsxs("svg", { "data-surface-material": "", "aria-hidden": "true", focusable: "false", style: {
-                    position: "absolute",
-                    zIndex: -1,
-                    inset: 0,
-                    display: "block",
-                    width: "100%",
-                    height: "100%",
-                    overflow: "hidden",
-                    borderRadius: "inherit",
-                    boxShadow: hasPaint && colors ? `inset 0 1px 2px ${colorOpacity(colors.lighter, 0.28)}, 0 8px 24px ${colorOpacity(colors.darker, 0.04)}` : undefined,
-                    pointerEvents: "none"
-                }, children: [(hasGrain || hasDistortion) && _jsxs("defs", { children: [hasDistortion && _jsx(DistortionFilter, { distortion: distortion, identity: identity, ripples: ripples, seed: seed, waves: waves }), hasGrain && _jsx("pattern", { id: `${identity}-grain`, width: patternSize, height: patternSize, patternUnits: "userSpaceOnUse", children: initial.map((path, tone) => _jsx("path", { "data-surface-grain-tone": tone, d: path, fill: grainTone(color, tone, grain), shapeRendering: "crispEdges" }, tone)) })] }), hasPaint && _jsxs("g", { "data-surface-paint": "", opacity: opacity, children: [_jsx("rect", { ref: element, "data-surface-base": "", width: "100%", height: "100%", style: { fill: color, color: foreground } }), hasGrain && _jsx("rect", { "data-surface-grain": "", width: "100%", height: "100%", fill: `url(#${identity}-grain)`, shapeRendering: "crispEdges" })] })] }), hasPaint && _jsx("div", { "data-surface-border": "", "aria-hidden": "true", style: {
-                    position: "absolute",
-                    // The material belongs behind content; its rim belongs above it.
-                    // Opaque children must not erase the Surface's rounded edge.
-                    zIndex: 1,
-                    inset: 0,
-                    padding: 1,
-                    borderRadius: "inherit",
-                    pointerEvents: "none",
-                    opacity: Math.min(1, scale(opacity, "xlarge")) * (colors?.lightness ?? 0),
-                    background: colors ? glassRim(colors.lighter, colors.darker) : undefined,
-                    WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-                    WebkitMaskComposite: "xor",
-                    mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-                    maskComposite: "exclude"
-                } })] });
-}
-function glassRim(light, dark) {
-    const edge = `color-mix(in oklch, ${dark} 20%, ${light})`;
-    return `linear-gradient(145deg, ${colorOpacity(light, 0.92)}, ${colorOpacity(light, 0.4)} 35%, ${colorOpacity(edge, 0.18)} 55%, ${colorOpacity(light, 0.6)} 85%, ${colorOpacity(light, 0.3)})`;
-}
-function DistortionFilter({ distortion, identity, ripples, seed, waves }) {
-    const fields = [
-        distortion > 0 && { name: "organic", strength: distortion, x: "R" },
-        waves > 0 && { name: "waves", strength: waves, x: "R" },
-        ripples > 0 && { name: "ripples", strength: ripples, x: "B" }
-    ].filter((field) => Boolean(field));
-    const scale = fields.reduce((total, field) => total + field.strength, 0);
-    const weighted = fields.map(field => `${identity}-${field.name}-weighted`);
-    const map = `${identity}-distortion-map`;
-    return _jsxs("filter", { id: `${identity}-distortion`, "data-surface-distortion": "", x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [distortion > 0 && _jsxs(Fragment, { children: [_jsx("feTurbulence", { "data-surface-distortion-noise": "", "data-surface-distortion-field": "organic", type: "fractalNoise", baseFrequency: "0.008 0.008", numOctaves: 2, seed: 92, result: `${identity}-organic-noise` }), _jsx("feGaussianBlur", { in: `${identity}-organic-noise`, stdDeviation: 2, result: `${identity}-organic-noise-blurred` })] }), waves > 0 && _jsx(Fragment, { children: _jsx("feTurbulence", { "data-surface-distortion-field": "waves", type: "turbulence", baseFrequency: "0.006 0.045", numOctaves: 1, seed: seed + 17, result: `${identity}-waves-noise` }) }), ripples > 0 && _jsx(Fragment, { children: _jsx("feTurbulence", { "data-surface-distortion-field": "ripples", type: "turbulence", baseFrequency: "0.055", numOctaves: 2, seed: seed + 31, result: `${identity}-ripples-noise` }) }), fields.map(field => _jsx("feColorMatrix", { "data-surface-distortion-weight": field.name, in: `${identity}-${field.name}-noise${field.name === "organic" ? "-blurred" : ""}`, type: "matrix", values: weightMatrix(field.x, field.strength / scale), result: `${identity}-${field.name}-weighted` }, field.name)), weighted.slice(1).map((field, index) => _jsx("feComposite", { "data-surface-distortion-combine": "", in: index === 0 ? weighted[0] : `${identity}-distortion-sum-${index}`, in2: field, operator: "arithmetic", k2: 1, k3: 1, result: index === weighted.length - 2 ? map : `${identity}-distortion-sum-${index + 1}` }, field)), _jsx("feDisplacementMap", { "data-surface-distortion-stage": "combined", in: "SourceGraphic", in2: weighted.length === 1 ? weighted[0] : map, scale: scale, xChannelSelector: "R", yChannelSelector: "G" })] });
-}
-function weightMatrix(x, weight) {
-    const red = x === "R" ? `${weight} 0 0 0 0` : `0 0 ${weight} 0 0`;
-    return `${red}
-          0 ${weight} 0 0 0
-          0 0 0 0 0
-          0 0 0 1 0`;
-}
-function grainTone(color, tone, intensity) {
-    const channel = Math.round(tone / (toneCount - 1) * 255);
-    const percentage = Math.round(intensity * 10_000) / 100;
-    return `color-mix(in srgb, ${color} ${100 - percentage}%, rgb(${channel} ${channel} ${channel}) ${percentage}%)`;
-}
-function grainPaths(seed, amount) {
-    const tones = Array.from({ length: toneCount }, () => []);
-    for (let y = 0; y < patternSize; y += 1) {
-        for (let x = 0; x < patternSize; x += 1) {
-            const pointX = x + seed * 41;
-            const pointY = y + seed * 17;
-            const presence = shaderHash(pointX + 71.9, pointY + 13.7);
-            if (presence > amount)
-                continue;
-            const fine = shaderHash(Math.floor(pointX * 1.18), Math.floor(pointY * 1.18));
-            const clustered = shaderHash(Math.floor(pointX * 0.47) + 31.7, Math.floor(pointY * 0.47) + 31.7);
-            const value = clamp(fine * 0.8 + clustered * 0.2, 0, 1);
-            const tone = Math.min(toneCount - 1, Math.floor(value * toneCount));
-            tones[tone]?.push(`M${x} ${y}h1v1h-1z`);
-        }
-    }
-    return tones.map(tone => tone.join(""));
-}
-function shaderHash(x, y) {
-    let red = fract(x * 0.1031);
-    let green = fract(y * 0.1031);
-    let blue = fract(x * 0.1031);
-    const product = red * (green + 33.33) + green * (blue + 33.33) + blue * (red + 33.33);
-    red += product;
-    green += product;
-    blue += product;
-    return fract((red + green) * blue);
-}
-function seedFrom(value) {
-    let seed = 2166136261;
-    for (const character of value) {
-        seed ^= character.codePointAt(0) ?? 0;
-        seed = Math.imul(seed, 16777619);
-    }
-    return (seed >>> 0) % 997 + 1;
-}
-function fract(value) {
-    return value - Math.floor(value);
-}
-function clamp(value, minimum, maximum) {
-    return Math.min(maximum, Math.max(minimum, value));
-}
-const patternSize = 64;
-const toneCount = 16;