@phreshos/react-ui 0.1.51 → 0.1.53

package/dist/control/selection-track.d.ts

@@ -30,7 +30,11 @@ type ItemState = Readonly<{
 }>;
 /** One item of a SelectionTrack; its label reads against the selection when selected. */
 export declare function selectionItemStyle(metrics: ControlMetrics, color: Color, orientation: Orientation, state: ItemState): CSSProperties;
-/** An item's label: an optional leading icon and text, centered a gap apart. */
+/**
+ * An item's label: an optional leading icon and text, a gap apart. It fills its item and follows the
+ * item's alignment, so a label stays centered in a centered item, and content given the item's whole
+ * width, such as a tab's title with its close button at the end, can take it.
+ */
 export declare function SelectionItemLabel({ metrics, emphasized, children }: Readonly<{
     metrics: ControlMetrics;
     emphasized: boolean;

package/dist/control/selection-track.js

@@ -63,11 +63,17 @@ export function selectionItemStyle(metrics, color, orientation, state) {
         color: state.isSelected ? readableColor(resolveColor(color, colors), colors) : colors.foreground
     };
 }
-/** An item's label: an optional leading icon and text, centered a gap apart. */
+/**
+ * An item's label: an optional leading icon and text, a gap apart. It fills its item and follows the
+ * item's alignment, so a label stays centered in a centered item, and content given the item's whole
+ * width, such as a tab's title with its close button at the end, can take it.
+ */
 export function SelectionItemLabel({ metrics, emphasized, children }) {
     return _jsx("span", { style: {
             ...transition(metrics.visual, "opacity"),
             display: "flex",
+            flex: "1 1 auto",
+            justifyContent: "inherit",
             alignItems: "center",
             gap: metrics.gap,
             minWidth: 0,

package/dist/main.d.ts

@@ -13,7 +13,7 @@ export { useDirection, useDocumentDirection, type Direction } from "./foundation
 export type { Preferences, PreferencesUpdate, Theme } from "./foundation/preferences.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Surface, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceDepth, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface/surface.js";
+export { Surface, useSurfaceColor, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceDepth, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface/surface.js";
 export { resolveColor, useColor, useContrastingColor, type Color, type ColorLevel, type ColorScale } from "./foundation/color.js";
 export { Panel, type PanelProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
 export { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps, type WindowMoveCaptureProps } from "./window.js";

package/dist/main.js

@@ -12,7 +12,7 @@ export { timing } from "./foundation/timing.js";
 export { useDirection, useDocumentDirection } from "./foundation/direction.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
-export { Surface } from "./surface/surface.js";
+export { Surface, useSurfaceColor } from "./surface/surface.js";
 export { resolveColor, useColor, useContrastingColor } from "./foundation/color.js";
 // Context-dependent parts are public only through their owning component family.
 export { Panel } from "./panel.js";

package/dist/surface/surface.d.ts

@@ -71,6 +71,15 @@ export declare const interactionShift: Readonly<{
 }>;
 /** A clear Surface has no paint to move, so it shows the same shift as a slightly stronger veil. */
 export declare const clearVeil = 1.3;
+/**
+ * The color a Surface of this color and depth is painted with at rest, before its material: a recess
+ * sinks below the color it is given; a clear Surface, with no depth or a transparent color, paints
+ * nothing. Whatever draws on a Surface and must match it, such as a terminal telling its programs
+ * what it stands on, takes this color.
+ */
+export declare function surfaceColor(color: Color, depth: SurfaceDepth, colors: Visual["colors"]): string;
+/** The color a Surface of this color and depth is painted with at rest, in the active Appearance. */
+export declare function useSurfaceColor(color?: Color, depth?: SurfaceDepth): string;
 /** Resolves every visual value of one Surface. Pure over its inputs. */
 export declare function surfacePaint(visual: Visual, color: Color, depth: SurfaceDepth, options: MaterialMode | MaterialOptions | undefined, shadowOptions: ShadowOverrides["shadow"], interaction: SurfaceInteraction | undefined): {
     fill: string;

package/dist/surface/surface.js

@@ -67,6 +67,23 @@ const materialLevel = Object.freeze({ none: 0, basic: 1, extended: 2, full: 3 })
 export const interactionShift = Object.freeze({ hovered: 0.05, pressed: 0.1 });
 /** A clear Surface has no paint to move, so it shows the same shift as a slightly stronger veil. */
 export const clearVeil = 1.3;
+/**
+ * The color a Surface of this color and depth is painted with at rest, before its material: a recess
+ * sinks below the color it is given; a clear Surface, with no depth or a transparent color, paints
+ * nothing. Whatever draws on a Surface and must match it, such as a terminal telling its programs
+ * what it stands on, takes this color.
+ */
+export function surfaceColor(color, depth, colors) {
+    const base = resolveColor(color, colors);
+    if (depth === "none" || base === "transparent")
+        return "transparent";
+    return depth === "recessed" ? recessColor(base) : base;
+}
+/** The color a Surface of this color and depth is painted with at rest, in the active Appearance. */
+export function useSurfaceColor(color = "background", depth = "raised") {
+    const { colors } = useVisual();
+    return surfaceColor(color, depth, colors);
+}
 /** Resolves every visual value of one Surface. Pure over its inputs. */
 export function surfacePaint(visual, color, depth, options, shadowOptions, interaction) {
     const { colors } = visual;
@@ -78,7 +95,7 @@ export function surfacePaint(visual, color, depth, options, shadowOptions, inter
     const darkness = canvasDarkness(colors);
     // A recess moves away from its surroundings toward whichever extreme has
     // room, by one constant perceptual difference on any canvas.
-    const rest = depth === "recessed" ? recessColor(base) : base;
+    const rest = depth === "recessed" ? surfaceColor(color, depth, colors) : base;
     // A clear Surface, with no depth or a transparent color, has no substance of
     // its own: it paints nothing at rest, takes the content color of whatever it
     // sits on, and only reveals interaction as a veil. With no depth, a color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,