@aiquants/drag-drop-panels 0.8.0 → 0.8.3

package/src/DragDropLayout.tsx

@@ -5,7 +5,13 @@
  * このファイルは、ドラッグ＆ドロップインターフェースのメインレイアウトコンポーネントを定義します。
  * カラム、パネル、ドラッグイベント、FLIPアニメーションを統合し、完全にインタラクティブなユーザーエクスペリエンスを提供します。
  */
-import { Eye, EyeOff, Maximize2, Minimize2, MousePointer, MousePointerClick, X } from "lucide-react"
+import Eye from "lucide-react/dist/esm/icons/eye.js"
+import EyeOff from "lucide-react/dist/esm/icons/eye-off.js"
+import Maximize2 from "lucide-react/dist/esm/icons/maximize-2.js"
+import Minimize2 from "lucide-react/dist/esm/icons/minimize-2.js"
+import MousePointer from "lucide-react/dist/esm/icons/mouse-pointer.js"
+import MousePointerClick from "lucide-react/dist/esm/icons/mouse-pointer-click.js"
+import X from "lucide-react/dist/esm/icons/x.js"
 import { type CSSProperties, type DragEvent, Fragment, type MouseEvent, memo, type TouchEvent, useEffect, useLayoutEffect, useMemo, useRef } from "react"
 import { debugLog, PanelSizeDisplay } from "./drag-drop/DebugComponents"
 import { DropZoneDebugOverlay, InsertPlaceholder } from "./drag-drop/DebugOverlay"
@@ -425,7 +431,16 @@ export const DragDropLayout = ({
         // PanelConfig.minHeight/maxHeight 指定時は従来のハードコード既定 (200px/500px) を上書きする。
         // 未指定時は既定値を inline style で適用するため、既存コンシューマの見た目は不変。
         const heightStyle: CSSProperties = isMaximized
-            ? { position: "fixed", inset: 0, zIndex: 50, minHeight: 0, maxHeight: "none" }
+            ? {
+                  position: "fixed",
+                  top: "var(--aqdd-maximize-top, 0px)",
+                  right: "var(--aqdd-maximize-right, 0px)",
+                  bottom: "var(--aqdd-maximize-bottom, 0px)",
+                  left: "var(--aqdd-maximize-left, 0px)",
+                  zIndex: 50,
+                  minHeight: 0,
+                  maxHeight: "none",
+              }
             : {
                   minHeight: panelConfig.minHeight ?? "200px",
                   maxHeight: panelConfig.maxHeight ?? "500px",

package/src/drag-drop/ColumnControlPanel.tsx

@@ -7,7 +7,10 @@
  * このコンポーネントは、ドラッグ＆ドロップレイアウトにおいて、カラム数の管理、
  * パネルの自動バランス調整、およびカラム幅のリセットを行うためのUIコントロールを提供します。
  */
-import { Grid3X3, Minus, Plus, RotateCcw } from "lucide-react"
+import Grid3x3 from "lucide-react/dist/esm/icons/grid-3x3.js"
+import Minus from "lucide-react/dist/esm/icons/minus.js"
+import Plus from "lucide-react/dist/esm/icons/plus.js"
+import RotateCcw from "lucide-react/dist/esm/icons/rotate-ccw.js"
 
 /**
  * Props for the ColumnControlPanel component.
@@ -95,7 +98,7 @@ export const ColumnControlPanel = ({ columnCount, onColumnCountChange, onAutoBal
                     disabled={isResizing}
                     className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${!isResizing ? "border border-slate-300 text-slate-600 hover:border-green-300 hover:bg-green-50 hover:text-green-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`}
                     title="パネルを全カラムに均等分散">
-                    <Grid3X3 className="h-3 w-3" />
+                    <Grid3x3 className="h-3 w-3" />
                     <span>バランス</span>
                 </button>
 

package/src/drag-drop/ColumnInsertPanel.tsx

@@ -7,7 +7,8 @@
  * このコンポーネントは、ドラッグ＆ドロップレイアウトにおいて、
  * 特定の位置にカラムを挿入・削除するためのUIコントロールを提供します。
  */
-import { Plus, X } from "lucide-react"
+import Plus from "lucide-react/dist/esm/icons/plus.js"
+import X from "lucide-react/dist/esm/icons/x.js"
 
 /**
  * Props for the ColumnInsertPanel component。

package/src/drag-drop/ResponsiveControl.tsx

@@ -1,4 +1,5 @@
-import { Monitor, Smartphone } from "lucide-react"
+import Monitor from "lucide-react/dist/esm/icons/monitor.js"
+import Smartphone from "lucide-react/dist/esm/icons/smartphone.js"
 
 export interface ResponsiveControlProps {
     isResponsiveMode: boolean

package/src/lucide-icons.d.ts

@@ -0,0 +1,6 @@
+declare module "lucide-react/dist/esm/icons/*" {
+    import type { LucideIcon } from "lucide-react"
+
+    const component: LucideIcon
+    export default component
+}