@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.0

package/dist/esm/core/ui/material-runtime.js

@@ -0,0 +1,852 @@
+import * as React from 'react';
+import { GlassMaterialNestedStrategy, GlassMaterialPriority, GlassMaterialPressFeedback, GlassSurfaceShape, MaterialCapabilityTier, MaterialCompositionState, MaterialKind, MaterialRefractiveBudgetState, } from '@wildo-ai/presets-components-models';
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
+const FILTER_REGISTRY_ID = 'wildo-glass-filter-registry';
+/** Coalesce continuous layout-resize ticks before allocating four exact maps. */
+const FILTER_GEOMETRY_SETTLE_MS = 48;
+const filterCache = new Map();
+let filterSequence = 0;
+export const DEFAULT_MATERIAL_RUNTIME_POLICY = {
+    maxRefractiveSurfaces: 6,
+    maxTotalRefractiveAreaPx: 560_000,
+};
+const MATERIAL_PRIORITY_RANK = {
+    [GlassMaterialPriority.PASSIVE]: 0,
+    [GlassMaterialPriority.NAVIGATION]: 1,
+    [GlassMaterialPriority.CONTROL]: 2,
+    [GlassMaterialPriority.OVERLAY]: 3,
+};
+/**
+ * Document-local allocator for expensive refractive backdrop passes.
+ *
+ * Every mounted material registers its real CSS-pixel area and semantic
+ * priority. Admission is recomputed deterministically: higher-priority
+ * interaction layers win, then stable mount order breaks ties. A rejected
+ * request does not lose its material; the hook renders the portable backdrop
+ * tier until capacity becomes available again.
+ */
+export class MaterialRefractiveBudgetManager {
+    admitted = new Set();
+    listeners = new Set();
+    nextOrder = 0;
+    policy;
+    requests = new Map();
+    revision = 0;
+    constructor(policy = DEFAULT_MATERIAL_RUNTIME_POLICY) {
+        this.policy = policy;
+    }
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+    getSnapshot = () => this.revision;
+    setPolicy(policy) {
+        if (this.policy.maxRefractiveSurfaces === policy.maxRefractiveSurfaces
+            && this.policy.maxTotalRefractiveAreaPx === policy.maxTotalRefractiveAreaPx)
+            return;
+        this.policy = policy;
+        this.recomputeAdmission();
+    }
+    updateRequest(id, areaPx, priority) {
+        const safeAreaPx = Math.max(0, Number.isFinite(areaPx) ? areaPx : 0);
+        const current = this.requests.get(id);
+        if (current && current.areaPx === safeAreaPx && current.priority === priority)
+            return;
+        this.requests.set(id, {
+            areaPx: safeAreaPx,
+            order: current?.order ?? this.nextOrder++,
+            priority,
+        });
+        this.recomputeAdmission();
+    }
+    releaseRequest(id) {
+        if (!this.requests.delete(id))
+            return;
+        this.recomputeAdmission();
+    }
+    isAdmitted(id) {
+        return this.admitted.has(id);
+    }
+    /** Test/diagnostic snapshot; callers cannot mutate allocator state. */
+    inspect() {
+        return {
+            admittedIds: [...this.admitted],
+            requestCount: this.requests.size,
+            totalAdmittedAreaPx: [...this.admitted].reduce((total, id) => total + (this.requests.get(id)?.areaPx ?? 0), 0),
+        };
+    }
+    recomputeAdmission() {
+        const nextAdmitted = new Set();
+        let admittedAreaPx = 0;
+        const ordered = [...this.requests.entries()].sort(([, left], [, right]) => (MATERIAL_PRIORITY_RANK[right.priority] - MATERIAL_PRIORITY_RANK[left.priority]
+            || left.order - right.order));
+        for (const [id, request] of ordered) {
+            if (nextAdmitted.size >= this.policy.maxRefractiveSurfaces)
+                break;
+            if (admittedAreaPx + request.areaPx > this.policy.maxTotalRefractiveAreaPx)
+                continue;
+            nextAdmitted.add(id);
+            admittedAreaPx += request.areaPx;
+        }
+        if (nextAdmitted.size === this.admitted.size
+            && [...nextAdmitted].every((id) => this.admitted.has(id)))
+            return;
+        this.admitted = nextAdmitted;
+        this.revision += 1;
+        for (const listener of this.listeners)
+            listener();
+    }
+}
+const defaultMaterialBudgetManager = new MaterialRefractiveBudgetManager();
+const MaterialRuntimePolicyContext = React.createContext(defaultMaterialBudgetManager);
+const MaterialRuntimeGroupContext = React.createContext(undefined);
+/** Owns one allocator per UI provider/document subtree. */
+export function MaterialRuntimePolicyProvider({ children, policy = DEFAULT_MATERIAL_RUNTIME_POLICY, }) {
+    const managerRef = React.useRef(null);
+    if (managerRef.current == null) {
+        managerRef.current = new MaterialRefractiveBudgetManager(policy);
+    }
+    React.useLayoutEffect(() => {
+        managerRef.current?.setPolicy(policy);
+    }, [policy]);
+    return React.createElement(MaterialRuntimePolicyContext.Provider, { value: managerRef.current }, children);
+}
+/**
+ * Declares that descendant material nodes form one optical object. The first
+ * rendered glass node is the group root; only DOM descendants carrying the
+ * same identity flatten into it. React portals retain the identity but start a
+ * new optical root because they do not share the rendered backdrop ancestry.
+ */
+export function MaterialRuntimeGroup({ children, id, }) {
+    const generatedId = React.useId();
+    return React.createElement(MaterialRuntimeGroupContext.Provider, { value: id ?? `material-group-${generatedId}` }, children);
+}
+function highestSupportedTier(profile, environment) {
+    if (environment.forcedColors
+        || environment.prefersReducedTransparency
+        || environment.prefersIncreasedContrast) {
+        return environment.forcedColors
+            ? profile.accessibility.forcedColorsTier
+            : environment.prefersReducedTransparency
+                ? profile.accessibility.reducedTransparencyTier
+                : profile.accessibility.increasedContrastTier;
+    }
+    if ((!profile.performance.pauseWhenDocumentHidden || environment.documentVisible)
+        && environment.supportsSvgBackdrop
+        && profile.capabilities.includes(MaterialCapabilityTier.REFRACTIVE)) {
+        return MaterialCapabilityTier.REFRACTIVE;
+    }
+    if (environment.supportsBackdrop && profile.capabilities.includes(MaterialCapabilityTier.BACKDROP)) {
+        return MaterialCapabilityTier.BACKDROP;
+    }
+    return MaterialCapabilityTier.FALLBACK;
+}
+/** Pure capability policy used by the hook and pinned independently in tests. */
+export function selectMaterialCapabilityTier(profile, environment, elementAreaPx) {
+    const tier = highestSupportedTier(profile, environment);
+    if (tier === MaterialCapabilityTier.REFRACTIVE
+        && elementAreaPx > profile.performance.maxRefractiveAreaPx) {
+        return profile.capabilities.includes(MaterialCapabilityTier.BACKDROP)
+            ? MaterialCapabilityTier.BACKDROP
+            : MaterialCapabilityTier.FALLBACK;
+    }
+    return tier;
+}
+function selectPortableMaterialTier(profile, environment) {
+    return environment.supportsBackdrop && profile.capabilities.includes(MaterialCapabilityTier.BACKDROP)
+        ? MaterialCapabilityTier.BACKDROP
+        : MaterialCapabilityTier.FALLBACK;
+}
+function readEnvironment() {
+    if (typeof window === 'undefined'
+        || typeof CSS === 'undefined'
+        || typeof CSS.supports !== 'function') {
+        return {
+            supportsBackdrop: false,
+            supportsSvgBackdrop: false,
+            prefersReducedTransparency: false,
+            prefersIncreasedContrast: false,
+            forcedColors: false,
+            documentVisible: true,
+        };
+    }
+    return {
+        supportsBackdrop: CSS.supports('backdrop-filter', 'blur(1px)')
+            || CSS.supports('-webkit-backdrop-filter', 'blur(1px)'),
+        supportsSvgBackdrop: CSS.supports('backdrop-filter', 'url("#wildo-glass-capability-probe")'),
+        prefersReducedTransparency: window.matchMedia('(prefers-reduced-transparency: reduce)').matches,
+        prefersIncreasedContrast: window.matchMedia('(prefers-contrast: more)').matches,
+        forcedColors: window.matchMedia('(forced-colors: active)').matches,
+        documentVisible: typeof document === 'undefined' || document.visibilityState !== 'hidden',
+    };
+}
+function useMaterialEnvironment() {
+    const [environment, setEnvironment] = React.useState(readEnvironment);
+    React.useEffect(() => {
+        const queries = [
+            window.matchMedia('(prefers-reduced-transparency: reduce)'),
+            window.matchMedia('(prefers-contrast: more)'),
+            window.matchMedia('(forced-colors: active)'),
+        ];
+        const update = () => setEnvironment(readEnvironment());
+        for (const query of queries)
+            query.addEventListener('change', update);
+        document.addEventListener('visibilitychange', update);
+        update();
+        return () => {
+            for (const query of queries)
+                query.removeEventListener('change', update);
+            document.removeEventListener('visibilitychange', update);
+        };
+    }, []);
+    return environment;
+}
+/**
+ * Material composition follows the rendered DOM, not React ownership. A
+ * portal is therefore a new optical depth while an actual descendant stays
+ * inside the nearest glass depth. This is the important distinction for
+ * dialogs/popovers: React context crosses portals, backdrop sampling does not.
+ */
+function isNestedInsideGlass(element, materialGroupId) {
+    let ancestor = element?.parentElement;
+    while (ancestor) {
+        if (ancestor.getAttribute('data-material-kind') === MaterialKind.GLASS
+            && (materialGroupId === undefined
+                || ancestor.getAttribute('data-material-group') === materialGroupId))
+            return true;
+        ancestor = ancestor.parentElement;
+    }
+    return false;
+}
+function findNearestGlassOwner(event) {
+    return event.composedPath().find((candidate) => (typeof Element !== 'undefined'
+        && candidate instanceof Element
+        && candidate.getAttribute('data-material-kind') === MaterialKind.GLASS));
+}
+function roundedRectangleDistance(x, y, width, height, radius) {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const qx = Math.abs(x - halfWidth) - (halfWidth - radius);
+    const qy = Math.abs(y - halfHeight) - (halfHeight - radius);
+    const outside = Math.hypot(Math.max(qx, 0), Math.max(qy, 0));
+    const inside = Math.min(Math.max(qx, qy), 0);
+    return outside + inside - radius;
+}
+/** Anti-aliased coverage for a signed inside-distance measured in map pixels. */
+export function calculateGlassBoundaryCoverage(insideDistanceMapPx) {
+    const progress = Math.max(0, Math.min(1, insideDistanceMapPx + 0.5));
+    return progress * progress * (3 - 2 * progress);
+}
+/**
+ * Resolve a stable outward unit normal from the rounded-rectangle SDF. Keeping
+ * all four samples around the same pixel centre prevents asymmetric corner
+ * vectors and makes the generated map independently testable.
+ */
+export function calculateRoundedRectangleOutwardNormal(x, y, width, height, radius, sampleOffset = 0.75) {
+    const gradientX = roundedRectangleDistance(x + sampleOffset, y, width, height, radius) - roundedRectangleDistance(x - sampleOffset, y, width, height, radius);
+    const gradientY = roundedRectangleDistance(x, y + sampleOffset, width, height, radius) - roundedRectangleDistance(x, y - sampleOffset, width, height, radius);
+    const gradientLength = Math.hypot(gradientX, gradientY) || 1;
+    return { x: gradientX / gradientLength, y: gradientY / gradientLength };
+}
+/**
+ * Evaluate the normalized cross-section of the authored glass bezel.
+ *
+ * These functions describe height, not displacement. The renderer derives the
+ * surface normal and then refracts a ray through it; treating the curve itself
+ * as a displacement magnitude was the source of the rejected painted-lens
+ * approximation.
+ */
+export function evaluateGlassSurfaceHeight(shape, normalizedDistance) {
+    const x = Math.max(0, Math.min(1, normalizedDistance));
+    switch (shape) {
+        case GlassSurfaceShape.CONVEX_CIRCLE:
+            return Math.sqrt(Math.max(0, 1 - (1 - x) ** 2));
+        case GlassSurfaceShape.CONVEX_SQUIRCLE:
+            return Math.max(0, 1 - (1 - x) ** 4) ** (1 / 4);
+        case GlassSurfaceShape.LIP: {
+            const convex = evaluateGlassSurfaceHeight(GlassSurfaceShape.CONVEX_SQUIRCLE, x * 2);
+            const concave = 1 - evaluateGlassSurfaceHeight(GlassSurfaceShape.CONVEX_CIRCLE, x) + 0.1;
+            const smootherstep = 6 * x ** 5 - 15 * x ** 4 + 10 * x ** 3;
+            return Math.max(0, Math.min(1, convex * (1 - smootherstep) + concave * smootherstep));
+        }
+    }
+}
+/**
+ * Sample the authored one-dimensional refraction profile without introducing
+ * raster steps between neighbouring samples.
+ */
+export function sampleGlassRefractionProfile(profile, normalizedDistance) {
+    if (profile.displacementPx.length === 0)
+        return 0;
+    const progress = Math.max(0, Math.min(1, normalizedDistance));
+    const position = progress * (profile.displacementPx.length - 1);
+    const lowerIndex = Math.floor(position);
+    const upperIndex = Math.min(profile.displacementPx.length - 1, lowerIndex + 1);
+    const mix = position - lowerIndex;
+    const lower = profile.displacementPx[lowerIndex] ?? 0;
+    const upper = profile.displacementPx[upperIndex] ?? lower;
+    return lower + (upper - lower) * mix;
+}
+/**
+ * Resolve signed rim lighting from a two-dimensional surface normal.
+ * Opposite normals must produce opposite responses; taking the absolute dot
+ * product would create the uniform bright outline rejected in visual review.
+ */
+export function calculateGlassEdgeResponse(normalX, normalY, lightAngleDeg) {
+    const normalLength = Math.hypot(normalX, normalY) || 1;
+    const lightAngle = lightAngleDeg * (Math.PI / 180);
+    const lightResponse = ((normalX / normalLength) * Math.cos(lightAngle)
+        + (normalY / normalLength) * Math.sin(lightAngle));
+    return {
+        highlight: Math.pow(Math.max(0, lightResponse), 1.45),
+        shadow: Math.pow(Math.max(0, -lightResponse), 1.25),
+    };
+}
+/**
+ * Resolve the visible response of the curved bezel rather than lighting only
+ * its outermost pixel. The height derivative supplies the surface inclination;
+ * the Fresnel term grows as that surface turns away from the viewer and fades
+ * naturally when it reaches the flat glass body. Signed contour polarity then
+ * keeps the light-facing and opposing sides distinct.
+ *
+ * This is deliberately independent from pointer position. It models a stable
+ * ambient environment and guarantees that a real curved surface remains
+ * perceptible over calm content without painting a uniform CSS border or a
+ * decorative halo.
+ */
+export function calculateGlassBezelResponse(shape, normalizedDistance, outwardNormalX, outwardNormalY, lightAngleDeg) {
+    const progress = Math.max(0, Math.min(1, normalizedDistance));
+    const derivativeDelta = 0.0005;
+    const before = Math.max(0, progress - derivativeDelta);
+    const after = Math.min(1, progress + derivativeDelta);
+    const derivative = (evaluateGlassSurfaceHeight(shape, after)
+        - evaluateGlassSurfaceHeight(shape, before)) / Math.max(after - before, Number.EPSILON);
+    const surfaceNormalZ = 1 / Math.hypot(derivative, 1);
+    const fresnel = Math.pow(Math.max(0, 1 - surfaceNormalZ), 2);
+    const polarity = calculateGlassEdgeResponse(outwardNormalX, outwardNormalY, lightAngleDeg);
+    return {
+        highlight: polarity.highlight * fresnel,
+        shadow: polarity.shadow * fresnel,
+        environment: fresnel,
+    };
+}
+/**
+ * Calculate the bezel's one-dimensional refraction profile.
+ *
+ * The web renderer intentionally uses the same constrained model as the Kube
+ * reference: air has index 1, incident rays are orthogonal to the backdrop,
+ * the object is parallel to it, and only the first air-to-glass refraction is
+ * modelled. Under those explicit constraints, the surface derivative supplies
+ * the normal, Snell's law supplies the refracted direction, and the remaining
+ * travel through the bezel plus flat glass body supplies a displacement in CSS
+ * pixels. The rounded-rectangle pass below rotates this profile around the
+ * material boundary.
+ */
+export function calculateGlassRefractionProfile(shape, bezelWidthPx, glassThicknessPx, refractiveIndex, samples = 128) {
+    const safeSamples = Math.max(2, Number.isFinite(samples) ? Math.round(samples) : 128);
+    const safeBezelWidthPx = Math.max(0, Number.isFinite(bezelWidthPx) ? bezelWidthPx : 0);
+    const safeGlassThicknessPx = Math.max(0, Number.isFinite(glassThicknessPx) ? glassThicknessPx : 0);
+    const safeRefractiveIndex = Number.isFinite(refractiveIndex) && refractiveIndex > 1
+        ? refractiveIndex
+        : 1.5;
+    const eta = 1 / safeRefractiveIndex;
+    const derivativeDelta = 0.0001;
+    const displacementPx = Array.from({ length: safeSamples }, (_, index) => {
+        const x = index / (safeSamples - 1);
+        const xBefore = Math.max(0, x - derivativeDelta);
+        const xAfter = Math.min(1, x + derivativeDelta);
+        const height = evaluateGlassSurfaceHeight(shape, x);
+        const derivative = (evaluateGlassSurfaceHeight(shape, xAfter)
+            - evaluateGlassSurfaceHeight(shape, xBefore)) / Math.max(xAfter - xBefore, Number.EPSILON);
+        const normalMagnitude = Math.hypot(derivative, 1);
+        const normalX = -derivative / normalMagnitude;
+        const normalY = -1 / normalMagnitude;
+        // Vector refraction for a vertical incident ray [0, 1]. Keeping the
+        // constrained formula local makes the physical assumptions auditable.
+        const dot = normalY;
+        const refractionRoot = 1 - eta ** 2 * (1 - dot ** 2);
+        if (refractionRoot < 0)
+            return 0;
+        const normalFactor = eta * dot + Math.sqrt(refractionRoot);
+        const refractedX = -normalFactor * normalX;
+        const refractedY = eta - normalFactor * normalY;
+        if (Math.abs(refractedY) < Number.EPSILON)
+            return 0;
+        const remainingTravelPx = height * safeBezelWidthPx + safeGlassThicknessPx;
+        return refractedX * (remainingTravelPx / refractedY);
+    });
+    const maximumDisplacementPx = Math.max(Number.EPSILON, ...displacementPx.map((distance) => Math.abs(distance)));
+    return { displacementPx, maximumDisplacementPx };
+}
+/**
+ * Generate the geometry-bound images consumed by the Chromium refractive tier.
+ * The displacement channels encode the bezel-normal vector. The same signed
+ * normal/light dot product creates a bright facing rim and an opposing dark
+ * rim; a third mask carries saturated environment colour around the whole
+ * boundary. This polarity is what makes the edge read as depth rather than a
+ * uniform CSS border.
+ */
+function createOpticalMaps(width, height, radius, profile) {
+    const devicePixelRatio = Math.min(Math.max(window.devicePixelRatio || 1, 1), 2);
+    const cssArea = Math.max(1, width * height);
+    // Keep small controls crisp at device resolution while preventing a large
+    // popup from allocating multi-million-pixel canvases for every optical map.
+    const budgetPixelRatio = Math.sqrt(profile.performance.maxOpticalMapPixels / cssArea);
+    const pixelRatio = Math.max(1, Math.min(devicePixelRatio, budgetPixelRatio));
+    const mapWidth = Math.max(1, Math.round(width * pixelRatio));
+    const mapHeight = Math.max(1, Math.round(height * pixelRatio));
+    const displacementCanvas = document.createElement('canvas');
+    displacementCanvas.width = mapWidth;
+    displacementCanvas.height = mapHeight;
+    const displacementContext = displacementCanvas.getContext('2d');
+    const edgeHighlightCanvas = document.createElement('canvas');
+    edgeHighlightCanvas.width = mapWidth;
+    edgeHighlightCanvas.height = mapHeight;
+    const edgeHighlightContext = edgeHighlightCanvas.getContext('2d');
+    const edgeShadowCanvas = document.createElement('canvas');
+    edgeShadowCanvas.width = mapWidth;
+    edgeShadowCanvas.height = mapHeight;
+    const edgeShadowContext = edgeShadowCanvas.getContext('2d');
+    const edgeEnvironmentCanvas = document.createElement('canvas');
+    edgeEnvironmentCanvas.width = mapWidth;
+    edgeEnvironmentCanvas.height = mapHeight;
+    const edgeEnvironmentContext = edgeEnvironmentCanvas.getContext('2d');
+    if (!displacementContext
+        || !edgeHighlightContext
+        || !edgeShadowContext
+        || !edgeEnvironmentContext)
+        return undefined;
+    const displacementImage = displacementContext.createImageData(mapWidth, mapHeight);
+    const edgeHighlightImage = edgeHighlightContext.createImageData(mapWidth, mapHeight);
+    const edgeShadowImage = edgeShadowContext.createImageData(mapWidth, mapHeight);
+    const edgeEnvironmentImage = edgeEnvironmentContext.createImageData(mapWidth, mapHeight);
+    const radiusMapPx = radius * pixelRatio;
+    const bezelCssPx = Math.min(profile.optics.bezelWidthPx, width / 2, height / 2);
+    const bezelMapPx = bezelCssPx * pixelRatio;
+    const sampleOffset = 0.75;
+    const refractionProfile = calculateGlassRefractionProfile(profile.optics.shape, bezelCssPx, profile.optics.glassThicknessPx, profile.optics.refractiveIndex);
+    const rimWidthDevicePx = profile.optics.rimWidthDevicePx;
+    for (let y = 0; y < mapHeight; y += 1) {
+        for (let x = 0; x < mapWidth; x += 1) {
+            const index = (y * mapWidth + x) * 4;
+            const sampleX = x + 0.5;
+            const sampleY = y + 0.5;
+            const signedDistance = roundedRectangleDistance(sampleX, sampleY, mapWidth, mapHeight, radiusMapPx);
+            const insideDistance = -signedDistance;
+            // One map pixel of signed-distance coverage removes the binary mask edge
+            // without changing the fully covered interior's optical response.
+            const boundaryCoverage = calculateGlassBoundaryCoverage(insideDistance);
+            let red = 128;
+            let green = 128;
+            let highlightAlpha = 0;
+            let shadowAlpha = 0;
+            let environmentAlpha = 0;
+            if (boundaryCoverage > 0 && insideDistance <= bezelMapPx) {
+                const outwardNormal = calculateRoundedRectangleOutwardNormal(sampleX, sampleY, mapWidth, mapHeight, radiusMapPx, sampleOffset);
+                const inwardNormalX = -outwardNormal.x;
+                const inwardNormalY = -outwardNormal.y;
+                const profileProgress = Math.max(0, Math.min(1, Math.max(0, insideDistance) / bezelMapPx));
+                const normalizedDisplacement = sampleGlassRefractionProfile(refractionProfile, profileProgress) / refractionProfile.maximumDisplacementPx * boundaryCoverage;
+                red = Math.round(128 + inwardNormalX * normalizedDisplacement * 127);
+                green = Math.round(128 + inwardNormalY * normalizedDisplacement * 127);
+                const bezelResponse = calculateGlassBezelResponse(profile.optics.shape, profileProgress, outwardNormal.x, outwardNormal.y, profile.optics.lightAngleDeg);
+                const rimProgress = Math.max(0, Math.min(1, insideDistance / rimWidthDevicePx));
+                const crispRim = insideDistance <= rimWidthDevicePx
+                    ? 1 - (rimProgress * rimProgress * (3 - 2 * rimProgress))
+                    : 0;
+                const edgeResponse = calculateGlassEdgeResponse(outwardNormal.x, outwardNormal.y, profile.optics.lightAngleDeg);
+                // Combine the authored micro-rim with the Fresnel response as two
+                // physical reflectance contributors. This replaces the previous
+                // arbitrary minimum-opacity boosts that painted a visible outline.
+                const reflectance = 1 - (1 - crispRim) * (1 - bezelResponse.environment);
+                const highlight = edgeResponse.highlight * reflectance * boundaryCoverage;
+                const shadow = edgeResponse.shadow * reflectance * boundaryCoverage;
+                const environment = reflectance * boundaryCoverage;
+                highlightAlpha = Math.round(255 * highlight);
+                shadowAlpha = Math.round(255 * shadow);
+                environmentAlpha = Math.round(255 * environment);
+            }
+            displacementImage.data[index] = Math.max(0, Math.min(255, red));
+            displacementImage.data[index + 1] = Math.max(0, Math.min(255, green));
+            displacementImage.data[index + 2] = 128;
+            displacementImage.data[index + 3] = 255;
+            edgeHighlightImage.data[index] = 255;
+            edgeHighlightImage.data[index + 1] = 255;
+            edgeHighlightImage.data[index + 2] = 255;
+            edgeHighlightImage.data[index + 3] = Math.max(0, Math.min(255, highlightAlpha));
+            edgeShadowImage.data[index] = 0;
+            edgeShadowImage.data[index + 1] = 0;
+            edgeShadowImage.data[index + 2] = 0;
+            edgeShadowImage.data[index + 3] = Math.max(0, Math.min(255, shadowAlpha));
+            edgeEnvironmentImage.data[index] = 255;
+            edgeEnvironmentImage.data[index + 1] = 255;
+            edgeEnvironmentImage.data[index + 2] = 255;
+            edgeEnvironmentImage.data[index + 3] = Math.max(0, Math.min(255, environmentAlpha));
+        }
+    }
+    displacementContext.putImageData(displacementImage, 0, 0);
+    edgeHighlightContext.putImageData(edgeHighlightImage, 0, 0);
+    edgeShadowContext.putImageData(edgeShadowImage, 0, 0);
+    edgeEnvironmentContext.putImageData(edgeEnvironmentImage, 0, 0);
+    return {
+        displacement: displacementCanvas.toDataURL('image/png'),
+        edgeHighlight: edgeHighlightCanvas.toDataURL('image/png'),
+        edgeShadow: edgeShadowCanvas.toDataURL('image/png'),
+        edgeEnvironment: edgeEnvironmentCanvas.toDataURL('image/png'),
+        maximumDisplacementPx: refractionProfile.maximumDisplacementPx,
+    };
+}
+function ensureFilterRegistry() {
+    const existing = document.getElementById(FILTER_REGISTRY_ID);
+    if (existing instanceof SVGSVGElement)
+        return existing;
+    const svg = document.createElementNS(SVG_NAMESPACE, 'svg');
+    svg.id = FILTER_REGISTRY_ID;
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('width', '0');
+    svg.setAttribute('height', '0');
+    svg.style.cssText = 'position:fixed;inline-size:0;block-size:0;overflow:hidden;pointer-events:none';
+    document.body.append(svg);
+    return svg;
+}
+function acquireFilter(width, height, radius, profile) {
+    const key = [
+        width,
+        height,
+        radius,
+        typeof window === 'undefined' ? 1 : Math.min(Math.max(window.devicePixelRatio || 1, 1), 2),
+        profile.optics.shape,
+        profile.optics.bezelWidthPx,
+        profile.optics.glassThicknessPx,
+        profile.optics.refractiveIndex,
+        profile.optics.backdropBlurPx,
+        profile.optics.backdropSaturation,
+        profile.optics.dynamicRangeCompression,
+        profile.optics.adaptiveToneOpacity,
+        profile.optics.rimWidthDevicePx,
+        profile.optics.edgeHighlightOpacity,
+        profile.optics.edgeShadowOpacity,
+        profile.optics.edgeEnvironmentSaturation,
+        profile.optics.lightAngleDeg,
+    ].join(':');
+    const cached = filterCache.get(key);
+    if (cached) {
+        cached.references += 1;
+        return { id: cached.id, release: () => releaseFilter(key) };
+    }
+    const opticalMaps = createOpticalMaps(width, height, radius, profile);
+    if (!opticalMaps)
+        return undefined;
+    const registry = ensureFilterRegistry();
+    const filter = document.createElementNS(SVG_NAMESPACE, 'filter');
+    const id = `wildo-glass-filter-${filterSequence += 1}`;
+    filter.id = id;
+    filter.setAttribute('filterUnits', 'userSpaceOnUse');
+    filter.setAttribute('primitiveUnits', 'userSpaceOnUse');
+    filter.setAttribute('x', '0');
+    filter.setAttribute('y', '0');
+    filter.setAttribute('width', String(width));
+    filter.setAttribute('height', String(height));
+    filter.setAttribute('color-interpolation-filters', 'sRGB');
+    const blur = document.createElementNS(SVG_NAMESPACE, 'feGaussianBlur');
+    blur.setAttribute('in', 'SourceGraphic');
+    blur.setAttribute('stdDeviation', String(profile.optics.backdropBlurPx));
+    blur.setAttribute('edgeMode', 'duplicate');
+    blur.setAttribute('result', 'blurred-backdrop');
+    const displacementImage = document.createElementNS(SVG_NAMESPACE, 'feImage');
+    displacementImage.setAttribute('href', opticalMaps.displacement);
+    displacementImage.setAttributeNS(XLINK_NAMESPACE, 'href', opticalMaps.displacement);
+    displacementImage.setAttribute('x', '0');
+    displacementImage.setAttribute('y', '0');
+    displacementImage.setAttribute('width', String(width));
+    displacementImage.setAttribute('height', String(height));
+    displacementImage.setAttribute('preserveAspectRatio', 'none');
+    displacementImage.setAttribute('result', 'displacement-map');
+    const displacement = document.createElementNS(SVG_NAMESPACE, 'feDisplacementMap');
+    displacement.setAttribute('in', 'blurred-backdrop');
+    displacement.setAttribute('in2', 'displacement-map');
+    displacement.setAttribute('scale', String(opticalMaps.maximumDisplacementPx));
+    displacement.setAttribute('xChannelSelector', 'R');
+    displacement.setAttribute('yChannelSelector', 'G');
+    displacement.setAttribute('result', 'refracted-backdrop');
+    const rangeCompressed = document.createElementNS(SVG_NAMESPACE, 'feComponentTransfer');
+    rangeCompressed.setAttribute('in', 'refracted-backdrop');
+    rangeCompressed.setAttribute('result', 'range-compressed-backdrop');
+    const rangeSlope = 1 - profile.optics.dynamicRangeCompression;
+    const rangeIntercept = profile.optics.dynamicRangeCompression / 2;
+    for (const channel of ['R', 'G', 'B']) {
+        const channelTransfer = document.createElementNS(SVG_NAMESPACE, `feFunc${channel}`);
+        channelTransfer.setAttribute('type', 'linear');
+        channelTransfer.setAttribute('slope', String(rangeSlope));
+        channelTransfer.setAttribute('intercept', String(rangeIntercept));
+        rangeCompressed.append(channelTransfer);
+    }
+    // Local inverse luminance supplies the transparent light-over-dark and
+    // dark-over-light response visible in the reference material. It is a
+    // property of the transmitted scene, not a fixed theme gradient.
+    const adaptiveTone = document.createElementNS(SVG_NAMESPACE, 'feColorMatrix');
+    adaptiveTone.setAttribute('in', 'range-compressed-backdrop');
+    adaptiveTone.setAttribute('type', 'matrix');
+    adaptiveTone.setAttribute('values', [
+        '-0.2126 -0.7152 -0.0722 0 1',
+        '-0.2126 -0.7152 -0.0722 0 1',
+        '-0.2126 -0.7152 -0.0722 0 1',
+        `0 0 0 0 ${profile.optics.adaptiveToneOpacity}`,
+    ].join(' '));
+    adaptiveTone.setAttribute('result', 'adaptive-tone');
+    const blendAdaptiveTone = document.createElementNS(SVG_NAMESPACE, 'feBlend');
+    blendAdaptiveTone.setAttribute('in', 'adaptive-tone');
+    blendAdaptiveTone.setAttribute('in2', 'range-compressed-backdrop');
+    blendAdaptiveTone.setAttribute('mode', 'soft-light');
+    blendAdaptiveTone.setAttribute('result', 'adaptive-backdrop');
+    const edgeEnvironmentImage = document.createElementNS(SVG_NAMESPACE, 'feImage');
+    edgeEnvironmentImage.setAttribute('href', opticalMaps.edgeEnvironment);
+    edgeEnvironmentImage.setAttributeNS(XLINK_NAMESPACE, 'href', opticalMaps.edgeEnvironment);
+    edgeEnvironmentImage.setAttribute('x', '0');
+    edgeEnvironmentImage.setAttribute('y', '0');
+    edgeEnvironmentImage.setAttribute('width', String(width));
+    edgeEnvironmentImage.setAttribute('height', String(height));
+    edgeEnvironmentImage.setAttribute('preserveAspectRatio', 'none');
+    edgeEnvironmentImage.setAttribute('result', 'edge-environment-map');
+    const saturatedEnvironment = document.createElementNS(SVG_NAMESPACE, 'feColorMatrix');
+    saturatedEnvironment.setAttribute('in', 'adaptive-backdrop');
+    saturatedEnvironment.setAttribute('type', 'saturate');
+    saturatedEnvironment.setAttribute('values', String(profile.optics.edgeEnvironmentSaturation));
+    saturatedEnvironment.setAttribute('result', 'edge-saturated-environment');
+    const clippedEnvironment = document.createElementNS(SVG_NAMESPACE, 'feComposite');
+    clippedEnvironment.setAttribute('in', 'edge-saturated-environment');
+    clippedEnvironment.setAttribute('in2', 'edge-environment-map');
+    clippedEnvironment.setAttribute('operator', 'in');
+    clippedEnvironment.setAttribute('result', 'edge-environment');
+    const blendEnvironment = document.createElementNS(SVG_NAMESPACE, 'feBlend');
+    blendEnvironment.setAttribute('in', 'edge-environment');
+    blendEnvironment.setAttribute('in2', 'adaptive-backdrop');
+    blendEnvironment.setAttribute('mode', 'normal');
+    blendEnvironment.setAttribute('result', 'with-edge-environment');
+    const edgeShadowImage = document.createElementNS(SVG_NAMESPACE, 'feImage');
+    edgeShadowImage.setAttribute('href', opticalMaps.edgeShadow);
+    edgeShadowImage.setAttributeNS(XLINK_NAMESPACE, 'href', opticalMaps.edgeShadow);
+    edgeShadowImage.setAttribute('x', '0');
+    edgeShadowImage.setAttribute('y', '0');
+    edgeShadowImage.setAttribute('width', String(width));
+    edgeShadowImage.setAttribute('height', String(height));
+    edgeShadowImage.setAttribute('preserveAspectRatio', 'none');
+    edgeShadowImage.setAttribute('result', 'edge-shadow-map');
+    const fadedShadow = document.createElementNS(SVG_NAMESPACE, 'feComponentTransfer');
+    fadedShadow.setAttribute('in', 'edge-shadow-map');
+    fadedShadow.setAttribute('result', 'edge-shadow-faded');
+    const shadowAlpha = document.createElementNS(SVG_NAMESPACE, 'feFuncA');
+    shadowAlpha.setAttribute('type', 'linear');
+    shadowAlpha.setAttribute('slope', String(profile.optics.edgeShadowOpacity));
+    fadedShadow.append(shadowAlpha);
+    const blendShadow = document.createElementNS(SVG_NAMESPACE, 'feBlend');
+    blendShadow.setAttribute('in', 'edge-shadow-faded');
+    blendShadow.setAttribute('in2', 'with-edge-environment');
+    blendShadow.setAttribute('mode', 'multiply');
+    blendShadow.setAttribute('result', 'with-edge-shadow');
+    const edgeHighlightImage = document.createElementNS(SVG_NAMESPACE, 'feImage');
+    edgeHighlightImage.setAttribute('href', opticalMaps.edgeHighlight);
+    edgeHighlightImage.setAttributeNS(XLINK_NAMESPACE, 'href', opticalMaps.edgeHighlight);
+    edgeHighlightImage.setAttribute('x', '0');
+    edgeHighlightImage.setAttribute('y', '0');
+    edgeHighlightImage.setAttribute('width', String(width));
+    edgeHighlightImage.setAttribute('height', String(height));
+    edgeHighlightImage.setAttribute('preserveAspectRatio', 'none');
+    edgeHighlightImage.setAttribute('result', 'edge-highlight-map');
+    const fadedHighlight = document.createElementNS(SVG_NAMESPACE, 'feComponentTransfer');
+    fadedHighlight.setAttribute('in', 'edge-highlight-map');
+    fadedHighlight.setAttribute('result', 'edge-highlight-faded');
+    const highlightAlpha = document.createElementNS(SVG_NAMESPACE, 'feFuncA');
+    highlightAlpha.setAttribute('type', 'linear');
+    highlightAlpha.setAttribute('slope', String(profile.optics.edgeHighlightOpacity));
+    fadedHighlight.append(highlightAlpha);
+    const blendHighlight = document.createElementNS(SVG_NAMESPACE, 'feBlend');
+    blendHighlight.setAttribute('in', 'edge-highlight-faded');
+    blendHighlight.setAttribute('in2', 'with-edge-shadow');
+    blendHighlight.setAttribute('mode', 'screen');
+    filter.append(blur, displacementImage, displacement, rangeCompressed, adaptiveTone, blendAdaptiveTone, edgeEnvironmentImage, saturatedEnvironment, clippedEnvironment, blendEnvironment, edgeShadowImage, fadedShadow, blendShadow, edgeHighlightImage, fadedHighlight, blendHighlight);
+    registry.append(filter);
+    filterCache.set(key, { id, node: filter, references: 1 });
+    return { id, release: () => releaseFilter(key) };
+}
+function releaseFilter(key) {
+    const cached = filterCache.get(key);
+    if (!cached)
+        return;
+    cached.references -= 1;
+    if (cached.references > 0)
+        return;
+    cached.node.remove();
+    filterCache.delete(key);
+}
+function useElementSize(elementRef) {
+    const [size, setSize] = React.useState({ width: 0, height: 0, radius: 0 });
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!element || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const update = (entry) => {
+            const borderBox = entry?.borderBoxSize[0];
+            const bounds = element.getBoundingClientRect();
+            const width = borderBox?.inlineSize ?? bounds.width;
+            const height = borderBox?.blockSize ?? bounds.height;
+            const radius = Number.parseFloat(window.getComputedStyle(element).borderTopLeftRadius) || 0;
+            setSize((current) => (current.width === width && current.height === height && current.radius === radius
+                ? current
+                : { width, height, radius }));
+        };
+        const observer = new ResizeObserver(([entry]) => update(entry));
+        observer.observe(element);
+        update();
+        return () => observer.disconnect();
+    }, [elementRef]);
+    return size;
+}
+/**
+ * Resolve and run the material layer for an existing semantic surface node.
+ * Displacement maps are cached by exact border-box geometry and are only
+ * rebuilt after real layout/profile changes settle—not on pointer or transform
+ * frames. While layout is actively changing, the portable backdrop tier keeps
+ * the surface continuous without blocking the main thread on obsolete maps.
+ */
+export function useMaterialRuntime(profile, elementRef) {
+    const environment = useMaterialEnvironment();
+    const size = useElementSize(elementRef);
+    const budgetManager = React.useContext(MaterialRuntimePolicyContext);
+    const materialGroupId = React.useContext(MaterialRuntimeGroupContext);
+    const budgetRequestId = React.useId();
+    React.useSyncExternalStore(budgetManager.subscribe, budgetManager.getSnapshot, budgetManager.getSnapshot);
+    const glassProfile = profile?.kind === MaterialKind.GLASS ? profile : undefined;
+    const [composition, setComposition] = React.useState(MaterialCompositionState.ROOT);
+    React.useLayoutEffect(() => {
+        const nextComposition = glassProfile
+            && glassProfile.composition.nestedStrategy === GlassMaterialNestedStrategy.FLATTEN
+            && isNestedInsideGlass(elementRef.current, materialGroupId)
+            ? MaterialCompositionState.FLATTENED
+            : MaterialCompositionState.ROOT;
+        setComposition((current) => current === nextComposition ? current : nextComposition);
+    }, [elementRef, glassProfile, materialGroupId]);
+    const isFlattened = composition === MaterialCompositionState.FLATTENED;
+    const area = size.width * size.height;
+    const selectedTier = glassProfile && !isFlattened
+        ? selectMaterialCapabilityTier(glassProfile, environment, area)
+        : MaterialCapabilityTier.FALLBACK;
+    const requestsRefractiveBudget = Boolean(glassProfile
+        && !isFlattened
+        && selectedTier === MaterialCapabilityTier.REFRACTIVE
+        && area > 0);
+    React.useLayoutEffect(() => {
+        if (requestsRefractiveBudget && glassProfile) {
+            budgetManager.updateRequest(budgetRequestId, area, glassProfile.performance.priority);
+            return;
+        }
+        budgetManager.releaseRequest(budgetRequestId);
+    }, [area, budgetManager, budgetRequestId, glassProfile, requestsRefractiveBudget]);
+    React.useLayoutEffect(() => (() => budgetManager.releaseRequest(budgetRequestId)), [budgetManager, budgetRequestId]);
+    const isBudgetAdmitted = requestsRefractiveBudget
+        && budgetManager.isAdmitted(budgetRequestId);
+    const budgetedTier = selectedTier === MaterialCapabilityTier.REFRACTIVE && !isBudgetAdmitted
+        ? glassProfile
+            ? selectPortableMaterialTier(glassProfile, environment)
+            : MaterialCapabilityTier.FALLBACK
+        : selectedTier;
+    const budgetState = !requestsRefractiveBudget
+        ? MaterialRefractiveBudgetState.NOT_APPLICABLE
+        : isBudgetAdmitted
+            ? MaterialRefractiveBudgetState.ADMITTED
+            : MaterialRefractiveBudgetState.DEFERRED;
+    const [filterId, setFilterId] = React.useState();
+    React.useEffect(() => {
+        setFilterId(undefined);
+        if (!glassProfile
+            || isFlattened
+            || isNestedInsideGlass(elementRef.current, materialGroupId)
+            || budgetedTier !== MaterialCapabilityTier.REFRACTIVE
+            || size.width <= 0
+            || size.height <= 0) {
+            return undefined;
+        }
+        const width = size.width;
+        const height = size.height;
+        const radius = Math.min(width / 2, height / 2, Math.max(0, size.radius));
+        let handle;
+        const timeout = window.setTimeout(() => {
+            handle = acquireFilter(width, height, radius, glassProfile);
+            setFilterId(handle?.id);
+        }, FILTER_GEOMETRY_SETTLE_MS);
+        return () => {
+            window.clearTimeout(timeout);
+            handle?.release();
+        };
+    }, [budgetedTier, glassProfile, isFlattened, materialGroupId, size.height, size.radius, size.width]);
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!element
+            || !glassProfile
+            || glassProfile.interaction.pressFeedback !== GlassMaterialPressFeedback.SCALE)
+            return undefined;
+        const press = (event) => {
+            // The nearest material owns visual feedback, but the event itself keeps
+            // bubbling so inputs, forms, Radix outside-click, and analytics retain
+            // their native behavior.
+            if (findNearestGlassOwner(event) === element) {
+                element.setAttribute('data-glass-pressed', '');
+            }
+        };
+        const release = () => element.removeAttribute('data-glass-pressed');
+        element.addEventListener('pointerdown', press, { passive: true });
+        element.addEventListener('pointerup', release, { passive: true });
+        element.addEventListener('pointercancel', release, { passive: true });
+        element.addEventListener('pointerleave', release, { passive: true });
+        return () => {
+            element.removeEventListener('pointerdown', press);
+            element.removeEventListener('pointerup', release);
+            element.removeEventListener('pointercancel', release);
+            element.removeEventListener('pointerleave', release);
+            element.removeAttribute('data-glass-pressed');
+        };
+    }, [elementRef, glassProfile]);
+    if (!glassProfile)
+        return {};
+    const renderedTier = budgetedTier === MaterialCapabilityTier.REFRACTIVE && !filterId
+        ? MaterialCapabilityTier.BACKDROP
+        : budgetedTier;
+    const backdropFilter = renderedTier === MaterialCapabilityTier.FALLBACK
+        ? 'none'
+        : renderedTier === MaterialCapabilityTier.REFRACTIVE
+            // Blur is deliberately inside the SVG graph and precedes displacement;
+            // a trailing CSS blur would erase the crisp bend at the bezel.
+            ? `url("#${filterId}")`
+            : `blur(${glassProfile.optics.backdropBlurPx}px) saturate(${glassProfile.optics.backdropSaturation})`;
+    const materialBackground = isFlattened
+        ? `color-mix(in oklch, ${glassProfile.optics.tint} ${glassProfile.optics.tintOpacity * 100}%, transparent)`
+        : renderedTier === MaterialCapabilityTier.FALLBACK
+            ? glassProfile.fallback.background
+            : `color-mix(in oklch, ${glassProfile.optics.tint} ${glassProfile.optics.tintOpacity * 100}%, transparent)`;
+    return {
+        'data-material-kind': MaterialKind.GLASS,
+        'data-material-tier': renderedTier,
+        'data-material-variant': glassProfile.variant,
+        'data-material-depth': glassProfile.depth,
+        'data-material-composition': composition,
+        'data-material-group': materialGroupId,
+        'data-material-refractive-budget': budgetState,
+        style: {
+            '--glass-pressed-scale': glassProfile.interaction.pressFeedback === GlassMaterialPressFeedback.SCALE
+                ? String(glassProfile.interaction.pressedScale)
+                : undefined,
+            background: materialBackground,
+            // The refractive rim owns edge definition. A uniform CSS border would
+            // erase the signed light/dark polarity by painting the same tone around
+            // the entire shape.
+            borderColor: renderedTier === MaterialCapabilityTier.REFRACTIVE && !isFlattened
+                ? 'transparent'
+                : glassProfile.fallback.borderColor,
+            boxShadow: isFlattened ? 'none' : glassProfile.elevation.boxShadow,
+            backdropFilter,
+            WebkitBackdropFilter: backdropFilter,
+        },
+    };
+}
+//# sourceMappingURL=material-runtime.js.map