@phreshos/react-ui 0.1.50 → 0.1.51

package/README.md

@@ -231,7 +231,7 @@ component-owned.
 Text fields, Select, ComboBox, and the date fields recess the `background` by
 default. Checkbox, Switch, and RadioGroup indicators are recessed beds that rise
 in their color when selected. Slider and ProgressBar fill a recessed rail with
-their color. Motion follows `appearance.transaction`; Preferences with
+their color. Motion is derived from what moves, how far, and `appearance.tempo` (`timing`, `useTiming`); Preferences with
 animations disabled make every change immediate without changing Appearance.
 
 | Component | Value contract | Purpose |

package/dist/control/control.d.ts

@@ -61,5 +61,5 @@ export declare function controlMetrics(visual: Visual, size: ScaleLevel, radius:
  * Appearance radius itself.
  */
 export declare function proportionalRadius(visual: Visual, height: number, level?: ScaleLevel): number;
-/** A CSS transition for the given properties using the Appearance transaction. */
+/** A CSS transition for the given properties moving as a change in place. */
 export declare function transition(visual: Visual, properties: string, factor?: number): CSSProperties;

package/dist/control/control.js

@@ -69,7 +69,7 @@ export function proportionalRadius(visual, height, level = "medium") {
     const medium = controlHeight(visual.spacing);
     return Math.round(scale(visual.radius, level) * height / medium * 100) / 100;
 }
-/** A CSS transition for the given properties using the Appearance transaction. */
+/** A CSS transition for the given properties moving as a change in place. */
 export function transition(visual, properties, factor = 1) {
     return {
         transitionProperty: properties,

package/dist/drawer.d.ts

@@ -14,7 +14,7 @@ export interface DrawerProps {
  * A narrow layout's sidebar, over its content from the start side, such as the navigation a narrow
  * window gives up to its content. It is placed in its nearest positioned container. A press
  * outside or Escape closes it. It slides in and back out along the same path, timed by the
- * Appearance transaction, the way out its own animation so its end is seen; without motion it
+ * motion of a change in place, the way out its own animation so its end is seen; without motion it
  * simply shows and goes. Only its position moves:
  * fading it would switch off the blur it draws of what is behind it.
  */

package/dist/drawer.js

@@ -9,7 +9,7 @@ import { Surface } from "./surface/surface.js";
  * A narrow layout's sidebar, over its content from the start side, such as the navigation a narrow
  * window gives up to its content. It is placed in its nearest positioned container. A press
  * outside or Escape closes it. It slides in and back out along the same path, timed by the
- * Appearance transaction, the way out its own animation so its end is seen; without motion it
+ * motion of a change in place, the way out its own animation so its end is seen; without motion it
  * simply shows and goes. Only its position moves:
  * fading it would switch off the blur it draws of what is behind it.
  */

package/dist/foundation/appearance.d.ts

@@ -1,7 +1,7 @@
-import { type Appearance as SystemAppearance, type AppearanceColors, type AppearanceMaterial, type AppearanceShadow, type AppearanceTransaction } from "@phreshos/core";
-export type { AppearanceColor, AppearanceColors, AppearanceMaterial, AppearanceRange, AppearanceShadow, AppearanceTransaction, Easing, ThemedValue } from "@phreshos/core";
+import { type Appearance as SystemAppearance, type AppearanceColors, type AppearanceMaterial, type AppearanceShadow } from "@phreshos/core";
+export type { AppearanceColor, AppearanceColors, AppearanceMaterial, AppearanceRange, AppearanceShadow, Transaction, Easing, ThemedValue } from "@phreshos/core";
 /** The System Appearance fields consumed by React UI. */
-export type Appearance = Pick<SystemAppearance, "colors" | "spacing" | "radius" | "shadow" | "material" | "transaction">;
+export type Appearance = Pick<SystemAppearance, "colors" | "spacing" | "radius" | "shadow" | "material" | "tempo">;
 type Themed<Value> = Readonly<{
     light?: Readonly<Partial<Value>>;
     dark?: Readonly<Partial<Value>>;
@@ -12,7 +12,7 @@ type AppearanceUpdateFields = Readonly<{
     radius?: number;
     shadow?: Themed<AppearanceShadow>;
     material?: Themed<AppearanceMaterial>;
-    transaction?: Readonly<Partial<AppearanceTransaction>>;
+    tempo?: number;
 }>;
 /** At least one partial visual field merged recursively with the nearest UIProvider. */
 export type AppearanceUpdate = {
@@ -76,6 +76,10 @@ export declare const appearanceLimits: Readonly<{
             maximum: 2.6;
         }>;
     }>;
+    tempo: Readonly<{
+        minimum: number;
+        maximum: 4;
+    }>;
 }>;
 /** The visual portion of the System's default Appearance. */
 export declare const defaultAppearance: Appearance;

package/dist/foundation/appearance.js

@@ -4,7 +4,8 @@ export const appearanceLimits = Object.freeze({
     spacing: coreAppearanceLimits.spacing,
     radius: coreAppearanceLimits.radius,
     shadow: coreAppearanceLimits.shadow,
-    material: coreAppearanceLimits.material
+    material: coreAppearanceLimits.material,
+    tempo: coreAppearanceLimits.tempo
 });
 /** The visual portion of the System's default Appearance. */
 export const defaultAppearance = Object.freeze({
@@ -13,7 +14,7 @@ export const defaultAppearance = Object.freeze({
     radius: systemDefaultAppearance.radius,
     shadow: systemDefaultAppearance.shadow,
     material: systemDefaultAppearance.material,
-    transaction: systemDefaultAppearance.transaction
+    tempo: systemDefaultAppearance.tempo
 });
 /** Applies one partial update; omitted leaves continue to inherit. */
 export function mergeAppearance(appearance, update) {
@@ -23,9 +24,7 @@ export function mergeAppearance(appearance, update) {
         radius: update.radius ?? appearance.radius,
         shadow: mergeThemed(appearance.shadow, update.shadow),
         material: mergeThemed(appearance.material, update.material),
-        transaction: update.transaction === undefined
-            ? appearance.transaction
-            : Object.freeze({ ...appearance.transaction, ...update.transaction })
+        tempo: update.tempo ?? appearance.tempo
     });
 }
 function mergeThemed(current, update) {

package/dist/foundation/motion-style.d.ts

@@ -4,7 +4,7 @@ import type { Visual } from "./visual.js";
 export declare function overlayTransition(visual: Visual): CSSProperties;
 /**
  * How long one pass of a repeating motion takes, such as an indeterminate
- * progress sweep or a skeleton pulse: eight Appearance transactions, and never
+ * progress sweep or a skeleton pulse: eight changes in place, and never
  * quicker than a calm breath.
  */
 export declare function loopDuration(visual: Visual): number;

package/dist/foundation/motion-style.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { timing } from "./timing.js";
 /** Per-overlay variables consumed by the shared entrance keyframes. */
 export function overlayTransition(visual) {
     return {
@@ -8,11 +9,11 @@ export function overlayTransition(visual) {
 }
 /**
  * How long one pass of a repeating motion takes, such as an indeterminate
- * progress sweep or a skeleton pulse: eight Appearance transactions, and never
+ * progress sweep or a skeleton pulse: eight changes in place, and never
  * quicker than a calm breath.
  */
 export function loopDuration(visual) {
-    return Math.max(900, visual.appearance.transaction.duration * 8);
+    return Math.max(900, timing("change", { tempo: visual.appearance.tempo }).duration * 8);
 }
 /** The stacking layer of content above an interface: dialogs and notifications. */
 export const overlayLayer = 1_000;

package/dist/foundation/timing.d.ts

@@ -0,0 +1,30 @@
+import type { Transaction } from "@phreshos/core";
+/**
+ * What moves, which decides how it moves:
+ *
+ * - `change`: something changing in its place, such as a color, a control's state, or an overlay
+ *   appearing. It is short, and the same whatever the size of what changes.
+ * - `window`: a box carried across a distance, such as a Window moving or resizing. A light body
+ *   answering a hand: it sets off at once and settles softly.
+ * - `view`: a whole scene carried across a distance, such as the view over the plane. It moves as
+ *   a body on a spring: it arrives without passing its place, and a move taken on the way carries
+ *   on at the speed it already has.
+ */
+export type MotionKind = "change" | "window" | "view";
+export type TimingOptions = Readonly<{
+    /** How far it goes, in pixels; nothing for a change in place. */
+    distance?: number;
+    /** Whether it leaves the person's sight: then it sets off softly, or it is gone in the first frames. */
+    leaving?: boolean;
+    /** The Appearance tempo, or a tempo made from it; 1 by default. */
+    tempo?: number;
+}>;
+/**
+ * The motion of one change: how long it takes and how it moves, from what moves, how far, and the
+ * tempo. The shape of every motion is the System's own; the tempo only stretches or shortens time,
+ * so every motion keeps its shape and its length beside every other.
+ *
+ * Across a distance, the time grows with the distance, gently, as the square root, within bounds:
+ * a fixed short time would cross a far distance so fast that frames show as jumps.
+ */
+export declare function timing(kind: MotionKind, options?: TimingOptions): Transaction;

package/dist/foundation/timing.js

@@ -0,0 +1,36 @@
+/**
+ * The motion of one change: how long it takes and how it moves, from what moves, how far, and the
+ * tempo. The shape of every motion is the System's own; the tempo only stretches or shortens time,
+ * so every motion keeps its shape and its length beside every other.
+ *
+ * Across a distance, the time grows with the distance, gently, as the square root, within bounds:
+ * a fixed short time would cross a far distance so fast that frames show as jumps.
+ */
+export function timing(kind, options = {}) {
+    const tempo = options.tempo ?? 1;
+    // A change in place is the same for one tempo, so it is one value that effects can depend on. Only
+    // the few tempos in use are kept: a tempo dragged across its range leaves none of its steps behind.
+    if (kind === "change") {
+        let cached = changes.get(tempo);
+        if (!cached) {
+            if (changes.size >= 8)
+                changes.delete(changes.keys().next().value);
+            changes.set(tempo, cached = Object.freeze({ duration: Math.round(change.duration * tempo), easing: change.easing }));
+        }
+        return cached;
+    }
+    const pace = paces[kind];
+    const distance = options.distance ?? 0;
+    // Near, the time grows as the square root; a long crossing adds a little more for each pixel
+    // past a first stretch, so a far journey is not crossed at a rush.
+    const designed = Math.min(pace.maximum, Math.max(pace.minimum, pace.base + pace.growth * Math.sqrt(distance) + pace.far * Math.max(0, distance - 1000)));
+    return Object.freeze({ duration: Math.round(designed * tempo), easing: options.leaving ? departure : pace.easing });
+}
+const change = Object.freeze({ duration: 102, easing: "ease-out" });
+const changes = new Map();
+/** The curve of something leaving the view: soft to start, gathering speed as it goes. */
+const departure = Object.freeze([0.65, 0, 0.35, 1]);
+const paces = {
+    view: { base: 187, growth: 8.5, far: 0, minimum: 255, maximum: 850, easing: Object.freeze({ spring: Object.freeze({ bounce: 0 }) }) },
+    window: { base: 72, growth: 3.4, far: 0.0425, minimum: 110, maximum: 553, easing: Object.freeze([0.22, 1, 0.36, 1]) }
+};

package/dist/foundation/visual.d.ts

@@ -1,4 +1,6 @@
-import { type Appearance, type AppearanceColors, type AppearanceMaterial, type AppearanceShadow, type Easing, type ThemedValue } from "./appearance.js";
+import { type Transaction } from "@phreshos/core";
+import { type MotionKind, type TimingOptions } from "./timing.js";
+import { type Appearance, type AppearanceColors, type AppearanceMaterial, type AppearanceShadow, type ThemedValue } from "./appearance.js";
 import type { Preferences } from "./preferences.js";
 /**
  * One Appearance resolved for one set of Preferences. Every component reads
@@ -13,9 +15,9 @@ export interface Visual {
     readonly shadow: AppearanceShadow;
     readonly spacing: number;
     readonly radius: number;
-    /** Duration in milliseconds, already zero when animations are disabled. */
+    /** Duration in milliseconds of a change in place, already zero when animations are disabled. */
     readonly duration: number;
-    /** CSS timing function for the Appearance transaction. */
+    /** CSS timing function of a change in place. */
     readonly easing: string;
 }
 /** Resolves and memoizes one Visual per Appearance, Theme, and animation preference. */
@@ -32,11 +34,15 @@ export declare function useAppearance(): Appearance;
 export declare function usePreferences(): Preferences;
 /** Returns the shared resolved Visual for the nearest Appearance and Preferences. */
 export declare function useVisual(): Visual;
+/**
+ * Derives the motion of a change from the nearest Appearance's tempo: what moves, how far, and
+ * whether it leaves sight. With animations off, every motion takes no time.
+ */
+export declare function useTiming(): (kind: MotionKind, options?: Omit<TimingOptions, "tempo">) => Transaction;
 /** Selects the active branch of one themed value. */
 export declare function useThemedValue<Value>(value: ThemedValue<Value>): Value;
 /** Reactively reads the browser's complete visual preferences. */
 export declare function useBrowserPreferences(): Preferences;
 /** Creates a stable source for one explicitly supplied Preferences value. */
 export declare function fixedPreferencesSource(preferences: Preferences): PreferencesSource;
-export declare function cssEasing(easing: Easing): string;
 export declare const PreferencesContext: import("react").Context<PreferencesSource>;

package/dist/foundation/visual.js

@@ -1,4 +1,6 @@
-import { createContext, useContext, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useSyncExternalStore } from "react";
+import { cssEasing } from "@phreshos/core";
+import { timing } from "./timing.js";
 import { defaultAppearance } from "./appearance.js";
 const visuals = new WeakMap();
 /** Resolves and memoizes one Visual per Appearance, Theme, and animation preference. */
@@ -10,7 +12,8 @@ export function resolveVisual(appearance, preferences) {
     const cached = resolved.get(key);
     if (cached !== undefined)
         return cached;
-    const duration = preferences.animations ? appearance.transaction.duration : 0;
+    const change = timing("change", { tempo: appearance.tempo });
+    const duration = preferences.animations ? change.duration : 0;
     const visual = Object.freeze({
         appearance,
         preferences,
@@ -20,7 +23,7 @@ export function resolveVisual(appearance, preferences) {
         spacing: appearance.spacing,
         radius: appearance.radius,
         duration,
-        easing: cssEasing(appearance.transaction.easing)
+        easing: cssEasing(change.easing)
     });
     resolved.set(key, visual);
     return visual;
@@ -39,6 +42,18 @@ export function usePreferences() {
 export function useVisual() {
     return resolveVisual(useAppearance(), usePreferences());
 }
+/**
+ * Derives the motion of a change from the nearest Appearance's tempo: what moves, how far, and
+ * whether it leaves sight. With animations off, every motion takes no time.
+ */
+export function useTiming() {
+    const visual = useVisual();
+    return useCallback(function (kind, options = {}) {
+        if (!visual.preferences.animations)
+            return still;
+        return timing(kind, { ...options, tempo: visual.appearance.tempo });
+    }, [visual]);
+}
 /** Selects the active branch of one themed value. */
 export function useThemedValue(value) {
     return value[usePreferences().theme];
@@ -55,9 +70,8 @@ export function fixedPreferencesSource(preferences) {
         subscribe: () => () => undefined
     };
 }
-export function cssEasing(easing) {
-    return typeof easing === "string" ? easing : `cubic-bezier(${easing.join(", ")})`;
-}
+// Every motion with animations off: it takes no time, so its curve never shows.
+const still = Object.freeze({ duration: 0, easing: "linear" });
 const defaultPreferences = Object.freeze({ theme: "light", animations: true });
 const subscribers = new Set();
 let darkPreference;

package/dist/grid-list.d.ts

@@ -8,6 +8,8 @@ type GridListRootBaseProps<T extends object> = Omit<AriaGridListProps<T>, "class
     className?: string;
     /** Color laid beneath selected Items. */
     color?: Color;
+    /** Color of Items that are not selected: `default` unless given. */
+    restColor?: Color;
     /** The narrowest an Item may be; the grid fits as many columns as that allows. Sixteen times the spacing by default. */
     itemWidth?: CSSProperties["width"];
     size?: ScaleLevel;
@@ -29,6 +31,8 @@ export interface GridListItemProps<T = object> extends Omit<AriaGridListItemProp
     readonly className?: string;
     /** Color laid beneath this Item when it is selected. */
     readonly color?: Color;
+    /** Color of this Item while it is not selected; the GridList's unless given. */
+    readonly restColor?: Color;
     readonly disabled?: boolean;
     readonly style?: CSSProperties;
 }

package/dist/grid-list.js

@@ -10,12 +10,12 @@ import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { collectionHeaderStyle } from "./list-box.js";
 const GridListStyleContext = createContext(null);
 const GridListRootImplementation = forwardRef(function GridList(properties, ref) {
-    const { className, color = "primary", defaultValue: _defaultValue, itemWidth, onChange: _onChange, radius, selectionMode: _selectionMode, size, style, value: _value, ...native } = properties;
+    const { className, color = "primary", restColor = "default", defaultValue: _defaultValue, itemWidth, onChange: _onChange, radius, selectionMode: _selectionMode, size, style, value: _value, ...native } = properties;
     const metrics = useControlMetrics(size, radius);
     const width = itemWidth ?? metrics.visual.spacing * 16;
     // As many columns as fit, each at least the Item width; a Section repeats the same columns.
     const columns = `repeat(auto-fill, minmax(min(${typeof width === "number" ? `${width}px` : width}, 100%), 1fr))`;
-    const context = useMemo(() => ({ color, metrics, columns }), [color, metrics, columns]);
+    const context = useMemo(() => ({ color, restColor, metrics, columns }), [color, restColor, metrics, columns]);
     const direction = resolveDirection(native.dir, useDirection());
     return _jsx(GridListStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaGridList, { ...native, ...ariaSelection(properties, "single"), ref: ref, dir: direction, layout: "grid", className: className, style: state => ({
                     display: "grid",
@@ -33,7 +33,7 @@ const GridListRootImplementation = forwardRef(function GridList(properties, ref)
                 }) }) }) });
 });
 /** One card. It holds whatever it is given, and shows a check in its corner when selected. */
-const GridListItemImplementation = forwardRef(function GridListItem({ children, className, color, disabled = false, style, textValue, ...properties }, ref) {
+const GridListItemImplementation = forwardRef(function GridListItem({ children, className, color, restColor, disabled = false, style, textValue, ...properties }, ref) {
     const inherited = useGridListStyle();
     const itemColor = color ?? inherited.color;
     const { metrics } = inherited;
@@ -46,9 +46,9 @@ const GridListItemImplementation = forwardRef(function GridListItem({ children,
                 focusVisible: state.isFocusVisible,
                 disabled: state.isDisabled
             }, metrics.radius),
-            // Unlike a list row, a card is a whole Surface: flat, in the default color at rest, in its
-            // selection color once selected, with the default material in both.
-            ...(state.isSelected || state.isDropTarget === true ? {} : { color: "default" }),
+            // Unlike a list row, a card is a whole Surface: flat, in its rest color, in its selection
+            // color once selected, with the default material in both.
+            ...(state.isSelected || state.isDropTarget === true ? {} : { color: restColor ?? inherited.restColor }),
             material: undefined
         })), style: {
             position: "relative",

package/dist/loading.d.ts

@@ -17,7 +17,7 @@ export interface LoadingProps extends Pick<ReadinessProps, "children" | "delay">
  * requirements are waited for without being shown.
  *
  * The loading fills the nearest positioned ancestor. It appears at once; when
- * everything is ready it fades out with the Appearance transaction and the
+ * everything is ready it fades out as a change in place and the
  * interface appears whole at once.
  */
 export declare function Loading({ children, delay, steps, className, style }: LoadingProps): import("react").JSX.Element;

package/dist/loading.js

@@ -15,7 +15,7 @@ import { Text } from "./typography.js";
  * requirements are waited for without being shown.
  *
  * The loading fills the nearest positioned ancestor. It appears at once; when
- * everything is ready it fades out with the Appearance transaction and the
+ * everything is ready it fades out as a change in place and the
  * interface appears whole at once.
  */
 export function Loading({ children, delay, steps = false, className, style }) {

package/dist/main.d.ts

@@ -4,10 +4,11 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
-export { appearanceLimits, defaultAppearance, type Appearance, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceRange, type AppearanceShadow, type AppearanceTransaction, type AppearanceUpdate, type Easing, type ThemedValue } from "./foundation/appearance.js";
+export { appearanceLimits, defaultAppearance, type Appearance, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceRange, type AppearanceShadow, type Transaction, type AppearanceUpdate, type Easing, type ThemedValue } from "./foundation/appearance.js";
 export { UIProvider, type UIProviderProps } from "./foundation/provider.js";
 export { DocumentTheme } from "./document-theme.js";
-export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./foundation/visual.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue, useTiming } from "./foundation/visual.js";
+export { timing, type MotionKind, type TimingOptions } from "./foundation/timing.js";
 export { useDirection, useDocumentDirection, type Direction } from "./foundation/direction.js";
 export type { Preferences, PreferencesUpdate, Theme } from "./foundation/preferences.js";
 export { Flex, type FlexProps } from "./flex.js";

package/dist/main.js

@@ -7,7 +7,8 @@
 export { appearanceLimits, defaultAppearance } from "./foundation/appearance.js";
 export { UIProvider } from "./foundation/provider.js";
 export { DocumentTheme } from "./document-theme.js";
-export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./foundation/visual.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue, useTiming } from "./foundation/visual.js";
+export { timing } from "./foundation/timing.js";
 export { useDirection, useDocumentDirection } from "./foundation/direction.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";

package/dist/tooltip.d.ts

@@ -5,7 +5,7 @@ import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open
 import { type Direction } from "./foundation/direction.js";
 import { type SurfaceOwnProps } from "./surface/surface.js";
 export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTriggerProps, "closeDelay" | "trigger">> & Readonly<{
-    /** Milliseconds the pointer rests on the trigger before the Tooltip opens: four Appearance transactions by default. */
+    /** Milliseconds the pointer rests on the trigger before the Tooltip opens: four changes in place by default. */
     delay?: number;
     /** Whether the Tooltip is prevented from opening. */
     disabled?: boolean;

package/dist/tooltip.js

@@ -9,11 +9,12 @@ import MotionStyle, { overlayMotionClass, overlayTransition } from "./foundation
 import { resolveDirectionalPlacement } from "./foundation/overlay-placement.js";
 import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
+import { timing } from "./foundation/timing.js";
 import { floatingShadow } from "./surface/shadow-options.js";
 import { Surface } from "./surface/surface.js";
 export function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }) {
-    // A pointer resting on a trigger for four Appearance transactions is asking what it is.
-    const rest = useVisual().appearance.transaction.duration * 4;
+    // A pointer resting on a trigger for four changes in place is asking what it is.
+    const rest = timing("change", { tempo: useVisual().appearance.tempo }).duration * 4;
     return _jsx(AriaTooltipTrigger, { ...ariaOpenState(state), delay: delay ?? rest, closeDelay: closeDelay, trigger: trigger, isDisabled: disabled, shouldCloseOnPress: closeOnPress, children: children });
 }
 export const TooltipTrigger = forwardRef(function TooltipTrigger(properties, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -57,7 +57,7 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@internationalized/date": "^3.12.3",
-    "@phreshos/core": "^0.1.67",
+    "@phreshos/core": "^0.1.69",
     "colorjs.io": "^0.7.1",
     "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",