@phreshos/react-ui 0.1.27 → 0.1.29

package/dist/tooltip.js

@@ -1,10 +1,10 @@
-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 { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
-import { useAppearance } from "./ui-provider.js";
+import { useResolvedAppearance } from "./appearance-context.js";
 import { Button } from "./button.js";
 import { controlFontSizes } from "./control.js";
-import { overlayMotionClass, useOverlayTransition } from "./motion-style.js";
+import MotionStyle, { overlayMotionClass, overlayTransition } from "./motion-style.js";
 import { scale } from "./scale.js";
 import { Surface } from "./surface.js";
 import { resolveDirection, useDirection } from "./direction.js";
@@ -16,19 +16,20 @@ export const TooltipTrigger = forwardRef(function TooltipTrigger(properties, ref
     return _jsx(Button, { ...properties, ref: ref });
 });
 export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", ...properties }, ref) {
-    const inset = scale(useAppearance().spacing, "small");
-    const transition = useOverlayTransition();
+    const resolved = useResolvedAppearance();
+    const inset = scale(resolved.appearance.spacing, "small");
+    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaTooltip, { ...properties, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
-                boxSizing: "border-box",
-                maxWidth: 280,
-                paddingBlock: inset,
-                paddingInline: inset * 1.5,
-                outline: "none",
-                fontSize: controlFontSizes.small,
-                lineHeight: 1.4,
-                ...style
-            }, children: children }) });
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...properties, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+                        boxSizing: "border-box",
+                        maxWidth: "28em",
+                        paddingBlock: inset,
+                        paddingInline: inset * 1.5,
+                        outline: "none",
+                        fontSize: controlFontSizes.small,
+                        lineHeight: 1.4,
+                        ...style
+                    }, children: children }) })] });
 });
 /** A description shown from the focus and hover state of its trigger. */
 export const Tooltip = Object.assign(TooltipRoot, {

package/dist/ui-provider.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-import { type Appearance, type DesktopPreferences as Preferences } from "@phreshos/core";
+import type { Appearance } from "./appearance.js";
 import { type Direction } from "./direction.js";
+import type { Preferences } from "./preferences.js";
 export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
 export { useDirection, useDocumentDirection } from "./direction.js";
 /** Establishes only the explicitly supplied UI values for a React subtree. */

package/dist/ui-provider.js

@@ -1,21 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import {} from "@phreshos/core";
-import { AppearanceContext, PreferencesContext } from "./appearance-context.js";
-import { DirectionContext } from "./direction.js";
+import { useMemo } from "react";
+import { AppearanceContext, fixedPreferencesSource, PreferencesContext } from "./appearance-context.js";
+import { DirectionContext, fixedDirectionSource } from "./direction.js";
 export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
 export { useDirection, useDocumentDirection } from "./direction.js";
 const directionBoundaryStyle = { display: "contents" };
 /** Establishes only the explicitly supplied UI values for a React subtree. */
 export function UIProvider({ appearance, children, direction, preferences }) {
     let subtree = children;
-    if (preferences !== undefined) {
-        subtree = _jsx(PreferencesContext.Provider, { value: preferences, children: subtree });
+    const preferencesSource = useMemo(() => preferences === undefined ? undefined : fixedPreferencesSource(preferences), [preferences]);
+    const directionSource = useMemo(() => direction === undefined ? undefined : fixedDirectionSource(direction), [direction]);
+    if (preferencesSource !== undefined) {
+        subtree = _jsx(PreferencesContext.Provider, { value: preferencesSource, children: subtree });
     }
     if (appearance !== undefined) {
         subtree = _jsx(AppearanceContext.Provider, { value: appearance, children: subtree });
     }
-    if (direction !== undefined) {
-        subtree = _jsx(DirectionContext.Provider, { value: direction, children: _jsx("div", { dir: direction, style: directionBoundaryStyle, children: subtree }) });
+    if (directionSource !== undefined) {
+        subtree = _jsx(DirectionContext.Provider, { value: directionSource, children: _jsx("div", { dir: direction, style: directionBoundaryStyle, children: subtree }) });
     }
     return subtree;
 }

package/dist/window-header.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+export interface WindowHeaderRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Attenuates the identity when this header is not active. */
+    readonly active?: boolean;
+}
+/** The composable top region of a window; its enclosing Surface owns the material. */
+export declare const WindowHeaderRoot: import("react").ForwardRefExoticComponent<WindowHeaderRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface WindowHeaderIdentityProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    readonly icon?: string;
+    readonly title?: ReactNode;
+}
+/** The icon and truncating title share the window's active treatment. */
+export declare const WindowHeaderIdentity: import("react").ForwardRefExoticComponent<WindowHeaderIdentityProps & import("react").RefAttributes<HTMLDivElement>>;
+export type WindowHeaderCenterProps = HTMLAttributes<HTMLDivElement>;
+/** Optional flexible space for application-owned content. */
+export declare const WindowHeaderCenter: import("react").ForwardRefExoticComponent<WindowHeaderCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+export type WindowHeaderActionsProps = HTMLAttributes<HTMLDivElement>;
+/** End-aligned controls that do not begin a header drag or double-click action. */
+export declare const WindowHeaderActions: import("react").ForwardRefExoticComponent<WindowHeaderActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export type WindowHeaderActionProps = Omit<ButtonProps, "size">;
+/** A compact header action; extra actions use the same treatment as the standard controls. */
+export declare const WindowHeaderAction: import("react").ForwardRefExoticComponent<WindowHeaderActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type WindowHeaderControlProps = Omit<WindowHeaderActionProps, "children">;
+export declare const WindowHeaderMinimize: import("react").ForwardRefExoticComponent<WindowHeaderControlProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface WindowHeaderMaximizeProps extends WindowHeaderControlProps {
+    readonly maximized?: boolean;
+}
+export declare const WindowHeaderMaximize: import("react").ForwardRefExoticComponent<WindowHeaderMaximizeProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type WindowHeaderCloseProps = Omit<WindowHeaderControlProps, "color">;
+export declare const WindowHeaderClose: import("react").ForwardRefExoticComponent<WindowHeaderCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const WindowHeader: import("react").ForwardRefExoticComponent<WindowHeaderRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<WindowHeaderRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Identity: import("react").ForwardRefExoticComponent<WindowHeaderIdentityProps & import("react").RefAttributes<HTMLDivElement>>;
+    Center: import("react").ForwardRefExoticComponent<WindowHeaderCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+    Actions: import("react").ForwardRefExoticComponent<WindowHeaderActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+    Action: import("react").ForwardRefExoticComponent<WindowHeaderActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Minimize: import("react").ForwardRefExoticComponent<WindowHeaderControlProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Maximize: import("react").ForwardRefExoticComponent<WindowHeaderMaximizeProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<WindowHeaderCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type WindowHeaderProps = ComponentProps<typeof WindowHeaderRoot>;

package/dist/window-header.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { useResolvedAppearance } from "./appearance-context.js";
+import { Button } from "./button.js";
+import { transitionTiming } from "./motion-style.js";
+import { scale } from "./scale.js";
+const WindowHeaderContext = createContext(null);
+function useWindowHeader() {
+    const value = useContext(WindowHeaderContext);
+    if (value === null)
+        throw new Error("WindowHeader parts require WindowHeader.Root");
+    return value;
+}
+/** The composable top region of a window; its enclosing Surface owns the material. */
+export const WindowHeaderRoot = forwardRef(function WindowHeaderRoot({ active = true, children, onPointerDown, style, ...properties }, ref) {
+    const resolved = useResolvedAppearance();
+    const spacing = resolved.appearance.spacing;
+    const state = {
+        active,
+        foreground: resolved.colors.foreground,
+        iconRadius: scale(resolved.appearance.radius, "xsmall"),
+        spacing,
+        transition: transitionTiming(resolved.transaction, resolved.preferences.animations)
+    };
+    return _jsx(WindowHeaderContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: ref, onPointerDown: onPointerDown, style: {
+                boxSizing: "border-box",
+                display: "flex",
+                alignItems: "center",
+                gap: spacing,
+                minWidth: 0,
+                height: 16 + spacing * 2,
+                paddingInline: spacing,
+                flexShrink: 0,
+                userSelect: "none",
+                touchAction: onPointerDown ? "none" : undefined,
+                cursor: onPointerDown ? "grab" : undefined,
+                ...style
+            }, children: children }) });
+});
+/** The icon and truncating title share the window's active treatment. */
+export const WindowHeaderIdentity = forwardRef(function WindowHeaderIdentity({ icon, title, style, ...properties }, ref) {
+    const { active, iconRadius, spacing, transition } = useWindowHeader();
+    return _jsxs("div", { ...properties, ref: ref, style: {
+            ...transition,
+            transitionProperty: "opacity",
+            display: "flex",
+            alignItems: "center",
+            gap: spacing,
+            flex: "0 1 auto",
+            minWidth: 0,
+            opacity: active ? 1 : 0.6,
+            ...style
+        }, children: [icon && _jsx("img", { src: icon, alt: "", draggable: false, style: {
+                    width: 16,
+                    height: 16,
+                    flexShrink: 0,
+                    borderRadius: iconRadius,
+                    objectFit: "contain"
+                } }), title != null && _jsx("span", { style: {
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    fontSize: "0.8125em",
+                    fontWeight: 500
+                }, children: title })] });
+});
+/** Optional flexible space for application-owned content. */
+export const WindowHeaderCenter = forwardRef(function WindowHeaderCenter({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
+    useWindowHeader();
+    return _jsx("div", { ...properties, ref: ref, onDoubleClick: event => { event.stopPropagation(); onDoubleClick?.(event); }, onPointerDown: event => { event.stopPropagation(); onPointerDown?.(event); }, style: { display: "flex", alignItems: "center", flex: "1 1 auto", minWidth: 0, ...style } });
+});
+/** End-aligned controls that do not begin a header drag or double-click action. */
+export const WindowHeaderActions = forwardRef(function WindowHeaderActions({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
+    const { spacing } = useWindowHeader();
+    return _jsx("div", { ...properties, ref: ref, onDoubleClick: event => { event.stopPropagation(); onDoubleClick?.(event); }, onPointerDown: event => { event.stopPropagation(); onPointerDown?.(event); }, style: {
+            display: "flex",
+            alignItems: "center",
+            gap: Math.max(4, scale(spacing, "xsmall")),
+            flexShrink: 0,
+            marginInlineStart: "auto",
+            ...style
+        } });
+});
+/** A compact header action; extra actions use the same treatment as the standard controls. */
+export const WindowHeaderAction = forwardRef(function WindowHeaderAction({ style, ...properties }, ref) {
+    const { foreground } = useWindowHeader();
+    return _jsx(Button, { ...properties, ref: ref, size: "xsmall", style: { color: foreground, ...style } });
+});
+export const WindowHeaderMinimize = forwardRef(function WindowHeaderMinimize({ "aria-label": label = "Minimize", preventFocusOnPress = true, ...properties }, ref) {
+    return _jsx(WindowHeaderAction, { ...properties, ref: ref, "aria-label": label, preventFocusOnPress: preventFocusOnPress, children: _jsx(ControlIcon, { children: _jsx("path", { d: "M1.5 7.5h7" }) }) });
+});
+export const WindowHeaderMaximize = forwardRef(function WindowHeaderMaximize({ "aria-label": label, maximized = false, ...properties }, ref) {
+    return _jsx(WindowHeaderAction, { ...properties, ref: ref, "aria-label": label ?? (maximized ? "Restore" : "Maximize"), children: _jsx(ControlIcon, { children: maximized
+                ? _jsx("path", { d: "M1 4h5v5H1zM4 1h5v5H6.5", strokeWidth: "1.3", strokeLinejoin: "round" })
+                : _jsx("path", { d: "M1.5 1.5h7v7h-7z", strokeWidth: "1.3", strokeLinejoin: "round" }) }) });
+});
+export const WindowHeaderClose = forwardRef(function WindowHeaderClose({ "aria-label": label = "Close", preventFocusOnPress = true, ...properties }, ref) {
+    return _jsx(WindowHeaderAction, { ...properties, ref: ref, "aria-label": label, color: "danger:base", preventFocusOnPress: preventFocusOnPress, children: _jsx(ControlIcon, { children: _jsx("path", { d: "M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5" }) }) });
+});
+function ControlIcon({ children }) {
+    return _jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: children });
+}
+export const WindowHeader = Object.assign(WindowHeaderRoot, {
+    Root: WindowHeaderRoot,
+    Identity: WindowHeaderIdentity,
+    Center: WindowHeaderCenter,
+    Actions: WindowHeaderActions,
+    Action: WindowHeaderAction,
+    Minimize: WindowHeaderMinimize,
+    Maximize: WindowHeaderMaximize,
+    Close: WindowHeaderClose
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.52",
+    "@phreshos/core": "^0.1.54",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"