@aiquants/resize-panels 1.7.3 → 1.8.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/LICENSE +21 -0
- package/README.md +21 -2
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/styles/resize-panels.css +1 -1
- package/dist/styles/resize-panels.standalone.css +3 -0
- package/package.json +7 -4
- package/src/GlobalDebugOverlay.tsx +284 -0
- package/src/Panel.tsx +635 -0
- package/src/PanelDebugInfo.tsx +148 -0
- package/src/PanelGroup.tsx +260 -0
- package/src/PanelResizeHandle.tsx +718 -0
- package/src/context.ts +25 -0
- package/src/debugOverlayStore.ts +351 -0
- package/src/hooks.ts +968 -0
- package/src/index.ts +62 -0
- package/src/reducer.ts +1234 -0
- package/src/roundHalfToEven.ts +40 -0
- package/src/styles/components.entry.css +8 -0
- package/src/styles/resize-panels.css +3 -0
- package/src/styles/standalone.entry.css +12 -0
- package/src/types.ts +288 -0
- package/src/utils/simple-logger.ts +186 -0
- package/src/utils.ts +279 -0
- package/dist/resize-panels.css +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 AIQuants
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -175,9 +175,28 @@ export const Example = () => (
|
|
|
175
175
|
|
|
176
176
|
`PanelResizeHandle` と `Panel` の両方で `calculateSnapThreshold` を利用し、コンテナサイズに応じたゼロスナップ閾値を共有しています。`Panel` および `PanelGroup` では、サブピクセル単位の微小なノイズ（0.5px 未満の揺れ）を無視するフィルタリングと、動作停止後に正確な真値を反映する **最終整合メカニズム（デバウンス同期）** を導入しています。これにより、スクロールやリサイズ中のチラつきを抑えつつ、最終的な表示状態と内部状態の完全な一致を保証します。
|
|
177
177
|
|
|
178
|
-
## スタイル
|
|
178
|
+
## スタイル (CSS)
|
|
179
179
|
|
|
180
|
-
|
|
180
|
+
大半のスタイルは JSX ベタ書きの Tailwind ユーティリティで持つため、CSS アーティファクトを **2 種類**配布する。ホストの種類で読み込み方を選ぶ。
|
|
181
|
+
|
|
182
|
+
- **Tailwind v4 ホスト**: components-only ビルドを `layer(components)` で読み込み、JSX ユーティリティは自アプリの Tailwind ビルドにパッケージ `src` をスキャンさせて生成する。
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
/* app tailwind.css */
|
|
186
|
+
@import "@aiquants/resize-panels/styles/resize-panels.css" layer(components);
|
|
187
|
+
@source "../node_modules/@aiquants/resize-panels/src/**/*.{ts,tsx}";
|
|
188
|
+
/* モノレポ: @source "../../../../packages/resize-panels/src/**/*.{ts,tsx}"; */
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
`resize-panels.css` (Artifact A) は手書きコンポーネントクラスのみで、スタイルの大半が JSX ユーティリティのためほぼ空になる。**preflight・`:root` テーマ変数・Tailwind ユーティリティを含まない**。preflight を Tailwind ホストへ流し込むとホストの base 層を破壊するため、Artifact A には同梱しない (preflight は standalone だけが持つ)。standalone ビルドをここで併用してはならない (同名ユーティリティが重複しカスケードが反転する)。
|
|
192
|
+
|
|
193
|
+
- **非 Tailwind ホスト**: 自己完結の standalone ビルドを 1 本だけ読み込む。preflight と全ユーティリティを同梱する。
|
|
194
|
+
|
|
195
|
+
```css
|
|
196
|
+
@import "@aiquants/resize-panels/styles/resize-panels.standalone.css";
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
ダークは `<html>` の `.dark` クラス基準。
|
|
181
200
|
|
|
182
201
|
## デモ
|
|
183
202
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @package @aiquants/resize-panels
|
|
3
|
+
* @description Reusable resizable panel components and utilities for React
|
|
4
|
+
*
|
|
5
|
+
* 再利用可能なリサイズパネルコンポーネントとユーティリティ
|
|
6
|
+
*/
|
|
1
7
|
export { PanelGroupContext, usePanelGroup } from './context';
|
|
2
8
|
export { usePanelControls, useResizablePanels } from './hooks';
|
|
3
9
|
export { Panel } from './Panel';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC5D,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,YAAY,EACR,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,aAAa,EACb,YAAY,EACZ,sBAAsB,EACtB,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,UAAU,EACV,sBAAsB,EACtB,UAAU,EACV,QAAQ,GACX,MAAM,SAAS,CAAA;AAEhB,OAAO,EACH,KAAK,EACL,qBAAqB,EACrB,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,UAAU,GACb,MAAM,SAAS,CAAA;AAEhB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,WAAW,GAAG,IAE1D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,MAAM,KAAG,WAAW,GAAG,IAE/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,IAAI,MAAM,KAAG,WAAW,GAAG,IAEjE,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-orange-100:oklch(95.4% .038 75.164);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-100:oklch(97.3% .071 103.193);--color-lime-100:oklch(96.7% .067 122.328);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-purple-50:oklch(97.7% .014 308.299);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-semibold:600;--leading-relaxed:1.625;--radius-lg:.5rem;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{@layer components;}@layer utilities{.pointer-events-auto{pointer-events:auto}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.bottom-1{bottom:calc(var(--spacing) * 1)}.bottom-2{bottom:calc(var(--spacing) * 2)}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-5{bottom:calc(var(--spacing) * 5)}.bottom-6{bottom:calc(var(--spacing) * 6)}.z-20{z-index:20}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.h-3\/4{height:75%}.h-8{height:calc(var(--spacing) * 8)}.h-12{height:calc(var(--spacing) * 12)}.h-96{height:calc(var(--spacing) * 96)}.h-\[2px\]{height:2px}.h-\[6px\]{height:6px}.h-full{height:100%}.h-screen{height:100vh}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-\[2px\]{width:2px}.w-\[6px\]{width:6px}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.flex-grow,.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-not-allowed{cursor:not-allowed}.cursor-row-resize{cursor:row-resize}.resize{resize:both}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-blue-200{border-color:var(--color-blue-200)}.border-blue-400{border-color:var(--color-blue-400)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-green-200{border-color:var(--color-green-200)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-red-200{border-color:var(--color-red-200)}.border-slate-300{border-color:var(--color-slate-300)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-200\/80{background-color:#bedbffcc}@supports (color:color-mix(in lab, red, red)){.bg-blue-200\/80{background-color:color-mix(in oklab, var(--color-blue-200) 80%, transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-lime-100{background-color:var(--color-lime-100)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-100\/70{background-color:#f1f5f9b3}@supports (color:color-mix(in lab, red, red)){.bg-slate-100\/70{background-color:color-mix(in oklab, var(--color-slate-100) 70%, transparent)}}.bg-slate-600{background-color:var(--color-slate-600)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/70{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.bg-white\/70{background-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-100{background-color:var(--color-yellow-100)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[2px\]{padding-inline:2px}.py-1{padding-block:calc(var(--spacing) * 1)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-\[2px\]{padding-block:2px}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-indigo-700{color:var(--color-indigo-700)}.text-indigo-800{color:var(--color-indigo-800)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.opacity-50{opacity:.5}.shadow-\[0_0_0_1px_rgba\(191\,219\,254\,0\.65\)\,0_1px_4px_rgba\(59\,130\,246\,0\.45\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#bfdbfea6), 0 1px 4px var(--tw-shadow-color,#3b82f673);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.9\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffffe6);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.85\)\,0_1px_3px_rgba\(15\,23\,42\,0\.18\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffffd9), 0 1px 3px var(--tw-shadow-color,#0f172a2e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-blue-300{--tw-ring-color:var(--color-blue-300)}.ring-white\/80{--tw-ring-color:#fffc}@supports (color:color-mix(in lab, red, red)){.ring-white\/80{--tw-ring-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.select-none{-webkit-user-select:none;user-select:none}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:bg-slate-700:is(:where(.group):hover *){background-color:var(--color-slate-700)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-emerald-600:hover{background-color:var(--color-emerald-600)}.hover\:bg-gray-200\/70:hover{background-color:#e5e7ebb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-gray-200\/70:hover{background-color:color-mix(in oklab, var(--color-gray-200) 70%, transparent)}}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-blue-300\/60:active{background-color:#90c5ff99}@supports (color:color-mix(in lab, red, red)){.active\:bg-blue-300\/60:active{background-color:color-mix(in oklab, var(--color-blue-300) 60%, transparent)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-300:disabled{background-color:var(--color-blue-300)}.disabled\:bg-emerald-300:disabled{background-color:var(--color-emerald-300)}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-color-scheme:dark){.dark\:border-slate-600{border-color:var(--color-slate-600)}.dark\:bg-blue-300{background-color:var(--color-blue-300)}.dark\:bg-blue-800\/60{background-color:#193cb899}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-800\/60{background-color:color-mix(in oklab, var(--color-blue-800) 60%, transparent)}}.dark\:bg-blue-900\/70{background-color:#1c398eb3}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/70{background-color:color-mix(in oklab, var(--color-blue-900) 70%, transparent)}}.dark\:bg-slate-200{background-color:var(--color-slate-200)}.dark\:bg-slate-800\/50{background-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-800\/50{background-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.dark\:bg-slate-800\/95{background-color:#1d293df2}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-800\/95{background-color:color-mix(in oklab, var(--color-slate-800) 95%, transparent)}}.dark\:text-slate-200{color:var(--color-slate-200)}.dark\:text-slate-400{color:var(--color-slate-400)}.dark\:shadow-\[0_0_0_1px_rgba\(15\,23\,42\,0\.55\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#0f172a8c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.dark\:shadow-\[0_0_0_1px_rgba\(147\,197\,253\,0\.5\)\,0_1px_4px_rgba\(59\,130\,246\,0\.55\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#93c5fd80), 0 1px 4px var(--tw-shadow-color,#3b82f68c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.dark\:shadow-\[0_0_0_1px_rgba\(148\,163\,184\,0\.45\)\,0_1px_3px_rgba\(2\,6\,23\,0\.55\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#94a3b873), 0 1px 3px var(--tw-shadow-color,#0206178c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.dark\:ring-blue-400{--tw-ring-color:var(--color-blue-400)}.dark\:ring-slate-500\/60{--tw-ring-color:#62748e99}@supports (color:color-mix(in lab, red, red)){.dark\:ring-slate-500\/60{--tw-ring-color:color-mix(in oklab, var(--color-slate-500) 60%, transparent)}}@media (hover:hover){.dark\:group-hover\:bg-slate-100:is(:where(.group):hover *){background-color:var(--color-slate-100)}.dark\:hover\:bg-gray-700\/70:hover{background-color:#364153b3}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-gray-700\/70:hover{background-color:color-mix(in oklab, var(--color-gray-700) 70%, transparent)}}}.dark\:active\:bg-blue-700\/60:active{background-color:#1447e699}@supports (color:color-mix(in lab, red, red)){.dark\:active\:bg-blue-700\/60:active{background-color:color-mix(in oklab, var(--color-blue-700) 60%, transparent)}}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
|
|
2
|
+
@layer components;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
+
/*! @aiquants/resize-panels standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
|
|
3
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--radius-lg:.5rem;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{@layer components;}@layer utilities{.pointer-events-auto{pointer-events:auto}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.z-20{z-index:20}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-8{height:calc(var(--spacing) * 8)}.h-12{height:calc(var(--spacing) * 12)}.h-\[2px\]{height:2px}.h-\[6px\]{height:6px}.h-full{height:100%}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-\[2px\]{width:2px}.w-\[6px\]{width:6px}.w-full{width:100%}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-not-allowed{cursor:not-allowed}.cursor-row-resize{cursor:row-resize}.resize{resize:both}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.overflow-visible{overflow:visible}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-slate-300{border-color:var(--color-slate-300)}.bg-blue-200\/80{background-color:#bedbffcc}@supports (color:color-mix(in lab, red, red)){.bg-blue-200\/80{background-color:color-mix(in oklab, var(--color-blue-200) 80%, transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-slate-100\/70{background-color:#f1f5f9b3}@supports (color:color-mix(in lab, red, red)){.bg-slate-100\/70{background-color:color-mix(in oklab, var(--color-slate-100) 70%, transparent)}}.bg-slate-600{background-color:var(--color-slate-600)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[2px\]{padding-inline:2px}.py-8{padding-block:calc(var(--spacing) * 8)}.py-\[2px\]{padding-block:2px}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.opacity-50{opacity:.5}.shadow-\[0_0_0_1px_rgba\(191\,219\,254\,0\.65\)\,0_1px_4px_rgba\(59\,130\,246\,0\.45\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#bfdbfea6), 0 1px 4px var(--tw-shadow-color,#3b82f673);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.9\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffffe6);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.85\)\,0_1px_3px_rgba\(15\,23\,42\,0\.18\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffffd9), 0 1px 3px var(--tw-shadow-color,#0f172a2e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-blue-300{--tw-ring-color:var(--color-blue-300)}.ring-white\/80{--tw-ring-color:#fffc}@supports (color:color-mix(in lab, red, red)){.ring-white\/80{--tw-ring-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.select-none{-webkit-user-select:none;user-select:none}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:bg-slate-700:is(:where(.group):hover *){background-color:var(--color-slate-700)}.hover\:bg-gray-200\/70:hover{background-color:#e5e7ebb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-gray-200\/70:hover{background-color:color-mix(in oklab, var(--color-gray-200) 70%, transparent)}}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-blue-300\/60:active{background-color:#90c5ff99}@supports (color:color-mix(in lab, red, red)){.active\:bg-blue-300\/60:active{background-color:color-mix(in oklab, var(--color-blue-300) 60%, transparent)}}.dark\:border-slate-600:where(.dark,.dark *){border-color:var(--color-slate-600)}.dark\:bg-blue-300:where(.dark,.dark *){background-color:var(--color-blue-300)}.dark\:bg-blue-800\/60:where(.dark,.dark *){background-color:#193cb899}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-800\/60:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-800) 60%, transparent)}}.dark\:bg-blue-900\/70:where(.dark,.dark *){background-color:#1c398eb3}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-900\/70:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-900) 70%, transparent)}}.dark\:bg-slate-200:where(.dark,.dark *){background-color:var(--color-slate-200)}.dark\:bg-slate-800\/50:where(.dark,.dark *){background-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-800\/50:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.dark\:bg-slate-800\/95:where(.dark,.dark *){background-color:#1d293df2}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-800\/95:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-slate-800) 95%, transparent)}}.dark\:text-slate-200:where(.dark,.dark *){color:var(--color-slate-200)}.dark\:text-slate-400:where(.dark,.dark *){color:var(--color-slate-400)}.dark\:shadow-\[0_0_0_1px_rgba\(15\,23\,42\,0\.55\)\]:where(.dark,.dark *){--tw-shadow:0 0 0 1px var(--tw-shadow-color,#0f172a8c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.dark\:shadow-\[0_0_0_1px_rgba\(147\,197\,253\,0\.5\)\,0_1px_4px_rgba\(59\,130\,246\,0\.55\)\]:where(.dark,.dark *){--tw-shadow:0 0 0 1px var(--tw-shadow-color,#93c5fd80), 0 1px 4px var(--tw-shadow-color,#3b82f68c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.dark\:shadow-\[0_0_0_1px_rgba\(148\,163\,184\,0\.45\)\,0_1px_3px_rgba\(2\,6\,23\,0\.55\)\]:where(.dark,.dark *){--tw-shadow:0 0 0 1px var(--tw-shadow-color,#94a3b873), 0 1px 3px var(--tw-shadow-color,#0206178c);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.dark\:ring-blue-400:where(.dark,.dark *){--tw-ring-color:var(--color-blue-400)}.dark\:ring-slate-500\/60:where(.dark,.dark *){--tw-ring-color:#62748e99}@supports (color:color-mix(in lab, red, red)){.dark\:ring-slate-500\/60:where(.dark,.dark *){--tw-ring-color:color-mix(in oklab, var(--color-slate-500) 60%, transparent)}}@media (hover:hover){.dark\:group-hover\:bg-slate-100:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-slate-100)}.dark\:hover\:bg-gray-700\/70:where(.dark,.dark *):hover{background-color:#364153b3}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-gray-700\/70:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-gray-700) 70%, transparent)}}}.dark\:active\:bg-blue-700\/60:where(.dark,.dark *):active{background-color:#1447e699}@supports (color:color-mix(in lab, red, red)){.dark\:active\:bg-blue-700\/60:where(.dark,.dark *):active{background-color:color-mix(in oklab, var(--color-blue-700) 60%, transparent)}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiquants/resize-panels",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Reusable resizable panel components and utilities for React",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"**/*.css"
|
|
@@ -29,11 +29,14 @@
|
|
|
29
29
|
"require": "./dist/index.cjs",
|
|
30
30
|
"default": "./dist/index.js"
|
|
31
31
|
},
|
|
32
|
-
"./styles/resize-panels.css": "./dist/styles/resize-panels.css"
|
|
32
|
+
"./styles/resize-panels.css": "./dist/styles/resize-panels.css",
|
|
33
|
+
"./styles/resize-panels.standalone.css": "./dist/styles/resize-panels.standalone.css"
|
|
33
34
|
},
|
|
34
35
|
"files": [
|
|
35
36
|
"dist",
|
|
36
|
-
"
|
|
37
|
+
"src",
|
|
38
|
+
"README.md",
|
|
39
|
+
"LICENSE"
|
|
37
40
|
],
|
|
38
41
|
"engines": {
|
|
39
42
|
"node": ">=18.0.0",
|
|
@@ -67,7 +70,7 @@
|
|
|
67
70
|
},
|
|
68
71
|
"scripts": {
|
|
69
72
|
"build": "vite build && pnpm build:css",
|
|
70
|
-
"build:css": "tailwindcss -i src/styles/
|
|
73
|
+
"build:css": "tailwindcss -i src/styles/components.entry.css -o dist/styles/resize-panels.css --minify && tailwindcss -i src/styles/standalone.entry.css -o dist/styles/resize-panels.standalone.css --minify",
|
|
71
74
|
"dev": "vite build --watch",
|
|
72
75
|
"watch": "vite build --watch",
|
|
73
76
|
"typecheck": "tsc --noEmit",
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file Global debug overlay for resizable panel groups.
|
|
3
|
+
* リサイズパネルグループ用のグローバルデバッグオーバーレイ。
|
|
4
|
+
*
|
|
5
|
+
* PanelGroup 本体から dynamic import で遅延読み込みされる。
|
|
6
|
+
* showDebugInfo を使わないアプリのバンドルにオーバーレイ UI とストア購読を含めないための分離。
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import { useState } from "react"
|
|
10
|
+
import { createPortal } from "react-dom"
|
|
11
|
+
import { useDebugOverlayOwnerId, useDebugOverlaySnapshot } from "./debugOverlayStore"
|
|
12
|
+
import { PANEL_SNAP_THRESHOLD } from "./types"
|
|
13
|
+
|
|
14
|
+
const formatNumericValue = (value: number | null | undefined, suffix: string) => {
|
|
15
|
+
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
16
|
+
return "—"
|
|
17
|
+
}
|
|
18
|
+
const clamped = value < 0 ? 0 : value
|
|
19
|
+
return `${clamped.toFixed(8)}${suffix}`
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const OVERLAY_CONTAINER_BASE_STYLE = {
|
|
23
|
+
position: "fixed",
|
|
24
|
+
left: "50%",
|
|
25
|
+
bottom: "20px",
|
|
26
|
+
transform: "translate(-50%, 0)",
|
|
27
|
+
zIndex: 100,
|
|
28
|
+
maxWidth: "min(90vw, 1120px)",
|
|
29
|
+
width: "100%",
|
|
30
|
+
borderRadius: "14px",
|
|
31
|
+
backgroundColor: "rgba(15, 23, 42, 0.72)",
|
|
32
|
+
color: "#e2e8f0",
|
|
33
|
+
fontFamily: "monospace",
|
|
34
|
+
fontSize: "11px",
|
|
35
|
+
lineHeight: 1.6,
|
|
36
|
+
boxShadow: "0 22px 45px rgba(15,23,42,0.45)",
|
|
37
|
+
border: "1px solid rgba(148, 163, 184, 0.22)",
|
|
38
|
+
backdropFilter: "blur(10px)",
|
|
39
|
+
WebkitBackdropFilter: "blur(10px)",
|
|
40
|
+
pointerEvents: "auto",
|
|
41
|
+
overflow: "auto",
|
|
42
|
+
} as const
|
|
43
|
+
|
|
44
|
+
const OVERLAY_HEADER_STYLE = {
|
|
45
|
+
display: "flex",
|
|
46
|
+
justifyContent: "space-between",
|
|
47
|
+
alignItems: "center",
|
|
48
|
+
flexWrap: "wrap",
|
|
49
|
+
gap: "12px",
|
|
50
|
+
} as const
|
|
51
|
+
|
|
52
|
+
const OVERLAY_SUMMARY_STYLE = {
|
|
53
|
+
display: "flex",
|
|
54
|
+
flexDirection: "column",
|
|
55
|
+
gap: "4px",
|
|
56
|
+
} as const
|
|
57
|
+
|
|
58
|
+
const OVERLAY_BUTTON_BASE_STYLE = {
|
|
59
|
+
padding: "6px 10px",
|
|
60
|
+
borderRadius: "9999px",
|
|
61
|
+
border: "1px solid rgba(148, 163, 184, 0.35)",
|
|
62
|
+
color: "#e2e8f0",
|
|
63
|
+
fontWeight: 600,
|
|
64
|
+
fontSize: "10px",
|
|
65
|
+
letterSpacing: "0.03em",
|
|
66
|
+
textTransform: "uppercase" as const,
|
|
67
|
+
cursor: "pointer",
|
|
68
|
+
transition: "background-color 0.18s ease, border-color 0.18s ease",
|
|
69
|
+
} as const
|
|
70
|
+
|
|
71
|
+
const OVERLAY_GROUP_CARD_STYLE = {
|
|
72
|
+
padding: "10px 12px",
|
|
73
|
+
borderRadius: "10px",
|
|
74
|
+
backgroundColor: "rgba(30, 41, 59, 0.55)",
|
|
75
|
+
border: "1px solid rgba(148, 163, 184, 0.18)",
|
|
76
|
+
display: "flex",
|
|
77
|
+
flexDirection: "column",
|
|
78
|
+
gap: "10px",
|
|
79
|
+
} as const
|
|
80
|
+
|
|
81
|
+
const OVERLAY_PANEL_CARD_STYLE = {
|
|
82
|
+
padding: "8px 10px",
|
|
83
|
+
borderRadius: "8px",
|
|
84
|
+
backgroundColor: "rgba(15, 23, 42, 0.55)",
|
|
85
|
+
border: "1px solid rgba(148, 163, 184, 0.16)",
|
|
86
|
+
display: "flex",
|
|
87
|
+
flexDirection: "column",
|
|
88
|
+
gap: "4px",
|
|
89
|
+
} as const
|
|
90
|
+
|
|
91
|
+
const OVERLAY_PANEL_HEADER_STYLE = {
|
|
92
|
+
display: "flex",
|
|
93
|
+
justifyContent: "space-between",
|
|
94
|
+
alignItems: "center",
|
|
95
|
+
gap: "6px",
|
|
96
|
+
} as const
|
|
97
|
+
|
|
98
|
+
const OVERLAY_PANEL_GRID_STYLE = {
|
|
99
|
+
display: "grid",
|
|
100
|
+
gridTemplateColumns: "auto 1fr",
|
|
101
|
+
gap: "2px 10px",
|
|
102
|
+
color: "#e2e8f0",
|
|
103
|
+
} as const
|
|
104
|
+
|
|
105
|
+
const OVERLAY_STATUS_BADGE_STYLE = {
|
|
106
|
+
padding: "2px 6px",
|
|
107
|
+
borderRadius: "9999px",
|
|
108
|
+
fontSize: "10px",
|
|
109
|
+
textTransform: "uppercase" as const,
|
|
110
|
+
} as const
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Render the overlay only for the group that currently owns it.
|
|
114
|
+
* オーバーレイの所有権を持つグループの場合のみ描画するゲート。
|
|
115
|
+
* 所有権ストアの購読をこの遅延モジュール内へ閉じ込め、非デバッグ利用時の購読を発生させない。
|
|
116
|
+
*/
|
|
117
|
+
export const GlobalDebugOverlayGate = ({ groupId }: { groupId: string }) => {
|
|
118
|
+
const ownerId = useDebugOverlayOwnerId()
|
|
119
|
+
if (ownerId !== groupId) {
|
|
120
|
+
return null
|
|
121
|
+
}
|
|
122
|
+
return <GlobalDebugOverlay />
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Render global debug overlay displaying state for all active panel groups.
|
|
127
|
+
* すべてのアクティブなパネルグループの状態を表示するグローバルデバッグオーバーレイを描画。
|
|
128
|
+
*/
|
|
129
|
+
export const GlobalDebugOverlay = () => {
|
|
130
|
+
const debugOverlaySnapshot = useDebugOverlaySnapshot()
|
|
131
|
+
const debugOverlayGroups = debugOverlaySnapshot.groups
|
|
132
|
+
const [isCollapsed, setIsCollapsed] = useState(true)
|
|
133
|
+
|
|
134
|
+
if (debugOverlayGroups.length === 0) {
|
|
135
|
+
return null
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
if (typeof document === "undefined") {
|
|
139
|
+
return null
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const totalPanels = debugOverlayGroups.reduce((sum, group) => sum + group.panels.length, 0)
|
|
143
|
+
const totalHandles = debugOverlayGroups.reduce((sum, group) => sum + (group.handles?.length ?? 0), 0)
|
|
144
|
+
|
|
145
|
+
const toggleCollapsed = () => setIsCollapsed((previous) => !previous)
|
|
146
|
+
|
|
147
|
+
const debugOverlayContent = (
|
|
148
|
+
<div
|
|
149
|
+
style={{
|
|
150
|
+
...OVERLAY_CONTAINER_BASE_STYLE,
|
|
151
|
+
padding: isCollapsed ? "10px 18px" : "14px 18px",
|
|
152
|
+
maxHeight: isCollapsed ? "52px" : "min(65vh, 520px)",
|
|
153
|
+
transition: "max-height 0.24s ease, padding 0.24s ease",
|
|
154
|
+
}}>
|
|
155
|
+
<div
|
|
156
|
+
style={{
|
|
157
|
+
...OVERLAY_HEADER_STYLE,
|
|
158
|
+
marginBottom: isCollapsed ? 0 : "12px",
|
|
159
|
+
}}>
|
|
160
|
+
<div style={OVERLAY_SUMMARY_STYLE}>
|
|
161
|
+
<span
|
|
162
|
+
style={{
|
|
163
|
+
fontWeight: 700,
|
|
164
|
+
fontSize: "12px",
|
|
165
|
+
letterSpacing: "0.03em",
|
|
166
|
+
}}>
|
|
167
|
+
Panel Overview
|
|
168
|
+
</span>
|
|
169
|
+
<span style={{ color: "#cbd5f5" }}>
|
|
170
|
+
groups: {debugOverlayGroups.length} / panels: {totalPanels} / resizers: {totalHandles}
|
|
171
|
+
</span>
|
|
172
|
+
</div>
|
|
173
|
+
<button
|
|
174
|
+
type="button"
|
|
175
|
+
onClick={toggleCollapsed}
|
|
176
|
+
style={{
|
|
177
|
+
...OVERLAY_BUTTON_BASE_STYLE,
|
|
178
|
+
backgroundColor: isCollapsed ? "rgba(59, 130, 246, 0.2)" : "rgba(71, 85, 105, 0.45)",
|
|
179
|
+
}}
|
|
180
|
+
title={isCollapsed ? "Panel Overview を開く" : "Panel Overview を閉じる"}>
|
|
181
|
+
{isCollapsed ? "開く" : "閉じる"}
|
|
182
|
+
</button>
|
|
183
|
+
</div>
|
|
184
|
+
{!isCollapsed && (
|
|
185
|
+
<div
|
|
186
|
+
style={{
|
|
187
|
+
display: "flex",
|
|
188
|
+
flexDirection: "column",
|
|
189
|
+
gap: "12px",
|
|
190
|
+
maxHeight: "45vh",
|
|
191
|
+
overflowY: "auto",
|
|
192
|
+
paddingRight: "6px",
|
|
193
|
+
}}>
|
|
194
|
+
{debugOverlayGroups.map((group, groupIndex) => {
|
|
195
|
+
const axisSize = group.direction === "horizontal" ? group.containerSize.width : group.containerSize.height
|
|
196
|
+
return (
|
|
197
|
+
<div key={group.groupId} style={OVERLAY_GROUP_CARD_STYLE}>
|
|
198
|
+
<div
|
|
199
|
+
style={{
|
|
200
|
+
...OVERLAY_PANEL_HEADER_STYLE,
|
|
201
|
+
flexWrap: "wrap",
|
|
202
|
+
gap: "10px",
|
|
203
|
+
color: "#dbeafe",
|
|
204
|
+
}}>
|
|
205
|
+
<span
|
|
206
|
+
style={{
|
|
207
|
+
fontWeight: 600,
|
|
208
|
+
fontSize: "11px",
|
|
209
|
+
letterSpacing: "0.02em",
|
|
210
|
+
textTransform: "uppercase",
|
|
211
|
+
}}>
|
|
212
|
+
group {groupIndex + 1}: {group.displayName}
|
|
213
|
+
</span>
|
|
214
|
+
<span>
|
|
215
|
+
direction: {group.direction} / container: {formatNumericValue(group.containerSize.width, "px")} × {formatNumericValue(group.containerSize.height, "px")}
|
|
216
|
+
</span>
|
|
217
|
+
</div>
|
|
218
|
+
<div
|
|
219
|
+
style={{
|
|
220
|
+
display: "grid",
|
|
221
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
|
|
222
|
+
gap: "10px",
|
|
223
|
+
}}>
|
|
224
|
+
{group.panels.map((panel, panelIndex) => {
|
|
225
|
+
const measuredPixel = panel.measuredPixelSize ?? panel.size
|
|
226
|
+
const statePixel = panel.size
|
|
227
|
+
const statePixelLabel = formatNumericValue(statePixel, "px")
|
|
228
|
+
const statePercentage = panel.percentageSize ?? (axisSize > 0 ? (panel.size / axisSize) * 100 : undefined)
|
|
229
|
+
const measuredPercentage = panel.measuredPercentageSize !== undefined ? panel.measuredPercentageSize : axisSize > 0 ? (measuredPixel / axisSize) * 100 : undefined
|
|
230
|
+
const isHidden = panel.collapsed || measuredPixel <= PANEL_SNAP_THRESHOLD
|
|
231
|
+
const statusLabel = panel.collapsed ? "collapsed" : isHidden ? "hidden" : "visible"
|
|
232
|
+
const percentageLabel = formatNumericValue(statePercentage, "%")
|
|
233
|
+
const measuredPercentageLabel = formatNumericValue(measuredPercentage, "%")
|
|
234
|
+
const measuredPixelLabel = formatNumericValue(measuredPixel, "px")
|
|
235
|
+
|
|
236
|
+
return (
|
|
237
|
+
<div key={panel.id || panelIndex} style={OVERLAY_PANEL_CARD_STYLE}>
|
|
238
|
+
<div style={OVERLAY_PANEL_HEADER_STYLE}>
|
|
239
|
+
<span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>{panel.id}</span>
|
|
240
|
+
<span
|
|
241
|
+
style={{
|
|
242
|
+
...OVERLAY_STATUS_BADGE_STYLE,
|
|
243
|
+
backgroundColor: panel.collapsed ? "rgba(251, 113, 133, 0.25)" : isHidden ? "rgba(250, 204, 21, 0.25)" : "rgba(74, 222, 128, 0.25)",
|
|
244
|
+
color: panel.collapsed ? "#fecdd3" : isHidden ? "#fef08a" : "#bbf7d0",
|
|
245
|
+
}}>
|
|
246
|
+
{statusLabel}
|
|
247
|
+
</span>
|
|
248
|
+
</div>
|
|
249
|
+
<div style={OVERLAY_PANEL_GRID_STYLE}>
|
|
250
|
+
<span>size (state):</span>
|
|
251
|
+
<span>{statePixelLabel}</span>
|
|
252
|
+
<span>size (measured):</span>
|
|
253
|
+
<span>{measuredPixelLabel}</span>
|
|
254
|
+
<span>percentage (state):</span>
|
|
255
|
+
<span>{percentageLabel}</span>
|
|
256
|
+
<span>percentage (measured):</span>
|
|
257
|
+
<span>{measuredPercentageLabel}</span>
|
|
258
|
+
<span>unit:</span>
|
|
259
|
+
<span>{panel.sizeUnit}</span>
|
|
260
|
+
<span>min:</span>
|
|
261
|
+
<span>{panel.minSize !== undefined ? JSON.stringify(panel.minSize) : "—"}</span>
|
|
262
|
+
<span>auto min:</span>
|
|
263
|
+
<span>{panel.autoMinSize !== undefined ? JSON.stringify(panel.autoMinSize) : "—"}</span>
|
|
264
|
+
<span>max:</span>
|
|
265
|
+
<span>{panel.maxSize !== undefined ? JSON.stringify(panel.maxSize) : "—"}</span>
|
|
266
|
+
<span>priority:</span>
|
|
267
|
+
<span>{panel.pixelAdjustPriority ?? "—"}</span>
|
|
268
|
+
<span>flex priority:</span>
|
|
269
|
+
<span>{panel.flexAdjustPriority ?? "—"}</span>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
)
|
|
273
|
+
})}
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
)
|
|
277
|
+
})}
|
|
278
|
+
</div>
|
|
279
|
+
)}
|
|
280
|
+
</div>
|
|
281
|
+
)
|
|
282
|
+
|
|
283
|
+
return createPortal(debugOverlayContent, document.body)
|
|
284
|
+
}
|