@phreshos/react-ui 0.1.29 → 0.1.30

package/README.md

@@ -115,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
@@ -133,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" }} />
 ```
 
@@ -154,23 +162,29 @@ 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.
 
-`WindowHeader` provides the layout shared by Desktop-owned and application-owned
-window headers. `Identity` presents the icon and truncating title, `Center` is
-optional flexible space, and `Actions` aligns compact controls at the end. The
-header uses the enclosing Surface rather than creating another material layer.
-Its controls are React UI Buttons; callers connect them to their own window
-operations. Pointer and double-click handlers on the root can implement a drag
-area, while the center and actions keep their interactions separate.
+`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
-<WindowHeader active={active} onPointerDown={beginDrag}>
-  <WindowHeader.Identity icon={icon} title={title} />
-  <WindowHeader.Actions>
-    <WindowHeader.Minimize onPress={minimize} />
-    <WindowHeader.Maximize maximized={maximized} onPress={toggleMaximize} />
-    <WindowHeader.Close onPress={close} />
-  </WindowHeader.Actions>
-</WindowHeader>
+<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

package/dist/main.d.ts

@@ -10,10 +10,10 @@ 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 { Surface, type MaterialMode, 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 { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps } from "./window.js";
 export { Button, type ButtonColor, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";

package/dist/main.js

@@ -11,7 +11,7 @@ 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 { Window } from "./window.js";
 export { Button } from "./button.js";
 export { Input } from "./input.js";
 export { Textarea } from "./textarea.js";

package/dist/material-options.d.ts

@@ -8,10 +8,12 @@ export interface MaterialOptions {
     readonly distortion?: ScaleLevel | number;
     readonly saturation?: ScaleLevel | number;
 }
+/** React UI's progressively complete browser rendering strategies for a resolved Material. */
+export type MaterialMode = "none" | "basic" | "extended" | "full";
 /** Grouped material customization exposed by components built on Surface. */
 export interface MaterialOverrides {
-    /** Omission or true uses Appearance defaults; false uses the resolved color as a normal background. */
-    readonly material?: boolean | MaterialOptions;
+    /** Omission uses basic rendering. An options object uses full rendering with those overrides. */
+    readonly material?: MaterialMode | MaterialOptions;
 }
 /** Resolves overrides against an already selected material branch. */
 export declare function resolveMaterialOptions(values: MaterialOptions, defaults: Readonly<{

package/dist/surface.d.ts

@@ -4,7 +4,7 @@ import { type MaterialOverrides } from "./material-options.js";
 import { type RadiusProps } from "./radius.js";
 import { type ShadowOverrides } from "./shadow-options.js";
 import type { Direction } from "./direction.js";
-export type { MaterialOptions } from "./material-options.js";
+export type { MaterialMode, MaterialOptions } from "./material-options.js";
 export type { ShadowOptions } from "./shadow-options.js";
 export interface SurfaceOwnProps extends MaterialOverrides, ShadowOverrides, RadiusProps {
     readonly color?: Color;

package/dist/surface.js

@@ -35,15 +35,34 @@ const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, ma
 });
 export const Surface = SurfaceRoot;
 function resolveSurface(color, options, resolved) {
+    const mode = typeof options === "object" ? "full" : options ?? "basic";
+    const level = materialLevel[mode];
     const material = resolveMaterialOptions(typeof options === "object" ? options : {}, resolved.material);
     const fill = resolveColor(color, resolved.colors);
+    const opacity = level >= materialLevel.extended ? material.opacity : 1;
+    const backdrop = level >= materialLevel.full;
+    const grain = level === materialLevel.basic
+        ? material.grain * material.opacity
+        : material.grain;
     return {
         ...material,
-        enabled: options !== false,
+        enabled: level >= materialLevel.basic,
+        opacity,
+        fillOpacity: opacity,
+        grain,
+        backdrop: backdrop ? material.backdrop : 0,
+        distortion: backdrop ? material.distortion : 0,
+        saturation: backdrop ? material.saturation : 1,
         color: fill,
         foreground: contrastingColor(color ?? defaultColor, resolved.colors)
     };
 }
+const materialLevel = Object.freeze({
+    none: 0,
+    basic: 1,
+    extended: 2,
+    full: 3
+});
 const layerStyle = {
     position: "absolute",
     inset: 0,
@@ -51,7 +70,7 @@ const layerStyle = {
     pointerEvents: "none"
 };
 function SurfaceLayers({ material, paintTransition }) {
-    const filtersVisible = material.opacity < 1;
+    const filtersVisible = material.fillOpacity < 1;
     const backdrop = filtersVisible ? material.backdrop : 0;
     const saturation = filtersVisible ? material.saturation : 1;
     const distortion = filtersVisible ? material.distortion : 0;
@@ -60,7 +79,7 @@ function SurfaceLayers({ material, paintTransition }) {
         saturation === 1 ? "" : `saturate(${saturation})`
     ].filter(Boolean).join(" ");
     const identity = `phresh-material-${useId().replaceAll(":", "")}`;
-    return _jsxs("span", { "data-material": "", "aria-hidden": "true", style: layerStyle, children: [distortion > 0 && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), frost && _jsx(BackdropLayer, { name: "frost", filter: frost, zIndex: -2 }), _jsx(MaterialPaint, { identity: identity, distortion: distortion, color: material.color, grain: material.grain, grainAmount: material.grainAmount, opacity: material.opacity, transition: paintTransition })] });
+    return _jsxs("span", { "data-material": "", "aria-hidden": "true", style: layerStyle, children: [distortion > 0 && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), frost && _jsx(BackdropLayer, { name: "frost", filter: frost, zIndex: -2 }), _jsx(MaterialPaint, { identity: identity, distortion: distortion, color: material.color, grain: material.grain, grainAmount: material.grainAmount, opacity: material.fillOpacity, transition: paintTransition })] });
 }
 /** Keep refraction and native frost in independent compositor passes. */
 function BackdropLayer({ filter, name, zIndex }) {

package/dist/window.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+import { type SurfaceProps } from "./surface.js";
+/** The material shell that establishes the complete header-and-content layout. */
+export type WindowProps = SurfaceProps;
+/** The remaining window area. Its consumer owns content behavior, including overflow. */
+export type WindowContentProps = HTMLAttributes<HTMLDivElement>;
+export interface WindowHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Attenuates the identity when this header is not active. */
+    readonly active?: boolean;
+}
+export interface WindowIdentityProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    readonly icon?: string;
+    readonly title?: ReactNode;
+}
+export type WindowCenterProps = HTMLAttributes<HTMLDivElement>;
+export type WindowActionsProps = HTMLAttributes<HTMLDivElement>;
+export type WindowActionProps = Omit<ButtonProps, "size">;
+export type WindowControlProps = Omit<WindowActionProps, "children">;
+export interface WindowMaximizeProps extends WindowControlProps {
+    readonly maximized?: boolean;
+}
+export type WindowCloseProps = Omit<WindowControlProps, "color">;
+/** One Surface with a ready-to-use header-and-content composition. */
+export declare const Window: import("react").ForwardRefExoticComponent<Omit<WindowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: import("react").ForwardRefExoticComponent<WindowHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+        Identity: import("react").ForwardRefExoticComponent<WindowIdentityProps & import("react").RefAttributes<HTMLDivElement>>;
+        Center: import("react").ForwardRefExoticComponent<WindowCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+        Actions: import("react").ForwardRefExoticComponent<WindowActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+        Action: import("react").ForwardRefExoticComponent<WindowActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Minimize: import("react").ForwardRefExoticComponent<WindowControlProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Maximize: import("react").ForwardRefExoticComponent<WindowMaximizeProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Close: import("react").ForwardRefExoticComponent<WindowCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    Content: import("react").ForwardRefExoticComponent<WindowContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/{window-header.js → window.js}

@@ -4,15 +4,34 @@ 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);
+import { Surface } from "./surface.js";
+const HeaderContext = createContext(null);
+function useHeader() {
+    const value = useContext(HeaderContext);
     if (value === null)
-        throw new Error("WindowHeader parts require WindowHeader.Root");
+        throw new Error("Window.Header parts require Window.Header");
     return value;
 }
