react-panel-layout 0.6.0 → 0.6.1

package/dist/sticky-header/calculateStickyMetrics.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file Pure function for calculating sticky area metrics.
+ *
+ * Extracts the position-dependent calculation logic from StickyArea component
+ * to enable unit testing and reduce code duplication.
+ */
+import type { StickyAreaPosition } from "./types";
+/** Output metrics for sticky area layout. */
+export type StickyMetrics = {
+    coverAreaHeight: number;
+    isStuck: boolean;
+    scrollOffset: number;
+};
+/** Lightweight element bounding rect used for calculations. */
+export type ElementRect = {
+    top: number;
+    bottom: number;
+    height: number;
+};
+/**
+ * Calculate sticky area metrics based on element position and viewport.
+ *
+ * @param position - Whether the sticky area is at "top" or "bottom"
+ * @param rect - Element bounding rect (top, bottom, height)
+ * @param viewportHeight - Current viewport height
+ * @returns Calculated metrics for cover area height, stuck state, and scroll offset
+ */
+export declare function calculateStickyMetrics(position: StickyAreaPosition, rect: ElementRect, viewportHeight: number): StickyMetrics;

package/dist/sticky-header.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),H=require("react"),M=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs");function $(e){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(c,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return c.default=e,Object.freeze(c)}const f=$(H);function q(e){return{position:"relative",paddingTop:e==="top"?"env(safe-area-inset-top)":void 0,paddingBottom:e==="bottom"?"env(safe-area-inset-bottom)":void 0,boxSizing:"border-box"}}const F={zIndex:1};function I(e){return{opacity:0,zIndex:0,userSelect:"none",pointerEvents:"none",transition:"none",willChange:"height, opacity",transform:"translateZ(0)",position:"fixed",top:e==="top"?0:void 0,bottom:e==="bottom"?0:void 0,left:0,right:0}}const z={position:"relative"},b=({position:e="top",cover:c,children:r,onStateChange:a})=>{const S=f.useRef(null),x=f.useRef(null),[k,O]=f.useState({isStuck:!1,scrollOffset:0}),R=f.useRef(k),v=f.useCallback(s=>{const o=R.current;(o.isStuck!==s.isStuck||o.scrollOffset!==s.scrollOffset)&&(R.current=s,O(s),a?.(s))},[a]);M.useIsomorphicLayoutEffect(()=>{const s=S.current,o=x.current;if(!o||!s)return;let u=Number.NaN,d=Number.NaN,p=Number.NaN,h=!1,y=!0;const w=()=>{const t=s.getBoundingClientRect(),g=window.innerHeight;if(e==="top"){const n=Math.max(0,t.height+t.top);n!==u&&(o.style.opacity=n>0?"1":"0",o.style.height=`${n}px`,u=n),(t.left!==d||t.width!==p)&&(o.style.left=`${t.left}px`,o.style.width=`${t.width}px`,d=t.left,p=t.width);const i=t.top<0,l=Math.max(0,-t.top);(y?!0:i!==h)&&(y=!1,h=i,v({isStuck:i,scrollOffset:l}))}else{const n=g-t.bottom,i=Math.max(0,t.height+n);i!==u&&(o.style.opacity=i>0?"1":"0",o.style.height=`${i}px`,u=i),(t.left!==d||t.width!==p)&&(o.style.left=`${t.left}px`,o.style.width=`${t.width}px`,d=t.left,p=t.width);const l=t.bottom>g,N=Math.max(0,t.bottom-g);(y?!0:l!==h)&&(y=!1,h=l,v({isStuck:l,scrollOffset:N}))}};let A=requestAnimationFrame(function t(){w(),A=requestAnimationFrame(t)});return()=>{cancelAnimationFrame(A)}},[e,v]);const j=typeof r=="function"?r(k):r;return m.jsxs("div",{style:z,children:[m.jsx("div",{ref:x,style:I(e),children:c}),m.jsx("div",{ref:S,style:q(e),children:m.jsx("div",{style:F,children:j})})]})};b.displayName="StickyArea";const C=b;exports.StickyArea=b;exports.StickyHeader=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),M=require("react"),H=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs");function q(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,i.get?i:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const a=q(M);function F(t,e,o){if(t==="top")return{coverAreaHeight:Math.max(0,e.height+e.top),isStuck:e.top<0,scrollOffset:Math.max(0,-e.top)};const i=o-e.bottom;return{coverAreaHeight:Math.max(0,e.height+i),isStuck:e.bottom>o,scrollOffset:Math.max(0,e.bottom-o)}}function I(t){return{position:"relative",paddingTop:t==="top"?"env(safe-area-inset-top)":void 0,paddingBottom:t==="bottom"?"env(safe-area-inset-bottom)":void 0,boxSizing:"border-box"}}const w={zIndex:1};function z(t){return{opacity:0,zIndex:0,userSelect:"none",pointerEvents:"none",transition:"none",willChange:"height, opacity",transform:"translateZ(0)",position:"fixed",top:t==="top"?0:void 0,bottom:t==="bottom"?0:void 0,left:0,right:0}}const C={position:"relative"},f=({position:t="top",cover:e,children:o,onStateChange:i})=>{const d=a.useRef(null),p=a.useRef(null),[m,A]=a.useState({isStuck:!1,scrollOffset:0}),y=a.useRef(m),h=a.useCallback(n=>{const s=y.current;(s.isStuck!==n.isStuck||s.scrollOffset!==n.scrollOffset)&&(y.current=n,A(n),i?.(n))},[i]);H.useIsomorphicLayoutEffect(()=>{const n=d.current,s=p.current;if(!s||!n)return;let v=Number.NaN,b=Number.NaN,g=Number.NaN,S=!1,x=!0;const R=()=>{const r=n.getBoundingClientRect(),N=window.innerHeight,{coverAreaHeight:c,isStuck:u,scrollOffset:j}=F(t,r,N);c!==v&&(s.style.opacity=c>0?"1":"0",s.style.height=`${c}px`,v=c),(r.left!==b||r.width!==g)&&(s.style.left=`${r.left}px`,s.style.width=`${r.width}px`,b=r.left,g=r.width),(x?!0:u!==S)&&(x=!1,S=u,h({isStuck:u,scrollOffset:j}))};let k=requestAnimationFrame(function r(){R(),k=requestAnimationFrame(r)});return()=>{cancelAnimationFrame(k)}},[t,h]);const O=typeof o=="function"?o(m):o;return l.jsxs("div",{style:C,children:[l.jsx("div",{ref:p,style:z(t),children:e}),l.jsx("div",{ref:d,style:I(t),children:l.jsx("div",{style:w,children:O})})]})};f.displayName="StickyArea";const B=f;exports.StickyArea=f;exports.StickyHeader=B;
 //# sourceMappingURL=sticky-header.cjs.map

package/dist/sticky-header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.cjs","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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"}
+{"version":3,"file":"sticky-header.cjs","sources":["../src/sticky-header/calculateStickyMetrics.ts","../src/sticky-header/StickyArea.tsx"],"sourcesContent":["/**\n * @file Pure function for calculating sticky area metrics.\n *\n * Extracts the position-dependent calculation logic from StickyArea component\n * to enable unit testing and reduce code duplication.\n */\nimport type { StickyAreaPosition } from \"./types\";\n\n/** Output metrics for sticky area layout. */\nexport type StickyMetrics = {\n  coverAreaHeight: number;\n  isStuck: boolean;\n  scrollOffset: number;\n};\n\n/** Lightweight element bounding rect used for calculations. */\nexport type ElementRect = {\n  top: number;\n  bottom: number;\n  height: number;\n};\n\n/**\n * Calculate sticky area metrics based on element position and viewport.\n *\n * @param position - Whether the sticky area is at \"top\" or \"bottom\"\n * @param rect - Element bounding rect (top, bottom, height)\n * @param viewportHeight - Current viewport height\n * @returns Calculated metrics for cover area height, stuck state, and scroll offset\n */\nexport function calculateStickyMetrics(\n  position: StickyAreaPosition,\n  rect: ElementRect,\n  viewportHeight: number\n): StickyMetrics {\n  if (position === \"top\") {\n    return {\n      coverAreaHeight: Math.max(0, rect.height + rect.top),\n      isStuck: rect.top < 0,\n      scrollOffset: Math.max(0, -rect.top),\n    };\n  }\n  // bottom\n  const distanceFromBottom = viewportHeight - rect.bottom;\n  return {\n    coverAreaHeight: Math.max(0, rect.height + distanceFromBottom),\n    isStuck: rect.bottom > viewportHeight,\n    scrollOffset: Math.max(0, rect.bottom - viewportHeight),\n  };\n}\n","/**\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 { calculateStickyMetrics } from \"./calculateStickyMetrics\";\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      // Calculate metrics using pure function\n      const { coverAreaHeight, isStuck, scrollOffset } = calculateStickyMetrics(\n        position,\n        liveRect,\n        viewportHeight\n      );\n\n      // Update height/opacity\n      if (coverAreaHeight !== prevHeight) {\n        coverArea.style.opacity = coverAreaHeight > 0 ? \"1\" : \"0\";\n        coverArea.style.height = `${coverAreaHeight}px`;\n        prevHeight = coverAreaHeight;\n      }\n\n      // Update left/width\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      // Update state\n      const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;\n      if (shouldUpdateState) {\n        isFirstRun = false;\n        prevIsStuck = isStuck;\n        updateState({ isStuck, scrollOffset });\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":["calculateStickyMetrics","position","rect","viewportHeight","distanceFromBottom","getAreaStyle","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","coverAreaHeight","isStuck","scrollOffset","id","animate","renderedChildren","jsxs","jsx","StickyHeader"],"mappings":"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"}

package/dist/sticky-header.js

@@ -1,18 +1,32 @@
-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) {
+import { jsxs as H, jsx as f } from "react/jsx-runtime";
+import * as n from "react";
+import { u as M } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+function C(t, e, i) {
+  if (t === "top")
+    return {
+      coverAreaHeight: Math.max(0, e.height + e.top),
+      isStuck: e.top < 0,
+      scrollOffset: Math.max(0, -e.top)
+    };
+  const a = i - e.bottom;
+  return {
+    coverAreaHeight: Math.max(0, e.height + a),
+    isStuck: e.bottom > i,
+    scrollOffset: Math.max(0, e.bottom - i)
+  };
+}
+function I(t) {
   return {
     position: "relative",
-    paddingTop: o === "top" ? "env(safe-area-inset-top)" : void 0,
-    paddingBottom: o === "bottom" ? "env(safe-area-inset-bottom)" : void 0,
+    paddingTop: t === "top" ? "env(safe-area-inset-top)" : void 0,
+    paddingBottom: t === "bottom" ? "env(safe-area-inset-bottom)" : void 0,
     boxSizing: "border-box"
   };
 }
-const I = {
+const w = {
   zIndex: 1
 };
-function M(o) {
+function z(t) {
   return {
     opacity: 0,
     zIndex: 0,
@@ -24,66 +38,60 @@ function M(o) {
     willChange: "height, opacity",
     transform: "translateZ(0)",
     position: "fixed",
-    top: o === "top" ? 0 : void 0,
-    bottom: o === "bottom" ? 0 : void 0,
+    top: t === "top" ? 0 : void 0,
+    bottom: t === "bottom" ? 0 : void 0,
     left: 0,
     right: 0
   };
 }
-const U = {
+const B = {
   position: "relative"
-}, N = ({
-  position: o = "top",
-  cover: R,
-  children: p,
-  onStateChange: v
+}, k = ({
+  position: t = "top",
+  cover: e,
+  children: i,
+  onStateChange: a
 }) => {
-  const g = a.useRef(null), x = a.useRef(null), [S, w] = a.useState({
+  const u = n.useRef(null), d = n.useRef(null), [p, A] = n.useState({
     isStuck: !1,
     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));
+  }), m = n.useRef(p), h = n.useCallback(
+    (r) => {
+      const s = m.current;
+      (s.isStuck !== r.isStuck || s.scrollOffset !== r.scrollOffset) && (m.current = r, A(r), a?.(r));
     },
-    [v]
+    [a]
   );
-  O(() => {
-    const s = g.current, e = x.current;
-    if (!e || !s)
+  M(() => {
+    const r = u.current, s = d.current;
+    if (!s || !r)
       return;
-    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 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 v = Number.NaN, y = Number.NaN, S = Number.NaN, g = !1, b = !0;
+    const R = () => {
+      const o = r.getBoundingClientRect(), O = window.innerHeight, { coverAreaHeight: l, isStuck: c, scrollOffset: F } = C(
+        t,
+        o,
+        O
+      );
+      l !== v && (s.style.opacity = l > 0 ? "1" : "0", s.style.height = `${l}px`, v = l), (o.left !== y || o.width !== S) && (s.style.left = `${o.left}px`, s.style.width = `${o.width}px`, y = o.left, S = o.width), (b ? !0 : c !== g) && (b = !1, g = c, h({ isStuck: c, scrollOffset: F }));
     };
-    let k = requestAnimationFrame(function t() {
-      $(), k = requestAnimationFrame(t);
+    let x = requestAnimationFrame(function o() {
+      R(), x = requestAnimationFrame(o);
     });
     return () => {
-      cancelAnimationFrame(k);
+      cancelAnimationFrame(x);
     };
-  }, [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 }) })
+  }, [t, h]);
+  const N = typeof i == "function" ? i(p) : i;
+  return /* @__PURE__ */ H("div", { style: B, children: [
+    /* @__PURE__ */ f("div", { ref: d, style: z(t), children: e }),
+    /* @__PURE__ */ f("div", { ref: u, style: I(t), children: /* @__PURE__ */ f("div", { style: w, children: N }) })
   ] });
 };
-N.displayName = "StickyArea";
-const q = N;
+k.displayName = "StickyArea";
+const E = k;
 export {
-  N as StickyArea,
-  q as StickyHeader
+  k as StickyArea,
+  E as StickyHeader
 };
 //# sourceMappingURL=sticky-header.js.map

package/dist/sticky-header.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"sticky-header.js","sources":["../src/sticky-header/calculateStickyMetrics.ts","../src/sticky-header/StickyArea.tsx"],"sourcesContent":["/**\n * @file Pure function for calculating sticky area metrics.\n *\n * Extracts the position-dependent calculation logic from StickyArea component\n * to enable unit testing and reduce code duplication.\n */\nimport type { StickyAreaPosition } from \"./types\";\n\n/** Output metrics for sticky area layout. */\nexport type StickyMetrics = {\n  coverAreaHeight: number;\n  isStuck: boolean;\n  scrollOffset: number;\n};\n\n/** Lightweight element bounding rect used for calculations. */\nexport type ElementRect = {\n  top: number;\n  bottom: number;\n  height: number;\n};\n\n/**\n * Calculate sticky area metrics based on element position and viewport.\n *\n * @param position - Whether the sticky area is at \"top\" or \"bottom\"\n * @param rect - Element bounding rect (top, bottom, height)\n * @param viewportHeight - Current viewport height\n * @returns Calculated metrics for cover area height, stuck state, and scroll offset\n */\nexport function calculateStickyMetrics(\n  position: StickyAreaPosition,\n  rect: ElementRect,\n  viewportHeight: number\n): StickyMetrics {\n  if (position === \"top\") {\n    return {\n      coverAreaHeight: Math.max(0, rect.height + rect.top),\n      isStuck: rect.top < 0,\n      scrollOffset: Math.max(0, -rect.top),\n    };\n  }\n  // bottom\n  const distanceFromBottom = viewportHeight - rect.bottom;\n  return {\n    coverAreaHeight: Math.max(0, rect.height + distanceFromBottom),\n    isStuck: rect.bottom > viewportHeight,\n    scrollOffset: Math.max(0, rect.bottom - viewportHeight),\n  };\n}\n","/**\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 { calculateStickyMetrics } from \"./calculateStickyMetrics\";\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      // Calculate metrics using pure function\n      const { coverAreaHeight, isStuck, scrollOffset } = calculateStickyMetrics(\n        position,\n        liveRect,\n        viewportHeight\n      );\n\n      // Update height/opacity\n      if (coverAreaHeight !== prevHeight) {\n        coverArea.style.opacity = coverAreaHeight > 0 ? \"1\" : \"0\";\n        coverArea.style.height = `${coverAreaHeight}px`;\n        prevHeight = coverAreaHeight;\n      }\n\n      // Update left/width\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      // Update state\n      const shouldUpdateState = isFirstRun ? true : isStuck !== prevIsStuck;\n      if (shouldUpdateState) {\n        isFirstRun = false;\n        prevIsStuck = isStuck;\n        updateState({ isStuck, scrollOffset });\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":["calculateStickyMetrics","position","rect","viewportHeight","distanceFromBottom","getAreaStyle","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","coverAreaHeight","isStuck","scrollOffset","id","animate","renderedChildren","jsxs","jsx","StickyHeader"],"mappings":"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"}

package/dist/{styles-DPPuJ0sf.js → styles-NkjuMOVS.js}

@@ -1,15 +1,15 @@
 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,
+  Oa as A,
+  Aa as B,
   N as C,
   y as D,
-  g as E,
+  Ra as E,
   ta as F,
   f as G,
   ca as H,
-  C as I,
+  ea as I,
   h as J,
   Z as K,
   z as L,
@@ -45,13 +45,13 @@ export {
   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
+  H as s,
+  g as t,
+  C as u,
+  F as v,
+  b as w,
+  i as x,
+  L as y,
+  G as z
 };
-//# sourceMappingURL=styles-DPPuJ0sf.js.map
+//# sourceMappingURL=styles-NkjuMOVS.js.map

package/dist/{styles-DPPuJ0sf.js.map → styles-NkjuMOVS.js.map}

@@ -1 +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;"}
+{"version":3,"file":"styles-NkjuMOVS.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\n/**\n * Modal\n */\nexport const COLOR_MODAL_BACKDROP = \"var(--rpl-color-modal-backdrop, rgba(0, 0, 0, 0.5))\";\nexport const MODAL_TRANSITION_DURATION = \"var(--rpl-modal-transition-duration, 200ms)\";\nexport const MODAL_TRANSITION_EASING = \"var(--rpl-modal-transition-easing, ease-out)\";\nexport const MODAL_MIN_WIDTH = \"var(--rpl-modal-min-width, 280px)\";\nexport const MODAL_MAX_WIDTH = \"var(--rpl-modal-max-width, 90vw)\";\nexport const MODAL_MAX_HEIGHT = \"var(--rpl-modal-max-height, 85vh)\";\n\n/**\n * Alert Dialog\n */\nexport const ALERT_DIALOG_WIDTH = \"var(--rpl-alert-dialog-width, 320px)\";\nexport const ALERT_DIALOG_BUTTON_GAP = \"var(--rpl-alert-dialog-button-gap, 8px)\";\nexport const ALERT_DIALOG_ACTIONS_PADDING = \"var(--rpl-alert-dialog-actions-padding, 12px)\";\nexport const ALERT_DIALOG_MESSAGE_PADDING = \"var(--rpl-alert-dialog-message-padding, 16px)\";\nexport const ALERT_DIALOG_INPUT_MARGIN_TOP = \"var(--rpl-alert-dialog-input-margin-top, 12px)\";\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.map

@@ -1 +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"}
+{"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\n/**\n * Modal\n */\nexport const COLOR_MODAL_BACKDROP = \"var(--rpl-color-modal-backdrop, rgba(0, 0, 0, 0.5))\";\nexport const MODAL_TRANSITION_DURATION = \"var(--rpl-modal-transition-duration, 200ms)\";\nexport const MODAL_TRANSITION_EASING = \"var(--rpl-modal-transition-easing, ease-out)\";\nexport const MODAL_MIN_WIDTH = \"var(--rpl-modal-min-width, 280px)\";\nexport const MODAL_MAX_WIDTH = \"var(--rpl-modal-max-width, 90vw)\";\nexport const MODAL_MAX_HEIGHT = \"var(--rpl-modal-max-height, 85vh)\";\n\n/**\n * Alert Dialog\n */\nexport const ALERT_DIALOG_WIDTH = \"var(--rpl-alert-dialog-width, 320px)\";\nexport const ALERT_DIALOG_BUTTON_GAP = \"var(--rpl-alert-dialog-button-gap, 8px)\";\nexport const ALERT_DIALOG_ACTIONS_PADDING = \"var(--rpl-alert-dialog-actions-padding, 12px)\";\nexport const ALERT_DIALOG_MESSAGE_PADDING = \"var(--rpl-alert-dialog-message-padding, 16px)\";\nexport const ALERT_DIALOG_INPUT_MARGIN_TOP = \"var(--rpl-alert-dialog-input-margin-top, 12px)\";\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/types.d.ts

@@ -176,6 +176,22 @@ export type DrawerBehavior = {
         title?: string;
         showCloseButton?: boolean;
     };
+    /**
+     * Enable swipe gestures for opening/closing the drawer.
+     * - true: Enable both edge-swipe-to-open and swipe-to-close
+     * - false: Disable swipe gestures (default)
+     * - Object: Fine-grained control over swipe behavior
+     */
+    swipeGestures?: boolean | {
+        /** Enable edge swipe from container to open. @default true */
+        edgeSwipeOpen?: boolean;
+        /** Enable swipe within drawer to close. @default true */
+        swipeClose?: boolean;
+        /** Width of edge detection zone in pixels. @default 20 */
+        edgeWidth?: number;
+        /** Threshold ratio (0-1) to trigger close. @default 0.3 */
+        dismissThreshold?: number;
+    };
 };
 export type GridTrack = {
     size: string;

package/dist/useDocumentPointerEvents-DXxw3qWj.js

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