@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/color.js

@@ -1,192 +0,0 @@
-import { useMemo } from "react";
-import { useResolvedAppearance } from "./appearance-context.js";
-import ColorSpace from "colorjs.io/src/ColorSpace.js";
-import { mix } from "colorjs.io/src/interpolation.js";
-import parse from "colorjs.io/src/parse.js";
-import serialize from "colorjs.io/src/serialize.js";
-import to from "colorjs.io/src/to.js";
-import toGamut from "colorjs.io/src/toGamut.js";
-import sRGB from "colorjs.io/src/spaces/srgb.js";
-import sRGB_Linear from "colorjs.io/src/spaces/srgb-linear.js";
-import HSL from "colorjs.io/src/spaces/hsl.js";
-import HWB from "colorjs.io/src/spaces/hwb.js";
-import Lab from "colorjs.io/src/spaces/lab.js";
-import LCH from "colorjs.io/src/spaces/lch.js";
-import OKLab from "colorjs.io/src/spaces/oklab.js";
-import OKLCH from "colorjs.io/src/spaces/oklch.js";
-import P3 from "colorjs.io/src/spaces/p3.js";
-import A98RGB from "colorjs.io/src/spaces/a98rgb.js";
-import ProPhoto from "colorjs.io/src/spaces/prophoto.js";
-import REC_2020 from "colorjs.io/src/spaces/rec2020.js";
-import XYZ_D50 from "colorjs.io/src/spaces/xyz-d50.js";
-import XYZ_D65 from "colorjs.io/src/spaces/xyz-d65.js";
-// Register the CSS color spaces, without bundling unrelated color-model APIs.
-for (const space of [sRGB, sRGB_Linear, HSL, HWB, Lab, LCH, OKLab, OKLCH, P3, A98RGB, ProPhoto, REC_2020, XYZ_D50, XYZ_D65])
-    ColorSpace.register(space);
-export const defaultColor = "background:base";
-const treatments = {
-    subtle: { weight: 25, target: "white" },
-    soft: { weight: 60, target: "white" },
-    strong: { weight: 82, target: "black" },
-    intense: { weight: 68, target: "black" }
-};
-/** Distinguishes derived color levels from direct CSS colors. */
-export function isColorLevel(value) {
-    return value === "subtle" || value === "soft" || value === "base" || value === "strong" || value === "intense";
-}
-/** Derives visual treatments while preserving the concrete value at `base`. */
-export function color(value) {
-    const shade = (level) => {
-        const { weight, target } = treatments[level];
-        return `color-mix(in oklch, ${value} ${weight}%, ${target})`;
-    };
-    return Object.freeze({
-        subtle: shade("subtle"),
-        soft: shade("soft"),
-        base: value,
-        strong: shade("strong"),
-        intense: shade("intense")
-    });
-}
-/** Resolves the same named treatment for solid paint and contrast calculations. */
-export function resolveColorLevel(value, level) {
-    if (level === "base")
-        return resolvableOpaqueColor(value) ?? value;
-    const opaque = resolvableOpaqueColor(value);
-    if (opaque == null)
-        return color(value)[level];
-    const { weight, target } = treatments[level];
-    return opaqueColor(serialize(mix(opaque, target, 1 - weight / 100, { space: "oklch" })));
-}
-/** Returns the complete visual treatments derived from one concrete color. */
-export function useColor(value) {
-    return useMemo(() => color(value), [value]);
-}
-/** Returns the readable Appearance content color for one semantic or CSS fill. */
-export function useContrastingColor(value) {
-    const { colors } = useResolvedAppearance();
-    return useMemo(() => contrastingColor(value, colors), [value, colors]);
-}
-/** Resolves a semantic color from an already selected Appearance branch. */
-export function resolveColor(value, colors) {
-    const resolved = value ?? defaultColor;
-    const semantic = parseSemanticColor(resolved, colors);
-    return semantic ? color(semantic.source)[semantic.level] : resolved;
-}
-/** Resolves opaque control paint from an already selected Appearance branch. */
-export function resolveSolidColor(value, colors) {
-    const semantic = parseSemanticColor(value, colors);
-    return semantic ? resolveColorLevel(semantic.source, semantic.level) : resolvableOpaqueColor(value) ?? value;
-}
-/** Applies material opacity without restricting the source CSS color syntax. */
-export function colorOpacity(value, opacity) {
-    const percentage = Math.round(opacity * 10_000) / 100;
-    return `color-mix(in srgb, ${value} ${percentage}%, transparent)`;
-}
-/** Reads perceptual lightness from a resolved CSS color. */
-export function colorLightness(value) {
-    // A missing CSS channel (`none`) contributes zero outside interpolation.
-    return OKLCH.from(parse(value))[0] ?? 0;
-}
-/** Orders resolved CSS colors by perceptual lightness, never by their role. */
-export function orderColors(first, second) {
-    const difference = colorLightness(first) - colorLightness(second);
-    return difference > 0 || (difference === 0 && first >= second)
-        ? { lighter: first, darker: second }
-        : { lighter: second, darker: first };
-}
-/** Solid controls use opaque, gamut-mapped colors for both paint and contrast. */
-export function opaqueColor(value) {
-    return serialize(toGamut(to({ ...parse(value), alpha: 1 }, "srgb")), { format: "rgb", precision: 6 });
-}
-/** Changes only perceptual lightness; theme names never determine direction. */
-export function colorShade(value, amount) {
-    const result = to(value, "oklch");
-    const lightness = result.coords[0] ?? 0;
-    result.coords[0] = Math.max(0, Math.min(1, lightness + (lightness > 0.6 ? -amount : amount)));
-    return opaqueColor(serialize(result));
-}
-/** Chooses the perceptually opposite Appearance color for the actual painted fill. */
-export function onColor(fill, background, foreground) {
-    const first = opaqueColor(background);
-    const second = opaqueColor(foreground);
-    const candidates = orderColors(first, second);
-    const darker = colorLightness(candidates.darker);
-    const lighter = colorLightness(candidates.lighter);
-    const threshold = darker + (lighter - darker) * 2 / 3;
-    return colorLightness(opaqueColor(fill)) < threshold ? candidates.lighter : candidates.darker;
-}
-/** Chooses readable content when the fill can be evaluated, otherwise preserves Appearance foreground. */
-export function contrastingColor(value, colors) {
-    try {
-        return onColor(resolveSolidColor(value, colors), colors.background, colors.foreground);
-    }
-    catch {
-        return colors.foreground;
-    }
-}
-/** Solid controls start at base; interaction shades preserve its text choice. */
-export function solidColors(base, background, foreground) {
-    const fill = resolveColorLevel(base, "base");
-    const content = resolvableOnColor(fill, background, foreground) ?? foreground;
-    const paint = (background) => ({ background, color: content });
-    const concrete = resolvableOpaqueColor(fill);
-    if (concrete == null)
-        return {
-            rest: paint(fill),
-            hover: paint(cssInteractionColor(fill, foreground, 0.045)),
-            pressed: paint(cssInteractionColor(fill, foreground, 0.085))
-        };
-    return {
-        rest: paint(concrete),
-        hover: paint(colorShade(concrete, 0.045)),
-        pressed: paint(colorShade(concrete, 0.085))
-    };
-}
-/** Low-emphasis interaction paints derived from the same component-owned base. */
-export function subtleColors(base, background, foreground) {
-    const fill = resolveColorLevel(base, "base");
-    const canvas = resolvableOpaqueColor(background) ?? background;
-    const concrete = resolvableOpaqueColor(fill);
-    const paint = (weight) => {
-        const mixed = concrete == null
-            ? `color-mix(in oklch, ${canvas} ${Math.round((1 - weight) * 10_000) / 100}%, ${fill})`
-            : opaqueColor(serialize(mix(canvas, concrete, weight, { space: "oklch" })));
-        return { background: mixed, color: resolvableOnColor(mixed, background, foreground) ?? foreground };
-    };
-    return {
-        rest: paint(0.25),
-        hover: paint(0.5),
-        pressed: paint(0.65)
-    };
-}
-function resolvableOpaqueColor(value) {
-    try {
-        return opaqueColor(value);
-    }
-    catch {
-        return null;
-    }
-}
-function resolvableOnColor(fill, background, foreground) {
-    try {
-        return onColor(fill, background, foreground);
-    }
-    catch {
-        return null;
-    }
-}
-function cssInteractionColor(base, target, amount) {
-    return `color-mix(in oklch, ${base} ${Math.round((1 - amount) * 10_000) / 100}%, ${target})`;
-}
-function parseSemanticColor(value, colors) {
-    const separator = value.indexOf(":");
-    if (separator < 0 || value.indexOf(":", separator + 1) >= 0)
-        return null;
-    const name = value.slice(0, separator);
-    const level = value.slice(separator + 1);
-    const source = Reflect.get(colors, name);
-    if (typeof source !== "string" || !isColorLevel(level))
-        return null;
-    return { source, level };
-}

