concertina 0.12.0 → 0.13.0

package/README.md

@@ -26,7 +26,7 @@ It's not a state problem. It's a **structure problem.** The box changed size bec
 
 Don't swap structures. Swap what's inside them.
 
-Concertina gives you three high-level components: **Bellows**, **Hum**, and **Ensemble**. They handle the math so you can focus on the music. CSS is auto-injected on first render. No manual imports needed.
+Concertina gives you four high-level components: **Bellows**, **Hum**, **Overture**, and **Ensemble**. They handle the math so you can focus on the music. CSS is auto-injected on first render. No manual imports needed.
 
 ```bash
 npm install concertina
@@ -225,6 +225,34 @@ Named after musical **vamping** — repeating a pattern while waiting for a cue.
 
 ---
 
+## Overture: temporal stability for arbitrary content
+
+A card, table, or page loads from an API. You want shimmer bones during loading, a smooth fade-out when data arrives, and the container must never collapse during the swap. You don't have a flat list — you have complex, nested JSX.
+
+Overture composes `Vamp` (ambient loading context) + `Gigbag` (size ratchet) + `useWarmupExit` (exit transition) into a single wrapper. Write one JSX tree for both states. Nested `<Hum>` instances read loading state from the Vamp context automatically.
+
+```tsx
+import { Overture, Hum } from "concertina";
+
+<Overture loading={isLoading} exitDuration={150}>
+  <h2><Hum className="text-xl font-bold">{user?.name}</Hum></h2>
+  <p><Hum className="text-sm text-stone">{user?.email}</Hum></p>
+  <Button><Hum>Edit Profile</Hum></Button>
+</Overture>
+```
+
+During loading, every Hum renders a shimmer sized to its ghost children. When loading finishes, the shimmers fade out, real content appears, and the Gigbag ratchet prevents any height collapse.
+
+#### Overture props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `loading` | `boolean` | | Show shimmer (true) or content (false) |
+| `exitDuration` | `number` | | Exit animation duration in ms (match `--concertina-close-duration`) |
+| `as` | `ElementType` | `"div"` | HTML element to render |
+
+---
+
 ## Ensemble: temporal stability for collections
 
 A list loads from an API. You want shimmer rows while loading, then a smooth transition to real items, and the container must never collapse during the swap.
@@ -408,6 +436,7 @@ Scrolls an element to the top of its nearest scrollable ancestor. Only touches `
 | Two variants swap in one slot | Bellows + Slot |
 | Line of text loading from API | Hum |
 | Many Hum instances share one loading state | Vamp + Hum |
+| Card/table/page loading from API | Overture + Hum |
 | List loading from API | Ensemble |
 | Spinner replaced by loaded content | Gigbag + Warmup |
 | Accordion/table shimmer rows | Stub data + WarmupLine (wrapper-once pattern) |

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(index_exports, {
   Header: () => Header,
   Hum: () => Hum,
   Item: () => Item2,
+  Overture: () => Overture,
   Root: () => Root3,
   Slot: () => Slot,
   StableCollection: () => Ensemble,
@@ -1466,8 +1467,8 @@ var Hum = (0, import_react14.forwardRef)(
   }
 );
 
-// src/components/ensemble.tsx
-var import_react19 = require("react");
+// src/components/overture.tsx
+var import_react18 = require("react");
 
 // src/components/gigbag.tsx
 var import_react16 = require("react");
@@ -1546,38 +1547,12 @@ var Gigbag = (0, import_react16.forwardRef)(
   }
 );
 
-// src/components/warmup.tsx
-var import_react17 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Warmup = (0, import_react17.forwardRef)(
-  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react17.useInsertionEffect)(injectStyles, []);
-    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
-    const count2 = columns ? rows * columns : rows;
-    const cells = Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "concertina-warmup-bone", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "concertina-warmup-line" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "concertina-warmup-line" })
-    ] }, i));
-    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      Tag,
-      {
-        ref,
-        className: merged,
-        style: gridStyle,
-        ...props,
-        children: cells
-      }
-    );
-  }
-);
-
 // src/primitives/use-warmup-exit.ts
