concertina 0.12.0 → 0.13.1

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/accordion.cjs

@@ -1351,6 +1351,7 @@ function injectStyles() {
   document.head.appendChild(style);
   injected = true;
 }
+injectStyles();
 
 // src/accordion/content.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");

package/dist/accordion.js

@@ -8,7 +8,7 @@ import {
   Trigger2,
   useConcertina,
   useExpanded
-} from "./chunk-OGJMPKZX.js";
+} from "./chunk-6UMIJ4S7.js";
 export {
   ConcertinaContext,
   ConcertinaStore,

package/dist/{chunk-OGJMPKZX.js → chunk-6UMIJ4S7.js}

@@ -1312,6 +1312,7 @@ function injectStyles() {
   document.head.appendChild(style);
   injected = true;
 }
+injectStyles();
 
 // src/accordion/content.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";

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,
@@ -1372,6 +1373,7 @@ function injectStyles() {
   document.head.appendChild(style);
   injected = true;
 }
+injectStyles();
 
 // src/accordion/content.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -1437,9 +1439,6 @@ var Slot = (0, import_react12.forwardRef)(
   }
 );
 
-// src/components/hum.tsx
-var import_react14 = require("react");
-
 // src/components/vamp.tsx
 var import_react13 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -1453,34 +1452,31 @@ function Vamp({ loading, children }) {
 
 // src/components/hum.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Hum = (0, import_react14.forwardRef)(
-  function Hum2({ loading, as: Tag = "span", className, children, ...props }, ref) {
-    (0, import_react14.useInsertionEffect)(injectStyles, []);
-    const vampLoading = useVamp();
-    const isLoading = loading ?? vampLoading;
-    if (isLoading) {
-      const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { inert: true, children }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className, ...props, children });
+function Hum({ loading, as: Tag = "span", className, children, ...props }) {
+  const vampLoading = useVamp();
+  const isLoading = loading ?? vampLoading;
+  if (isLoading) {
+    const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { inert: true, children }) });
   }
-);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { className, ...props, children });
+}
 
-// src/components/ensemble.tsx
-var import_react19 = require("react");
+// src/components/overture.tsx
+var import_react17 = require("react");
 
 // src/components/gigbag.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 
 // src/primitives/use-stable-slot.ts
