concertina 0.4.1 → 0.5.0

package/dist/index.cjs

@@ -36,15 +36,19 @@ __export(index_exports, {
   Header: () => Header,
   Item: () => Item2,
   Root: () => Root3,
+  Slot: () => Slot,
+  StableSlot: () => StableSlot,
   Trigger: () => Trigger2,
   pinToScrollTop: () => pinToScrollTop,
   useConcertina: () => useConcertina,
-  useExpanded: () => useExpanded
+  useExpanded: () => useExpanded,
+  useStableSlot: () => useStableSlot,
+  useTransitionLock: () => useTransitionLock
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/root.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // node_modules/@radix-ui/react-accordion/dist/index.mjs
 var import_react3 = __toESM(require("react"), 1);
@@ -156,7 +160,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React3.forwardRef((props, forwardedRef) => {
+  const Slot22 = React3.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     const childrenArray = React3.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
@@ -174,8 +178,8 @@ function createSlot(ownerName) {
     }
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
 }
 // @__NO_SIDE_EFFECTS__
 function createSlotClone(ownerName) {
@@ -413,10 +417,10 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Slot = createSlot(`Primitive.${node}`);
+  const Slot3 = createSlot(`Primitive.${node}`);
   const Node2 = React7.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot : node;
+    const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
@@ -1010,7 +1014,6 @@ var import_react4 = require("react");
 var ConcertinaStore = class {
   constructor() {
     this._value = "";
-    this._switching = false;
     this._itemRefs = {};
     this._listeners = /* @__PURE__ */ new Set();
     this.subscribe = (listener) => {
@@ -1018,22 +1021,14 @@ var ConcertinaStore = class {
       return () => this._listeners.delete(listener);
     };
     this.getValue = () => this._value;
-    this.getSwitching = () => this._switching;
   }
   _notify() {
     for (const listener of this._listeners) listener();
   }
   setValue(newValue) {
-    const wasSwitching = !!this._value && this._value !== newValue && !!newValue;
-    this._switching = wasSwitching;
     this._value = newValue || "";
     this._notify();
   }
-  clearSwitching() {
-    if (!this._switching) return;
-    this._switching = false;
-    this._notify();
-  }
   getItemRef(id) {
     return this._itemRefs[id] ?? null;
   }
@@ -1073,36 +1068,44 @@ function pinToScrollTop(el) {
   }
 }
 
+// src/use-transition-lock.ts
+var import_react5 = require("react");
+function useTransitionLock() {
+  const [locked, setLocked] = (0, import_react5.useState)(false);
+  const lock = (0, import_react5.useCallback)(() => setLocked(true), []);
+  (0, import_react5.useEffect)(() => {
+    if (locked) setLocked(false);
+  }, [locked]);
+  return { locked, lock };
+}
+
 // src/root.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Root3 = (0, import_react5.forwardRef)(
+var Root3 = (0, import_react6.forwardRef)(
   function Root4({ collapsible = true, children, ...props }, forwardedRef) {
-    const storeRef = (0, import_react5.useRef)(null);
+    const storeRef = (0, import_react6.useRef)(null);
     if (!storeRef.current) {
       storeRef.current = new ConcertinaStore();
     }
     const store = storeRef.current;
-    const value = (0, import_react5.useSyncExternalStore)(
+    const value = (0, import_react6.useSyncExternalStore)(
       store.subscribe,
       store.getValue,
       store.getValue
     );
-    const switching = (0, import_react5.useSyncExternalStore)(
-      store.subscribe,
-      store.getSwitching,
-      store.getSwitching
-    );
-    const onValueChange = (0, import_react5.useCallback)(
-      (newValue) => store.setValue(newValue),
-      [store]
+    const { locked, lock } = useTransitionLock();
+    const onValueChange = (0, import_react6.useCallback)(
+      (newValue) => {
+        const isSwitching = !!store.getValue() && store.getValue() !== newValue && !!newValue;
+        if (isSwitching) lock();
+        store.setValue(newValue);
+      },
+      [store, lock]
     );
-    (0, import_react5.useLayoutEffect)(() => {
+    (0, import_react6.useLayoutEffect)(() => {
       if (!value) return;
       pinToScrollTop(store.getItemRef(value));
     }, [value, store]);
-    (0, import_react5.useEffect)(() => {
-      if (switching) store.clearSwitching();
-    }, [switching, store]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConcertinaContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Root2,
       {
@@ -1111,7 +1114,7 @@ var Root3 = (0, import_react5.forwardRef)(
         collapsible,
         value,
         onValueChange,
-        "data-switching": switching || void 0,
+        "data-switching": locked || void 0,
         ...props,
         children
       }
@@ -1120,11 +1123,11 @@ var Root3 = (0, import_react5.forwardRef)(
 );
 
 // src/item.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Item2 = (0, import_react6.forwardRef)(function Item3({ value, ...props }, forwardedRef) {
-  const store = (0, import_react6.useContext)(ConcertinaContext);
-  const mergedRef = (0, import_react6.useCallback)(
+var Item2 = (0, import_react7.forwardRef)(function Item3({ value, ...props }, forwardedRef) {
+  const store = (0, import_react7.useContext)(ConcertinaContext);
+  const mergedRef = (0, import_react7.useCallback)(
     (el) => {
       if (typeof forwardedRef === "function") {
         forwardedRef(el);
@@ -1139,17 +1142,17 @@ var Item2 = (0, import_react6.forwardRef)(function Item3({ value, ...props }, fo
 });
 
 // src/content.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Content3 = (0, import_react7.forwardRef)(function Content4({ className, ...props }, ref) {
+var Content3 = (0, import_react8.forwardRef)(function Content4({ className, ...props }, ref) {
   const merged = className ? `concertina-content ${className}` : "concertina-content";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Content2, { ref, className: merged, ...props });
 });
 
 // src/use-expanded.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useStore() {
-  const store = (0, import_react8.useContext)(ConcertinaContext);
+  const store = (0, import_react9.useContext)(ConcertinaContext);
   if (!store) {
     throw new Error("useExpanded must be used inside <Concertina.Root>");
   }
@@ -1157,7 +1160,7 @@ function useStore() {
 }
 function useExpanded(id) {
   const store = useStore();
-  return (0, import_react8.useSyncExternalStore)(
+  return (0, import_react9.useSyncExternalStore)(
     store.subscribe,
     () => store.getValue() === id,
     () => false
@@ -1165,13 +1168,106 @@ function useExpanded(id) {
   );
 }
 
+// src/stable-slot.tsx
+var import_react10 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AxisContext = (0, import_react10.createContext)("both");
+var StableSlot = (0, import_react10.forwardRef)(
+  function StableSlot2({ axis = "both", className, children, ...props }, ref) {
+    const merged = className ? `concertina-stable-slot ${className}` : "concertina-stable-slot";
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AxisContext.Provider, { value: axis, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: merged, ...props, children }) });
+  }
+);
+
+// src/slot.tsx
+var import_react11 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function inactiveStyle(axis) {
+  const base = { visibility: "hidden", overflow: "hidden" };
+  if (axis === "width") {
+    base.maxHeight = 0;
+  } else if (axis === "height") {
+    base.maxWidth = 0;
+  }
+  return base;
+}
+var Slot = (0, import_react11.forwardRef)(
+  function Slot2({ active, style, children, ...props }, ref) {
+    const axis = (0, import_react11.useContext)(AxisContext);
+    const merged = active ? { ...style } : { ...inactiveStyle(axis), ...style };
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        ref,
+        inert: !active || void 0,
+        style: merged,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/use-stable-slot.ts
+var import_react12 = require("react");
+function useStableSlot(options = {}) {
+  const { axis = "both" } = options;
+  const [style, setStyle] = (0, import_react12.useState)({});
+  const maxRef = (0, import_react12.useRef)({ w: 0, h: 0 });
+  const observerRef = (0, import_react12.useRef)(null);
+  const ref = (0, import_react12.useCallback)(
+    (el) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          let w;
+          let h;
+          if (entry.borderBoxSize?.length) {
+            const box = entry.borderBoxSize[0];
+            w = box.inlineSize;
+            h = box.blockSize;
+          } else {
+            const rect = entry.target.getBoundingClientRect();
+            w = rect.width;
+            h = rect.height;
+          }
+          const max = maxRef.current;
+          let grew = false;
+          if ((axis === "width" || axis === "both") && w > max.w) {
+            max.w = w;
+            grew = true;
+          }
+          if ((axis === "height" || axis === "both") && h > max.h) {
+            max.h = h;
+            grew = true;
+          }
+          if (grew) {
+            const next = {};
+            if (axis === "width" || axis === "both") next.minWidth = max.w;
+            if (axis === "height" || axis === "both") next.minHeight = max.h;
+            setStyle(next);
+          }
+        }
+      });
+      observer.observe(el, { box: "border-box" });
+      observerRef.current = observer;
+    },
+    [axis]
+  );
+  return { ref, style };
+}
+
 // src/use-concertina.ts
-var import_react9 = require("react");
+var import_react13 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react9.useState)("");
-  const [switching, setSwitching] = (0, import_react9.useState)(false);
-  const itemRefs = (0, import_react9.useRef)({});
-  const onValueChange = (0, import_react9.useCallback)(
+  const [value, setValue] = (0, import_react13.useState)("");
+  const [switching, setSwitching] = (0, import_react13.useState)(false);
+  const itemRefs = (0, import_react13.useRef)({});
+  const onValueChange = (0, import_react13.useCallback)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1183,14 +1279,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react9.useCallback)(
+  const getItemRef = (0, import_react13.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1211,8 +1307,12 @@ function useConcertina() {
   Header,
   Item,
   Root,
+  Slot,
+  StableSlot,
   Trigger,
   pinToScrollTop,
   useConcertina,
-  useExpanded
+  useExpanded,
+  useStableSlot,
+  useTransitionLock
 });

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
 import * as Accordion from '@radix-ui/react-accordion';
 export { Header, Trigger } from '@radix-ui/react-accordion';
 
@@ -23,24 +24,108 @@ type Listener = () => void;
 /**
  * External store for concertina accordion state.
  * Lives outside React — one instance per Root.
- * Subscribers get notified on value or switching changes.
+ * Holds value + item refs. Switching logic moved to useTransitionLock.
  */
 declare class ConcertinaStore {
     private _value;
-    private _switching;
     private _itemRefs;
     private _listeners;
     subscribe: (listener: Listener) => (() => void);
     private _notify;
     getValue: () => string;
-    getSwitching: () => boolean;
     setValue(newValue: string): void;
-    clearSwitching(): void;
     getItemRef(id: string): HTMLElement | null;
     setItemRef(id: string, el: HTMLElement | null): void;
 }
 declare const ConcertinaContext: react.Context<ConcertinaStore | null>;
 
+type Axis = "width" | "height" | "both";
+interface StableSlotProps extends HTMLAttributes<HTMLDivElement> {
+    /** Which axis to stabilize. Default: "both". */
+    axis?: Axis;
+}
+/**
+ * Grid container that auto-sizes to the largest child.
+ * All children overlap in the same grid cell (1/1).
+ * Use <Slot active={bool}> as children.
+ *
+ * Zero JS measurement — pure CSS grid sizing.
+ */
+declare const StableSlot: react.ForwardRefExoticComponent<StableSlotProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SlotProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether this slot is the active (visible) variant. */
+    active: boolean;
+}
+/**
+ * A single variant inside a <StableSlot>.
+ * All slots overlap via CSS grid. Inactive slots are hidden
+ * but still contribute to grid cell sizing.
+ *
+ * Five things work together:
+ * 1. grid-area: 1/1 — all slots overlap in the same cell
+ * 2. visibility: hidden — invisible but in layout flow
+ * 3. inert — no focus, no clicks, no screen reader
+ * 4. max-height/max-width: 0 — axis-aware collapse
+ * 5. overflow: hidden — prevents content bleed from collapsed axis
+ */
+declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UseStableSlotOptions {
+    /** Which axis to ratchet. Default: "both". */
+    axis?: Axis;
+}
+interface UseStableSlotReturn {
+    /** RefCallback — attach to the container element. */
+    ref: (el: HTMLElement | null) => void;
+    /** Spread onto the element: { minWidth?, minHeight? } */
+    style: CSSProperties;
+}
+/**
+ * ResizeObserver ratchet for dynamic content.
+ *
+ * Watches the element, tracks maximum width/height ever observed,
+ * applies min-width/min-height that only ratchets up.
+ *
+ * Five things work together:
+ * 1. ResizeObserver uses borderBoxSize — includes padding/border
+ * 2. Ratchet is one-way — max only increases, never resets
+ * 3. setStyle only called when ratchet grows — no infinite loops
+ * 4. RefCallback disconnects observer on unmount — no leak
+ * 5. SSR graceful no-op — typeof ResizeObserver guard
+ */
+declare function useStableSlot(options?: UseStableSlotOptions): UseStableSlotReturn;
+
+/**
+ * Suppress CSS transitions during batched state changes.
+ *
+ * Three things work together:
+ * 1. lock() sets the flag synchronously — batched with state changes in React 18
+ * 2. After DOM commit (useLayoutEffect window) — consumer does measurement/scroll/pin work
+ * 3. useEffect auto-clears the flag after paint — transitions re-enable
+ *
+ * Usage:
+ *   const { locked, lock } = useTransitionLock();
+ *   <div data-locked={locked || undefined}>...</div>
+ */
+declare function useTransitionLock(): {
+    readonly locked: boolean;
+    readonly lock: () => void;
+};
+
+/**
+ * Scroll `el` to the top of its nearest scrollable ancestor,
+ * clearing any sticky headers. Only adjusts one container's
+ * scrollTop. Never cascades to the viewport, which matters on
+ * mobile where scrollIntoView pulls the whole page.
+ *
+ * Skips elements that have overflow: auto/scroll in CSS but
+ * don't actually scroll (scrollHeight <= clientHeight). Without
+ * this check, a non-scrolling ancestor with overflow-auto traps
+ * the walk and the real scroll container never gets adjusted.
+ */
+declare function pinToScrollTop(el: HTMLElement | null): void;
+
 interface ConcertinaRootProps {
     value: string;
     onValueChange: (value: string) => void;
@@ -70,17 +155,4 @@ interface UseConcertinaReturn {
  */
 declare function useConcertina(): UseConcertinaReturn;
 
-/**
- * Scroll `el` to the top of its nearest scrollable ancestor,
- * clearing any sticky headers. Only adjusts one container's
- * scrollTop. Never cascades to the viewport, which matters on
- * mobile where scrollIntoView pulls the whole page.
- *
- * Skips elements that have overflow: auto/scroll in CSS but
- * don't actually scroll (scrollHeight <= clientHeight). Without
- * this check, a non-scrolling ancestor with overflow-auto traps
- * the walk and the real scroll container never gets adjusted.
- */
-declare function pinToScrollTop(el: HTMLElement | null): void;
-
-export { ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Item, Root, type UseConcertinaReturn, pinToScrollTop, useConcertina, useExpanded };
+export { type Axis, ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Item, Root, Slot, type SlotProps, StableSlot, type StableSlotProps, type UseConcertinaReturn, pinToScrollTop, useConcertina, useExpanded, useStableSlot, useTransitionLock };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
 import * as Accordion from '@radix-ui/react-accordion';
 export { Header, Trigger } from '@radix-ui/react-accordion';
 
@@ -23,24 +24,108 @@ type Listener = () => void;
 /**
  * External store for concertina accordion state.
  * Lives outside React — one instance per Root.
- * Subscribers get notified on value or switching changes.
+ * Holds value + item refs. Switching logic moved to useTransitionLock.
  */
 declare class ConcertinaStore {
     private _value;
-    private _switching;
     private _itemRefs;
     private _listeners;
     subscribe: (listener: Listener) => (() => void);
     private _notify;
     getValue: () => string;
-    getSwitching: () => boolean;
     setValue(newValue: string): void;
-    clearSwitching(): void;
     getItemRef(id: string): HTMLElement | null;
     setItemRef(id: string, el: HTMLElement | null): void;
 }
 declare const ConcertinaContext: react.Context<ConcertinaStore | null>;
 
+type Axis = "width" | "height" | "both";
+interface StableSlotProps extends HTMLAttributes<HTMLDivElement> {
+    /** Which axis to stabilize. Default: "both". */
+    axis?: Axis;
+}
+/**
+ * Grid container that auto-sizes to the largest child.
+ * All children overlap in the same grid cell (1/1).
+ * Use <Slot active={bool}> as children.
+ *
+ * Zero JS measurement — pure CSS grid sizing.
+ */
+declare const StableSlot: react.ForwardRefExoticComponent<StableSlotProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SlotProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether this slot is the active (visible) variant. */
+    active: boolean;
+}
+/**
+ * A single variant inside a <StableSlot>.
+ * All slots overlap via CSS grid. Inactive slots are hidden
+ * but still contribute to grid cell sizing.
+ *
+ * Five things work together:
+ * 1. grid-area: 1/1 — all slots overlap in the same cell
+ * 2. visibility: hidden — invisible but in layout flow
+ * 3. inert — no focus, no clicks, no screen reader
+ * 4. max-height/max-width: 0 — axis-aware collapse
+ * 5. overflow: hidden — prevents content bleed from collapsed axis
+ */
+declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UseStableSlotOptions {
+    /** Which axis to ratchet. Default: "both". */
+    axis?: Axis;
+}
+interface UseStableSlotReturn {
+    /** RefCallback — attach to the container element. */
+    ref: (el: HTMLElement | null) => void;
+    /** Spread onto the element: { minWidth?, minHeight? } */
+    style: CSSProperties;
+}
+/**
+ * ResizeObserver ratchet for dynamic content.
+ *
+ * Watches the element, tracks maximum width/height ever observed,
+ * applies min-width/min-height that only ratchets up.
+ *
+ * Five things work together:
+ * 1. ResizeObserver uses borderBoxSize — includes padding/border
+ * 2. Ratchet is one-way — max only increases, never resets
+ * 3. setStyle only called when ratchet grows — no infinite loops
+ * 4. RefCallback disconnects observer on unmount — no leak
+ * 5. SSR graceful no-op — typeof ResizeObserver guard
+ */
+declare function useStableSlot(options?: UseStableSlotOptions): UseStableSlotReturn;
+
+/**
+ * Suppress CSS transitions during batched state changes.
+ *
+ * Three things work together:
+ * 1. lock() sets the flag synchronously — batched with state changes in React 18
+ * 2. After DOM commit (useLayoutEffect window) — consumer does measurement/scroll/pin work
+ * 3. useEffect auto-clears the flag after paint — transitions re-enable
+ *
+ * Usage:
+ *   const { locked, lock } = useTransitionLock();
+ *   <div data-locked={locked || undefined}>...</div>
+ */
+declare function useTransitionLock(): {
+    readonly locked: boolean;
+    readonly lock: () => void;
+};
+
+/**
+ * Scroll `el` to the top of its nearest scrollable ancestor,
+ * clearing any sticky headers. Only adjusts one container's
+ * scrollTop. Never cascades to the viewport, which matters on
+ * mobile where scrollIntoView pulls the whole page.
+ *
+ * Skips elements that have overflow: auto/scroll in CSS but
+ * don't actually scroll (scrollHeight <= clientHeight). Without
+ * this check, a non-scrolling ancestor with overflow-auto traps
+ * the walk and the real scroll container never gets adjusted.
+ */
+declare function pinToScrollTop(el: HTMLElement | null): void;
+
 interface ConcertinaRootProps {
     value: string;
     onValueChange: (value: string) => void;
@@ -70,17 +155,4 @@ interface UseConcertinaReturn {
  */
 declare function useConcertina(): UseConcertinaReturn;
 
-/**
- * Scroll `el` to the top of its nearest scrollable ancestor,
- * clearing any sticky headers. Only adjusts one container's
- * scrollTop. Never cascades to the viewport, which matters on
- * mobile where scrollIntoView pulls the whole page.
- *
- * Skips elements that have overflow: auto/scroll in CSS but
- * don't actually scroll (scrollHeight <= clientHeight). Without
- * this check, a non-scrolling ancestor with overflow-auto traps
- * the walk and the real scroll container never gets adjusted.
- */
-declare function pinToScrollTop(el: HTMLElement | null): void;
-
-export { ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Item, Root, type UseConcertinaReturn, pinToScrollTop, useConcertina, useExpanded };
+export { type Axis, ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Item, Root, Slot, type SlotProps, StableSlot, type StableSlotProps, type UseConcertinaReturn, pinToScrollTop, useConcertina, useExpanded, useStableSlot, useTransitionLock };

package/dist/index.js

@@ -3,9 +3,8 @@ import {
   forwardRef as forwardRef4,
   useRef as useRef5,
   useLayoutEffect as useLayoutEffect3,
-  useEffect as useEffect5,
   useSyncExternalStore,
-  useCallback as useCallback5
+  useCallback as useCallback6
 } from "react";
 
 // node_modules/@radix-ui/react-accordion/dist/index.mjs
@@ -118,7 +117,7 @@ import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React3.forwardRef((props, forwardedRef) => {
+  const Slot22 = React3.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     const childrenArray = React3.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
@@ -136,8 +135,8 @@ function createSlot(ownerName) {
     }
     return /* @__PURE__ */ jsx2(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
 }
 // @__NO_SIDE_EFFECTS__
 function createSlotClone(ownerName) {
@@ -375,10 +374,10 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Slot = createSlot(`Primitive.${node}`);
+  const Slot3 = createSlot(`Primitive.${node}`);
   const Node2 = React7.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot : node;
+    const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
@@ -972,7 +971,6 @@ import { createContext as createContext3 } from "react";
 var ConcertinaStore = class {
   constructor() {
     this._value = "";
-    this._switching = false;
     this._itemRefs = {};
     this._listeners = /* @__PURE__ */ new Set();
     this.subscribe = (listener) => {
@@ -980,22 +978,14 @@ var ConcertinaStore = class {
       return () => this._listeners.delete(listener);
     };
     this.getValue = () => this._value;
-    this.getSwitching = () => this._switching;
   }
   _notify() {
     for (const listener of this._listeners) listener();
   }
   setValue(newValue) {
-    const wasSwitching = !!this._value && this._value !== newValue && !!newValue;
-    this._switching = wasSwitching;
     this._value = newValue || "";
     this._notify();
   }
-  clearSwitching() {
-    if (!this._switching) return;
-    this._switching = false;
-    this._notify();
-  }
   getItemRef(id) {
     return this._itemRefs[id] ?? null;
   }
@@ -1035,6 +1025,17 @@ function pinToScrollTop(el) {
   }
 }
 
+// src/use-transition-lock.ts
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
+function useTransitionLock() {
+  const [locked, setLocked] = useState5(false);
+  const lock = useCallback5(() => setLocked(true), []);
+  useEffect5(() => {
+    if (locked) setLocked(false);
+  }, [locked]);
+  return { locked, lock };
+}
+
 // src/root.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Root3 = forwardRef4(
@@ -1049,22 +1050,19 @@ var Root3 = forwardRef4(
       store.getValue,
       store.getValue
     );
-    const switching = useSyncExternalStore(
-      store.subscribe,
-      store.getSwitching,
-      store.getSwitching
-    );
-    const onValueChange = useCallback5(
-      (newValue) => store.setValue(newValue),
-      [store]
+    const { locked, lock } = useTransitionLock();
+    const onValueChange = useCallback6(
+      (newValue) => {
+        const isSwitching = !!store.getValue() && store.getValue() !== newValue && !!newValue;
+        if (isSwitching) lock();
+        store.setValue(newValue);
+      },
+      [store, lock]
     );
     useLayoutEffect3(() => {
       if (!value) return;
       pinToScrollTop(store.getItemRef(value));
     }, [value, store]);
-    useEffect5(() => {
-      if (switching) store.clearSwitching();
-    }, [switching, store]);
     return /* @__PURE__ */ jsx8(ConcertinaContext.Provider, { value: store, children: /* @__PURE__ */ jsx8(
       Root2,
       {
@@ -1073,7 +1071,7 @@ var Root3 = forwardRef4(
         collapsible,
         value,
         onValueChange,
-        "data-switching": switching || void 0,
+        "data-switching": locked || void 0,
         ...props,
         children
       }
@@ -1085,12 +1083,12 @@ var Root3 = forwardRef4(
 import {
   forwardRef as forwardRef5,
   useContext as useContext3,
-  useCallback as useCallback6
+  useCallback as useCallback7
 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Item2 = forwardRef5(function Item3({ value, ...props }, forwardedRef) {
   const store = useContext3(ConcertinaContext);
-  const mergedRef = useCallback6(
+  const mergedRef = useCallback7(
     (el) => {
       if (typeof forwardedRef === "function") {
         forwardedRef(el);
@@ -1131,19 +1129,118 @@ function useExpanded(id) {
   );
 }
 
+// src/stable-slot.tsx
+import {
+  forwardRef as forwardRef7,
+  createContext as createContext4
+} from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var AxisContext = createContext4("both");
+var StableSlot = forwardRef7(
+  function StableSlot2({ axis = "both", className, children, ...props }, ref) {
+    const merged = className ? `concertina-stable-slot ${className}` : "concertina-stable-slot";
+    return /* @__PURE__ */ jsx11(AxisContext.Provider, { value: axis, children: /* @__PURE__ */ jsx11("div", { ref, className: merged, ...props, children }) });
+  }
+);
+
+// src/slot.tsx
+import {
+  forwardRef as forwardRef8,
+  useContext as useContext5
+} from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function inactiveStyle(axis) {
+  const base = { visibility: "hidden", overflow: "hidden" };
+  if (axis === "width") {
+    base.maxHeight = 0;
+  } else if (axis === "height") {
+    base.maxWidth = 0;
+  }
+  return base;
+}
+var Slot = forwardRef8(
+  function Slot2({ active, style, children, ...props }, ref) {
+    const axis = useContext5(AxisContext);
+    const merged = active ? { ...style } : { ...inactiveStyle(axis), ...style };
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref,
+        inert: !active || void 0,
+        style: merged,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/use-stable-slot.ts
+import { useState as useState6, useCallback as useCallback8, useRef as useRef6 } from "react";
+function useStableSlot(options = {}) {
+  const { axis = "both" } = options;
+  const [style, setStyle] = useState6({});
+  const maxRef = useRef6({ w: 0, h: 0 });
+  const observerRef = useRef6(null);
+  const ref = useCallback8(
+    (el) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          let w;
+          let h;
+          if (entry.borderBoxSize?.length) {
+            const box = entry.borderBoxSize[0];
+            w = box.inlineSize;
+            h = box.blockSize;
+          } else {
+            const rect = entry.target.getBoundingClientRect();
+            w = rect.width;
+            h = rect.height;
+          }
+          const max = maxRef.current;
+          let grew = false;
+          if ((axis === "width" || axis === "both") && w > max.w) {
+            max.w = w;
+            grew = true;
+          }
+          if ((axis === "height" || axis === "both") && h > max.h) {
+            max.h = h;
+            grew = true;
+          }
+          if (grew) {
+            const next = {};
+            if (axis === "width" || axis === "both") next.minWidth = max.w;
+            if (axis === "height" || axis === "both") next.minHeight = max.h;
+            setStyle(next);
+          }
+        }
+      });
+      observer.observe(el, { box: "border-box" });
+      observerRef.current = observer;
+    },
+    [axis]
+  );
+  return { ref, style };
+}
+
 // src/use-concertina.ts
 import {
-  useState as useState5,
-  useCallback as useCallback7,
-  useRef as useRef6,
+  useState as useState7,
+  useCallback as useCallback9,
+  useRef as useRef7,
   useLayoutEffect as useLayoutEffect4,
   useEffect as useEffect6
 } from "react";
 function useConcertina() {
-  const [value, setValue] = useState5("");
-  const [switching, setSwitching] = useState5(false);
-  const itemRefs = useRef6({});
-  const onValueChange = useCallback7(
+  const [value, setValue] = useState7("");
+  const [switching, setSwitching] = useState7(false);
+  const itemRefs = useRef7({});
+  const onValueChange = useCallback9(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1162,7 +1259,7 @@ function useConcertina() {
   useEffect6(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = useCallback7(
+  const getItemRef = useCallback9(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1182,8 +1279,12 @@ export {
   Header,
   Item2 as Item,
   Root3 as Root,
+  Slot,
+  StableSlot,
   Trigger2 as Trigger,
   pinToScrollTop,
   useConcertina,
-  useExpanded
+  useExpanded,
+  useStableSlot,
+  useTransitionLock
 };

package/dist/styles.css

@@ -52,3 +52,12 @@
 [data-switching] .concertina-content[data-state="open"] {
   animation-duration: 0s;
 }
+
+/* StableSlot — all children overlap in the same grid cell.
+   Grid auto-sizes to the largest child. */
+.concertina-stable-slot {
+  display: grid;
+}
+.concertina-stable-slot > * {
+  grid-area: 1 / 1;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "concertina",
-  "version": "0.4.1",
-  "description": "Component API + hook for scroll-pinned Radix Accordion panels with per-item memoization.",
+  "version": "0.5.0",
+  "description": "Layout stability primitives + scroll-pinned Radix Accordion panels with per-item memoization.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -52,7 +52,10 @@
     "react",
     "hook",
     "memoization",
-    "useSyncExternalStore"
+    "useSyncExternalStore",
+    "layout-stability",
+    "stable-slot",
+    "resize-observer"
   ],
   "license": "MIT",
   "repository": {