@astryxdesign/core 0.7.9-canary.1fec9fa → 0.7.9-canary.2947be8

package/dist/Layout/LayoutPanel.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file LayoutPanel.tsx
  * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
- *   useScrollRegionProps, resizablePane.ts
+ *   useScrollRegionProps
  * @output Exports LayoutPanel component and LayoutPanelProps
  * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
  *   settings sidebars, detail panels, or any fixed-width side content.
@@ -14,7 +14,7 @@
 import type { AriaRole, ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
 import type { SizeValue, SpacingStep } from '../utils/types.js';
-import { type ResizableProps, type ResizableRegion } from '../Resizable/useResizable.js';
+import type { ResizableProps } from '../Resizable/useResizable.js';
 export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**
@@ -64,20 +64,20 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
      */
     width?: SizeValue;
     /**
-     * The output of `useResizable()`, or its `props`. When provided, the panel
-     * width is driven by the hook and a resize handle should be placed
-     * adjacent to this panel.
+     * Resize props from `useResizable()`. When provided, the panel width
+     * is driven by the hook and a resize handle should be placed adjacent
+     * to this panel.
      *
      * @example
      * ```
-     * const resizable = useResizable({ defaultSize: 250, minSize: 200 });
-     * <LayoutPanel resizable={resizable}>
+     * const sidebar = useResizable({ defaultSize: 250, minSize: 200 });
+     * <LayoutPanel resizable={sidebar.props}>
      *   <Navigation />
      * </LayoutPanel>
-     * <ResizeHandle resizable={resizable} />
+     * <ResizeHandle resizable={sidebar.props} />
      * ```
      */
-    resizable?: ResizableRegion | ResizableProps;
+    resizable?: ResizableProps;
 }
 /**
  * Sidebar or side panel for Layout. Use in the `start` slot for left navigation
@@ -107,7 +107,7 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
  * </LayoutContainer>
  * ```
  */
-export declare function LayoutPanel({ children, hasDivider, isScrollable, label, padding, role, width, resizable: resizableValue, xstyle, className, style, ref, ...props }: LayoutPanelProps): import("react").JSX.Element;
+export declare function LayoutPanel({ children, hasDivider, isScrollable, label, padding, role, width, resizable, xstyle, className, style, ref, ...props }: LayoutPanelProps): import("react").JSX.Element;
 export declare namespace LayoutPanel {
     var displayName: string;
 }