-var import_react18 = require("react");
+var import_react17 = require("react");
 function useWarmupExit(loading, duration) {
-  const [exiting, setExiting] = (0, import_react18.useState)(false);
-  const prevLoading = (0, import_react18.useRef)(loading);
-  (0, import_react18.useEffect)(() => {
+  const [exiting, setExiting] = (0, import_react17.useState)(false);
+  const prevLoading = (0, import_react17.useRef)(loading);
+  (0, import_react17.useEffect)(() => {
     if (prevLoading.current && !loading) {
       setExiting(true);
       const id = setTimeout(() => setExiting(false), duration);
@@ -1594,8 +1569,48 @@ function useWarmupExit(loading, duration) {
   };
 }
 
+// src/components/overture.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Overture = (0, import_react18.forwardRef)(
+  function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react18.useInsertionEffect)(injectStyles, []);
+    const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
+    const merged = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Gigbag, { ref, axis: "height", as: Tag, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Vamp, { loading: showWarmup, children }) });
+  }
+);
+
 // src/components/ensemble.tsx
+var import_react20 = require("react");
+
+// src/components/warmup.tsx
+var import_react19 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var Warmup = (0, import_react19.forwardRef)(
+  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react19.useInsertionEffect)(injectStyles, []);
+    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
+    const count2 = columns ? rows * columns : rows;
+    const cells = Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "concertina-warmup-bone", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "concertina-warmup-line" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "concertina-warmup-line" })
+    ] }, i));
+    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Tag,
+      {
+        ref,
+        className: merged,
+        style: gridStyle,
+        ...props,
+        children: cells
+      }
+    );
+  }
+);
+
+// src/components/ensemble.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function EnsembleInner({
   items,
   loading,
@@ -1606,33 +1621,33 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  (0, import_react19.useInsertionEffect)(injectStyles, []);
+  (0, import_react20.useInsertionEffect)(injectStyles, []);
   const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
   const warmupClass = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, { className, children: items.map(renderItem) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tag, { className, children: items.map(renderItem) }) });
 }
-var Ensemble = (0, import_react19.forwardRef)(EnsembleInner);
+var Ensemble = (0, import_react20.forwardRef)(EnsembleInner);
 
 // src/components/warmup-line.tsx