package/dist/control-surface.d.ts

@@ -1,20 +0,0 @@
-import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-type Paint = Readonly<{
-    background: string;
-    color: string;
-}>;
-/** A native button uses Surface without changing its native contract. */
-export declare function SurfaceButton({ native, paint, material: options, shadow }: {
-    readonly native: ComponentPropsWithRef<"button">;
-    readonly paint: Paint;
-} & MaterialOverrides & ShadowOverrides): import("react").JSX.Element;
-/** Void text controls use a material host while retaining native sizing. */
-export declare function SurfaceField({ paint, radius, children, material: options, shadow, style }: Readonly<{
-    paint: Paint;
-    radius: CSSProperties["borderRadius"];
-    children: ReactNode;
-    style?: CSSProperties;
-} & MaterialOverrides & ShadowOverrides>): import("react").JSX.Element;
-export {};

package/dist/control-surface.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Surface } from "./surface.js";
-/** A native button uses Surface without changing its native contract. */
-export function SurfaceButton({ native, paint, material: options, shadow }) {
-    const { ref, style, children, ...properties } = native;
-    return _jsx(Surface, { ...properties, as: "button", color: paint.background, material: options, shadow: shadow, ref: ref, style: { ...style, color: paint.color }, children: children });
-}
-/** Void text controls use a material host while retaining native sizing. */
-export function SurfaceField({ paint, radius, children, material: options, shadow, style }) {
-    return _jsx(Surface, { as: "span", color: paint.background, material: options, shadow: shadow, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0, ...style }, children: children });
-}

