@aiquants/drag-drop-panels 0.7.1 → 0.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.
Files changed (33) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +32 -10
  3. package/dist/drag-drop/hooks/useCustomDragHandlers.d.ts.map +1 -1
  4. package/dist/index.es.js +88 -88
  5. package/dist/index.umd.js +2 -2
  6. package/dist/styles/drag-drop-panels.standalone.css +3 -0
  7. package/package.json +14 -7
  8. package/src/DragDropLayout.tsx +751 -0
  9. package/src/drag-drop/ColumnControlPanel.tsx +123 -0
  10. package/src/drag-drop/ColumnInsertPanel.tsx +106 -0
  11. package/src/drag-drop/DebugComponents.tsx +222 -0
  12. package/src/drag-drop/DebugControlPanel.tsx +200 -0
  13. package/src/drag-drop/DebugOverlay.tsx +250 -0
  14. package/src/drag-drop/DragDropLayout.css +130 -0
  15. package/src/drag-drop/ResizeHandle.tsx +208 -0
  16. package/src/drag-drop/ResponsiveControl.tsx +33 -0
  17. package/src/drag-drop/hooks/dragGhostScale.spec.tsx +153 -0
  18. package/src/drag-drop/hooks/useColumnLayout.ts +457 -0
  19. package/src/drag-drop/hooks/useCustomDragHandlers.tsx +333 -0
  20. package/src/drag-drop/hooks/useDragDropColumns.tsx +446 -0
  21. package/src/drag-drop/hooks/useDragDropState.tsx +200 -0
  22. package/src/drag-drop/hooks/useFitScale.ts +48 -0
  23. package/src/drag-drop/hooks/useMouseTracking.tsx +102 -0
  24. package/src/drag-drop/hooks/useNormalDragHandlers.tsx +427 -0
  25. package/src/drag-drop/hooks/usePanelManagement.tsx +238 -0
  26. package/src/drag-drop/hooks/useResponsiveColumns.ts +210 -0
  27. package/src/drag-drop/resize-handle.css +71 -0
  28. package/src/drag-drop/types.ts +248 -0
  29. package/src/drag-drop/utils/columnIdUtils.ts +104 -0
  30. package/src/drag-drop/utils/edgeScrollUtils.ts +124 -0
  31. package/src/drag-drop/utils/simple-logger.ts +162 -0
  32. package/src/index.ts +60 -0
  33. package/src/styles/standalone.entry.css +27 -0
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
@@ -5,7 +5,6 @@
5
5
  ## パッケージ情報
6
6
 
7
7
  - **名前**: `@aiquants/drag-drop-panels`
8
- - **バージョン**: 0.1.0
9
8
  - **場所**: `/workspace/packages/drag-drop-panels`
10
9
 
11
10
  ## 機能
@@ -36,12 +35,34 @@ pnpm install
36
35
 
37
36
  ## 使用方法
38
37
 
38
+ ### CSS の読み込み
39
+
40
+ 構造系スタイル (レイアウト・リサイズハンドル) は全ホスト共通で読み込む。素のプレーン CSS (実質 Artifact A) で、`:root` テーマ変数・Tailwind ユーティリティ・preflight を含まない:
41
+
42
+ - `@aiquants/drag-drop-panels/css` (`./css` export、`dist/drag-drop-panels.css`) - レイアウト構造系スタイル (JS から import するか `?url` でルート単位に読み込む)
43
+
44
+ JSX ベタ書きの Tailwind ユーティリティはホストの種類で読み込み方が分かれる:
45
+
46
+ - **Tailwind v4 ホスト**: パッケージ `src` をスキャン対象に追加し、自アプリの単一ビルドの正準順序でユーティリティを生成する。事前生成 CSS の `@import` 併用は不可 — ホスト側と同名ユーティリティが重複し、base とバリアントの勝敗が反転する。
47
+
48
+ ```css
49
+ /* app tailwind.css */
50
+ @source "../node_modules/@aiquants/drag-drop-panels/src/**/*.{ts,tsx}";
51
+ /* モノレポ: @source "../../../../packages/drag-drop-panels/src/**/*.{ts,tsx}"; */
52
+ ```
53
+
54
+ - **非 Tailwind ホスト**: 自己完結の standalone ビルド (`pnpm run build:css` → `dist/styles/drag-drop-panels.standalone.css`) を 1 本だけ import する。構造系 CSS と全ユーティリティを同梱するため `./css` の別読み込みは不要。ダークは `<html>` の `.dark` クラス基準。
55
+
56
+ ```css
57
+ @import "@aiquants/drag-drop-panels/styles/drag-drop-panels.standalone.css";
58
+ ```
59
+
39
60
  ### 基本的な使用例
40
61
 
