@octanejs/base-ui 0.1.10 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.10",
+  "version": "0.1.14",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -38,22 +38,22 @@
     "./*": "./src/*.ts"
   },
   "dependencies": {
-    "@floating-ui/utils": "^0.2.11",
+    "@floating-ui/utils": "^0.2.12",
     "aria-hidden": "^1.2.6",
     "tabbable": "^6.5.0",
-    "@octanejs/floating-ui": "0.1.11"
+    "@octanejs/floating-ui": "0.1.15"
   },
   "peerDependencies": {
-    "octane": "0.1.12"
+    "octane": "0.1.16"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
-    "@tsrx/react": "^0.2.44",
+    "@tsrx/react": "^0.2.50",
     "esbuild": "^0.28.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "vitest": "^4.1.9",
-    "octane": "0.1.12"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "vitest": "^4.1.10",
+    "octane": "0.1.16"
   },
   "scripts": {
     "test": "vitest run"

package/src/slider.ts

@@ -12,6 +12,8 @@
 // React hydration-warning no-op). With the default `center` alignment, thumb/indicator positions
 // are pure math (`valueToPercent`), so mount and keyboard interaction render identically without
 // layout (pointer drag needs real layout — inert in jsdom, so not differential-covered).
+// Edge-aligned visibility uses octane's real server/hydration snapshot; the
+// React-specific pre-hydration script is not needed for that snapshot contract.
 import {
 	createContext,
 	createElement,
@@ -1016,7 +1018,7 @@ function SliderIndicator(componentProps: any): any {
 	const { render, className, style: styleProp, ref, ...elementProps } = componentProps;
 	const { indicatorPosition, inset, max, min, orientation, renderBeforeHydration, state, values } =
 		useSliderRootContext();
-	const isHydrating = useIsHydrating();
+	const isHydrating = useIsHydrating(subSlot(slot, 'hydrating'));
 	const vertical = orientation === 'vertical';
 	const range = values.length > 1;
 
@@ -1180,7 +1182,7 @@ function SliderThumb(componentProps: any): any {
 		undefined,
 		subSlot(slot, 'posPct'),
 	);
-	const isHydrating = useIsHydrating();
+	const isHydrating = useIsHydrating(subSlot(slot, 'hydrating'));
 
 	const safeLastUsedThumbIndex =
 		lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;

package/src/utils/floating/useDismiss.ts

@@ -57,9 +57,7 @@ export interface UseDismissProps {
 		| (() => PressType | { mouse: PressType; touch: PressType })
 		| undefined;
 	bubbles?:
-		| boolean
-		| { escapeKey?: boolean | undefined; outsidePress?: boolean | undefined }
-		| undefined;
+		boolean | { escapeKey?: boolean | undefined; outsidePress?: boolean | undefined } | undefined;
 	externalTree?: FloatingTreeStore | undefined;
 }
 

package/src/utils/number/types.ts

@@ -2,11 +2,7 @@
 export type Direction = -1 | 1;
 
 export type DirectionalChangeReason =
-	| 'increment-press'
-	| 'decrement-press'
-	| 'wheel'
-	| 'scrub'
-	| 'keyboard';
+	'increment-press' | 'decrement-press' | 'wheel' | 'scrub' | 'keyboard';
 
 export interface ChangeEventCustomProperties {
 	direction?: Direction;

package/src/utils/popupStateMapping.ts

@@ -38,11 +38,11 @@ export const pressableTriggerOpenStateMapping: StateAttributesMapping<{ open: bo
 	},
 };
 
-export const popupStateMapping: StateAttributesMapping<{ open: boolean; anchorHidden: boolean }> = {
+export const popupStateMapping = {
 	open(value: boolean) {
 		return value ? POPUP_OPEN_HOOK : POPUP_CLOSED_HOOK;
 	},
 	anchorHidden(value: boolean) {
 		return value ? ANCHOR_HIDDEN_HOOK : null;
 	},
-};
+} satisfies StateAttributesMapping<{ open: boolean; anchorHidden: boolean }>;

package/src/utils/useIsHydrating.ts

@@ -1,9 +1,26 @@
-// Ported from .base-ui/packages/react/src/utils/useIsHydrating.ts. React drives this via
-// `useSyncExternalStore` (server snapshot `true`, client snapshot `false`) so the first client
-// paint of a hydrated tree matches the server, then flips to `false`. octane's binding renders
-// client-only in these tests, so a fresh mount is never hydrating — returns `false`. It only
-// gates the `thumbAlignment: 'edge'` pre-hydration visibility path (inert for the default
-// `center` alignment).
-export function useIsHydrating(): boolean {
+// Ported from Base UI's useIsHydrating: the server snapshot must also be used
+// for the first hydration render so layout-dependent slider styles are adopted
+// before the client snapshot makes the hydrated controls visible.
+import { useSyncExternalStore } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+
+function subscribe(): () => void {
+	return () => {};
+}
+
+function getSnapshot(): boolean {
 	return false;
 }
+
+function getServerSnapshot(): boolean {
+	return true;
+}
+
+export function useIsHydrating(): boolean;
+export function useIsHydrating(slot: symbol | undefined): boolean;
+export function useIsHydrating(...args: unknown[]): boolean {
+	const [, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useIsHydrating');
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot, subSlot(slot, 'store'));
+}

package/src/utils/useRenderElement.ts

@@ -27,8 +27,7 @@ import { mergeProps, mergePropsN, mergeClassNames } from './mergeProps';
 const EMPTY_OBJECT: Record<string, any> = {};
 
 export type RenderProp<State> =
-	| ((props: Record<string, any>, state: State) => any)
-	| any /* element descriptor */;
+	((props: Record<string, any>, state: State) => any) | any; /* element descriptor */
 
 export interface UseRenderElementComponentProps<State> {
 	className?: string | ((state: State) => string | undefined);