package/dist/control.d.ts

@@ -1,70 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-import { type RadiusProps } from "./radius.js";
-import { type ScaleLevel } from "./scale.js";
-import { solidColors } from "./color.js";
-import { type Color } from "./color.js";
-import type { Transition } from "motion/react";
-/** Semantic Appearance colors accepted by interactive controls. */
-export type ControlColor = Color;
-export interface ControlProps {
-    readonly size?: ScaleLevel;
-    readonly color?: ControlColor;
-    readonly className?: string;
-    readonly style?: CSSProperties;
-    readonly disabled?: boolean;
-}
-export interface FieldProps {
-    /** Visible accessible label. Otherwise supply aria-label or aria-labelledby. */
-    readonly label?: ReactNode;
-    readonly description?: ReactNode;
-    readonly errorMessage?: ReactNode;
-    readonly required?: boolean;
-    readonly invalid?: boolean;
-}
-/** Names owned by our contract, not a second set of primitive-specific aliases. */
-export type ControlOverrides = keyof ControlProps | keyof FieldProps | "children" | "isDisabled" | "isRequired" | "isInvalid";
-export declare const controlFontSizes: Readonly<Record<ScaleLevel, CSSProperties["fontSize"]>>;
-/** Shared interaction attenuation, derived consistently across control families. */
-export declare const controlOpacity: Readonly<{
-    disabled: 0.46;
-    pending: 0.68;
-    secondary: 0.7;
-    placeholder: 0.6;
-    separator: 0.14;
-}>;
-/** Shared emphasis used by labels and control-owned headings. */
-export declare const controlFontWeight = 600;
-type SolidColors = ReturnType<typeof solidColors>;
-export interface ControlTheme {
-    readonly transition: CSSProperties;
-    readonly motionTransition: Transition;
-    readonly animations: boolean;
-    readonly spacing: number;
-    readonly foreground: string;
-    readonly background: string;
-    readonly tint: string;
-    readonly focusColor: string;
-    readonly danger: string;
-    readonly paints: {
-        readonly palette: SolidColors;
-        readonly subtle: SolidColors;
-        readonly danger: SolidColors;
-    };
-    readonly radius: CSSProperties["borderRadius"];
-    readonly fontSize: CSSProperties["fontSize"];
-    readonly indicatorSize: number;
-    readonly height: number;
-    readonly gap: number;
-}
-export declare function useControlTheme({ size, color, radius }: ControlProps & RadiusProps): ControlTheme;
-export declare function fieldStyle(theme: ControlTheme, disabled?: boolean, style?: CSSProperties): CSSProperties;
-export declare function controlPaint(theme: ControlTheme, focused: boolean, invalid: boolean, hovered?: boolean): {
-    background: string;
-    color: string;
-};
-export declare function controlStyle(theme: ControlTheme, focused: boolean, invalid: boolean, hovered?: boolean, focusVisible?: boolean): CSSProperties;
-export declare function FieldLabel({ label }: Pick<FieldProps, "label">): import("react").JSX.Element | null;
-export declare function FieldFeedback({ description, errorMessage, theme }: Pick<FieldProps, "description" | "errorMessage"> & {
-    readonly theme: ControlTheme;
-}): import("react").JSX.Element;
-export {};