-var import_react15 = require("react");
+var import_react14 = require("react");
 var RATCHET_FLOOR = -Infinity;
 function useStableSlot(options = {}) {
   const { axis = "both" } = options;
-  const [style, setStyle] = (0, import_react15.useState)({});
-  const maxRef = (0, import_react15.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
-  const observerRef = (0, import_react15.useRef)(null);
-  const ref = (0, import_react15.useCallback)(
+  const [style, setStyle] = (0, import_react14.useState)({});
+  const maxRef = (0, import_react14.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
+  const observerRef = (0, import_react14.useRef)(null);
+  const ref = (0, import_react14.useCallback)(
     (el) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1528,9 +1524,9 @@ function useStableSlot(options = {}) {
 
 // src/components/gigbag.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Gigbag = (0, import_react16.forwardRef)(
+var Gigbag = (0, import_react15.forwardRef)(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
-    (0, import_react16.useInsertionEffect)(injectStyles, []);
+    (0, import_react15.useInsertionEffect)(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1546,38 +1542,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_react16 = 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_react16.useState)(false);
+  const prevLoading = (0, import_react16.useRef)(loading);
+  (0, import_react16.useEffect)(() => {
     if (prevLoading.current && !loading) {
       setExiting(true);
       const id = setTimeout(() => setExiting(false), duration);
@@ -1594,8 +1564,48 @@ function useWarmupExit(loading, duration) {
   };
 }
 
+// src/components/overture.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Overture = (0, import_react17.forwardRef)(
+  function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react17.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_react19 = require("react");
+
+// src/components/warmup.tsx
+var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var Warmup = (0, import_react18.forwardRef)(
+  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react18.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,
@@ -1609,18 +1619,18 @@ function EnsembleInner({
   (0, import_react19.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);
 
 // src/components/warmup-line.tsx
 var import_react20 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var WarmupLine = (0, import_react20.forwardRef)(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
     (0, import_react20.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 });
   }
 );
 
@@ -1652,7 +1662,7 @@ function usePresence2(show) {
 }
 
 // src/components/glide.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Glide = (0, import_react22.forwardRef)(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
     (0, import_react22.useInsertionEffect)(injectStyles, []);
@@ -1660,7 +1670,7 @@ var Glide = (0, import_react22.forwardRef)(
     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,
@@ -1757,6 +1767,7 @@ function useConcertina() {
   Header,
   Hum,
   Item,
+  Overture,
   Root,
   Slot,
   StableCollection,

package/dist/index.d.cts

@@ -65,7 +65,7 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  * nearest `<Vamp>` ancestor. This lets a single provider control
  * shimmer state for an entire subtree.
  */
-declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
+declare function Hum({ loading, as: Tag, className, children, ...props }: HumProps): react_jsx_runtime.JSX.Element;
 
 /** Context carrying the ambient loading state set by Vamp. */
 declare const VampContext: react.Context<boolean>;
@@ -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

@@ -65,7 +65,7 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  * nearest `<Vamp>` ancestor. This lets a single provider control
  * shimmer state for an entire subtree.
  */
-declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
+declare function Hum({ loading, as: Tag, className, children, ...props }: HumProps): react_jsx_runtime.JSX.Element;
 
 /** Context carrying the ambient loading state set by Vamp. */
 declare const VampContext: react.Context<boolean>;
@@ -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

@@ -13,7 +13,7 @@ import {
   useExpanded,
   useScrollPin,
   useTransitionLock
-} from "./chunk-OGJMPKZX.js";
+} from "./chunk-6UMIJ4S7.js";
 
 // src/components/bellows.tsx
 import {
@@ -60,12 +60,6 @@ var Slot = forwardRef2(
   }
 );
 
-// src/components/hum.tsx
-import {
-  forwardRef as forwardRef3,
-  useInsertionEffect as useInsertionEffect3
-} from "react";
-
 // src/components/vamp.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -79,27 +73,24 @@ function Vamp({ loading, children }) {
 
 // src/components/hum.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Hum = forwardRef3(
-  function Hum2({ loading, as: Tag = "span", className, children, ...props }, ref) {
-    useInsertionEffect3(injectStyles, []);
-    const vampLoading = useVamp();
-    const isLoading = loading ?? vampLoading;
-    if (isLoading) {
-      const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ jsx4(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ jsx4(Tag, { inert: true, children }) });
-    }
-    return /* @__PURE__ */ jsx4(Tag, { ref, className, ...props, children });
+function Hum({ loading, as: Tag = "span", className, children, ...props }) {
+  const vampLoading = useVamp();
+  const isLoading = loading ?? vampLoading;
+  if (isLoading) {
+    const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
+    return /* @__PURE__ */ jsx4(Tag, { className: merged, ...props, children: /* @__PURE__ */ jsx4(Tag, { inert: true, children }) });
   }
-);
+  return /* @__PURE__ */ jsx4(Tag, { className, ...props, children });
+}
 
-// src/components/ensemble.tsx
+// src/components/overture.tsx
 import {
-  forwardRef as forwardRef6,
-  useInsertionEffect as useInsertionEffect6
+  forwardRef as forwardRef4,
+  useInsertionEffect as useInsertionEffect4
 } from "react";
 
 // src/components/gigbag.tsx
-import { forwardRef as forwardRef4, useInsertionEffect as useInsertionEffect4 } from "react";
+import { forwardRef as forwardRef3, useInsertionEffect as useInsertionEffect3 } from "react";
 
 // src/primitives/use-stable-slot.ts
 import { useState, useCallback, useRef } from "react";
@@ -157,9 +148,9 @@ function useStableSlot(options = {}) {
 
 // src/components/gigbag.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Gigbag = forwardRef4(
+var Gigbag = forwardRef3(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
-    useInsertionEffect4(injectStyles, []);
+    useInsertionEffect3(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
     return /* @__PURE__ */ jsx5(
@@ -175,32 +166,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 +188,51 @@ function useWarmupExit(loading, duration) {
   };
 }
 
+// src/components/overture.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Overture = forwardRef4(
+  function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
+    useInsertionEffect4(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 forwardRef6,
+  useInsertionEffect as useInsertionEffect6
+} from "react";
+
+// src/components/warmup.tsx
+import { forwardRef as forwardRef5, useInsertionEffect as useInsertionEffect5 } from "react";
+import { jsx as jsx7, 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__ */ 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,
@@ -238,18 +246,18 @@ function EnsembleInner({
   useInsertionEffect6(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);
 
 // src/components/warmup-line.tsx
 import { forwardRef as forwardRef7, useInsertionEffect as useInsertionEffect7 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var WarmupLine = forwardRef7(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
     useInsertionEffect7(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 });
   }
 );
 
@@ -288,7 +296,7 @@ function usePresence(show) {
 }
 
 // src/components/glide.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Glide = forwardRef8(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
     useInsertionEffect8(injectStyles, []);
@@ -296,7 +304,7 @@ var Glide = forwardRef8(
     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 +361,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.1",
   "description": "React toolkit for layout stability.",
   "type": "module",
   "main": "./dist/index.cjs",