@aiquants/resize-panels 1.7.0 → 1.7.2

package/README.md

@@ -7,8 +7,10 @@ React 向けのリサイズ可能なパネルレイアウトコンポーネン
 - `PanelGroup` と `Panel` と `PanelResizeHandle` を中核に、リデューサーでレイアウトと DOM 計測を同期
 - `calculateSnapThreshold` とノイズ除去ロジックでリサイズ時の揺らぎを抑え、意図しない折りたたみを防止
 - 方向指定付き `collapsible` 設定と `usePanelControls` により、ドラッグ操作と UI 操作の両方で折りたたみ / 展開を制御
-- `autoSaveId` を指定するとローカルストレージにパネルサイズを自動保存し、再読み込み時に復元
-- `showDebugInfo` を使えば `PanelDebugInfo` とグローバルオーバーレイで計測結果や制約違反を可視化
+- リサイズハンドルはマウス／タッチのドラッグに加え、**矢印キーによるキーボードリサイズ**にも対応（Shift 併用で 5 倍ステップ）。マルチタッチや `pointercancel` の割込みでもドラッグ状態が壊れない
+- `dir="rtl"` の **RTL レイアウト**でも、ドラッグ・キーボード・ハンドル位置が視覚方向に一致
+- `autoSaveId` を指定するとローカルストレージにパネルサイズを自動保存し、再読み込み時に復元（初期化確定後のサイズのみ保存）
+- `showDebugInfo` を使えば `PanelDebugInfo` とグローバルオーバーレイで計測結果や制約違反を可視化（デバッグ UI は遅延読み込みで、未使用時は本番バンドルに含まれない）
 
 ## インストール
 