package/dist/control.js

@@ -1,105 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { FieldError, Label, Text } from "react-aria-components";
-import { useResolvedAppearance } from "./appearance-context.js";
-import { resolveRadius } from "./radius.js";
-import { scale } from "./scale.js";
-import { colorOpacity, solidColors, subtleColors } from "./color.js";
-import { resolveSolidColor } from "./color.js";
-import { controlTransition, visualTransition } from "./motion-style.js";
-export const controlFontSizes = Object.freeze({
-    xsmall: "0.6875em",
-    small: "0.75em",
-    medium: "0.8125em",
-    large: "0.875em",
-    xlarge: "0.9375em"
-});
-/** Shared interaction attenuation, derived consistently across control families. */
-export const controlOpacity = Object.freeze({
-    disabled: 0.46,
-    pending: 0.68,
-    secondary: 0.7,
-    placeholder: 0.6,
-    separator: 0.14
-});
-/** Shared emphasis used by labels and control-owned headings. */
-export const controlFontWeight = 600;
-export function useControlTheme({ size = "medium", color, radius = "medium" }) {
-    const resolved = useResolvedAppearance();
-    const { appearance, colors } = resolved;
-    const transition = useMemo(() => visualTransition(resolved.transaction, resolved.preferences.animations), [resolved.transaction, resolved.preferences.animations]);
-    const motionTransition = useMemo(() => controlTransition(resolved.transaction, resolved.preferences.animations), [resolved.transaction, resolved.preferences.animations]);
-    const spacing = scale(appearance.spacing, size);
-    const foreground = colors.foreground;
-    const background = colors.background;
-    // One owner-provided base drives every ordinary interaction state; adding
-    // hidden state colors here would make the public color contract incomplete.
-    const tint = resolveSolidColor(color ?? "default:base", colors);
-    const danger = resolveSolidColor("danger:base", colors);
-    const paints = useMemo(() => ({
-        palette: solidColors(tint, background, foreground),
-        subtle: subtleColors(tint, background, foreground),
-        danger: solidColors(danger, background, foreground)
-    }), [tint, background, foreground, danger]);
-    return useMemo(() => ({
-        transition,
-        motionTransition,
-        animations: resolved.preferences.animations,
-        spacing,
-        foreground,
-        background,
-        tint,
-        focusColor: colorOpacity(tint, 0.2),
-        danger,
-        paints,
-        radius: resolveRadius(radius, appearance),
-        fontSize: controlFontSizes[size],
-        indicatorSize: Math.max(16, 16 + spacing / 4),
-        height: Math.max(24, 24 + spacing),
-        gap: Math.max(4, spacing / 2)
-    }), [appearance, colors, transition, motionTransition, resolved.preferences.animations, spacing, foreground, background, tint, danger, paints, radius, size]);
-}
-export function fieldStyle(theme, disabled = false, style) {
-    return {
-        ...style,
-        ...theme.transition,
-        display: "grid",
-        gap: theme.gap,
-        minWidth: 0,
-        fontFamily: "inherit",
-        fontSize: theme.fontSize,
-        lineHeight: 1.5,
-        opacity: disabled ? controlOpacity.disabled : 1
-    };
-}
-export function controlPaint(theme, focused, invalid, hovered = false) {
-    const paints = invalid ? theme.paints.danger : theme.paints.palette;
-    return focused ? paints.pressed : hovered ? paints.hover : paints.rest;
-}
-export function controlStyle(theme, focused, invalid, hovered = false, focusVisible = focused) {
-    const paint = controlPaint(theme, focused, invalid, hovered);
-    return {
-        ...theme.transition,
-        appearance: "none",
-        boxSizing: "border-box",
-        width: "100%",
-        minWidth: 0,
-        height: theme.height,
-        paddingBlock: 0,
-        paddingInline: Math.max(8, theme.spacing),
-        border: 0,
-        borderRadius: theme.radius,
-        outline: focusVisible ? `1px solid ${theme.focusColor}` : "none",
-        outlineOffset: 1,
-        ...paint,
-        caretColor: paint.color,
-        font: "inherit",
-        lineHeight: 1.5
-    };
-}
-export function FieldLabel({ label }) {
-    return label == null ? null : _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label });
-}
-export function FieldFeedback({ description, errorMessage, theme }) {
-    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description }), _jsx(FieldError, { style: { fontSize: "0.92em", color: theme.danger }, children: errorMessage })] });
-}

