concertina 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,18 +17,73 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ConcertinaContext: () => ConcertinaContext,
+  ConcertinaStore: () => ConcertinaStore,
+  Content: () => Content2,
+  Header: () => import_react_accordion.Header,
+  Item: () => Item2,
+  Root: () => Root2,
+  Trigger: () => import_react_accordion.Trigger,
   pinToScrollTop: () => pinToScrollTop,
-  useConcertina: () => useConcertina
+  useConcertina: () => useConcertina,
+  useExpanded: () => useExpanded
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/use-concertina.ts
+// src/root.tsx
+var import_react2 = require("react");
+var Accordion = __toESM(require("@radix-ui/react-accordion"), 1);
+
+// src/store.ts
 var import_react = require("react");
+var ConcertinaStore = class {
+  constructor() {
+    this._value = "";
+    this._switching = false;
+    this._itemRefs = {};
+    this._listeners = /* @__PURE__ */ new Set();
+    this.subscribe = (listener) => {
+      this._listeners.add(listener);
+      return () => this._listeners.delete(listener);
+    };
+    this.getValue = () => this._value;
+    this.getSwitching = () => this._switching;
+  }
+  _notify() {
+    for (const listener of this._listeners) listener();
+  }
+  setValue(newValue) {
+    const wasSwitching = !!this._value && this._value !== newValue && !!newValue;
+    this._switching = wasSwitching;
+    this._value = newValue || "";
+    this._notify();
+  }
+  clearSwitching() {
+    if (!this._switching) return;
+    this._switching = false;
+    this._notify();
+  }
+  getItemRef(id) {
+    return this._itemRefs[id] ?? null;
+  }
+  setItemRef(id, el) {
+    this._itemRefs[id] = el;
+  }
+};
+var ConcertinaContext = (0, import_react.createContext)(null);
 
 // src/pin-to-scroll-top.ts
 function pinToScrollTop(el) {
@@ -58,12 +115,110 @@ function pinToScrollTop(el) {
   }
 }
 