+const WindowRoot = forwardRef(function WindowRoot({ children, style, ...properties }, ref) {
+    return _jsx(Surface, { ...properties, ref: ref, style: {
+            display: "flex",
+            flexDirection: "column",
+            minWidth: 0,
+            minHeight: 0,
+            ...style
+        }, children: children });
+});
+const WindowContent = forwardRef(function WindowContent({ style, ...properties }, ref) {
+    return _jsx("div", { ...properties, ref: ref, style: {
+            position: "relative",
+            flex: "1 1 auto",
+            minWidth: 0,
+            minHeight: 0,
+            ...style
+        } });
+});
 /** 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 HeaderRoot = forwardRef(function HeaderRoot({ active = true, children, onPointerDown, style, ...properties }, ref) {
     const resolved = useResolvedAppearance();
     const spacing = resolved.appearance.spacing;
     const state = {
@@ -22,7 +41,7 @@ export const WindowHeaderRoot = forwardRef(function WindowHeaderRoot({ active =
         spacing,
         transition: transitionTiming(resolved.transaction, resolved.preferences.animations)
     };
-    return _jsx(WindowHeaderContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: ref, onPointerDown: onPointerDown, style: {
+    return _jsx(HeaderContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: ref, onPointerDown: onPointerDown, style: {
                 boxSizing: "border-box",
                 display: "flex",
                 alignItems: "center",
@@ -38,8 +57,8 @@ export const WindowHeaderRoot = forwardRef(function WindowHeaderRoot({ active =
             }, 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();
+const WindowIdentity = forwardRef(function WindowIdentity({ icon, title, style, ...properties }, ref) {
+    const { active, iconRadius, spacing, transition } = useHeader();
     return _jsxs("div", { ...properties, ref: ref, style: {
             ...transition,
             transitionProperty: "opacity",
@@ -66,13 +85,13 @@ export const WindowHeaderIdentity = forwardRef(function WindowHeaderIdentity({ i
                 }, children: title })] });
 });
 /** Optional flexible space for application-owned content. */
