concertina 0.7.1 → 0.8.1

package/dist/index.cjs

@@ -45,13 +45,16 @@ __export(index_exports, {
   pinToScrollTop: () => pinToScrollTop,
   useConcertina: () => useConcertina,
   useExpanded: () => useExpanded,
+  usePresence: () => usePresence2,
+  useScrollPin: () => useScrollPin,
+  useSize: () => useSize,
   useStableSlot: () => useStableSlot,
   useTransitionLock: () => useTransitionLock
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/root.tsx
-var import_react6 = require("react");
+// src/accordion/root.tsx
+var import_react7 = require("react");
 
 // node_modules/@radix-ui/react-accordion/dist/index.mjs
 var import_react3 = __toESM(require("react"), 1);
@@ -1012,7 +1015,7 @@ var Header = AccordionHeader;
 var Trigger2 = AccordionTrigger;
 var Content2 = AccordionContent;
 
-// src/store.ts
+// src/accordion/store.ts
 var import_react4 = require("react");
 var ConcertinaStore = class {
   constructor() {
@@ -1041,7 +1044,10 @@ var ConcertinaStore = class {
 };
 var ConcertinaContext = (0, import_react4.createContext)(null);
 
-// src/pin-to-scroll-top.ts
+// src/primitives/use-scroll-pin.ts
+var import_react5 = require("react");
+
+// src/primitives/pin-to-scroll-top.ts
 function pinToScrollTop(el) {
   if (!el) return;
   let parent = el.parentElement;
@@ -1071,33 +1077,42 @@ function pinToScrollTop(el) {
   }
 }
 
-// src/use-transition-lock.ts
-var import_react5 = require("react");
+// src/primitives/use-scroll-pin.ts
+function useScrollPin(getElement, deps) {
+  (0, import_react5.useLayoutEffect)(() => {
+    const el = getElement();
+    if (!el) return;
+    pinToScrollTop(el);
+  }, deps);
+}
+
+// src/primitives/use-transition-lock.ts
+var import_react6 = require("react");
 function useTransitionLock() {
-  const [locked, setLocked] = (0, import_react5.useState)(false);
-  const lock = (0, import_react5.useCallback)(() => setLocked(true), []);
-  (0, import_react5.useEffect)(() => {
+  const [locked, setLocked] = (0, import_react6.useState)(false);
+  const lock = (0, import_react6.useCallback)(() => setLocked(true), []);
+  (0, import_react6.useEffect)(() => {
     if (locked) setLocked(false);
   }, [locked]);
   return { locked, lock };
 }
 
-// src/root.tsx
+// src/accordion/root.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Root3 = (0, import_react6.forwardRef)(
+var Root3 = (0, import_react7.forwardRef)(
   function Root4({ collapsible = true, children, ...props }, forwardedRef) {
-    const storeRef = (0, import_react6.useRef)(null);
+    const storeRef = (0, import_react7.useRef)(null);
     if (!storeRef.current) {
       storeRef.current = new ConcertinaStore();
     }
     const store = storeRef.current;
-    const value = (0, import_react6.useSyncExternalStore)(
+    const value = (0, import_react7.useSyncExternalStore)(
       store.subscribe,
       store.getValue,
       store.getValue
     );
     const { locked, lock } = useTransitionLock();
-    const onValueChange = (0, import_react6.useCallback)(
+    const onValueChange = (0, import_react7.useCallback)(
       (newValue) => {
         const isSwitching = !!store.getValue() && store.getValue() !== newValue && !!newValue;
         if (isSwitching) lock();
@@ -1105,10 +1120,10 @@ var Root3 = (0, import_react6.forwardRef)(
       },
       [store, lock]
     );
-    (0, import_react6.useLayoutEffect)(() => {
-      if (!value) return;
-      pinToScrollTop(store.getItemRef(value));
-    }, [value, store]);
+    useScrollPin(
+      () => value ? store.getItemRef(value) : null,
+      [value, store]
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConcertinaContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Root2,
       {
@@ -1125,12 +1140,12 @@ var Root3 = (0, import_react6.forwardRef)(
   }
 );
 
-// src/item.tsx
-var import_react7 = require("react");
+// src/accordion/item.tsx
+var import_react8 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Item2 = (0, import_react7.forwardRef)(function Item3({ value, ...props }, forwardedRef) {
-  const store = (0, import_react7.useContext)(ConcertinaContext);
-  const mergedRef = (0, import_react7.useCallback)(
+var Item2 = (0, import_react8.forwardRef)(function Item3({ value, ...props }, forwardedRef) {
+  const store = (0, import_react8.useContext)(ConcertinaContext);
+  const mergedRef = (0, import_react8.useCallback)(
     (el) => {
       if (typeof forwardedRef === "function") {
         forwardedRef(el);
@@ -1144,18 +1159,18 @@ var Item2 = (0, import_react7.forwardRef)(function Item3({ value, ...props }, fo
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Item, { ref: mergedRef, value, ...props });
 });
 
-// src/content.tsx
-var import_react8 = require("react");
+// src/accordion/content.tsx
+var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Content3 = (0, import_react8.forwardRef)(function Content4({ className, ...props }, ref) {
+var Content3 = (0, import_react9.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_react9 = require("react");
+// src/accordion/use-expanded.ts
+var import_react10 = require("react");
 function useStore() {
-  const store = (0, import_react9.useContext)(ConcertinaContext);
+  const store = (0, import_react10.useContext)(ConcertinaContext);
   if (!store) {
     throw new Error("useExpanded must be used inside <Concertina.Root>");
   }
@@ -1163,7 +1178,7 @@ function useStore() {
 }
 function useExpanded(id) {
   const store = useStore();
-  return (0, import_react9.useSyncExternalStore)(
+  return (0, import_react10.useSyncExternalStore)(
     store.subscribe,
     () => store.getValue() === id,
     () => false
@@ -1171,26 +1186,26 @@ function useExpanded(id) {
   );
 }
 
-// src/stable-slot.tsx
-var import_react10 = require("react");
+// src/components/stable-slot.tsx
+var import_react11 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var AxisContext = (0, import_react10.createContext)("both");
-var StableSlot = (0, import_react10.forwardRef)(
+var AxisContext = (0, import_react11.createContext)("both");
+var StableSlot = (0, import_react11.forwardRef)(
   function StableSlot2({ axis = "both", as: Tag = "div", className, style, 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)(Tag, { ref, className: merged, style, ...props, children }) });
   }
 );
 
-// src/slot.tsx
-var import_react11 = require("react");
+// src/components/slot.tsx
+var import_react12 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function inactiveStyle(_axis) {
   return { visibility: "hidden" };
 }
-var Slot = (0, import_react11.forwardRef)(
+var Slot = (0, import_react12.forwardRef)(
   function Slot2({ active, as: Tag = "div", style, children, ...props }, ref) {
-    const axis = (0, import_react11.useContext)(AxisContext);
+    const axis = (0, import_react12.useContext)(AxisContext);
     const merged = active ? { ...style } : { ...inactiveStyle(axis), ...style };
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Tag,
@@ -1205,14 +1220,17 @@ var Slot = (0, import_react11.forwardRef)(
   }
 );
 
-// src/use-stable-slot.ts
-var import_react12 = require("react");
+// src/components/gigbag.tsx
+var import_react14 = require("react");
+
+// src/primitives/use-stable-slot.ts
+var import_react13 = 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)(
+  const [style, setStyle] = (0, import_react13.useState)({});
+  const maxRef = (0, import_react13.useRef)({ w: 0, h: 0 });
+  const observerRef = (0, import_react13.useRef)(null);
+  const ref = (0, import_react13.useCallback)(
     (el) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1258,10 +1276,9 @@ function useStableSlot(options = {}) {
   return { ref, style };
 }
 
-// src/gigbag.tsx
-var import_react13 = require("react");
+// src/components/gigbag.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Gigbag = (0, import_react13.forwardRef)(
+var Gigbag = (0, import_react14.forwardRef)(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
@@ -1282,52 +1299,64 @@ var Gigbag = (0, import_react13.forwardRef)(
   }
 );
 
-// src/warmup.tsx
-var import_react14 = require("react");
+// src/components/warmup.tsx
+var import_react15 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Warmup = (0, import_react14.forwardRef)(
+var Warmup = (0, import_react15.forwardRef)(
   function Warmup2({ rows = 3, columns = 1, as: Tag = "div", className, children, ...props }, ref) {
     const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
     const cells = Array.from({ length: rows * columns }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "concertina-warmup-bone", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "concertina-warmup-line concertina-warmup-line-short" }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "concertina-warmup-line concertina-warmup-line-long" })
     ] }, i));
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       Tag,
       {
         ref,
         className: merged,
         style: { gridTemplateColumns: `repeat(${columns}, 1fr)` },
         ...props,
-        children: cells
+        children: [
+          children,
+          cells
+        ]
       }
     );
   }
 );
 
-// src/glide.tsx
-var import_react15 = require("react");
+// src/components/glide.tsx
+var import_react17 = require("react");
+
+// src/primitives/use-presence.ts
+var import_react16 = require("react");
+function usePresence2(show) {
+  const [mounted, setMounted] = (0, import_react16.useState)(show);
+  const [phase, setPhase] = (0, import_react16.useState)(show ? "entered" : "exiting");
+  (0, import_react16.useEffect)(() => {
+    if (show) {
+      setMounted(true);
+      setPhase("entering");
+    } else if (mounted) {
+      setPhase("exiting");
+    }
+  }, [show]);
+  const onAnimationEnd = (0, import_react16.useCallback)(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (phase === "entering") setPhase("entered");
+      if (phase === "exiting") setMounted(false);
+    },
+    [phase]
+  );
+  return { mounted, phase, onAnimationEnd };
+}
+
+// src/components/glide.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Glide = (0, import_react15.forwardRef)(
+var Glide = (0, import_react17.forwardRef)(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    const [mounted, setMounted] = (0, import_react15.useState)(show);
-    const [phase, setPhase] = (0, import_react15.useState)(show ? "entered" : "exiting");
-    (0, import_react15.useEffect)(() => {
-      if (show) {
-        setMounted(true);
-        setPhase("entering");
-      } else if (mounted) {
-        setPhase("exiting");
-      }
-    }, [show]);
-    const onAnimationEnd = (0, import_react15.useCallback)(
-      (e) => {
-        if (e.target !== e.currentTarget) return;
-        if (phase === "entering") setPhase("entered");
-        if (phase === "exiting") setMounted(false);
-      },
-      [phase]
-    );
+    const { mounted, phase, onAnimationEnd } = usePresence2(show);
     if (!mounted) return null;
     const phaseClass = phase === "entering" ? "concertina-glide-entering" : phase === "exiting" ? "concertina-glide-exiting" : "";
     const merged = ["concertina-glide", phaseClass, className].filter(Boolean).join(" ");
@@ -1344,13 +1373,46 @@ var Glide = (0, import_react15.forwardRef)(
   }
 );
 
-// src/use-concertina.ts
-var import_react16 = require("react");
+// src/primitives/use-size.ts
+var import_react18 = require("react");
+function useSize() {
+  const [size, setSize] = (0, import_react18.useState)({ width: 0, height: 0 });
+  const observerRef = (0, import_react18.useRef)(null);
+  const ref = (0, import_react18.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;
+        }
+        setSize({ width: w, height: h });
+      }
+    });
+    observer.observe(el, { box: "border-box" });
+    observerRef.current = observer;
+  }, []);
+  return { ref, size };
+}
+
+// src/accordion/use-concertina.ts
+var import_react19 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react16.useState)("");
-  const [switching, setSwitching] = (0, import_react16.useState)(false);
-  const itemRefs = (0, import_react16.useRef)({});
-  const onValueChange = (0, import_react16.useCallback)(
+  const [value, setValue] = (0, import_react19.useState)("");
+  const [switching, setSwitching] = (0, import_react19.useState)(false);
+  const itemRefs = (0, import_react19.useRef)({});
+  const onValueChange = (0, import_react19.useCallback)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1362,14 +1424,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react16.useCallback)(
+  const getItemRef = (0, import_react19.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1399,6 +1461,9 @@ function useConcertina() {
   pinToScrollTop,
   useConcertina,
   useExpanded,
+  usePresence,
+  useScrollPin,
+  useSize,
   useStableSlot,
   useTransitionLock
 });

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ElementType, CSSProperties } from 'react';
+import { HTMLAttributes, ElementType, AnimationEvent, DependencyList, CSSProperties } from 'react';
 import * as Accordion from '@radix-ui/react-accordion';
 export { Header, Trigger } from '@radix-ui/react-accordion';
 
@@ -73,48 +73,6 @@ interface SlotProps extends HTMLAttributes<HTMLElement> {
  */
 declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
 
-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;
-};
-
 interface GigbagProps extends HTMLAttributes<HTMLElement> {
     /** Which axis to ratchet. Default: "height". */
     axis?: Axis;
@@ -147,6 +105,9 @@ interface WarmupProps extends HTMLAttributes<HTMLElement> {
  * dimensions of the real content. Pair with <Gigbag> so the
  * container ratchets to the larger of placeholder vs real content.
  *
+ * Pass children to inject structure before the generated bones
+ * (e.g. a toolbar placeholder that spans all grid columns).
+ *
  * All dimensions are CSS custom properties — consuming apps theme
  * without forking.
  */
@@ -161,14 +122,105 @@ interface GlideProps extends HTMLAttributes<HTMLElement> {
 /**
  * Enter/exit animation wrapper.
  *
- * State machine:
- *   show=true  -> mount + "entering" -> animationEnd -> "entered"
- *   show=false -> "exiting" -> animationEnd -> unmount
- *
- * CSS classes: concertina-glide-entering, concertina-glide-exiting
+ * Thin composition over usePresence. Adds CSS class names:
+ *   concertina-glide-entering, concertina-glide-exiting
  */
 declare const Glide: react.ForwardRefExoticComponent<GlideProps & react.RefAttributes<HTMLElement>>;
 
+interface Size {
+    width: number;
+    height: number;
+}
+interface UseSizeReturn {
+    /** RefCallback — attach to the element to observe. */
+    ref: (el: HTMLElement | null) => void;
+    /** Current border-box size. Starts at { width: 0, height: 0 }. */
+    size: Size;
+}
+/**
+ * Raw border-box size observation via ResizeObserver.
+ *
+ * Reports every resize — no ratchet, no policy. Use this when you
+ * need the actual current size for your own logic (e.g. breakpoints,
+ * conditional rendering, animations).
+ *
+ * For a ratcheting min-size that only grows, use useStableSlot instead.
+ */
+declare function useSize(): UseSizeReturn;
+
+type Phase = "entering" | "entered" | "exiting";
+interface UsePresenceReturn {
+    /** Whether the element should be in the DOM. */
+    mounted: boolean;
+    /** Current animation phase. */
+    phase: Phase;
+    /** Attach to the animating element's onAnimationEnd. */
+    onAnimationEnd: (e: AnimationEvent) => void;
+}
+/**
+ * Mount/unmount state machine for enter/exit animations.
+ *
+ * State transitions:
+ *   show=true  → mount + "entering" → animationEnd → "entered"
+ *   show=false → "exiting" → animationEnd → unmount
+ *
+ * Extracted from Glide so any component can use animated presence.
+ */
+declare function usePresence(show: boolean): UsePresenceReturn;
+
+/**
+ * Pin an element to the top of its scroll container after layout changes.
+ *
+ * Runs pinToScrollTop inside useLayoutEffect — after React commits
+ * the DOM but before the browser paints. This ensures scroll
+ * correction happens synchronously with layout changes.
+ *
+ * Extracted from accordion Root so any component can do scroll pinning.
+ */
+declare function useScrollPin(getElement: () => HTMLElement | null, deps: DependencyList): void;
+
+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
@@ -211,4 +263,4 @@ interface UseConcertinaReturn {
  */
 declare function useConcertina(): UseConcertinaReturn;
 
-export { type Axis, ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Gigbag, type GigbagProps, Glide, type GlideProps, Item, Root, Slot, type SlotProps, StableSlot, type StableSlotProps, type UseConcertinaReturn, Warmup, type WarmupProps, pinToScrollTop, useConcertina, useExpanded, useStableSlot, useTransitionLock };
+export { type Axis, ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Gigbag, type GigbagProps, Glide, type GlideProps, Item, type Phase, Root, type Size, Slot, type SlotProps, StableSlot, type StableSlotProps, type UseConcertinaReturn, type UsePresenceReturn, Warmup, type WarmupProps, pinToScrollTop, useConcertina, useExpanded, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ElementType, CSSProperties } from 'react';
+import { HTMLAttributes, ElementType, AnimationEvent, DependencyList, CSSProperties } from 'react';
 import * as Accordion from '@radix-ui/react-accordion';
 export { Header, Trigger } from '@radix-ui/react-accordion';
 
@@ -73,48 +73,6 @@ interface SlotProps extends HTMLAttributes<HTMLElement> {
  */
 declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
 
-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;
-};
-
 interface GigbagProps extends HTMLAttributes<HTMLElement> {
     /** Which axis to ratchet. Default: "height". */
     axis?: Axis;
@@ -147,6 +105,9 @@ interface WarmupProps extends HTMLAttributes<HTMLElement> {
  * dimensions of the real content. Pair with <Gigbag> so the
  * container ratchets to the larger of placeholder vs real content.
  *
+ * Pass children to inject structure before the generated bones
+ * (e.g. a toolbar placeholder that spans all grid columns).
+ *
  * All dimensions are CSS custom properties — consuming apps theme
  * without forking.
  */
@@ -161,14 +122,105 @@ interface GlideProps extends HTMLAttributes<HTMLElement> {
 /**
  * Enter/exit animation wrapper.
  *
- * State machine:
- *   show=true  -> mount + "entering" -> animationEnd -> "entered"
- *   show=false -> "exiting" -> animationEnd -> unmount
- *
- * CSS classes: concertina-glide-entering, concertina-glide-exiting
+ * Thin composition over usePresence. Adds CSS class names:
+ *   concertina-glide-entering, concertina-glide-exiting
  */
 declare const Glide: react.ForwardRefExoticComponent<GlideProps & react.RefAttributes<HTMLElement>>;
 
+interface Size {
+    width: number;
+    height: number;
+}
+interface UseSizeReturn {
+    /** RefCallback — attach to the element to observe. */
+    ref: (el: HTMLElement | null) => void;
+    /** Current border-box size. Starts at { width: 0, height: 0 }. */
+    size: Size;
+}
+/**
+ * Raw border-box size observation via ResizeObserver.
+ *
+ * Reports every resize — no ratchet, no policy. Use this when you
+ * need the actual current size for your own logic (e.g. breakpoints,
+ * conditional rendering, animations).
+ *
+ * For a ratcheting min-size that only grows, use useStableSlot instead.
+ */
+declare function useSize(): UseSizeReturn;
+
+type Phase = "entering" | "entered" | "exiting";
+interface UsePresenceReturn {
+    /** Whether the element should be in the DOM. */
+    mounted: boolean;
+    /** Current animation phase. */
+    phase: Phase;
+    /** Attach to the animating element's onAnimationEnd. */
+    onAnimationEnd: (e: AnimationEvent) => void;
+}
+/**
+ * Mount/unmount state machine for enter/exit animations.
+ *
+ * State transitions:
+ *   show=true  → mount + "entering" → animationEnd → "entered"
+ *   show=false → "exiting" → animationEnd → unmount
+ *
+ * Extracted from Glide so any component can use animated presence.
+ */
+declare function usePresence(show: boolean): UsePresenceReturn;
+
+/**
+ * Pin an element to the top of its scroll container after layout changes.
+ *
+ * Runs pinToScrollTop inside useLayoutEffect — after React commits
+ * the DOM but before the browser paints. This ensures scroll
+ * correction happens synchronously with layout changes.
+ *
+ * Extracted from accordion Root so any component can do scroll pinning.
+ */
+declare function useScrollPin(getElement: () => HTMLElement | null, deps: DependencyList): void;
+
+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
@@ -211,4 +263,4 @@ interface UseConcertinaReturn {
  */
 declare function useConcertina(): UseConcertinaReturn;
 
-export { type Axis, ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Gigbag, type GigbagProps, Glide, type GlideProps, Item, Root, Slot, type SlotProps, StableSlot, type StableSlotProps, type UseConcertinaReturn, Warmup, type WarmupProps, pinToScrollTop, useConcertina, useExpanded, useStableSlot, useTransitionLock };
+export { type Axis, ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Gigbag, type GigbagProps, Glide, type GlideProps, Item, type Phase, Root, type Size, Slot, type SlotProps, StableSlot, type StableSlotProps, type UseConcertinaReturn, type UsePresenceReturn, Warmup, type WarmupProps, pinToScrollTop, useConcertina, useExpanded, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock };

package/dist/index.js

@@ -1,8 +1,7 @@
-// src/root.tsx
+// src/accordion/root.tsx
 import {
   forwardRef as forwardRef4,
   useRef as useRef5,
-  useLayoutEffect as useLayoutEffect3,
   useSyncExternalStore,
   useCallback as useCallback6
 } from "react";
@@ -966,7 +965,7 @@ var Header = AccordionHeader;
 var Trigger2 = AccordionTrigger;
 var Content2 = AccordionContent;
 
-// src/store.ts
+// src/accordion/store.ts
 import { createContext as createContext3 } from "react";
 var ConcertinaStore = class {
   constructor() {
@@ -995,7 +994,10 @@ var ConcertinaStore = class {
 };
 var ConcertinaContext = createContext3(null);
 
-// src/pin-to-scroll-top.ts
+// src/primitives/use-scroll-pin.ts
+import { useLayoutEffect as useLayoutEffect3 } from "react";
+
+// src/primitives/pin-to-scroll-top.ts
 function pinToScrollTop(el) {
   if (!el) return;
   let parent = el.parentElement;
@@ -1025,7 +1027,16 @@ function pinToScrollTop(el) {
   }
 }
 
-// src/use-transition-lock.ts
+// src/primitives/use-scroll-pin.ts
+function useScrollPin(getElement, deps) {
+  useLayoutEffect3(() => {
+    const el = getElement();
+    if (!el) return;
+    pinToScrollTop(el);
+  }, deps);
+}
+
+// src/primitives/use-transition-lock.ts
 import { useState as useState5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
 function useTransitionLock() {
   const [locked, setLocked] = useState5(false);
@@ -1036,7 +1047,7 @@ function useTransitionLock() {
   return { locked, lock };
 }
 
-// src/root.tsx
+// src/accordion/root.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Root3 = forwardRef4(
   function Root4({ collapsible = true, children, ...props }, forwardedRef) {
@@ -1059,10 +1070,10 @@ var Root3 = forwardRef4(
       },
       [store, lock]
     );
-    useLayoutEffect3(() => {
-      if (!value) return;
-      pinToScrollTop(store.getItemRef(value));
-    }, [value, store]);
+    useScrollPin(
+      () => value ? store.getItemRef(value) : null,
+      [value, store]
+    );
     return /* @__PURE__ */ jsx8(ConcertinaContext.Provider, { value: store, children: /* @__PURE__ */ jsx8(
       Root2,
       {
@@ -1079,7 +1090,7 @@ var Root3 = forwardRef4(
   }
 );
 
-// src/item.tsx
+// src/accordion/item.tsx
 import {
   forwardRef as forwardRef5,
   useContext as useContext3,
@@ -1102,7 +1113,7 @@ var Item2 = forwardRef5(function Item3({ value, ...props }, forwardedRef) {
   return /* @__PURE__ */ jsx9(Item, { ref: mergedRef, value, ...props });
 });
 
-// src/content.tsx
+// src/accordion/content.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Content3 = forwardRef6(function Content4({ className, ...props }, ref) {
@@ -1110,7 +1121,7 @@ var Content3 = forwardRef6(function Content4({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx10(Content2, { ref, className: merged, ...props });
 });
 
-// src/use-expanded.ts
+// src/accordion/use-expanded.ts
 import { useContext as useContext4, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useStore() {
   const store = useContext4(ConcertinaContext);
@@ -1129,7 +1140,7 @@ function useExpanded(id) {
   );
 }
 
-// src/stable-slot.tsx
+// src/components/stable-slot.tsx
 import {
   forwardRef as forwardRef7,
   createContext as createContext4
@@ -1143,7 +1154,7 @@ var StableSlot = forwardRef7(
   }
 );
 
-// src/slot.tsx
+// src/components/slot.tsx
 import {
   forwardRef as forwardRef8,
   useContext as useContext5
@@ -1169,7 +1180,10 @@ var Slot = forwardRef8(
   }
 );
 
-// src/use-stable-slot.ts
+// src/components/gigbag.tsx
+import { forwardRef as forwardRef9 } from "react";
+
+// src/primitives/use-stable-slot.ts
 import { useState as useState6, useCallback as useCallback8, useRef as useRef6 } from "react";
 function useStableSlot(options = {}) {
   const { axis = "both" } = options;
@@ -1222,8 +1236,7 @@ function useStableSlot(options = {}) {
   return { ref, style };
 }
 
-// src/gigbag.tsx
-import { forwardRef as forwardRef9 } from "react";
+// src/components/gigbag.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 var Gigbag = forwardRef9(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
@@ -1246,7 +1259,7 @@ var Gigbag = forwardRef9(
   }
 );
 
-// src/warmup.tsx
+// src/components/warmup.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { jsx as jsx14, jsxs } from "react/jsx-runtime";
 var Warmup = forwardRef10(
@@ -1256,47 +1269,60 @@ var Warmup = forwardRef10(
       /* @__PURE__ */ jsx14("div", { className: "concertina-warmup-line concertina-warmup-line-short" }),
       /* @__PURE__ */ jsx14("div", { className: "concertina-warmup-line concertina-warmup-line-long" })
     ] }, i));
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsxs(
       Tag,
       {
         ref,
         className: merged,
         style: { gridTemplateColumns: `repeat(${columns}, 1fr)` },
         ...props,
-        children: cells
+        children: [
+          children,
+          cells
+        ]
       }
     );
   }
 );
 
-// src/glide.tsx
+// src/components/glide.tsx
+import {
+  forwardRef as forwardRef11
+} from "react";
+
+// src/primitives/use-presence.ts
 import {
-  forwardRef as forwardRef11,
   useState as useState7,
   useEffect as useEffect6,
   useCallback as useCallback9
 } from "react";
+function usePresence2(show) {
+  const [mounted, setMounted] = useState7(show);
+  const [phase, setPhase] = useState7(show ? "entered" : "exiting");
+  useEffect6(() => {
+    if (show) {
+      setMounted(true);
+      setPhase("entering");
+    } else if (mounted) {
+      setPhase("exiting");
+    }
+  }, [show]);
+  const onAnimationEnd = useCallback9(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (phase === "entering") setPhase("entered");
+      if (phase === "exiting") setMounted(false);
+    },
+    [phase]
+  );
+  return { mounted, phase, onAnimationEnd };
+}
+
+// src/components/glide.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var Glide = forwardRef11(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    const [mounted, setMounted] = useState7(show);
-    const [phase, setPhase] = useState7(show ? "entered" : "exiting");
-    useEffect6(() => {
-      if (show) {
-        setMounted(true);
-        setPhase("entering");
-      } else if (mounted) {
-        setPhase("exiting");
-      }
-    }, [show]);
-    const onAnimationEnd = useCallback9(
-      (e) => {
-        if (e.target !== e.currentTarget) return;
-        if (phase === "entering") setPhase("entered");
-        if (phase === "exiting") setMounted(false);
-      },
-      [phase]
-    );
+    const { mounted, phase, onAnimationEnd } = usePresence2(show);
     if (!mounted) return null;
     const phaseClass = phase === "entering" ? "concertina-glide-entering" : phase === "exiting" ? "concertina-glide-exiting" : "";
     const merged = ["concertina-glide", phaseClass, className].filter(Boolean).join(" ");
@@ -1313,19 +1339,52 @@ var Glide = forwardRef11(
   }
 );
 
-// src/use-concertina.ts
+// src/primitives/use-size.ts
+import { useState as useState8, useCallback as useCallback10, useRef as useRef7 } from "react";
+function useSize() {
+  const [size, setSize] = useState8({ width: 0, height: 0 });
+  const observerRef = useRef7(null);
+  const ref = useCallback10((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;
+        }
+        setSize({ width: w, height: h });
+      }
+    });
+    observer.observe(el, { box: "border-box" });
+    observerRef.current = observer;
+  }, []);
+  return { ref, size };
+}
+
+// src/accordion/use-concertina.ts
 import {
-  useState as useState8,
-  useCallback as useCallback10,
-  useRef as useRef7,
+  useState as useState9,
+  useCallback as useCallback11,
+  useRef as useRef8,
   useLayoutEffect as useLayoutEffect4,
   useEffect as useEffect7
 } from "react";
 function useConcertina() {
-  const [value, setValue] = useState8("");
-  const [switching, setSwitching] = useState8(false);
-  const itemRefs = useRef7({});
-  const onValueChange = useCallback10(
+  const [value, setValue] = useState9("");
+  const [switching, setSwitching] = useState9(false);
+  const itemRefs = useRef8({});
+  const onValueChange = useCallback11(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1344,7 +1403,7 @@ function useConcertina() {
   useEffect7(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = useCallback10(
+  const getItemRef = useCallback11(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1373,6 +1432,9 @@ export {
   pinToScrollTop,
   useConcertina,
   useExpanded,
+  usePresence2 as usePresence,
+  useScrollPin,
+  useSize,
   useStableSlot,
   useTransitionLock
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "concertina",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "React toolkit for layout stability.",
   "type": "module",
   "main": "./dist/index.cjs",