@phreshos/react-ui 0.1.28 → 0.1.30

package/README.md

@@ -79,11 +79,12 @@ use the shared Surface implementation while retaining their native behavior. Col
 are independent inputs. `color` accepts an Appearance color and resting level such
 as `background:base` or `primary:soft`, or a direct CSS color. Surface defaults
 to `background:base`; solid controls default to `default:base`.
-Hover and press derive shades of that fill. The resting fill chooses the
-higher-contrast text from Appearance's background and foreground once; interaction
-shades keep that choice.
+Hover and press derive shades of that fill. Surface and solid controls choose
+the higher-contrast text from Appearance's background and foreground whenever
+their fill can be evaluated; interaction shades keep that choice.
 `size` accepts `xsmall`, `small`, `medium` (default), `large`, or `xlarge`;
-spacing and radius follow Appearance. `disabled` prevents activation and focus;
+spacing and radius follow Appearance, while typography remains inherited and
+component sizes are relative to the surrounding text. `disabled` prevents activation and focus;
 `pending` prevents activation while retaining focus.
 
 ```tsx
@@ -95,7 +96,7 @@ spacing and radius follow Appearance. `disabled` prevents activation and focus;
 `Surface` is the material- and shadow-owning element. It renders a `div` by default, while
 `as` selects another React element and preserves that element's native properties
 and ref type. Surface owns its paint, opacity, frost, refraction, grain, edge,
-outer shadow, radius, and clipping requirements. `radius` accepts a size level, `full`, a
+outer shadow, and radius. `radius` accepts a size level, `full`, a
 number in pixels, or a CSS radius and defaults to `medium`.
 
 ```tsx
@@ -114,11 +115,18 @@ required geometry.
 `MaterialOptions` defines `opacity`, `backdrop`, `grain`, `grainAmount`,
 `distortion`, and `saturation`. Every material-bearing component, including
 Surface, exposes these values through its `material` prop. Color remains a
-separate property. Omission or `true` uses `appearance.material`; `false`
-removes the material and paints the resolved color as a normal background.
-Effect options accept a scale level or a direct number;
-opacity affects Surface paint only, never its content. The material edge is part
-of the same Surface rather than a second public entity.
+separate property. Omission uses the resource-efficient `basic` rendering mode.
+`none` ignores Material and paints the resolved color as a normal background;
+`basic` adds Material paint, grain, and its edge while remaining solid, with
+Material opacity applied only to the grain; `extended` applies that opacity to
+the complete Material instead; and `full` adds backdrop, distortion, and
+saturation. A `MaterialOptions` object selects full rendering with those
+overrides. Effect options accept a scale level or a direct number; opacity
+affects Surface paint only, never its content. The material edge is part of the
+same Surface rather than a second public entity.
+
+The modes are progressive: each level preserves the rendering of the previous
+one and adds only its own Material capability.
 
 Surface-based controls expose the same separate `color` and `material` props.
 `ShadowOptions` similarly groups `x`, `y`, `blur`, `spread`, and `opacity` under
@@ -132,7 +140,8 @@ to its options, and a Radio can override them. Shadow follows the same targets a
 inheritance path.
 
 ```tsx
-<Button color="primary:base" material={{ opacity: 0.6, backdrop: 0 }}>Save</Button>
+<Button color="primary:base" material="full">Save</Button>
+<Surface material={{ opacity: 0.6, backdrop: 0 }}>Translucent</Surface>
 <Input label="Name" radius="large" material={{ grain: "small" }} shadow={{ blur: "small" }} />
 ```
 
@@ -153,6 +162,31 @@ Native properties and the root ref target the outer Surface. `Panel.Header`
 owns the optional leading region, while `Panel.Content` is the independently
 configurable inner Surface.
 
+`Window` provides one Surface with a ready header-and-content layout.
+`Window.Header.Identity` presents the icon and truncating title,
+`Window.Header.Center` is optional flexible space, and
+`Window.Header.Actions` aligns compact controls at the end. `Window.Content`
+fills the remaining area without deciding its overflow behavior. The header
+uses the enclosing Surface rather than creating another material layer, and it
+can also be composed independently inside any Surface. Its controls are React
+UI Buttons; callers connect them to their own window operations. Pointer and
+double-click handlers on the header can implement a drag area, while the center
+and actions keep their interactions separate.
+
+```tsx
+<Window>
+  <Window.Header active={active} onPointerDown={beginDrag}>
+    <Window.Header.Identity icon={icon} title={title} />
+    <Window.Header.Actions>
+      <Window.Header.Minimize onPress={minimize} />
+      <Window.Header.Maximize maximized={maximized} onPress={toggleMaximize} />
+      <Window.Header.Close onPress={close} />
+    </Window.Header.Actions>
+  </Window.Header>
+  <Window.Content>{children}</Window.Content>
+</Window>
+```
+
 ## Overlays
 
 Overlay components expose each behavioral role as a named part. Roots own open