package/dist/Layout/LayoutPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,2BAA2B,CAAC;AA6FnC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EAAE,cAAc,EACzB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkIlB;yBAhJe,WAAW"}
+{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAmF9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoElB;yBAlFe,WAAW"}

package/dist/Layout/LayoutPanel.js

@@ -5,7 +5,7 @@
 /**
  * @file LayoutPanel.tsx
  * @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
- *   useScrollRegionProps, resizablePane.ts
+ *   useScrollRegionProps
  * @output Exports LayoutPanel component and LayoutPanelProps
  * @position Sidebar panel for Layout start/end slots. Use for navigation panels,
  *   settings sidebars, detail panels, or any fixed-width side content.
@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Layout.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
-import { use, useCallback, useRef, useState, useSyncExternalStore } from 'react';
+import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
@@ -24,15 +24,9 @@ import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useScrollRegionProps } from "../hooks/useScrollRegionProps.js";
 import { mergeProps } from "../utils/index.js";
-import { resizablePropsOf } from "../Resizable/useResizable.js";
-import { createResizablePaneLink, resizeHandleBeside } from "../Resizable/resizablePane.js";
-import { LayoutChangeSnapshot } from "../motion/LayoutChangeSnapshot.js";
-import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
-import { moveFocusLeftBehind, noteFocusWithin } from "../utils/focusReturn.js";
-import { useFocusLeavingChange } from "../utils/useFocusLeavingChange.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   panel: {
     kB7OPa: "x9f619",
@@ -100,7 +94,6 @@ const styles = {
     $$css: true
   }
 };
-const returnFalse = () => false;
 
 // Dynamic styles for sizing props
 const dynamicStyles = {
@@ -147,14 +140,13 @@ export function LayoutPanel({
   padding,
   role,
   width,
-  resizable: resizableValue,
+  resizable,
   xstyle,
   className,
   style,
   ref,
   ...props
 }) {
-  const resizable = resizableValue == null ? undefined : resizablePropsOf(resizableValue);
   const area = use(LayoutAreaContext);
   const {
     hasHeader,
@@ -164,43 +156,6 @@ export function LayoutPanel({
   // When resizable props are provided, use the hook-driven size
   const effectiveWidth = resizable ? resizable._size : width;
 
-  // With no `resizable`, a ResizeHandle beside the panel that has a region's
-  // props finds the panel and holds it collapsed with the region. The panel
-  // lends its element in its callback ref for that.
-  const [paneLink] = useState(createResizablePaneLink);
-  const isHeldCollapsed = useSyncExternalStore(paneLink.subscribe, paneLink.isCollapsed, returnFalse);
-  const isLentBeside = resizable == null;
-  const lendRef = useCallback(element => {
-    paneLink.attach(isLentBeside ? element : null);
-  }, [paneLink, isLentBeside]);
-
-  // A collapsing panel moves focus inside it to its ResizeHandle, through the
-  // focus-leaving sequence that disclosures share. It goes inert and hidden
-  // from assistive technology a commit later, so inert never drops that focus
-  // to the page. Opening drops both at once. The ResizeHandle beside it holds
-  // the region's collapse state, or else the `resizable` props hold it.
-  const elementRef = useRef(null);
-  const isRegionCollapsed = resizable == null ? isHeldCollapsed : resizable._isCollapsed;
-  const noteFocusBeforeCollapse = useFocusLeavingChange(isRegionCollapsed, wasCollapsed => wasCollapsed ? null : noteFocusWithin(elementRef.current), (noted, isCollapsed) => {
-    const panel = elementRef.current;
-    if (isCollapsed && panel != null) {
-      moveFocusLeftBehind(noted, paneLink.focusTarget() ?? resizeHandleBeside(panel, area), panel);
-    }
-  });
-  const [isSettledCollapsed, setIsSettledCollapsed] = useState(isRegionCollapsed);
-  if (!isRegionCollapsed && isSettledCollapsed) {
-    setIsSettledCollapsed(false);
-  }
-  // Syncs `inert` with the browser's focus: the panel goes inert only after
-  // this commit's focus move.
-  useIsomorphicLayoutEffect(() => {
-    if (isRegionCollapsed && !isSettledCollapsed) {
-      // eslint-disable-next-line @eslint-react/set-state-in-effect -- the panel goes inert only after the focus-leaving move above ran in this commit; inert in the collapsing commit would drop that focus to the page first
-      setIsSettledCollapsed(true);
-    }
-  }, [isRegionCollapsed, isSettledCollapsed]);
-  const isConcealed = isRegionCollapsed && isSettledCollapsed;
-
   // Determine panel position
   const isStartPanel = area === 'start';
   const isEndPanel = area === 'end';
@@ -213,14 +168,14 @@ export function LayoutPanel({
     role,
     label
   });
-  const mergedRef = useMergedRefs(ref, region.ref, elementRef, lendRef);
+  const mergedRef = useMergedRefs(ref, region.ref);
 
   // Select divider style based on position
   const dividerStyle = isStartPanel ? styles.dividerEnd : isEndPanel ? styles.dividerStart : null;
 
   // Select collapse style based on position (collapse the side where divider would be)
   const collapseStyle = isStartPanel ? styles.collapseEnd : isEndPanel ? styles.collapseStart : null;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: mergedRef,
     role: region.role,
     "aria-label": region['aria-label'],
@@ -228,14 +183,7 @@ export function LayoutPanel({
     // Outer padding on container edges (unless component is full bleed)
     isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
     ...props,
-    ...(isConcealed ? {
-      inert: true,
-      'aria-hidden': true
-    } : {}),
-    children: [/*#__PURE__*/_jsx(LayoutChangeSnapshot, {
-      value: isRegionCollapsed,
-      onBeforeChange: noteFocusBeforeCollapse
-    }), children]
+    children: children
   });
 }
 LayoutPanel.displayName = 'LayoutPanel';