package/dist/field-style.d.ts

@@ -1,3 +0,0 @@
-export declare const textControlClass = "phreshos-ui-text-control";
-/** Placeholder contrast follows the control's chosen text color, not browser gray. */
-export default function FieldStyle(): import("react").JSX.Element;

package/dist/field-style.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { controlOpacity } from "./control.js";
-export const textControlClass = "phreshos-ui-text-control";
-/** Placeholder contrast follows the control's chosen text color, not browser gray. */
-export default function FieldStyle() {
-    return _jsx("style", { href: "phreshos-react-ui-fields", precedence: "phreshos", children: `
-.phreshos-ui-text-control::placeholder {
-    color: inherit;
-    opacity: ${controlOpacity.placeholder};
-}
-` });
-}

package/dist/material-paint.d.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from "react";
-interface MaterialPaintProps {
-    readonly color: string;
-    readonly distortion: number;
-    readonly grain: number;
-    readonly grainAmount: number;
-    readonly identity: string;
-    readonly opacity: number;
-    readonly transition: CSSProperties;
-}
-/** The fill, refraction definition, and grain of one Surface. */
-export declare function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity, transition }: MaterialPaintProps): import("react").JSX.Element | null;
-export {};

package/dist/material-paint.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-/** The fill, refraction definition, and grain of one Surface. */
-export function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity, transition }) {
-    const grainSeed = useMemo(() => grainSeeds[seedFrom(identity) % grainSeeds.length] ?? grainSeeds[0], [identity]);
-    const hasPaint = opacity > 0;
-    const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
-    const hasDistortion = distortion > 0;
-    const grainResource = useMemo(() => hasGrain ? grainImage(grainSeed, grainAmount) : null, [grainSeed, grainAmount, hasGrain]);
-    if (!hasPaint && !hasDistortion)
-        return null;
-    return _jsxs("span", { "data-material-paint": "", "aria-hidden": "true", style: {
-            position: "absolute",
-            zIndex: -1,
-            inset: 0,
-            display: "block",
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-            borderRadius: "inherit",
-            pointerEvents: "none"
-        }, children: [hasDistortion && _jsx("svg", { width: "0", height: "0", focusable: "false", style: { position: "absolute" }, children: _jsx("defs", { children: _jsx(DistortionFilter, { distortion: distortion, identity: identity }) }) }), hasPaint && _jsx("span", { "data-material-fill": "", "data-material-base": "", style: {
-                    position: "absolute",
-                    inset: 0,
-                    borderRadius: "inherit",
-                    background: color,
-                    opacity,
-                    ...transition,
-                    transitionProperty: "background-color, opacity"
-                }, children: hasGrain && _jsx("span", { "data-material-grain": "", style: {
-                        position: "absolute",
-                        inset: 0,
-                        borderRadius: "inherit",
-                        backgroundImage: grainResource ?? undefined,
-                        backgroundRepeat: "repeat",
-                        backgroundSize: `${patternSize}px ${patternSize}px`,
-                        opacity: grain,
-                        ...transition,
-                        transitionProperty: "opacity"
-                    } }) })] });
-}
-function DistortionFilter({ distortion, identity }) {
-    return _jsxs("filter", { id: `${identity}-distortion`, "data-material-distortion": "", x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [_jsx("feTurbulence", { "data-material-distortion-noise": "", "data-material-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` }), _jsx("feDisplacementMap", { "data-material-distortion-stage": "organic", in: "SourceGraphic", in2: `${identity}-organic-noise-blurred`, scale: distortion, xChannelSelector: "R", yChannelSelector: "G" })] });
-}
-function grainImage(seed, amount) {
-    const key = `${seed}:${amount}`;
-    const cached = grainResources.get(key);
-    if (cached !== undefined) {
-        grainResources.delete(key);
-        grainResources.set(key, cached);
-        return cached;
-    }
-    const paths = grainPaths(seed, amount)
-        .map((path, tone) => path
-        ? `<path d="${path}" fill="rgb(${toneChannel(tone)} ${toneChannel(tone)} ${toneChannel(tone)})"/>`
-        : "")
-        .join("");
-    const resource = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${patternSize}" height="${patternSize}" viewBox="0 0 ${patternSize} ${patternSize}">${paths}</svg>`)}")`;
-    // Preserve the exact texture while avoiding the same expensive SVG generation
-    // for every Surface. The bound prevents live grain controls from growing it forever.
-    if (grainResources.size >= grainResourceLimit) {
-        const oldest = grainResources.keys().next().value;
-        if (oldest !== undefined)
-            grainResources.delete(oldest);
-    }
-    grainResources.set(key, resource);
-    return resource;
-}
-/** Preserve the original contract: amount is the monotonic density of visible grain pixels. */
-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 toneChannel(tone) {
-    return Math.round(tone / (toneCount - 1) * 255);
-}
-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;
-const grainSeeds = [19, 47, 83, 131];
-const grainResourceLimit = 64;
-const grainResources = new Map();

package/dist/motion-style.d.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from "react";
-import type { Transition } from "motion/react";
-import type { AppearanceTransaction } from "./appearance.js";
-export declare function controlTransition(transaction: AppearanceTransaction, animations: boolean): Transition;
-/** Per-overlay variables consumed by the shared entrance keyframes. */
-export declare function overlayTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-export declare const overlayMotionClass = "phreshos-ui-overlay";
-export declare const backdropMotionClass = "phreshos-ui-backdrop";
-export declare function transitionTiming(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-export declare function visualTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-export declare function paintTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-/** React hoists and deduplicates this stylesheet, including portals. */
-export default function MotionStyle(): import("react").JSX.Element;

package/dist/motion-style.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const visualProperties = "background-color, color, border-color, border-radius, box-shadow";
-const paintProperties = "fill, stroke, opacity";
-export function controlTransition(transaction, animations) {
-    return {
-        type: "tween",
-        duration: animations ? transaction.duration / 1_000 : 0,
-        ease: motionEasing(transaction.easing)
-    };
-}
-/** Per-overlay variables consumed by the shared entrance keyframes. */
-export function overlayTransition(transaction, animations) {
-    return {
-        "--phreshos-ui-motion-duration": `${animations ? transaction.duration : 0}ms`,
-        "--phreshos-ui-motion-easing": cssEasing(transaction.easing)
-    };
-}
-export const overlayMotionClass = "phreshos-ui-overlay";
-export const backdropMotionClass = "phreshos-ui-backdrop";
-export function transitionTiming(transaction, animations) {
-    return {
-        transitionDuration: `${animations ? transaction.duration : 0}ms`,
-        transitionTimingFunction: cssEasing(transaction.easing)
-    };
-}
-export function visualTransition(transaction, animations) {
-    return { ...transitionTiming(transaction, animations), transitionProperty: visualProperties };
-}
-export function paintTransition(transaction, animations) {
-    return { ...transitionTiming(transaction, animations), transitionProperty: paintProperties };
-}
-function cssEasing(easing) {
-    return typeof easing === "string" ? easing : `cubic-bezier(${easing.join(", ")})`;
-}
-function motionEasing(easing) {
-    if (typeof easing !== "string")
-        return [...easing];
-    if (easing === "ease")
-        return [0.25, 0.1, 0.25, 1];
-    if (easing === "ease-in")
-        return "easeIn";
-    if (easing === "ease-out")
-        return "easeOut";
-    if (easing === "ease-in-out")
-        return "easeInOut";
-    return easing;
-}
-const stylesheet = `
-.phreshos-ui-overlay[data-entering] {
-  animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
-}
-.phreshos-ui-overlay[data-exiting] {
-  animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) reverse both;
-  pointer-events: none;
-}
-.phreshos-ui-backdrop[data-entering] {
-  animation: phreshos-ui-backdrop-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
-}
-.phreshos-ui-backdrop[data-exiting] {
-  animation: phreshos-ui-backdrop-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) reverse both;
-  pointer-events: none;
-}
-@keyframes phreshos-ui-overlay-enter {
-  from { opacity: 0; scale: 1.05; }
-  to { opacity: 1; scale: 1; }
-}
-@keyframes phreshos-ui-backdrop-enter {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-`;
-/** React hoists and deduplicates this stylesheet, including portals. */
-export default function MotionStyle() {
-    return _jsx("style", { href: "phreshos-react-ui-motion", precedence: "phreshos", children: stylesheet });
-}

package/dist/preferences.d.ts

@@ -1,12 +0,0 @@
-import type { DesktopPreferences } from "@phreshos/core";
-/** Complete environment preferences consumed by React UI. */
-export type Preferences = Pick<DesktopPreferences, "theme" | "animations">;
-/** At least one preference merged with the nearest UIProvider. */
-export type PreferencesUpdate = Readonly<{
-    theme: Preferences["theme"];
-    animations?: Preferences["animations"];
-}> | Readonly<{
-    theme?: Preferences["theme"];
-    animations: Preferences["animations"];
-}>;
-export type Theme = Preferences["theme"];