-var import_react20 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var WarmupLine = (0, import_react20.forwardRef)(
+var import_react21 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var WarmupLine = (0, import_react21.forwardRef)(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    (0, import_react20.useInsertionEffect)(injectStyles, []);
+    (0, import_react21.useInsertionEffect)(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tag, { ref, className: merged, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tag, { ref, className: merged, ...props });
   }
 );
 
 // src/components/glide.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/primitives/use-presence.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function usePresence2(show) {
-  const [mounted, setMounted] = (0, import_react21.useState)(show);
-  const [phase, setPhase] = (0, import_react21.useState)(show ? "entered" : "exiting");
-  (0, import_react21.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react22.useState)(show);
+  const [phase, setPhase] = (0, import_react22.useState)(show ? "entered" : "exiting");
+  (0, import_react22.useEffect)(() => {
     if (show) {
       setMounted(true);
       setPhase("entering");
@@ -1640,7 +1655,7 @@ function usePresence2(show) {
       setPhase("exiting");
     }
   }, [show]);
-  const onAnimationEnd = (0, import_react21.useCallback)(
+  const onAnimationEnd = (0, import_react22.useCallback)(
     (e) => {
       if (e.target !== e.currentTarget) return;
       if (phase === "entering") setPhase("entered");
@@ -1652,15 +1667,15 @@ function usePresence2(show) {
 }
 
 // src/components/glide.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Glide = (0, import_react22.forwardRef)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Glide = (0, import_react23.forwardRef)(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react22.useInsertionEffect)(injectStyles, []);
+    (0, import_react23.useInsertionEffect)(injectStyles, []);
     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(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Tag,
       {
         ref,
@@ -1674,12 +1689,12 @@ var Glide = (0, import_react22.forwardRef)(
 );
 
 // src/primitives/use-size.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var NO_OBSERVATION = { width: Number.NaN, height: Number.NaN };
 function useSize() {
-  const [size, setSize] = (0, import_react23.useState)(NO_OBSERVATION);
-  const observerRef = (0, import_react23.useRef)(null);
-  const ref = (0, import_react23.useCallback)((el) => {
+  const [size, setSize] = (0, import_react24.useState)(NO_OBSERVATION);
+  const observerRef = (0, import_react24.useRef)(null);
+  const ref = (0, import_react24.useCallback)((el) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -1708,12 +1723,12 @@ function useSize() {
 }
 
 // src/accordion/use-concertina.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react24.useState)("");
-  const [switching, setSwitching] = (0, import_react24.useState)(false);
-  const itemRefs = (0, import_react24.useRef)({});
-  const onValueChange = (0, import_react24.useCallback)(
+  const [value, setValue] = (0, import_react25.useState)("");
+  const [switching, setSwitching] = (0, import_react25.useState)(false);
+  const itemRefs = (0, import_react25.useRef)({});
+  const onValueChange = (0, import_react25.useCallback)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1725,14 +1740,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react24.useCallback)(
+  const getItemRef = (0, import_react25.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1757,6 +1772,7 @@ function useConcertina() {
   Header,
   Hum,
   Item,
+  Overture,
   Root,
   Slot,
   StableCollection,

package/dist/index.d.cts

@@ -89,6 +89,34 @@ interface VampProps {
  */
 declare function Vamp({ loading, children }: VampProps): react_jsx_runtime.JSX.Element;
 
+interface OvertureProps extends HTMLAttributes<HTMLElement> {
+    /** Whether data is loading. Sets Vamp context for all nested Hum instances. */
+    loading: boolean;
+    /** Exit animation duration in ms. Must match CSS --concertina-close-duration. */
+    exitDuration: number;
+    /** HTML element to render. Default: "div". */
+    as?: ElementType;
+}
+/**
+ * Loading-aware subtree wrapper — the opening act before the real content.
+ *
+ * Composes three behaviors into one component:
+ * - **Vamp** context: every nested `<Hum>` reads loading state automatically.
+ * - **Gigbag** ratchet: container never shrinks during the shimmer-to-content swap.
+ * - **Exit transition**: applies `concertina-warmup-exiting` class during the
+ *   fade-out so shimmer lines animate before real content mounts.
+ *
+ * Write one JSX tree for both states. Hum instances handle the visual toggle.
+ *
+ * ```tsx
+ * <Overture loading={isLoading} exitDuration={150}>
+ *   <h2><Hum className="text-xl">{user?.name}</Hum></h2>
+ *   <p><Hum className="text-sm">{user?.bio}</Hum></p>
+ * </Overture>
+ * ```
+ */
+declare const Overture: react.ForwardRefExoticComponent<OvertureProps & react.RefAttributes<HTMLElement>>;
+
 interface EnsembleProps<T> extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     /** Data items to render. */
     items: T[];
@@ -316,4 +344,4 @@ declare function useWarmupExit(loading: boolean, duration: number): {
     exiting: boolean;
 };
 
-export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Vamp, VampContext, type VampProps, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useVamp, useWarmupExit };
+export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, Overture, type OvertureProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Vamp, VampContext, type VampProps, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useVamp, useWarmupExit };

package/dist/index.d.ts

@@ -89,6 +89,34 @@ interface VampProps {
  */
 declare function Vamp({ loading, children }: VampProps): react_jsx_runtime.JSX.Element;
 
+interface OvertureProps extends HTMLAttributes<HTMLElement> {
+    /** Whether data is loading. Sets Vamp context for all nested Hum instances. */
+    loading: boolean;
+    /** Exit animation duration in ms. Must match CSS --concertina-close-duration. */
+    exitDuration: number;
+    /** HTML element to render. Default: "div". */
+    as?: ElementType;
+}
+/**
+ * Loading-aware subtree wrapper — the opening act before the real content.
+ *
+ * Composes three behaviors into one component:
+ * - **Vamp** context: every nested `<Hum>` reads loading state automatically.
+ * - **Gigbag** ratchet: container never shrinks during the shimmer-to-content swap.
+ * - **Exit transition**: applies `concertina-warmup-exiting` class during the
+ *   fade-out so shimmer lines animate before real content mounts.
+ *
+ * Write one JSX tree for both states. Hum instances handle the visual toggle.
+ *
+ * ```tsx
+ * <Overture loading={isLoading} exitDuration={150}>
+ *   <h2><Hum className="text-xl">{user?.name}</Hum></h2>
+ *   <p><Hum className="text-sm">{user?.bio}</Hum></p>
+ * </Overture>
+ * ```
+ */
+declare const Overture: react.ForwardRefExoticComponent<OvertureProps & react.RefAttributes<HTMLElement>>;
+
 interface EnsembleProps<T> extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     /** Data items to render. */
     items: T[];
@@ -316,4 +344,4 @@ declare function useWarmupExit(loading: boolean, duration: number): {
     exiting: boolean;
 };
 
-export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Vamp, VampContext, type VampProps, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useVamp, useWarmupExit };
+export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, Overture, type OvertureProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Vamp, VampContext, type VampProps, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useVamp, useWarmupExit };

package/dist/index.js

@@ -92,10 +92,10 @@ var Hum = forwardRef3(
   }
 );
 
-// src/components/ensemble.tsx
+// src/components/overture.tsx
 import {
-  forwardRef as forwardRef6,
-  useInsertionEffect as useInsertionEffect6
+  forwardRef as forwardRef5,
+  useInsertionEffect as useInsertionEffect5
 } from "react";
 
 // src/components/gigbag.tsx
@@ -175,32 +175,6 @@ var Gigbag = forwardRef4(
   }
 );
 
-// src/components/warmup.tsx
-import { forwardRef as forwardRef5, useInsertionEffect as useInsertionEffect5 } from "react";
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
-var Warmup = forwardRef5(
-  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect5(injectStyles, []);
-    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
-    const count = columns ? rows * columns : rows;
-    const cells = Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "concertina-warmup-bone", children: [
-      /* @__PURE__ */ jsx6("div", { className: "concertina-warmup-line" }),
-      /* @__PURE__ */ jsx6("div", { className: "concertina-warmup-line" })
-    ] }, i));
-    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
-    return /* @__PURE__ */ jsx6(
-      Tag,
-      {
-        ref,
-        className: merged,
-        style: gridStyle,
-        ...props,
-        children: cells
-      }
-    );
-  }
-);
-
 // src/primitives/use-warmup-exit.ts
 import { useState as useState2, useEffect, useRef as useRef2 } from "react";
 function useWarmupExit(loading, duration) {
@@ -223,8 +197,51 @@ function useWarmupExit(loading, duration) {
   };
 }
 
+// src/components/overture.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Overture = forwardRef5(
+  function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
+    useInsertionEffect5(injectStyles, []);
+    const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
+    const merged = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
+    return /* @__PURE__ */ jsx6(Gigbag, { ref, axis: "height", as: Tag, className: merged, ...props, children: /* @__PURE__ */ jsx6(Vamp, { loading: showWarmup, children }) });
+  }
+);
+
+// src/components/ensemble.tsx
+import {
+  forwardRef as forwardRef7,
+  useInsertionEffect as useInsertionEffect7
+} from "react";
+
+// src/components/warmup.tsx
+import { forwardRef as forwardRef6, useInsertionEffect as useInsertionEffect6 } from "react";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var Warmup = forwardRef6(
+  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    useInsertionEffect6(injectStyles, []);
+    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
+    const count = columns ? rows * columns : rows;
+    const cells = Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "concertina-warmup-bone", children: [
+      /* @__PURE__ */ jsx7("div", { className: "concertina-warmup-line" }),
+      /* @__PURE__ */ jsx7("div", { className: "concertina-warmup-line" })
+    ] }, i));
+    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
+    return /* @__PURE__ */ jsx7(
+      Tag,
+      {
+        ref,
+        className: merged,
+        style: gridStyle,
+        ...props,
+        children: cells
+      }
+    );
+  }
+);
+
 // src/components/ensemble.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function EnsembleInner({
   items,
   loading,