package/dist/Resizable/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
-import { type ResizableProps, type ResizableRegion } from './useResizable.js';
+import { type ResizableProps } from './useResizable.js';
 type PillPlacement = 'start' | 'end' | 'center' | 'auto';
 export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'style'> {
     ref?: React.Ref<HTMLDivElement>;
@@ -57,8 +57,8 @@ export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'styl
      * @default 'Resize handle'
      */
     label?: string;
-    /** The output of `useResizable()`, or its `props`. */
-    resizable?: ResizableRegion | ResizableProps;
+    /** Resize props from useResizable region. */
+    resizable?: ResizableProps;
     /** Custom handle content. Overrides the default pill. */
     children?: ReactNode;
 }
@@ -72,12 +72,12 @@ export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'styl
  * @example
  * ```
  * <ResizeHandle
- *   resizable={resizable}
+ *   resizable={sidebar.props}
  *   direction="horizontal"
  *   hasDivider />
  * ```
  */
-export declare function ResizeHandle({ direction, position: positionMode, isReversed, isDisabled, hasDivider, isAlwaysVisible, pillPlacement, label: labelFromProps, resizable: resizableValue, children, xstyle, className, ref, ...props }: ResizeHandleProps): import("react").JSX.Element;
+export declare function ResizeHandle({ direction, position: positionMode, isReversed, isDisabled, hasDivider, isAlwaysVisible, pillPlacement, label: labelFromProps, resizable, children, xstyle, className, ref, ...props }: ResizeHandleProps): import("react").JSX.Element;
 export declare namespace ResizeHandle {
     var displayName: string;
 }

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AA4BxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sDAAsD;IACtD,SAAS,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAE7C,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,cAAc,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAyVnB;yBAxWe,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAmBxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAsSnB;yBArTe,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -11,21 +11,18 @@
  * A drag takes pointer capture on the element it starts on, so moves over an
  * embedded frame still arrive.
  */
-import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
-import { getCollapseControls, getEffectiveMaxPx, resizablePropsOf } from "./useResizable.js";
+import { getCollapseControls, getEffectiveMaxPx } from "./useResizable.js";
 import { createResizeGesture } from "./resizeGesture.js";
-import { handOverPane, registerResizeHandle, resizablePaneFor, watchResizablePanes } from "./resizablePane.js";
 import { separatorAttributes } from "./separatorAttributes.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
-import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
-import { useInteractionModalityTracking } from "../utils/interactionModality.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Resizable/ResizeHandle.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -280,7 +277,7 @@ const dynamicStyles = {
  * @example
  * ```
  * <ResizeHandle
- *   resizable={resizable}
+ *   resizable={sidebar.props}
  *   direction="horizontal"
  *   hasDivider />
  * ```
@@ -295,14 +292,13 @@ export function ResizeHandle({
   isAlwaysVisible = true,
   pillPlacement = 'auto',
   label: labelFromProps,
-  resizable: resizableValue,
+  resizable,
   children,
   xstyle,
   className,
   ref,
   ...props
 }) {
-  const resizable = resizableValue == null ? undefined : resizablePropsOf(resizableValue);
   const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef(null);
@@ -414,41 +410,6 @@ export function ResizeHandle({
     };
   }, [hasRegion, regionGesture]);
 