-export const WindowHeaderCenter = forwardRef(function WindowHeaderCenter({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
-    useWindowHeader();
+const WindowCenter = forwardRef(function WindowCenter({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
+    useHeader();
     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();
+const WindowActions = forwardRef(function WindowActions({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
+    const { spacing } = useHeader();
     return _jsx("div", { ...properties, ref: ref, onDoubleClick: event => { event.stopPropagation(); onDoubleClick?.(event); }, onPointerDown: event => { event.stopPropagation(); onPointerDown?.(event); }, style: {
             display: "flex",
             alignItems: "center",
@@ -83,31 +102,35 @@ export const WindowHeaderActions = forwardRef(function WindowHeaderActions({ onD
         } });
 });
 /** 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();
+const WindowAction = forwardRef(function WindowAction({ style, ...properties }, ref) {
+    const { foreground } = useHeader();
     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" }) }) });
+const WindowMinimize = forwardRef(function WindowMinimize({ "aria-label": label = "Minimize", preventFocusOnPress = true, ...properties }, ref) {
+    return _jsx(WindowAction, { ...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
+const WindowMaximize = forwardRef(function WindowMaximize({ "aria-label": label, maximized = false, ...properties }, ref) {
+    return _jsx(WindowAction, { ...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" }) }) });
+const WindowClose = forwardRef(function WindowClose({ "aria-label": label = "Close", preventFocusOnPress = true, ...properties }, ref) {
+    return _jsx(WindowAction, { ...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
+const Header = Object.assign(HeaderRoot, {
+    Identity: WindowIdentity,
+    Center: WindowCenter,
+    Actions: WindowActions,
+    Action: WindowAction,
+    Minimize: WindowMinimize,
+    Maximize: WindowMaximize,
+    Close: WindowClose
+});
+/** One Surface with a ready-to-use header-and-content composition. */
+export const Window = Object.assign(WindowRoot, {
+    Header,
+    Content: WindowContent
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "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.54",
+    "@phreshos/core": "^0.1.55",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"

package/dist/window-header.d.ts

@@ -1,42 +0,0 @@
-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>;