react-panel-layout 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/FloatingPanelFrame-D9Cp2al1.cjs +2 -0
  2. package/dist/FloatingPanelFrame-D9Cp2al1.cjs.map +1 -0
  3. package/dist/FloatingPanelFrame-lLg-Lpg7.js +95 -0
  4. package/dist/FloatingPanelFrame-lLg-Lpg7.js.map +1 -0
  5. package/dist/GridLayout-BQQ63eA1.cjs +2 -0
  6. package/dist/GridLayout-BQQ63eA1.cjs.map +1 -0
  7. package/dist/{GridLayout-tpSM0iM-.js → GridLayout-CJTKq7Mp.js} +465 -460
  8. package/dist/GridLayout-CJTKq7Mp.js.map +1 -0
  9. package/dist/PanelSystemContext.d.ts +9 -0
  10. package/dist/components/grid/GridLayerList.d.ts +3 -0
  11. package/dist/components/paneling/FloatingPanelFrame.d.ts +4 -0
  12. package/dist/config.cjs +1 -1
  13. package/dist/config.js +1 -1
  14. package/dist/constants/styles.d.ts +3 -1
  15. package/dist/floating.cjs +1 -1
  16. package/dist/floating.js +1 -1
  17. package/dist/hooks/ContentCacheContext.d.ts +59 -0
  18. package/dist/hooks/useContainerScroll.d.ts +23 -0
  19. package/dist/hooks/useContentCache.d.ts +67 -0
  20. package/dist/hooks/useDocumentScroll.d.ts +13 -0
  21. package/dist/hooks/useScrollContainer.d.ts +21 -0
  22. package/dist/index.cjs +2 -2
  23. package/dist/index.cjs.map +1 -1
  24. package/dist/index.js +442 -440
  25. package/dist/index.js.map +1 -1
  26. package/dist/modules/pivot/types.d.ts +6 -0
  27. package/dist/pivot.cjs +1 -1
  28. package/dist/pivot.js +1 -1
  29. package/dist/sticky-header/StickyHeader.d.ts +53 -0
  30. package/dist/sticky-header/index.d.ts +7 -0
  31. package/dist/sticky-header/types.d.ts +50 -0
  32. package/dist/sticky-header.cjs +2 -0
  33. package/dist/sticky-header.cjs.map +1 -0
  34. package/dist/sticky-header.js +198 -0
  35. package/dist/sticky-header.js.map +1 -0
  36. package/dist/styles-CA2_zLZt.js +52 -0
  37. package/dist/{styles-DcG3aIFx.cjs.map → styles-CA2_zLZt.js.map} +1 -1
  38. package/dist/styles-PsqGOEJP.cjs +2 -0
  39. package/dist/styles-PsqGOEJP.cjs.map +1 -0
  40. package/dist/types.d.ts +12 -0
  41. package/dist/useIsomorphicLayoutEffect-DGRNF4Lf.cjs +2 -0
  42. package/dist/useIsomorphicLayoutEffect-DGRNF4Lf.cjs.map +1 -0
  43. package/dist/useIsomorphicLayoutEffect-DhmEnmZ_.js +6 -0
  44. package/dist/useIsomorphicLayoutEffect-DhmEnmZ_.js.map +1 -0
  45. package/dist/usePivot-7ctin_P_.cjs +2 -0
  46. package/dist/usePivot-7ctin_P_.cjs.map +1 -0
  47. package/dist/usePivot-CgQxB8rc.js +124 -0
  48. package/dist/usePivot-CgQxB8rc.js.map +1 -0
  49. package/package.json +6 -1
  50. package/dist/FloatingPanelFrame-DDT6aING.js +0 -66
  51. package/dist/FloatingPanelFrame-DDT6aING.js.map +0 -1
  52. package/dist/FloatingPanelFrame-DrYwgI9f.cjs +0 -2
  53. package/dist/FloatingPanelFrame-DrYwgI9f.cjs.map +0 -1
  54. package/dist/GridLayout-DC7fCmcI.cjs +0 -2
  55. package/dist/GridLayout-DC7fCmcI.cjs.map +0 -1
  56. package/dist/GridLayout-tpSM0iM-.js.map +0 -1
  57. package/dist/styles-DcG3aIFx.cjs +0 -2
  58. package/dist/styles-w0ZixggV.js +0 -51
  59. package/dist/styles-w0ZixggV.js.map +0 -1
  60. package/dist/usePivot-C8q0pMgW.cjs +0 -2
  61. package/dist/usePivot-C8q0pMgW.cjs.map +0 -1
  62. package/dist/usePivot-z9gumDf-.js +0 -97
  63. package/dist/usePivot-z9gumDf-.js.map +0 -1
