@phreshos/react-ui 0.1.27 → 0.1.29

package/dist/control.js

@@ -1,37 +1,50 @@
 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 { useAppearance, useThemedValue } from "./ui-provider.js";
+import { useResolvedAppearance } from "./appearance-context.js";
 import { resolveRadius } from "./radius.js";
 import { scale } from "./scale.js";
 import { colorOpacity, solidColors } from "./color.js";
-import { useResolveSolidColor } from "./color.js";
-import { useVisualTransition } from "./motion-style.js";
+import { resolveSolidColor } from "./color.js";
+import { controlTransition, visualTransition } from "./motion-style.js";
 export const controlFontSizes = Object.freeze({
-    xsmall: 11,
-    small: 12,
-    medium: 13,
-    large: 14,
-    xlarge: 15
+    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 appearance = useAppearance();
-    const transition = useVisualTransition();
+    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 colors = useThemedValue(appearance.colors);
     const foreground = colors.foreground;
     const background = colors.background;
-    const tint = useResolveSolidColor(color ?? "default:base");
-    const neutral = useResolveSolidColor("default:base");
-    const focus = useResolveSolidColor("warning:base");
-    const danger = useResolveSolidColor("danger:base");
+    const tint = resolveSolidColor(color ?? "default:base", colors);
+    const neutral = resolveSolidColor("default:base", colors);
+    const focus = resolveSolidColor("warning:base", colors);
+    const danger = resolveSolidColor("danger:base", colors);
     const paints = useMemo(() => ({
         palette: solidColors(tint, background, foreground),
         neutral: solidColors(neutral, background, foreground),
         danger: solidColors(danger, background, foreground)
     }), [tint, neutral, background, foreground, danger]);
-    return {
+    return useMemo(() => ({
         transition,
+        motionTransition,
+        animations: resolved.preferences.animations,
         spacing,
         foreground,
         background,
@@ -41,9 +54,10 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
         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, focus, danger, paints, radius, size]);
 }
 export function fieldStyle(theme, disabled = false, style) {
     return {
@@ -56,7 +70,7 @@ export function fieldStyle(theme, disabled = false, style) {
         fontFamily: "inherit",
         fontSize: theme.fontSize,
         lineHeight: 1.5,
-        opacity: disabled ? 0.46 : 1
+        opacity: disabled ? controlOpacity.disabled : 1
     };
 }
 export function controlPaint(theme, focused, invalid, hovered = false) {
@@ -85,8 +99,8 @@ export function controlStyle(theme, focused, invalid, hovered = false, focusVisi
     };
 }
 export function FieldLabel({ label }) {
-    return label == null ? null : _jsx(Label, { style: { fontWeight: 550 }, children: 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: 0.7 }, children: description }), _jsx(FieldError, { style: { fontSize: "0.92em", color: theme.danger }, children: errorMessage })] });
+    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/dialog.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Modal as AriaModal, ModalOverlay as AriaModalOverlay, Text as AriaText } from "react-aria-components";
 import { useAppearance } from "./ui-provider.js";
+import { useResolvedAppearance } from "./appearance-context.js";
+import { colorOpacity, orderColors } from "./color.js";
+import { controlFontWeight, controlOpacity } from "./control.js";
 import { Button } from "./button.js";
-import { backdropMotionClass, overlayMotionClass, useOverlayTransition } from "./motion-style.js";
+import MotionStyle, { backdropMotionClass, overlayMotionClass, overlayTransition } from "./motion-style.js";
 import { scale } from "./scale.js";
 import { Surface } from "./surface.js";
 import { resolveDirection, useDirection } from "./direction.js";
