concertina 0.11.0 → 0.12.0

package/README.md

@@ -188,14 +188,39 @@ import { Hum } from "concertina";
 
 The `className` is passed through to the shimmer so `1lh` inherits the correct font metrics. The shimmer is exactly as tall as the text it replaces because `1lh` resolves to the element's computed line-height. Not font-size, not a token, not a guess.
 
+#### Vamp: ambient loading for entire subtrees
+
+When many Hum instances share the same loading state (e.g. every cell in a table), threading `loading` to each one is boilerplate. Wrap the subtree in `<Vamp>` and every nested `<Hum>` picks it up automatically.
+
+```tsx
+import { Vamp, Hum } from "concertina";
+
+<Vamp loading={isLoading}>
+  <h2><Hum className="text-xl font-bold">{user?.name}</Hum></h2>
+  <p><Hum className="text-sm text-stone">{user?.email}</Hum></p>
+  <p><Hum className="text-sm">{user?.bio}</Hum></p>
+</Vamp>
+```
+
+No `loading` prop on any Hum. They all read from Vamp. An explicit `loading` prop on any individual Hum still overrides context.
+
+Named after musical **vamping** — repeating a pattern while waiting for a cue.
+
 #### Hum props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `loading` | `boolean` | | Show shimmer (true) or children (false) |
+| `loading` | `boolean` | Vamp context | Show shimmer (true) or children (false). Falls back to nearest `<Vamp>` when omitted. |
 | `as` | `ElementType` | `"span"` | HTML element to render |
 | `className` | `string` | | Applied to both shimmer and content states |
 
+#### Vamp props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `loading` | `boolean` | Whether the subtree is in a loading/warmup state |
+| `children` | `ReactNode` | Content to wrap |
+
 > `StableText` is an alias for `Hum`.
 
 ---
@@ -382,6 +407,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 |
 | 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