-  // --- The LayoutPanel beside a handle given `resizable` props ---
-
-  // A collapsing panel moves focus here, and the ring follows the last input.
-  const {
-    ref: modalityRef
-  } = useInteractionModalityTracking();
-  // A LayoutPanel at the region's size, with no `resizable` prop, has no
-  // controller to find it. This handle holds it collapsed with the region, so
-  // focus inside it moves here and it goes inert. A panel lent later is found
-  // at once.
-  const [, rerender] = useReducer(count => count + 1, 0);
-  const heldPaneRef = useRef(null);
-  // The element goes in the handle registry, for a collapsing panel beside it
-  // to hand focus to. When the element goes, a held panel opens.
-  const registryRef = useCallback(element => {
-    if (element == null) {
-      return;
-    }
-    const unregister = registerResizeHandle(element);
-    return () => {
-      unregister();
-      heldPaneRef.current = handOverPane(heldPaneRef.current, null, false, null);
-    };
-  }, []);
-  const isRegionCollapsed = resizable?._isCollapsed ?? false;
-  // Syncs with the lent-panel registry. A panel lent or taken back re-renders
-  // this handle, so it looks for its pane again.
-  useEffect(() => hasRegion ? watchResizablePanes(rerender) : undefined, [hasRegion]);
-  // Syncs the held panel with the region's collapse state after each commit.
-  useIsomorphicLayoutEffect(() => {
-    const element = handleRef.current;
-    const pane = hasRegion && element != null ? resizablePaneFor(element, isReversed) : null;
-    heldPaneRef.current = handOverPane(heldPaneRef.current, pane, isRegionCollapsed, element);
-  });
-
   // --- ARIA ---
   const sizeNow = resizable?._size;
   const minNow = resizable?._minSizePx;