+// src/root.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Root2 = (0, import_react2.forwardRef)(
+  function Root3({ collapsible = true, children, ...props }, forwardedRef) {
+    const storeRef = (0, import_react2.useRef)(null);
+    if (!storeRef.current) {
+      storeRef.current = new ConcertinaStore();
+    }
+    const store = storeRef.current;
+    const value = (0, import_react2.useSyncExternalStore)(
+      store.subscribe,
+      store.getValue,
+      store.getValue
+    );
+    const switching = (0, import_react2.useSyncExternalStore)(
+      store.subscribe,
+      store.getSwitching,
+      store.getSwitching
+    );
+    const onValueChange = (0, import_react2.useCallback)(
+      (newValue) => store.setValue(newValue),
+      [store]
+    );
+    (0, import_react2.useLayoutEffect)(() => {
+      if (!value) return;
+      pinToScrollTop(store.getItemRef(value));
+    }, [value, store]);
+    (0, import_react2.useEffect)(() => {
+      if (switching) store.clearSwitching();
+    }, [switching, store]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConcertinaContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Accordion.Root,
+      {
+        ref: forwardedRef,
+        type: "single",
+        collapsible,
+        value,
+        onValueChange,
+        "data-switching": switching || void 0,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+
+// src/item.tsx
+var import_react3 = require("react");
+var Accordion2 = __toESM(require("@radix-ui/react-accordion"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Item2 = (0, import_react3.forwardRef)(function Item3({ value, ...props }, forwardedRef) {
+  const store = (0, import_react3.useContext)(ConcertinaContext);
+  const mergedRef = (0, import_react3.useCallback)(
+    (el) => {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(el);
+      } else if (forwardedRef) {
+        forwardedRef.current = el;
+      }
+      store?.setItemRef(value, el);
+    },
+    [forwardedRef, store, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Accordion2.Item, { ref: mergedRef, value, ...props });
+});
+
+// src/content.tsx
+var import_react4 = require("react");
+var Accordion3 = __toESM(require("@radix-ui/react-accordion"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Content2 = (0, import_react4.forwardRef)(function Content3({ className, ...props }, ref) {
+  const merged = className ? `concertina-content ${className}` : "concertina-content";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Accordion3.Content, { ref, className: merged, ...props });
+});
+
+// src/use-expanded.ts
+var import_react5 = require("react");
+function useStore() {
+  const store = (0, import_react5.useContext)(ConcertinaContext);
+  if (!store) {
+    throw new Error("useExpanded must be used inside <Concertina.Root>");
+  }
+  return store;
+}
+function useExpanded(id) {
+  const store = useStore();
+  return (0, import_react5.useSyncExternalStore)(
+    store.subscribe,
+    () => store.getValue() === id,
+    () => false
+    // server snapshot
+  );
+}
+
+// src/index.ts
+var import_react_accordion = require("@radix-ui/react-accordion");
+
 // src/use-concertina.ts
+var import_react6 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react.useState)("");
-  const [switching, setSwitching] = (0, import_react.useState)(false);
-  const itemRefs = (0, import_react.useRef)({});
-  const onValueChange = (0, import_react.useCallback)(
+  const [value, setValue] = (0, import_react6.useState)("");
+  const [switching, setSwitching] = (0, import_react6.useState)(false);
+  const itemRefs = (0, import_react6.useRef)({});
+  const onValueChange = (0, import_react6.useCallback)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -75,14 +230,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react.useCallback)(
+  const getItemRef = (0, import_react6.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -97,6 +252,14 @@ function useConcertina() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ConcertinaContext,
+  ConcertinaStore,
+  Content,
+  Header,
+  Item,
+  Root,
+  Trigger,
   pinToScrollTop,
-  useConcertina
+  useConcertina,
+  useExpanded
 });

package/dist/index.d.cts

@@ -1,3 +1,46 @@
+import * as react from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+export { Header, Trigger } from '@radix-ui/react-accordion';
+
+declare const Root: react.ForwardRefExoticComponent<Omit<Omit<Accordion.AccordionSingleProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    type?: "single";
+    collapsible?: boolean;
+}, "type"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Item: react.ForwardRefExoticComponent<Omit<Accordion.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Content: react.ForwardRefExoticComponent<Omit<Accordion.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Per-item expansion hook. Returns true only when this item is expanded.
+ *
+ * Uses useSyncExternalStore so the component only re-renders when
+ * its own boolean flips — not on every accordion state change.
+ */
+declare function useExpanded(id: string): boolean;
+
+type Listener = () => void;
+/**
+ * External store for concertina accordion state.
+ * Lives outside React — one instance per Root.
+ * Subscribers get notified on value or switching changes.
+ */
+declare class ConcertinaStore {
+    private _value;
+    private _switching;
+    private _itemRefs;
+    private _listeners;
+    subscribe: (listener: Listener) => (() => void);
+    private _notify;
+    getValue: () => string;
+    getSwitching: () => boolean;
+    setValue(newValue: string): void;
+    clearSwitching(): void;
+    getItemRef(id: string): HTMLElement | null;
+    setItemRef(id: string, el: HTMLElement | null): void;
+}
+declare const ConcertinaContext: react.Context<ConcertinaStore | null>;
+
 interface ConcertinaRootProps {
     value: string;
     onValueChange: (value: string) => void;
@@ -40,4 +83,4 @@ declare function useConcertina(): UseConcertinaReturn;
  */
 declare function pinToScrollTop(el: HTMLElement | null): void;
 
-export { type ConcertinaRootProps, type UseConcertinaReturn, pinToScrollTop, useConcertina };
+export { ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Item, Root, type UseConcertinaReturn, pinToScrollTop, useConcertina, useExpanded };

package/dist/index.d.ts

@@ -1,3 +1,46 @@
+import * as react from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+export { Header, Trigger } from '@radix-ui/react-accordion';
+
+declare const Root: react.ForwardRefExoticComponent<Omit<Omit<Accordion.AccordionSingleProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    type?: "single";
+    collapsible?: boolean;
+}, "type"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Item: react.ForwardRefExoticComponent<Omit<Accordion.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Content: react.ForwardRefExoticComponent<Omit<Accordion.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Per-item expansion hook. Returns true only when this item is expanded.
+ *
+ * Uses useSyncExternalStore so the component only re-renders when
+ * its own boolean flips — not on every accordion state change.
+ */
+declare function useExpanded(id: string): boolean;
+
+type Listener = () => void;
+/**
+ * External store for concertina accordion state.
+ * Lives outside React — one instance per Root.
+ * Subscribers get notified on value or switching changes.
+ */
+declare class ConcertinaStore {
+    private _value;
+    private _switching;
+    private _itemRefs;
+    private _listeners;
+    subscribe: (listener: Listener) => (() => void);
+    private _notify;
+    getValue: () => string;
+    getSwitching: () => boolean;
+    setValue(newValue: string): void;
+    clearSwitching(): void;
+    getItemRef(id: string): HTMLElement | null;
+    setItemRef(id: string, el: HTMLElement | null): void;
+}
+declare const ConcertinaContext: react.Context<ConcertinaStore | null>;
+
 interface ConcertinaRootProps {
     value: string;
     onValueChange: (value: string) => void;
@@ -40,4 +83,4 @@ declare function useConcertina(): UseConcertinaReturn;
  */
 declare function pinToScrollTop(el: HTMLElement | null): void;
 
-export { type ConcertinaRootProps, type UseConcertinaReturn, pinToScrollTop, useConcertina };
+export { ConcertinaContext, type ConcertinaRootProps, ConcertinaStore, Content, Item, Root, type UseConcertinaReturn, pinToScrollTop, useConcertina, useExpanded };

package/dist/index.js

@@ -1,11 +1,51 @@
-// src/use-concertina.ts
+// src/root.tsx
 import {
-  useState,
-  useCallback,
+  forwardRef,
   useRef,
   useLayoutEffect,
-  useEffect
+  useEffect,
+  useSyncExternalStore,
+  useCallback
 } from "react";
+import * as Accordion from "@radix-ui/react-accordion";
+
+// src/store.ts
+import { createContext } from "react";
+var ConcertinaStore = class {
+  constructor() {
+    this._value = "";
+    this._switching = false;
+    this._itemRefs = {};
+    this._listeners = /* @__PURE__ */ new Set();
+    this.subscribe = (listener) => {
+      this._listeners.add(listener);
+      return () => this._listeners.delete(listener);
+    };
+    this.getValue = () => this._value;
+    this.getSwitching = () => this._switching;
+  }
+  _notify() {
+    for (const listener of this._listeners) listener();
+  }
+  setValue(newValue) {
+    const wasSwitching = !!this._value && this._value !== newValue && !!newValue;
+    this._switching = wasSwitching;
+    this._value = newValue || "";
+    this._notify();
+  }
+  clearSwitching() {
+    if (!this._switching) return;
+    this._switching = false;
+    this._notify();
+  }
+  getItemRef(id) {
+    return this._itemRefs[id] ?? null;
+  }
+  setItemRef(id, el) {
+    this._itemRefs[id] = el;
+  }
+};
+var ConcertinaContext = createContext(null);
 
 // src/pin-to-scroll-top.ts
 function pinToScrollTop(el) {
@@ -37,12 +77,120 @@ function pinToScrollTop(el) {
   }
 }
 
+// src/root.tsx
+import { jsx } from "react/jsx-runtime";
+var Root2 = forwardRef(
+  function Root3({ collapsible = true, children, ...props }, forwardedRef) {
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+      storeRef.current = new ConcertinaStore();
+    }
+    const store = storeRef.current;
+    const value = useSyncExternalStore(
+      store.subscribe,
+      store.getValue,
+      store.getValue
+    );
+    const switching = useSyncExternalStore(
+      store.subscribe,
+      store.getSwitching,
+      store.getSwitching
+    );
+    const onValueChange = useCallback(
+      (newValue) => store.setValue(newValue),
+      [store]
+    );
+    useLayoutEffect(() => {
+      if (!value) return;
+      pinToScrollTop(store.getItemRef(value));
+    }, [value, store]);
+    useEffect(() => {
+      if (switching) store.clearSwitching();
+    }, [switching, store]);
+    return /* @__PURE__ */ jsx(ConcertinaContext.Provider, { value: store, children: /* @__PURE__ */ jsx(
+      Accordion.Root,
+      {
+        ref: forwardedRef,
+        type: "single",
+        collapsible,
+        value,
+        onValueChange,
+        "data-switching": switching || void 0,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+
+// src/item.tsx
+import {
+  forwardRef as forwardRef2,
+  useContext,
+  useCallback as useCallback2
+} from "react";
+import * as Accordion2 from "@radix-ui/react-accordion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Item2 = forwardRef2(function Item3({ value, ...props }, forwardedRef) {
+  const store = useContext(ConcertinaContext);
+  const mergedRef = useCallback2(
+    (el) => {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(el);
+      } else if (forwardedRef) {
+        forwardedRef.current = el;
+      }
+      store?.setItemRef(value, el);
+    },
+    [forwardedRef, store, value]
+  );
+  return /* @__PURE__ */ jsx2(Accordion2.Item, { ref: mergedRef, value, ...props });
+});
+
+// src/content.tsx
+import { forwardRef as forwardRef3 } from "react";
+import * as Accordion3 from "@radix-ui/react-accordion";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Content2 = forwardRef3(function Content3({ className, ...props }, ref) {
+  const merged = className ? `concertina-content ${className}` : "concertina-content";
+  return /* @__PURE__ */ jsx3(Accordion3.Content, { ref, className: merged, ...props });
+});
+
+// src/use-expanded.ts
+import { useContext as useContext2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useStore() {
+  const store = useContext2(ConcertinaContext);
+  if (!store) {
+    throw new Error("useExpanded must be used inside <Concertina.Root>");
+  }
+  return store;
+}
+function useExpanded(id) {
+  const store = useStore();
+  return useSyncExternalStore2(
+    store.subscribe,
+    () => store.getValue() === id,
+    () => false
+    // server snapshot
+  );
+}
+
+// src/index.ts
+import { Trigger, Header } from "@radix-ui/react-accordion";
+
 // src/use-concertina.ts
+import {
+  useState,
+  useCallback as useCallback3,
+  useRef as useRef2,
+  useLayoutEffect as useLayoutEffect2,
+  useEffect as useEffect2
+} from "react";
 function useConcertina() {
   const [value, setValue] = useState("");
   const [switching, setSwitching] = useState(false);
-  const itemRefs = useRef({});
-  const onValueChange = useCallback(
+  const itemRefs = useRef2({});
+  const onValueChange = useCallback3(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -54,14 +202,14 @@ function useConcertina() {
     },
     [value]
   );
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  useEffect(() => {
+  useEffect2(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = useCallback(
+  const getItemRef = useCallback3(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -75,6 +223,14 @@ function useConcertina() {
   return { value, onValueChange, switching, rootProps, getItemRef };
 }
 export {
+  ConcertinaContext,
+  ConcertinaStore,
+  Content2 as Content,
+  Header,
+  Item2 as Item,
+  Root2 as Root,
+  Trigger,
   pinToScrollTop,
-  useConcertina
+  useConcertina,
+  useExpanded
 };

package/dist/styles.css

@@ -40,15 +40,15 @@
   }
 }
 
-/* When switching between items, suppress all animations so the layout
-   is immediately in its final state for scroll pinning.
+/* When switching between items, run animations instantly so layout
+   is in its final state for scroll pinning. Uses duration: 0s rather
+   than animation: none to avoid re-triggering the close animation
+   when data-switching is cleared after paint.
    data-switching is set by useConcertina(), cleared after paint. */
 [data-switching] .concertina-content[data-state="closed"] {
-  animation: none;
-  height: 0;
-  opacity: 0;
+  animation-duration: 0s;
 }
 
 [data-switching] .concertina-content[data-state="open"] {
-  animation: none;
+  animation-duration: 0s;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "concertina",
-  "version": "0.3.0",
-  "description": "React hook for scroll-pinned Radix Accordion panels. Zero dependencies.",
+  "version": "0.4.0",
+  "description": "Component API + hook for scroll-pinned Radix Accordion panels with per-item memoization.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -31,11 +31,14 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=18.0.0",
+    "@radix-ui/react-accordion": ">=1.0.0"
   },
   "devDependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
     "@types/react": "^19.0.0",
     "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },
@@ -45,7 +48,9 @@
     "scroll",
     "pin",
     "react",
-    "hook"
+    "hook",
+    "memoization",
+    "useSyncExternalStore"
   ],
   "license": "MIT",
   "repository": {