@@ -1229,12 +1229,13 @@ var styles_default = `/* concertina \u2014 Radix Accordion expand/collapse with
 }
 
 /* Inactive Slot hiding \u2014 belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade \u2014 this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;

package/dist/accordion.js

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

package/dist/{chunk-4DDADLSW.js → chunk-OGJMPKZX.js}

@@ -1190,12 +1190,13 @@ var styles_default = `/* concertina \u2014 Radix Accordion expand/collapse with
 }
 
 /* Inactive Slot hiding \u2014 belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade \u2014 this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;

package/dist/index.cjs

@@ -46,6 +46,8 @@ __export(index_exports, {
   StableSlot: () => Bellows,
   StableText: () => Hum,
   Trigger: () => Trigger2,
+  Vamp: () => Vamp,
+  VampContext: () => VampContext,
   Warmup: () => Warmup,
   WarmupLine: () => WarmupLine,
   pinToScrollTop: () => pinToScrollTop,
@@ -56,6 +58,7 @@ __export(index_exports, {
   useSize: () => useSize,
   useStableSlot: () => useStableSlot,
   useTransitionLock: () => useTransitionLock,
+  useVamp: () => useVamp,
   useWarmupExit: () => useWarmupExit
 });
 module.exports = __toCommonJS(index_exports);
@@ -1247,12 +1250,13 @@ var styles_default = `/* concertina \u2014 Radix Accordion expand/collapse with
 }
 
 /* Inactive Slot hiding \u2014 belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade \u2014 this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;
@@ -1412,18 +1416,20 @@ var Bellows = (0, import_react11.forwardRef)(
 // src/components/slot.tsx
 var import_react12 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var HIDDEN_STYLE = { visibility: "hidden", opacity: 0 };
 var Slot = (0, import_react12.forwardRef)(
   function Slot2({ active, note, as: Tag = "div", style, children, ...props }, ref) {
     (0, import_react12.useInsertionEffect)(injectStyles, []);
     (0, import_react12.useContext)(AxisContext);
     const activeNote = (0, import_react12.useContext)(ActiveNoteContext);
-    const isActive = active ?? (note != null && activeNote != null ? note === activeNote : true);
+    const isActive = active ?? (note != null ? note === activeNote : true);
+    const merged = isActive ? style : style ? { ...style, ...HIDDEN_STYLE } : HIDDEN_STYLE;
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Tag,
       {
         ref,
         inert: !isActive || void 0,
-        style,
+        style: merged,
         ...props,
         children
       }
@@ -1432,34 +1438,49 @@ 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");
-var Hum = (0, import_react13.forwardRef)(
+var VampContext = (0, import_react13.createContext)(false);
+function useVamp() {
+  return (0, import_react13.useContext)(VampContext);
+}
+function Vamp({ loading, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VampContext.Provider, { value: 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_react13.useInsertionEffect)(injectStyles, []);
-    if (loading) {
+    (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_runtime14.jsx)(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tag, { inert: true, children }) });
+      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_runtime14.jsx)(Tag, { ref, className, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className, ...props, children });
   }
 );
 
 // src/components/ensemble.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/gigbag.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/primitives/use-stable-slot.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var RATCHET_FLOOR = -Infinity;
 function useStableSlot(options = {}) {
   const { axis = "both" } = options;
-  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)(
+  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)(
     (el) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1506,13 +1527,13 @@ function useStableSlot(options = {}) {
 }
 
 // src/components/gigbag.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Gigbag = (0, import_react15.forwardRef)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Gigbag = (0, import_react16.forwardRef)(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
-    (0, import_react15.useInsertionEffect)(injectStyles, []);
+    (0, import_react16.useInsertionEffect)(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Tag,
       {
         ref: mergeRefs(ratchetRef, fwdRef),
@@ -1526,19 +1547,19 @@ var Gigbag = (0, import_react15.forwardRef)(
 );
 
 // src/components/warmup.tsx
-var import_react16 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Warmup = (0, import_react16.forwardRef)(
+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_react16.useInsertionEffect)(injectStyles, []);
+    (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_runtime16.jsxs)("div", { className: "concertina-warmup-bone", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "concertina-warmup-line" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "concertina-warmup-line" })
+    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_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Tag,
       {
         ref,
@@ -1552,11 +1573,11 @@ var Warmup = (0, import_react16.forwardRef)(
 );
 
 // src/primitives/use-warmup-exit.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useWarmupExit(loading, duration) {
-  const [exiting, setExiting] = (0, import_react17.useState)(false);
-  const prevLoading = (0, import_react17.useRef)(loading);
-  (0, import_react17.useEffect)(() => {
+  const [exiting, setExiting] = (0, import_react18.useState)(false);
+  const prevLoading = (0, import_react18.useRef)(loading);
+  (0, import_react18.useEffect)(() => {
     if (prevLoading.current && !loading) {
       setExiting(true);
       const id = setTimeout(() => setExiting(false), duration);
@@ -1574,7 +1595,7 @@ function useWarmupExit(loading, duration) {
 }
 
 // src/components/ensemble.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function EnsembleInner({
   items,
   loading,
@@ -1585,33 +1606,33 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  (0, import_react18.useInsertionEffect)(injectStyles, []);
+  (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_runtime17.jsx)(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tag, { className, children: items.map(renderItem) }) });
+  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) }) });
 }
-var Ensemble = (0, import_react18.forwardRef)(EnsembleInner);
+var Ensemble = (0, import_react19.forwardRef)(EnsembleInner);
 
 // src/components/warmup-line.tsx
-var import_react19 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var WarmupLine = (0, import_react19.forwardRef)(
+var import_react20 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var WarmupLine = (0, import_react20.forwardRef)(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    (0, import_react19.useInsertionEffect)(injectStyles, []);
+    (0, import_react20.useInsertionEffect)(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, { ref, className: merged, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tag, { ref, className: merged, ...props });
   }
 );
 
 // src/components/glide.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/primitives/use-presence.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function usePresence2(show) {
-  const [mounted, setMounted] = (0, import_react20.useState)(show);
-  const [phase, setPhase] = (0, import_react20.useState)(show ? "entered" : "exiting");
-  (0, import_react20.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react21.useState)(show);
+  const [phase, setPhase] = (0, import_react21.useState)(show ? "entered" : "exiting");
+  (0, import_react21.useEffect)(() => {
     if (show) {
       setMounted(true);
       setPhase("entering");
@@ -1619,7 +1640,7 @@ function usePresence2(show) {
       setPhase("exiting");
     }
   }, [show]);
-  const onAnimationEnd = (0, import_react20.useCallback)(
+  const onAnimationEnd = (0, import_react21.useCallback)(
     (e) => {
       if (e.target !== e.currentTarget) return;
       if (phase === "entering") setPhase("entered");
@@ -1631,15 +1652,15 @@ function usePresence2(show) {
 }
 
 // src/components/glide.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Glide = (0, import_react21.forwardRef)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Glide = (0, import_react22.forwardRef)(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react21.useInsertionEffect)(injectStyles, []);
+    (0, import_react22.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_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Tag,
       {
         ref,
@@ -1653,12 +1674,12 @@ var Glide = (0, import_react21.forwardRef)(
 );
 
 // src/primitives/use-size.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var NO_OBSERVATION = { width: Number.NaN, height: Number.NaN };
 function useSize() {
-  const [size, setSize] = (0, import_react22.useState)(NO_OBSERVATION);
-  const observerRef = (0, import_react22.useRef)(null);
-  const ref = (0, import_react22.useCallback)((el) => {
+  const [size, setSize] = (0, import_react23.useState)(NO_OBSERVATION);
+  const observerRef = (0, import_react23.useRef)(null);
+  const ref = (0, import_react23.useCallback)((el) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -1687,12 +1708,12 @@ function useSize() {
 }
 
 // src/accordion/use-concertina.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react23.useState)("");
-  const [switching, setSwitching] = (0, import_react23.useState)(false);
-  const itemRefs = (0, import_react23.useRef)({});
-  const onValueChange = (0, import_react23.useCallback)(
+  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)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1704,14 +1725,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react23.useCallback)(
+  const getItemRef = (0, import_react24.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1742,6 +1763,8 @@ function useConcertina() {
   StableSlot,
   StableText,
   Trigger,
+  Vamp,
+  VampContext,
   Warmup,
   WarmupLine,
   pinToScrollTop,
@@ -1752,5 +1775,6 @@ function useConcertina() {
   useSize,
   useStableSlot,
   useTransitionLock,
+  useVamp,
   useWarmupExit
 });

package/dist/index.d.cts

@@ -2,6 +2,7 @@ export { ConcertinaContext, ConcertinaRootProps, ConcertinaStore, Content, Item,
 export { Header, Trigger } from '@radix-ui/react-accordion';
 import * as react from 'react';
 import { HTMLAttributes, ElementType, ReactNode, Ref, ReactElement, AnimationEvent, DependencyList, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Axis = "width" | "height" | "both";
 interface BellowsProps extends HTMLAttributes<HTMLElement> {
@@ -34,15 +35,18 @@ interface SlotProps extends HTMLAttributes<HTMLElement> {
  * All slots overlap via CSS grid. Inactive slots are hidden
  * but still contribute to grid cell sizing.
  *
- * Inactive hiding is handled entirely by CSS via the [inert] attribute:
- *   .concertina-stable-slot > [inert] { visibility: hidden; opacity: 0; }
- * No inline style overrides needed — injectStyles guarantees the rules exist.
+ * Inactive hiding uses inline styles (can't be overridden by CSS cascade)
+ * plus the [inert] attribute for accessibility (non-focusable, non-interactive).
+ * CSS `.concertina-stable-slot > [inert]` serves as a backup.
  */
 declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
 
 interface HumProps extends HTMLAttributes<HTMLElement> {
-    /** Whether data is loading. Shows shimmer when true, children when false. */
-    loading: boolean;
+    /**
+     * Whether data is loading. Shows shimmer when true, children when false.
+     * When omitted, falls back to the nearest `<Vamp>` ancestor's loading state.
+     */
+    loading?: boolean;
     /** HTML element to render. Default: "span". */
     as?: ElementType;
 }