41
62
  ```tsx
42
63
  import { DragDropLayout } from "@aiquants/drag-drop-panels"
43
64
  import type { ColumnConfig, DragOverPosition } from "@aiquants/drag-drop-panels"
44
- import "@aiquants/drag-drop-panels/dist/drag-drop-panels.css"
65
+ import "@aiquants/drag-drop-panels/css"
45
66
 
46
67
  function MyApp() {
47
68
  // カラム設定
@@ -95,16 +116,16 @@ function MyApp() {
95
116
 
96
117
  1. `quants-react-router` を起動:
97
118
 
98
- ```bash
99
- cd /workspace/apps/quants-react-router
100
- pnpm dev
101
- ```
119
+ ```bash
120
+ cd /workspace/apps/quants-react-router
121
+ pnpm dev
122
+ ```
102
123
 
103
124
  2. ブラウザで以下の URL にアクセス:
104
125
 
105
- ```
106
- http://localhost:5173/drag-drop-demo
107
- ```
126
+ ```text
127
+ http://localhost:5173/drag-drop-demo
128
+ ```
108
129
 
109
130
  ### デモページの機能
110
131
 
@@ -167,7 +188,8 @@ pnpm build
167
188
  - `dist/index.es.js` - ES モジュール
168
189
  - `dist/index.umd.js` - UMD モジュール
169
190
  - `dist/index.d.ts` - TypeScript 型定義
170
- - `dist/drag-drop-panels.css` - スタイルシート
191
+ - `dist/drag-drop-panels.css` - 構造系スタイルシート (`./css` export、実質 Artifact A)
192
+ - `dist/styles/drag-drop-panels.standalone.css` - 非 Tailwind ホスト向けの自己完結 CSS (構造系 + 全ユーティリティ、`./styles/drag-drop-panels.standalone.css` export、`pnpm run build:css` で生成)
171
193
 
172
194
  ## 開発
173
195
 
package/dist/drag-drop/hooks/useCustomDragHandlers.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useCustomDragHandlers.d.ts","sourceRoot":"","sources":["../../../src/drag-drop/hooks/useCustomDragHandlers.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useCustomDragHandlers.d.ts","sourceRoot":"","sources":["../../../src/drag-drop/hooks/useCustomDragHandlers.tsx"],"names":[],"mappings":"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"}
package/dist/index.es.js CHANGED
@@ -39,7 +39,7 @@ function ht() {
39
39
  return "Profiler";
40
40
  case R:
41
41
  return "StrictMode";
42
- case q:
42
+ case U:
43
43
  return "Suspense";
44
44
  case O:
45
45
  return "SuspenseList";
@@ -220,7 +220,7 @@ React keys must be passed directly to JSX without using spread:
220
220
  function M(s) {
221
221
  return typeof s == "object" && s !== null && s.$$typeof === a;
222
222
  }
223
- var y = Fe, a = /* @__PURE__ */ Symbol.for("react.transitional.element"), j = /* @__PURE__ */ Symbol.for("react.portal"), D = /* @__PURE__ */ Symbol.for("react.fragment"), R = /* @__PURE__ */ Symbol.for("react.strict_mode"), L = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), Z = /* @__PURE__ */ Symbol.for("react.context"), Y = /* @__PURE__ */ Symbol.for("react.forward_ref"), q = /* @__PURE__ */ Symbol.for("react.suspense"), O = /* @__PURE__ */ Symbol.for("react.suspense_list"), _ = /* @__PURE__ */ Symbol.for("react.memo"), f = /* @__PURE__ */ Symbol.for("react.lazy"), g = /* @__PURE__ */ Symbol.for("react.activity"), C = /* @__PURE__ */ Symbol.for("react.client.reference"), W = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, p = Array.isArray, m = console.createTask ? console.createTask : function() {
223
+ var y = Fe, a = /* @__PURE__ */ Symbol.for("react.transitional.element"), j = /* @__PURE__ */ Symbol.for("react.portal"), D = /* @__PURE__ */ Symbol.for("react.fragment"), R = /* @__PURE__ */ Symbol.for("react.strict_mode"), L = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), Z = /* @__PURE__ */ Symbol.for("react.context"), Y = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), O = /* @__PURE__ */ Symbol.for("react.suspense_list"), _ = /* @__PURE__ */ Symbol.for("react.memo"), f = /* @__PURE__ */ Symbol.for("react.lazy"), g = /* @__PURE__ */ Symbol.for("react.activity"), C = /* @__PURE__ */ Symbol.for("react.client.reference"), W = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, p = Array.isArray, m = console.createTask ? console.createTask : function() {
224
224
  return null;
225
225
  };
226
226
  y = {
@@ -392,7 +392,7 @@ const ft = ({ config: r, panelId: t, sizeInfo: n, onSizeInfoClick: l }) => r.sho
392
392
  )
393
393
  ) : null, E = (r, t, ...n) => {
394
394
  (r.logLevel ?? 0) >= t && ke.info(...n);
395
- }, Ie = Fe.memo(({ index: r, columnIndex: t, isDragging: n, dragOverPosition: l, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h }) => {
395
+ }, qe = Fe.memo(({ index: r, columnIndex: t, isDragging: n, dragOverPosition: l, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h }) => {
396
396
  const S = o && o.columnIndex === t && (o.panelIndex === r || o.panelIndex + 1 === r), v = !S && l?.columnIndex === t && l?.insertIndex === r, $ = F(null), [M, y] = te(null), a = n || (h?.isActive ?? !1);
397
397
  return K(() => {
398
398
  if ($.current) {
@@ -453,8 +453,8 @@ const ft = ({ config: r, panelId: t, sizeInfo: n, onSizeInfoClick: l }) => r.sho
453
453
  }
454
454
  );
455
455
  });
456
- Ie.displayName = "InsertPlaceholder";
457
- const Ue = ({ columnIndex: r, isDragging: t, dragOverPosition: n, children: l, config: o }) => {
456
+ qe.displayName = "InsertPlaceholder";
457
+ const Ie = ({ columnIndex: r, isDragging: t, dragOverPosition: n, children: l, config: o }) => {
458
458
  const i = F(null), [u, c] = te(null);
459
459
  return K(() => {
460
460
  if (i.current && t) {
@@ -514,7 +514,7 @@ const Ue = ({ columnIndex: r, isDragging: t, dragOverPosition: n, children: l, c
514
514
  ] })
515
515
  ] });
516
516
  };
517
- Ue.displayName = "DropZoneDebugOverlay";
517
+ Ie.displayName = "DropZoneDebugOverlay";
518
518
  const xt = 0.25, gt = typeof window < "u" ? Ee : K, pt = (r, t = xt) => {
519
519
  const n = F(null), [l, o] = te(1);
520
520
  return gt(() => {
@@ -534,7 +534,7 @@ const xt = 0.25, gt = typeof window < "u" ? Ee : K, pt = (r, t = xt) => {
534
534
  const c = new ResizeObserver(u);
535
535
  return c.observe(i), () => c.disconnect();
536
536
  }, [r, t]), { containerRef: n, scale: l };
537
- }, qe = ({ columnId: r, onResizeStart: t, onResize: n, onResizeEnd: l, isResizing: o = !1, position: i = "right", className: u = "", debug: c = {} }) => {
537
+ }, Ue = ({ columnId: r, onResizeStart: t, onResize: n, onResizeEnd: l, isResizing: o = !1, position: i = "right", className: u = "", debug: c = {} }) => {
538
538
  const h = F(!1), S = F(null);
539
539
  K(() => {
540
540
  !o && h.current && (E(c, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", r), h.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
@@ -598,7 +598,7 @@ const xt = 0.25, gt = typeof window < "u" ? Ee : K, pt = (r, t = xt) => {
598
598
  y && (y.style.setProperty("--column-width", `${t}px`), y.style.setProperty("--column-min-width", `${n}px`), y.style.setProperty("--column-max-width", `${l}px`));
599
599
  }, [r, t, n, l]), /* @__PURE__ */ e.jsxs("div", { className: M, "data-column-id": r, "data-width": t, "data-min-width": n, "data-max-width": l, children: [
600
600
  $,
601
- h && /* @__PURE__ */ e.jsx(qe, { columnId: r, onResizeStart: o, onResize: i, onResizeEnd: u, isResizing: c, position: "right", debug: v }),
601
+ h && /* @__PURE__ */ e.jsx(Ue, { columnId: r, onResizeStart: o, onResize: i, onResizeEnd: u, isResizing: c, position: "right", debug: v }),
602
602
  v.showPanelSizes && /* @__PURE__ */ e.jsxs("div", { className: "column-debug-size", children: [
603
603
  t,
604
604
  "px",
@@ -616,7 +616,7 @@ const xt = 0.25, gt = typeof window < "u" ? Ee : K, pt = (r, t = xt) => {
616
616
  onDragLeave: u,
617
617
  debugConfig: c,
618
618
  customDrag: h
619
- }) => /* @__PURE__ */ e.jsx(Ie, { index: r, columnIndex: t, isDragging: n, dragOverPosition: l, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h })
619
+ }) => /* @__PURE__ */ e.jsx(qe, { index: r, columnIndex: t, isDragging: n, dragOverPosition: l, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h })
620
620
  );
621
621
  Ce.displayName = "LocalInsertPlaceholder";
622
622
  const Ct = ({
@@ -643,7 +643,7 @@ const Ct = ({
643
643
  onTouchMove: z,
644
644
  onTouchEnd: Z,
645
645
  debugConfig: Y,
646
- panelSizes: q,
646
+ panelSizes: U,
647
647
  setPanelRef: O,
648
648
  enableResize: _ = !1,
649
649
  columnWidths: f,
@@ -702,11 +702,11 @@ const Ct = ({
702
702
  return document.addEventListener("keydown", P), () => document.removeEventListener("keydown", P);
703
703
  }, [s, T]), Ee(() => {
704
704
  const P = /* @__PURE__ */ new Map();
705
- Object.keys(de.current).forEach((I) => {
706
- const ne = de.current[I];
705
+ Object.keys(de.current).forEach((q) => {
706
+ const ne = de.current[q];
707
707
  if (ne) {
708
708
  const ue = ne.getBoundingClientRect();
709
- P.set(I, {
709
+ P.set(q, {
710
710
  rect: ue,
711
711
  height: ne.offsetHeight,
712
712
  width: ne.offsetWidth
@@ -714,16 +714,16 @@ const Ct = ({
714
714
  }
715
715
  });
716
716
  const V = De.current, ee = 300, he = /* @__PURE__ */ new Set();
717
- Object.values(n).forEach((I) => {
718
- I.forEach((ne) => {
717
+ Object.values(n).forEach((q) => {
718
+ q.forEach((ne) => {
719
719
  he.add(ne);
720
720
  });
721
- }), new Set(V.keys()).forEach((I) => {
722
- he.has(I) || (E(Q.current, 1, "パネル削除検出 - クリーンアップ:", I), V.delete(I), de.current[I] && delete de.current[I]);
723
- }), P.forEach((I, ne) => {
721
+ }), new Set(V.keys()).forEach((q) => {
722
+ he.has(q) || (E(Q.current, 1, "パネル削除検出 - クリーンアップ:", q), V.delete(q), de.current[q] && delete de.current[q]);
723
+ }), P.forEach((q, ne) => {
724
724
  const ue = V.get(ne);
725
725
  if (ue) {
726
- const J = ue.rect.left - I.rect.left, me = ue.rect.top - I.rect.top;
726
+ const J = ue.rect.left - q.rect.left, me = ue.rect.top - q.rect.top;
727
727
  if (J !== 0 || me !== 0) {
728
728
  E(Q.current, 2, "パネル移動検出 - アニメーション開始:", ne, { dx: J, dy: me });
729
729
  const oe = de.current[ne];
@@ -758,15 +758,15 @@ const Ct = ({
758
758
  const V = Ne[P];
759
759
  if (!V)
760
760
  return E(Q.current, 1, `Panel config not found for panelId: ${P}`), null;
761
- const ee = V.component, he = V.title, ce = i.draggedPanel === P, I = h[P] || "normal";
761
+ const ee = V.component, he = V.title, ce = i.draggedPanel === P, q = h[P] || "normal";
762
762
  E(Q.current, 2, `🎨 renderPanel - ${P}:`, {
763
763
  panelId: P,
764
- dragMode: I,
764
+ dragMode: q,
765
765
  timestamp: (/* @__PURE__ */ new Date()).toISOString()
766
766
  });
767
- const ne = (U) => {
768
- de.current[P] = U, O && O(P, U), U && Y.showPanelSizes && requestAnimationFrame(() => {
769
- const ve = U.getBoundingClientRect(), Re = window.getComputedStyle(U);
767
+ const ne = (I) => {
768
+ de.current[P] = I, O && O(P, I), I && Y.showPanelSizes && requestAnimationFrame(() => {
769
+ const ve = I.getBoundingClientRect(), Re = window.getComputedStyle(I);
770
770
  E(Q.current, 1, `Panel ${P} mounted with size:`, {
771
771
  width: ve.width,
772
772
  height: ve.height,
@@ -776,10 +776,10 @@ const Ct = ({
776
776
  maxHeight: Re.maxHeight
777
777
  });
778
778
  });
779
- }, ue = q[P], J = s === P, me = !!T, oe = () => T?.(J ? null : P), pe = J ? { position: "fixed", inset: 0, zIndex: 50, minHeight: 0, maxHeight: "none" } : {
779
+ }, ue = U[P], J = s === P, me = !!T, oe = () => T?.(J ? null : P), pe = J ? { position: "fixed", inset: 0, zIndex: 50, minHeight: 0, maxHeight: "none" } : {
780
780
  minHeight: V.minHeight ?? "200px",
781
781
  maxHeight: V.maxHeight ?? "500px"
782
- }, be = H === "header", Oe = I === "normal" && !be && !J, Te = I === "normal" && be && !J, Ae = ce ? "cursor-grabbing" : "cursor-grab", Me = `panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${I === "custom" ? "select-none" : ""}`, Qe = J ? (
782
+ }, be = H === "header", Oe = q === "normal" && !be && !J, Te = q === "normal" && be && !J, Ae = ce ? "cursor-grabbing" : "cursor-grab", Me = `panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${q === "custom" ? "select-none" : ""}`, Qe = J ? (
783
783
  // 最大化中: 角丸・ホバー演出・grab カーソル無し、背景は不透過寄りで下のレイアウトを遮蔽
784
784
  `${Me} rounded-none bg-white/95 p-4 ${d}`
785
785
  ) : `${Me} rounded-2xl bg-white/80 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${be ? "" : Ae} ${d}`;
@@ -794,11 +794,11 @@ const Ct = ({
794
794
  "data-maximized": J || void 0,
795
795
  role: "presentation",
796
796
  draggable: Oe,
797
- onDragStart: (U) => Oe && S(U, P),
797
+ onDragStart: (I) => Oe && S(I, P),
798
798
  onDragEnd: v,
799
- onClick: (U) => D?.(U, P),
800
- onMouseDown: (U) => R?.(U, P),
801
- onTouchStart: (U) => L?.(U, P),
799
+ onClick: (I) => D?.(I, P),
800
+ onMouseDown: (I) => R?.(I, P),
801
+ onTouchStart: (I) => L?.(I, P),
802
802
  onTouchMove: z,
803
803
  onTouchEnd: Z,
804
804
  style: pe,
@@ -809,38 +809,38 @@ const Ct = ({
809
809
  {
810
810
  className: `group relative mb-3 flex items-center justify-between ${be && !J ? Ae : ""}`,
811
811
  draggable: Te,
812
- onDragStart: (U) => Te && S(U, P),
813
- onDoubleClick: me ? (U) => {
814
- U.stopPropagation(), oe();
812
+ onDragStart: (I) => Te && S(I, P),
813
+ onDoubleClick: me ? (I) => {
814
+ I.stopPropagation(), oe();
815
815
  } : void 0,
816
816
  children: [
817
817
  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2", children: [
818
818
  /* @__PURE__ */ e.jsx("h3", { className: "font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900", children: he }),
819
- I === "custom" && /* @__PURE__ */ e.jsx("span", { className: "rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs", children: "Custom" })
819
+ q === "custom" && /* @__PURE__ */ e.jsx("span", { className: "rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs", children: "Custom" })
820
820
  ] }),
821
821
  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
822
822
  /* @__PURE__ */ e.jsx(
823
823
  "button",
824
824
  {
825
825
  type: "button",
826
- onClick: (U) => {
827
- U.stopPropagation(), b && b(P);
826
+ onClick: (I) => {
827
+ I.stopPropagation(), b && b(P);
828
828
  },
829
- onKeyDown: (U) => {
830
- (U.key === "Enter" || U.key === " ") && (U.preventDefault(), U.stopPropagation(), b && b(P));
829
+ onKeyDown: (I) => {
830
+ (I.key === "Enter" || I.key === " ") && (I.preventDefault(), I.stopPropagation(), b && b(P));
831
831
  },
832
832
  tabIndex: 0,
833
- className: `cursor-pointer rounded p-1 text-xs transition-colors ${I === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,
834
- title: I === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え",
835
- children: I === "custom" ? /* @__PURE__ */ e.jsx(nt, { className: "h-4 w-4" }) : /* @__PURE__ */ e.jsx(rt, { className: "h-4 w-4" })
833
+ className: `cursor-pointer rounded p-1 text-xs transition-colors ${q === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,
834
+ title: q === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え",
835
+ children: q === "custom" ? /* @__PURE__ */ e.jsx(nt, { className: "h-4 w-4" }) : /* @__PURE__ */ e.jsx(rt, { className: "h-4 w-4" })
836
836
  }
837
837
  ),
838
838
  !J && /* @__PURE__ */ e.jsx(
839
839
  "button",
840
840
  {
841
841
  type: "button",
842
- onClick: (U) => {
843
- U.stopPropagation(), o({
842
+ onClick: (I) => {
843
+ I.stopPropagation(), o({
844
844
  ...l,
845
845
  [P]: !1
846
846
  });
@@ -854,8 +854,8 @@ const Ct = ({
854
854
  "button",
855
855
  {
856
856
  type: "button",
857
- onClick: (U) => {
858
- U.stopPropagation(), oe();
857
+ onClick: (I) => {
858
+ I.stopPropagation(), oe();
859
859
  },
860
860
  className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",
861
861
  title: J ? "元のサイズに戻す" : "パネルを最大化",
@@ -866,8 +866,8 @@ const Ct = ({
866
866
  "button",
867
867
  {
868
868
  type: "button",
869
- onClick: (U) => {
870
- U.stopPropagation(), N(P);
869
+ onClick: (I) => {
870
+ I.stopPropagation(), N(P);
871
871
  },
872
872
  className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-red-500",
873
873
  title: "パネルを閉じる",
@@ -878,8 +878,8 @@ const Ct = ({
878
878
  ]
879
879
  }
880
880
  ),
881
- /* @__PURE__ */ e.jsx("div", { className: "panel-scroll-area min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ e.jsx(ee, { ...V.props || {} }) }),
882
- /* @__PURE__ */ e.jsx(ft, { config: Y, panelId: P, sizeInfo: ue, onSizeInfoClick: (U) => m?.(U, P) })
881
+ /* @__PURE__ */ e.jsx("div", { "data-aqdd-scroll-area": !0, className: "panel-scroll-area min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ e.jsx(ee, { ...V.props || {} }) }),
882
+ /* @__PURE__ */ e.jsx(ft, { config: Y, panelId: P, sizeInfo: ue, onSizeInfoClick: (I) => m?.(I, P) })
883
883
  ]
884
884
  },
885
885
  P
@@ -888,21 +888,21 @@ const Ct = ({
888
888
  }, Je = (P, V) => {
889
889
  const ee = n[P] || [];
890
890
  let he = !1;
891
- for (const I of ee)
892
- if (l[I]) {
891
+ for (const q of ee)
892
+ if (l[q]) {
893
893
  he = !0;
894
894
  break;
895
895
  }
896
896
  const ce = i.isDragging || (A?.isActive ?? !1);
897
- return /* @__PURE__ */ e.jsx(Ue, { columnIndex: V, isDragging: ce, dragOverPosition: u, config: Y, children: /* @__PURE__ */ e.jsxs(
897
+ return /* @__PURE__ */ e.jsx(Ie, { columnIndex: V, isDragging: ce, dragOverPosition: u, config: Y, children: /* @__PURE__ */ e.jsxs(
898
898
  "section",
899
899
  {
900
900
  "data-drop-zone": "true",
901
901
  "data-column-key": P,
902
902
  "data-column-index": V,
903
903
  "aria-label": `Drop zone for column ${V + 1}`,
904
- onDragOver: (I) => y(I, V),
905
- onDrop: (I) => a(I, P),
904
+ onDragOver: (q) => y(q, V),
905
+ onDrop: (q) => a(q, P),
906
906
  onDragLeave: j,
907
907
  className: "relative flex h-full flex-col transition-all duration-200",
908
908
  children: [
@@ -920,14 +920,14 @@ const Ct = ({
920
920
  customDrag: A
921
921
  }
922
922
  ) }),
923
- ee.map((I, ne) => {
924
- const ue = l[I], J = !(ue || ce);
923
+ ee.map((q, ne) => {
924
+ const ue = l[q], J = !(ue || ce);
925
925
  return /* @__PURE__ */ e.jsxs("div", { className: `panel-with-placeholder ${J ? "m-0 h-0 overflow-hidden p-0" : ""}`, "data-panel-hidden": J ? "true" : void 0, "aria-hidden": J ? "true" : void 0, children: [
926
- ue ? Ge(I) : ce ? (
926
+ ue ? Ge(q) : ce ? (
927
927
  /* ドラッグ中のみ隠されたパネルのダミー表示 */
928
928
  /* @__PURE__ */ e.jsxs("div", { className: "hidden-panel-placeholder relative h-[120px] rounded-2xl border-2 border-amber-300 border-dashed bg-gradient-to-br from-amber-50 to-orange-50 p-3 text-left shadow-lg backdrop-blur-lg", children: [
929
929
  /* @__PURE__ */ e.jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [
930
- /* @__PURE__ */ e.jsx("h3", { className: "font-semibold text-amber-700 text-base", children: Ne[I]?.title || I }),
930
+ /* @__PURE__ */ e.jsx("h3", { className: "font-semibold text-amber-700 text-base", children: Ne[q]?.title || q }),
931
931
  /* @__PURE__ */ e.jsx("span", { className: "rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs", children: "非表示" })
932
932
  ] }),
933
933
  /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e.jsxs("div", { className: "text-center text-amber-600", children: [
@@ -950,9 +950,9 @@ const Ct = ({
950
950
  customDrag: A
951
951
  }
952
952
  )
953
- ] }, `panel-${I}`);
953
+ ] }, `panel-${q}`);
954
954
  }),
955
- !(he || ce) && /* @__PURE__ */ e.jsx("div", { className: "textcenter flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-slate-400 transition-all duration-200", children: /* @__PURE__ */ e.jsx("div", { className: "text-sm", children: "このエリアは空です" }) })
955
+ !(he || ce) && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-center text-slate-400 transition-all duration-200", children: /* @__PURE__ */ e.jsx("div", { className: "text-sm", children: "このエリアは空です" }) })
956
956
  ]
957
957
  }
958
958
  ) });
@@ -980,7 +980,7 @@ const Ct = ({
980
980
  );
981
981
  })
982
982
  ] }) }),
983
- /* @__PURE__ */ e.jsx("div", { ref: B, className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "h-full w-full", style: Ze, children: /* @__PURE__ */ e.jsx("main", { className: "no-scrollbar h-full max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6", children: /* @__PURE__ */ e.jsx("div", { className: "relative flex h-full items-start gap-6 pr-4", children: r.map((P, V) => {
983
+ /* @__PURE__ */ e.jsx("div", { ref: B, className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ e.jsx("div", { className: "h-full w-full", style: Ze, children: /* @__PURE__ */ e.jsx("main", { "data-aqdd-scroll-root": !0, className: "no-scrollbar h-full max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6", children: /* @__PURE__ */ e.jsx("div", { className: "relative flex h-full items-start gap-6 pr-4", children: r.map((P, V) => {
984
984
  const ee = f?.[P.id] || P.initialWidth || 350, he = _ && (P.resizable ?? !0);
985
985
  return /* @__PURE__ */ e.jsx(et, { children: /* @__PURE__ */ e.jsxs(
986
986
  "div",
@@ -996,7 +996,7 @@ const Ct = ({
996
996
  },
997
997
  children: [
998
998
  Je(P.key, V),
999
- he && g && C && W && /* @__PURE__ */ e.jsx(qe, { columnId: P.id, onResizeStart: g, onResize: C, onResizeEnd: W, isResizing: x && p === P.id, position: "right", debug: Y })
999
+ he && g && C && W && /* @__PURE__ */ e.jsx(Ue, { columnId: P.id, onResizeStart: g, onResize: C, onResizeEnd: W, isResizing: x && p === P.id, position: "right", debug: Y })
1000
1000
  ]
1001
1001
  }
1002
1002
  ) }, P.id);
@@ -1514,7 +1514,7 @@ const Ct = ({
1514
1514
  }, [n]), Y = w(
1515
1515
  (f) => o.columns.find((g) => g.id === f),
1516
1516
  [o.columns]
1517
- ), q = w(() => {
1517
+ ), U = w(() => {
1518
1518
  let f = 0;
1519
1519
  for (const g of Object.values(o.columnWidths))
1520
1520
  f += g;
@@ -1541,7 +1541,7 @@ const Ct = ({
1541
1541
  updateColumnCount: z,
1542
1542
  autoBalanceColumns: Z,
1543
1543
  getColumnById: Y,
1544
- getTotalWidth: q,
1544
+ getTotalWidth: U,
1545
1545
  getColumnElement: O,
1546
1546
  setShowInsertPlaceholders: _
1547
1547
  };
@@ -1625,7 +1625,7 @@ const wt = ({
1625
1625
  isVirtualClick: z,
1626
1626
  calculateMoveDistance: Z,
1627
1627
  clearMouseTracking: Y,
1628
- resetDragState: q,
1628
+ resetDragState: U,
1629
1629
  resetClickState: O,
1630
1630
  createDragImage: _,
1631
1631
  updateDragImagePosition: f,
@@ -1637,7 +1637,7 @@ const wt = ({
1637
1637
  x.current = r;
1638
1638
  const p = F(null), m = F(null), b = F(0), N = F(new Be(Pe));
1639
1639
  K(() => {
1640
- const d = document.querySelector("main.max-w-full.flex-1.overflow-auto");
1640
+ const d = document.querySelector("main[data-aqdd-scroll-root]");
1641
1641
  d && N.current.setScrollElement(d);
1642
1642
  }, []);
1643
1643
  const T = F(u);
@@ -1723,7 +1723,7 @@ const wt = ({
1723
1723
  Q && o[n.panelId] === "custom" ? (E(x.current, 1, "🔄 カスタムドラッグパネル移動実行:", n.panelId, "→", Q), a(n.panelId, Q, k.insertIndex)) : E(x.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", n.panelId, "モード:", o[n.panelId]);
1724
1724
  }
1725
1725
  }
1726
- g(), document.body.classList.remove("custom-dragging", "droppable"), q(), b.current = 0;
1726
+ g(), document.body.classList.remove("custom-dragging", "droppable"), U(), b.current = 0;
1727
1727
  } else if (z(d.clientX, d.clientY)) {
1728
1728
  const X = document.elementFromPoint(d.clientX, d.clientY)?.closest("[data-panel-id]"), G = X?.getAttribute("data-panel-id") ?? null;
1729
1729
  if (!(X && G) || o[G] !== "custom") {
@@ -1738,7 +1738,7 @@ const wt = ({
1738
1738
  } else l.isClicked && (O(), m.current = null, b.current = 0);
1739
1739
  i && M(!1);
1740
1740
  },
1741
- [n.isActive, n.panelId, l, o, i, a, q, O, z, $, M, g]
1741
+ [n.isActive, n.panelId, l, o, i, a, U, O, z, $, M, g]
1742
1742
  ), s = w(
1743
1743
  (d, k) => {
1744
1744
  if (o[k] !== "custom") {
@@ -1792,7 +1792,7 @@ const wt = ({
1792
1792
  S(O);
1793
1793
  }, []), Y = w((O) => {
1794
1794
  $(O);
1795
- }, []), q = w((O) => {
1795
+ }, []), U = w((O) => {
1796
1796
  y(O);
1797
1797
  }, []);
1798
1798
  return {
@@ -1811,7 +1811,7 @@ const wt = ({
1811
1811
  setCustomDrag: z,
1812
1812
  setClickState: Z,
1813
1813
  setTouchDragState: Y,
1814
- setIsMouseDown: q,
1814
+ setIsMouseDown: U,
1815
1815
  // Utility Functions / ユーティリティ関数
1816
1816
  resetDragState: a,
1817
1817
  resetClickState: j
@@ -1886,11 +1886,11 @@ const wt = ({
1886
1886
  Z.current = i;
1887
1887
  const Y = F(u);
1888
1888
  Y.current = u;
1889
- const q = F(D);
1890
- q.current = D;
1889
+ const U = F(D);
1890
+ U.current = D;
1891
1891
  const O = F(new Be(Pe));
1892
1892
  K(() => {
1893
- const x = document.querySelector("main.max-w-full.flex-1.overflow-auto");
1893
+ const x = document.querySelector("main[data-aqdd-scroll-root]");
1894
1894
  x && O.current.setScrollElement(x);
1895
1895
  }, []);
1896
1896
  const _ = w(
@@ -1915,7 +1915,7 @@ const wt = ({
1915
1915
  }
1916
1916
  if (S(b), x.dataTransfer) {
1917
1917
  x.dataTransfer.setData("text/plain", p), x.dataTransfer.effectAllowed = "move";
1918
- const N = q.current;
1918
+ const N = U.current;
1919
1919
  if (N < 1) {
1920
1920
  const T = x.currentTarget.closest("[data-panel-id]") ?? x.currentTarget, A = T.getBoundingClientRect(), H = T.offsetWidth, s = T.offsetHeight, d = T.cloneNode(!0);
1921
1921
  d.removeAttribute("data-panel-id"), d.removeAttribute("id"), d.style.margin = "0", d.style.width = `${H}px`, d.style.height = `${s}px`, d.style.transform = `scale(${N})`, d.style.transformOrigin = "top left";
@@ -1989,7 +1989,7 @@ const wt = ({
1989
1989
  S.current = t;
1990
1990
  const v = w((L) => document.querySelector(`[data-panel-id="${L}"]`), []), $ = w(
1991
1991
  (L, z) => {
1992
- const Z = z.getBoundingClientRect(), Y = window.getComputedStyle(z), q = {
1992
+ const Z = z.getBoundingClientRect(), Y = window.getComputedStyle(z), U = {
1993
1993
  width: Math.round(Z.width),
1994
1994
  height: Math.round(Z.height),
1995
1995
  x: Math.round(Z.left),
@@ -1997,9 +1997,9 @@ const wt = ({
1997
1997
  minHeight: Y.minHeight || "auto",
1998
1998
  maxHeight: Y.maxHeight || "none"
1999
1999
  }, O = u.current[L];
2000
- (!O || Object.keys(q).some((_) => O[_] !== q[_])) && (u.current[L] = q, i((_) => ({
2000
+ (!O || Object.keys(U).some((_) => O[_] !== U[_])) && (u.current[L] = U, i((_) => ({
2001
2001
  ..._,
2002
- [L]: q
2002
+ [L]: U
2003
2003
  })));
2004
2004
  },
2005
2005
  []
@@ -2019,8 +2019,8 @@ const wt = ({
2019
2019
  (L, z, Z) => {
2020
2020
  const Y = v(L);
2021
2021
  if (!Y || c.current) return;
2022
- const q = S.current, O = Y.getBoundingClientRect(), _ = Y.cloneNode(!0);
2023
- _.removeAttribute("data-panel-id"), _.style.position = "fixed", _.style.top = "0px", _.style.left = "0px", _.style.width = `${Y.offsetWidth}px`, _.style.height = `${Y.offsetHeight}px`, _.style.pointerEvents = "none", _.style.zIndex = "1000", _.style.opacity = "0.5", _.style.margin = "0", _.style.transition = "none", _.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)", _.style.transformOrigin = "top left", _.style.transform = `translate(${O.left}px, ${O.top}px) scale(${q})`, _.id = `drag-image-${L}`, document.body.appendChild(_), c.current = _, h.current = { x: z, y: Z };
2022
+ const U = S.current, O = Y.getBoundingClientRect(), _ = Y.cloneNode(!0);
2023
+ _.removeAttribute("data-panel-id"), _.style.position = "fixed", _.style.top = "0px", _.style.left = "0px", _.style.width = `${Y.offsetWidth}px`, _.style.height = `${Y.offsetHeight}px`, _.style.pointerEvents = "none", _.style.zIndex = "1000", _.style.opacity = "0.5", _.style.margin = "0", _.style.transition = "none", _.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)", _.style.transformOrigin = "top left", _.style.transform = `translate(${O.left}px, ${O.top}px) scale(${U})`, _.id = `drag-image-${L}`, document.body.appendChild(_), c.current = _, h.current = { x: z, y: Z };
2024
2024
  },
2025
2025
  [v]
2026
2026
  ), j = w((L, z) => {
@@ -2124,7 +2124,7 @@ const wt = ({
2124
2124
  }
2125
2125
  },
2126
2126
  [a]
2127
- ), q = wt({
2127
+ ), U = wt({
2128
2128
  debugConfig: h.current,
2129
2129
  dragState: a.dragState,
2130
2130
  customDrag: a.customDrag,
@@ -2184,10 +2184,10 @@ const wt = ({
2184
2184
  const m = !a.clickState.isClicked && Object.entries($).some(([, N]) => N === "custom"), b = a.clickState.isClicked && a.clickState.panelId;
2185
2185
  if (m || b) {
2186
2186
  const N = m ? "パターン1（仮想クリック検出）" : "パターン2,3（ドラッグ準備）";
2187
- E(h.current, 1, `🔧 イベントハンドラー設定開始: ${N}`), R.current.mousemove = q.handleGlobalMouseMove, R.current.mouseup = q.handleGlobalMouseUp;
2187
+ E(h.current, 1, `🔧 イベントハンドラー設定開始: ${N}`), R.current.mousemove = U.handleGlobalMouseMove, R.current.mouseup = U.handleGlobalMouseUp;
2188
2188
  } else
2189
2189
  a.customDrag.isActive || a.dragState.isDragging || (R.current.mousemove = null, R.current.mouseup = null);
2190
- }, [a.clickState.isClicked, a.clickState.panelId, $, a.customDrag.isActive, a.dragState.isDragging, q.handleGlobalMouseMove, q.handleGlobalMouseUp]);
2190
+ }, [a.clickState.isClicked, a.clickState.panelId, $, a.customDrag.isActive, a.dragState.isDragging, U.handleGlobalMouseMove, U.handleGlobalMouseUp]);
2191
2191
  const g = w(
2192
2192
  (m, b) => {
2193
2193
  const N = m.touches[0], T = m.currentTarget;
@@ -2267,7 +2267,7 @@ const wt = ({
2267
2267
  // イベントハンドラー
2268
2268
  handleDragStart: O.handleDragStart,
2269
2269
  handleDragEnd: O.handleDragEnd,
2270
- handleMouseDown: q.handleMouseDown,
2270
+ handleMouseDown: U.handleMouseDown,
2271
2271
  handleTouchStart: g,
2272
2272
  handleTouchMove: C,
2273
2273
  handleTouchEnd: W,
@@ -2305,8 +2305,8 @@ const wt = ({
2305
2305
  const a = Math.max(i - 64, 0), j = 24, D = Object.values(o);
2306
2306
  let R;
2307
2307
  if (D.length > 0) {
2308
- const L = D.reduce((Y, q) => Y + q, 0) / D.length, z = Math.max(r, L);
2309
- R = Math.floor((a + j) / (z + j)), D.reduce((Y, q) => Y + q, 0) + (D.length - 1) * j > a && D.length > l && (R = Math.min(R, D.length - 1));
2308
+ const L = D.reduce((Y, U) => Y + U, 0) / D.length, z = Math.max(r, L);
2309
+ R = Math.floor((a + j) / (z + j)), D.reduce((Y, U) => Y + U, 0) + (D.length - 1) * j > a && D.length > l && (R = Math.min(R, D.length - 1));
2310
2310
  } else
2311
2311
  R = Math.floor((a + j) / (r + j));
2312
2312
  return R = Math.max(l, Math.min(n, R)), $.current === R ? $.current : ($.current = R, R);
@@ -2361,12 +2361,12 @@ export {
2361
2361
  Pe as DEFAULT_EDGE_SCROLL_CONFIG,
2362
2362
  Tt as DebugControlPanel,
2363
2363
  Ct as DragDropLayout,
2364
- Ue as DropZoneDebugOverlay,
2364
+ Ie as DropZoneDebugOverlay,
2365
2365
  Be as EdgeScrollManager,
2366
- Ie as InsertPlaceholder,
2366
+ qe as InsertPlaceholder,
2367
2367
  ft as PanelSizeDisplay,
2368
2368
  kt as ResizableColumn,
2369
- qe as ResizeHandle,
2369
+ Ue as ResizeHandle,
2370
2370
  zt as ResponsiveControl,
2371
2371
  Ye as calculateScrollVector,
2372
2372
  Rt as createColumnIdMapping,