@@ -235,28 +252,28 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  useInsertionEffect6(injectStyles, []);
+  useInsertionEffect7(injectStyles, []);
   const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
   const warmupClass = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
-  return /* @__PURE__ */ jsx7(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ jsx7(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ jsx7(Tag, { className, children: items.map(renderItem) }) });
+  return /* @__PURE__ */ jsx8(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ jsx8(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ jsx8(Tag, { className, children: items.map(renderItem) }) });
 }
-var Ensemble = forwardRef6(EnsembleInner);
+var Ensemble = forwardRef7(EnsembleInner);
 
 // src/components/warmup-line.tsx
-import { forwardRef as forwardRef7, useInsertionEffect as useInsertionEffect7 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var WarmupLine = forwardRef7(
+import { forwardRef as forwardRef8, useInsertionEffect as useInsertionEffect8 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var WarmupLine = forwardRef8(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    useInsertionEffect7(injectStyles, []);
+    useInsertionEffect8(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-    return /* @__PURE__ */ jsx8(Tag, { ref, className: merged, ...props });
+    return /* @__PURE__ */ jsx9(Tag, { ref, className: merged, ...props });
   }
 );
 
 // src/components/glide.tsx
 import {
-  forwardRef as forwardRef8,
-  useInsertionEffect as useInsertionEffect8
+  forwardRef as forwardRef9,
+  useInsertionEffect as useInsertionEffect9
 } from "react";
 
 // src/primitives/use-presence.ts
@@ -288,15 +305,15 @@ function usePresence(show) {
 }
 
 // src/components/glide.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Glide = forwardRef8(
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Glide = forwardRef9(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect8(injectStyles, []);
+    useInsertionEffect9(injectStyles, []);
     const { mounted, phase, onAnimationEnd } = usePresence(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(" ");
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       Tag,
       {
         ref,
@@ -353,6 +370,7 @@ export {
   Header,
   Hum,
   Item,
+  Overture,
   Root,
   Slot,
   Ensemble as StableCollection,

package/package.json

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