@@ -0,0 +1,2 @@
1
+ "use strict";const s=require("react/jsx-runtime"),E=require("react"),o=require("./styles-PsqGOEJP.cjs");function f(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,l.get?l:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const a=f(E),h={borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,boxShadow:o.FLOATING_PANEL_SHADOW},u={borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,overflow:"hidden"},_={display:"flex",flexDirection:"column",borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,border:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_COLOR},T={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_GAP,padding:`${o.FLOATING_PANEL_HEADER_PADDING_Y} ${o.FLOATING_PANEL_HEADER_PADDING_X}`,borderBottom:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_2_COLOR},y={fontWeight:600},I={marginLeft:"auto",color:o.FLOATING_PANEL_MUTED_FG_COLOR,fontSize:o.FLOATING_PANEL_META_FONT_SIZE},G={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_CONTROLS_GAP},C={border:"none",background:"transparent",cursor:"pointer",fontSize:o.FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,padding:o.FLOATING_PANEL_CLOSE_BUTTON_PADDING,lineHeight:1},D={padding:o.FLOATING_PANEL_CONTENT_PADDING,overflow:"auto"},N=a.forwardRef(function({style:e,children:n,...l},c){const m=a.useMemo(()=>({...h,...e}),[e]),R=a.useMemo(()=>{const r=e?.borderRadius!==void 0,d=e?.height!==void 0;if(!r&&!d)return u;const i={...u};return r&&(i.borderRadius=e.borderRadius),d&&(i.height=e.height),i},[e?.borderRadius,e?.height]),b=a.useMemo(()=>{const r=e?.borderRadius!==void 0,d=e?.height!==void 0;if(!r&&!d)return _;const i={..._};return r&&(i.borderRadius=e.borderRadius),d&&(i.height=e.height),i},[e?.borderRadius,e?.height]);return s.jsx("div",{ref:c,style:m,...l,children:s.jsx("div",{style:R,children:s.jsx("div",{style:b,children:n})})})}),g=({style:t,...e})=>{const n=a.useMemo(()=>({...T,...t}),[t]);return s.jsx("div",{style:n,...e})},A=({style:t,...e})=>{const n=a.useMemo(()=>({...y,...t}),[t]);return s.jsx("span",{style:n,...e})},F=({style:t,...e})=>{const n=a.useMemo(()=>({...I,...t}),[t]);return s.jsx("span",{style:n,...e})},O=({style:t,...e})=>{const n=a.useMemo(()=>({...G,...t}),[t]);return s.jsx("div",{style:n,...e})},P=a.forwardRef(function({style:e,...n},l){const c=a.useMemo(()=>({...D,...e}),[e]);return s.jsx("div",{ref:l,style:c,...n})}),L=({style:t,...e})=>{const n=a.useMemo(()=>({...C,...t}),[t]);return s.jsx("button",{type:"button",style:n,...e,children:"×"})};N.displayName="FloatingPanelFrame";g.displayName="FloatingPanelHeader";A.displayName="FloatingPanelTitle";F.displayName="FloatingPanelMeta";O.displayName="FloatingPanelControls";P.displayName="FloatingPanelContent";L.displayName="FloatingPanelCloseButton";exports.FloatingPanelCloseButton=L;exports.FloatingPanelContent=P;exports.FloatingPanelControls=O;exports.FloatingPanelFrame=N;exports.FloatingPanelHeader=g;exports.FloatingPanelMeta=F;exports.FloatingPanelTitle=A;
2
+ //# sourceMappingURL=FloatingPanelFrame-D9Cp2al1.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingPanelFrame-D9Cp2al1.cjs","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n FLOATING_PANEL_BORDER_RADIUS,\n FLOATING_PANEL_GAP,\n FLOATING_PANEL_HEADER_PADDING_Y,\n FLOATING_PANEL_HEADER_PADDING_X,\n FLOATING_PANEL_CONTENT_PADDING,\n FLOATING_PANEL_META_FONT_SIZE,\n FLOATING_PANEL_CONTROLS_GAP,\n FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n FLOATING_PANEL_SURFACE_COLOR,\n FLOATING_PANEL_SURFACE_2_COLOR,\n FLOATING_PANEL_BORDER_COLOR,\n FLOATING_PANEL_MUTED_FG_COLOR,\n FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst shadowWrapperStyle: React.CSSProperties = {\n borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n overflow: \"hidden\",\n};\n\nconst innerStyle: React.CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n background: FLOATING_PANEL_SURFACE_COLOR,\n};\n\nconst headerStyle: React.CSSProperties = {\n display: \"flex\",\n alignItems: \"center\",\n gap: FLOATING_PANEL_GAP,\n padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n marginLeft: \"auto\",\n color: FLOATING_PANEL_MUTED_FG_COLOR,\n fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n display: \"flex\",\n alignItems: \"center\",\n gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst closeButtonStyle: React.CSSProperties = {\n border: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n lineHeight: 1,\n};\n\nconst contentStyle: React.CSSProperties = {\n padding: FLOATING_PANEL_CONTENT_PADDING,\n overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n { style: propStyle, children, ...props },\n ref,\n) {\n const combinedShadowStyle = React.useMemo(() => ({ ...shadowWrapperStyle, ...propStyle }), [propStyle]);\n\n const combinedOverflowStyle = React.useMemo(() => {\n const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n const hasHeight = propStyle?.height !== undefined;\n\n if (!hasCustomBorderRadius && !hasHeight) {\n return overflowWrapperStyle;\n }\n\n const result: React.CSSProperties = { ...overflowWrapperStyle };\n if (hasCustomBorderRadius) {\n result.borderRadius = propStyle.borderRadius;\n }\n if (hasHeight) {\n result.height = propStyle.height;\n }\n return result;\n }, [propStyle?.borderRadius, propStyle?.height]);\n\n const combinedInnerStyle = React.useMemo(() => {\n const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n const hasHeight = propStyle?.height !== undefined;\n\n if (!hasCustomBorderRadius && !hasHeight) {\n return innerStyle;\n }\n\n const result: React.CSSProperties = { ...innerStyle };\n if (hasCustomBorderRadius) {\n result.borderRadius = propStyle.borderRadius;\n }\n if (hasHeight) {\n result.height = propStyle.height;\n }\n return result;\n }, [propStyle?.borderRadius, propStyle?.height]);\n\n return (\n <div ref={ref} style={combinedShadowStyle} {...props}>\n <div style={combinedOverflowStyle}>\n <div style={combinedInnerStyle}>{children}</div>\n </div>\n </div>\n );\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n return <div ref={ref} style={combinedStyle} {...props} />;\n },\n);\n\nexport type FloatingPanelCloseButtonProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\" | \"style\" | \"children\"\n> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n return (\n <button type=\"button\" style={combinedStyle} {...props}>\n ×\n </button>\n );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}
@@ -0,0 +1,95 @@
1
+ import { jsx as s } from "react/jsx-runtime";
2
+ import * as o from "react";
3
+ import { F, a as c, b as L, c as N, d as P, e as O, f as h, g as b, h as R, i as f, j as E, k as T, l as y, m as I } from "./styles-CA2_zLZt.js";
4
+ const G = {
5
+ borderRadius: c,
6
+ boxShadow: F
7
+ }, u = {
8
+ borderRadius: c,
9
+ overflow: "hidden"
10
+ }, _ = {
11
+ display: "flex",
12
+ flexDirection: "column",
13
+ borderRadius: c,
14
+ border: `1px solid ${N}`,
15
+ background: L
16
+ }, C = {
17
+ display: "flex",
18
+ alignItems: "center",
19
+ gap: b,
20
+ padding: `${O} ${h}`,
21
+ borderBottom: `1px solid ${N}`,
22
+ background: P
23
+ }, D = {
24
+ fontWeight: 600
25
+ }, v = {
26
+ marginLeft: "auto",
27
+ color: f,
28
+ fontSize: R
29
+ }, M = {
30
+ display: "flex",
31
+ alignItems: "center",
32
+ gap: E
33
+ }, S = {
34
+ border: "none",
35
+ background: "transparent",
36
+ cursor: "pointer",
37
+ fontSize: I,
38
+ padding: y,
39
+ lineHeight: 1
40
+ }, B = {
41
+ padding: T,
42
+ overflow: "auto"
43
+ }, w = o.forwardRef(function({ style: e, children: n, ...d }, r) {
44
+ const m = o.useMemo(() => ({ ...G, ...e }), [e]), A = o.useMemo(() => {
45
+ const i = e?.borderRadius !== void 0, l = e?.height !== void 0;
46
+ if (!i && !l)
47
+ return u;
48
+ const a = { ...u };
49
+ return i && (a.borderRadius = e.borderRadius), l && (a.height = e.height), a;
50
+ }, [e?.borderRadius, e?.height]), g = o.useMemo(() => {
51
+ const i = e?.borderRadius !== void 0, l = e?.height !== void 0;
52
+ if (!i && !l)
53
+ return _;
54
+ const a = { ..._ };
55
+ return i && (a.borderRadius = e.borderRadius), l && (a.height = e.height), a;
56
+ }, [e?.borderRadius, e?.height]);
57
+ return /* @__PURE__ */ s("div", { ref: r, style: m, ...d, children: /* @__PURE__ */ s("div", { style: A, children: /* @__PURE__ */ s("div", { style: g, children: n }) }) });
58
+ }), x = ({ style: t, ...e }) => {
59
+ const n = o.useMemo(() => ({ ...C, ...t }), [t]);
60
+ return /* @__PURE__ */ s("div", { style: n, ...e });
61
+ }, H = ({ style: t, ...e }) => {
62
+ const n = o.useMemo(() => ({ ...D, ...t }), [t]);
63
+ return /* @__PURE__ */ s("span", { style: n, ...e });
64
+ }, U = ({ style: t, ...e }) => {
65
+ const n = o.useMemo(() => ({ ...v, ...t }), [t]);
66
+ return /* @__PURE__ */ s("span", { style: n, ...e });
67
+ }, k = ({ style: t, ...e }) => {
68
+ const n = o.useMemo(() => ({ ...M, ...t }), [t]);
69
+ return /* @__PURE__ */ s("div", { style: n, ...e });
70
+ }, W = o.forwardRef(
71
+ function({ style: e, ...n }, d) {
72
+ const r = o.useMemo(() => ({ ...B, ...e }), [e]);
73
+ return /* @__PURE__ */ s("div", { ref: d, style: r, ...n });
74
+ }
75
+ ), $ = ({ style: t, ...e }) => {
76
+ const n = o.useMemo(() => ({ ...S, ...t }), [t]);
77
+ return /* @__PURE__ */ s("button", { type: "button", style: n, ...e, children: "×" });
78
+ };
79
+ w.displayName = "FloatingPanelFrame";
80
+ x.displayName = "FloatingPanelHeader";
81
+ H.displayName = "FloatingPanelTitle";
82
+ U.displayName = "FloatingPanelMeta";
83
+ k.displayName = "FloatingPanelControls";
84
+ W.displayName = "FloatingPanelContent";
85
+ $.displayName = "FloatingPanelCloseButton";
86
+ export {
87
+ w as F,
88
+ x as a,
89
+ H as b,
90
+ U as c,
91
+ k as d,
92
+ W as e,
93
+ $ as f
94
+ };
95
+ //# sourceMappingURL=FloatingPanelFrame-lLg-Lpg7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FloatingPanelFrame-lLg-Lpg7.js","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n FLOATING_PANEL_BORDER_RADIUS,\n FLOATING_PANEL_GAP,\n FLOATING_PANEL_HEADER_PADDING_Y,\n FLOATING_PANEL_HEADER_PADDING_X,\n FLOATING_PANEL_CONTENT_PADDING,\n FLOATING_PANEL_META_FONT_SIZE,\n FLOATING_PANEL_CONTROLS_GAP,\n FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n FLOATING_PANEL_SURFACE_COLOR,\n FLOATING_PANEL_SURFACE_2_COLOR,\n FLOATING_PANEL_BORDER_COLOR,\n FLOATING_PANEL_MUTED_FG_COLOR,\n FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst shadowWrapperStyle: React.CSSProperties = {\n borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n overflow: \"hidden\",\n};\n\nconst innerStyle: React.CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n background: FLOATING_PANEL_SURFACE_COLOR,\n};\n\nconst headerStyle: React.CSSProperties = {\n display: \"flex\",\n alignItems: \"center\",\n gap: FLOATING_PANEL_GAP,\n padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n marginLeft: \"auto\",\n color: FLOATING_PANEL_MUTED_FG_COLOR,\n fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n display: \"flex\",\n alignItems: \"center\",\n gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst closeButtonStyle: React.CSSProperties = {\n border: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n lineHeight: 1,\n};\n\nconst contentStyle: React.CSSProperties = {\n padding: FLOATING_PANEL_CONTENT_PADDING,\n overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n { style: propStyle, children, ...props },\n ref,\n) {\n const combinedShadowStyle = React.useMemo(() => ({ ...shadowWrapperStyle, ...propStyle }), [propStyle]);\n\n const combinedOverflowStyle = React.useMemo(() => {\n const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n const hasHeight = propStyle?.height !== undefined;\n\n if (!hasCustomBorderRadius && !hasHeight) {\n return overflowWrapperStyle;\n }\n\n const result: React.CSSProperties = { ...overflowWrapperStyle };\n if (hasCustomBorderRadius) {\n result.borderRadius = propStyle.borderRadius;\n }\n if (hasHeight) {\n result.height = propStyle.height;\n }\n return result;\n }, [propStyle?.borderRadius, propStyle?.height]);\n\n const combinedInnerStyle = React.useMemo(() => {\n const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n const hasHeight = propStyle?.height !== undefined;\n\n if (!hasCustomBorderRadius && !hasHeight) {\n return innerStyle;\n }\n\n const result: React.CSSProperties = { ...innerStyle };\n if (hasCustomBorderRadius) {\n result.borderRadius = propStyle.borderRadius;\n }\n if (hasHeight) {\n result.height = propStyle.height;\n }\n return result;\n }, [propStyle?.borderRadius, propStyle?.height]);\n\n return (\n <div ref={ref} style={combinedShadowStyle} {...props}>\n <div style={combinedOverflowStyle}>\n <div style={combinedInnerStyle}>{children}</div>\n </div>\n </div>\n );\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n return <div ref={ref} style={combinedStyle} {...props} />;\n },\n);\n\nexport type FloatingPanelCloseButtonProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\" | \"style\" | \"children\"\n> & {\n style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n return (\n <button type=\"button\" style={combinedStyle} {...props}>\n ×\n </button>\n );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ "use strict";const g=require("react/jsx-runtime"),Wt=require("react"),_=require("./FloatingPanelFrame-D9Cp2al1.cjs"),v=require("./styles-PsqGOEJP.cjs"),xt=require("./usePivot-7ctin_P_.cjs"),Bt=require("react-dom"),It=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs");function Xt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const i=Xt(Wt),Vt=()=>{const t=new Map;return e=>{if(!e)return;const n=t.get(e);if(n!==void 0)return n;const o=t.size;return t.set(e,o),o}},Zt=Vt(),q=new Map,Kt=t=>{const e=`ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Zt(t.root)}`;if(q.has(e))return q.get(e);const n=new class{#t=new Map;#e=new IntersectionObserver(o=>{o.forEach(r=>{const s=this.#t.get(r.target);s&&s(r)})},t);observe(o,r){return this.#t.set(o,r),this.#e.observe(o),()=>{this.#t.delete(o),this.#e.unobserve(o)}}};return q.set(e,n),n},lt=Object.freeze({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});function Ut(t,{threshold:e=0,rootMargin:n="0px",root:o=null}){const[r,s]=i.useState(null);return i.useEffect(()=>{const u=t.current;return u?Kt({threshold:e,rootMargin:n,root:o}).observe(u,a=>{s({isIntersecting:a.isIntersecting,boundingClientRect:a.boundingClientRect,intersectionRatio:a.intersectionRatio,intersectionRect:a.intersectionRect,rootBounds:a.rootBounds,target:a.target,time:a.time})}):void 0},[t,e,n,o]),i.useMemo(()=>({isIntersecting:r?.isIntersecting??!1,boundingClientRect:r?.boundingClientRect??lt,intersectionRatio:r?.intersectionRatio??0,intersectionRect:r?.intersectionRect??lt,rootBounds:r?.rootBounds??null,target:r?.target??t.current,time:r?.time??0}),[r,t])}const dt={position:"fixed",inset:0,background:v.COLOR_DRAWER_BACKDROP},qt={willChange:"transform"},ft={left:{top:0,bottom:0,left:0,transform:"translateX(-100%)"},right:{top:0,bottom:0,right:0,transform:"translateX(100%)"},top:{top:0,left:0,right:0,transform:"translateY(-100%)"},bottom:{bottom:0,left:0,right:0,transform:"translateY(100%)"}},Jt=(t,e,n)=>{if(t==="none")return;const o=e??v.DRAWER_TRANSITION_DURATION,r=n??v.DRAWER_TRANSITION_EASING;return`transform ${o} ${r}`},Qt=(t,e)=>t?e:!1,te=({chrome:t,frameStyle:e,header:n,dismissible:o,onClose:r,children:s})=>t?g.jsxs(_.FloatingPanelFrame,{style:e,children:[g.jsx(ee,{header:n,dismissible:o,onClose:r}),g.jsx(_.FloatingPanelContent,{style:{padding:v.DRAWER_CONTENT_PADDING,flex:1,display:"flex",flexDirection:"column"},children:s})]}):g.jsx(g.Fragment,{children:s}),ee=({header:t,dismissible:e,onClose:n})=>{if(!t)return null;const o=t.showCloseButton??!0,r=Qt(e,o);return g.jsx(i.Activity,{mode:t?"visible":"hidden",children:g.jsxs(_.FloatingPanelHeader,{style:{padding:`${v.DRAWER_HEADER_PADDING_Y} ${v.DRAWER_HEADER_PADDING_X}`,gap:v.DRAWER_HEADER_GAP},children:[g.jsx(i.Activity,{mode:t?"visible":"hidden",children:g.jsx(_.FloatingPanelTitle,{children:t.title})}),g.jsx(i.Activity,{mode:r?"visible":"hidden",children:g.jsx(_.FloatingPanelCloseButton,{onClick:n,"aria-label":"Close drawer",style:{marginLeft:"auto"}})})]})})},Pt=({id:t,config:e,isOpen:n,onClose:o,children:r,zIndex:s,width:u,height:c,position:a})=>{const{dismissible:l=!0,header:p,chrome:f=!0,inline:m=!1,transitionMode:w="css",transitionDuration:C,transitionEasing:R}=e,L=i.useCallback((T,x)=>T||(x?x.left!==void 0?"left":x.right!==void 0?"right":x.top!==void 0?"top":x.bottom!==void 0?"bottom":"right":"right"),[])(e.anchor,a),M={left:"translateX(0)",right:"translateX(0)",top:"translateY(0)",bottom:"translateY(0)"},A=i.useMemo(()=>{const T=Jt(w,C,R),x={...qt,...m?{position:"absolute"}:{position:"fixed"},...ft[L],transform:n?M[L]:ft[L].transform,transition:T};return s!==void 0&&(x.zIndex=s),u!==void 0&&(x.width=typeof u=="number"?`${u}px`:u),c!==void 0&&(x.height=typeof c=="number"?`${c}px`:c),x},[c,m,n,L,C,R,w,u,s]),D=p?.title??e.ariaLabel??"Drawer",y=i.useMemo(()=>{const T=m?{...dt,position:"absolute"}:dt,x=w==="none"?void 0:`opacity ${C??"220ms"} ease`;return{...T,opacity:n?1:0,pointerEvents:n?"auto":"none",transition:x,zIndex:s!==void 0?s-1:void 0}},[m,n,C,w,s]),N=i.useMemo(()=>{const T=L==="left"||L==="right",x={borderRadius:0};return T&&(x.height="100%"),x},[L]);return g.jsxs(g.Fragment,{children:[g.jsx("div",{style:y,onClick:l?o:void 0}),g.jsx("div",{"data-layer-id":t,"data-placement":L,style:A,role:"dialog","aria-modal":l?!0:void 0,"aria-hidden":n?void 0:!0,"aria-label":D,children:g.jsx(te,{chrome:f,frameStyle:N,header:p,dismissible:l,onClose:o,children:r})})]})},ne=(t,e)=>new Promise(n=>{let o=!1;const r=()=>{o||(o=!0,t.removeEventListener("transitionend",s),n())},s=u=>{u.target===t&&r()};t.addEventListener("transitionend",s),setTimeout(r,e+50)}),tt=async(t,e,n,o)=>{switch(e){case"none":t();return;case"css":t(),n&&await ne(n,o);return}},oe=t=>{const[e,n]=i.useState({}),o=i.useRef(t);o.current=t;const r=i.useCallback(async(a,l,p)=>{const{mode:f="none",element:m,duration:w=300}=p??{};await tt(()=>{n(P=>P[a]===l?P:{...P,[a]:l})},f,m?.current,w);const R=o.current;l?R?.onOpen?.(a):R?.onClose?.(a),R?.onTransitionEnd?.(a,l)},[]),s=i.useCallback(a=>e[a]??!1,[e]),u=i.useCallback((a,l)=>r(a,!0,l),[r]),c=i.useCallback((a,l)=>r(a,!1,l),[r]);return{state:s,open:u,close:c}},re=t=>{if(!t)return 300;const e=t.match(/(\d+)/);return e?parseInt(e[1],10):300},se=t=>{const[e,n]=i.useState(()=>{const a={};return t.forEach(l=>{l.drawer&&(a[l.id]=l.drawer.defaultOpen??!1)}),a}),o=i.useMemo(()=>{const a=new Map;return t.forEach(l=>a.set(l.id,l)),a},[t]),r=i.useCallback(async(a,l,p)=>{const f=o.get(a);if(!f?.drawer)return;const m=p?.mode??f.drawer.transitionMode??"css",w=p?.duration??re(f.drawer.transitionDuration),C=p?.element?.current;await tt(()=>{f.drawer?.open===void 0&&n(P=>P[a]===l?P:{...P,[a]:l}),f.drawer?.onStateChange?.(l)},m,C,w)},[o]),s=i.useCallback(a=>{const l=o.get(a);return l?.drawer?.open!==void 0?l.drawer.open:e[a]??!1},[o,e]),u=i.useCallback((a,l)=>r(a,!0,l),[r]),c=i.useCallback((a,l)=>r(a,!1,l),[r]);return{state:s,open:u,close:c}},Lt=({layers:t})=>{const e=se(t),n=i.useMemo(()=>t.filter(r=>r.drawer),[t]),o=i.useMemo(()=>{const r=new Map;return n.forEach(s=>{r.set(s.id,()=>e.close(s.id))}),r},[n,e.close]);return g.jsx(g.Fragment,{children:n.map(r=>{if(!r.drawer)return null;const s=e.state(r.id),u=o.get(r.id);return u?g.jsx(Pt,{id:r.id,config:r.drawer,isOpen:s,onClose:u,zIndex:r.zIndex,width:r.width,height:r.height,position:r.position,children:r.component},r.id):null})})},Dt=i.createContext(null),ie=({value:t,children:e})=>g.jsx(Dt.Provider,{value:t,children:e}),et=()=>{const t=i.useContext(Dt);if(!t)throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");return t},yt=i.createContext(null),Tt=()=>{const t=i.useContext(yt);if(!t)throw new Error("usePanelSystem must be used within a PanelSystemProvider.");return t},ae=({config:t,layers:e,style:n,children:o})=>{const r=i.useMemo(()=>{const l=new Map;return e.forEach(p=>{l.set(p.id,p)}),l},[e]),s=i.useCallback(l=>r.get(l)?.component??null,[r]),u=i.useMemo(()=>e.map(l=>l.id),[e]),{getCachedContent:c}=xt.useContentCache({resolveContent:s,validIds:u}),a=i.useMemo(()=>({config:t,style:n,layers:{defs:e,layerById:r},getCachedContent:c}),[t,n,e,r,c]);return g.jsx(yt.Provider,{value:a,children:o})},_t=i.createContext(null),Mt=({layerId:t,children:e})=>{const n=i.useMemo(()=>({layerId:t}),[t]);return g.jsx(_t.Provider,{value:n,children:e})},ce=()=>{const t=i.useContext(_t);if(!t)throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");return t},gt=(t,e,n)=>{if(typeof t=="number"&&Number.isFinite(t))return t;throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`)},Ht=(t,e)=>{if(!t)throw new Error(`Popup layer "${e}" must define position (left/top).`);return{left:gt(t.left,"left",e),top:gt(t.top,"top",e)}},Y=t=>`${Math.round(t)}`,F=t=>{if(t!==void 0)return t?"yes":"no"},ue=(t,e,n,o,r)=>{const s={},u=Ht(e,t);if(typeof n!="number"||typeof o!="number")throw new Error(`Popup layer "${t}" requires numeric width/height.`);s.width=Y(n),s.height=Y(o),s.left=Y(u.left),s.top=Y(u.top);const c=r?.features;if(c){const a=F(c.toolbar),l=F(c.menubar),p=F(c.location),f=F(c.status),m=F(c.resizable),w=F(c.scrollbars);a!==void 0&&(s.toolbar=a),l!==void 0&&(s.menubar=l),p!==void 0&&(s.location=p),f!==void 0&&(s.status=f),m!==void 0&&(s.resizable=m),w!==void 0&&(s.scrollbars=w)}return Object.entries(s).map(([a,l])=>`${a}=${l}`).join(",")},pt=(t,e,n,o,r)=>{const s=Ht(n,e);if(typeof o!="number"||typeof r!="number")throw new Error(`Popup layer "${e}" requires numeric width/height.`);t.moveTo(Math.round(s.left),Math.round(s.top)),t.resizeTo(Math.round(o),Math.round(r))},le=({layer:t})=>{const e=t.floating;if(!e)throw new Error(`Layer "${t.id}" is missing floating configuration required for popup mode.`);if((e.mode??"embedded")!=="popup")throw new Error(`PopupLayerPortal received layer "${t.id}" that is not configured for popup mode.`);const o=i.useRef(null),r=i.useRef(null),[s,u]=i.useState(!1);return i.useEffect(()=>{if(typeof window>"u")return;const c=ue(t.id,t.position,t.width,t.height,e.popup),a=e.popup?.name??t.id,l=de(a,c,{position:t.position,size:{width:t.width,height:t.height}},e.popup);if(!l)throw new Error(`Failed to open popup window for layer "${t.id}".`);const p=l;r.current=p,e.popup?.focus!==!1&&p.focus(),p.document.title||(p.document.title=t.id),p.document.body.innerHTML="";const f=p.document.createElement("div");f.dataset.layerId=t.id,p.document.body.appendChild(f),o.current=f,u(!0),pt(p,t.id,t.position,t.width,t.height);const m=()=>{r.current=null,o.current=null,u(!1)};return p.addEventListener("beforeunload",m),()=>{p.removeEventListener("beforeunload",m),e.popup?.closeOnUnmount!==!1&&p.close(),r.current=null,o.current=null,u(!1)}},[e.popup?.closeOnUnmount,e.popup?.features?.location,e.popup?.features?.menubar,e.popup?.features?.resizable,e.popup?.features?.scrollbars,e.popup?.features?.status,e.popup?.features?.toolbar,e.popup?.focus,e.popup?.name,t.id]),i.useEffect(()=>{const c=r.current;c&&pt(c,t.id,t.position,t.width,t.height)},[t.position?.left,t.position?.top,t.height,t.width,t.id]),!s||!o.current?null:Bt.createPortal(g.jsx(Mt,{layerId:t.id,children:t.component}),o.current)},de=(t,e,n,o)=>{const r=o?.createWindow;return r?r({name:t,features:e,bounds:n}):window.open("",t,e)},fe=({onClick:t})=>g.jsx(_.FloatingPanelControls,{children:g.jsx(_.FloatingPanelCloseButton,{onClick:t,"aria-label":"Close window","data-drag-ignore":"true"})}),ge=({header:t,draggable:e,onClose:n})=>{if(!t)return null;const o=t.showCloseButton??!1,r=e?{"data-drag-handle":"true"}:{},s=e?"grab":void 0;return g.jsxs(_.FloatingPanelHeader,{...r,style:{cursor:s},children:[t.title?g.jsx(_.FloatingPanelTitle,{children:t.title}):null,o?g.jsx(fe,{onClick:n}):null]})},pe=({header:t,draggable:e,chrome:n,onClose:o,children:r})=>n?g.jsxs(_.FloatingPanelFrame,{style:{height:"100%",width:"100%"},children:[g.jsx(ge,{header:t,draggable:e,onClose:o}),g.jsx(_.FloatingPanelContent,{style:{flex:1,display:"flex",flexDirection:"column"},children:r})]}):g.jsx(g.Fragment,{children:r}),nt=({id:t,config:e,onClose:n,children:o})=>{const r=e.chrome??!1,s=e.draggable??!1,u=e.header?.title??e.ariaLabel??"Floating window";return g.jsx("div",{"data-floating-window":t,role:"dialog","aria-label":u,style:{height:"100%",width:"100%"},children:g.jsx(pe,{header:e.header,draggable:s,chrome:r,onClose:n,children:o})})};nt.displayName="FloatingWindow";const Nt={position:"absolute",pointerEvents:"auto",boxSizing:"border-box",background:"transparent",border:"none"},he={...Nt,width:v.GRID_LAYER_CORNER_HIT_SIZE,height:v.GRID_LAYER_CORNER_HIT_SIZE,zIndex:2},me={...Nt,zIndex:1},we={"top-left":{top:0,left:0,transform:"translate(-50%, -50%)",cursor:"nwse-resize"},"top-right":{top:0,right:0,transform:"translate(50%, -50%)",cursor:"nesw-resize"},"bottom-left":{bottom:0,left:0,transform:"translate(-50%, 50%)",cursor:"nesw-resize"},"bottom-right":{bottom:0,right:0,transform:"translate(50%, 50%)",cursor:"nwse-resize"}},be={left:{top:v.GRID_LAYER_CORNER_HIT_SIZE,bottom:v.GRID_LAYER_CORNER_HIT_SIZE,left:0,width:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateX(-50%)",cursor:"ew-resize"},right:{top:v.GRID_LAYER_CORNER_HIT_SIZE,bottom:v.GRID_LAYER_CORNER_HIT_SIZE,right:0,width:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateX(50%)",cursor:"ew-resize"},top:{left:v.GRID_LAYER_CORNER_HIT_SIZE,right:v.GRID_LAYER_CORNER_HIT_SIZE,top:0,height:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateY(-50%)",cursor:"ns-resize"},bottom:{left:v.GRID_LAYER_CORNER_HIT_SIZE,right:v.GRID_LAYER_CORNER_HIT_SIZE,bottom:0,height:v.GRID_LAYER_EDGE_HIT_THICKNESS,transform:"translateY(50%)",cursor:"ns-resize"}},Ee=[{key:"top-left",variant:"corner",horizontal:"left",vertical:"top"},{key:"top-right",variant:"corner",horizontal:"right",vertical:"top"},{key:"bottom-left",variant:"corner",horizontal:"left",vertical:"bottom"},{key:"bottom-right",variant:"corner",horizontal:"right",vertical:"bottom"},{key:"left",variant:"edge",horizontal:"left"},{key:"right",variant:"edge",horizontal:"right"},{key:"top",variant:"edge",vertical:"top"},{key:"bottom",variant:"edge",vertical:"bottom"}],ve=({layerId:t,onPointerDown:e})=>g.jsx(g.Fragment,{children:Ee.map(n=>{const o=n.variant==="corner"?he:me,r=n.variant==="corner"?we[n.key]:be[n.key],s={...o,...r},u=n.variant==="corner"?{"data-resize-corner":n.key}:{"data-resize-edge":n.key};return g.jsx("div",{role:"presentation","aria-hidden":"true",style:s,...u,"data-layer-id":t,onPointerDown:c=>e(n,c)},n.key)})}),Se=({pivot:t})=>{const{Outlet:e}=xt.usePivot({items:t.items,activeId:t.activeId,defaultActiveId:t.defaultActiveId,onActiveChange:t.onActiveChange,transitionMode:t.transitionMode});return g.jsx(e,{})},Ce=(t,e)=>t.pivot?g.jsx(Se,{pivot:t.pivot}):t.cache?e(t.id):t.component,At=i.memo(({layer:t,onClose:e})=>{const{getCachedContent:n}=Tt(),o=Ce(t,n);return t.floating?.chrome?g.jsx(nt,{id:t.id,config:t.floating,onClose:e,children:o}):o});At.displayName="LayerContentRenderer";const kt=i.memo(({layerId:t,isResizable:e,onPointerDown:n})=>e?g.jsx(ve,{layerId:t,onPointerDown:n}):null);kt.displayName="LayerResizeHandles";const Re=(t,e)=>t?"auto":e?"visible":"hidden",jt=i.memo(({layer:t,handleLayerPointerDown:e})=>{const{getLayerRenderState:n}=et(),{style:o,isResizable:r,isResizing:s,onResizeHandlePointerDown:u}=n(t),c=i.useMemo(()=>{const p={};return t.gridArea&&(p.gridArea=t.gridArea),t.gridRow&&(p.gridRow=t.gridRow),t.gridColumn&&(p.gridColumn=t.gridColumn),p},[t.gridArea,t.gridRow,t.gridColumn]),a=i.useMemo(()=>{const p=!!t.floating,f=Re(t.scrollable,p),m={...o,...c,minWidth:0,minHeight:0,overflow:f};return r?{...m,position:"relative"}:m},[o,c,r,t.scrollable,t.floating]),l=i.useCallback(()=>{t.floating?.onClose?.()},[t.floating]);return g.jsxs("div",{"data-layer-id":t.id,"data-draggable":!!t.floating?.draggable,"data-resizable":r,"data-resizing":s,style:a,onPointerDown:e,children:[g.jsx(Mt,{layerId:t.id,children:g.jsx(At,{layer:t,onClose:l})}),g.jsx(kt,{layerId:t.id,isResizable:r,onPointerDown:u})]})});jt.displayName="EmbeddedLayer";const ze=({layers:t})=>{const{handleLayerPointerDown:e}=et();return g.jsx(g.Fragment,{children:t.map(n=>{const o=n.floating?.mode??"embedded";return n.floating&&o==="popup"?g.jsx(le,{layer:n},n.id):g.jsx(jt,{layer:n,handleLayerPointerDown:e},n.id)})})};function j(t){const e=i.useRef(t);return e.current=t,i.useCallback((...n)=>{const o=e.current;if(o)return o(...n)},[])}function J(t,e){const n=j(e.onMove),o=j(e.onUp),r=j(e.onCancel);i.useEffect(()=>{if(t)return e.onMove&&document.addEventListener("pointermove",n,{passive:!1}),e.onUp&&document.addEventListener("pointerup",o),e.onCancel&&document.addEventListener("pointercancel",r),()=>{e.onMove&&document.removeEventListener("pointermove",n),e.onUp&&document.removeEventListener("pointerup",o),e.onCancel&&document.removeEventListener("pointercancel",r)}},[t,e.onMove,e.onUp,e.onCancel,n,o,r])}function xe(t,e,n){i.useEffect(()=>{const o=t.current;if(!(!e||!o||n===void 0))return o.setPointerCapture(n),()=>{o.hasPointerCapture&&o.hasPointerCapture(n)&&o.releasePointerCapture(n)}},[t,e,n])}function Ie(t,e,n=["pointerdown","pointermove","pointerup"]){i.useEffect(()=>{const o=t.current;if(!e||!o)return;const r=s=>{s.preventDefault()};return n.forEach(s=>{o.addEventListener(s,r,{passive:!1})}),()=>{n.forEach(s=>{o.removeEventListener(s,r)})}},[t,e,n])}function Pe(t,e,n){const{onMove:o,onUp:r,onCancel:s,pointerId:u,capturePointer:c=!0,preventDefaults:a=!0}=n;J(e,{onMove:o,onUp:r,onCancel:s}),xe(t,e?c:!1,u),Ie(t,e?a:!1)}const Gt=t=>{const e=i.useRef(null),n=i.useRef(null),o=i.useRef(0),[r,s]=i.useState(!1),u=j(f=>{t.onResize?.(f)}),c=i.useCallback(f=>t.axis==="x"?f.clientX:f.clientY,[t.axis]),a=i.useCallback(f=>{f.preventDefault(),e.current=f.currentTarget,n.current=f.pointerId,o.current=c(f),s(!0)},[c]),l=i.useCallback(f=>{const m=c(f),w=m-o.current;w!==0&&(o.current=m,u(w))},[c,u]),p=i.useCallback(()=>{s(!1),n.current=null},[]);return Pe(e,r,{onMove:l,onUp:p,pointerId:n.current??void 0,capturePointer:!0,preventDefaults:!1}),{ref:e,onPointerDown:a,isDragging:r}},Le=({element:t,component:e})=>i.forwardRef(({children:n,...o},r)=>t?i.cloneElement(t,{...o,ref:r},n??t.props.children):e?g.jsx(e,{...o,ref:r,children:n}):g.jsx("div",{...o,ref:r,children:n}));function Ft({element:t,component:e}){return i.useMemo(()=>Le({element:t,component:e}),[e,t])}const De={position:"absolute",zIndex:v.RESIZE_HANDLE_Z_INDEX},ye={vertical:{width:v.RESIZE_HANDLE_THICKNESS,height:"100%",top:0,cursor:"col-resize"},horizontal:{width:"100%",height:v.RESIZE_HANDLE_THICKNESS,left:0,cursor:"row-resize"}},Te={idle:v.COLOR_RESIZE_HANDLE_IDLE,hovered:v.COLOR_RESIZE_HANDLE_HOVER,dragging:v.COLOR_RESIZE_HANDLE_ACTIVE},$t=({direction:t,onResize:e,component:n,element:o,children:r})=>{const s=t==="vertical"?"x":"y",{ref:u,isDragging:c,onPointerDown:a}=Gt({axis:s,onResize:e}),[l,p]=i.useState(!1),f=i.useCallback(()=>{p(!0)},[]),m=i.useCallback(()=>{p(!1)},[]),w=Ft({element:o,component:n}),C=i.useMemo(()=>c?"dragging":l?"hovered":"idle",[c,l]),R=i.useMemo(()=>({...De,...ye[t],backgroundColor:Te[C],touchAction:"none"}),[t,C]);return g.jsx(w,{ref:u,style:R,role:"separator","aria-orientation":t,"aria-hidden":void 0,"data-resize-handle":"true","data-direction":t,"data-is-dragging":c?"true":void 0,onPointerDown:a,onPointerEnter:f,onPointerLeave:m,children:r})},ht={position:"absolute",pointerEvents:"auto"},mt=({direction:t,trackIndex:e,align:n,gap:o,span:r,onResize:s})=>{const u=t==="col"?"vertical":"horizontal",c=i.useCallback(p=>{const f=n==="start"?-p:p;s(t,e,f)},[n,t,e,s]),a=i.useMemo(()=>t==="col"?{gridColumn:`${e+1} / ${e+2}`,gridRow:`${r.start} / ${r.end}`}:{gridRow:`${e+1} / ${e+2}`,gridColumn:`${r.start} / ${r.end}`},[t,e,r]),l=i.useMemo(()=>{const f=Math.max(0,o)/2+v.GRID_HANDLE_THICKNESS/2;return t==="col"?{...ht,width:v.GRID_HANDLE_THICKNESS,height:"100%",top:0,bottom:0,...n==="start"?{left:-f}:{right:-f}}:{...ht,width:"100%",height:v.GRID_HANDLE_THICKNESS,left:0,right:0,...n==="start"?{top:-f}:{bottom:-f}}},[n,t,o]);return g.jsx("div",{"data-resizable":"true",style:{...a,position:"relative",pointerEvents:"none"},children:g.jsx("div",{"data-direction":u,"data-align":n,"data-handle":"true",style:l,children:g.jsx($t,{direction:u,onResize:c})})})},_e=t=>{const e=new Map;t.forEach((o,r)=>{o.forEach((s,u)=>{if(!s||s===".")return;const c=e.get(s);if(c){const l={rowStart:Math.min(c.rowStart,r),rowEnd:Math.max(c.rowEnd,r),colStart:Math.min(c.colStart,u),colEnd:Math.max(c.colEnd,u)};e.set(s,l);return}const a={rowStart:r,rowEnd:r,colStart:u,colEnd:u};e.set(s,a)})});const n=new Map;return e.forEach((o,r)=>{const s=o.rowStart+1,u=o.rowEnd+2,c=o.colStart+1,a=o.colEnd+2,l={gridArea:r,gridRow:`${s} / ${u}`,gridColumn:`${c} / ${a}`};n.set(r,l)}),n},Me=(t,e)=>{if((t.positionMode??"grid")!=="grid")return t;const o=t.gridArea??t.id,r=e.get(o);if(!r)return t;const s=!t.gridArea,u=!t.gridRow,c=!t.gridColumn;return!s&&!u&&!c?t:{...t,gridArea:s?r.gridArea:t.gridArea,gridRow:u?r.gridRow:t.gridRow,gridColumn:c?r.gridColumn:t.gridColumn}},He=(t,e)=>{const n=i.useMemo(()=>_e(t.areas),[t.areas]),o=i.useMemo(()=>e.map(c=>Me(c,n)),[e,n]),r=i.useMemo(()=>o.filter(c=>c.visible!==!1),[o]),s=i.useMemo(()=>r.filter(c=>!c.drawer),[r]),u=i.useMemo(()=>{const c=new Map;return o.forEach(a=>{c.set(a.id,a)}),c},[o]);return{normalizedLayers:o,visibleLayers:r,regularLayers:s,layerById:u}},Ne=t=>{if(!t)return{rowGap:0,columnGap:0};const e=t.split(/\s+/).map(o=>o.trim()).filter(Boolean),n=o=>{const r=o.match(/^(-?\d+(?:\.\d+)?)px$/);return r?Number.parseFloat(r[1]):0};if(e.length===1){const o=n(e[0]);return{rowGap:o,columnGap:o}}return{rowGap:n(e[0]),columnGap:n(e[1])}},Ae=(t,e)=>{if(!t)return[];const n=getComputedStyle(t);return(e==="col"?n.gridTemplateColumns:n.gridTemplateRows).split(/\s+/).map(r=>parseFloat(r)).filter(r=>!Number.isNaN(r))},ot=(t,e=Number.NEGATIVE_INFINITY,n=Number.POSITIVE_INFINITY)=>Math.min(Math.max(t,e),n),ke=(t,e)=>typeof t!="number"||!Number.isFinite(t)?e:t,V=(t,e)=>`${t}-${e}`,je=(t,e,n,o)=>{const r=V(n,o),s=e[r];return s!==void 0?`minmax(${t.minSize??0}px, ${s}px)`:t.size},wt=(t,e,n)=>t.map((o,r)=>je(o,e,n,r)).join(" "),W=(t,e)=>t.reduce((n,o,r)=>(o.resizable&&o.size.endsWith("px")&&(n[V(e,r)]=parseInt(o.size,10)),n),{}),Ge=({trackSizes:t,track:e,direction:n,trackIndex:o,containerRef:r})=>{const s=V(n,o),u=t[s];if(u!==void 0)return u;const a=Ae(r?.current??null,n)[o];return a!==void 0&&a>0?a:e.size.endsWith("px")?Number.parseInt(e.size,10):300},Fe=(t,e)=>t.reduce((n,o,r)=>r===e?n:o.size.includes("fr")?n+100:n+(o.minSize??50),0),$e=({track:t,tracks:e,trackIndex:n,direction:o,containerRef:r,gapSizes:s})=>{if(!r?.current)return t.maxSize;const u=o==="col"?r.current.offsetWidth:r.current.offsetHeight,c=Fe(e,n),a=e.length-1,l=o==="col"?s.columnGap:s.rowGap,p=a*l,f=u-c-p;return t.maxSize!==void 0?Math.min(t.maxSize,f):f},Oe=(t,e,n)=>ot(t,e??Number.NEGATIVE_INFINITY,n??Number.POSITIVE_INFINITY),bt=(t,e)=>{const n=t.length,o=[];for(let u=0;u<n;u++){const c=t[u],a=c[e],l=c[e+1];a!==l&&o.push(u)}if(o.length===0)return{start:1,end:n+1};const r=Math.min(...o),s=Math.max(...o);return{start:r+1,end:s+2}},Et=(t,e)=>{const n=t[e],o=t[e+1],r=n?.length??0,s=[];for(let a=0;a<r;a++){const l=n?.[a],p=o?.[a];l!==p&&s.push(a)}if(s.length===0)return{start:1,end:r+1};const u=Math.min(...s),c=Math.max(...s);return{start:u+1,end:c+2}},Ye=(t,e)=>{if(t.length===0)return[];const n=e.length;if(t.length===1)return t[0]?.resizable?[{trackIndex:0,align:"end",span:{start:1,end:n+1}}]:[];const o=[];return Array.from({length:t.length-1},(s,u)=>u).forEach(s=>{const u=t[s];if(t[s+1]?.resizable){const a=bt(e,s);o.push({trackIndex:s+1,align:"start",span:a});return}if(u?.resizable){const a=bt(e,s);o.push({trackIndex:s,align:"end",span:a})}}),o},We=(t,e)=>{if(t.length===0)return[];const n=e[0]?.length??0;if(t.length===1)return t[0]?.resizable?[{trackIndex:0,align:"end",span:{start:1,end:n+1}}]:[];const o=[];return Array.from({length:t.length-1},(s,u)=>u).forEach(s=>{const u=t[s];if(t[s+1]?.resizable){const a=Et(e,s);o.push({trackIndex:s+1,align:"start",span:a});return}if(u?.resizable){const a=Et(e,s);o.push({trackIndex:s,align:"end",span:a})}}),o},Be=t=>t!==void 0?{gap:t}:{},Xe=(t,e)=>{const n=Object.keys(e),o={};for(const p of n)o[p]=t[p]??e[p];const r=Object.keys(t),s=r.length!==n.length,u=r.some(p=>!Object.prototype.hasOwnProperty.call(o,p)),c=s?!0:u,a=n.some(p=>t[p]!==o[p]);return(c?!0:a)?o:null},Ve=(t,e,n)=>{const[o,r]=i.useState(()=>({...W(t.columns,"col"),...W(t.rows,"row")}));It.useIsomorphicLayoutEffect(()=>{const f={...W(t.columns,"col"),...W(t.rows,"row")};r(m=>Xe(m,f)??m)},[t.columns,t.rows]);const s=i.useMemo(()=>t.areas.map(f=>`"${f.join(" ")}"`).join(" "),[t.areas]),u=i.useMemo(()=>Ne(t.gap),[t.gap]),c=i.useMemo(()=>Ye(t.columns,t.areas),[t.columns,t.areas]),a=i.useMemo(()=>We(t.rows,t.areas),[t.rows,t.areas]),l=i.useMemo(()=>({...t.style,...e,gridTemplateAreas:s,gridTemplateRows:wt(t.rows,o,"row"),gridTemplateColumns:wt(t.columns,o,"col"),...Be(t.gap)}),[s,t.columns,t.gap,t.rows,t.style,e,o]),p=i.useCallback((f,m,w)=>{const C=f==="row"?t.rows:t.columns,R=C[m];if(!R||!R.resizable)return;const P=Ge({trackSizes:o,track:R,direction:f,trackIndex:m,containerRef:n}),L=$e({track:R,tracks:C,trackIndex:m,direction:f,containerRef:n,gapSizes:u}),M=V(f,m);r(A=>{const D=P+w,y=Oe(D,R.minSize,L);return{...A,[M]:y}})},[t.columns,t.rows,o,n,u]);return{columnHandles:c,rowHandles:a,gapSizes:u,gridStyle:l,handleResize:p}},Ze=t=>t.positionMode?t.positionMode:t.floating?(t.floating.mode??"embedded")==="embedded"?"absolute":"relative":"grid",Ke=t=>({position:t==="grid"?"relative":t}),Ue=(t,e)=>e!=="grid"?{}:{gridArea:t.gridArea,gridRow:t.gridRow,gridColumn:t.gridColumn},qe=t=>t?{top:t.top,right:t.right,bottom:t.bottom,left:t.left}:{},Je=t=>t!==void 0?{zIndex:t}:{},Qe=(t,e)=>({width:t,height:e}),tn=(t,e)=>t.pointerEvents!==void 0?typeof t.pointerEvents=="boolean"?{pointerEvents:t.pointerEvents?"auto":"none"}:{pointerEvents:t.pointerEvents}:e==="absolute"||e==="fixed"?{pointerEvents:"auto"}:{},en=t=>t.floating?t.floating.position??t.floating.defaultPosition??t.position:t.position,nn=t=>{if(t.floating){const e=t.floating.size??t.floating.defaultSize;if(e)return{width:e.width,height:e.height}}return{width:t.width,height:t.height}},on=t=>t.floating?.zIndex!==void 0?t.floating.zIndex:t.zIndex,rn=t=>{const e=Ze(t),n=en(t),o=nn(t),r=on(t);return{...t.style,...Ke(e),...Ue(t,e),...qe(n),...Je(r),...Qe(o.width,o.height),...tn(t,e)}},sn=t=>{const e=t.floating;return e?e.mode??"embedded":null},G=t=>sn(t)!=="embedded"?null:t.floating??null,vt=t=>t instanceof HTMLElement?["INPUT","TEXTAREA","SELECT","BUTTON"].includes(t.tagName):!1,St=(t,e,n)=>{const o=e??Number.NEGATIVE_INFINITY,r=n??Number.POSITIVE_INFINITY;return ot(t,o,r)},Ct=(t,e,n)=>{if(typeof t=="number"&&Number.isFinite(t))return t;throw new Error(`Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`)},Rt=t=>{const e=G(t);if(!e)throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);const n=e.position??e.defaultPosition??t.position;if(!n)throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);return{left:Ct(n.left,"left",t.id),top:Ct(n.top,"top",t.id)}},an=t=>{const e=G(t);return e?e.constraints??{}:{}},cn=(t,e,n)=>t?t==="left"?e-n:e+n:e,un=(t,e,n)=>t?t==="top"?e-n:e+n:e,ln=(t,e,n)=>!t||t==="right"?e:e+n,dn=(t,e,n)=>!t||t==="bottom"?e:e+n,Q=(t,e)=>t?t.dataset.layerId===e?t:Q(t.parentElement,e):null,rt=(t,e,n)=>!t||n?.(t)?null:e(t)?t:rt(t.parentElement,e,n),fn=t=>t instanceof HTMLElement?rt(t,e=>e.dataset.dragHandle==="true",e=>e.dataset.dragIgnore==="true"):null,zt=t=>t instanceof HTMLElement?rt(t,e=>e.dataset.resizeCorner!==void 0||e.dataset.resizeEdge!==void 0)!==null:!1,B=t=>{const e=G(t);return e?e.resizable===!0:!1},X=t=>{if(!G(t))return null;const n=hn(t);if(!n)throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);return{width:n.width,height:n.height}},gn=(t,e,n)=>{const o=t.filter(B).reduce((f,m)=>{if(n===m.id){const C=e[m.id];if(C)return f[m.id]=C,f}const w=X(m);return w&&(f[m.id]=w),f},{}),r=Object.keys(e),s=Object.keys(o),u=r.length!==s.length,c=r.some(f=>!Object.prototype.hasOwnProperty.call(o,f)),a=u?!0:c,l=s.some(f=>{const m=e[f],w=o[f];return!m||!w?!0:m.width!==w.width||m.height!==w.height});return{sizes:o,changed:a?!0:l}},pn=({layers:t,layerById:e,isRootLevel:n})=>{const[o,r]=i.useState(null),[s,u]=i.useState(null),[c,a]=i.useState({}),[l,p]=i.useState({}),f=i.useRef(null),m=i.useRef(null),w=j((h,d)=>{e.get(h)?.floating?.onMove?.(d)}),C=j((h,d)=>{e.get(h)?.floating?.onResize?.(d)});It.useIsomorphicLayoutEffect(()=>{const{sizes:h,changed:d}=gn(t,l,s);d&&p(h)},[t,s]);const R=i.useCallback((h,d,b,E)=>{const S=Rt(d),I=c[h]??{x:0,y:0},z={pointerStartX:E.clientX,pointerStartY:E.clientY,initialTranslationX:I.x,initialTranslationY:I.y,baseLeft:S.left,baseTop:S.top,layerId:h,pointerId:E.pointerId,target:b};if(z.target.setPointerCapture)try{z.target.setPointerCapture(z.pointerId)}catch{}f.current=z,r(h)},[c]),P=i.useCallback(h=>{const d=h.target,b=fn(d);if(!b)return;const E=b.closest("[data-layer-id]")?.getAttribute("data-layer-id");if(!E)return;const S=e.get(E);if(!S)return;const I=G(S);if(!(!I||I.draggable!==!0)&&!vt(h.target)&&!zt(h.target)&&b){const z=Q(b,E);if(!z)return;R(E,S,z,h);return}},[R,e]),L=i.useCallback((h,d)=>{const b=e.get(h),E=b?G(b):null;if(!b||!E||E.draggable!==!0||vt(d.target)||zt(d.target))return;const S=Q(d.currentTarget,h);S&&R(h,b,S,d)},[R,e]),M=i.useCallback((h,d,b)=>{const E=e.get(h);if(!E||!B(E))return;const S=l[h]??X(E);if(!S)return;const I=Rt(E),z=an(E),H=c[h]??{x:0,y:0};if(b.stopPropagation(),b.preventDefault(),b.currentTarget.setPointerCapture)try{b.currentTarget.setPointerCapture(b.pointerId)}catch{}m.current={layerId:h,pointerId:b.pointerId,horizontalEdge:d.horizontal,verticalEdge:d.vertical,startX:b.clientX,startY:b.clientY,startWidth:S.width,startHeight:S.height,startPosition:H,baseLeft:I.left,baseTop:I.top,minWidth:z.minWidth,maxWidth:z.maxWidth,minHeight:z.minHeight,maxHeight:z.maxHeight,target:b.currentTarget},u(h)},[e,c,l]),A=i.useCallback(h=>{const d=f.current;if(!d)return;const b=h.clientX-d.pointerStartX,E=h.clientY-d.pointerStartY,S={x:d.initialTranslationX+b,y:d.initialTranslationY+E};a(I=>({...I,[d.layerId]:S})),w(d.layerId,{left:d.baseLeft+S.x,top:d.baseTop+S.y})},[w]),D=i.useCallback(h=>{const d=m.current;if(!d||d.pointerId!==h.pointerId||!e.get(d.layerId))return;const E=h.clientX-d.startX,S=h.clientY-d.startY,I=cn(d.horizontalEdge,d.startWidth,E),z=un(d.verticalEdge,d.startHeight,S),H=St(I,d.minWidth,d.maxWidth),k=St(z,d.minHeight,d.maxHeight),$=d.startWidth-H,Z=d.startHeight-k,at=ln(d.horizontalEdge,d.startPosition.x,$),Yt=dn(d.verticalEdge,d.startPosition.y,Z),K=l[d.layerId],ct={width:H,height:k};(!K||K.width!==H||K.height!==k)&&(p(U=>({...U,[d.layerId]:ct})),C(d.layerId,ct));const ut=c[d.layerId]??{x:0,y:0},O={x:at,y:Yt};(ut.x!==O.x||ut.y!==O.y)&&(a(U=>({...U,[d.layerId]:O})),w(d.layerId,{left:d.baseLeft+O.x,top:d.baseTop+O.y}))},[e,c,l,w,C]),y=i.useCallback(h=>{const d=f.current;if(d){if(d.pointerId===h.pointerId&&d.target.releasePointerCapture)try{d.target.releasePointerCapture(d.pointerId)}catch{}f.current=null}r(null)},[]),N=i.useCallback(h=>{const d=m.current;if(d){if(d.pointerId===h.pointerId&&d.target.releasePointerCapture)try{d.target.releasePointerCapture(d.pointerId)}catch{}m.current=null}u(null)},[]);J(o!==null,{onMove:A,onUp:y,onCancel:y}),J(s!==null,{onMove:D,onUp:N,onCancel:N});const T=i.useCallback(h=>{const d=rn(h),b=G(h);if(!b||b.draggable!==!0)return d;const E=c[h.id],S=o===h.id,I=s===h.id,z=E?{transform:`translate(${E.x}px, ${E.y}px)`}:{},H=l[h.id],k=B(h)?X(h):null,$=H??k,Z=$?{width:`${$.width}px`,height:`${$.height}px`}:{};return{...d,...Z,...z,...S||I?{cursor:"grabbing"}:{}}},[o,c,l,s]),x=i.useCallback(h=>{if(!B(h))return{isResizable:!1};const b=l[h.id],E=X(h);return(b??E)!==null?{isResizable:!0,onPointerDown:(H,k)=>{M(h.id,H,k)}}:{isResizable:!1}},[M,l]),st=i.useCallback(h=>{const{isResizable:d,onPointerDown:b}=x(h),E=T(h),S=s===h.id;return{style:E,isResizable:d,isResizing:S,onResizeHandlePointerDown:(I,z)=>{b&&b(I,z)}}},[T,x,s]),it=i.useCallback(h=>({"data-drag-handle":"true",role:"button","aria-roledescription":"Drag handle","aria-label":"Drag layer",onPointerDown:d=>{L(h,d)}}),[L]);return{providerValue:i.useMemo(()=>({handleLayerPointerDown:P,getLayerRenderState:st,getLayerHandleProps:it,isRootLevel:n}),[it,st,P,n]),draggingLayerId:o,resizingLayerId:s}},hn=t=>{if(t.floating){const e=t.floating.size??t.floating.defaultSize;if(e)return{width:e.width,height:e.height}}if(typeof t.width=="number"&&typeof t.height=="number")return{width:t.width,height:t.height}},Ot={display:"grid",width:"100%",height:"100%",overflow:"hidden"},mn={touchAction:"none",WebkitTouchCallout:"none",WebkitUserSelect:"none",userSelect:"none"},wn={...Ot,overflow:"visible",height:"auto",minHeight:"100%"},bn=t=>t?wn:Ot,En=({config:t,layers:e,style:n,root:o=!1})=>{const r=i.useRef(null),{isIntersecting:s}=Ut(r,{threshold:0});return g.jsx(ae,{config:t,layers:e,style:n,children:g.jsx(vn,{gridRef:r,isIntersecting:s,isRoot:o})})},vn=({gridRef:t,isIntersecting:e,isRoot:n})=>{const{config:o,style:r,layers:s}=Tt(),{normalizedLayers:u,visibleLayers:c,regularLayers:a,layerById:l}=He(o,s.defs),{columnHandles:p,rowHandles:f,gapSizes:m,gridStyle:w,handleResize:C}=Ve(o,r,t),{providerValue:R,draggingLayerId:P,resizingLayerId:L}=pn({layers:u,layerById:l,isRootLevel:n}),M=P?!0:!!L,A=i.useMemo(()=>({...bn(n),...w,...M?mn:{}}),[w,M,n]);return g.jsxs(g.Fragment,{children:[g.jsxs("div",{ref:t,style:A,"data-dragging":!!P,"data-resizing":!!L,"data-visible":e,children:[g.jsx(ie,{value:R,children:g.jsx(ze,{layers:a})}),p.map(({trackIndex:D,align:y,span:N})=>g.jsx(mt,{direction:"col",trackIndex:D,align:y,gap:m.columnGap,span:N,onResize:C},`col-${D}:${y}`)),f.map(({trackIndex:D,align:y,span:N})=>g.jsx(mt,{direction:"row",trackIndex:D,align:y,gap:m.rowGap,span:N,onResize:C},`row-${D}:${y}`))]}),g.jsx(Lt,{layers:c})]})};exports.Drawer=Pt;exports.DrawerLayers=Lt;exports.FloatingWindow=nt;exports.GridLayout=En;exports.ResizeHandle=$t;exports.clampNumber=ot;exports.runTransition=tt;exports.toFiniteNumberOr=ke;exports.useEffectEvent=j;exports.useElementComponentWrapper=Ft;exports.useGridLayoutContext=et;exports.useLayerInstance=ce;exports.useResizeDrag=Gt;exports.useTransitionState=oe;
2
+ //# sourceMappingURL=GridLayout-BQQ63eA1.cjs.map