@@ -14,57 +17,61 @@ export const DialogTrigger = forwardRef(function DialogTrigger(properties, ref)
     return _jsx(Button, { ...properties, ref: ref });
 });
 export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, style, ...properties }, ref) {
-    const inset = scale(useAppearance().spacing, "medium");
-    const transition = useOverlayTransition();
+    const resolved = useResolvedAppearance();
+    const inset = scale(resolved.appearance.spacing, "medium");
+    const colors = resolved.colors;
+    const backdrop = colorOpacity(orderColors(colors.background, colors.foreground).darker, 0.32);
+    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaModalOverlay, { ...properties, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
-            ...transition,
-            position: "fixed",
-            inset: 0,
-            zIndex: 1_000,
-            display: "grid",
-            placeItems: "center",
-            boxSizing: "border-box",
-            padding: inset,
-            overflow: "auto",
-            background: "rgb(0 0 0 / 0.32)",
-            ...style
-        } });
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...properties, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
+                    ...transition,
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 1_000,
+                    display: "grid",
+                    placeItems: "center",
+                    boxSizing: "border-box",
+                    padding: inset,
+                    overflow: "auto",
+                    background: backdrop,
+                    ...style
+                } })] });
 });
 export const DialogContent = forwardRef(function DialogContent({ children, className, color, material, radius, shadow, style, ...properties }, ref) {
-    const inset = scale(useAppearance().spacing, "medium");
-    const transition = useOverlayTransition();
+    const resolved = useResolvedAppearance();
+    const inset = scale(resolved.appearance.spacing, "medium");
+    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
-            ...transition,
-            width: `min(32rem, calc(100vw - ${inset * 2}px))`,
-            maxHeight: `calc(100vh - ${inset * 2}px)`,
-            outline: "none"
-        }, children: _jsx(Surface, { className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
-                boxSizing: "border-box",
-                width: "100%",
-                maxHeight: "inherit",
-                padding: inset,
-                overflow: "hidden",
-                ...style
-            }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
-                    display: "grid",
-                    gap: inset,
-                    minWidth: 0,
-                    minHeight: 0,
-                    maxHeight: "inherit",
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
+                    ...transition,
+                    width: `min(32rem, calc(100vw - ${inset * 2}px))`,
+                    maxHeight: `calc(100vh - ${inset * 2}px)`,
                     outline: "none"
-                }, children: children }) }) });
+                }, children: _jsx(Surface, { className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+                        boxSizing: "border-box",
+                        width: "100%",
+                        maxHeight: "inherit",
+                        padding: inset,
+                        overflow: "hidden",
+                        ...style
+                    }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
+                            display: "grid",
+                            gap: inset,
+                            minWidth: 0,
+                            minHeight: 0,
+                            maxHeight: "inherit",
+                            outline: "none"
+                        }, children: children }) }) })] });
 });
 export const DialogHeader = forwardRef(function DialogHeader({ style, ...properties }, ref) {
     const gap = scale(useAppearance().spacing, "small");
     return _jsx("div", { ...properties, ref: ref, style: { display: "grid", gap, minWidth: 0, ...style } });
 });
 export const DialogTitle = forwardRef(function DialogTitle({ style, ...properties }, ref) {
-    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", style: { margin: 0, font: "inherit", fontWeight: 650, ...style } });
+    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", style: { margin: 0, font: "inherit", fontWeight: controlFontWeight, ...style } });
 });
 export const DialogDescription = forwardRef(function DialogDescription({ style, ...properties }, ref) {
-    return _jsx(AriaText, { ...properties, ref: ref, slot: "description", style: { margin: 0, opacity: 0.72, ...style } });
+    return _jsx(AriaText, { ...properties, ref: ref, slot: "description", style: { margin: 0, opacity: controlOpacity.secondary, ...style } });
 });
 export const DialogBody = forwardRef(function DialogBody({ style, ...properties }, ref) {
     return _jsx("div", { ...properties, ref: ref, style: { minWidth: 0, minHeight: 0, ...style } });

package/dist/direction.d.ts

@@ -1,9 +1,17 @@
 /** The two concrete directions supported by React UI behavior. */
 export type Direction = "ltr" | "rtl";
-export declare const DirectionContext: import("react").Context<Direction | null>;
+interface DirectionSource {
+    readonly getSnapshot: () => Direction;
+    readonly getServerSnapshot: () => Direction;
+    readonly subscribe: (change: () => void) => () => void;
+}
 /** Resolves a concrete element override before falling back to its React UI environment. */
 export declare function resolveDirection(value: string | undefined, fallback: Direction): Direction;
 /** Returns the nearest guaranteed React UI direction, or the document direction. */
 export declare function useDirection(): Direction;
 /** Reactively reads the explicit direction of the document's HTML element. */
 export declare function useDocumentDirection(): Direction;
+/** Creates a stable source for one explicitly established direction boundary. */
+export declare function fixedDirectionSource(direction: Direction): DirectionSource;
+export declare const DirectionContext: import("react").Context<DirectionSource>;
+export {};

package/dist/direction.js

@@ -1,25 +1,43 @@
 import { createContext, useContext, useSyncExternalStore } from "react";
-export const DirectionContext = createContext(null);
 /** Resolves a concrete element override before falling back to its React UI environment. */
 export function resolveDirection(value, fallback) {
     return value === "ltr" || value === "rtl" ? value : fallback;
 }
 /** Returns the nearest guaranteed React UI direction, or the document direction. */
 export function useDirection() {
-    const direction = useContext(DirectionContext);
-    const documentDirection = useDocumentDirection();
-    return direction ?? documentDirection;
+    const source = useContext(DirectionContext);
+    return useSyncExternalStore(source.subscribe, source.getSnapshot, source.getServerSnapshot);
 }
 /** Reactively reads the explicit direction of the document's HTML element. */
 export function useDocumentDirection() {
-    return useSyncExternalStore(subscribeDocumentDirection, documentDirection, serverDirection);
+    return useSyncExternalStore(documentDirectionSource.subscribe, documentDirectionSource.getSnapshot, documentDirectionSource.getServerSnapshot);
 }
+/** Creates a stable source for one explicitly established direction boundary. */
+export function fixedDirectionSource(direction) {
+    return {
+        getSnapshot: () => direction,
+        getServerSnapshot: () => direction,
+        subscribe: () => () => undefined
+    };
+}
+const subscribers = new Set();
+let observer;
 function subscribeDocumentDirection(change) {
-    if (typeof document === "undefined" || typeof MutationObserver === "undefined")
-        return () => undefined;
-    const observer = new MutationObserver(change);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"] });
-    return () => observer.disconnect();
+    subscribers.add(change);
+    if (subscribers.size === 1 && typeof document !== "undefined" && typeof MutationObserver !== "undefined") {
+        observer = new MutationObserver(() => {
+            for (const subscriber of subscribers)
+                subscriber();
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"] });
+    }
+    return () => {
+        subscribers.delete(change);
+        if (subscribers.size === 0) {
+            observer?.disconnect();
+            observer = undefined;
+        }
+    };
 }
 function documentDirection() {
     if (typeof document === "undefined")
@@ -29,3 +47,9 @@ function documentDirection() {
 function serverDirection() {
     return "ltr";
 }
+const documentDirectionSource = {
+    getSnapshot: documentDirection,
+    getServerSnapshot: serverDirection,
+    subscribe: subscribeDocumentDirection
+};
+export const DirectionContext = createContext(documentDirectionSource);

package/dist/field-style.js

@@ -1,11 +1,12 @@
 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: 0.6;
+    opacity: ${controlOpacity.placeholder};
 }
 ` });
 }

package/dist/layout.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import type { Appearance } from "@phreshos/core";
+import type { Appearance } from "./appearance.js";
 import { type Spacing } from "./spacing.js";
 /** Cross-axis alignment shared by layout containers. */
 export type LayoutAlignment = "start" | "center" | "end" | "stretch" | "baseline";

package/dist/main.d.ts

@@ -4,15 +4,16 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
-export { defaultAppearance } from "@phreshos/core";
+export { defaultAppearance, type Appearance, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceShadow, type AppearanceTransaction, type Easing, type ThemedValue } from "./appearance.js";
 export { UIProvider, useAppearance, useBrowserPreferences, useDirection, useDocumentDirection, usePreferences, useThemedValue, type UIProviderProps } from "./ui-provider.js";
-export type { DesktopPreferences as Preferences } from "@phreshos/core";
+export type { Preferences, Theme } from "./preferences.js";
 export type { Direction } from "./direction.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
 export { Surface, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
 export { defaultColor, type Color, type ColorLevel, type ColorScale } from "./color.js";
 export { Panel, PanelRoot, PanelHeader, PanelContent, type PanelProps, type PanelRootProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
+export { WindowHeader, WindowHeaderRoot, WindowHeaderIdentity, WindowHeaderCenter, WindowHeaderActions, WindowHeaderAction, WindowHeaderMinimize, WindowHeaderMaximize, WindowHeaderClose, type WindowHeaderProps, type WindowHeaderRootProps, type WindowHeaderIdentityProps, type WindowHeaderCenterProps, type WindowHeaderActionsProps, type WindowHeaderActionProps, type WindowHeaderControlProps, type WindowHeaderMaximizeProps, type WindowHeaderCloseProps } from "./window-header.js";
 export { Button, type ButtonColor, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";
@@ -25,7 +26,7 @@ export { ScrollArea, type ScrollAreaAxis, type ScrollAreaProps } from "./scroll-
 export { Popover, PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverTitle, PopoverClose, type PopoverProps, type PopoverRootProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverDialogProps, type PopoverTitleProps, type PopoverCloseProps } from "./popover.js";
 export { Menu, MenuRoot, MenuItem, MenuSection, MenuHeader, MenuSeparator, type MenuProps, type MenuRootProps, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps } from "./menu.js";
 export { DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger, type DropdownMenuProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps } from "./dropdown-menu.js";
-export { ContextMenu, ContextMenuRoot, ContextMenuTrigger, type ContextMenuProps, type ContextMenuRootProps, type ContextMenuTriggerProps } from "./context-menu.js";
+export { ContextMenu, ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, type ContextMenuProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ContextMenuContentProps } from "./context-menu.js";
 export { Dialog, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, type DialogProps, type DialogRootProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
 export { AlertDialog, AlertDialogRoot, AlertDialogBackdrop, AlertDialogContent, type AlertDialogProps, type AlertDialogRootProps, type AlertDialogBackdropProps, type AlertDialogContentProps } from "./alert-dialog.js";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, type TooltipProps, type TooltipRootProps, type TooltipTriggerProps, type TooltipContentProps } from "./tooltip.js";

package/dist/main.js

@@ -4,13 +4,14 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
-export { defaultAppearance } from "@phreshos/core";
+export { defaultAppearance } from "./appearance.js";
 export { UIProvider, useAppearance, useBrowserPreferences, useDirection, useDocumentDirection, usePreferences, useThemedValue } from "./ui-provider.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
 export { Surface } from "./surface.js";
 export { defaultColor } from "./color.js";
 export { Panel, PanelRoot, PanelHeader, PanelContent } from "./panel.js";
+export { WindowHeader, WindowHeaderRoot, WindowHeaderIdentity, WindowHeaderCenter, WindowHeaderActions, WindowHeaderAction, WindowHeaderMinimize, WindowHeaderMaximize, WindowHeaderClose } from "./window-header.js";
 export { Button } from "./button.js";
 export { Input } from "./input.js";
 export { Textarea } from "./textarea.js";
@@ -23,7 +24,7 @@ export { ScrollArea } from "./scroll-area.js";
 export { Popover, PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverTitle, PopoverClose } from "./popover.js";
 export { Menu, MenuRoot, MenuItem, MenuSection, MenuHeader, MenuSeparator } from "./menu.js";
 export { DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger } from "./dropdown-menu.js";
-export { ContextMenu, ContextMenuRoot, ContextMenuTrigger } from "./context-menu.js";
+export { ContextMenu, ContextMenuRoot, ContextMenuTrigger, ContextMenuContent } from "./context-menu.js";
 export { Dialog, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose } from "./dialog.js";
 export { AlertDialog, AlertDialogRoot, AlertDialogBackdrop, AlertDialogContent } from "./alert-dialog.js";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent } from "./tooltip.js";

package/dist/material-options.d.ts

@@ -13,8 +13,15 @@ export interface MaterialOverrides {
     /** Omission or true uses Appearance defaults; false uses the resolved color as a normal background. */
     readonly material?: boolean | MaterialOptions;
 }
-/** Resolves material values from the current Appearance without knowing any host geometry. */
-export declare function useMaterialOptions(values?: MaterialOptions): {
+/** Resolves overrides against an already selected material branch. */
+export declare function resolveMaterialOptions(values: MaterialOptions, defaults: Readonly<{
+    opacity: number;
+    backdrop: number;
+    grain: number;
+    grainAmount: number;
+    distortion: number;
+    saturation: number;
+}>): {
     opacity: number;
     backdrop: number;
     grain: number;
@@ -22,4 +29,4 @@ export declare function useMaterialOptions(values?: MaterialOptions): {
     distortion: number;
     saturation: number;
 };
-export type ResolvedMaterial = ReturnType<typeof useMaterialOptions>;
+export type ResolvedMaterial = ReturnType<typeof resolveMaterialOptions>;

package/dist/material-options.js

@@ -1,10 +1,7 @@
-import { appearanceLimits } from "@phreshos/core";
-import { useAppearance, useThemedValue } from "./ui-provider.js";
+import { appearanceLimits } from "./appearance.js";
 import { isScaleLevel, scale, scaleMultiplier } from "./scale.js";
-/** Resolves material values from the current Appearance without knowing any host geometry. */
-export function useMaterialOptions(values = {}) {
-    const appearance = useAppearance();
-    const defaults = useThemedValue(appearance.material);
+/** Resolves overrides against an already selected material branch. */
+export function resolveMaterialOptions(values, defaults) {
     const limits = appearanceLimits.material;
     return {
         opacity: resolve(values.opacity, defaults.opacity, limits.opacity),

package/dist/material-paint.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 interface MaterialPaintProps {
     readonly color: string;
     readonly distortion: number;
@@ -5,7 +6,8 @@ interface MaterialPaintProps {
     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 }: MaterialPaintProps): import("react").JSX.Element | null;
+export declare function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity, transition }: MaterialPaintProps): import("react").JSX.Element | null;
 export {};

package/dist/material-paint.js

@@ -1,17 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { usePaintTransition } from "./motion-style.js";
 /** The fill, refraction definition, and grain of one Surface. */
-export function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity }) {
-    const paintTransition = usePaintTransition();
-    const seed = useMemo(() => seedFrom(identity), [identity]);
+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 initial = useMemo(() => hasGrain ? grainPaths(seed, grainAmount) : [], [grainAmount, hasGrain, seed]);
+    const grainResource = useMemo(() => hasGrain ? grainImage(grainSeed, grainAmount) : null, [grainSeed, grainAmount, hasGrain]);
     if (!hasPaint && !hasDistortion)
         return null;
-    return _jsxs("svg", { "data-material-paint": "", "aria-hidden": "true", focusable: "false", style: {
+    return _jsxs("span", { "data-material-paint": "", "aria-hidden": "true", style: {
             position: "absolute",
             zIndex: -1,
             inset: 0,
@@ -21,16 +19,38 @@ export function MaterialPaint({ color, distortion, grain, grainAmount, identity,
             overflow: "hidden",
             borderRadius: "inherit",
             pointerEvents: "none"
-        }, children: [(hasGrain || hasDistortion) && _jsxs("defs", { children: [hasDistortion && _jsx(DistortionFilter, { distortion: distortion, identity: identity }), hasGrain && _jsx("pattern", { id: `${identity}-grain`, width: patternSize, height: patternSize, patternUnits: "userSpaceOnUse", children: initial.map((path, tone) => _jsx("path", { "data-material-grain-tone": tone, d: path, fill: grainTone(color, tone, grain), shapeRendering: "crispEdges" }, tone)) })] }), hasPaint && _jsxs("g", { "data-material-fill": "", opacity: opacity, style: paintTransition, children: [_jsx("rect", { "data-material-base": "", width: "100%", height: "100%", style: { ...paintTransition, fill: color } }), hasGrain && _jsx("rect", { "data-material-grain": "", width: "100%", height: "100%", fill: `url(#${identity}-grain)`, shapeRendering: "crispEdges" })] })] });
+        }, 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 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 grainImage(seed, amount) {
+    const paths = grainPaths(seed, amount)
+        .map((path, tone) => path
+        ? `<path d="${path}" fill="rgb(${toneChannel(tone)} ${toneChannel(tone)} ${toneChannel(tone)})"/>`
+        : "")
+        .join("");
+    return `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 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) {
@@ -49,6 +69,9 @@ function grainPaths(seed, amount) {
     }
     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);
@@ -75,3 +98,4 @@ function clamp(value, minimum, maximum) {
 }
 const patternSize = 64;
 const toneCount = 16;
+const grainSeeds = [19, 47, 83, 131];

package/dist/menu.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Header as AriaHeader, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, Separator as AriaSeparator } from "react-aria-components";
 import { colorOpacity } from "./color.js";
-import { useControlTheme } from "./control.js";
+import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
 const MenuThemeContext = createContext(null);
 const MenuRootImplementation = forwardRef(function MenuRoot({ className, color, size = "medium", style, ...properties }, ref) {
     const theme = useControlTheme({ color, size });
-    return _jsx(MenuThemeContext.Provider, { value: { color, size, theme }, children: _jsx(AriaMenu, { ...properties, ref: ref, className: className, style: {
+    const context = useMemo(() => ({ color, size, theme }), [color, size, theme]);
+    return _jsx(MenuThemeContext.Provider, { value: context, children: _jsx(AriaMenu, { ...properties, ref: ref, className: className, style: {
                 display: "grid",
                 gap: theme.gap,
-                minWidth: 160,
+                minWidth: theme.height * 4,
                 padding: theme.gap,
                 boxSizing: "border-box",
                 outline: "none",
@@ -22,11 +23,19 @@ const MenuRootImplementation = forwardRef(function MenuRoot({ className, color,
 export const MenuRoot = MenuRootImplementation;
 const MenuItemImplementation = forwardRef(function MenuItem({ className, color, disabled = false, style, ...properties }, ref) {
     const inherited = useContext(MenuThemeContext);
-    const theme = useControlTheme({ color: color ?? inherited?.color, size: inherited?.size ?? "medium" });
+    const item = { className, disabled, properties, ref, style };
+    return inherited != null && color === undefined
+        ? _jsx(MenuItemView, { ...item, theme: inherited.theme })
+        : _jsx(ResolvedMenuItem, { ...item, color: color ?? inherited?.color, size: inherited?.size });
+});
+function ResolvedMenuItem({ color, size, ...properties }) {
+    return _jsx(MenuItemView, { ...properties, theme: useControlTheme({ color, size }) });
+}
+function MenuItemView({ className, disabled, properties, ref, style, theme }) {
     return _jsx(AriaMenuItem, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => {
             const paint = state.isPressed
                 ? theme.paints.palette.pressed
-                : state.isFocused || state.isHovered || state.isSelected
+                : state.isHovered || state.isSelected
                     ? theme.paints.palette.hover
                     : { background: "transparent", color: theme.foreground };
             return {
@@ -40,41 +49,44 @@ const MenuItemImplementation = forwardRef(function MenuItem({ className, color,
                 paddingInline: Math.max(8, theme.spacing),
                 boxSizing: "border-box",
                 borderRadius: theme.radius,
-                outline: "none",
+                outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+                outlineOffset: 1,
                 cursor: disabled ? "not-allowed" : "pointer",
-                opacity: disabled ? 0.46 : 1,
+                opacity: disabled ? controlOpacity.disabled : 1,
                 userSelect: "none",
                 ...paint,
                 ...style
             };
         } });
-});
+}
 export const MenuItem = MenuItemImplementation;
 export const MenuSection = AriaMenuSection;
 export const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
-    const inherited = useContext(MenuThemeContext);
-    const fallback = useControlTheme({});
-    const theme = inherited?.theme ?? fallback;
+    const theme = useMenuTheme();
     return _jsx(AriaHeader, { ...properties, ref: ref, style: {
             paddingInline: Math.max(8, theme.spacing),
             paddingBlock: theme.gap,
-            fontWeight: 600,
-            opacity: 0.7,
+            fontWeight: controlFontWeight,
+            opacity: controlOpacity.secondary,
             ...style
         } });
 });
 export const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }, ref) {
-    const inherited = useContext(MenuThemeContext);
-    const fallback = useControlTheme({});
-    const theme = inherited?.theme ?? fallback;
+    const theme = useMenuTheme();
     return _jsx(AriaSeparator, { ...properties, ref: ref, style: {
             height: 1,
             marginBlock: theme.gap,
             border: 0,
-            background: colorOpacity(theme.foreground, 0.14),
+            background: colorOpacity(theme.foreground, controlOpacity.separator),
             ...style
         } });
 });
+function useMenuTheme() {
+    const inherited = useContext(MenuThemeContext);
+    if (inherited == null)
+        throw new Error("Menu parts must be used inside Menu");
+    return inherited.theme;
+}
 /** A keyboard-navigable collection of commands or selectable options. */
 export const Menu = Object.assign(MenuRoot, {
     Root: MenuRoot,