react-panel-layout 0.5.2 → 0.6.0

package/dist/sticky-header.js

@@ -1,198 +1,89 @@
-import { jsxs as Y, jsx as T } from "react/jsx-runtime";
-import * as s from "react";
-import { u as j } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
-function F(e) {
-  const [t, r] = s.useState(() => typeof window > "u" ? { scrollTop: 0, scrollLeft: 0 } : e ? {
-    scrollTop: e.scrollTop,
-    scrollLeft: e.scrollLeft
-  } : {
-    scrollTop: window.scrollY,
-    scrollLeft: window.scrollX
-  });
-  return s.useEffect(() => {
-    const o = () => {
-      r(e ? {
-        scrollTop: e.scrollTop,
-        scrollLeft: e.scrollLeft
-      } : {
-        scrollTop: window.scrollY,
-        scrollLeft: window.scrollX
-      });
-    };
-    o();
-    const l = e ?? window;
-    return l.addEventListener("scroll", o, { passive: !0 }), () => {
-      l.removeEventListener("scroll", o);
-    };
-  }, [e]), t;
-}
-const L = /* @__PURE__ */ new Map(), q = (e) => {
-  const { box: t = "content-box" } = e, r = `resize-box:${t}`, o = L.get(r);
-  if (o)
-    return o;
-  const l = new class {
-    #e = /* @__PURE__ */ new Map();
-    #t = new ResizeObserver((i, u) => {
-      i.forEach((f) => {
-        const h = this.#e.get(f.target);
-        h && h(f, u);
-      });
-    });
-    observe(i, u) {
-      return this.#e.set(i, u), this.#t.observe(i, e), () => {
-        this.#e.delete(i), this.#t.unobserve(i);
-      };
-    }
-  }();
-  return L.set(r, l), l;
-};
-function D(e, { box: t }) {
-  const [r, o] = s.useState(null), l = e.current;
-  s.useEffect(() => l ? q({ box: t }).observe(l, (f) => {
-    o(f);
-  }) : void 0, [t, l]);
-  const i = s.useMemo(() => {
-    if (!r)
-      return null;
-    if (r.borderBoxSize?.length > 0) {
-      const u = r.borderBoxSize[0];
-      return new DOMRect(0, 0, u.inlineSize, u.blockSize);
-    }
-    return r.contentRect;
-  }, [r]);
-  return { entry: r, rect: i };
-}
-function K(e) {
-  const t = getComputedStyle(e), r = t.overflowY, o = t.overflowX;
-  return r === "scroll" || r === "auto" || o === "scroll" || o === "auto";
-}
-function P(e) {
-  if (!e)
-    return null;
-  let t = e.parentElement;
-  for (; t; ) {
-    if (K(t))
-      return t;
-    t = t.parentElement;
-  }
-  return null;
-}
-function W(e) {
-  const [t, r] = s.useState(null);
-  return s.useEffect(() => {
-    const o = e.current;
-    if (!o) {
-      r(null);
-      return;
-    }
-    const l = P(o);
-    r(l);
-  }, [e]), t;
+import { jsxs as F, jsx as y } from "react/jsx-runtime";
+import * as a from "react";
+import { u as O } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+function C(o) {
+  return {
+    position: "relative",
+    paddingTop: o === "top" ? "env(safe-area-inset-top)" : void 0,
+    paddingBottom: o === "bottom" ? "env(safe-area-inset-bottom)" : void 0,
+    boxSizing: "border-box"
+  };
 }
-const B = {
-  position: "relative"
-}, G = {
-  position: "relative",
-  paddingTop: "env(safe-area-inset-top)",
-  boxSizing: "border-box"
-}, J = {
+const I = {
   zIndex: 1
 };
-function Q(e) {
-  return e ? {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
+function M(o) {
+  return {
     opacity: 0,
     zIndex: 0,
     userSelect: "none",
-    pointerEvents: "none"
-  } : {
-    position: "absolute",
-    top: 0,
+    pointerEvents: "none",
+    // Disable transitions to prevent jank - styles are updated via RAF
+    transition: "none",
+    // Enable GPU acceleration for smoother animations
+    willChange: "height, opacity",
+    transform: "translateZ(0)",
+    position: "fixed",
+    top: o === "top" ? 0 : void 0,
+    bottom: o === "bottom" ? 0 : void 0,
     left: 0,
-    right: 0,
-    opacity: 0,
-    zIndex: 0,
-    userSelect: "none",
-    pointerEvents: "none"
+    right: 0
   };
 }
-function U(e) {
-  return e ? B : {
-    ...B,
-    overflow: "hidden"
-  };
-}
-const V = ({ cover: e, children: t, onStateChange: r }) => {
-  const o = s.useRef(null), l = s.useRef(null), i = s.useRef(null), u = W(i), f = u === null, { scrollTop: h } = F(u), z = s.useRef(h);
-  z.current = h;
-  const w = s.useRef(null), { rect: C } = D(o, {});
-  Object.is(w.current, C) || (w.current = C);
-  const $ = s.useRef(null), [k, A] = s.useState({
+const U = {
+  position: "relative"
+}, N = ({
+  position: o = "top",
+  cover: R,
+  children: p,
+  onStateChange: v
+}) => {
+  const g = a.useRef(null), x = a.useRef(null), [S, w] = a.useState({
     isStuck: !1,
-    scrollOffset: 0,
-    containerType: "document"
-  }), E = s.useRef(k), x = s.useCallback(
-    (a) => {
-      const c = E.current;
-      (c.isStuck !== a.isStuck || c.scrollOffset !== a.scrollOffset || c.containerType !== a.containerType) && (E.current = a, A(a), r?.(a));
+    scrollOffset: 0
+  }), b = a.useRef(S), h = a.useCallback(
+    (s) => {
+      const e = b.current;
+      (e.isStuck !== s.isStuck || e.scrollOffset !== s.scrollOffset) && (b.current = s, w(s), v?.(s));
     },
-    [r]
+    [v]
   );
-  j(() => {
-    const a = o.current, c = l.current, H = i.current;
-    if (!c || !a || !H)
+  O(() => {
+    const s = g.current, e = x.current;
+    if (!e || !s)
       return;
-    let y = Number.NaN, b = null, S = !1;
-    const I = () => {
-      const n = w.current;
-      if (!n)
-        return;
-      const v = z.current;
-      if (f) {
-        const p = n.height - v;
-        p !== y && (c.style.opacity = "1", c.style.height = `${p}px`, y = p), (n.x >= 0 || n.y >= 0 || n.width > 0) && b !== n && (c.style.left = `${n.x}px`, c.style.top = `${n.y}px`, c.style.width = `${n.width}px`, b = n);
-        const d = v > 0;
-        d !== S && (S = d, x({
-          isStuck: d,
-          scrollOffset: v,
-          containerType: "document"
-        }));
+    let l = Number.NaN, c = Number.NaN, f = Number.NaN, d = !1, u = !0;
+    const $ = () => {
+      const t = s.getBoundingClientRect(), m = window.innerHeight;
+      if (o === "top") {
+        const i = Math.max(0, t.height + t.top);
+        i !== l && (e.style.opacity = i > 0 ? "1" : "0", e.style.height = `${i}px`, l = i), (t.left !== c || t.width !== f) && (e.style.left = `${t.left}px`, e.style.width = `${t.width}px`, c = t.left, f = t.width);
+        const r = t.top < 0, n = Math.max(0, -t.top);
+        (u ? !0 : r !== d) && (u = !1, d = r, h({ isStuck: r, scrollOffset: n }));
       } else {
-        const p = u;
-        if (!p)
-          return;
-        const d = p.getBoundingClientRect();
-        $.current = d;
-        const N = a.getBoundingClientRect().top - d.top + v, m = v - N, R = Math.max(0, n.height - m);
-        R !== y && (c.style.opacity = "1", c.style.height = `${R}px`, y = R), b !== n && (c.style.left = "0", c.style.width = `${n.width}px`, b = n);
-        const X = Math.max(0, m);
-        c.style.top = `${X}px`;
-        const g = m > 0;
-        g !== S && (S = g, x({
-          isStuck: g,
-          scrollOffset: m,
-          containerType: "container"
-        }));
+        const i = m - t.bottom, r = Math.max(0, t.height + i);
+        r !== l && (e.style.opacity = r > 0 ? "1" : "0", e.style.height = `${r}px`, l = r), (t.left !== c || t.width !== f) && (e.style.left = `${t.left}px`, e.style.width = `${t.width}px`, c = t.left, f = t.width);
+        const n = t.bottom > m, A = Math.max(0, t.bottom - m);
+        (u ? !0 : n !== d) && (u = !1, d = n, h({ isStuck: n, scrollOffset: A }));
       }
     };
-    let O = requestAnimationFrame(function n() {
-      I(), O = requestAnimationFrame(n);
+    let k = requestAnimationFrame(function t() {
+      $(), k = requestAnimationFrame(t);
     });
     return () => {
-      cancelAnimationFrame(O);
+      cancelAnimationFrame(k);
     };
-  }, [f, u, x]);
-  const M = typeof t == "function" ? t(k) : t;
-  return /* @__PURE__ */ Y("div", { ref: i, style: U(f), children: [
-    /* @__PURE__ */ T("div", { ref: l, style: Q(f), children: e }),
-    /* @__PURE__ */ T("div", { ref: o, style: G, children: /* @__PURE__ */ T("div", { style: J, children: M }) })
+  }, [o, h]);
+  const H = typeof p == "function" ? p(S) : p;
+  return /* @__PURE__ */ F("div", { style: U, children: [
+    /* @__PURE__ */ y("div", { ref: x, style: M(o), children: R }),
+    /* @__PURE__ */ y("div", { ref: g, style: C(o), children: /* @__PURE__ */ y("div", { style: I, children: H }) })
   ] });
 };
-V.displayName = "StickyHeader";
+N.displayName = "StickyArea";
+const q = N;
 export {
-  V as StickyHeader
+  N as StickyArea,
+  q as StickyHeader
 };
 //# sourceMappingURL=sticky-header.js.map

package/dist/sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.js","sources":["../src/hooks/useContainerScroll.ts","../src/hooks/useResizeObserver.tsx","../src/hooks/useScrollContainer.ts","../src/sticky-header/StickyHeader.tsx"],"sourcesContent":["/**\n * @file useContainerScroll - Track scroll position of a container or document\n *\n * Tracks scroll position for either a specific scroll container element\n * or the document (when container is null).\n */\nimport * as React from \"react\";\n\nexport type ScrollPosition = {\n  /** Vertical scroll position */\n  scrollTop: number;\n  /** Horizontal scroll position */\n  scrollLeft: number;\n};\n\n/**\n * Track scroll position of a container element or the document.\n *\n * @param container - Scroll container element, or null for document scroll\n * @returns Current scroll position\n *\n * @example\n * ```tsx\n * // For document scroll\n * const scroll = useContainerScroll(null);\n *\n * // For container scroll\n * const containerRef = useRef<HTMLDivElement>(null);\n * const scroll = useContainerScroll(containerRef.current);\n * ```\n */\nexport function useContainerScroll(container: HTMLElement | null): ScrollPosition {\n  const [position, setPosition] = React.useState<ScrollPosition>(() => {\n    if (typeof window === \"undefined\") {\n      return { scrollTop: 0, scrollLeft: 0 };\n    }\n\n    if (container) {\n      return {\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      };\n    }\n\n    return {\n      scrollTop: window.scrollY,\n      scrollLeft: window.scrollX,\n    };\n  });\n\n  React.useEffect(() => {\n    const handleScroll = () => {\n      if (container) {\n        setPosition({\n          scrollTop: container.scrollTop,\n          scrollLeft: container.scrollLeft,\n        });\n      } else {\n        setPosition({\n          scrollTop: window.scrollY,\n          scrollLeft: window.scrollX,\n        });\n      }\n    };\n\n    // Initialize position\n    handleScroll();\n\n    const target = container ?? window;\n    target.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n    return () => {\n      target.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [container]);\n\n  return position;\n}\n","/**\n * @file Shared useResizeObserver hook with cached observer instances.\n */\nimport * as React from \"react\";\n\ntype Unobserve = () => void;\ntype Callback = (entry: ResizeObserverEntry, observer: ResizeObserver) => void;\ntype SharedObserver = {\n  observe: (target: Element, callback: Callback) => Unobserve;\n};\nconst observerCache = new Map<string, SharedObserver>();\nconst getSharedObserver = (options: ResizeObserverOptions) => {\n  const { box = \"content-box\" } = options;\n  const observerKey = `resize-box:${box}`;\n  const cached = observerCache.get(observerKey);\n  if (cached) {\n    return cached;\n  }\n  const observer = new (class {\n    #callbackMap = new Map<Element, Callback>();\n    #resizeObserver = new ResizeObserver((entries, observer) => {\n      entries.forEach((entry) => {\n        const callback = this.#callbackMap.get(entry.target);\n        if (callback) {\n          callback(entry, observer);\n        }\n      });\n    });\n    observe(target: Element, callback: Callback) {\n      this.#callbackMap.set(target, callback);\n      this.#resizeObserver.observe(target, options);\n      return () => {\n        this.#callbackMap.delete(target);\n        this.#resizeObserver.unobserve(target);\n      };\n    }\n  })();\n  observerCache.set(observerKey, observer);\n\n  return observer;\n};\n/**\n * Observe size changes for a given element reference using shared resize observers.\n *\n * @param ref - Ref holding the element whose size to monitor.\n * @param options - Resize observer configuration.\n * @returns Latest resize entry and a derived DOMRect snapshot.\n */\nexport function useResizeObserver<T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n  { box }: ResizeObserverOptions,\n) {\n  const [entry, setEntry] = React.useState<ResizeObserverEntry | null>(null);\n  const target = ref.current;\n\n  React.useEffect(() => {\n    if (!target) {\n      return;\n    }\n\n    const observer = getSharedObserver({ box });\n    return observer.observe(target, (nextEntry) => {\n      setEntry(nextEntry);\n    });\n  }, [box, target]);\n\n  const rect = React.useMemo(() => {\n    if (!entry) {\n      return null;\n    }\n\n    if (entry.borderBoxSize?.length > 0) {\n      const size = entry.borderBoxSize[0];\n      return new DOMRect(0, 0, size.inlineSize, size.blockSize);\n    }\n\n    return entry.contentRect;\n  }, [entry]);\n\n  return { entry, rect };\n}\n","/**\n * @file useScrollContainer - Detect the nearest scrollable ancestor\n *\n * Traverses the DOM tree to find the nearest ancestor with overflow: scroll/auto.\n * Returns null if the document is the scroll container.\n */\nimport * as React from \"react\";\n\n/**\n * Check if an element is a scroll container.\n */\nfunction isScrollContainer(element: Element): boolean {\n  const style = getComputedStyle(element);\n  const overflowY = style.overflowY;\n  const overflowX = style.overflowX;\n\n  return (\n    overflowY === \"scroll\" ||\n    overflowY === \"auto\" ||\n    overflowX === \"scroll\" ||\n    overflowX === \"auto\"\n  );\n}\n\n/**\n * Find the nearest scrollable ancestor of an element.\n *\n * @param element - Starting element to search from\n * @returns The nearest scrollable ancestor, or null if document is the container\n */\nfunction findScrollContainer(element: Element | null): HTMLElement | null {\n  if (!element) {\n    return null;\n  }\n\n  // eslint-disable-next-line no-restricted-syntax -- DOM traversal requires let\n  let current = element.parentElement;\n\n  while (current) {\n    if (isScrollContainer(current)) {\n      return current;\n    }\n    current = current.parentElement;\n  }\n\n  return null;\n}\n\n/**\n * Hook to detect the nearest scrollable ancestor of a ref element.\n *\n * @param ref - Ref to the element to find scroll container for\n * @returns The nearest scrollable ancestor element, or null if document is the container\n *\n * @example\n * ```tsx\n * const elementRef = useRef<HTMLDivElement>(null);\n * const scrollContainer = useScrollContainer(elementRef);\n * // scrollContainer is HTMLElement if in nested scroll, null if document scroll\n * ```\n */\nexport function useScrollContainer<T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n): HTMLElement | null {\n  const [container, setContainer] = React.useState<HTMLElement | null>(null);\n\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      setContainer(null);\n      return;\n    }\n\n    const scrollContainer = findScrollContainer(element);\n    setContainer(scrollContainer);\n  }, [ref]);\n\n  return container;\n}\n","/**\n * @file StickyHeader component for native app-like overscroll experience.\n *\n * Displays cover content that expands during overscroll/bounce,\n * providing a native app-like pull effect commonly seen in iOS apps.\n *\n * This component is designed for SPAs, PWAs, and hybrid apps where\n * the browser's pull-to-refresh is disabled and bounce effects\n * should display content rather than empty space.\n *\n * Supports both document-level scroll and nested scroll containers.\n */\nimport * as React from \"react\";\nimport { useContainerScroll } from \"../hooks/useContainerScroll\";\nimport { useIsomorphicLayoutEffect } from \"../hooks/useIsomorphicLayoutEffect\";\nimport { useResizeObserver } from \"../hooks/useResizeObserver\";\nimport { useScrollContainer } from \"../hooks/useScrollContainer\";\nimport type { StickyHeaderProps, StickyHeaderState } from \"./types\";\n\nconst baseStyle: React.CSSProperties = {\n  position: \"relative\",\n};\n\nconst headerStyle: React.CSSProperties = {\n  position: \"relative\",\n  paddingTop: \"env(safe-area-inset-top)\",\n  boxSizing: \"border-box\",\n};\n\nconst bodyStyle: React.CSSProperties = {\n  zIndex: 1,\n};\n\n/**\n * Get cover styles based on container type.\n */\nfunction getCoverStyle(isDocumentScroll: boolean): React.CSSProperties {\n  if (isDocumentScroll) {\n    return {\n      position: \"fixed\",\n      top: 0,\n      left: 0,\n      right: 0,\n      opacity: 0,\n      zIndex: 0,\n      userSelect: \"none\",\n      pointerEvents: \"none\",\n    };\n  }\n\n  // For nested scroll containers, use absolute positioning\n  return {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    right: 0,\n    opacity: 0,\n    zIndex: 0,\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n  };\n}\n\n/**\n * Get wrapper styles for nested scroll containers.\n */\nfunction getWrapperStyle(isDocumentScroll: boolean): React.CSSProperties {\n  if (isDocumentScroll) {\n    return baseStyle;\n  }\n\n  return {\n    ...baseStyle,\n    overflow: \"hidden\",\n  };\n}\n\n/**\n * StickyHeader provides a native app-like overscroll experience.\n *\n * When the user pulls down beyond the top of the page (overscroll/bounce),\n * the cover content expands to fill the visible area, similar to\n * native iOS/Android app behavior.\n *\n * Also supports nested scroll containers with overflow: scroll/auto.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <StickyHeader cover={<img src=\"/hero.jpg\" alt=\"Hero\" />}>\n *   <header>\n *     <h1>My App</h1>\n *   </header>\n * </StickyHeader>\n *\n * // With state callback\n * <StickyHeader\n *   cover={<img src=\"/hero.jpg\" alt=\"Hero\" />}\n *   onStateChange={({ isStuck }) => console.log('Stuck:', isStuck)}\n * >\n *   <header>\n *     <h1>My App</h1>\n *   </header>\n * </StickyHeader>\n *\n * // With render function\n * <StickyHeader cover={<img src=\"/hero.jpg\" alt=\"Hero\" />}>\n *   {({ isStuck }) => (\n *     <header style={{ background: isStuck ? 'white' : 'transparent' }}>\n *       <h1>My App</h1>\n *     </header>\n *   )}\n * </StickyHeader>\n * ```\n */\nexport const StickyHeader: React.FC<StickyHeaderProps> = ({ cover, children, onStateChange }) => {\n  const headerRef = React.useRef<HTMLDivElement>(null);\n  const coverAreaRef = React.useRef<HTMLDivElement>(null);\n  const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n  // Detect scroll container\n  const scrollContainer = useScrollContainer(wrapperRef);\n  const isDocumentScroll = scrollContainer === null;\n\n  // Track scroll position\n  const { scrollTop } = useContainerScroll(scrollContainer);\n  const scrollTopRef = React.useRef(scrollTop);\n  scrollTopRef.current = scrollTop;\n\n  // Track header bounds\n  const headerBoundRef = React.useRef<DOMRectReadOnly | null>(null);\n  const { rect: headerRect } = useResizeObserver(headerRef, {});\n  if (!Object.is(headerBoundRef.current, headerRect)) {\n    headerBoundRef.current = headerRect;\n  }\n\n  // Track container bounds for nested scroll\n  const containerBoundRef = React.useRef<DOMRect | null>(null);\n\n  // State for render function and callback\n  const [state, setState] = React.useState<StickyHeaderState>({\n    isStuck: false,\n    scrollOffset: 0,\n    containerType: \"document\",\n  });\n\n  // Update state when values change\n  const stateRef = React.useRef(state);\n  const updateState = React.useCallback(\n    (newState: StickyHeaderState) => {\n      const prev = stateRef.current;\n      if (prev.isStuck !== newState.isStuck || prev.scrollOffset !== newState.scrollOffset || prev.containerType !== newState.containerType) {\n        stateRef.current = newState;\n        setState(newState);\n        onStateChange?.(newState);\n      }\n    },\n    [onStateChange],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const header = headerRef.current;\n    const coverArea = coverAreaRef.current;\n    const wrapper = wrapperRef.current;\n    if (!coverArea || !header || !wrapper) {\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevHeight = Number.NaN;\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevHeaderBound: DOMRectReadOnly | null = null;\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevIsStuck = false;\n\n    const loop = () => {\n      const headerBound = headerBoundRef.current;\n      if (!headerBound) {\n        return;\n      }\n\n      const currentScrollTop = scrollTopRef.current;\n\n      if (isDocumentScroll) {\n        // Document scroll mode (original behavior)\n        const coverAreaHeight = headerBound.height - currentScrollTop;\n        if (coverAreaHeight !== prevHeight) {\n          coverArea.style.opacity = \"1\";\n          coverArea.style.height = `${coverAreaHeight}px`;\n          prevHeight = coverAreaHeight;\n        }\n\n        if ((headerBound.x >= 0 || headerBound.y >= 0 || headerBound.width > 0) && prevHeaderBound !== headerBound) {\n          coverArea.style.left = `${headerBound.x}px`;\n          coverArea.style.top = `${headerBound.y}px`;\n          coverArea.style.width = `${headerBound.width}px`;\n          prevHeaderBound = headerBound;\n        }\n\n        // Calculate stuck state\n        const isStuck = currentScrollTop > 0;\n        if (isStuck !== prevIsStuck) {\n          prevIsStuck = isStuck;\n          updateState({\n            isStuck,\n            scrollOffset: currentScrollTop,\n            containerType: \"document\",\n          });\n        }\n      } else {\n        // Nested container scroll mode\n        const container = scrollContainer;\n        if (!container) {\n          return;\n        }\n\n        // Get container bounds\n        const containerBound = container.getBoundingClientRect();\n        containerBoundRef.current = containerBound;\n\n        // Calculate header position relative to container\n        const headerTop = header.getBoundingClientRect().top - containerBound.top + currentScrollTop;\n\n        // Calculate cover height based on scroll position\n        const scrollOffset = currentScrollTop - headerTop;\n        const coverAreaHeight = Math.max(0, headerBound.height - scrollOffset);\n\n        if (coverAreaHeight !== prevHeight) {\n          coverArea.style.opacity = \"1\";\n          coverArea.style.height = `${coverAreaHeight}px`;\n          prevHeight = coverAreaHeight;\n        }\n\n        // Position cover relative to scroll\n        if (prevHeaderBound !== headerBound) {\n          coverArea.style.left = \"0\";\n          coverArea.style.width = `${headerBound.width}px`;\n          prevHeaderBound = headerBound;\n        }\n\n        // Calculate top position to follow scroll\n        const coverTop = Math.max(0, scrollOffset);\n        coverArea.style.top = `${coverTop}px`;\n\n        // Calculate stuck state\n        const isStuck = scrollOffset > 0;\n        if (isStuck !== prevIsStuck) {\n          prevIsStuck = isStuck;\n          updateState({\n            isStuck,\n            scrollOffset,\n            containerType: \"container\",\n          });\n        }\n      }\n    };\n\n    // eslint-disable-next-line no-restricted-syntax -- Performance: RAF id needs reassignment\n    let id = requestAnimationFrame(function animate() {\n      loop();\n      id = requestAnimationFrame(animate);\n    });\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [isDocumentScroll, scrollContainer, updateState]);\n\n  // Render children\n  const renderedChildren = typeof children === \"function\" ? children(state) : children;\n\n  return (\n    <div ref={wrapperRef} style={getWrapperStyle(isDocumentScroll)}>\n      <div ref={coverAreaRef} style={getCoverStyle(isDocumentScroll)}>\n        {cover}\n      </div>\n      <div ref={headerRef} style={headerStyle}>\n        <div style={bodyStyle}>{renderedChildren}</div>\n      </div>\n    </div>\n  );\n};\n\nStickyHeader.displayName = \"StickyHeader\";\n"],"names":["useContainerScroll","container","position","setPosition","React","handleScroll","target","observerCache","getSharedObserver","options","box","observerKey","cached","observer","#callbackMap","#resizeObserver","entries","entry","callback","useResizeObserver","ref","setEntry","nextEntry","rect","size","isScrollContainer","element","style","overflowY","overflowX","findScrollContainer","current","useScrollContainer","setContainer","scrollContainer","baseStyle","headerStyle","bodyStyle","getCoverStyle","isDocumentScroll","getWrapperStyle","StickyHeader","cover","children","onStateChange","headerRef","coverAreaRef","wrapperRef","scrollTop","scrollTopRef","headerBoundRef","headerRect","containerBoundRef","state","setState","stateRef","updateState","newState","prev","useIsomorphicLayoutEffect","header","coverArea","wrapper","prevHeight","prevHeaderBound","prevIsStuck","loop","headerBound","currentScrollTop","coverAreaHeight","isStuck","containerBound","headerTop","scrollOffset","coverTop","id","animate","renderedChildren","jsx"],"mappings":"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"}
+{"version":3,"file":"sticky-header.js","sources":["../src/sticky-header/StickyArea.tsx"],"sourcesContent":["/**\n * @file StickyArea component for native app-like overscroll experience.\n *\n * Displays cover content that expands during overscroll/bounce,\n * providing a native app-like pull effect commonly seen in iOS apps.\n *\n * Supports both top (header) and bottom (footer) positions.\n * Works with document-level scroll only.\n */\nimport * as React from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../hooks/useIsomorphicLayoutEffect\";\nimport type { StickyAreaProps, StickyAreaState } from \"./types\";\n\n/**\n * Get area styles based on position.\n */\nfunction getAreaStyle(position: \"top\" | \"bottom\"): React.CSSProperties {\n  return {\n    position: \"relative\",\n    paddingTop: position === \"top\" ? \"env(safe-area-inset-top)\" : undefined,\n    paddingBottom: position === \"bottom\" ? \"env(safe-area-inset-bottom)\" : undefined,\n    boxSizing: \"border-box\",\n  };\n}\n\nconst bodyStyle: React.CSSProperties = {\n  zIndex: 1,\n};\n\n/**\n * Get cover styles based on position.\n * Explicitly disables transitions to prevent jank from inherited CSS.\n */\nfunction getCoverStyle(position: \"top\" | \"bottom\"): React.CSSProperties {\n  return {\n    opacity: 0,\n    zIndex: 0,\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    // Disable transitions to prevent jank - styles are updated via RAF\n    transition: \"none\",\n    // Enable GPU acceleration for smoother animations\n    willChange: \"height, opacity\",\n    transform: \"translateZ(0)\",\n    position: \"fixed\",\n    top: position === \"top\" ? 0 : undefined,\n    bottom: position === \"bottom\" ? 0 : undefined,\n    left: 0,\n    right: 0,\n  };\n}\n\nconst wrapperStyle: React.CSSProperties = {\n  position: \"relative\",\n};\n\n/**\n * StickyArea provides a native app-like overscroll experience.\n *\n * When the user overscrolls (pulls beyond the edge), the cover content\n * expands to fill the visible area, similar to native iOS/Android app behavior.\n *\n * Supports both top (header) and bottom (footer) positions.\n * Works with document-level scroll only.\n *\n * @example\n * ```tsx\n * // Header (top) - expands on pull-down\n * <StickyArea position=\"top\" cover={<img src=\"/hero.jpg\" />}>\n *   <header><h1>My App</h1></header>\n * </StickyArea>\n *\n * // Footer (bottom) - expands on pull-up\n * <StickyArea position=\"bottom\" cover={<div className=\"footer-bg\" />}>\n *   <footer>Footer content</footer>\n * </StickyArea>\n * ```\n */\nexport const StickyArea: React.FC<StickyAreaProps> = ({\n  position = \"top\",\n  cover,\n  children,\n  onStateChange,\n}) => {\n  const areaRef = React.useRef<HTMLDivElement>(null);\n  const coverAreaRef = React.useRef<HTMLDivElement>(null);\n\n  // State for render function and callback\n  const [state, setState] = React.useState<StickyAreaState>({\n    isStuck: false,\n    scrollOffset: 0,\n  });\n\n  // Update state when values change\n  const stateRef = React.useRef(state);\n  const updateState = React.useCallback(\n    (newState: StickyAreaState) => {\n      const prev = stateRef.current;\n      if (prev.isStuck !== newState.isStuck || prev.scrollOffset !== newState.scrollOffset) {\n        stateRef.current = newState;\n        setState(newState);\n        onStateChange?.(newState);\n      }\n    },\n    [onStateChange],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const area = areaRef.current;\n    const coverArea = coverAreaRef.current;\n    if (!coverArea || !area) {\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevHeight = Number.NaN;\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevLeft = Number.NaN;\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevWidth = Number.NaN;\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let prevIsStuck = false;\n    // eslint-disable-next-line no-restricted-syntax -- Performance: mutable state for RAF loop\n    let isFirstRun = true;\n\n    const loop = () => {\n      const liveRect = area.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (position === \"top\") {\n        // TOP: Cover expands upward during pull-down overscroll\n        // liveRect.top > 0 means element moved down (overscroll)\n        // liveRect.top < 0 means element scrolled up\n        const coverAreaHeight = Math.max(0, liveRect.height + liveRect.top);\n\n        if (coverAreaHeight !== prevHeight) {\n          coverArea.style.opacity = coverAreaHeight > 0 ? \"1\" : \"0\";\n          coverArea.style.height = `${coverAreaHeight}px`;\n          prevHeight = coverAreaHeight;\n        }\n\n        if (liveRect.left !== prevLeft || liveRect.width !== prevWidth) {\n          coverArea.style.left = `${liveRect.left}px`;\n          coverArea.style.width = `${liveRect.width}px`;\n          prevLeft = liveRect.left;\n          prevWidth = liveRect.width;\n        }\n\n        const isStuck = liveRect.top < 0;\n        const scrollOffset = Math.max(0, -liveRect.top);\n\n        const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;\n        if (shouldUpdateState) {\n          isFirstRun = false;\n          prevIsStuck = isStuck;\n          updateState({ isStuck, scrollOffset });\n        }\n      } else {\n        // BOTTOM: Cover expands downward during pull-up overscroll\n        // liveRect.bottom < viewportHeight means element moved up (overscroll at bottom)\n        // liveRect.bottom > viewportHeight means element is below viewport\n        const distanceFromBottom = viewportHeight - liveRect.bottom;\n        const coverAreaHeight = Math.max(0, liveRect.height + distanceFromBottom);\n\n        if (coverAreaHeight !== prevHeight) {\n          coverArea.style.opacity = coverAreaHeight > 0 ? \"1\" : \"0\";\n          coverArea.style.height = `${coverAreaHeight}px`;\n          prevHeight = coverAreaHeight;\n        }\n\n        if (liveRect.left !== prevLeft || liveRect.width !== prevWidth) {\n          coverArea.style.left = `${liveRect.left}px`;\n          coverArea.style.width = `${liveRect.width}px`;\n          prevLeft = liveRect.left;\n          prevWidth = liveRect.width;\n        }\n\n        const isStuck = liveRect.bottom > viewportHeight;\n        const scrollOffset = Math.max(0, liveRect.bottom - viewportHeight);\n\n        const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;\n        if (shouldUpdateState) {\n          isFirstRun = false;\n          prevIsStuck = isStuck;\n          updateState({ isStuck, scrollOffset });\n        }\n      }\n    };\n\n    // eslint-disable-next-line no-restricted-syntax -- Performance: RAF id needs reassignment\n    let id = requestAnimationFrame(function animate() {\n      loop();\n      id = requestAnimationFrame(animate);\n    });\n\n    return () => {\n      cancelAnimationFrame(id);\n    };\n  }, [position, updateState]);\n\n  // Render children\n  const renderedChildren = typeof children === \"function\" ? children(state) : children;\n\n  return (\n    <div style={wrapperStyle}>\n      <div ref={coverAreaRef} style={getCoverStyle(position)}>\n        {cover}\n      </div>\n      <div ref={areaRef} style={getAreaStyle(position)}>\n        <div style={bodyStyle}>{renderedChildren}</div>\n      </div>\n    </div>\n  );\n};\n\nStickyArea.displayName = \"StickyArea\";\n\n/**\n * @deprecated Use StickyArea with position=\"top\" instead\n */\nexport const StickyHeader = StickyArea;\n"],"names":["getAreaStyle","position","bodyStyle","getCoverStyle","wrapperStyle","StickyArea","cover","children","onStateChange","areaRef","React","coverAreaRef","state","setState","stateRef","updateState","newState","prev","useIsomorphicLayoutEffect","area","coverArea","prevHeight","prevLeft","prevWidth","prevIsStuck","isFirstRun","loop","liveRect","viewportHeight","coverAreaHeight","isStuck","scrollOffset","distanceFromBottom","id","animate","renderedChildren","jsxs","jsx","StickyHeader"],"mappings":"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"}

package/dist/styles-DPPuJ0sf.js

@@ -0,0 +1,57 @@
+const N = "rpl", l = "var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.0))", T = "var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))", S = "var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))", a = "var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))", _ = "var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))", r = "var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))", s = "var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))", E = "var(--rpl-color-surface, #fff)", o = "var(--rpl-color-surface-2, #fafafa)", n = "var(--rpl-color-border, #e5e7eb)", t = "var(--rpl-color-muted-fg, #6b7280)", R = "var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))", i = "var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))", L = "var(--rpl-drawer-transition-duration, 220ms)", G = "var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))", d = "var(--rpl-pivot-animation-enter, none)", v = "var(--rpl-pivot-animation-leave, none)", g = "var(--rpl-stack-animation-push, none)", C = "var(--rpl-stack-animation-pop, none)", P = "var(--rpl-stack-transition-duration, 350ms)", H = "var(--rpl-stack-transition-easing, cubic-bezier(0.32, 0.72, 0, 1))", e = "var(--rpl-radius-suggest, 6px)", A = "var(--rpl-size-suggest-border, 2px)";
+const O = "var(--rpl-size-resize-handle-thickness, 4px)", p = "var(--rpl-size-split-handle-thickness, 6px)", c = "var(--rpl-z-overlay, 9998)", I = "var(--rpl-z-tabdrag-overlay, 9999)", D = "var(--rpl-z-dialog-overlay, 10000)", U = O, x = "var(--rpl-z-resize-handle, 1000)", b = 4, F = "var(--rpl-size-grid-layer-corner-hit, 14px)", f = "var(--rpl-size-grid-layer-edge-hit-thickness, 12px)", h = c, B = A, Z = e, u = a, z = _, W = 6, V = I, w = "var(--rpl-space-tab-drag-preview-offset-x, 12px)", K = "var(--rpl-space-tab-drag-preview-offset-y, 12px)", m = "var(--rpl-size-tab-drag-insert-guide-width, 2px)", Y = "var(--rpl-radius-tab-drag-insert-guide, 1px)", X = r, k = s, y = D, M = "var(--rpl-radius-floating-panel, 8px)", j = "var(--rpl-space-floating-panel-gap, 8px)", q = "var(--rpl-space-floating-panel-header-padding-y, 8px)", J = "var(--rpl-space-floating-panel-header-padding-x, 12px)", Q = "var(--rpl-space-floating-panel-content-padding, 12px)", $ = "var(--rpl-size-floating-panel-meta-font, 12px)", aa = "var(--rpl-space-floating-panel-controls-gap, 6px)", _a = "var(--rpl-size-floating-panel-close-button-font, 1.25rem)", ra = "var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)", sa = E, Ea = o, oa = n, na = t, ta = R, Ra = "var(--rpl-space-drawer-header-padding-y, 10px)", ea = "var(--rpl-space-drawer-header-padding-x, 12px)", Aa = "var(--rpl-space-drawer-header-gap, 8px)", Oa = "var(--rpl-space-drawer-content-padding, 12px)", pa = p, ca = "var(--rpl-size-horizontal-divider-width, 4px)";
+export {
+  b as A,
+  H as B,
+  N as C,
+  y as D,
+  g as E,
+  ta as F,
+  f as G,
+  ca as H,
+  C as I,
+  h as J,
+  Z as K,
+  z as L,
+  B as M,
+  u as N,
+  W as O,
+  d as P,
+  K as Q,
+  U as R,
+  P as S,
+  w as T,
+  k as U,
+  X as V,
+  Y as W,
+  m as X,
+  V as Y,
+  pa as Z,
+  S as a,
+  T as b,
+  l as c,
+  M as d,
+  sa as e,
+  oa as f,
+  Q as g,
+  Ea as h,
+  q as i,
+  J as j,
+  j as k,
+  aa as l,
+  ra as m,
+  _a as n,
+  $ as o,
+  na as p,
+  x as q,
+  v as r,
+  i as s,
+  L as t,
+  G as u,
+  Oa as v,
+  Aa as w,
+  Ra as x,
+  ea as y,
+  F as z
+};
+//# sourceMappingURL=styles-DPPuJ0sf.js.map

package/dist/styles-DPPuJ0sf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-DPPuJ0sf.js","sources":["../src/constants/styles.ts"],"sourcesContent":["/**\n * @file Style constants for library components\n *\n * All style values are defined here with CSS variable fallbacks.\n * Users can override these via CSS variables (--rpl-*).\n *\n * All CSS variables use the unified prefix: --rpl- (react-panel-layout)\n *\n * @example\n * // In your CSS:\n * :root {\n *   --rpl-color-primary: #ff0000;\n * }\n */\n\n// ========================================\n// CSS VARIABLE PREFIX\n// ========================================\n\n/**\n * Unified CSS variable prefix for all react-panel-layout variables\n * All theme variables use this prefix: --rpl-*\n */\nexport const CSS_VAR_PREFIX = \"rpl\";\n\n// ========================================\n// COLORS\n// ========================================\n\n/**\n * Tab colors - used in TabBar component\n */\nexport const COLOR_TAB_FG = \"var(--rpl-color-tab-fg, #d5d7de)\";\nexport const COLOR_TAB_ACTIVE_BG = \"var(--rpl-color-tab-active-bg, #2b2d35)\";\nexport const COLOR_TABBAR_BG = \"var(--rpl-color-tabbar-bg, #1e1f24)\";\n\n/**\n * Panel colors - used in panel layouts\n */\nexport const COLOR_PANEL_BORDER = \"var(--rpl-color-panel-border, rgba(0, 0, 0, 0.3))\";\nexport const COLOR_PANEL_BG = \"var(--rpl-color-panel-bg, #0b0b0c)\";\n\n/**\n * Primary color - used for resize handles, highlights\n */\nexport const COLOR_PRIMARY = \"var(--rpl-color-primary, #2196f3)\";\nexport const COLOR_RESIZE_HANDLE_IDLE = \"var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.0))\";\nexport const COLOR_RESIZE_HANDLE_HOVER = \"var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))\";\nexport const COLOR_RESIZE_HANDLE_ACTIVE = \"var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))\";\n\n/**\n * Drop suggestion overlay colors\n */\nexport const COLOR_DROP_SUGGEST_BORDER = \"var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))\";\nexport const COLOR_DROP_SUGGEST_BG = \"var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))\";\n\n/**\n * Tab drag overlay colors\n */\nexport const COLOR_TABDRAG_BG = \"var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))\";\nexport const COLOR_TABDRAG_FG = \"var(--rpl-color-tabdrag-fg, #e9ebf0)\";\nexport const COLOR_TABDRAG_BORDER = \"var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))\";\nexport const COLOR_TABDRAG_SHADOW = \"var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))\";\n\n/**\n * Insert guide colors\n */\nexport const COLOR_INSERT_GUIDE = \"var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))\";\nexport const COLOR_INSERT_GUIDE_SHADOW = \"var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))\";\n\n/**\n * Node editor / floating panel colors\n * These are used by Drawer and FloatingPanelFrame components\n */\nexport const COLOR_NODE_EDITOR_SURFACE = \"var(--rpl-color-surface, #fff)\";\nexport const COLOR_NODE_EDITOR_SURFACE_2 = \"var(--rpl-color-surface-2, #fafafa)\";\nexport const COLOR_NODE_EDITOR_BORDER = \"var(--rpl-color-border, #e5e7eb)\";\nexport const COLOR_NODE_EDITOR_MUTED_FG = \"var(--rpl-color-muted-fg, #6b7280)\";\nexport const COLOR_NODE_EDITOR_CARD_SHADOW = \"var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))\";\nexport const COLOR_DRAWER_BACKDROP = \"var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))\";\n\n/**\n * Drawer transitions\n */\nexport const DRAWER_TRANSITION_DURATION = \"var(--rpl-drawer-transition-duration, 220ms)\";\nexport const DRAWER_TRANSITION_EASING = \"var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))\";\n\n/**\n * Pivot animations\n * User defines @keyframes in their CSS and references via these tokens.\n * - Enter: Applied when content becomes active\n * - Leave: Applied when content becomes inactive\n */\nexport const PIVOT_ANIMATION_ENTER = \"var(--rpl-pivot-animation-enter, none)\";\nexport const PIVOT_ANIMATION_LEAVE = \"var(--rpl-pivot-animation-leave, none)\";\n\n/**\n * Pivot swipe animations\n * Used by SwipePivotContent for snap-back animation after swipe ends.\n */\nexport const PIVOT_SWIPE_SNAP_DURATION = \"var(--rpl-pivot-swipe-snap-duration, 300ms)\";\nexport const PIVOT_SWIPE_SNAP_EASING = \"var(--rpl-pivot-swipe-snap-easing, cubic-bezier(0.22, 1, 0.36, 1))\";\n\n/**\n * Stack animations\n * User defines @keyframes in their CSS and references via these tokens.\n * - Push: Applied when a new panel is pushed onto the stack\n * - Pop: Applied when a panel is popped from the stack\n */\nexport const STACK_ANIMATION_PUSH = \"var(--rpl-stack-animation-push, none)\";\nexport const STACK_ANIMATION_POP = \"var(--rpl-stack-animation-pop, none)\";\nexport const STACK_TRANSITION_DURATION = \"var(--rpl-stack-transition-duration, 350ms)\";\nexport const STACK_TRANSITION_EASING = \"var(--rpl-stack-transition-easing, cubic-bezier(0.32, 0.72, 0, 1))\";\n\n// ========================================\n// SIZING & SPACING\n// ========================================\n\n/**\n * Tab sizing\n */\nexport const SIZE_TAB_FONT = \"var(--rpl-size-tab-font, 12px)\";\nexport const SPACE_TAB_PADDING_Y = \"var(--rpl-space-tab-padding-y, 4px)\";\nexport const SPACE_TAB_PADDING_X = \"var(--rpl-space-tab-padding-x, 8px)\";\n\n/**\n * Tabbar spacing\n */\nexport const SPACE_TABBAR_GAP = \"var(--rpl-space-tabbar-gap, 6px)\";\nexport const SPACE_TABBAR_PADDING_Y = \"var(--rpl-space-tabbar-padding-y, 4px)\";\nexport const SPACE_TABBAR_PADDING_X = \"var(--rpl-space-tabbar-padding-x, 6px)\";\n\n/**\n * Border radius (decorative, using CSS variables)\n */\nexport const RADIUS_TAB = \"var(--rpl-radius-tab, 4px)\";\nexport const RADIUS_SUGGEST = \"var(--rpl-radius-suggest, 6px)\";\n\n/**\n * Border widths\n */\nexport const SIZE_SUGGEST_BORDER = \"var(--rpl-size-suggest-border, 2px)\";\n\n/**\n * Handle thicknesses\n * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations\n */\nexport const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation\nexport const SIZE_RESIZE_HANDLE_THICKNESS = \"var(--rpl-size-resize-handle-thickness, 4px)\";\nexport const SIZE_SPLIT_HANDLE_THICKNESS = \"var(--rpl-size-split-handle-thickness, 6px)\";\n\n/**\n * Drop suggest padding\n */\nexport const SPACE_DROP_SUGGEST_PADDING = \"var(--rpl-space-drop-suggest-padding, 6px)\";\n\n// ========================================\n// Z-INDEXES\n// ========================================\n\nexport const Z_OVERLAY = \"var(--rpl-z-overlay, 9998)\";\nexport const Z_TABDRAG_OVERLAY = \"var(--rpl-z-tabdrag-overlay, 9999)\";\nexport const Z_DIALOG_OVERLAY = \"var(--rpl-z-dialog-overlay, 10000)\";\n\n// ========================================\n// COMPONENT-SPECIFIC CONSTANTS\n// ========================================\n\n/**\n * Resize Handle\n */\nexport const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;\nexport const RESIZE_HANDLE_Z_INDEX = \"var(--rpl-z-resize-handle, 1000)\";\n\n/**\n * Grid Track Resize Handle\n */\nexport const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;\n\n/**\n * Grid Layer Resize Handles\n */\nexport const GRID_LAYER_CORNER_HIT_SIZE = \"var(--rpl-size-grid-layer-corner-hit, 14px)\";\nexport const GRID_LAYER_EDGE_HIT_THICKNESS = \"var(--rpl-size-grid-layer-edge-hit-thickness, 12px)\";\n\n/**\n * Drop Suggest Overlay\n */\nexport const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;\nexport const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;\nexport const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;\nexport const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;\nexport const DROP_SUGGEST_PADDING_PX = 6;\n\n/**\n * Tab Drag Overlay\n */\nexport const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;\nexport const TAB_DRAG_PREVIEW_OFFSET_X = \"var(--rpl-space-tab-drag-preview-offset-x, 12px)\";\nexport const TAB_DRAG_PREVIEW_OFFSET_Y = \"var(--rpl-space-tab-drag-preview-offset-y, 12px)\";\nexport const TAB_DRAG_PREVIEW_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-preview, 6px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_Y = \"var(--rpl-space-tab-drag-preview-padding-y, 4px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_X = \"var(--rpl-space-tab-drag-preview-padding-x, 8px)\";\nexport const TAB_DRAG_PREVIEW_FONT_SIZE = \"var(--rpl-size-tab-drag-preview-font, 12px)\";\nexport const TAB_DRAG_INSERT_GUIDE_WIDTH = \"var(--rpl-size-tab-drag-insert-guide-width, 2px)\";\nexport const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-insert-guide, 1px)\";\nexport const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;\nexport const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;\nexport const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;\nexport const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;\nexport const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;\nexport const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;\n\n/**\n * Dialog Overlay\n */\nexport const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;\n\n/**\n * Floating Panel Frame\n */\nexport const FLOATING_PANEL_BORDER_RADIUS = \"var(--rpl-radius-floating-panel, 8px)\";\nexport const FLOATING_PANEL_GAP = \"var(--rpl-space-floating-panel-gap, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_Y = \"var(--rpl-space-floating-panel-header-padding-y, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_X = \"var(--rpl-space-floating-panel-header-padding-x, 12px)\";\nexport const FLOATING_PANEL_CONTENT_PADDING = \"var(--rpl-space-floating-panel-content-padding, 12px)\";\nexport const FLOATING_PANEL_META_FONT_SIZE = \"var(--rpl-size-floating-panel-meta-font, 12px)\";\nexport const FLOATING_PANEL_CONTROLS_GAP = \"var(--rpl-space-floating-panel-controls-gap, 6px)\";\nexport const FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-floating-panel-close-button-font, 1.25rem)\";\nexport const FLOATING_PANEL_CLOSE_BUTTON_PADDING =\n  \"var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)\";\nexport const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;\nexport const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;\nexport const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Drawer\n */\nexport const DRAWER_HEADER_PADDING_Y = \"var(--rpl-space-drawer-header-padding-y, 10px)\";\nexport const DRAWER_HEADER_PADDING_X = \"var(--rpl-space-drawer-header-padding-x, 12px)\";\nexport const DRAWER_HEADER_GAP = \"var(--rpl-space-drawer-header-gap, 8px)\";\nexport const DRAWER_CONTENT_PADDING = \"var(--rpl-space-drawer-content-padding, 12px)\";\nexport const DRAWER_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-drawer-close-button-font, 18px)\";\nexport const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Split Handles\n */\nexport const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;\n\n/**\n * HorizontalDivider\n */\nexport const HORIZONTAL_DIVIDER_WIDTH = \"var(--rpl-size-horizontal-divider-width, 4px)\";\nexport const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = \"var(--rpl-space-horizontal-divider-hit-area-offset, 4px)\";\n"],"names":["CSS_VAR_PREFIX","COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","COLOR_DROP_SUGGEST_BORDER","COLOR_DROP_SUGGEST_BG","COLOR_INSERT_GUIDE","COLOR_INSERT_GUIDE_SHADOW","COLOR_NODE_EDITOR_SURFACE","COLOR_NODE_EDITOR_SURFACE_2","COLOR_NODE_EDITOR_BORDER","COLOR_NODE_EDITOR_MUTED_FG","COLOR_NODE_EDITOR_CARD_SHADOW","COLOR_DRAWER_BACKDROP","DRAWER_TRANSITION_DURATION","DRAWER_TRANSITION_EASING","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","STACK_ANIMATION_PUSH","STACK_ANIMATION_POP","STACK_TRANSITION_DURATION","STACK_TRANSITION_EASING","RADIUS_SUGGEST","SIZE_SUGGEST_BORDER","SIZE_RESIZE_HANDLE_THICKNESS","SIZE_SPLIT_HANDLE_THICKNESS","Z_OVERLAY","Z_TABDRAG_OVERLAY","Z_DIALOG_OVERLAY","RESIZE_HANDLE_THICKNESS","RESIZE_HANDLE_Z_INDEX","GRID_HANDLE_THICKNESS","GRID_LAYER_CORNER_HIT_SIZE","GRID_LAYER_EDGE_HIT_THICKNESS","DROP_SUGGEST_Z_INDEX","DROP_SUGGEST_BORDER_WIDTH","DROP_SUGGEST_BORDER_RADIUS","DROP_SUGGEST_BORDER_COLOR","DROP_SUGGEST_BG_COLOR","DROP_SUGGEST_PADDING_PX","TAB_DRAG_OVERLAY_Z_INDEX","TAB_DRAG_PREVIEW_OFFSET_X","TAB_DRAG_PREVIEW_OFFSET_Y","TAB_DRAG_INSERT_GUIDE_WIDTH","TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS","TAB_DRAG_INSERT_GUIDE_COLOR","TAB_DRAG_INSERT_GUIDE_SHADOW","DIALOG_OVERLAY_Z_INDEX","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_CONTENT_PADDING","FLOATING_PANEL_META_FONT_SIZE","FLOATING_PANEL_CONTROLS_GAP","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SURFACE_2_COLOR","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_SHADOW","DRAWER_HEADER_PADDING_Y","DRAWER_HEADER_PADDING_X","DRAWER_HEADER_GAP","DRAWER_CONTENT_PADDING","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"AAuBO,MAAMA,IAAiB,OAuBjBC,IAA2B,iEAC3BC,IAA4B,kEAC5BC,IAA6B,mEAK7BC,IAA4B,iEAC5BC,IAAwB,8DAaxBC,IAAqB,4DACrBC,IAA4B,4EAM5BC,IAA4B,kCAC5BC,IAA8B,uCAC9BC,IAA2B,oCAC3BC,IAA6B,sCAC7BC,IAAgC,0DAChCC,IAAwB,wDAKxBC,IAA6B,gDAC7BC,IAA2B,uEAQ3BC,IAAwB,0CACxBC,IAAwB,0CAexBC,IAAuB,yCACvBC,IAAsB,wCACtBC,IAA4B,+CAC5BC,IAA0B,sEAwB1BC,IAAiB,kCAKjBC,IAAsB;AAO5B,MAAMC,IAA+B,gDAC/BC,IAA8B,+CAW9BC,IAAY,8BACZC,IAAoB,sCACpBC,IAAmB,sCASnBC,IAA0BL,GAC1BM,IAAwB,oCAKxBC,IAAwB,GAKxBC,IAA6B,+CAC7BC,IAAgC,uDAKhCC,IAAuBR,GACvBS,IAA4BZ,GAC5Ba,IAA6Bd,GAC7Be,IAA4BjC,GAC5BkC,IAAwBjC,GAExBkC,IAA0B,GAK1BC,IAA2Bb,GAC3Bc,IAA4B,oDAC5BC,IAA4B,oDAK5BC,IAA8B,oDAC9BC,IAAsC,gDAKtCC,IAA8BvC,GAC9BwC,IAA+BvC,GAK/BwC,IAAyBnB,GAKzBoB,IAA+B,yCAC/BC,IAAqB,4CACrBC,IAAkC,yDAClCC,IAAkC,0DAClCC,IAAiC,yDACjCC,IAAgC,kDAChCC,KAA8B,qDAC9BC,KAAwC,6DACxCC,KACX,wEACWC,KAA+BjD,GAC/BkD,KAAiCjD,GACjCkD,KAA8BjD,GAC9BkD,KAAgCjD,GAChCkD,KAAwBjD,GAKxBkD,KAA0B,kDAC1BC,KAA0B,kDAC1BC,KAAoB,2CACpBC,KAAyB,iDASzBC,KAAyBzC,GAKzB0C,KAA2B;"}

package/dist/styles-qf6ptVLD.cjs

@@ -0,0 +1,2 @@
+"use strict";const _="var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.0))",E="var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))",A="var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))",R="var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))",O="var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))",I="var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))",r="var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))",D="var(--rpl-color-surface, #fff)",N="var(--rpl-color-surface-2, #fafafa)",T="var(--rpl-color-border, #e5e7eb)",a="var(--rpl-color-muted-fg, #6b7280)",S="var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))",n="var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))",o="var(--rpl-drawer-transition-duration, 220ms)",s="var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))",t="var(--rpl-pivot-animation-enter, none)",L="var(--rpl-pivot-animation-leave, none)",G="var(--rpl-stack-animation-push, none)",e="var(--rpl-stack-animation-pop, none)",p="var(--rpl-stack-transition-duration, 350ms)",c="var(--rpl-stack-transition-easing, cubic-bezier(0.32, 0.72, 0, 1))",l="var(--rpl-radius-suggest, 6px)",P="var(--rpl-size-suggest-border, 2px)";const i="var(--rpl-size-resize-handle-thickness, 4px)",C="var(--rpl-size-split-handle-thickness, 6px)",d="var(--rpl-z-overlay, 9998)",H="var(--rpl-z-tabdrag-overlay, 9999)",v="var(--rpl-z-dialog-overlay, 10000)",g=i,F="var(--rpl-z-resize-handle, 1000)",U=4,B="var(--rpl-size-grid-layer-corner-hit, 14px)",Z="var(--rpl-size-grid-layer-edge-hit-thickness, 12px)",W=d,x=P,b=l,V=R,f=O,h=6,u=H,K="var(--rpl-space-tab-drag-preview-offset-x, 12px)",z="var(--rpl-space-tab-drag-preview-offset-y, 12px)",X="var(--rpl-size-tab-drag-insert-guide-width, 2px)",Y="var(--rpl-radius-tab-drag-insert-guide, 1px)",w=I,M=r,m=v,k="var(--rpl-radius-floating-panel, 8px)",y="var(--rpl-space-floating-panel-gap, 8px)",j="var(--rpl-space-floating-panel-header-padding-y, 8px)",q="var(--rpl-space-floating-panel-header-padding-x, 12px)",J="var(--rpl-space-floating-panel-content-padding, 12px)",Q="var(--rpl-size-floating-panel-meta-font, 12px)",$="var(--rpl-space-floating-panel-controls-gap, 6px)",__="var(--rpl-size-floating-panel-close-button-font, 1.25rem)",E_="var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)",A_=D,R_=N,O_=T,I_=a,r_=S,D_="var(--rpl-space-drawer-header-padding-y, 10px)",N_="var(--rpl-space-drawer-header-padding-x, 12px)",T_="var(--rpl-space-drawer-header-gap, 8px)",a_="var(--rpl-space-drawer-content-padding, 12px)",S_=C,n_="var(--rpl-size-horizontal-divider-width, 4px)";exports.COLOR_DRAWER_BACKDROP=n;exports.COLOR_RESIZE_HANDLE_ACTIVE=A;exports.COLOR_RESIZE_HANDLE_HOVER=E;exports.COLOR_RESIZE_HANDLE_IDLE=_;exports.CSS_VAR_PREFIX="rpl";exports.DIALOG_OVERLAY_Z_INDEX=m;exports.DRAWER_CONTENT_PADDING=a_;exports.DRAWER_HEADER_GAP=T_;exports.DRAWER_HEADER_PADDING_X=N_;exports.DRAWER_HEADER_PADDING_Y=D_;exports.DRAWER_TRANSITION_DURATION=o;exports.DRAWER_TRANSITION_EASING=s;exports.DROP_SUGGEST_BG_COLOR=f;exports.DROP_SUGGEST_BORDER_COLOR=V;exports.DROP_SUGGEST_BORDER_RADIUS=b;exports.DROP_SUGGEST_BORDER_WIDTH=x;exports.DROP_SUGGEST_PADDING_PX=h;exports.DROP_SUGGEST_Z_INDEX=W;exports.FLOATING_PANEL_BORDER_COLOR=O_;exports.FLOATING_PANEL_BORDER_RADIUS=k;exports.FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE=__;exports.FLOATING_PANEL_CLOSE_BUTTON_PADDING=E_;exports.FLOATING_PANEL_CONTENT_PADDING=J;exports.FLOATING_PANEL_CONTROLS_GAP=$;exports.FLOATING_PANEL_GAP=y;exports.FLOATING_PANEL_HEADER_PADDING_X=q;exports.FLOATING_PANEL_HEADER_PADDING_Y=j;exports.FLOATING_PANEL_META_FONT_SIZE=Q;exports.FLOATING_PANEL_MUTED_FG_COLOR=I_;exports.FLOATING_PANEL_SHADOW=r_;exports.FLOATING_PANEL_SURFACE_2_COLOR=R_;exports.FLOATING_PANEL_SURFACE_COLOR=A_;exports.GRID_HANDLE_THICKNESS=U;exports.GRID_LAYER_CORNER_HIT_SIZE=B;exports.GRID_LAYER_EDGE_HIT_THICKNESS=Z;exports.HORIZONTAL_DIVIDER_WIDTH=n_;exports.PIVOT_ANIMATION_ENTER=t;exports.PIVOT_ANIMATION_LEAVE=L;exports.RESIZE_HANDLE_THICKNESS=g;exports.RESIZE_HANDLE_Z_INDEX=F;exports.SPLIT_HANDLE_THICKNESS=S_;exports.STACK_ANIMATION_POP=e;exports.STACK_ANIMATION_PUSH=G;exports.STACK_TRANSITION_DURATION=p;exports.STACK_TRANSITION_EASING=c;exports.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS=Y;exports.TAB_DRAG_INSERT_GUIDE_COLOR=w;exports.TAB_DRAG_INSERT_GUIDE_SHADOW=M;exports.TAB_DRAG_INSERT_GUIDE_WIDTH=X;exports.TAB_DRAG_OVERLAY_Z_INDEX=u;exports.TAB_DRAG_PREVIEW_OFFSET_X=K;exports.TAB_DRAG_PREVIEW_OFFSET_Y=z;
+//# sourceMappingURL=styles-qf6ptVLD.cjs.map

package/dist/styles-qf6ptVLD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-qf6ptVLD.cjs","sources":["../src/constants/styles.ts"],"sourcesContent":["/**\n * @file Style constants for library components\n *\n * All style values are defined here with CSS variable fallbacks.\n * Users can override these via CSS variables (--rpl-*).\n *\n * All CSS variables use the unified prefix: --rpl- (react-panel-layout)\n *\n * @example\n * // In your CSS:\n * :root {\n *   --rpl-color-primary: #ff0000;\n * }\n */\n\n// ========================================\n// CSS VARIABLE PREFIX\n// ========================================\n\n/**\n * Unified CSS variable prefix for all react-panel-layout variables\n * All theme variables use this prefix: --rpl-*\n */\nexport const CSS_VAR_PREFIX = \"rpl\";\n\n// ========================================\n// COLORS\n// ========================================\n\n/**\n * Tab colors - used in TabBar component\n */\nexport const COLOR_TAB_FG = \"var(--rpl-color-tab-fg, #d5d7de)\";\nexport const COLOR_TAB_ACTIVE_BG = \"var(--rpl-color-tab-active-bg, #2b2d35)\";\nexport const COLOR_TABBAR_BG = \"var(--rpl-color-tabbar-bg, #1e1f24)\";\n\n/**\n * Panel colors - used in panel layouts\n */\nexport const COLOR_PANEL_BORDER = \"var(--rpl-color-panel-border, rgba(0, 0, 0, 0.3))\";\nexport const COLOR_PANEL_BG = \"var(--rpl-color-panel-bg, #0b0b0c)\";\n\n/**\n * Primary color - used for resize handles, highlights\n */\nexport const COLOR_PRIMARY = \"var(--rpl-color-primary, #2196f3)\";\nexport const COLOR_RESIZE_HANDLE_IDLE = \"var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.0))\";\nexport const COLOR_RESIZE_HANDLE_HOVER = \"var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))\";\nexport const COLOR_RESIZE_HANDLE_ACTIVE = \"var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))\";\n\n/**\n * Drop suggestion overlay colors\n */\nexport const COLOR_DROP_SUGGEST_BORDER = \"var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))\";\nexport const COLOR_DROP_SUGGEST_BG = \"var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))\";\n\n/**\n * Tab drag overlay colors\n */\nexport const COLOR_TABDRAG_BG = \"var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))\";\nexport const COLOR_TABDRAG_FG = \"var(--rpl-color-tabdrag-fg, #e9ebf0)\";\nexport const COLOR_TABDRAG_BORDER = \"var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))\";\nexport const COLOR_TABDRAG_SHADOW = \"var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))\";\n\n/**\n * Insert guide colors\n */\nexport const COLOR_INSERT_GUIDE = \"var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))\";\nexport const COLOR_INSERT_GUIDE_SHADOW = \"var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))\";\n\n/**\n * Node editor / floating panel colors\n * These are used by Drawer and FloatingPanelFrame components\n */\nexport const COLOR_NODE_EDITOR_SURFACE = \"var(--rpl-color-surface, #fff)\";\nexport const COLOR_NODE_EDITOR_SURFACE_2 = \"var(--rpl-color-surface-2, #fafafa)\";\nexport const COLOR_NODE_EDITOR_BORDER = \"var(--rpl-color-border, #e5e7eb)\";\nexport const COLOR_NODE_EDITOR_MUTED_FG = \"var(--rpl-color-muted-fg, #6b7280)\";\nexport const COLOR_NODE_EDITOR_CARD_SHADOW = \"var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))\";\nexport const COLOR_DRAWER_BACKDROP = \"var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))\";\n\n/**\n * Drawer transitions\n */\nexport const DRAWER_TRANSITION_DURATION = \"var(--rpl-drawer-transition-duration, 220ms)\";\nexport const DRAWER_TRANSITION_EASING = \"var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))\";\n\n/**\n * Pivot animations\n * User defines @keyframes in their CSS and references via these tokens.\n * - Enter: Applied when content becomes active\n * - Leave: Applied when content becomes inactive\n */\nexport const PIVOT_ANIMATION_ENTER = \"var(--rpl-pivot-animation-enter, none)\";\nexport const PIVOT_ANIMATION_LEAVE = \"var(--rpl-pivot-animation-leave, none)\";\n\n/**\n * Pivot swipe animations\n * Used by SwipePivotContent for snap-back animation after swipe ends.\n */\nexport const PIVOT_SWIPE_SNAP_DURATION = \"var(--rpl-pivot-swipe-snap-duration, 300ms)\";\nexport const PIVOT_SWIPE_SNAP_EASING = \"var(--rpl-pivot-swipe-snap-easing, cubic-bezier(0.22, 1, 0.36, 1))\";\n\n/**\n * Stack animations\n * User defines @keyframes in their CSS and references via these tokens.\n * - Push: Applied when a new panel is pushed onto the stack\n * - Pop: Applied when a panel is popped from the stack\n */\nexport const STACK_ANIMATION_PUSH = \"var(--rpl-stack-animation-push, none)\";\nexport const STACK_ANIMATION_POP = \"var(--rpl-stack-animation-pop, none)\";\nexport const STACK_TRANSITION_DURATION = \"var(--rpl-stack-transition-duration, 350ms)\";\nexport const STACK_TRANSITION_EASING = \"var(--rpl-stack-transition-easing, cubic-bezier(0.32, 0.72, 0, 1))\";\n\n// ========================================\n// SIZING & SPACING\n// ========================================\n\n/**\n * Tab sizing\n */\nexport const SIZE_TAB_FONT = \"var(--rpl-size-tab-font, 12px)\";\nexport const SPACE_TAB_PADDING_Y = \"var(--rpl-space-tab-padding-y, 4px)\";\nexport const SPACE_TAB_PADDING_X = \"var(--rpl-space-tab-padding-x, 8px)\";\n\n/**\n * Tabbar spacing\n */\nexport const SPACE_TABBAR_GAP = \"var(--rpl-space-tabbar-gap, 6px)\";\nexport const SPACE_TABBAR_PADDING_Y = \"var(--rpl-space-tabbar-padding-y, 4px)\";\nexport const SPACE_TABBAR_PADDING_X = \"var(--rpl-space-tabbar-padding-x, 6px)\";\n\n/**\n * Border radius (decorative, using CSS variables)\n */\nexport const RADIUS_TAB = \"var(--rpl-radius-tab, 4px)\";\nexport const RADIUS_SUGGEST = \"var(--rpl-radius-suggest, 6px)\";\n\n/**\n * Border widths\n */\nexport const SIZE_SUGGEST_BORDER = \"var(--rpl-size-suggest-border, 2px)\";\n\n/**\n * Handle thicknesses\n * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations\n */\nexport const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation\nexport const SIZE_RESIZE_HANDLE_THICKNESS = \"var(--rpl-size-resize-handle-thickness, 4px)\";\nexport const SIZE_SPLIT_HANDLE_THICKNESS = \"var(--rpl-size-split-handle-thickness, 6px)\";\n\n/**\n * Drop suggest padding\n */\nexport const SPACE_DROP_SUGGEST_PADDING = \"var(--rpl-space-drop-suggest-padding, 6px)\";\n\n// ========================================\n// Z-INDEXES\n// ========================================\n\nexport const Z_OVERLAY = \"var(--rpl-z-overlay, 9998)\";\nexport const Z_TABDRAG_OVERLAY = \"var(--rpl-z-tabdrag-overlay, 9999)\";\nexport const Z_DIALOG_OVERLAY = \"var(--rpl-z-dialog-overlay, 10000)\";\n\n// ========================================\n// COMPONENT-SPECIFIC CONSTANTS\n// ========================================\n\n/**\n * Resize Handle\n */\nexport const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;\nexport const RESIZE_HANDLE_Z_INDEX = \"var(--rpl-z-resize-handle, 1000)\";\n\n/**\n * Grid Track Resize Handle\n */\nexport const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;\n\n/**\n * Grid Layer Resize Handles\n */\nexport const GRID_LAYER_CORNER_HIT_SIZE = \"var(--rpl-size-grid-layer-corner-hit, 14px)\";\nexport const GRID_LAYER_EDGE_HIT_THICKNESS = \"var(--rpl-size-grid-layer-edge-hit-thickness, 12px)\";\n\n/**\n * Drop Suggest Overlay\n */\nexport const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;\nexport const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;\nexport const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;\nexport const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;\nexport const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;\nexport const DROP_SUGGEST_PADDING_PX = 6;\n\n/**\n * Tab Drag Overlay\n */\nexport const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;\nexport const TAB_DRAG_PREVIEW_OFFSET_X = \"var(--rpl-space-tab-drag-preview-offset-x, 12px)\";\nexport const TAB_DRAG_PREVIEW_OFFSET_Y = \"var(--rpl-space-tab-drag-preview-offset-y, 12px)\";\nexport const TAB_DRAG_PREVIEW_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-preview, 6px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_Y = \"var(--rpl-space-tab-drag-preview-padding-y, 4px)\";\nexport const TAB_DRAG_PREVIEW_PADDING_X = \"var(--rpl-space-tab-drag-preview-padding-x, 8px)\";\nexport const TAB_DRAG_PREVIEW_FONT_SIZE = \"var(--rpl-size-tab-drag-preview-font, 12px)\";\nexport const TAB_DRAG_INSERT_GUIDE_WIDTH = \"var(--rpl-size-tab-drag-insert-guide-width, 2px)\";\nexport const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = \"var(--rpl-radius-tab-drag-insert-guide, 1px)\";\nexport const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;\nexport const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;\nexport const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;\nexport const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;\nexport const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;\nexport const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;\n\n/**\n * Dialog Overlay\n */\nexport const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;\n\n/**\n * Floating Panel Frame\n */\nexport const FLOATING_PANEL_BORDER_RADIUS = \"var(--rpl-radius-floating-panel, 8px)\";\nexport const FLOATING_PANEL_GAP = \"var(--rpl-space-floating-panel-gap, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_Y = \"var(--rpl-space-floating-panel-header-padding-y, 8px)\";\nexport const FLOATING_PANEL_HEADER_PADDING_X = \"var(--rpl-space-floating-panel-header-padding-x, 12px)\";\nexport const FLOATING_PANEL_CONTENT_PADDING = \"var(--rpl-space-floating-panel-content-padding, 12px)\";\nexport const FLOATING_PANEL_META_FONT_SIZE = \"var(--rpl-size-floating-panel-meta-font, 12px)\";\nexport const FLOATING_PANEL_CONTROLS_GAP = \"var(--rpl-space-floating-panel-controls-gap, 6px)\";\nexport const FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-floating-panel-close-button-font, 1.25rem)\";\nexport const FLOATING_PANEL_CLOSE_BUTTON_PADDING =\n  \"var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)\";\nexport const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;\nexport const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;\nexport const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Drawer\n */\nexport const DRAWER_HEADER_PADDING_Y = \"var(--rpl-space-drawer-header-padding-y, 10px)\";\nexport const DRAWER_HEADER_PADDING_X = \"var(--rpl-space-drawer-header-padding-x, 12px)\";\nexport const DRAWER_HEADER_GAP = \"var(--rpl-space-drawer-header-gap, 8px)\";\nexport const DRAWER_CONTENT_PADDING = \"var(--rpl-space-drawer-content-padding, 12px)\";\nexport const DRAWER_CLOSE_BUTTON_FONT_SIZE = \"var(--rpl-size-drawer-close-button-font, 18px)\";\nexport const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;\nexport const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;\nexport const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;\n\n/**\n * Split Handles\n */\nexport const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;\n\n/**\n * HorizontalDivider\n */\nexport const HORIZONTAL_DIVIDER_WIDTH = \"var(--rpl-size-horizontal-divider-width, 4px)\";\nexport const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = \"var(--rpl-space-horizontal-divider-hit-area-offset, 4px)\";\n"],"names":["COLOR_RESIZE_HANDLE_IDLE","COLOR_RESIZE_HANDLE_HOVER","COLOR_RESIZE_HANDLE_ACTIVE","COLOR_DROP_SUGGEST_BORDER","COLOR_DROP_SUGGEST_BG","COLOR_INSERT_GUIDE","COLOR_INSERT_GUIDE_SHADOW","COLOR_NODE_EDITOR_SURFACE","COLOR_NODE_EDITOR_SURFACE_2","COLOR_NODE_EDITOR_BORDER","COLOR_NODE_EDITOR_MUTED_FG","COLOR_NODE_EDITOR_CARD_SHADOW","COLOR_DRAWER_BACKDROP","DRAWER_TRANSITION_DURATION","DRAWER_TRANSITION_EASING","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","STACK_ANIMATION_PUSH","STACK_ANIMATION_POP","STACK_TRANSITION_DURATION","STACK_TRANSITION_EASING","RADIUS_SUGGEST","SIZE_SUGGEST_BORDER","SIZE_RESIZE_HANDLE_THICKNESS","SIZE_SPLIT_HANDLE_THICKNESS","Z_OVERLAY","Z_TABDRAG_OVERLAY","Z_DIALOG_OVERLAY","RESIZE_HANDLE_THICKNESS","RESIZE_HANDLE_Z_INDEX","GRID_HANDLE_THICKNESS","GRID_LAYER_CORNER_HIT_SIZE","GRID_LAYER_EDGE_HIT_THICKNESS","DROP_SUGGEST_Z_INDEX","DROP_SUGGEST_BORDER_WIDTH","DROP_SUGGEST_BORDER_RADIUS","DROP_SUGGEST_BORDER_COLOR","DROP_SUGGEST_BG_COLOR","DROP_SUGGEST_PADDING_PX","TAB_DRAG_OVERLAY_Z_INDEX","TAB_DRAG_PREVIEW_OFFSET_X","TAB_DRAG_PREVIEW_OFFSET_Y","TAB_DRAG_INSERT_GUIDE_WIDTH","TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS","TAB_DRAG_INSERT_GUIDE_COLOR","TAB_DRAG_INSERT_GUIDE_SHADOW","DIALOG_OVERLAY_Z_INDEX","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_CONTENT_PADDING","FLOATING_PANEL_META_FONT_SIZE","FLOATING_PANEL_CONTROLS_GAP","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SURFACE_2_COLOR","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_SHADOW","DRAWER_HEADER_PADDING_Y","DRAWER_HEADER_PADDING_X","DRAWER_HEADER_GAP","DRAWER_CONTENT_PADDING","SPLIT_HANDLE_THICKNESS","HORIZONTAL_DIVIDER_WIDTH"],"mappings":"aA8CO,MAAMA,EAA2B,gEAC3BC,EAA4B,iEAC5BC,EAA6B,kEAK7BC,EAA4B,gEAC5BC,EAAwB,6DAaxBC,EAAqB,2DACrBC,EAA4B,2EAM5BC,EAA4B,iCAC5BC,EAA8B,sCAC9BC,EAA2B,mCAC3BC,EAA6B,qCAC7BC,EAAgC,yDAChCC,EAAwB,uDAKxBC,EAA6B,+CAC7BC,EAA2B,sEAQ3BC,EAAwB,yCACxBC,EAAwB,yCAexBC,EAAuB,wCACvBC,EAAsB,uCACtBC,EAA4B,8CAC5BC,EAA0B,qEAwB1BC,EAAiB,iCAKjBC,EAAsB,sCAO5B,MAAMC,EAA+B,+CAC/BC,EAA8B,8CAW9BC,EAAY,6BACZC,EAAoB,qCACpBC,EAAmB,qCASnBC,EAA0BL,EAC1BM,EAAwB,mCAKxBC,EAAwB,EAKxBC,EAA6B,8CAC7BC,EAAgC,sDAKhCC,EAAuBR,EACvBS,EAA4BZ,EAC5Ba,EAA6Bd,EAC7Be,EAA4BjC,EAC5BkC,EAAwBjC,EAExBkC,EAA0B,EAK1BC,EAA2Bb,EAC3Bc,EAA4B,mDAC5BC,EAA4B,mDAK5BC,EAA8B,mDAC9BC,EAAsC,+CAKtCC,EAA8BvC,EAC9BwC,EAA+BvC,EAK/BwC,EAAyBnB,EAKzBoB,EAA+B,wCAC/BC,EAAqB,2CACrBC,EAAkC,wDAClCC,EAAkC,yDAClCC,EAAiC,wDACjCC,EAAgC,iDAChCC,EAA8B,oDAC9BC,GAAwC,4DACxCC,GACX,uEACWC,GAA+BjD,EAC/BkD,GAAiCjD,EACjCkD,GAA8BjD,EAC9BkD,GAAgCjD,EAChCkD,GAAwBjD,EAKxBkD,GAA0B,iDAC1BC,GAA0B,iDAC1BC,GAAoB,0CACpBC,GAAyB,gDASzBC,GAAyBzC,EAKzB0C,GAA2B"}

package/dist/useContentCache-CO3LYNmz.js

@@ -0,0 +1,24 @@
+import * as c from "react";
+function C(u) {
+  const { resolveContent: s, validIds: o } = u, e = c.useRef(/* @__PURE__ */ new Map()), a = c.useRef(s);
+  a.current = s;
+  const f = c.useCallback((t) => {
+    const r = e.current.get(t);
+    if (r !== void 0)
+      return r;
+    const n = a.current(t);
+    return e.current.set(t, n), n;
+  }, []), l = c.useCallback(() => {
+    e.current.clear();
+  }, []);
+  return c.useEffect(() => {
+    const t = new Set(o);
+    e.current.forEach((r, n) => {
+      t.has(n) || e.current.delete(n);
+    });
+  }, [o]), { getCachedContent: f, clearCache: l };
+}
+export {
+  C as u
+};
+//# sourceMappingURL=useContentCache-CO3LYNmz.js.map

package/dist/useContentCache-CO3LYNmz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentCache-CO3LYNmz.js","sources":["../src/hooks/useContentCache.tsx"],"sourcesContent":["/**\n * @file Shared content caching hook for preserving React component state.\n *\n * This hook provides a common pattern for caching ReactNode content by ID,\n * ensuring the same reference is returned for the same ID across re-renders.\n * This prevents component remounting when parent components re-create content arrays.\n *\n * Used by:\n * - PanelSystemContext (GridLayout layer content)\n * - usePivot (Pivot item content)\n * - ContentRegistry (Panel content)\n */\nimport * as React from \"react\";\n\n/**\n * Function type for resolving content by ID.\n * Called only when content is not already cached.\n */\nexport type ContentResolver<TId extends string = string> = (id: TId) => React.ReactNode | null;\n\n/**\n * Options for useContentCache hook.\n */\nexport type UseContentCacheOptions<TId extends string = string> = {\n  /**\n   * Function to resolve content by ID.\n   * Called only when content is not already in cache.\n   */\n  resolveContent: ContentResolver<TId>;\n  /**\n   * Current valid IDs. Used to clean up stale cache entries.\n   * When an ID is removed from this array, its cached content is deleted.\n   */\n  validIds: readonly TId[];\n};\n\n/**\n * Result from useContentCache hook.\n */\nexport type UseContentCacheResult<TId extends string = string> = {\n  /**\n   * Get cached content for an ID.\n   * Returns the same ReactNode reference for the same ID.\n   */\n  getCachedContent: (id: TId) => React.ReactNode | null;\n  /**\n   * Clear all cached content.\n   * Use when you need to force re-creation of all content.\n   */\n  clearCache: () => void;\n};\n\n/**\n * Hook for caching ReactNode content by ID.\n *\n * Ensures the same ReactNode reference is returned for the same ID,\n * preventing unnecessary component remounting when parent re-renders.\n *\n * @example\n * ```tsx\n * const { getCachedContent } = useContentCache({\n *   resolveContent: (id) => items.find(i => i.id === id)?.content ?? null,\n *   validIds: items.map(i => i.id),\n * });\n *\n * return items.map(item => (\n *   <div key={item.id}>{getCachedContent(item.id)}</div>\n * ));\n * ```\n */\nexport function useContentCache<TId extends string = string>(\n  options: UseContentCacheOptions<TId>,\n): UseContentCacheResult<TId> {\n  const { resolveContent, validIds } = options;\n\n  /**\n   * Cache storage. Key: ID, Value: cached ReactNode.\n   * Uses ref to persist across re-renders without triggering updates.\n   */\n  const cacheRef = React.useRef<Map<string, React.ReactNode>>(new Map());\n\n  /**\n   * Store resolveContent in a ref for stable getCachedContent function.\n   * This allows getCachedContent to always use the latest resolver\n   * without needing to be recreated.\n   */\n  const resolveContentRef = React.useRef(resolveContent);\n  resolveContentRef.current = resolveContent;\n\n  /**\n   * Get or create cached content for an ID.\n   * On first access, calls resolveContent and caches the result.\n   * On subsequent accesses, returns the cached reference.\n   */\n  const getCachedContent = React.useCallback((id: TId): React.ReactNode | null => {\n    const cached = cacheRef.current.get(id);\n    if (cached !== undefined) {\n      return cached;\n    }\n\n    const content = resolveContentRef.current(id);\n    cacheRef.current.set(id, content);\n    return content;\n  }, []);\n\n  /**\n   * Clear all cached content.\n   */\n  const clearCache = React.useCallback((): void => {\n    cacheRef.current.clear();\n  }, []);\n\n  /**\n   * Clean up stale cache entries when validIds changes.\n   * Removes entries for IDs that are no longer valid.\n   */\n  React.useEffect(() => {\n    const currentValidIds = new Set<string>(validIds);\n    cacheRef.current.forEach((_, id) => {\n      if (!currentValidIds.has(id)) {\n        cacheRef.current.delete(id);\n      }\n    });\n  }, [validIds]);\n\n  return { getCachedContent, clearCache };\n}\n"],"names":["useContentCache","options","resolveContent","validIds","cacheRef","React","resolveContentRef","getCachedContent","id","cached","content","clearCache","currentValidIds","_"],"mappings":";AAsEO,SAASA,EACdC,GAC4B;AAC5B,QAAM,EAAE,gBAAAC,GAAgB,UAAAC,EAAA,IAAaF,GAM/BG,IAAWC,EAAM,OAAqC,oBAAI,KAAK,GAO/DC,IAAoBD,EAAM,OAAOH,CAAc;AACrD,EAAAI,EAAkB,UAAUJ;AAO5B,QAAMK,IAAmBF,EAAM,YAAY,CAACG,MAAoC;AAC9E,UAAMC,IAASL,EAAS,QAAQ,IAAII,CAAE;AACtC,QAAIC,MAAW;AACb,aAAOA;AAGT,UAAMC,IAAUJ,EAAkB,QAAQE,CAAE;AAC5C,WAAAJ,EAAS,QAAQ,IAAII,GAAIE,CAAO,GACzBA;AAAA,EACT,GAAG,CAAA,CAAE,GAKCC,IAAaN,EAAM,YAAY,MAAY;AAC/C,IAAAD,EAAS,QAAQ,MAAA;AAAA,EACnB,GAAG,CAAA,CAAE;AAML,SAAAC,EAAM,UAAU,MAAM;AACpB,UAAMO,IAAkB,IAAI,IAAYT,CAAQ;AAChD,IAAAC,EAAS,QAAQ,QAAQ,CAACS,GAAGL,MAAO;AAClC,MAAKI,EAAgB,IAAIJ,CAAE,KACzBJ,EAAS,QAAQ,OAAOI,CAAE;AAAA,IAE9B,CAAC;AAAA,EACH,GAAG,CAACL,CAAQ,CAAC,GAEN,EAAE,kBAAAI,GAAkB,YAAAI,EAAA;AAC7B;"}

package/dist/useContentCache-DqXtLrLs.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("react");function C(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(c,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return c.default=t,Object.freeze(c)}const s=C(i);function d(t){const{resolveContent:c,validIds:n}=t,e=s.useRef(new Map),a=s.useRef(c);a.current=c;const l=s.useCallback(r=>{const u=e.current.get(r);if(u!==void 0)return u;const o=a.current(r);return e.current.set(r,o),o},[]),f=s.useCallback(()=>{e.current.clear()},[]);return s.useEffect(()=>{const r=new Set(n);e.current.forEach((u,o)=>{r.has(o)||e.current.delete(o)})},[n]),{getCachedContent:l,clearCache:f}}exports.useContentCache=d;
+//# sourceMappingURL=useContentCache-DqXtLrLs.cjs.map

package/dist/useContentCache-DqXtLrLs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentCache-DqXtLrLs.cjs","sources":["../src/hooks/useContentCache.tsx"],"sourcesContent":["/**\n * @file Shared content caching hook for preserving React component state.\n *\n * This hook provides a common pattern for caching ReactNode content by ID,\n * ensuring the same reference is returned for the same ID across re-renders.\n * This prevents component remounting when parent components re-create content arrays.\n *\n * Used by:\n * - PanelSystemContext (GridLayout layer content)\n * - usePivot (Pivot item content)\n * - ContentRegistry (Panel content)\n */\nimport * as React from \"react\";\n\n/**\n * Function type for resolving content by ID.\n * Called only when content is not already cached.\n */\nexport type ContentResolver<TId extends string = string> = (id: TId) => React.ReactNode | null;\n\n/**\n * Options for useContentCache hook.\n */\nexport type UseContentCacheOptions<TId extends string = string> = {\n  /**\n   * Function to resolve content by ID.\n   * Called only when content is not already in cache.\n   */\n  resolveContent: ContentResolver<TId>;\n  /**\n   * Current valid IDs. Used to clean up stale cache entries.\n   * When an ID is removed from this array, its cached content is deleted.\n   */\n  validIds: readonly TId[];\n};\n\n/**\n * Result from useContentCache hook.\n */\nexport type UseContentCacheResult<TId extends string = string> = {\n  /**\n   * Get cached content for an ID.\n   * Returns the same ReactNode reference for the same ID.\n   */\n  getCachedContent: (id: TId) => React.ReactNode | null;\n  /**\n   * Clear all cached content.\n   * Use when you need to force re-creation of all content.\n   */\n  clearCache: () => void;\n};\n\n/**\n * Hook for caching ReactNode content by ID.\n *\n * Ensures the same ReactNode reference is returned for the same ID,\n * preventing unnecessary component remounting when parent re-renders.\n *\n * @example\n * ```tsx\n * const { getCachedContent } = useContentCache({\n *   resolveContent: (id) => items.find(i => i.id === id)?.content ?? null,\n *   validIds: items.map(i => i.id),\n * });\n *\n * return items.map(item => (\n *   <div key={item.id}>{getCachedContent(item.id)}</div>\n * ));\n * ```\n */\nexport function useContentCache<TId extends string = string>(\n  options: UseContentCacheOptions<TId>,\n): UseContentCacheResult<TId> {\n  const { resolveContent, validIds } = options;\n\n  /**\n   * Cache storage. Key: ID, Value: cached ReactNode.\n   * Uses ref to persist across re-renders without triggering updates.\n   */\n  const cacheRef = React.useRef<Map<string, React.ReactNode>>(new Map());\n\n  /**\n   * Store resolveContent in a ref for stable getCachedContent function.\n   * This allows getCachedContent to always use the latest resolver\n   * without needing to be recreated.\n   */\n  const resolveContentRef = React.useRef(resolveContent);\n  resolveContentRef.current = resolveContent;\n\n  /**\n   * Get or create cached content for an ID.\n   * On first access, calls resolveContent and caches the result.\n   * On subsequent accesses, returns the cached reference.\n   */\n  const getCachedContent = React.useCallback((id: TId): React.ReactNode | null => {\n    const cached = cacheRef.current.get(id);\n    if (cached !== undefined) {\n      return cached;\n    }\n\n    const content = resolveContentRef.current(id);\n    cacheRef.current.set(id, content);\n    return content;\n  }, []);\n\n  /**\n   * Clear all cached content.\n   */\n  const clearCache = React.useCallback((): void => {\n    cacheRef.current.clear();\n  }, []);\n\n  /**\n   * Clean up stale cache entries when validIds changes.\n   * Removes entries for IDs that are no longer valid.\n   */\n  React.useEffect(() => {\n    const currentValidIds = new Set<string>(validIds);\n    cacheRef.current.forEach((_, id) => {\n      if (!currentValidIds.has(id)) {\n        cacheRef.current.delete(id);\n      }\n    });\n  }, [validIds]);\n\n  return { getCachedContent, clearCache };\n}\n"],"names":["useContentCache","options","resolveContent","validIds","cacheRef","React","resolveContentRef","getCachedContent","id","cached","content","clearCache","currentValidIds","_"],"mappings":"gUAsEO,SAASA,EACdC,EAC4B,CAC5B,KAAM,CAAE,eAAAC,EAAgB,SAAAC,CAAA,EAAaF,EAM/BG,EAAWC,EAAM,OAAqC,IAAI,GAAK,EAO/DC,EAAoBD,EAAM,OAAOH,CAAc,EACrDI,EAAkB,QAAUJ,EAO5B,MAAMK,EAAmBF,EAAM,YAAaG,GAAoC,CAC9E,MAAMC,EAASL,EAAS,QAAQ,IAAII,CAAE,EACtC,GAAIC,IAAW,OACb,OAAOA,EAGT,MAAMC,EAAUJ,EAAkB,QAAQE,CAAE,EAC5C,OAAAJ,EAAS,QAAQ,IAAII,EAAIE,CAAO,EACzBA,CACT,EAAG,CAAA,CAAE,EAKCC,EAAaN,EAAM,YAAY,IAAY,CAC/CD,EAAS,QAAQ,MAAA,CACnB,EAAG,CAAA,CAAE,EAMLC,OAAAA,EAAM,UAAU,IAAM,CACpB,MAAMO,EAAkB,IAAI,IAAYT,CAAQ,EAChDC,EAAS,QAAQ,QAAQ,CAACS,EAAGL,IAAO,CAC7BI,EAAgB,IAAIJ,CAAE,GACzBJ,EAAS,QAAQ,OAAOI,CAAE,CAE9B,CAAC,CACH,EAAG,CAACL,CAAQ,CAAC,EAEN,CAAE,iBAAAI,EAAkB,WAAAI,CAAA,CAC7B"}

package/dist/useDocumentPointerEvents-CKdhGXd0.js

@@ -0,0 +1,46 @@
+import * as c from "react";
+import { u as i } from "./useEffectEvent-Dp7HLCf0.js";
+function a(o, e) {
+  const t = i(e.onMove), n = i(e.onUp), r = i(e.onCancel);
+  c.useEffect(() => {
+    if (o)
+      return e.onMove && document.addEventListener("pointermove", t, { passive: !1 }), e.onUp && document.addEventListener("pointerup", n), e.onCancel && document.addEventListener("pointercancel", r), () => {
+        e.onMove && document.removeEventListener("pointermove", t), e.onUp && document.removeEventListener("pointerup", n), e.onCancel && document.removeEventListener("pointercancel", r);
+      };
+  }, [o, e.onMove, e.onUp, e.onCancel, t, n, r]);
+}
+function p(o, e, t) {
+  c.useEffect(() => {
+    const n = o.current;
+    if (!(!e || !n || t === void 0))
+      return n.setPointerCapture(t), () => {
+        n.hasPointerCapture && n.hasPointerCapture(t) && n.releasePointerCapture(t);
+      };
+  }, [o, e, t]);
+}
+function E(o, e, t = ["pointerdown", "pointermove", "pointerup"]) {
+  c.useEffect(() => {
+    const n = o.current;
+    if (!e || !n)
+      return;
+    const r = (u) => {
+      u.preventDefault();
+    };
+    return t.forEach((u) => {
+      n.addEventListener(u, r, { passive: !1 });
+    }), () => {
+      t.forEach((u) => {
+        n.removeEventListener(u, r);
+      });
+    };
+  }, [o, e, t]);
+}
+function l(o, e, t) {
+  const { onMove: n, onUp: r, onCancel: u, pointerId: s, capturePointer: v = !0, preventDefaults: f = !0 } = t;
+  a(e, { onMove: n, onUp: r, onCancel: u }), p(o, e ? v : !1, s), E(o, e ? f : !1);
+}
+export {
+  a,
+  l as u
+};
+//# sourceMappingURL=useDocumentPointerEvents-CKdhGXd0.js.map

package/dist/useDocumentPointerEvents-CKdhGXd0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentPointerEvents-CKdhGXd0.js","sources":["../src/hooks/useDocumentPointerEvents.ts"],"sourcesContent":["/**\n * @file Hooks for managing document-level pointer events with proper cleanup\n */\nimport * as React from \"react\";\nimport { useEffectEvent } from \"./useEffectEvent\";\n\nexport type UseDocumentPointerEventsOptions = {\n  onMove?: (e: PointerEvent) => void;\n  onUp?: (e: PointerEvent) => void;\n  onCancel?: (e: PointerEvent) => void;\n};\n\n/**\n * Custom hook for managing document-level pointer events with proper cleanup\n * This pattern is commonly used for drag operations that need to continue\n * even when the pointer moves outside the original element\n */\nexport function useDocumentPointerEvents(enabled: boolean, handlers: UseDocumentPointerEventsOptions) {\n  const handleMoveEvent = useEffectEvent(handlers.onMove);\n  const handleUpEvent = useEffectEvent(handlers.onUp);\n  const handleCancelEvent = useEffectEvent(handlers.onCancel);\n\n  React.useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    if (handlers.onMove) {\n      document.addEventListener(\"pointermove\", handleMoveEvent, { passive: false });\n    }\n    if (handlers.onUp) {\n      document.addEventListener(\"pointerup\", handleUpEvent);\n    }\n    if (handlers.onCancel) {\n      document.addEventListener(\"pointercancel\", handleCancelEvent);\n    }\n\n    // Cleanup function\n    return () => {\n      if (handlers.onMove) {\n        document.removeEventListener(\"pointermove\", handleMoveEvent);\n      }\n      if (handlers.onUp) {\n        document.removeEventListener(\"pointerup\", handleUpEvent);\n      }\n      if (handlers.onCancel) {\n        document.removeEventListener(\"pointercancel\", handleCancelEvent);\n      }\n    };\n  }, [enabled, handlers.onMove, handlers.onUp, handlers.onCancel, handleMoveEvent, handleUpEvent, handleCancelEvent]);\n}\n\n/**\n * Hook for capturing pointer during drag operations\n * This ensures that pointer events are delivered to the capturing element\n * even when the pointer moves outside its boundaries\n */\nexport function usePointerCapture(elementRef: React.RefObject<HTMLElement | null>, enabled: boolean, pointerId?: number) {\n  React.useEffect(() => {\n    const element = elementRef.current;\n    if (!enabled || !element || pointerId === undefined) {\n      return;\n    }\n\n    // Capture pointer\n    element.setPointerCapture(pointerId);\n\n    // Release capture on cleanup\n    return () => {\n      if (element.hasPointerCapture && element.hasPointerCapture(pointerId)) {\n        element.releasePointerCapture(pointerId);\n      }\n    };\n  }, [elementRef, enabled, pointerId]);\n}\n\n/**\n * Hook for preventing default pointer events during operations\n * Useful for preventing text selection, context menus, etc. during drag operations\n */\nexport function usePreventPointerDefaults(\n  elementRef: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n  events: string[] = [\"pointerdown\", \"pointermove\", \"pointerup\"],\n) {\n  React.useEffect(() => {\n    const element = elementRef.current;\n    if (!enabled || !element) {\n      return;\n    }\n\n    const preventDefault = (e: Event) => {\n      e.preventDefault();\n    };\n\n    // Add listeners\n    events.forEach((eventType) => {\n      element.addEventListener(eventType, preventDefault, { passive: false });\n    });\n\n    // Cleanup\n    return () => {\n      events.forEach((eventType) => {\n        element.removeEventListener(eventType, preventDefault);\n      });\n    };\n  }, [elementRef, enabled, events]);\n}\n\n/**\n * Hook that combines multiple pointer event patterns for drag operations\n */\nexport function useDragPointerEvents(\n  elementRef: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n  options: {\n    onMove?: (e: PointerEvent) => void;\n    onUp?: (e: PointerEvent) => void;\n    onCancel?: (e: PointerEvent) => void;\n    pointerId?: number;\n    capturePointer?: boolean;\n    preventDefaults?: boolean;\n  },\n) {\n  const { onMove, onUp, onCancel, pointerId, capturePointer = true, preventDefaults = true } = options;\n\n  // Document-level event handlers\n  useDocumentPointerEvents(enabled, { onMove, onUp, onCancel });\n\n  // Pointer capture\n  const shouldCapturePointer = enabled ? capturePointer : false;\n  usePointerCapture(elementRef, shouldCapturePointer, pointerId);\n\n  // Prevent defaults\n  const shouldPreventDefaults = enabled ? preventDefaults : false;\n  usePreventPointerDefaults(elementRef, shouldPreventDefaults);\n}\n"],"names":["useDocumentPointerEvents","enabled","handlers","handleMoveEvent","useEffectEvent","handleUpEvent","handleCancelEvent","React","usePointerCapture","elementRef","pointerId","element","usePreventPointerDefaults","events","preventDefault","e","eventType","useDragPointerEvents","options","onMove","onUp","onCancel","capturePointer","preventDefaults"],"mappings":";;AAiBO,SAASA,EAAyBC,GAAkBC,GAA2C;AACpG,QAAMC,IAAkBC,EAAeF,EAAS,MAAM,GAChDG,IAAgBD,EAAeF,EAAS,IAAI,GAC5CI,IAAoBF,EAAeF,EAAS,QAAQ;AAE1D,EAAAK,EAAM,UAAU,MAAM;AACpB,QAAKN;AAIL,aAAIC,EAAS,UACX,SAAS,iBAAiB,eAAeC,GAAiB,EAAE,SAAS,IAAO,GAE1ED,EAAS,QACX,SAAS,iBAAiB,aAAaG,CAAa,GAElDH,EAAS,YACX,SAAS,iBAAiB,iBAAiBI,CAAiB,GAIvD,MAAM;AACX,QAAIJ,EAAS,UACX,SAAS,oBAAoB,eAAeC,CAAe,GAEzDD,EAAS,QACX,SAAS,oBAAoB,aAAaG,CAAa,GAErDH,EAAS,YACX,SAAS,oBAAoB,iBAAiBI,CAAiB;AAAA,MAEnE;AAAA,EACF,GAAG,CAACL,GAASC,EAAS,QAAQA,EAAS,MAAMA,EAAS,UAAUC,GAAiBE,GAAeC,CAAiB,CAAC;AACpH;AAOO,SAASE,EAAkBC,GAAiDR,GAAkBS,GAAoB;AACvH,EAAAH,EAAM,UAAU,MAAM;AACpB,UAAMI,IAAUF,EAAW;AAC3B,QAAI,GAACR,KAAW,CAACU,KAAWD,MAAc;AAK1C,aAAAC,EAAQ,kBAAkBD,CAAS,GAG5B,MAAM;AACX,QAAIC,EAAQ,qBAAqBA,EAAQ,kBAAkBD,CAAS,KAClEC,EAAQ,sBAAsBD,CAAS;AAAA,MAE3C;AAAA,EACF,GAAG,CAACD,GAAYR,GAASS,CAAS,CAAC;AACrC;AAMO,SAASE,EACdH,GACAR,GACAY,IAAmB,CAAC,eAAe,eAAe,WAAW,GAC7D;AACA,EAAAN,EAAM,UAAU,MAAM;AACpB,UAAMI,IAAUF,EAAW;AAC3B,QAAI,CAACR,KAAW,CAACU;AACf;AAGF,UAAMG,IAAiB,CAACC,MAAa;AACnC,MAAAA,EAAE,eAAA;AAAA,IACJ;AAGA,WAAAF,EAAO,QAAQ,CAACG,MAAc;AAC5B,MAAAL,EAAQ,iBAAiBK,GAAWF,GAAgB,EAAE,SAAS,IAAO;AAAA,IACxE,CAAC,GAGM,MAAM;AACX,MAAAD,EAAO,QAAQ,CAACG,MAAc;AAC5B,QAAAL,EAAQ,oBAAoBK,GAAWF,CAAc;AAAA,MACvD,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAACL,GAAYR,GAASY,CAAM,CAAC;AAClC;AAKO,SAASI,EACdR,GACAR,GACAiB,GAQA;AACA,QAAM,EAAE,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,WAAAX,GAAW,gBAAAY,IAAiB,IAAM,iBAAAC,IAAkB,GAAA,IAASL;AAG7F,EAAAlB,EAAyBC,GAAS,EAAE,QAAAkB,GAAQ,MAAAC,GAAM,UAAAC,GAAU,GAI5Db,EAAkBC,GADWR,IAAUqB,IAAiB,IACJZ,CAAS,GAI7DE,EAA0BH,GADIR,IAAUsB,IAAkB,EACC;AAC7D;"}