@@ -56,9 +60,35 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  *
  * The className is passed through so `1lh` inherits the correct font
  * metrics from the consuming context.
+ *
+ * When no explicit `loading` prop is provided, Hum reads from the
+ * nearest `<Vamp>` ancestor. This lets a single provider control
+ * shimmer state for an entire subtree.
  */
 declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
 
+/** Context carrying the ambient loading state set by Vamp. */
+declare const VampContext: react.Context<boolean>;
+/**
+ * Read the nearest Vamp's loading state.
+ * Returns `false` when no Vamp ancestor exists.
+ */
+declare function useVamp(): boolean;
+interface VampProps {
+    /** Whether the subtree is in a loading/warmup state. */
+    loading: boolean;
+    children: ReactNode;
+}
+/**
+ * Ambient loading provider — musical "vamping" (repeating a pattern
+ * while waiting for a cue).
+ *
+ * Wrapping a subtree in `<Vamp loading>` lets every nested `<Hum>`
+ * pick up the loading state automatically, without threading an
+ * explicit `loading` prop through every cell.
+ */
+declare function Vamp({ loading, children }: VampProps): react_jsx_runtime.JSX.Element;
+
 interface EnsembleProps<T> extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     /** Data items to render. */
     items: T[];
@@ -286,4 +316,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, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useWarmupExit };
+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 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { ConcertinaContext, ConcertinaRootProps, ConcertinaStore, Content, Item,
 export { Header, Trigger } from '@radix-ui/react-accordion';
 import * as react from 'react';
 import { HTMLAttributes, ElementType, ReactNode, Ref, ReactElement, AnimationEvent, DependencyList, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Axis = "width" | "height" | "both";
 interface BellowsProps extends HTMLAttributes<HTMLElement> {
@@ -34,15 +35,18 @@ interface SlotProps extends HTMLAttributes<HTMLElement> {
  * All slots overlap via CSS grid. Inactive slots are hidden
  * but still contribute to grid cell sizing.
  *
- * Inactive hiding is handled entirely by CSS via the [inert] attribute:
- *   .concertina-stable-slot > [inert] { visibility: hidden; opacity: 0; }
- * No inline style overrides needed — injectStyles guarantees the rules exist.
+ * Inactive hiding uses inline styles (can't be overridden by CSS cascade)
+ * plus the [inert] attribute for accessibility (non-focusable, non-interactive).
+ * CSS `.concertina-stable-slot > [inert]` serves as a backup.
  */
 declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
 
 interface HumProps extends HTMLAttributes<HTMLElement> {
-    /** Whether data is loading. Shows shimmer when true, children when false. */
-    loading: boolean;
+    /**
+     * Whether data is loading. Shows shimmer when true, children when false.
+     * When omitted, falls back to the nearest `<Vamp>` ancestor's loading state.
+     */
+    loading?: boolean;
     /** HTML element to render. Default: "span". */
     as?: ElementType;
 }
@@ -56,9 +60,35 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  *
  * The className is passed through so `1lh` inherits the correct font
  * metrics from the consuming context.
+ *
+ * When no explicit `loading` prop is provided, Hum reads from the
+ * nearest `<Vamp>` ancestor. This lets a single provider control
+ * shimmer state for an entire subtree.
  */
 declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
 
+/** Context carrying the ambient loading state set by Vamp. */
+declare const VampContext: react.Context<boolean>;
+/**
+ * Read the nearest Vamp's loading state.
+ * Returns `false` when no Vamp ancestor exists.
+ */
+declare function useVamp(): boolean;
+interface VampProps {
+    /** Whether the subtree is in a loading/warmup state. */
+    loading: boolean;
+    children: ReactNode;
+}
+/**
+ * Ambient loading provider — musical "vamping" (repeating a pattern
+ * while waiting for a cue).
+ *
+ * Wrapping a subtree in `<Vamp loading>` lets every nested `<Hum>`
+ * pick up the loading state automatically, without threading an
+ * explicit `loading` prop through every cell.
+ */
+declare function Vamp({ loading, children }: VampProps): react_jsx_runtime.JSX.Element;
+
 interface EnsembleProps<T> extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     /** Data items to render. */
     items: T[];
@@ -286,4 +316,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, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useWarmupExit };
+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 };

package/dist/index.js

@@ -13,7 +13,7 @@ import {
   useExpanded,
   useScrollPin,
   useTransitionLock
-} from "./chunk-4DDADLSW.js";
+} from "./chunk-OGJMPKZX.js";
 
 // src/components/bellows.tsx
 import {
@@ -39,18 +39,20 @@ import {
   useInsertionEffect as useInsertionEffect2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var HIDDEN_STYLE = { visibility: "hidden", opacity: 0 };
 var Slot = forwardRef2(
   function Slot2({ active, note, as: Tag = "div", style, children, ...props }, ref) {
     useInsertionEffect2(injectStyles, []);
     useContext(AxisContext);
     const activeNote = useContext(ActiveNoteContext);
-    const isActive = active ?? (note != null && activeNote != null ? note === activeNote : true);
+    const isActive = active ?? (note != null ? note === activeNote : true);
+    const merged = isActive ? style : style ? { ...style, ...HIDDEN_STYLE } : HIDDEN_STYLE;
     return /* @__PURE__ */ jsx2(
       Tag,
       {
         ref,
         inert: !isActive || void 0,
-        style,
+        style: merged,
         ...props,
         children
       }
@@ -63,15 +65,30 @@ 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";
+var VampContext = createContext2(false);
+function useVamp() {
+  return useContext2(VampContext);
+}
+function Vamp({ loading, children }) {
+  return /* @__PURE__ */ jsx3(VampContext.Provider, { value: 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, []);
-    if (loading) {
+    const vampLoading = useVamp();
+    const isLoading = loading ?? vampLoading;
+    if (isLoading) {
       const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ jsx3(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ jsx3(Tag, { inert: true, children }) });
+      return /* @__PURE__ */ jsx4(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ jsx4(Tag, { inert: true, children }) });
     }
-    return /* @__PURE__ */ jsx3(Tag, { ref, className, ...props, children });
+    return /* @__PURE__ */ jsx4(Tag, { ref, className, ...props, children });
   }
 );
 
@@ -139,13 +156,13 @@ function useStableSlot(options = {}) {
 }
 
 // src/components/gigbag.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Gigbag = forwardRef4(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
     useInsertionEffect4(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Tag,
       {
         ref: mergeRefs(ratchetRef, fwdRef),
@@ -160,18 +177,18 @@ var Gigbag = forwardRef4(
 
 // src/components/warmup.tsx
 import { forwardRef as forwardRef5, useInsertionEffect as useInsertionEffect5 } from "react";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+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__ */ jsx5("div", { className: "concertina-warmup-line" }),
-      /* @__PURE__ */ jsx5("div", { className: "concertina-warmup-line" })
+      /* @__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__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       Tag,
       {
         ref,
@@ -207,7 +224,7 @@ function useWarmupExit(loading, duration) {
 }
 
 // src/components/ensemble.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function EnsembleInner({
   items,
   loading,
@@ -221,18 +238,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__ */ jsx6(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ jsx6(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ jsx6(Tag, { className, children: items.map(renderItem) }) });
+  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) }) });
 }
 var Ensemble = forwardRef6(EnsembleInner);
 
 // src/components/warmup-line.tsx
 import { forwardRef as forwardRef7, useInsertionEffect as useInsertionEffect7 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } 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__ */ jsx7(Tag, { ref, className: merged, ...props });
+    return /* @__PURE__ */ jsx8(Tag, { ref, className: merged, ...props });
   }
 );
 
@@ -271,7 +288,7 @@ function usePresence(show) {
 }
 
 // src/components/glide.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Glide = forwardRef8(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
     useInsertionEffect8(injectStyles, []);
@@ -279,7 +296,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__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Tag,
       {
         ref,
@@ -342,6 +359,8 @@ export {
   Bellows as StableSlot,
   Hum as StableText,
   Trigger2 as Trigger,
+  Vamp,
+  VampContext,
   Warmup,
   WarmupLine,
   pinToScrollTop,
@@ -352,5 +371,6 @@ export {
   useSize,
   useStableSlot,
   useTransitionLock,
+  useVamp,
   useWarmupExit
 };

package/dist/styles.css

@@ -67,12 +67,13 @@
 }
 
 /* Inactive Slot hiding — belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade — this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;

package/package.json

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