@@ -118,7 +120,7 @@ export const Example = () => (
 ### PanelGroup の主なプロパティ
 
 | プロパティ | 型 | 説明 |
-|-------------|----|------|
+| --- | --- | --- |
 | `id` | `string` | `data-panel-group-id` にも反映される識別子。複数グループを並べる場合は指定を推奨 |
 | `direction` | `'horizontal' \| 'vertical'` | パネルの配置方向 |
 | `className` / `style` | `string` / `React.CSSProperties` | コンテナの見た目を調整するための追加スタイル |
@@ -130,7 +132,7 @@ export const Example = () => (
 ### Panel の主なプロパティ
 
 | プロパティ | 型 | 説明 |
-|-------------|----|------|
+| --- | --- | --- |
 | `id` | `string` | パネル識別子。省略時はランダム生成だが、SSR との整合のため明示指定を推奨 |
 | `defaultSize` | `{ value: number; unit: 'pixels' \| 'percentage' } \| number` | 初期サイズ。数値のみの場合はパーセンテージとして扱う |
 | `minSize` / `maxSize` | `FlexibleSize` | パネルの最小・最大サイズ制約。ピクセル・割合で指定可能 |
@@ -142,13 +144,15 @@ export const Example = () => (
 ### PanelResizeHandle の主なプロパティ
 
 | プロパティ | 型 | 説明 |
-|-------------|----|------|
+| --- | --- | --- |
 | `id` | `string` | ハンドル識別子。省略時はランダム生成 |
-| `disabled` | `boolean` | `true` にするとドラッグ操作を無効化 |
-| `onDragging` | `(isDragging: boolean) => void` | ドラッグ開始 / 終了ごとに呼び出されるコールバック |
+| `disabled` | `boolean` | `true` にするとドラッグ・キーボード操作を無効化 |
+| `onDragging` | `(isDragging: boolean) => void` | ドラッグ開始 / 終了ごとに呼び出されるコールバック（`pointercancel` 等の割込みでも終了時に発火） |
 | `className` / `style` | `string` / `React.CSSProperties` | ハンドル見た目を追加カスタマイズ |
 | `children` | `React.ReactNode` | 独自のハンドルインジケーターを描画する場合に使用 |
 
+> ハンドルは `<button>` としてレンダリングされ、フォーカス時に矢印キー（水平なら `←` / `→`、垂直なら `↑` / `↓`）でリサイズできます。`Shift` 併用で 1 押下あたりの移動量が 5 倍になります。`dir="rtl"` のコンテナ内ではドラッグ・キーボードの方向が視覚方向に合わせて反転します。
+
 ## フックとユーティリティ
 
 - `useResizablePanels`: `PanelGroup` 内部実装でも利用しているフック。カスタムコンテナを作る場合に役立ちます。
@@ -165,6 +169,8 @@ export const Example = () => (
 
 `PanelGroup` の `showDebugInfo` を有効にすると、各 `Panel` に `PanelDebugInfo` が表示され、折りたたみ状態・計測サイズ・保持中の割合が即座に確認できます。同時にグローバルオーバーレイが開き、コンテナの実測サイズ、制約違反の有無、ハンドル厚み（`PANEL_HANDLE_THICKNESS` で定義された 8px）なども一覧できます。
 
+グローバルオーバーレイとそのストアは `React.lazy` + dynamic import で遅延読み込みされるため、`showDebugInfo` を一度も使わないアプリの本番バンドルにはデバッグ UI もストア購読も含まれません。
+
 ## スナップとノイズ対策・最終整合の挙動
 
 `PanelResizeHandle` と `Panel` の両方で `calculateSnapThreshold` を利用し、コンテナサイズに応じたゼロスナップ閾値を共有しています。`Panel` および `PanelGroup` では、サブピクセル単位の微小なノイズ（0.5px 未満の揺れ）を無視するフィルタリングと、動作停止後に正確な真値を反映する **最終整合メカニズム（デバウンス同期）** を導入しています。これにより、スクロールやリサイズ中のチラつきを抑えつつ、最終的な表示状態と内部状態の完全な一致を保証します。

package/dist/GlobalDebugOverlay-DYCR0FIu.js

@@ -0,0 +1,252 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useState as A } from "react";
+import { createPortal as P } from "react-dom";
+import { useDebugOverlayOwnerId as R, useDebugOverlaySnapshot as T } from "./debugOverlayStore-Cntyxboe.js";
+import { P as Y } from "./index-BzgId8aQ.js";
+const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s < 0 ? 0 : s).toFixed(8)}${n}`, w = {
+  position: "fixed",
+  left: "50%",
+  bottom: "20px",
+  transform: "translate(-50%, 0)",
+  zIndex: 100,
+  maxWidth: "min(90vw, 1120px)",
+  width: "100%",
+  borderRadius: "14px",
+  backgroundColor: "rgba(15, 23, 42, 0.72)",
+  color: "#e2e8f0",
+  fontFamily: "monospace",
+  fontSize: "11px",
+  lineHeight: 1.6,
+  boxShadow: "0 22px 45px rgba(15,23,42,0.45)",
+  border: "1px solid rgba(148, 163, 184, 0.22)",
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  pointerEvents: "auto",
+  overflow: "auto"
+}, C = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "12px"
+}, D = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px"
+}, N = {
+  padding: "6px 10px",
+  borderRadius: "9999px",
+  border: "1px solid rgba(148, 163, 184, 0.35)",
+  color: "#e2e8f0",
+  fontWeight: 600,
+  fontSize: "10px",
+  letterSpacing: "0.03em",
+  textTransform: "uppercase",
+  cursor: "pointer",
+  transition: "background-color 0.18s ease, border-color 0.18s ease"
+}, k = {
+  padding: "10px 12px",
+  borderRadius: "10px",
+  backgroundColor: "rgba(30, 41, 59, 0.55)",
+  border: "1px solid rgba(148, 163, 184, 0.18)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "10px"
+}, I = {
+  padding: "8px 10px",
+  borderRadius: "8px",
+  backgroundColor: "rgba(15, 23, 42, 0.55)",
+  border: "1px solid rgba(148, 163, 184, 0.16)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px"
+}, x = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  gap: "6px"
+}, V = {
+  display: "grid",
+  gridTemplateColumns: "auto 1fr",
+  gap: "2px 10px",
+  color: "#e2e8f0"
+}, H = {
+  padding: "2px 6px",
+  borderRadius: "9999px",
+  fontSize: "10px",
+  textTransform: "uppercase"
+}, M = ({ groupId: s }) => R() !== s ? null : /* @__PURE__ */ e(W, {}), W = () => {
+  const n = T().groups, [o, g] = A(!0);
+  if (n.length === 0 || typeof document > "u")
+    return null;
+  const u = n.reduce((r, d) => r + d.panels.length, 0), h = n.reduce((r, d) => r + (d.handles?.length ?? 0), 0), m = () => g((r) => !r), f = /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        ...w,
+        padding: o ? "10px 18px" : "14px 18px",
+        maxHeight: o ? "52px" : "min(65vh, 520px)",
+        transition: "max-height 0.24s ease, padding 0.24s ease"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              ...C,
+              marginBottom: o ? 0 : "12px"
+            },
+            children: [
+              /* @__PURE__ */ t("div", { style: D, children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 700,
+                      fontSize: "12px",
+                      letterSpacing: "0.03em"
+                    },
+                    children: "Panel Overview"
+                  }
+                ),
+                /* @__PURE__ */ t("span", { style: { color: "#cbd5f5" }, children: [
+                  "groups: ",
+                  n.length,
+                  " / panels: ",
+                  u,
+                  " / resizers: ",
+                  h
+                ] })
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: m,
+                  style: {
+                    ...N,
+                    backgroundColor: o ? "rgba(59, 130, 246, 0.2)" : "rgba(71, 85, 105, 0.45)"
+                  },
+                  title: o ? "Panel Overview を開く" : "Panel Overview を閉じる",
+                  children: o ? "開く" : "閉じる"
+                }
+              )
+            ]
+          }
+        ),
+        !o && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              maxHeight: "45vh",
+              overflowY: "auto",
+              paddingRight: "6px"
+            },
+            children: n.map((r, d) => {
+              const l = r.direction === "horizontal" ? r.containerSize.width : r.containerSize.height;
+              return /* @__PURE__ */ t("div", { style: k, children: [
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      ...x,
+                      flexWrap: "wrap",
+                      gap: "10px",
+                      color: "#dbeafe"
+                    },
+                    children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          style: {
+                            fontWeight: 600,
+                            fontSize: "11px",
+                            letterSpacing: "0.02em",
+                            textTransform: "uppercase"
+                          },
+                          children: [
+                            "group ",
+                            d + 1,
+                            ": ",
+                            r.displayName
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ t("span", { children: [
+                        "direction: ",
+                        r.direction,
+                        " / container: ",
+                        a(r.containerSize.width, "px"),
+                        " × ",
+                        a(r.containerSize.height, "px")
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+                      gap: "10px"
+                    },
+                    children: r.panels.map((i, b) => {
+                      const c = i.measuredPixelSize ?? i.size, y = i.size, S = a(y, "px"), v = i.percentageSize ?? (l > 0 ? i.size / l * 100 : void 0), E = i.measuredPercentageSize !== void 0 ? i.measuredPercentageSize : l > 0 ? c / l * 100 : void 0, p = i.collapsed || c <= Y, z = i.collapsed ? "collapsed" : p ? "hidden" : "visible", O = a(v, "%"), L = a(E, "%"), _ = a(c, "px");
+                      return /* @__PURE__ */ t("div", { style: I, children: [
+                        /* @__PURE__ */ t("div", { style: x, children: [
+                          /* @__PURE__ */ e("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }, children: i.id }),
+                          /* @__PURE__ */ e(
+                            "span",
+                            {
+                              style: {
+                                ...H,
+                                backgroundColor: i.collapsed ? "rgba(251, 113, 133, 0.25)" : p ? "rgba(250, 204, 21, 0.25)" : "rgba(74, 222, 128, 0.25)",
+                                color: i.collapsed ? "#fecdd3" : p ? "#fef08a" : "#bbf7d0"
+                              },
+                              children: z
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ t("div", { style: V, children: [
+                          /* @__PURE__ */ e("span", { children: "size (state):" }),
+                          /* @__PURE__ */ e("span", { children: S }),
+                          /* @__PURE__ */ e("span", { children: "size (measured):" }),
+                          /* @__PURE__ */ e("span", { children: _ }),
+                          /* @__PURE__ */ e("span", { children: "percentage (state):" }),
+                          /* @__PURE__ */ e("span", { children: O }),
+                          /* @__PURE__ */ e("span", { children: "percentage (measured):" }),
+                          /* @__PURE__ */ e("span", { children: L }),
+                          /* @__PURE__ */ e("span", { children: "unit:" }),
+                          /* @__PURE__ */ e("span", { children: i.sizeUnit }),
+                          /* @__PURE__ */ e("span", { children: "min:" }),
+                          /* @__PURE__ */ e("span", { children: i.minSize !== void 0 ? JSON.stringify(i.minSize) : "—" }),
+                          /* @__PURE__ */ e("span", { children: "auto min:" }),
+                          /* @__PURE__ */ e("span", { children: i.autoMinSize !== void 0 ? JSON.stringify(i.autoMinSize) : "—" }),
+                          /* @__PURE__ */ e("span", { children: "max:" }),
+                          /* @__PURE__ */ e("span", { children: i.maxSize !== void 0 ? JSON.stringify(i.maxSize) : "—" }),
+                          /* @__PURE__ */ e("span", { children: "priority:" }),
+                          /* @__PURE__ */ e("span", { children: i.pixelAdjustPriority ?? "—" }),
+                          /* @__PURE__ */ e("span", { children: "flex priority:" }),
+                          /* @__PURE__ */ e("span", { children: i.flexAdjustPriority ?? "—" })
+                        ] })
+                      ] }, i.id || b);
+                    })
+                  }
+                )
+              ] }, r.groupId);
+            })
+          }
+        )
+      ]
+    }
+  );
+  return P(f, document.body);
+};
+export {
+  W as GlobalDebugOverlay,
+  M as GlobalDebugOverlayGate
+};

package/dist/GlobalDebugOverlay-afs0vF-Q.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),R=require("react-dom"),x=require("./debugOverlayStore-Dkl-fHoa.cjs"),P=require("./index-xTV-c0PN.cjs"),o=(n,r)=>typeof n!="number"||!Number.isFinite(n)?"—":`${(n<0?0:n).toFixed(8)}${r}`,T={position:"fixed",left:"50%",bottom:"20px",transform:"translate(-50%, 0)",zIndex:100,maxWidth:"min(90vw, 1120px)",width:"100%",borderRadius:"14px",backgroundColor:"rgba(15, 23, 42, 0.72)",color:"#e2e8f0",fontFamily:"monospace",fontSize:"11px",lineHeight:1.6,boxShadow:"0 22px 45px rgba(15,23,42,0.45)",border:"1px solid rgba(148, 163, 184, 0.22)",backdropFilter:"blur(10px)",WebkitBackdropFilter:"blur(10px)",pointerEvents:"auto",overflow:"auto"},Y={display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:"12px"},w={display:"flex",flexDirection:"column",gap:"4px"},D={padding:"6px 10px",borderRadius:"9999px",border:"1px solid rgba(148, 163, 184, 0.35)",color:"#e2e8f0",fontWeight:600,fontSize:"10px",letterSpacing:"0.03em",textTransform:"uppercase",cursor:"pointer",transition:"background-color 0.18s ease, border-color 0.18s ease"},C={padding:"10px 12px",borderRadius:"10px",backgroundColor:"rgba(30, 41, 59, 0.55)",border:"1px solid rgba(148, 163, 184, 0.18)",display:"flex",flexDirection:"column",gap:"10px"},N={padding:"8px 10px",borderRadius:"8px",backgroundColor:"rgba(15, 23, 42, 0.55)",border:"1px solid rgba(148, 163, 184, 0.16)",display:"flex",flexDirection:"column",gap:"4px"},p={display:"flex",justifyContent:"space-between",alignItems:"center",gap:"6px"},k={display:"grid",gridTemplateColumns:"auto 1fr",gap:"2px 10px",color:"#e2e8f0"},G={padding:"2px 6px",borderRadius:"9999px",fontSize:"10px",textTransform:"uppercase"},I=({groupId:n})=>x.useDebugOverlayOwnerId()!==n?null:e.jsx(u,{}),u=()=>{const r=x.useDebugOverlaySnapshot().groups,[t,g]=A.useState(!0);if(r.length===0||typeof document>"u")return null;const b=r.reduce((i,a)=>i+a.panels.length,0),h=r.reduce((i,a)=>i+(a.handles?.length??0),0),m=()=>g(i=>!i),f=e.jsxs("div",{style:{...T,padding:t?"10px 18px":"14px 18px",maxHeight:t?"52px":"min(65vh, 520px)",transition:"max-height 0.24s ease, padding 0.24s ease"},children:[e.jsxs("div",{style:{...Y,marginBottom:t?0:"12px"},children:[e.jsxs("div",{style:w,children:[e.jsx("span",{style:{fontWeight:700,fontSize:"12px",letterSpacing:"0.03em"},children:"Panel Overview"}),e.jsxs("span",{style:{color:"#cbd5f5"},children:["groups: ",r.length," / panels: ",b," / resizers: ",h]})]}),e.jsx("button",{type:"button",onClick:m,style:{...D,backgroundColor:t?"rgba(59, 130, 246, 0.2)":"rgba(71, 85, 105, 0.45)"},title:t?"Panel Overview を開く":"Panel Overview を閉じる",children:t?"開く":"閉じる"})]}),!t&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"12px",maxHeight:"45vh",overflowY:"auto",paddingRight:"6px"},children:r.map((i,a)=>{const l=i.direction==="horizontal"?i.containerSize.width:i.containerSize.height;return e.jsxs("div",{style:C,children:[e.jsxs("div",{style:{...p,flexWrap:"wrap",gap:"10px",color:"#dbeafe"},children:[e.jsxs("span",{style:{fontWeight:600,fontSize:"11px",letterSpacing:"0.02em",textTransform:"uppercase"},children:["group ",a+1,": ",i.displayName]}),e.jsxs("span",{children:["direction: ",i.direction," / container: ",o(i.containerSize.width,"px")," × ",o(i.containerSize.height,"px")]})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"10px"},children:i.panels.map((s,y)=>{const d=s.measuredPixelSize??s.size,S=s.size,j=o(S,"px"),v=s.percentageSize??(l>0?s.size/l*100:void 0),O=s.measuredPercentageSize!==void 0?s.measuredPercentageSize:l>0?d/l*100:void 0,c=s.collapsed||d<=P.PANEL_SNAP_THRESHOLD,E=s.collapsed?"collapsed":c?"hidden":"visible",z=o(v,"%"),L=o(O,"%"),_=o(d,"px");return e.jsxs("div",{style:N,children:[e.jsxs("div",{style:p,children:[e.jsx("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis"},children:s.id}),e.jsx("span",{style:{...G,backgroundColor:s.collapsed?"rgba(251, 113, 133, 0.25)":c?"rgba(250, 204, 21, 0.25)":"rgba(74, 222, 128, 0.25)",color:s.collapsed?"#fecdd3":c?"#fef08a":"#bbf7d0"},children:E})]}),e.jsxs("div",{style:k,children:[e.jsx("span",{children:"size (state):"}),e.jsx("span",{children:j}),e.jsx("span",{children:"size (measured):"}),e.jsx("span",{children:_}),e.jsx("span",{children:"percentage (state):"}),e.jsx("span",{children:z}),e.jsx("span",{children:"percentage (measured):"}),e.jsx("span",{children:L}),e.jsx("span",{children:"unit:"}),e.jsx("span",{children:s.sizeUnit}),e.jsx("span",{children:"min:"}),e.jsx("span",{children:s.minSize!==void 0?JSON.stringify(s.minSize):"—"}),e.jsx("span",{children:"auto min:"}),e.jsx("span",{children:s.autoMinSize!==void 0?JSON.stringify(s.autoMinSize):"—"}),e.jsx("span",{children:"max:"}),e.jsx("span",{children:s.maxSize!==void 0?JSON.stringify(s.maxSize):"—"}),e.jsx("span",{children:"priority:"}),e.jsx("span",{children:s.pixelAdjustPriority??"—"}),e.jsx("span",{children:"flex priority:"}),e.jsx("span",{children:s.flexAdjustPriority??"—"})]})]},s.id||y)})})]},i.groupId)})})]});return R.createPortal(f,document.body)};exports.GlobalDebugOverlay=u;exports.GlobalDebugOverlayGate=I;

package/dist/GlobalDebugOverlay.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file Global debug overlay for resizable panel groups.
+ * リサイズパネルグループ用のグローバルデバッグオーバーレイ。
+ *
+ * PanelGroup 本体から dynamic import で遅延読み込みされる。
+ * showDebugInfo を使わないアプリのバンドルにオーバーレイ UI とストア購読を含めないための分離。
+ */
+/**
+ * Render the overlay only for the group that currently owns it.
+ * オーバーレイの所有権を持つグループの場合のみ描画するゲート。
+ * 所有権ストアの購読をこの遅延モジュール内へ閉じ込め、非デバッグ利用時の購読を発生させない。
+ */
+export declare const GlobalDebugOverlayGate: ({ groupId }: {
+    groupId: string;
+}) => import("react").JSX.Element | null;
+/**
+ * Render global debug overlay displaying state for all active panel groups.
+ * すべてのアクティブなパネルグループの状態を表示するグローバルデバッグオーバーレイを描画。
+ */
+export declare const GlobalDebugOverlay: () => import('react').ReactPortal | null;
+//# sourceMappingURL=GlobalDebugOverlay.d.ts.map

package/dist/GlobalDebugOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalDebugOverlay.d.ts","sourceRoot":"","sources":["../src/GlobalDebugOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAyGH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,uCAMtE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,0CA2J9B,CAAA"}

package/dist/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAA6C,UAAU,EAAE,MAAM,SAAS,CAAA;AA6FpF;;;GAGG;AACH,eAAO,MAAM,KAAK,mOACwO,UAAU,iCA8dnQ,CAAA"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAA6C,UAAU,EAAE,MAAM,SAAS,CAAA;AA6FpF;;;GAGG;AACH,eAAO,MAAM,KAAK,mOACwO,UAAU,iCA+gBnQ,CAAA"}

package/dist/PanelGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelGroup.d.ts","sourceRoot":"","sources":["../src/PanelGroup.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAwK9C;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAuJhD,CAAA"}
+{"version":3,"file":"PanelGroup.d.ts","sourceRoot":"","sources":["../src/PanelGroup.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AA2E9C;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCA2KhD,CAAA"}

package/dist/PanelResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EASH,KAAK,sBAAsB,EAE9B,MAAM,SAAS,CAAA;AAGhB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iGAA2E,sBAAsB,iCA6jB7H,CAAA"}
+{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAUH,KAAK,sBAAsB,EAE9B,MAAM,SAAS,CAAA;AAGhB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iGAA2E,sBAAsB,iCAkrB7H,CAAA"}

package/dist/debugOverlayStore-Cntyxboe.js

@@ -0,0 +1,141 @@
+import { useSyncExternalStore as x } from "react";
+const D = (s) => JSON.stringify(
+  s.map((e) => ({
+    id: e.id,
+    size: e.size,
+    percentageSize: e.percentageSize ?? null,
+    preferredPercentageSize: e.preferredPercentageSize ?? null,
+    preferredPixelSize: e.preferredPixelSize ?? null,
+    sizeUnit: e.sizeUnit,
+    originalPixelSize: e.originalPixelSize ?? null,
+    minSize: e.minSize ?? null,
+    maxSize: e.maxSize ?? null,
+    autoMinSize: e.autoMinSize ?? null,
+    collapseFromStart: e.collapseFromStart,
+    collapseFromEnd: e.collapseFromEnd,
+    collapsedByDirection: e.collapsedByDirection ?? null,
+    collapsed: e.collapsed ?? !1,
+    sizeBeforeCollapse: e.sizeBeforeCollapse ?? null,
+    preferredPercentageSizeBeforeCollapse: e.preferredPercentageSizeBeforeCollapse ?? null,
+    preferredPixelSizeBeforeCollapse: e.preferredPixelSizeBeforeCollapse ?? null,
+    measuredPixelSizeBeforeCollapse: e.measuredPixelSizeBeforeCollapse ?? null,
+    pixelAdjustPriority: e.pixelAdjustPriority ?? null,
+    flexAdjustPriority: e.flexAdjustPriority ?? null,
+    measuredPixelSize: e.measuredPixelSize ?? null,
+    measuredPercentageSize: e.measuredPercentageSize ?? null
+  }))
+), k = (s) => JSON.stringify(
+  s.map((e) => ({
+    id: e.id,
+    thickness: e.thickness,
+    visible: e.visible,
+    direction: e.direction,
+    startPanelId: e.startPanelId ?? null,
+    endPanelId: e.endPanelId ?? null
+  }))
+), H = () => {
+  const s = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Set();
+  let c = null, v = 0, u = !0, h = [], P = {
+    ownerId: null,
+    groups: h
+  };
+  const y = () => {
+    for (const i of s)
+      i();
+  }, p = () => {
+    u = !0, y();
+  }, z = () => {
+    const i = c;
+    if (i && d.has(i))
+      return !1;
+    c = null;
+    const r = d.values().next();
+    return r.done || (c = r.value), i !== c;
+  };
+  return {
+    subscribe: (i) => (s.add(i), () => {
+      s.delete(i);
+    }),
+    getSnapshot: () => (z() && (u = !0), u && (h = Array.from(e.values()).sort((r, n) => r.index - n.index).map(({ serializedPanels: r, serializedHandles: n, ...S }) => S), P = {
+      ownerId: c,
+      groups: h
+    }, u = !1), P),
+    getOwnerId: () => (z() && (u = !0), c),
+    enableGroup: (i) => {
+      const r = d.size;
+      d.add(i), d.size !== r && z() && p();
+    },
+    disableGroup: (i) => {
+      d.delete(i) && z() && p();
+    },
+    updateGroup: (i, r) => {
+      const n = e.get(i), S = n?.index ?? v++, m = D(r.panels), b = k(r.handles), G = n?.displayName !== r.displayName, C = n?.direction !== r.direction, O = n ? n.containerSize.width !== r.containerSize.width || n.containerSize.height !== r.containerSize.height : !0;
+      let f = n?.serializedPanels !== m;
+      if (!f && n)
+        if (n.panels.length !== r.panels.length)
+          f = !0;
+        else
+          for (let o = 0; o < r.panels.length; o += 1) {
+            const l = n.panels[o], t = r.panels[o];
+            if (!(l && t)) {
+              f = !0;
+              break;
+            }
+            if (l.id !== t.id || l.size !== t.size || l.percentageSize !== t.percentageSize || l.collapsed !== t.collapsed || l.measuredPixelSize !== t.measuredPixelSize || l.measuredPercentageSize !== t.measuredPercentageSize) {
+              f = !0;
+              break;
+            }
+          }
+      let g = n?.serializedHandles !== b;
+      if (!g && n)
+        if (n.handles.length !== r.handles.length)
+          g = !0;
+        else
+          for (let o = 0; o < r.handles.length; o += 1) {
+            const l = n.handles[o], t = r.handles[o];
+            if (!(l && t)) {
+              g = !0;
+              break;
+            }
+            if (l.id !== t.id || l.thickness !== t.thickness || l.visible !== t.visible || l.direction !== t.direction || l.startPanelId !== t.startPanelId || l.endPanelId !== t.endPanelId) {
+              g = !0;
+              break;
+            }
+          }
+      if (!n && r.panels.length === 0 && r.handles.length === 0 || n && !G && !C && !O && !f && !g)
+        return;
+      const w = r.panels.map((o) => ({ ...o })), I = r.handles.map((o) => ({ ...o })), B = { ...r.containerSize };
+      e.set(i, {
+        groupId: i,
+        displayName: r.displayName,
+        direction: r.direction,
+        containerSize: B,
+        panels: w,
+        handles: I,
+        index: S,
+        serializedPanels: m,
+        serializedHandles: b
+      }), p();
+    },
+    removeGroup: (i) => {
+      const r = e.delete(i), n = d.delete(i), S = z();
+      (r || n || S) && p();
+    }
+  };
+}, a = H(), U = () => x(a.subscribe, a.getOwnerId, a.getOwnerId), q = () => x(a.subscribe, a.getSnapshot, a.getSnapshot), K = (s) => {
+  a.enableGroup(s);
+}, L = (s) => {
+  a.disableGroup(s);
+}, Q = (s, e) => {
+  a.updateGroup(s, e);
+}, R = (s) => {
+  a.removeGroup(s);
+};
+export {
+  L as disableDebugOverlayGroup,
+  K as enableDebugOverlayGroup,
+  R as removeDebugOverlayGroup,
+  Q as updateDebugOverlayGroup,
+  U as useDebugOverlayOwnerId,
+  q as useDebugOverlaySnapshot
+};

package/dist/debugOverlayStore-Dkl-fHoa.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),B=s=>JSON.stringify(s.map(e=>({id:e.id,size:e.size,percentageSize:e.percentageSize??null,preferredPercentageSize:e.preferredPercentageSize??null,preferredPixelSize:e.preferredPixelSize??null,sizeUnit:e.sizeUnit,originalPixelSize:e.originalPixelSize??null,minSize:e.minSize??null,maxSize:e.maxSize??null,autoMinSize:e.autoMinSize??null,collapseFromStart:e.collapseFromStart,collapseFromEnd:e.collapseFromEnd,collapsedByDirection:e.collapsedByDirection??null,collapsed:e.collapsed??!1,sizeBeforeCollapse:e.sizeBeforeCollapse??null,preferredPercentageSizeBeforeCollapse:e.preferredPercentageSizeBeforeCollapse??null,preferredPixelSizeBeforeCollapse:e.preferredPixelSizeBeforeCollapse??null,measuredPixelSizeBeforeCollapse:e.measuredPixelSizeBeforeCollapse??null,pixelAdjustPriority:e.pixelAdjustPriority??null,flexAdjustPriority:e.flexAdjustPriority??null,measuredPixelSize:e.measuredPixelSize??null,measuredPercentageSize:e.measuredPercentageSize??null}))),k=s=>JSON.stringify(s.map(e=>({id:e.id,thickness:e.thickness,visible:e.visible,direction:e.direction,startPanelId:e.startPanelId??null,endPanelId:e.endPanelId??null}))),H=()=>{const s=new Set,e=new Map,d=new Set;let c=null,v=0,u=!0,b=[],h={ownerId:null,groups:b};const x=()=>{for(const i of s)i()},f=()=>{u=!0,x()},g=()=>{const i=c;if(i&&d.has(i))return!1;c=null;const r=d.values().next();return r.done||(c=r.value),i!==c};return{subscribe:i=>(s.add(i),()=>{s.delete(i)}),getSnapshot:()=>(g()&&(u=!0),u&&(b=Array.from(e.values()).sort((r,n)=>r.index-n.index).map(({serializedPanels:r,serializedHandles:n,...S})=>S),h={ownerId:c,groups:b},u=!1),h),getOwnerId:()=>(g()&&(u=!0),c),enableGroup:i=>{const r=d.size;d.add(i),d.size!==r&&g()&&f()},disableGroup:i=>{d.delete(i)&&g()&&f()},updateGroup:(i,r)=>{const n=e.get(i),S=n?.index??v++,P=B(r.panels),m=k(r.handles),O=n?.displayName!==r.displayName,G=n?.direction!==r.direction,C=n?n.containerSize.width!==r.containerSize.width||n.containerSize.height!==r.containerSize.height:!0;let z=n?.serializedPanels!==P;if(!z&&n)if(n.panels.length!==r.panels.length)z=!0;else for(let o=0;o<r.panels.length;o+=1){const l=n.panels[o],t=r.panels[o];if(!(l&&t)){z=!0;break}if(l.id!==t.id||l.size!==t.size||l.percentageSize!==t.percentageSize||l.collapsed!==t.collapsed||l.measuredPixelSize!==t.measuredPixelSize||l.measuredPercentageSize!==t.measuredPercentageSize){z=!0;break}}let p=n?.serializedHandles!==m;if(!p&&n)if(n.handles.length!==r.handles.length)p=!0;else for(let o=0;o<r.handles.length;o+=1){const l=n.handles[o],t=r.handles[o];if(!(l&&t)){p=!0;break}if(l.id!==t.id||l.thickness!==t.thickness||l.visible!==t.visible||l.direction!==t.direction||l.startPanelId!==t.startPanelId||l.endPanelId!==t.endPanelId){p=!0;break}}if(!n&&r.panels.length===0&&r.handles.length===0||n&&!O&&!G&&!C&&!z&&!p)return;const w=r.panels.map(o=>({...o})),D=r.handles.map(o=>({...o})),I={...r.containerSize};e.set(i,{groupId:i,displayName:r.displayName,direction:r.direction,containerSize:I,panels:w,handles:D,index:S,serializedPanels:P,serializedHandles:m}),f()},removeGroup:i=>{const r=e.delete(i),n=d.delete(i),S=g();(r||n||S)&&f()}}},a=H(),N=()=>y.useSyncExternalStore(a.subscribe,a.getOwnerId,a.getOwnerId),j=()=>y.useSyncExternalStore(a.subscribe,a.getSnapshot,a.getSnapshot),A=s=>{a.enableGroup(s)},E=s=>{a.disableGroup(s)},F=(s,e)=>{a.updateGroup(s,e)},M=s=>{a.removeGroup(s)};exports.disableDebugOverlayGroup=E;exports.enableDebugOverlayGroup=A;exports.removeDebugOverlayGroup=M;exports.updateDebugOverlayGroup=F;exports.useDebugOverlayOwnerId=N;exports.useDebugOverlaySnapshot=j;

package/dist/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAkF,MAAM,OAAO,CAAA;AAG1H,OAAO,KAAK,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAM5J;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,2DAAmE,eAAe;;;;;;;;;;;+BA0gBvE,eAAe;8BA8ChB,MAAM;+BA6BlC,MAAM,WAAW,MAAM,YAAY,MAAM,aAAa,MAAM;4BAoFhE,MAAM,QAAQ,sBAAsB;0BAapC,MAAM,QAAQ,sBAAsB,eAAe,MAAM;uBAazD,MAAM;0CAWsC,MAAM,eAAe,gBAAgB,GAAG,IAAI;;4CAsD1C,MAAM,eAAe,sBAAsB,GAAG,IAAI;;;;;CA2E5G,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM;;;;;qBAKjC,sBAAsB;mBAOtB,sBAAsB,eAAe,MAAM;mBAO3C,sBAAsB,eAAe,MAAM;CAsBzD,CAAA"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAkF,MAAM,OAAO,CAAA;AAG1H,OAAO,KAAK,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAM5J;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,2DAAmE,eAAe;;;;;;;;;;;+BA8iBvE,eAAe;8BAgDhB,MAAM;+BAmClC,MAAM,WAAW,MAAM,YAAY,MAAM,aAAa,MAAM;4BAoFhE,MAAM,QAAQ,sBAAsB;0BAapC,MAAM,QAAQ,sBAAsB,eAAe,MAAM;uBAazD,MAAM;0CAWsC,MAAM,eAAe,gBAAgB,GAAG,IAAI;;4CAiE1C,MAAM,eAAe,sBAAsB,GAAG,IAAI;;;;;CA2E5G,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM;;;;;qBAKjC,sBAAsB;mBAOtB,sBAAsB,eAAe,MAAM;mBAO3C,sBAAsB,eAAe,MAAM;CAsBzD,CAAA"}