@@ -490,7 +451,7 @@ export function ResizeHandle({
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    ref: useMergedRefs(ref, handleRef, registryRef, modalityRef),
+    ref: useMergedRefs(ref, handleRef),
     role: "separator",
     ...aria,
     "aria-label": label,

package/dist/Resizable/useResizable.d.ts

@@ -179,13 +179,6 @@ type CollapseControls = {
     collapse: () => void;
     expand: () => void;
 };
-/**
- * The props behind a component's `resizable` slot. It takes useResizable's
- * output directly, and still takes that output's `props`.
- */
-export declare function resizablePropsOf(value: ResizableRegion | ResizableProps): ResizableProps;
-/** Whether a `resizable` value is useResizable's output for one region. */
-export declare function isResizableRegion(value: unknown): value is ResizableRegion;
 /** The reported maximum for `props`, or `undefined` for a hand-built object. */
 export declare function getEffectiveMaxPx(props: ResizableProps): number | undefined;
 /**

package/dist/Resizable/useResizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/useResizable.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/useResizable.ts"],"names":[],"mappings":"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"}

package/dist/Resizable/useResizable.js

@@ -176,19 +176,6 @@ const collapseControls = new WeakMap();
  */
 const effectiveMaxima = new WeakMap();
 
-/**
- * The props behind a component's `resizable` slot. It takes useResizable's
- * output directly, and still takes that output's `props`.
- */
-export function resizablePropsOf(value) {
-  return 'props' in value ? value.props : value;
-}
-
-/** Whether a `resizable` value is useResizable's output for one region. */
-export function isResizableRegion(value) {
-  return typeof value === 'object' && value !== null && 'props' in value;
-}
-
 /** The reported maximum for `props`, or `undefined` for a hand-built object. */
 export function getEffectiveMaxPx(props) {
   return effectiveMaxima.get(props);

package/dist/SideNav/SideNav.d.ts

@@ -21,7 +21,7 @@ import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
 import type { StyleXStyles } from '@stylexjs/stylex';
 import { type SideNavCollapsibleConfig, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext.js';
-import { type ResizableConfig, type ResizableRegion } from '../Resizable/useResizable.js';
+import type { ResizableConfig } from '../Resizable/useResizable.js';
 export interface SideNavProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;
@@ -94,18 +94,12 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
      *   - `defaultIsCollapsed` / `isCollapsed` / `onCollapseChange` — collapse
      *     state, when `resizable` should own it rather than `collapsible`
      *
-     * - `useResizable()`'s output — the caller's region owns the width and the
-     *   collapse state. The rail follows its `isCollapsed`, the toggle calls
-     *   its `collapse` and `expand`, and its `autoSaveId` saves the width.
-     *   The region's own `collapsible` option also decides whether the rail
-     *   collapses
-     *
      * When both props carry collapse state, `resizable` wins and a dev warning
      * names the conflicting keys.
      *
      * @default false
      */
-    resizable?: boolean | ResizableConfig | ResizableRegion;
+    resizable?: boolean | ResizableConfig;
     /**
      * Enables collapse behavior. The sidebar can be collapsed to a narrow
      * icon-only toolbar.
@@ -140,7 +134,7 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
  * </SideNav>
  * ```
  */
-export declare function SideNav({ header, topContent, children, footer, footerIcons, collapsible: collapsibleProp, resizable, xstyle, className, style, 'data-testid': testId, ref, handleRef, ...props }: SideNavProps): import("react").JSX.Element;
+export declare function SideNav({ header, topContent, children, footer, footerIcons, collapsible, resizable, xstyle, className, style, 'data-testid': testId, ref, handleRef, ...props }: SideNavProps): import("react").JSX.Element;
 export declare namespace SideNav {
     var displayName: string;
 }

package/dist/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAIlC,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,2BAA2B,CAAC;AAmUnC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,eAAe,CAAC;IAExD;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;AAyBD;;;;;;;;;;;;;;;;;GAiBG;AAEH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EAAE,eAAe,EAC5B,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAghBd;yBA/hBe,OAAO"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAmR/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;AAyBD;;;;;;;;;;;;;;;;;GAiBG;AAEH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BA8fd;yBA7gBe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -30,7 +30,7 @@ import { SideNavCollapseContext } from "./SideNavCollapseContext.js";
 import { SideNavCollapseButton } from "./SideNavCollapseButton.js";
 import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { MobileNav } from "../MobileNav/MobileNav.js";
-import { isResizableRegion, useResizable } from "../Resizable/useResizable.js";
+import { useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
 import { SizeProvider } from "../SizeContext/SizeContext.js";
@@ -93,33 +93,6 @@ function describeCollapseConflict(collapsible, resizable) {
   return `${collapsibleKeys.map(key => `collapsible.${key}`).join(', ')} and ` + `${resizableKeys.map(key => `resizable.${key}`).join(', ')} address the ` + `same collapse state. resizable wins; the collapsible ` + `${collapsibleKeys.length === 1 ? 'value is' : 'values are'} ignored.`;
 }
 
-/**
- * The collapse config when `resizable` is useResizable's output. The region
- * owns the collapse state and decides whether the rail collapses. A
- * `collapsible` prop that sets state or disagrees is ignored and named in a
- * development warning.
- */
-function resolveRegionCollapseConfig(collapsible, region) {
-  const fromCollapsible = typeof collapsible === 'object' ? collapsible : {};
-  const ignoredKeys = [fromCollapsible.defaultIsCollapsed !== undefined && 'defaultIsCollapsed', fromCollapsible.isCollapsed !== undefined && 'isCollapsed', fromCollapsible.onCollapsedChange !== undefined && 'onCollapsedChange'].filter(key => key !== false);
-  // The region's own `collapsible` option decides whether the rail collapses.
-  const isRegionCollapsible = region.props._collapsible ?? false;
-  const conflicts = [];
-  if (ignoredKeys.length > 0) {
-    conflicts.push(`\`collapsible\` sets ${ignoredKeys.map(key => `\`${key}\``).join(', ')}, ` + 'which the rail ignores: it follows the region.');
-  }
-  if (collapsible !== undefined && Boolean(collapsible) !== isRegionCollapsible) {
-    conflicts.push(isRegionCollapsible ? '`collapsible` is false, but the region is collapsible, so the rail still collapses.' : '`collapsible` turns collapse on, but the region is not collapsible, so the rail never collapses.');
-  }
-  return {
-    isCollapsible: isRegionCollapsible,
-    defaultIsCollapsed: region.isCollapsed,
-    isCollapsed: undefined,
-    onCollapsedChange: undefined,
-    conflict: conflicts.length === 0 ? null : "`resizable` is useResizable's output, which owns the collapse " + `state and decides whether the rail collapses. ${conflicts.join(' ')}`
-  };
-}
-
 // =============================================================================
 // Styles
 // =============================================================================
@@ -205,7 +178,7 @@ export function SideNav({
   children,
   footer,
   footerIcons,
-  collapsible: collapsibleProp,
+  collapsible = false,
   resizable = false,
   xstyle,
   className,
@@ -216,19 +189,14 @@ export function SideNav({
   ...props
 }) {
   const t = useComponentTranslator();
-  // Only a left-out `collapsible` becomes false, as before; `??` would also
-  // turn null into false.
-  const collapsible = collapsibleProp === undefined ? false : collapsibleProp;
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
   const hasCollapseButton = collapsibleConfig.hasButton ?? true;
 
-  // useResizable's output: the caller's region owns the width and collapse.
-  const ownerRegion = isResizableRegion(resizable) ? resizable : null;
   // Resizable config
-  const resizableConfig = typeof resizable === 'object' && !isResizableRegion(resizable) ? resizable : {};
+  const resizableConfig = typeof resizable === 'object' ? resizable : {};
   const isResizable = !!resizable;
-  const collapseConfig = ownerRegion == null ? resolveCollapseConfig(collapsible, isResizableRegion(resizable) ? false : resizable) : resolveRegionCollapseConfig(collapsibleProp, ownerRegion);
+  const collapseConfig = resolveCollapseConfig(collapsible, resizable);
   const {
     isCollapsible,
     onCollapsedChange
@@ -268,8 +236,6 @@ export function SideNav({
 
   // useResizable is the sole collapse owner in every SideNav mode. Keeping that
   // owner mounted when resize is toggled preserves the current collapse state.
-  // Given the hook's output, the caller's region is the owner, and this one
-  // stays idle.
   const resizableHook = useResizable({
     defaultSize: resizableConfig.defaultWidth ?? 260,
     minSize: resizableConfig.minWidth ?? 180,
@@ -282,10 +248,7 @@ export function SideNav({
     onSizeChange: resizableConfig.onWidthChange,
     onCollapseChange: onCollapsedChange
   });
-
-  // The region that sizes the rail: the caller's, or SideNav's own.
-  const region = ownerRegion ?? resizableHook;
-  const collapsed = region.isCollapsed;
+  const collapsed = resizableHook.isCollapsed;
 
   // A collapse or expand plays the rail's motion, except an app's change
   // before the rail's first paint. It is measured in the commit before the
@@ -441,11 +404,11 @@ export function SideNav({
       isCollapsed: next
     };
     if (next) {
-      region.collapse();
+      resizableHook.collapse();
     } else {
-      region.expand();
+      resizableHook.expand();
     }
-  }, [collapsed, region]);
+  }, [collapsed, resizableHook]);
   const showResizeHandle = isResizable && !collapsed;
   collapseStateRef.current = {
     isCollapsed: collapsed,
@@ -552,7 +515,7 @@ export function SideNav({
   // When resizable, override the nav width via inline style
   const resizableNavStyle = isResizable ? {
     ...(style ?? {}),
-    width: collapsed ? undefined : region.size
+    width: collapsed ? undefined : resizableHook.size
   } : style;
   const navElement = /*#__PURE__*/_jsxs("nav", {
     ref: mergedNavRef,
@@ -650,7 +613,7 @@ export function SideNav({
       pillPlacement: "end",
       isAlwaysVisible: false,
       xstyle: styles.resizableHandle,
-      resizable: ownerRegion ?? resizableHook.props,
+      resizable: resizableHook.props,
       label: t('@astryx.sideNav.resizeSidebar'),
       "aria-controls": navId
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.9-canary.1fec9fa",
+  "version": "0.7.9-canary.2947be8",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -880,9 +880,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.9-canary.1fec9fa",
-    "@astryxdesign/cli": "0.7.9-canary.1fec9fa",
-    "@astryxdesign/interaction-harness": "0.7.9-canary.1fec9fa",
+    "@astryxdesign/a11y-spec": "0.7.9-canary.2947be8",
+    "@astryxdesign/cli": "0.7.9-canary.2947be8",
+    "@astryxdesign/interaction-harness": "0.7.9-canary.2947be8",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Layout/LayoutPanel.doc.mjs

@@ -65,13 +65,13 @@ export const docs = {
       name: 'width',
       type: 'number | string',
       description:
-        "Width of the panel. Numbers are treated as pixels, strings are used as-is. Ignored when resizable is provided; the hook controls width. Beside a ResizeHandle given a useResizable region's props, a panel at width={region.size} is inert while the region is collapsed, and focus inside it moves to the handle as it collapses.",
+        'Width of the panel. Numbers are treated as pixels, strings are used as-is. Ignored when resizable is provided; the hook controls width.',
     },
     {
       name: 'resizable',
-      type: 'ResizableRegion | ResizableProps',
+      type: 'ResizableProps',
       description:
-        "The output of useResizable(), or its props. When provided, the hook drives the panel width and a ResizeHandle should be placed adjacent to the panel. Carries the region's axis ('horizontal' | 'vertical'), which must match the adjacent ResizeHandle's direction. Focus inside the panel moves to its ResizeHandle as it collapses, and the panel is inert while collapsed.",
+        "Resize props from useResizable(). When provided, the hook drives the panel width and a ResizeHandle should be placed adjacent to the panel. Carries the region's axis ('horizontal' | 'vertical'), which must match the adjacent ResizeHandle's direction.",
     },
   ],
 };
@@ -119,13 +119,13 @@ export const docsZh = {
       name: 'width',
       type: 'number | string',
       description:
-        '面板宽度。数字按像素处理，字符串按原样使用。提供 resizable 时忽略，宽度由 hook 控制。放在接收 useResizable 区域 props 的 ResizeHandle 旁边、以 width={region.size} 渲染时，区域折叠期间面板为 inert，折叠时面板内的焦点移到手柄上。',
+        '面板宽度。数字按像素处理，字符串按原样使用。提供 resizable 时忽略，宽度由 hook 控制。',
     },
     {
       name: 'resizable',
-      type: 'ResizableRegion | ResizableProps',
+      type: 'ResizableProps',
       description:
-        "useResizable() 的返回值或其 props。提供时面板宽度由 hook 驱动，应在面板旁放置 ResizeHandle。其中携带区域的轴向（'horizontal' | 'vertical'），必须与相邻 ResizeHandle 的 direction 一致。折叠时面板内的焦点会移到其 ResizeHandle 上，折叠期间面板为 inert。",
+        "来自 useResizable() 的调整大小属性。提供时面板宽度由 hook 驱动，应在面板旁放置 ResizeHandle。其中携带区域的轴向（'horizontal' | 'vertical'），必须与相邻 ResizeHandle 的 direction 一致。",
     },
   ],
 };
@@ -145,8 +145,8 @@ export const docsDense = {
       'Accessible label for landmark element; also names the region while it scrolls (default "Content").',
     role: 'ARIA landmark role.',
     width:
-      'Panel width. Numbers = pixels, strings as-is. Ignored when resizable provided; hook controls width. width={region.size} beside a ResizeHandle given the region props: inert while collapsed; focus inside moves to the handle on collapse.',
+      'Panel width. Numbers = pixels, strings as-is. Ignored when resizable provided; hook controls width.',
     resizable:
-      'useResizable() output or its props. Hook drives panel width; place ResizeHandle adjacent. Focus inside moves to the handle on collapse; inert while collapsed.',
+      'Resize props from useResizable(). Hook drives panel width; place ResizeHandle adjacent.',
   },
 };