@@ -202,8 +236,8 @@ Blur, distortion, geometry, and Surface host opacity are not transitioned; gradi
 and structurally removed effects change directly rather than adding extra
 layers or keeping disabled effects alive.
 
-Motion animates toggle presses, selection marks, switch travel, the Select
-chevron, and Slider thumb feedback. Preferences with animations disabled remove spatial
+Motion animates toggle presses, selection marks, and switch travel. CSS transitions
+animate paint and the Select chevron. Preferences with animations disabled remove spatial
 feedback and make state transitions immediate. Slider values and native input
 behavior are never delayed by visual animation.
 
@@ -255,8 +289,9 @@ import { Input, Textarea, Checkbox, Radio, RadioGroup, Switch, Select, Slider }
 <Slider label="Volume" name="volume" defaultValue={50} minValue={0} maxValue={100} step={1} />
 ```
 
-React Aria owns focus, keyboard, form, and selection behavior. Select's popup
-uses Surface defaults. Toggle indicators use Motion internally and respect
+Each control delegates focus, keyboard, form, and selection behavior to its
+accessible behavioral primitive rather than recreating those systems. Select's
+popup uses Surface defaults. Toggle indicators use Motion internally and respect
 animation preferences. The preview Program demonstrates each input's
 sizes, colors, state, and interaction without overriding its visual defaults.
 

package/dist/appearance-context.d.ts

@@ -1,7 +1,11 @@
 import { type Appearance, type ThemedValue } from "./appearance.js";
 import type { Preferences } from "./preferences.js";
 export declare const AppearanceContext: import("react").Context<Appearance>;
-export declare const PreferencesContext: import("react").Context<Preferences | null>;
+export interface PreferencesSource {
+    readonly getSnapshot: () => Preferences;
+    readonly getServerSnapshot: () => Preferences;
+    readonly subscribe: (change: () => void) => () => void;
+}
 /** Returns the nearest unresolved appearance, or React UI's default. */
 export declare function useAppearance(): Appearance;
 /** Returns the nearest complete Preferences, or reactively follows the browser. */
@@ -10,3 +14,41 @@ export declare function usePreferences(): Preferences;
 export declare function useBrowserPreferences(): Preferences;
 /** Selects the active branch of one complete ThemedValue. */
 export declare function useThemedValue<Value>(value: ThemedValue<Value>): Value;
+/** Resolves one coherent Appearance snapshot for internal component derivation. */
+export declare function useResolvedAppearance(): {
+    appearance: Appearance;
+    preferences: Preferences;
+    colors: Readonly<{
+        background: string;
+        foreground: string;
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    }>;
+    material: Readonly<{
+        grain: number;
+        grainAmount: number;
+        backdrop: number;
+        opacity: number;
+        distortion: number;
+        saturation: number;
+    }>;
+    shadow: Readonly<{
+        x: number;
+        y: number;
+        blur: number;
+        spread: number;
+        opacity: number;
+    }>;
+    transaction: Readonly<{
+        duration: number;
+        easing: import("@phreshos/core").Easing;
+    }>;
+};
+/** Creates a stable source for a complete explicitly supplied Preferences value. */
+export declare function fixedPreferencesSource(preferences: Preferences): PreferencesSource;
+export declare const PreferencesContext: import("react").Context<PreferencesSource>;

package/dist/appearance-context.js

@@ -1,41 +1,91 @@
 import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
 import { defaultAppearance } from "./appearance.js";
 export const AppearanceContext = createContext(defaultAppearance);
-export const PreferencesContext = createContext(null);
 /** Returns the nearest unresolved appearance, or React UI's default. */
 export function useAppearance() {
     return useContext(AppearanceContext);
 }
 /** Returns the nearest complete Preferences, or reactively follows the browser. */
 export function usePreferences() {
-    const preferences = useContext(PreferencesContext);
-    const browserPreferences = useBrowserPreferences();
-    return preferences ?? browserPreferences;
+    const source = useContext(PreferencesContext);
+    return useSyncExternalStore(source.subscribe, source.getSnapshot, source.getServerSnapshot);
 }
 /** Reactively reads the browser's complete visual preferences. */
 export function useBrowserPreferences() {
-    const theme = useMediaPreference(darkThemeQuery) ? "dark" : "light";
-    const animations = !useMediaPreference(reducedMotionQuery);
-    return useMemo(() => ({ theme, animations }), [animations, theme]);
+    return useSyncExternalStore(browserPreferencesSource.subscribe, browserPreferencesSource.getSnapshot, browserPreferencesSource.getServerSnapshot);
 }
 /** Selects the active branch of one complete ThemedValue. */
 export function useThemedValue(value) {
     return value[usePreferences().theme];
 }
-function useMediaPreference(query) {
-    return useSyncExternalStore(change => subscribeMediaPreference(query, change), () => browserMediaPreference(query), () => false);
+/** Resolves one coherent Appearance snapshot for internal component derivation. */
+export function useResolvedAppearance() {
+    const appearance = useAppearance();
+    const preferences = usePreferences();
+    return useMemo(() => ({
+        appearance,
+        preferences,
+        colors: appearance.colors[preferences.theme],
+        material: appearance.material[preferences.theme],
+        shadow: appearance.shadow[preferences.theme],
+        transaction: appearance.transaction
+    }), [appearance, preferences]);
 }
-function subscribeMediaPreference(query, change) {
+/** Creates a stable source for a complete explicitly supplied Preferences value. */
+export function fixedPreferencesSource(preferences) {
+    return {
+        getSnapshot: () => preferences,
+        getServerSnapshot: () => preferences,
+        subscribe: emptySubscription
+    };
+}
+const defaultPreferences = Object.freeze({ theme: "light", animations: true });
+const subscribers = new Set();
+let darkPreference;
+let reducedMotionPreference;
+let browserSnapshot = defaultPreferences;
+function readBrowserPreferences() {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function")
-        return () => undefined;
-    const preference = window.matchMedia(query);
-    preference.addEventListener("change", change);
-    return () => preference.removeEventListener("change", change);
+        return defaultPreferences;
+    darkPreference ??= window.matchMedia(darkThemeQuery);
+    reducedMotionPreference ??= window.matchMedia(reducedMotionQuery);
+    const theme = darkPreference.matches ? "dark" : "light";
+    const animations = !reducedMotionPreference.matches;
+    if (browserSnapshot.theme !== theme || browserSnapshot.animations !== animations) {
+        browserSnapshot = Object.freeze({ theme, animations });
+    }
+    return browserSnapshot;
+}
+function subscribeBrowserPreferences(change) {
+    subscribers.add(change);
+    readBrowserPreferences();
+    if (subscribers.size === 1) {
+        darkPreference?.addEventListener("change", publishBrowserPreferences);
+        reducedMotionPreference?.addEventListener("change", publishBrowserPreferences);
+    }
+    return () => {
+        subscribers.delete(change);
+        if (subscribers.size !== 0)
+            return;
+        darkPreference?.removeEventListener("change", publishBrowserPreferences);
+        reducedMotionPreference?.removeEventListener("change", publishBrowserPreferences);
+        darkPreference = undefined;
+        reducedMotionPreference = undefined;
+    };
+}
+function publishBrowserPreferences() {
+    readBrowserPreferences();
+    for (const subscriber of subscribers)
+        subscriber();
 }
-function browserMediaPreference(query) {
-    return Boolean(typeof window !== "undefined"
-        && typeof window.matchMedia === "function"
-        && window.matchMedia(query).matches);
+function emptySubscription() {
+    return () => undefined;
 }
+const browserPreferencesSource = {
+    getSnapshot: readBrowserPreferences,
+    getServerSnapshot: () => defaultPreferences,
+    subscribe: subscribeBrowserPreferences
+};
+export const PreferencesContext = createContext(browserPreferencesSource);
 const darkThemeQuery = "(prefers-color-scheme: dark)";
 const reducedMotionQuery = "(prefers-reduced-motion: reduce)";

package/dist/button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton } from "react-aria-components";
-import { controlFontSizes, useControlTheme } from "./control.js";
+import { controlOpacity, useControlTheme } from "./control.js";
 import { SurfaceButton } from "./control-surface.js";
 /** An Appearance-aware action with normalized pointer and keyboard behavior. */
 export const Button = forwardRef(function Button({ children, color, disabled = false, pending = false, onPress, radius = "medium", size = "medium", style, material, shadow, type = "button", ...properties }, ref) {
@@ -13,14 +13,11 @@ export const Button = forwardRef(function Button({ children, color, disabled = f
             isHovered,
             isPressed,
             pending,
-            size,
             style
         }), children: children });
 });
-function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pending, size, style }) {
-    const fontSize = controlFontSizes[size];
+function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pending, style }) {
     const { spacing, focusColor } = theme;
-    const height = Math.max(24, 24 + spacing);
     const interactive = !disabled && !pending;
     const paint = buttonPaint(theme, interactive, isHovered, isPressed);
     return {
@@ -34,20 +31,19 @@ function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pe
         justifyContent: "center",
         flexShrink: 0,
         minWidth: 0,
-        height,
+        height: theme.height,
         paddingBlock: 0,
         paddingInline: Math.max(8, spacing),
-        gap: Math.max(4, spacing / 2),
+        gap: theme.gap,
         border: "none",
         borderRadius: theme.radius,
         outline: isFocusVisible ? `1px solid ${focusColor}` : "none",
         outlineOffset: 1,
         ...paint,
-        opacity: disabled ? 0.46 : pending ? 0.68 : 1,
+        opacity: disabled ? controlOpacity.disabled : pending ? controlOpacity.pending : 1,
         cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",
         font: "inherit",
-        fontSize,
-        fontWeight: 550,
+        fontSize: theme.fontSize,
         lineHeight: 1,
         textAlign: "center",
         textDecoration: "none",

package/dist/color.d.ts

@@ -1,4 +1,4 @@
-import type { AppearanceColor } from "./appearance.js";
+import type { AppearanceColor, AppearanceColors } from "./appearance.js";
 /** A visual treatment derived from one concrete CSS color. */
 export type ColorLevel = "subtle" | "soft" | "base" | "strong" | "intense";
 /** Every visual treatment derived from one concrete CSS color. */
@@ -14,10 +14,10 @@ export declare function color(value: string): ColorScale;
 export declare function resolveColorLevel(value: string, level: ColorLevel): string;
 /** Returns the complete visual treatments derived from one concrete color. */
 export declare function useColor(value: string): ColorScale;
-/** Resolves a semantic Appearance color or preserves a direct CSS color. */
-export declare function useResolveColor(value?: Color): string;
-/** Resolves a color to concrete opaque paint for solid interactive states. */
-export declare function useResolveSolidColor(value: Color): string;
+/** Resolves a semantic color from an already selected Appearance branch. */
+export declare function resolveColor(value: Color | undefined, colors: AppearanceColors): string;
+/** Resolves opaque control paint from an already selected Appearance branch. */
+export declare function resolveSolidColor(value: Color, colors: AppearanceColors): string;
 /** Applies material opacity without restricting the source CSS color syntax. */
 export declare function colorOpacity(value: string, opacity: number): string;
 /** Reads perceptual lightness from a resolved CSS color. */
@@ -33,6 +33,8 @@ export declare function opaqueColor(value: string): string;
 export declare function colorShade(value: string, amount: number): string;
 /** Chooses only from the two Appearance colors, against the actual painted fill. */
 export declare function onColor(fill: string, background: string, foreground: string): string;
+/** Chooses readable content when the fill can be evaluated, otherwise preserves Appearance foreground. */
+export declare function contrastingColor(value: Color, colors: AppearanceColors): string;
 /** Solid controls start at base; interaction shades preserve its text choice. */
 export declare function solidColors(base: string, background: string, foreground: string): {
     rest: {

package/dist/color.js

@@ -1,6 +1,25 @@
 import { useMemo } from "react";
-import { ColorSpace, mix, parse, serialize, to, toGamut, contrastWCAG21, sRGB, sRGB_Linear, HSL, HWB, Lab, LCH, OKLab, OKLCH, P3, A98RGB, ProPhoto, REC_2020, XYZ_D50, XYZ_D65 } from "colorjs.io/fn";
-import { useAppearance, useThemedValue } from "./ui-provider.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 contrastWCAG21 from "colorjs.io/src/contrast/WCAG21.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);
@@ -40,17 +59,14 @@ export function resolveColorLevel(value, level) {
 export function useColor(value) {
     return useMemo(() => color(value), [value]);
 }
-/** Resolves a semantic Appearance color or preserves a direct CSS color. */
-export function useResolveColor(value = defaultColor) {
-    const appearance = useAppearance();
-    const colors = useThemedValue(appearance.colors);
-    const semantic = parseSemanticColor(value, colors);
-    return semantic ? color(semantic.source)[semantic.level] : value;
+/** 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 a color to concrete opaque paint for solid interactive states. */
-export function useResolveSolidColor(value) {
-    const appearance = useAppearance();
-    const colors = useThemedValue(appearance.colors);
+/** 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) : opaqueColor(value);
 }
@@ -88,6 +104,15 @@ export function onColor(fill, background, foreground) {
     const second = opaqueColor(foreground);
     return contrastWCAG21(fill, first) > contrastWCAG21(fill, second) ? first : second;
 }
+/** 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");

package/dist/context-menu.d.ts

@@ -1,15 +1,18 @@
 import type { ComponentProps } from "react";
 import { Pressable as AriaPressable } from "react-aria-components";
 import type { MenuTriggerProps as AriaMenuTriggerProps } from "react-aria-components";
+import { type PopoverContentProps } from "./popover.js";
 export type ContextMenuRootProps = Omit<AriaMenuTriggerProps, "trigger">;
 export declare function ContextMenuRoot(properties: ContextMenuRootProps): import("react").JSX.Element;
 export type ContextMenuTriggerProps = ComponentProps<typeof AriaPressable>;
 export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria/Pressable").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+export type ContextMenuContentProps = Omit<PopoverContentProps, "isNonModal">;
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLElement>>;
 /** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
 export declare const ContextMenu: typeof ContextMenuRoot & {
     Root: typeof ContextMenuRoot;
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria/Pressable").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("./popover.js").PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLElement>>;
     Menu: import("./menu.js").MenuRootComponent & {
         Root: import("./menu.js").MenuRootComponent;
         Item: import("./menu.js").MenuItemComponent;

package/dist/context-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { MenuTrigger as AriaMenuTrigger, Pressable as AriaPressable } from "react-aria-components";
+import { forwardRef, useCallback, useContext, useEffect, useRef } from "react";
+import { MenuTrigger as AriaMenuTrigger, OverlayTriggerStateContext, Pressable as AriaPressable } from "react-aria-components";
 import { Menu } from "./menu.js";
 import { PopoverContent } from "./popover.js";
 export function ContextMenuRoot(properties) {
@@ -9,10 +9,37 @@ export function ContextMenuRoot(properties) {
 export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger(properties, ref) {
     return _jsx(AriaPressable, { ...properties, ref: ref });
 });
+function setRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+export const ContextMenuContent = forwardRef(function ContextMenuContent(properties, forwardedRef) {
+    const state = useContext(OverlayTriggerStateContext);
+    const contentRef = useRef(null);
+    const ref = useCallback((element) => {
+        contentRef.current = element;
+        setRef(forwardedRef, element);
+    }, [forwardedRef]);
+    useEffect(() => {
+        if (!state?.isOpen)
+            return;
+        function dismiss(event) {
+            const target = event.target;
+            if (target instanceof Node && contentRef.current?.contains(target))
+                return;
+            state?.close();
+        }
+        document.addEventListener("pointerdown", dismiss, true);
+        return () => document.removeEventListener("pointerdown", dismiss, true);
+    }, [state]);
+    return _jsx(PopoverContent, { ...properties, ref: ref, isNonModal: true });
+});
 /** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
 export const ContextMenu = Object.assign(ContextMenuRoot, {
     Root: ContextMenuRoot,
     Trigger: ContextMenuTrigger,
-    Content: PopoverContent,
+    Content: ContextMenuContent,
     Menu
 });

package/dist/control.d.ts

@@ -3,6 +3,7 @@ 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 {
@@ -22,10 +23,22 @@ export interface FieldProps {
 }
 /** 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, number>>;
+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;
@@ -38,7 +51,8 @@ export interface ControlTheme {
         readonly danger: SolidColors;
     };
     readonly radius: CSSProperties["borderRadius"];
-    readonly fontSize: number;
+    readonly fontSize: CSSProperties["fontSize"];
+    readonly indicatorSize: number;
     readonly height: number;
     readonly gap: number;
 }

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 })] });
 }