@astryxdesign/core 0.7.9-canary.f1f92c3 → 0.7.9-canary.f9281ef

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,EAEL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,2BAA2B,CAAC;AAmGnC,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,+BA0IlB;yBAxJe,WAAW"}

package/dist/Layout/LayoutPanel.js

@@ -79,6 +79,12 @@ const styles = {
     kVQacm: "xysyzu8",
     $$css: true
   },
+  zeroWidth: {
+    kZCmMZ: "x1c1uobl",
+    kwRFfy: "xyri2b",
+    kVQacm: "x7giv3",
+    $$css: true
+  },
   dividerEnd: {
     ke9TFa: "x1lun4ml",
     k8ry5P: "x18b5jzi",
@@ -205,11 +211,14 @@ export function LayoutPanel({
   const isStartPanel = area === 'start';
   const isEndPanel = area === 'end';
   const isZeroPadding = padding === 0;
+  // A collapsed region sizes its panel to 0.
+  const isZeroWidth = effectiveWidth === 0;
 
   // When no divider, collapse spacing for seamless visual flow
-  const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null;
+  const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null && !isZeroWidth;
+  // At width 0 the panel clips its content, so it does not scroll.
   const region = useScrollRegionProps({
-    isScrollable,
+    isScrollable: isScrollable && !isZeroWidth,
     role,
     label
   });
@@ -226,7 +235,7 @@ export function LayoutPanel({
     "aria-label": region['aria-label'],
     ...mergeProps(themeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
     // 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),
+    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, isZeroWidth && styles.zeroWidth, xstyle), className, style),
     ...props,
     ...(isConcealed ? {
       inert: true,

package/dist/OverflowList/OverflowList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowList.d.ts","sourceRoot":"","sources":["../../src/OverflowList/OverflowList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAgFhD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAE3C;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,SAAS,CAAC;IAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAO,EACP,eAAmB,EACnB,eAAe,EACf,OAAO,EACP,YAAoB,EACpB,QAAwB,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAsInB;yBArJe,YAAY"}
+{"version":3,"file":"OverflowList.d.ts","sourceRoot":"","sources":["../../src/OverflowList/OverflowList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAgFhD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IAE3C;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,SAAS,CAAC;IAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAO,EACP,eAAmB,EACnB,eAAe,EACf,OAAO,EACP,YAAoB,EACpB,QAAwB,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA4InB;yBA3Je,YAAY"}

package/dist/OverflowList/OverflowList.js

@@ -21,7 +21,7 @@ import { Children, useCallback, useRef, useState } from 'react';
 import { isRenderable } from "../utils/isRenderable.js";
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
-import { useOverflow } from "../hooks/useOverflow.js";
+import { useOverflowInternal } from "../hooks/useOverflow.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
@@ -176,19 +176,24 @@ export function OverflowList({
   const gapPx = spacingToPx[gap];
   const observeParent = behavior === 'observeParent';
   const isMultiRow = maxRows != null && maxRows > 1;
+
+  // Only the multi-row path renders from `rowHeight` (it caps the
+  // container's height), so only that path tracks it.
   const {
     containerRef,
     measureRef,
     visibleCount,
     hasOverflow,
     rowHeight
-  } = useOverflow(itemCount, {
+  } = useOverflowInternal(itemCount, {
     gap: gapPx,
     minVisibleItems,
     maxVisibleItems,
     maxRows,
     collapseFrom,
     behavior
+  }, {
+    tracksRows: isMultiRow
   });
   const allItems = childArray.map((child, index) => ({
     child,

package/dist/Resizable/resizablePane.d.ts

@@ -29,8 +29,6 @@ export declare function watchResizablePanes(listener: () => void): () => void;
  * The pane a resize handle resizes: the lent LayoutPanel just before it, or
  * just after it when the region is reversed.
  */
-export declare function resizablePaneBeside(handle: Element, side: 'before' | 'after'): ResizablePane | null;
-/** The lent panel a handle sizes: before it, or after it when reversed. */
 export declare function resizablePaneFor(handle: Element, isReversed: boolean): ResizablePane | null;
 /**
  * Moves a handle's hold from `held` to `next`, and returns `next`. A pane the

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

@@ -1 +1 @@
-{"version":3,"file":"resizablePane.d.ts","sourceRoot":"","sources":["../../src/Resizable/resizablePane.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,2DAA2D;AAC3D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B;;;;OAIG;IACH,YAAY,CAAC,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3E;AAOD,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,CAKjE;AAQD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKpE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,QAAQ,GAAG,OAAO,GACvB,aAAa,GAAG,IAAI,CAMtB;AAED,2EAA2E;AAC3E,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,OAAO,GAClB,aAAa,GAAG,IAAI,CAEtB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,aAAa,GAAG,IAAI,CAMtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,WAAW,GAAG,IAAI,CAapB;AAED,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACzD,QAAQ,CAAC,WAAW,EAAE,MAAM,OAAO,CAAC;IACpC,iEAAiE;IACjE,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,uBAAuB,IAAI,iBAAiB,CAwD3D"}
+{"version":3,"file":"resizablePane.d.ts","sourceRoot":"","sources":["../../src/Resizable/resizablePane.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,2DAA2D;AAC3D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B;;;;OAIG;IACH,YAAY,CAAC,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3E;AAOD,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,CAKjE;AAQD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKpE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,OAAO,GAClB,aAAa,GAAG,IAAI,CAKtB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,aAAa,GAAG,IAAI,CAMtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,WAAW,GAAG,IAAI,CAapB;AAED,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACzD,QAAQ,CAAC,WAAW,EAAE,MAAM,OAAO,CAAC;IACpC,iEAAiE;IACjE,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,uBAAuB,IAAI,iBAAiB,CAwD3D"}

package/dist/Resizable/resizablePane.js

@@ -46,14 +46,9 @@ export function watchResizablePanes(listener) {
  * The pane a resize handle resizes: the lent LayoutPanel just before it, or
  * just after it when the region is reversed.
  */
-export function resizablePaneBeside(handle, side) {
-  const sibling = side === 'before' ? handle.previousElementSibling : handle.nextElementSibling;
-  return sibling == null ? null : lent.get(sibling) ?? null;
-}
-
-/** The lent panel a handle sizes: before it, or after it when reversed. */
 export function resizablePaneFor(handle, isReversed) {
-  return resizablePaneBeside(handle, isReversed ? 'after' : 'before');
+  const sibling = isReversed ? handle.nextElementSibling : handle.previousElementSibling;
+  return sibling == null ? null : lent.get(sibling) ?? null;
 }
 
 /**

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;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,+BA+gBd;yBA9hBe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -282,8 +282,6 @@ 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;
 

package/dist/hooks/useOverflow.d.ts

@@ -74,4 +74,14 @@ export interface UseOverflowReturn {
  * ```
  */
 export declare function useOverflow(itemCount: number, options?: UseOverflowOptions): UseOverflowReturn;
+/**
+ * `useOverflow` for a host inside Core that states whether it renders from
+ * `rows` and `rowHeight`. With `tracksRows` false, the hook does not track
+ * them and reports `rows: 1` and `rowHeight: 0`. A state write that nobody
+ * reads still re-renders the host. Internal: the public hook always tracks
+ * them.
+ */
+export declare function useOverflowInternal(itemCount: number, options: UseOverflowOptions, { tracksRows }: {
+    tracksRows: boolean;
+}): UseOverflowReturn;
 //# sourceMappingURL=useOverflow.d.ts.map

package/dist/hooks/useOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.d.ts","sourceRoot":"","sources":["../../src/hooks/useOverflow.ts"],"names":[],"mappings":"AAyBA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAC7C,wDAAwD;IACxD,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAC3C,wDAAwD;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,SAAS,EAAE,MAAM,CAAC;CACnB;AA6JD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAoOnB"}
+{"version":3,"file":"useOverflow.d.ts","sourceRoot":"","sources":["../../src/hooks/useOverflow.ts"],"names":[],"mappings":"AAyBA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAC7C,wDAAwD;IACxD,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAC3C,wDAAwD;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,SAAS,EAAE,MAAM,CAAC;CACnB;AA6JD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAEnB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kBAAkB,EAC3B,EAAC,UAAU,EAAC,EAAE;IAAC,UAAU,EAAE,OAAO,CAAA;CAAC,GAClC,iBAAiB,CA2OnB"}

package/dist/hooks/useOverflow.js

@@ -167,6 +167,21 @@ function observedSizeFollowsItems(list, observed) {
  * ```
  */
 export function useOverflow(itemCount, options = {}) {
+  return useOverflowInternal(itemCount, options, {
+    tracksRows: true
+  });
+}
+
+/**
+ * `useOverflow` for a host inside Core that states whether it renders from
+ * `rows` and `rowHeight`. With `tracksRows` false, the hook does not track
+ * them and reports `rows: 1` and `rowHeight: 0`. A state write that nobody
+ * reads still re-renders the host. Internal: the public hook always tracks
+ * them.
+ */
+export function useOverflowInternal(itemCount, options, {
+  tracksRows
+}) {
   const {
     gap = 0,
     minVisibleItems = 0,
@@ -199,6 +214,11 @@ export function useOverflow(itemCount, options = {}) {
       applied.visibleCount = nextVisible;
       setVisibleCount(nextVisible);
     }
+    // A host that does not track rows renders from neither value, so they
+    // are not written.
+    if (!tracksRows) {
+      return;
+    }
     if (applied.rows !== nextRows) {
       applied.rows = nextRows;
       setRows(nextRows);
@@ -207,7 +227,7 @@ export function useOverflow(itemCount, options = {}) {
       applied.rowHeight = nextRowHeight;
       setRowHeight(nextRowHeight);
     }
-  }, []);
+  }, [tracksRows]);
   const calculate = useCallback((timing = 'now') => {
     const container = containerElRef.current;
     const measure = measureElRef.current;
@@ -317,7 +337,9 @@ export function useOverflow(itemCount, options = {}) {
     measureRef,
     visibleCount,
     hasOverflow,
-    rows,
-    rowHeight
+    // A host that stops tracking keeps state from earlier measurements, so
+    // the return uses the fixed values.
+    rows: tracksRows ? rows : 1,
+    rowHeight: tracksRows ? rowHeight : 0
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.9-canary.f1f92c3",
+  "version": "0.7.9-canary.f9281ef",
   "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.f1f92c3",
-    "@astryxdesign/cli": "0.7.9-canary.f1f92c3",
-    "@astryxdesign/interaction-harness": "0.7.9-canary.f1f92c3",
+    "@astryxdesign/a11y-spec": "0.7.9-canary.f9281ef",
+    "@astryxdesign/cli": "0.7.9-canary.f9281ef",
+    "@astryxdesign/interaction-harness": "0.7.9-canary.f9281ef",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Layout/LayoutPanel.tsx

@@ -92,6 +92,12 @@ const styles = stylex.create({
   scrollable: {
     overflow: 'auto',
   },
+  // At width 0 the padding box is 0 too, so the clip hides every child.
+  zeroWidth: {
+    paddingInlineStart: 0,
+    paddingInlineEnd: 0,
+    overflow: 'clip',
+  },
   // For start panel: divider on end edge
   dividerEnd: {
     borderInlineEndWidth: 1,
@@ -307,11 +313,18 @@ export function LayoutPanel({
   const isEndPanel = area === 'end';
 
   const isZeroPadding = padding === 0;
+  // A collapsed region sizes its panel to 0.
+  const isZeroWidth = effectiveWidth === 0;
 
   // When no divider, collapse spacing for seamless visual flow
   const shouldCollapseSpacing =
-    !hasDivider && !isZeroPadding && padding == null;
-  const region = useScrollRegionProps({isScrollable, role, label});
+    !hasDivider && !isZeroPadding && padding == null && !isZeroWidth;
+  // At width 0 the panel clips its content, so it does not scroll.
+  const region = useScrollRegionProps({
+    isScrollable: isScrollable && !isZeroWidth,
+    role,
+    label,
+  });
   const mergedRef = useMergedRefs(ref, region.ref, elementRef, lendRef);
 
   // Select divider style based on position
@@ -354,6 +367,7 @@ export function LayoutPanel({
           padding != null && containerPaddingBlockEndVarStyles[padding],
           hasDivider && dividerStyle,
           shouldCollapseSpacing && collapseStyle,
+          isZeroWidth && styles.zeroWidth,
           xstyle,
         ),
         className,

package/src/OverflowList/OverflowList.tsx

@@ -31,7 +31,7 @@ import {isRenderable} from '../utils/isRenderable';
 import type {SpacingStep} from '../utils/types';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
-import {useOverflow} from '../hooks/useOverflow';
+import {useOverflowInternal} from '../hooks/useOverflow';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {spacingVars} from '../theme/tokens.stylex';
 import {themeProps} from '../utils/themeProps';
@@ -284,15 +284,21 @@ export function OverflowList({
   const observeParent = behavior === 'observeParent';
   const isMultiRow = maxRows != null && maxRows > 1;
 
+  // Only the multi-row path renders from `rowHeight` (it caps the
+  // container's height), so only that path tracks it.
   const {containerRef, measureRef, visibleCount, hasOverflow, rowHeight} =
-    useOverflow(itemCount, {
-      gap: gapPx,
-      minVisibleItems,
-      maxVisibleItems,
-      maxRows,
-      collapseFrom,
-      behavior,
-    });
+    useOverflowInternal(
+      itemCount,
+      {
+        gap: gapPx,
+        minVisibleItems,
+        maxVisibleItems,
+        maxRows,
+        collapseFrom,
+        behavior,
+      },
+      {tracksRows: isMultiRow},
+    );
 
   const allItems: OverflowItem[] = childArray.map((child, index) => ({
     child,

package/src/Resizable/resizablePane.ts

@@ -56,23 +56,14 @@ export function watchResizablePanes(listener: () => void): () => void {
  * The pane a resize handle resizes: the lent LayoutPanel just before it, or
  * just after it when the region is reversed.
  */
-export function resizablePaneBeside(
-  handle: Element,
-  side: 'before' | 'after',
-): ResizablePane | null {
-  const sibling =
-    side === 'before'
-      ? handle.previousElementSibling
-      : handle.nextElementSibling;
-  return sibling == null ? null : (lent.get(sibling) ?? null);
-}
-
-/** The lent panel a handle sizes: before it, or after it when reversed. */
 export function resizablePaneFor(
   handle: Element,
   isReversed: boolean,
 ): ResizablePane | null {
-  return resizablePaneBeside(handle, isReversed ? 'after' : 'before');
+  const sibling = isReversed
+    ? handle.nextElementSibling
+    : handle.previousElementSibling;
+  return sibling == null ? null : (lent.get(sibling) ?? null);
 }
 
 /**

package/src/SideNav/SideNav.tsx

@@ -621,7 +621,6 @@ export function SideNav({
     onCollapseChange: onCollapsedChange,
   });
 
-  // The region that sizes the rail: the caller's, or SideNav's own.
   const region = ownerRegion ?? resizableHook;
   const collapsed = region.isCollapsed;
 

package/src/hooks/useOverflow.ts

@@ -263,6 +263,21 @@ function observedSizeFollowsItems(
 export function useOverflow(
   itemCount: number,
   options: UseOverflowOptions = {},
+): UseOverflowReturn {
+  return useOverflowInternal(itemCount, options, {tracksRows: true});
+}
+
+/**
+ * `useOverflow` for a host inside Core that states whether it renders from
+ * `rows` and `rowHeight`. With `tracksRows` false, the hook does not track
+ * them and reports `rows: 1` and `rowHeight: 0`. A state write that nobody
+ * reads still re-renders the host. Internal: the public hook always tracks
+ * them.
+ */
+export function useOverflowInternal(
+  itemCount: number,
+  options: UseOverflowOptions,
+  {tracksRows}: {tracksRows: boolean},
 ): UseOverflowReturn {
   const {
     gap = 0,
@@ -303,6 +318,11 @@ export function useOverflow(
         applied.visibleCount = nextVisible;
         setVisibleCount(nextVisible);
       }
+      // A host that does not track rows renders from neither value, so they
+      // are not written.
+      if (!tracksRows) {
+        return;
+      }
       if (applied.rows !== nextRows) {
         applied.rows = nextRows;
         setRows(nextRows);
@@ -312,7 +332,7 @@ export function useOverflow(
         setRowHeight(nextRowHeight);
       }
     },
-    [],
+    [tracksRows],
   );
 
   const calculate: Measure = useCallback(
@@ -488,7 +508,9 @@ export function useOverflow(
     measureRef,
     visibleCount,
     hasOverflow,
-    rows,
-    rowHeight,
+    // A host that stops tracking keeps state from earlier measurements, so
+    // the return uses the fixed values.
+    rows: tracksRows ? rows : 1,
+    rowHeight: tracksRows ? rowHeight : 0,
   };
 }