@aiquants/resize-panels 1.8.1 → 1.9.0
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.
- package/README.md +91 -93
- package/dist/{GlobalDebugOverlay-DYCR0FIu.js → GlobalDebugOverlay-Do70T2l6.js} +1 -1
- package/dist/{GlobalDebugOverlay-afs0vF-Q.cjs → GlobalDebugOverlay-sEQN6exo.cjs} +1 -1
- package/dist/PanelResizeHandle.d.ts +1 -1
- package/dist/PanelResizeHandle.d.ts.map +1 -1
- package/dist/index-B6YGX2DH.js +2009 -0
- package/dist/index-DssZUxGw.cjs +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/resize-panels.standalone.css +1 -1
- package/dist/types.d.ts +126 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/PanelResizeHandle.tsx +169 -90
- package/src/index.ts +25 -3
- package/src/types.ts +133 -2
- package/dist/index-BzgId8aQ.js +0 -1972
- package/dist/index-xTV-c0PN.cjs +0 -2
package/README.md
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
1
|
# @aiquants/resize-panels
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Resizable panel layout components for React. Packages the layout management, DOM measurement, and snapping logic previously used in application templates into a reusable library.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Key Features
|
|
6
6
|
|
|
7
|
-
- `PanelGroup
|
|
8
|
-
- `calculateSnapThreshold`
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
- `dir="rtl"
|
|
12
|
-
- `autoSaveId`
|
|
13
|
-
- `showDebugInfo`
|
|
7
|
+
- **Core Components**: `PanelGroup`, `Panel`, and `PanelResizeHandle` synchronized via a central state reducer for layout and DOM measurements.
|
|
8
|
+
- **Snap & Noise Filtering**: Uses `calculateSnapThreshold` and noise filtering to prevent layout jitter and unwanted collapse during resizing.
|
|
9
|
+
- **Directional Collapsible Control**: Declarative `collapsible` settings (`from: 'start' | 'end' | 'both'`) and `usePanelControls` hook support collapsing/expanding via both drag actions and UI controls.
|
|
10
|
+
- **Keyboard & Touch Accessibility**: Handles support mouse/touch dragging as well as **keyboard navigation via arrow keys** (5x step multiplier with Shift). Drag states remain robust under multi-touch or `pointercancel` interruptions.
|
|
11
|
+
- **Full RTL Layout Support**: Under `dir="rtl"`, drag interactions, keyboard shortcuts, and handle positions automatically mirror visual layout directions.
|
|
12
|
+
- **Auto-Persistence**: Set `autoSaveId` to save panel sizes to `localStorage` (debounced after layout stabilization) and restore state on page reloads.
|
|
13
|
+
- **Debug & Visualization**: Enable `showDebugInfo` to inspect panel metrics and constraint violations via `PanelDebugInfo` and a global debug overlay (dynamically lazy-loaded, zero overhead in production bundles).
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Installation
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Monorepo workspace dependency:
|
|
18
18
|
|
|
19
|
-
```
|
|
20
|
-
|
|
19
|
+
```jsonc
|
|
20
|
+
// consumer package.json
|
|
21
|
+
{
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"@aiquants/resize-panels": "workspace:*"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
21
26
|
```
|
|
22
27
|
|
|
23
|
-
|
|
28
|
+
Standard package manager installation:
|
|
24
29
|
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
"dependencies": {
|
|
28
|
-
"@aiquants/resize-panels": "workspace:*"
|
|
29
|
-
}
|
|
30
|
-
}
|
|
30
|
+
```bash
|
|
31
|
+
pnpm add @aiquants/resize-panels
|
|
31
32
|
```
|
|
32
33
|
|
|
33
|
-
##
|
|
34
|
+
## Quick Start
|
|
34
35
|
|
|
35
36
|
```tsx
|
|
36
37
|
import { useId } from "react"
|
|
@@ -42,36 +43,36 @@ export const Example = () => {
|
|
|
42
43
|
return (
|
|
43
44
|
<PanelGroup id={`${baseId}-group`} direction="horizontal" className="h-96">
|
|
44
45
|
<Panel id={`${baseId}-left`} defaultSize={{ value: 200, unit: "pixels" }} className="bg-slate-100">
|
|
45
|
-
|
|
46
|
+
Left Panel
|
|
46
47
|
</Panel>
|
|
47
48
|
<PanelResizeHandle id={`${baseId}-handle`} />
|
|
48
49
|
<Panel id={`${baseId}-right`} defaultSize={{ value: 60, unit: "percentage" }} className="bg-slate-50">
|
|
49
|
-
|
|
50
|
+
Right Panel
|
|
50
51
|
</Panel>
|
|
51
52
|
</PanelGroup>
|
|
52
53
|
)
|
|
53
54
|
}
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
###
|
|
57
|
+
### Enabling Collapsible Panels
|
|
57
58
|
|
|
58
|
-
|
|
59
|
+
Specify `collapsible={{ from: "start" }}` or `collapsible={{ from: "end" }}` on a `Panel` to enable automatic collapse/expand when dragging the corresponding handle to container boundaries. Set `defaultCollapsed` to set initial state to collapsed. Use `collapsible={{ from: "both" }}` to allow collapsing from either edge.
|
|
59
60
|
|
|
60
61
|
```tsx
|
|
61
62
|
<PanelGroup direction="horizontal" className="h-96">
|
|
62
63
|
<Panel id="sidebar" defaultSize={{ value: 240, unit: "pixels" }} collapsible={{ from: "end" }}>
|
|
63
|
-
|
|
64
|
+
Sidebar
|
|
64
65
|
</Panel>
|
|
65
66
|
<PanelResizeHandle id="handle" />
|
|
66
67
|
<Panel id="main" defaultSize={{ value: 60, unit: "percentage" }}>
|
|
67
|
-
|
|
68
|
+
Main Content
|
|
68
69
|
</Panel>
|
|
69
70
|
</PanelGroup>
|
|
70
71
|
```
|
|
71
72
|
|
|
72
|
-
###
|
|
73
|
+
### Programmatic Controls via Hook
|
|
73
74
|
|
|
74
|
-
`usePanelControls(panelId)`
|
|
75
|
+
Use `usePanelControls(panelId)` inside any child component of `PanelGroup` to trigger collapse, expand, or toggle actions:
|
|
75
76
|
|
|
76
77
|
```tsx
|
|
77
78
|
import { PanelGroup, Panel, PanelResizeHandle, usePanelControls } from "@aiquants/resize-panels"
|
|
@@ -84,13 +85,13 @@ const PanelToggleButtons = ({ panelId, label }: { panelId: string; label: string
|
|
|
84
85
|
<div className="flex items-center gap-2">
|
|
85
86
|
<span>{label}</span>
|
|
86
87
|
<button onClick={() => collapse(direction)} disabled={(!canCollapseFromStart && !canCollapseFromEnd) || isCollapsed}>
|
|
87
|
-
|
|
88
|
+
Collapse
|
|
88
89
|
</button>
|
|
89
90
|
<button onClick={() => expand(direction)} disabled={!isCollapsed || (!canCollapseFromStart && !canCollapseFromEnd)}>
|
|
90
|
-
|
|
91
|
+
Expand
|
|
91
92
|
</button>
|
|
92
93
|
<button onClick={() => toggle(direction)} disabled={!canCollapseFromStart && !canCollapseFromEnd}>
|
|
93
|
-
{isCollapsed ? "
|
|
94
|
+
{isCollapsed ? "Switch to Expand" : "Switch to Collapse"}
|
|
94
95
|
</button>
|
|
95
96
|
</div>
|
|
96
97
|
)
|
|
@@ -99,119 +100,116 @@ const PanelToggleButtons = ({ panelId, label }: { panelId: string; label: string
|
|
|
99
100
|
export const Example = () => (
|
|
100
101
|
<PanelGroup direction="horizontal" className="h-96">
|
|
101
102
|
<Panel id="sidebar" defaultSize={{ value: 240, unit: "pixels" }} collapsible={{ from: "end" }}>
|
|
102
|
-
<PanelToggleButtons panelId="sidebar" label="
|
|
103
|
+
<PanelToggleButtons panelId="sidebar" label="Sidebar" />
|
|
103
104
|
</Panel>
|
|
104
105
|
<PanelResizeHandle id="split" />
|
|
105
106
|
<Panel id="main" defaultSize={{ value: 60, unit: "percentage" }}>
|
|
106
|
-
<PanelToggleButtons panelId="details" label="
|
|
107
|
+
<PanelToggleButtons panelId="details" label="Details Panel" />
|
|
107
108
|
</Panel>
|
|
108
109
|
<PanelResizeHandle id="split-right" />
|
|
109
110
|
<Panel id="details" defaultSize={{ value: 40, unit: "percentage" }} collapsible={{ from: "start" }}>
|
|
110
|
-
|
|
111
|
+
Details
|
|
111
112
|
</Panel>
|
|
112
113
|
</PanelGroup>
|
|
113
114
|
)
|
|
114
115
|
```
|
|
115
116
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
## コンポーネント API
|
|
117
|
+
## Component API
|
|
119
118
|
|
|
120
|
-
### PanelGroup
|
|
119
|
+
### PanelGroup Properties
|
|
121
120
|
|
|
122
|
-
|
|
|
121
|
+
| Property | Type | Description |
|
|
123
122
|
| --- | --- | --- |
|
|
124
|
-
| `id` | `string` | `data-panel-group-id`
|
|
125
|
-
| `direction` | `'horizontal' \| 'vertical'` |
|
|
126
|
-
| `className` / `style` | `string` / `React.CSSProperties` |
|
|
127
|
-
| `children` | `React.ReactNode` |
|
|
128
|
-
| `showDebugInfo` | `boolean` | `PanelDebugInfo`
|
|
129
|
-
| `onLayout` | `(sizes: number[]) => void` |
|
|
130
|
-
| `autoSaveId` | `string` |
|
|
123
|
+
| `id` | `string` | Group identifier (reflected in `data-panel-group-id`). Recommended when mounting multiple groups |
|
|
124
|
+
| `direction` | `'horizontal' \| 'vertical'` | Panel layout orientation |
|
|
125
|
+
| `className` / `style` | `string` / `React.CSSProperties` | Additional styling for the container |
|
|
126
|
+
| `children` | `React.ReactNode` | `Panel` and `PanelResizeHandle` child elements |
|
|
127
|
+
| `showDebugInfo` | `boolean` | Enables `PanelDebugInfo` and global debug overlay |
|
|
128
|
+
| `onLayout` | `(sizes: number[]) => void` | Callback emitting updated pixel size arrays on resize/init |
|
|
129
|
+
| `autoSaveId` | `string` | Key used to automatically persist and restore panel sizes in `localStorage` |
|
|
131
130
|
|
|
132
|
-
### Panel
|
|
131
|
+
### Panel Properties
|
|
133
132
|
|
|
134
|
-
|
|
|
133
|
+
| Property | Type | Description |
|
|
135
134
|
| --- | --- | --- |
|
|
136
|
-
| `id` | `string` |
|
|
137
|
-
| `defaultSize` | `{ value: number; unit: 'pixels' \| 'percentage' } \| number` |
|
|
138
|
-
| `minSize` / `maxSize` | `FlexibleSize` |
|
|
139
|
-
| `collapsible` | `{ from: 'start' \| 'end' \| 'both' }` |
|
|
140
|
-
| `defaultCollapsed` | `boolean` |
|
|
141
|
-
| `pixelAdjustPriority` | `number` |
|
|
142
|
-
| `className` / `style` | `string` / `React.CSSProperties` |
|
|
135
|
+
| `id` | `string` | Panel identifier. Explicit string required for SSR consistency |
|
|
136
|
+
| `defaultSize` | `{ value: number; unit: 'pixels' \| 'percentage' } \| number` | Initial panel size (numbers parsed as percentages) |
|
|
137
|
+
| `minSize` / `maxSize` | `FlexibleSize` | Panel size boundaries (pixels or percentages) |
|
|
138
|
+
| `collapsible` | `{ from: 'start' \| 'end' \| 'both' }` | Declarative collapsible edge configuration |
|
|
139
|
+
| `defaultCollapsed` | `boolean` | Whether the panel starts collapsed |
|
|
140
|
+
| `pixelAdjustPriority` | `number` | Priority for assigning excess space to pixel-based panels |
|
|
141
|
+
| `className` / `style` | `string` / `React.CSSProperties` | Panel container styles |
|
|
143
142
|
|
|
144
|
-
### PanelResizeHandle
|
|
143
|
+
### PanelResizeHandle Properties
|
|
145
144
|
|
|
146
|
-
|
|
|
145
|
+
| Property | Type | Description |
|
|
147
146
|
| --- | --- | --- |
|
|
148
|
-
| `id` | `string` |
|
|
149
|
-
| `disabled` | `boolean` | `true`
|
|
150
|
-
| `
|
|
151
|
-
| `
|
|
152
|
-
| `
|
|
153
|
-
|
|
154
|
-
|
|
147
|
+
| `id` | `string` | Handle identifier (reflected in `data-resize-handle-id`) |
|
|
148
|
+
| `disabled` | `boolean` | Disables mouse dragging and keyboard resizing when `true` |
|
|
149
|
+
| `thickness` | `number` | Primary axis thickness of the handle's interactive area in pixels (`8px` default) |
|
|
150
|
+
| `indicator` | `boolean \| PanelResizeHandleIndicatorConfig` | Toggle indicator visibility or provide custom pill/bar dimensions and CSS classes |
|
|
151
|
+
| `indicatorThickness` | `number` | Shorthand for indicator pill wrapper thickness in pixels (`6px` default) |
|
|
152
|
+
| `indicatorLength` | `number` | Shorthand for indicator pill wrapper length in pixels (`48px` horizontal / `80px` vertical default) |
|
|
153
|
+
| `indicatorBarThickness` | `number` | Shorthand for indicator inner bar thickness in pixels (`2px` default) |
|
|
154
|
+
| `indicatorBarLength` | `number` | Shorthand for indicator inner bar length in pixels (`32px` horizontal / `64px` vertical default) |
|
|
155
|
+
| `title` | `string` | Custom tooltip text for the handle element |
|
|
156
|
+
| `onDragging` | `(isDragging: boolean) => void` | Callback triggered on drag start and end (including `pointercancel`) |
|
|
157
|
+
| `className` / `style` | `string` / `React.CSSProperties` | Additional styling for the resize handle |
|
|
158
|
+
| `children` | `React.ReactNode` | Custom indicator element rendered inside handle (overrides default indicator) |
|
|
155
159
|
|
|
156
|
-
|
|
160
|
+
> Handles render as `<button>` elements accessible via arrow keys (`←`/`→` for horizontal, `↑`/`↓` for vertical). Holding `Shift` increases step distance 5x. Under `dir="rtl"`, keyboard and drag directions adjust to visual layout. Dimension options snap to integer pixels via `roundHalfToEven` to eliminate subpixel blurring.
|
|
157
161
|
|
|
158
|
-
|
|
159
|
-
- `usePanelGroup`: コンテキストを直接参照し、パネルリストやレイアウト情報を取得できます。
|
|
160
|
-
- `usePanelControls`: 特定パネルに対する折りたたみ / 展開操作を提供します。
|
|
161
|
-
- `saveLayout` と `loadLayout`: 任意のタイミングでレイアウトを永続化 / 復元できます。
|
|
162
|
-
- `getPanelElement`, `getPanelGroupElement`, `getResizeHandleElement`: `data-*` 属性をもとに DOM 要素を取得します。
|
|
162
|
+
## Hooks & Utilities
|
|
163
163
|
|
|
164
|
-
|
|
164
|
+
- `useResizablePanels`: Internal hook used by `PanelGroup`. Useful for building custom panel containers.
|
|
165
|
+
- `usePanelGroup`: Context accessor for panel lists and layout state.
|
|
166
|
+
- `usePanelControls`: Provides `collapse`, `expand`, and `toggle` operations for a specified panel ID.
|
|
167
|
+
- `saveLayout` & `loadLayout`: Programmatically persist or restore layout state.
|
|
168
|
+
- `getPanelElement`, `getPanelGroupElement`, `getResizeHandleElement`: DOM element query helpers via `data-*` attributes.
|
|
165
169
|
|
|
166
|
-
|
|
170
|
+
## Layout Persistence
|
|
167
171
|
|
|
168
|
-
|
|
172
|
+
When `autoSaveId` is provided to `PanelGroup`, panel dimensions are saved to `localStorage` (debounced by 200ms after `ResizeObserver` stabilization). Re-opening the page automatically applies `loadLayout(autoSaveId)` to restore both pixel- and percentage-based panels.
|
|
169
173
|
|
|
170
|
-
|
|
174
|
+
## Debugging & Inspection
|
|
171
175
|
|
|
172
|
-
|
|
176
|
+
Enabling `showDebugInfo` on `PanelGroup` renders overlay inspection metrics over each `Panel` (showing collapse status, measured dimensions, and percentages) along with a global container inspector listing handle thickness (8px default) and constraint alerts. Debug components are lazily imported (`React.lazy`) and excluded from production builds when unused.
|
|
173
177
|
|
|
174
|
-
##
|
|
178
|
+
## Styling (CSS)
|
|
175
179
|
|
|
176
|
-
|
|
180
|
+
The package provides two CSS consumption options:
|
|
177
181
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
大半のスタイルは JSX ベタ書きの Tailwind ユーティリティで持つため、CSS アーティファクトを **2 種類**配布する。ホストの種類で読み込み方を選ぶ。
|
|
181
|
-
|
|
182
|
-
- **Tailwind v4 ホスト**: components-only ビルドを `layer(components)` で読み込み、JSX ユーティリティは自アプリの Tailwind ビルドにパッケージ `src` をスキャンさせて生成する。
|
|
182
|
+
- **Tailwind v4 Host**: Import components-only styles into `layer(components)` and configure Tailwind to scan package source files:
|
|
183
183
|
|
|
184
184
|
```css
|
|
185
185
|
/* app tailwind.css */
|
|
186
186
|
@import "@aiquants/resize-panels/styles/resize-panels.css" layer(components);
|
|
187
187
|
@source "../node_modules/@aiquants/resize-panels/src/**/*.{ts,tsx}";
|
|
188
|
-
/*
|
|
188
|
+
/* monorepo: @source "../../../../packages/resize-panels/src/**/*.{ts,tsx}"; */
|
|
189
189
|
```
|
|
190
190
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
- **非 Tailwind ホスト**: 自己完結の standalone ビルドを 1 本だけ読み込む。preflight と全ユーティリティを同梱する。
|
|
191
|
+
- **Non-Tailwind Host**: Import the self-contained standalone CSS bundle:
|
|
194
192
|
|
|
195
193
|
```css
|
|
196
194
|
@import "@aiquants/resize-panels/styles/resize-panels.standalone.css";
|
|
197
195
|
```
|
|
198
196
|
|
|
199
|
-
|
|
197
|
+
Dark mode activates based on the `.dark` class on `<html>`.
|
|
200
198
|
|
|
201
|
-
##
|
|
199
|
+
## Demo App
|
|
202
200
|
|
|
203
|
-
|
|
201
|
+
Run the included workspace demo app:
|
|
204
202
|
|
|
205
203
|
```bash
|
|
206
204
|
pnpm --filter '@aiquants/resize-panels-demo' dev
|
|
207
205
|
```
|
|
208
206
|
|
|
209
|
-
`http://localhost:5175`
|
|
207
|
+
Open `http://localhost:5175` to test interactive layouts.
|
|
210
208
|
|
|
211
|
-
##
|
|
209
|
+
## Build
|
|
212
210
|
|
|
213
211
|
```bash
|
|
214
212
|
pnpm --filter '@aiquants/resize-panels' build
|
|
215
213
|
```
|
|
216
214
|
|
|
217
|
-
|
|
215
|
+
Outputs built artifacts to `dist/`.
|
|
@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState as A } from "react";
|
|
3
3
|
import { createPortal as P } from "react-dom";
|
|
4
4
|
import { useDebugOverlayOwnerId as R, useDebugOverlaySnapshot as T } from "./debugOverlayStore-Cntyxboe.js";
|
|
5
|
-
import { P as Y } from "./index-
|
|
5
|
+
import { P as Y } from "./index-B6YGX2DH.js";
|
|
6
6
|
const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s < 0 ? 0 : s).toFixed(8)}${n}`, w = {
|
|
7
7
|
position: "fixed",
|
|
8
8
|
left: "50%",
|
|
@@ -1 +1 @@
|
|
|
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-
|
|
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-DssZUxGw.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;
|
|
@@ -3,5 +3,5 @@ import { PanelResizeHandleProps } from './types';
|
|
|
3
3
|
* Render an interactive divider that manages adjacent panel resizing gestures.
|
|
4
4
|
* 隣接パネルのリサイズ操作を管理するインタラクティブなディバイダーを描画するコンポーネント。
|
|
5
5
|
*/
|
|
6
|
-
export declare const PanelResizeHandle: import('react').MemoExoticComponent<(
|
|
6
|
+
export declare const PanelResizeHandle: import('react').MemoExoticComponent<(props: PanelResizeHandleProps) => import("react").JSX.Element>;
|
|
7
7
|
//# sourceMappingURL=PanelResizeHandle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;
|
|
1
|
+
{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAgBH,KAAK,sBAAsB,EAE9B,MAAM,SAAS,CAAA;AAyChB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8CAAgB,sBAAsB,iCAotBlE,CAAA"}
|