@aiquants/drag-drop-panels 0.2.0

package/dist/index.es.js

@@ -0,0 +1,2267 @@
+import be, { useRef as H, useState as ee, useEffect as G, useCallback as P, memo as Ne, useMemo as ve, useLayoutEffect as Ee, Fragment as Se } from "react";
+import { Eye as ke, EyeOff as he, MousePointerClick as Ce, MousePointer as Oe, Minus as Te, Plus as de, Grid3X3 as Ae, RotateCcw as Me, X as $e, Smartphone as Re, Monitor as _e } from "lucide-react";
+var ae = { exports: {} }, oe = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var fe;
+function We() {
+  if (fe) return oe;
+  fe = 1;
+  var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
+  function n(l, r, u) {
+    var d = null;
+    if (u !== void 0 && (d = "" + u), r.key !== void 0 && (d = "" + r.key), "key" in r) {
+      u = {};
+      for (var c in r)
+        c !== "key" && (u[c] = r[c]);
+    } else u = r;
+    return r = u.ref, {
+      $$typeof: t,
+      type: l,
+      key: d,
+      ref: r !== void 0 ? r : null,
+      props: u
+    };
+  }
+  return oe.Fragment = o, oe.jsx = n, oe.jsxs = n, oe;
+}
+var le = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var xe;
+function Le() {
+  return xe || (xe = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(a) {
+      if (a == null) return null;
+      if (typeof a == "function")
+        return a.$$typeof === v ? null : a.displayName || a.name || null;
+      if (typeof a == "string") return a;
+      switch (a) {
+        case m:
+          return "Fragment";
+        case F:
+          return "Profiler";
+        case O:
+          return "StrictMode";
+        case I:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case f:
+          return "Activity";
+      }
+      if (typeof a == "object")
+        switch (typeof a.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), a.$$typeof) {
+          case D:
+            return "Portal";
+          case B:
+            return a.displayName || "Context";
+          case U:
+            return (a._context.displayName || "Context") + ".Consumer";
+          case k:
+            var p = a.render;
+            return a = a.displayName, a || (a = p.displayName || p.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
+          case Q:
+            return p = a.displayName || null, p !== null ? p : t(a.type) || "Memo";
+          case h:
+            p = a._payload, a = a._init;
+            try {
+              return t(a(p));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function o(a) {
+      return "" + a;
+    }
+    function n(a) {
+      try {
+        o(a);
+        var p = !1;
+      } catch {
+        p = !0;
+      }
+      if (p) {
+        p = console;
+        var A = p.error, q = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
+        return A.call(
+          p,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          q
+        ), o(a);
+      }
+    }
+    function l(a) {
+      if (a === m) return "<>";
+      if (typeof a == "object" && a !== null && a.$$typeof === h)
+        return "<...>";
+      try {
+        var p = t(a);
+        return p ? "<" + p + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function r() {
+      var a = N.A;
+      return a === null ? null : a.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function d(a) {
+      if (j.call(a, "key")) {
+        var p = Object.getOwnPropertyDescriptor(a, "key").get;
+        if (p && p.isReactWarning) return !1;
+      }
+      return a.key !== void 0;
+    }
+    function c(a, p) {
+      function A() {
+        E || (E = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          p
+        ));
+      }
+      A.isReactWarning = !0, Object.defineProperty(a, "key", {
+        get: A,
+        configurable: !0
+      });
+    }
+    function b() {
+      var a = t(this.type);
+      return $[a] || ($[a] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), a = this.props.ref, a !== void 0 ? a : null;
+    }
+    function C(a, p, A, q, x, z) {
+      var R = A.ref;
+      return a = {
+        $$typeof: y,
+        type: a,
+        key: p,
+        props: A,
+        _owner: q
+      }, (R !== void 0 ? R : null) !== null ? Object.defineProperty(a, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(a, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(a, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: x
+      }), Object.defineProperty(a, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: z
+      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
+    }
+    function w(a, p, A, q, x, z) {
+      var R = p.children;
+      if (R !== void 0)
+        if (q)
+          if (i(R)) {
+            for (q = 0; q < R.length; q++)
+              M(R[q]);
+            Object.freeze && Object.freeze(R);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else M(R);
+      if (j.call(p, "key")) {
+        R = t(a);
+        var Z = Object.keys(p).filter(function(W) {
+          return W !== "key";
+        });
+        q = 0 < Z.length ? "{key: someKey, " + Z.join(": ..., ") + ": ...}" : "{key: someKey}", V[R + q] || (Z = 0 < Z.length ? "{" + Z.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          q,
+          R,
+          Z,
+          R
+        ), V[R + q] = !0);
+      }
+      if (R = null, A !== void 0 && (n(A), R = "" + A), d(p) && (n(p.key), R = "" + p.key), "key" in p) {
+        A = {};
+        for (var K in p)
+          K !== "key" && (A[K] = p[K]);
+      } else A = p;
+      return R && c(
+        A,
+        typeof a == "function" ? a.displayName || a.name || "Unknown" : a
+      ), C(
+        a,
+        R,
+        A,
+        r(),
+        x,
+        z
+      );
+    }
+    function M(a) {
+      T(a) ? a._store && (a._store.validated = 1) : typeof a == "object" && a !== null && a.$$typeof === h && (a._payload.status === "fulfilled" ? T(a._payload.value) && a._payload.value._store && (a._payload.value._store.validated = 1) : a._store && (a._store.validated = 1));
+    }
+    function T(a) {
+      return typeof a == "object" && a !== null && a.$$typeof === y;
+    }
+    var s = be, y = Symbol.for("react.transitional.element"), D = Symbol.for("react.portal"), m = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), U = Symbol.for("react.consumer"), B = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), I = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), h = Symbol.for("react.lazy"), f = Symbol.for("react.activity"), v = Symbol.for("react.client.reference"), N = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, i = Array.isArray, g = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    s = {
+      react_stack_bottom_frame: function(a) {
+        return a();
+      }
+    };
+    var E, $ = {}, L = s.react_stack_bottom_frame.bind(
+      s,
+      u
+    )(), Y = g(l(u)), V = {};
+    le.Fragment = m, le.jsx = function(a, p, A) {
+      var q = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return w(
+        a,
+        p,
+        A,
+        !1,
+        q ? Error("react-stack-top-frame") : L,
+        q ? g(l(a)) : Y
+      );
+    }, le.jsxs = function(a, p, A) {
+      var q = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return w(
+        a,
+        p,
+        A,
+        !0,
+        q ? Error("react-stack-top-frame") : L,
+        q ? g(l(a)) : Y
+      );
+    };
+  })()), le;
+}
+var ge;
+function ze() {
+  return ge || (ge = 1, process.env.NODE_ENV === "production" ? ae.exports = We() : ae.exports = Le()), ae.exports;
+}
+var e = ze();
+const Ye = ({ config: t, panelId: o, sizeInfo: n, onSizeInfoClick: l }) => t.showPanelSizes && n ? (
+  // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素。デバッグ目的のため、インタラクティブ性は限定的。
+  // biome-ignore lint/a11y/useKeyWithClickEvents: キーボード操作はデバッグ機能では優先度が低い。
+  /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "absolute top-1 right-24 z-10 cursor-default rounded-md bg-red-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg",
+      onClick: l,
+      onMouseDown: l,
+      onTouchStart: (r) => r instanceof TouchEvent && l(r),
+      onDragStart: l,
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "text-[10px] opacity-80", children: [
+          "ID:",
+          o
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          n.width,
+          "×",
+          n.height
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          "X:",
+          n.x,
+          " Y:",
+          n.y
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "text-[10px] opacity-80", children: [
+          "min:",
+          n.minHeight,
+          " max:",
+          n.maxHeight
+        ] })
+      ]
+    }
+  )
+) : null, S = (t, o, ...n) => {
+  (t.logLevel ?? 0) >= o && console.log(...n);
+}, ye = be.memo(({ index: t, columnIndex: o, isDragging: n, dragOverPosition: l, originalPosition: r, onDragEnter: u, onDragLeave: d, config: c, customDrag: b }) => {
+  const C = r && r.columnIndex === o && (r.panelIndex === t || r.panelIndex + 1 === t), w = !C && l?.columnIndex === o && l?.insertIndex === t, M = H(null), [T, s] = ee(null), y = n || (b?.isActive ?? !1);
+  return G(() => {
+    if (M.current) {
+      const D = M.current.getBoundingClientRect(), m = {
+        width: Math.round(D.width),
+        height: Math.round(D.height),
+        x: Math.round(D.left),
+        y: Math.round(D.top)
+      };
+      s(m), w && S(c, 1, `🎯 アクティブプレースホルダー ${t}-${o}:`, {
+        size: `${m.width}×${m.height}`,
+        position: `(${m.x}, ${m.y})`,
+        bottomRight: `(${m.x + m.width}, ${m.y + m.height})`,
+        center: `(${m.x + m.width / 2}, ${m.y + m.height / 2})`
+      });
+    }
+  }, [w, t, o, c]), S(c, 2, `プレースホルダー${t}-${o}: 表示中`, { isHighlighted: w, isDragging: n, dragOverPosition: l, shouldShow: y }), // biome-ignore lint/a11y/noStaticElementInteractions: ドラッグイベントを処理するための対話的な要素。デバッグ目的のため、キーボード操作は必須ではない。
+  /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: M,
+      "data-placeholder-index": t,
+      "data-placeholder-column": o,
+      onDragEnter: () => u(o, t),
+      onDragLeave: (D) => d(D, o, t),
+      className: `relative flex w-full items-center justify-center transition-all duration-0 ${C ? "pointer-events-none h-0 overflow-hidden opacity-0" : y ? w ? "my-2 scale-[1.02] rounded-xl border-4 border-sky-500 border-dashed bg-sky-200 px-4 py-6 shadow-lg ring-2 ring-sky-400 ring-opacity-50" : "my-2 rounded-xl border-2 border-sky-300 border-dashed bg-sky-50/70 px-2 py-4 opacity-80" : "pointer-events-none h-0 overflow-hidden opacity-0"}`,
+      children: [
+        !C && y && c.showPlaceholderInfo && T && /* @__PURE__ */ e.jsxs("div", { className: "absolute top-1 right-1 z-10 rounded-md bg-blue-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg", children: [
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            T.width,
+            "×",
+            T.height
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { children: [
+            "X:",
+            T.x,
+            " Y:",
+            T.y
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { className: "text-[10px] opacity-80", children: "min:200px max:500px" }),
+          /* @__PURE__ */ e.jsxs("div", { className: "mt-0.5 text-[10px] opacity-80", children: [
+            "PH-",
+            o,
+            "-",
+            t,
+            " ",
+            w ? "ACTIVE" : "IDLE"
+          ] })
+        ] }),
+        !C && y && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2 text-sky-600", children: [
+          /* @__PURE__ */ e.jsxs("svg", { className: "h-6 w-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ e.jsx("title", { children: "パネルをここにドロップ" }),
+            /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" })
+          ] }),
+          /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: "パネルをここにドロップ" })
+        ] })
+      ]
+    }
+  );
+});
+ye.displayName = "InsertPlaceholder";
+const we = ({ columnIndex: t, isDragging: o, dragOverPosition: n, children: l, config: r }) => {
+  const u = H(null), [d, c] = ee(null);
+  return G(() => {
+    if (u.current && o) {
+      const b = u.current.getBoundingClientRect(), C = n?.columnIndex === t, w = {
+        width: Math.round(b.width),
+        height: Math.round(b.height),
+        x: Math.round(b.left),
+        y: Math.round(b.top),
+        isActive: C
+      };
+      c(w), C && S(r, 1, `🎯 アクティブドロップゾーン ${t}:`, {
+        size: `${w.width}×${w.height}`,
+        position: `(${w.x}, ${w.y})`,
+        bottomRight: `(${w.x + w.width}, ${w.y + w.height})`,
+        center: `(${w.x + w.width / 2}, ${w.y + w.height / 2})`
+      });
+    }
+  }, [o, n, t, r]), /* @__PURE__ */ e.jsxs("div", { ref: u, className: "relative", children: [
+    l,
+    o && d && r.showDropZoneOutlines && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("div", { className: `pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${d.isActive ? "border-red-500 bg-red-100/20 shadow-lg" : "border-gray-400 bg-gray-100/10"}` }),
+      /* @__PURE__ */ e.jsxs("div", { className: `absolute top-2 left-2 z-20 rounded-md px-2 py-1 font-mono text-xs leading-tight shadow-lg transition-all duration-200 ${d.isActive ? "bg-red-500/90 text-white" : "bg-gray-500/90 text-white"}`, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "font-bold", children: [
+          "DropZone-",
+          t
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          d.width,
+          "×",
+          d.height
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          "X:",
+          d.x,
+          " Y:",
+          d.y
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "mt-0.5 text-[10px] opacity-80", children: d.isActive ? "ACTIVE" : "IDLE" })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `pointer-events-none absolute transition-all duration-200 ${d.isActive ? "opacity-100" : "opacity-50"}`,
+          style: {
+            left: `${d.width / 2 - 6}px`,
+            top: `${d.height / 2 - 6}px`
+          },
+          children: /* @__PURE__ */ e.jsx("div", { className: `h-3 w-3 rounded-full border-2 ${d.isActive ? "border-red-700 bg-red-500" : "border-gray-700 bg-gray-500"}` })
+        }
+      ),
+      d.isActive && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx("div", { className: "pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ e.jsx("div", { className: "pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ e.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ e.jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500" })
+      ] })
+    ] })
+  ] });
+};
+we.displayName = "DropZoneDebugOverlay";
+const je = ({ columnId: t, onResizeStart: o, onResize: n, onResizeEnd: l, isResizing: r = !1, position: u = "right", className: d = "", debug: c = {} }) => {
+  const b = H(!1), C = H(null);
+  G(() => {
+    !r && b.current && (S(c, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", t), b.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  }, [r, t, c]);
+  const w = P(
+    (s) => {
+      s.preventDefault(), s.stopPropagation(), S(c, 2, "リサイズハンドル マウスダウン:", t), b.current = !0, o(t, s.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
+    },
+    [t, o, c]
+  );
+  G(() => {
+    const s = (D) => {
+      b.current && (D.preventDefault(), n(D.clientX));
+    }, y = () => {
+      b.current && (S(c, 2, "リサイズハンドル マウスアップ:", t), b.current = !1, l(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+    };
+    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", y), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", y);
+    };
+  }, [t, n, l, c]);
+  const M = P(
+    (s) => {
+      s.preventDefault(), s.stopPropagation();
+      const y = s.touches[0];
+      S(c, 2, "リサイズハンドル タッチスタート:", t), b.current = !0, o(t, y.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
+    },
+    [t, o, c]
+  );
+  G(() => {
+    const s = (D) => {
+      if (!b.current) return;
+      D.preventDefault();
+      const m = D.touches[0];
+      n(m.clientX);
+    }, y = () => {
+      b.current && (S(c, 2, "リサイズハンドル タッチエンド:", t), b.current = !1, l(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+    };
+    return document.addEventListener("touchmove", s, { passive: !1 }), document.addEventListener("touchend", y), () => {
+      document.removeEventListener("touchmove", s), document.removeEventListener("touchend", y);
+    };
+  }, [t, n, l, c]), G(() => () => {
+    b.current && (S(c, 1, "リサイズハンドルアンマウント時のクリーンアップ:", t), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  }, [t, c]);
+  const T = ["resize-handle", u, r ? "resizing" : "", d].filter(Boolean).join(" ");
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: リサイズハンドルとして機能するためインタラクティブである必要がある
+    // biome-ignore lint/a11y/useSemanticElements: divを使用するが、aria-roleでセマンティックな意味を提供している
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: C,
+        className: T,
+        onMouseDown: w,
+        onTouchStart: M,
+        "data-column-id": t,
+        "data-position": u,
+        "aria-label": `${t}のカラム幅を調整`,
+        role: "separator",
+        "aria-orientation": "vertical",
+        children: [
+          /* @__PURE__ */ e.jsx("div", { className: "resize-handle-bar" }),
+          c.showPanelSizes && /* @__PURE__ */ e.jsxs("div", { className: "resize-handle-debug-info", children: [
+            t,
+            r && " (resizing)"
+          ] })
+        ]
+      }
+    )
+  );
+}, Je = ({ columnId: t, width: o, minWidth: n = 100, maxWidth: l = 800, onResizeStart: r, onResize: u, onResizeEnd: d, isResizing: c = !1, resizable: b = !0, className: C = "", debug: w = {}, children: M }) => {
+  const T = ["resizable-column", c ? "resizing" : "", C].filter(Boolean).join(" ");
+  return G(() => {
+    const s = document.querySelector(`[data-column-id="${t}"]`);
+    s && (s.style.setProperty("--column-width", `${o}px`), s.style.setProperty("--column-min-width", `${n}px`), s.style.setProperty("--column-max-width", `${l}px`));
+  }, [t, o, n, l]), /* @__PURE__ */ e.jsxs("div", { className: T, "data-column-id": t, "data-width": o, "data-min-width": n, "data-max-width": l, children: [
+    M,
+    b && /* @__PURE__ */ e.jsx(je, { columnId: t, onResizeStart: r, onResize: u, onResizeEnd: d, isResizing: c, position: "right", debug: w }),
+    w.showPanelSizes && /* @__PURE__ */ e.jsxs("div", { className: "column-debug-size", children: [
+      o,
+      "px",
+      c && " ↔"
+    ] })
+  ] });
+}, me = Ne(
+  ({
+    index: t,
+    columnIndex: o,
+    isDragging: n,
+    dragOverPosition: l,
+    originalPosition: r,
+    onDragEnter: u,
+    onDragLeave: d,
+    debugConfig: c,
+    customDrag: b
+  }) => /* @__PURE__ */ e.jsx(ye, { index: t, columnIndex: o, isDragging: n, dragOverPosition: l, originalPosition: r, onDragEnter: u, onDragLeave: d, config: c, customDrag: b })
+);
+me.displayName = "LocalInsertPlaceholder";
+const Qe = ({
+  columns: t,
+  panels: o,
+  columnPanels: n,
+  // onColumnPanelsChange,
+  panelVisibility: l,
+  onPanelVisibilityChange: r,
+  dragState: u,
+  dragOverPosition: d,
+  originalPanelPosition: c,
+  dragModes: b,
+  onDragStart: C,
+  onDragEnd: w,
+  onPlaceholderDragEnter: M,
+  onPlaceholderDragLeave: T,
+  onDragOverWithInsert: s,
+  onDropWithInsert: y,
+  onColumnDragLeave: D,
+  onPanelClick: m,
+  onPanelMouseDown: O,
+  onTouchStart: F,
+  onTouchMove: U,
+  onTouchEnd: B,
+  debugConfig: k,
+  panelSizes: I,
+  setPanelRef: X,
+  enableResize: Q = !1,
+  columnWidths: h,
+  // onColumnWidthChange,
+  onResizeStart: f,
+  onResize: v,
+  onResizeEnd: N,
+  isResizing: j = !1,
+  resizingColumn: i,
+  onPanelSizeInfoClick: g,
+  onToggleDragMode: E,
+  customDrag: $
+}) => {
+  const L = H(k);
+  G(() => {
+    L.current = k;
+  }, [k]);
+  const Y = H({}), V = H(/* @__PURE__ */ new Map());
+  G(() => {
+    S(L.current, 1, "🎨 DragDropLayout - dragModes props changed:", {
+      dragModes: b,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      keys: Object.keys(b),
+      values: Object.values(b)
+    });
+  }, [b]);
+  const a = ve(() => {
+    const x = {};
+    return o.forEach((z) => {
+      x[z.id] = z;
+    }), x;
+  }, [o]);
+  Ee(() => {
+    const x = /* @__PURE__ */ new Map();
+    Object.keys(Y.current).forEach((W) => {
+      const J = Y.current[W];
+      if (J) {
+        const re = J.getBoundingClientRect();
+        x.set(W, {
+          rect: re,
+          height: J.offsetHeight,
+          width: J.offsetWidth
+        });
+      }
+    });
+    const z = V.current, R = 300, Z = /* @__PURE__ */ new Set();
+    Object.values(n).forEach((W) => {
+      W.forEach((J) => Z.add(J));
+    }), new Set(z.keys()).forEach((W) => {
+      Z.has(W) || (S(L.current, 1, "パネル削除検出 - クリーンアップ:", W), z.delete(W), Y.current[W] && delete Y.current[W]);
+    }), x.forEach((W, J) => {
+      const re = z.get(J);
+      if (re) {
+        const _ = re.rect.left - W.rect.left, se = re.rect.top - W.rect.top;
+        if (_ !== 0 || se !== 0) {
+          S(L.current, 2, "パネル移動検出 - アニメーション開始:", J, { dx: _, dy: se });
+          const te = Y.current[J];
+          te && (te.style.transform = `translate(${_}px, ${se}px)`, te.style.transition = "none", te.classList.add("is-moving"), requestAnimationFrame(() => {
+            te.style.transition = `transform ${R}ms cubic-bezier(0.2, 0, 0.2, 1)`, te.style.transform = "translate(0, 0)", setTimeout(() => {
+              te.style.transition = "", te.style.transform = "", te.classList.remove("is-moving");
+            }, R);
+          }));
+        }
+      } else {
+        S(L.current, 1, "新規パネル検出 - フェードインアニメーション:", J);
+        const _ = Y.current[J];
+        _ && (_.style.opacity = "0", _.style.transition = "none", requestAnimationFrame(() => {
+          _.style.transition = `opacity ${R}ms ease-out`, _.style.opacity = "1", setTimeout(() => {
+            _.style.transition = "", _.style.opacity = "";
+          }, R);
+        }));
+      }
+    }), V.current = x;
+  }, [n]);
+  const p = (x) => {
+    if (!l[x]) return null;
+    const z = a[x];
+    if (!z)
+      return S(L.current, 1, `Panel config not found for panelId: ${x}`), null;
+    const R = z.component, Z = z.title, K = u.draggedPanel === x, W = b[x] || "normal";
+    S(L.current, 2, `🎨 renderPanel - ${x}:`, {
+      panelId: x,
+      dragMode: W,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    const J = (_) => {
+      Y.current[x] = _, X && X(x, _), _ && k.showPanelSizes && requestAnimationFrame(() => {
+        const se = _.getBoundingClientRect(), te = window.getComputedStyle(_);
+        S(L.current, 1, `Panel ${x} mounted with size:`, {
+          width: se.width,
+          height: se.height,
+          x: se.left,
+          y: se.top,
+          minHeight: te.minHeight,
+          maxHeight: te.maxHeight
+        });
+      });
+    }, re = I[x];
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素
+      /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          ref: J,
+          "data-panel-id": x,
+          "data-dragging": K,
+          role: "presentation",
+          draggable: W === "normal",
+          onDragStart: (_) => W === "normal" && C(_, x),
+          onDragEnd: w,
+          onClick: (_) => m?.(_, x),
+          onMouseDown: (_) => O?.(_, x),
+          onTouchStart: (_) => F?.(_, x),
+          onTouchMove: U,
+          onTouchEnd: B,
+          className: `panel-draggable group relative flex min-h-[200px] max-h-[500px] flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 text-left shadow-lg backdrop-blur-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${W === "custom" ? "select-none" : ""} ${K ? "cursor-grabbing" : "cursor-grab"}`,
+          children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "group relative mb-3 flex items-center justify-between", children: [
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ e.jsx("h3", { className: "font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900", children: Z }),
+                W === "custom" && /* @__PURE__ */ e.jsx("span", { className: "rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs", children: "Custom" })
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
+                /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (_) => {
+                      _.stopPropagation(), E && E(x);
+                    },
+                    onKeyDown: (_) => {
+                      (_.key === "Enter" || _.key === " ") && (_.preventDefault(), _.stopPropagation(), E && E(x));
+                    },
+                    tabIndex: 0,
+                    className: `cursor-pointer rounded p-1 text-xs transition-colors ${W === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,
+                    title: W === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え",
+                    children: W === "custom" ? /* @__PURE__ */ e.jsx(Ce, { className: "h-4 w-4" }) : /* @__PURE__ */ e.jsx(Oe, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (_) => {
+                      _.stopPropagation(), r({
+                        ...l,
+                        [x]: !1
+                      });
+                    },
+                    className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",
+                    title: "パネルを非表示",
+                    children: /* @__PURE__ */ e.jsx(he, { className: "h-4 w-4" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsx("div", { className: "panel-scroll-area flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ e.jsx(R, { ...z.props || {} }) }),
+            /* @__PURE__ */ e.jsx(Ye, { config: k, panelId: x, sizeInfo: re, onSizeInfoClick: (_) => g?.(_, x) })
+          ]
+        },
+        x
+      )
+    );
+  }, A = (x, z) => {
+    const R = n[x] || [];
+    let Z = !1;
+    for (const W of R)
+      if (l[W]) {
+        Z = !0;
+        break;
+      }
+    const K = u.isDragging || ($?.isActive ?? !1);
+    return /* @__PURE__ */ e.jsx(we, { columnIndex: z, isDragging: K, dragOverPosition: d, config: k, children: /* @__PURE__ */ e.jsxs(
+      "section",
+      {
+        "data-drop-zone": "true",
+        "data-column-key": x,
+        "data-column-index": z,
+        "aria-label": `Drop zone for column ${z + 1}`,
+        onDragOver: (W) => s(W, z),
+        onDrop: (W) => y(W, x),
+        onDragLeave: D,
+        className: "relative flex h-full flex-col transition-all duration-200",
+        children: [
+          /* @__PURE__ */ e.jsx("div", { className: "placeholder-container", children: /* @__PURE__ */ e.jsx(
+            me,
+            {
+              index: 0,
+              columnIndex: z,
+              isDragging: K,
+              dragOverPosition: d,
+              originalPosition: c,
+              onDragEnter: M,
+              onDragLeave: T,
+              debugConfig: k,
+              customDrag: $
+            }
+          ) }),
+          R.map((W, J) => {
+            const re = l[W], _ = !re && !K;
+            return /* @__PURE__ */ e.jsxs(
+              "div",
+              {
+                className: `panel-with-placeholder ${_ ? "h-0 m-0 p-0 overflow-hidden" : ""}`,
+                "data-panel-hidden": _ ? "true" : void 0,
+                "aria-hidden": _ ? "true" : void 0,
+                children: [
+                  re ? p(W) : K ? (
+                    /* ドラッグ中のみ隠されたパネルのダミー表示 */
+                    /* @__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: [
+                      /* @__PURE__ */ e.jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [
+                        /* @__PURE__ */ e.jsx("h3", { className: "font-semibold text-base text-amber-700", children: a[W]?.title || W }),
+                        /* @__PURE__ */ e.jsx("span", { className: "rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs", children: "非表示" })
+                      ] }),
+                      /* @__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: [
+                        /* @__PURE__ */ e.jsx(he, { className: "h-6 w-6 opacity-50 mx-auto" }),
+                        /* @__PURE__ */ e.jsx("p", { className: "text-xs mt-1", children: "このパネルは非表示です" })
+                      ] }) }) })
+                    ] })
+                  ) : null,
+                  /* @__PURE__ */ e.jsx(
+                    me,
+                    {
+                      index: J + 1,
+                      columnIndex: z,
+                      isDragging: K,
+                      dragOverPosition: d,
+                      originalPosition: c,
+                      onDragEnter: M,
+                      onDragLeave: T,
+                      debugConfig: k,
+                      customDrag: $
+                    }
+                  )
+                ]
+              },
+              `panel-${W}`
+            );
+          }),
+          !Z && !K && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 textcenter text-slate-400 transition-all duration-200", children: /* @__PURE__ */ e.jsx("div", { className: "text-sm", children: "このエリアは空です" }) })
+        ]
+      }
+    ) });
+  }, q = Object.keys(l).filter((x) => !l[x]);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
+    q.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "border-slate-200 border-b bg-white/70 px-4 py-2 backdrop-blur-lg", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ e.jsx("span", { className: "mr-2 text-slate-600 text-sm", children: "非表示のパネル:" }),
+      q.map((x) => {
+        const R = a[x]?.title || x;
+        return /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => r({
+              ...l,
+              [x]: !0
+            }),
+            className: "flex items-center space-x-1 rounded-lg border border-sky-300 bg-gradient-to-r from-sky-500 to-indigo-500 px-3 py-1 text-sm text-white shadow-md transition-all duration-200 hover:from-sky-600 hover:to-indigo-600 hover:shadow-lg",
+            children: [
+              /* @__PURE__ */ e.jsx(ke, { className: "h-3 w-3" }),
+              /* @__PURE__ */ e.jsx("span", { children: R })
+            ]
+          },
+          x
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ e.jsx("main", { className: "max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6 no-scrollbar", children: /* @__PURE__ */ e.jsx("div", { className: "relative flex h-full items-start gap-6 pr-4", children: t.map((x, z) => {
+      const R = h?.[x.id] || x.initialWidth || 350, Z = Q && (x.resizable ?? !0);
+      return /* @__PURE__ */ e.jsx(Se, { children: /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          className: `column relative ${x.className || ""} ${Q ? "resize-enabled-column" : "auto-width-column"} ${j && i === x.id ? "column-resizing-active" : ""}`,
+          "data-column": z,
+          "data-column-id": x.id,
+          "data-min-width": x.minWidth || 350,
+          "data-max-width": x.maxWidth,
+          "data-column-width": Q ? R : void 0,
+          ...Q && {
+            style: { "--column-width": `${R}px` }
+          },
+          children: [
+            A(x.key, z),
+            Z && f && v && N && /* @__PURE__ */ e.jsx(je, { columnId: x.id, onResizeStart: f, onResize: v, onResizeEnd: N, isResizing: j && i === x.id, position: "right", debug: k })
+          ]
+        }
+      ) }, x.id);
+    }) }) })
+  ] });
+}, Ke = ({
+  columnCount: t,
+  onColumnCountChange: o,
+  onAutoBalance: n,
+  onResetWidths: l,
+  minColumns: r = 2,
+  maxColumns: u = 6,
+  isResizing: d = !1,
+  isResponsiveMode: c = !1,
+  responsiveColumnCount: b
+}) => {
+  const C = t > r && !c, w = t < u && !c;
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-slate-200 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-lg", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e.jsx("span", { className: "font-medium text-slate-700 text-sm", children: "カラム数:" }),
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => C && o(t - 1),
+          disabled: !C || d,
+          className: `rounded p-1 text-xs transition-colors ${C && !d ? "border border-slate-300 text-slate-600 hover:border-red-300 hover:bg-red-50 hover:text-red-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,
+          title: c ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを削除 (最小: ${r}列)`,
+          children: /* @__PURE__ */ e.jsx(Te, { className: "h-3 w-3" })
+        }
+      ),
+      /* @__PURE__ */ e.jsxs("div", { className: `min-w-[2rem] rounded border px-3 py-1 text-center font-mono text-sm ${c ? "border-blue-300 bg-blue-50 text-blue-700" : "border-slate-300 bg-slate-100 text-slate-700"}`, children: [
+        c ? b ?? t : t,
+        c && /* @__PURE__ */ e.jsx("span", { className: "ml-1 text-xs", children: "自動" })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => w && o(t + 1),
+          disabled: !w || d,
+          className: `rounded p-1 text-xs transition-colors ${w && !d ? "border border-slate-300 text-slate-600 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,
+          title: c ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを追加 (最大: ${u}列)`,
+          children: /* @__PURE__ */ e.jsx(de, { className: "h-3 w-3" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "h-6 w-px bg-slate-300" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: n,
+          disabled: d,
+          className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${d ? "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300" : "border border-slate-300 text-slate-600 hover:border-green-300 hover:bg-green-50 hover:text-green-600"}`,
+          title: "パネルを全カラムに均等分散",
+          children: [
+            /* @__PURE__ */ e.jsx(Ae, { className: "h-3 w-3" }),
+            /* @__PURE__ */ e.jsx("span", { children: "バランス" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: l,
+          disabled: d,
+          className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${d ? "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300" : "border border-slate-300 text-slate-600 hover:border-orange-300 hover:bg-orange-50 hover:text-orange-600"}`,
+          title: "カラム幅を初期値にリセット",
+          children: [
+            /* @__PURE__ */ e.jsx(Me, { className: "h-3 w-3" }),
+            /* @__PURE__ */ e.jsx("span", { children: "幅リセット" })
+          ]
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 text-blue-600 text-xs", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-blue-500" }),
+      /* @__PURE__ */ e.jsx("span", { children: "リサイズ中..." })
+    ] })
+  ] });
+}, et = ({
+  columnCount: t,
+  onInsertColumn: o,
+  onDeleteColumn: n,
+  minColumns: l = 1,
+  maxColumns: r = 6,
+  isResizing: u = !1,
+  disabled: d = !1
+}) => {
+  const c = t < r && !d, b = t > l && !d;
+  return /* @__PURE__ */ e.jsxs("div", { className: `flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-4 py-2 shadow-sm backdrop-blur-lg ${d ? "bg-slate-100/80 opacity-60" : "bg-white/80"}`, children: [
+    d && /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2 text-slate-500 text-xs", children: /* @__PURE__ */ e.jsx("span", { children: "レスポンシブモード有効中：カラム数は自動調整されます" }) }),
+    !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => c && o(0),
+          disabled: !c || u,
+          className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${c && !u ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"}`,
+          title: "この位置に新しいカラムを挿入",
+          children: /* @__PURE__ */ e.jsx(de, { className: "h-4 w-4" })
+        }
+      ),
+      Array.from({ length: t }, (C, w) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: 表示目的の単純なリスト
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "font-mono text-xs font-medium text-slate-700", children: w + 1 }),
+            b && !u && /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => n(w),
+                className: "absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full border border-red-300 bg-red-100 text-red-600 hover:bg-red-200",
+                title: `カラム ${w + 1} を削除`,
+                children: /* @__PURE__ */ e.jsx($e, { className: "h-2.5 w-2.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => c && o(w + 1),
+              disabled: !c || u,
+              className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${c && !u ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"}`,
+              title: "この位置に新しいカラムを挿入",
+              children: /* @__PURE__ */ e.jsx(de, { className: "h-4 w-4" })
+            }
+          )
+        ] }, `column-${w}`)
+      ))
+    ] })
+  ] });
+}, tt = ({ config: t, onConfigChange: o, isVisible: n, onToggleVisibility: l }) => n ? /* @__PURE__ */ e.jsxs("div", { className: "fixed right-4 bottom-4 z-50 max-w-sm rounded-lg border border-gray-300 bg-white p-4 shadow-xl", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+    /* @__PURE__ */ e.jsx("h3", { className: "font-bold text-gray-800 text-sm", children: "🛠️ デバッグ設定" }),
+    /* @__PURE__ */ e.jsx("button", { type: "button", onClick: l, className: "text-gray-500 text-lg hover:text-gray-700", title: "閉じる", children: "✕" })
+  ] }),
+  /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: t.showDebugPanel ?? !1,
+          onChange: (r) => o({
+            ...t,
+            showDebugPanel: r.target.checked
+          }),
+          className: "rounded"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { children: "デバッグパネル表示" })
+    ] }),
+    /* @__PURE__ */ e.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: t.showMousePosition ?? !1,
+          onChange: (r) => o({
+            ...t,
+            showMousePosition: r.target.checked
+          }),
+          className: "rounded"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { children: "マウス位置表示" })
+    ] }),
+    /* @__PURE__ */ e.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: t.showPanelSizes ?? !1,
+          onChange: (r) => o({
+            ...t,
+            showPanelSizes: r.target.checked
+          }),
+          className: "rounded"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { children: "パネルサイズ情報" })
+    ] }),
+    /* @__PURE__ */ e.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: t.showPlaceholderInfo ?? !1,
+          onChange: (r) => o({
+            ...t,
+            showPlaceholderInfo: r.target.checked
+          }),
+          className: "rounded"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { children: "プレースホルダー詳細" })
+    ] }),
+    /* @__PURE__ */ e.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: t.showDropZoneOutlines ?? !1,
+          onChange: (r) => o({
+            ...t,
+            showDropZoneOutlines: r.target.checked
+          }),
+          className: "rounded"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { children: "ドロップゾーン境界" })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "border-gray-200 border-t pt-2", children: [
+      /* @__PURE__ */ e.jsxs("label", { htmlFor: "log-level-slider", className: "mb-1 block text-sm", children: [
+        "ログレベル: ",
+        t.logLevel ?? 0
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          id: "log-level-slider",
+          type: "range",
+          min: "0",
+          max: "2",
+          value: t.logLevel ?? 0,
+          onChange: (r) => o({
+            ...t,
+            logLevel: parseInt(r.target.value)
+          }),
+          className: "w-full",
+          "aria-label": "ログレベル設定"
+        }
+      ),
+      /* @__PURE__ */ e.jsxs("div", { className: "mt-1 flex justify-between text-gray-500 text-xs", children: [
+        /* @__PURE__ */ e.jsx("span", { children: "無効" }),
+        /* @__PURE__ */ e.jsx("span", { children: "基本" }),
+        /* @__PURE__ */ e.jsx("span", { children: "詳細" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "space-y-2 pt-2", children: [
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => o({
+            showDebugPanel: !0,
+            showMousePosition: !0,
+            showPanelSizes: !0,
+            showPlaceholderInfo: !0,
+            showDropZoneOutlines: !0,
+            logLevel: 2
+          }),
+          className: "w-full rounded bg-blue-100 px-2 py-1 text-blue-700 text-sm transition-colors hover:bg-blue-200",
+          children: "すべて有効"
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => o({
+            showDebugPanel: !1,
+            showMousePosition: !1,
+            showPanelSizes: !1,
+            showPlaceholderInfo: !1,
+            showDropZoneOutlines: !1,
+            logLevel: 0
+          }),
+          className: "w-full rounded bg-gray-100 px-2 py-1 text-gray-700 text-sm transition-colors hover:bg-gray-200",
+          children: "すべて無効"
+        }
+      )
+    ] })
+  ] })
+] }) : /* @__PURE__ */ e.jsx("button", { type: "button", onClick: l, className: "fixed right-4 bottom-4 z-50 rounded-lg bg-gray-800 p-2 text-white shadow-lg transition-colors hover:bg-gray-700", title: "デバッグ設定を開く", children: "🛠️" }), nt = ({ isResponsiveMode: t, responsiveColumnCount: o, currentColumnCount: n, screenWidth: l, onToggleResponsive: r }) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1", children: [
+  /* @__PURE__ */ e.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${t ? "border border-blue-300 bg-blue-100 text-blue-700" : "border border-slate-300 text-slate-600 hover:bg-blue-50 hover:text-blue-600"}`,
+      title: t ? "レスポンシブモードを無効化" : "レスポンシブモードを有効化",
+      children: [
+        t ? /* @__PURE__ */ e.jsx(Re, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(_e, { className: "h-3 w-3" }),
+        /* @__PURE__ */ e.jsx("span", { children: t ? "レスポンシブ" : "固定" })
+      ]
+    }
+  ),
+  t && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 text-slate-600 text-xs", children: [
+    /* @__PURE__ */ e.jsxs("span", { className: "font-mono", children: [
+      l,
+      "px"
+    ] }),
+    /* @__PURE__ */ e.jsx("span", { children: "→" }),
+    /* @__PURE__ */ e.jsxs("span", { className: "font-semibold text-blue-600", children: [
+      o,
+      "列"
+    ] }),
+    o !== n && /* @__PURE__ */ e.jsx("span", { className: "text-orange-600", children: "(変更予定)" })
+  ] })
+] }), ne = {
+  prefix: "column",
+  startIndex: 1,
+  separator: "_"
+}, ie = (t, o = ne) => {
+  const { prefix: n, startIndex: l, separator: r } = o, u = t + l;
+  return `${n}${r}${u}`;
+}, Pe = (t, o = ne) => Array.from({ length: t }, (n, l) => ie(l, o)), ce = (t, o = ne) => {
+  const { prefix: n, startIndex: l, separator: r } = o, u = `${n}${r}`;
+  if (!t.startsWith(u))
+    return null;
+  const d = t.slice(u.length), c = parseInt(d, 10);
+  return Number.isNaN(c) || c < l ? null : c - l;
+}, rt = (t, o = ne) => ce(t, o) !== null, st = (t, o = ne) => {
+  const n = t.map((l) => ce(l, o)).filter((l) => l !== null).sort((l, r) => l - r);
+  for (let l = 0; l < n.length; l++)
+    if (n[l] !== l)
+      return ie(l, o);
+  return ie(n.length, o);
+}, Xe = (t, o = ne) => t.sort((n, l) => {
+  const r = ce(n, o) ?? -1, u = ce(l, o) ?? -1;
+  return r - u;
+}), ot = (t, o = ne) => {
+  const n = {};
+  return t.forEach((l, r) => {
+    const u = ie(r, o);
+    n[l] = u;
+  }), n;
+}, Fe = (t, o, n = ne) => {
+  const l = [];
+  Object.values(t).forEach((d) => {
+    l.push(...d);
+  });
+  const r = {}, u = Pe(o, n);
+  return u.forEach((d) => {
+    r[d] = [];
+  }), l.forEach((d, c) => {
+    const b = c % o, C = u[b];
+    r[C].push(d);
+  }), r;
+}, lt = ({ initialColumns: t, initialPanels: o, debug: n = {}, onLayoutChange: l }) => {
+  const [r, u] = ee(() => {
+    const h = {};
+    for (const f of t)
+      h[f.id] = f.initialWidth || 400;
+    return {
+      columns: t,
+      columnWidths: h,
+      isResizing: !1,
+      resizingColumn: null,
+      columnPanels: o,
+      showInsertPlaceholders: !1
+    };
+  }), d = H(0), c = H(0);
+  G(() => {
+    l?.(r);
+  }, [r, l]);
+  const b = P(
+    (h, f) => {
+      S(n, 1, "カラム追加:", h.id, "at position:", f), u((v) => {
+        const N = [...v.columns], j = f ?? N.length;
+        N.splice(j, 0, h);
+        const i = {
+          ...v.columnWidths,
+          [h.id]: h.initialWidth || 400
+        }, g = {
+          ...v.columnPanels,
+          [h.id]: []
+        };
+        return {
+          ...v,
+          columns: N,
+          columnWidths: i,
+          columnPanels: g
+        };
+      });
+    },
+    [n]
+  ), C = P(
+    (h) => {
+      S(n, 1, "カラム削除:", h), u((f) => {
+        const v = f.columnPanels[h] || [], N = f.columns.filter((E) => E.id !== h);
+        if (N.length === 0)
+          return S(n, 1, "警告: 最後のカラムを削除しようとしています"), f;
+        const j = N[0].id, i = { ...f.columnPanels };
+        v.length > 0 && (i[j] = [...i[j], ...v]), delete i[h];
+        const g = { ...f.columnWidths };
+        return delete g[h], {
+          ...f,
+          columns: N,
+          columnWidths: g,
+          columnPanels: i
+        };
+      });
+    },
+    [n]
+  ), w = P(
+    (h, f) => {
+      S(n, 1, "カラム移動:", h, "->", f), u((v) => {
+        const N = [...v.columns], [j] = N.splice(h, 1);
+        return N.splice(f, 0, j), {
+          ...v,
+          columns: N
+        };
+      });
+    },
+    [n]
+  ), M = P(
+    (h, f) => {
+      S(n, 2, "リサイズ開始:", h, "at X:", f), d.current = f, c.current = r.columnWidths[h] || 300, u((v) => ({
+        ...v,
+        isResizing: !0,
+        resizingColumn: h
+      }));
+    },
+    [n, r.columnWidths]
+  ), T = P(
+    (h) => {
+      const { resizingColumn: f, isResizing: v } = r;
+      if (!(v && f)) return;
+      const N = h - d.current, j = Math.max(100, Math.min(800, c.current + N));
+      S(n, 2, "リサイズ中:", f, "new width:", j), u((i) => ({
+        ...i,
+        columnWidths: {
+          ...i.columnWidths,
+          [f]: j
+        }
+      }));
+    },
+    [n, r]
+  ), s = P(() => {
+    S(n, 2, "リサイズ終了"), u((h) => ({
+      ...h,
+      isResizing: !1,
+      resizingColumn: null
+    }));
+  }, [n]), y = P(
+    (h, f) => {
+      S(n, 2, "カラム幅設定:", h, f), u((v) => ({
+        ...v,
+        columnWidths: {
+          ...v.columnWidths,
+          [h]: Math.max(100, Math.min(800, f))
+        }
+      }));
+    },
+    [n]
+  ), D = P(() => {
+    S(n, 1, "カラム幅リセット"), u((h) => {
+      const f = {};
+      for (const v of h.columns)
+        f[v.id] = v.initialWidth || 400;
+      return {
+        ...h,
+        columnWidths: f
+      };
+    });
+  }, [n]), m = P(
+    (h, f, v, N) => {
+      S(n, 1, "パネル移動:", h, "from", f, "to", v, "at", N), u((j) => {
+        const i = { ...j.columnPanels };
+        if (f in i && (i[f] = i[f].filter((g) => g !== h)), v in i) {
+          const g = [...i[v]];
+          g.splice(N, 0, h), i[v] = g;
+        }
+        return {
+          ...j,
+          columnPanels: i
+        };
+      });
+    },
+    [n]
+  ), O = P(
+    (h, f, v) => {
+      S(n, 1, "パネル追加:", h, "to column:", f), u((N) => {
+        const j = { ...N.columnPanels };
+        f in j || (j[f] = []);
+        const i = [...j[f]], g = v ?? i.length;
+        return i.splice(g, 0, h), j[f] = i, {
+          ...N,
+          columnPanels: j
+        };
+      });
+    },
+    [n]
+  ), F = P(
+    (h) => {
+      S(n, 1, "パネル削除:", h), u((f) => {
+        const v = {};
+        for (const [N, j] of Object.entries(f.columnPanels))
+          v[N] = j.filter((i) => i !== h);
+        return {
+          ...f,
+          columnPanels: v
+        };
+      });
+    },
+    [n]
+  ), U = P(
+    (h) => {
+      S(n, 1, "カラム数更新:", h), u((f) => {
+        const v = f.columns.length;
+        if (h === v) return f;
+        const N = Fe(
+          f.columnPanels,
+          h,
+          ne
+        ), j = Pe(h, ne), i = f.isResizing && f.resizingColumn && !j.includes(f.resizingColumn);
+        i && S(n, 1, "リサイズ中のカラムが削除されるためリサイズを強制終了:", f.resizingColumn);
+        const g = j.map((Y, V) => ({
+          id: Y,
+          title: `カラム ${V + 1}`,
+          minWidth: 350,
+          maxWidth: 800,
+          initialWidth: 400,
+          resizable: !(V === 1 && h === 3)
+        })), E = {};
+        if (Object.entries(f.columnWidths).some(([, Y]) => Y !== 400))
+          j.forEach((Y) => {
+            const V = f.columnWidths[Y];
+            V && V !== 400 ? E[Y] = V : E[Y] = 400;
+          });
+        else {
+          const Y = v > h ? Object.values(f.columnWidths).reduce((a, p) => a + p, 0) : h * 400, V = Math.max(Y / h, 350);
+          j.forEach((a) => {
+            E[a] = V;
+          });
+        }
+        return {
+          ...f,
+          columns: g,
+          columnPanels: N,
+          columnWidths: E,
+          isResizing: i ? !1 : f.isResizing,
+          resizingColumn: i ? null : f.resizingColumn
+        };
+      });
+    },
+    [n]
+  ), B = P(() => {
+    S(n, 1, "カラム自動バランス調整"), u((h) => {
+      const f = [];
+      for (const j of Object.keys(h.columnPanels))
+        for (const i of h.columnPanels[j])
+          f.push(i);
+      const v = {};
+      for (const j of h.columns)
+        v[j.id] = [];
+      let N = 0;
+      for (const j of f) {
+        const i = h.columns[N % h.columns.length].id;
+        v[i].push(j), N += 1;
+      }
+      return {
+        ...h,
+        columnPanels: v
+      };
+    });
+  }, [n]), k = P(
+    (h) => r.columns.find((f) => f.id === h),
+    [r.columns]
+  ), I = P(() => {
+    let h = 0;
+    for (const f of Object.values(r.columnWidths))
+      h += f;
+    return h;
+  }, [r.columnWidths]), X = P((h) => document.querySelector(`[data-column-id="${h}"]`), []), Q = P((h) => {
+    u((f) => ({
+      ...f,
+      showInsertPlaceholders: h
+    }));
+  }, []);
+  return {
+    layoutState: r,
+    addColumn: b,
+    removeColumn: C,
+    moveColumn: w,
+    startResize: M,
+    handleResize: T,
+    endResize: s,
+    setColumnWidth: y,
+    resetColumnWidths: D,
+    movePanel: m,
+    addPanel: O,
+    removePanel: F,
+    updateColumnCount: U,
+    autoBalanceColumns: B,
+    getColumnById: k,
+    getTotalWidth: I,
+    getColumnElement: X,
+    setShowInsertPlaceholders: Q
+  };
+}, ue = {
+  triggerDistance: 80,
+  scrollSpeed: 5,
+  maxScrollSpeed: 20
+}, pe = (t, o, n = ue, l) => {
+  const { triggerDistance: r, scrollSpeed: u, maxScrollSpeed: d } = n;
+  let c;
+  l ? c = l.getBoundingClientRect() : c = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+  const { left: b, top: C, right: w, bottom: M } = c;
+  let T = 0, s = 0;
+  if (t >= b && t <= w && o >= C && o <= M) {
+    if (t < b + r) {
+      const y = Math.max(0, (b + r - t) / r);
+      T = -Math.min(d, u + y * (d - u));
+    } else if (t > w - r) {
+      const y = Math.max(0, (t - (w - r)) / r);
+      T = Math.min(d, u + y * (d - u));
+    }
+    if (o < C + r) {
+      const y = Math.max(0, (C + r - o) / r);
+      s = -Math.min(d, u + y * (d - u));
+    } else if (o > M - r) {
+      const y = Math.max(0, (o - (M - r)) / r);
+      s = Math.min(d, u + y * (d - u));
+    }
+  }
+  return { x: T, y: s };
+}, He = (t, o) => {
+  (t.x !== 0 || t.y !== 0) && (o ? o.scrollBy(t.x, t.y) : window.scrollBy(t.x, t.y));
+};
+class De {
+  constructor(o = ue, n) {
+    this.intervalId = null, this.isActive = !1, this.config = o, this.scrollElement = n;
+  }
+  setScrollElement(o) {
+    this.scrollElement = o;
+  }
+  start(o, n) {
+    this.isActive || (this.isActive = !0, this.intervalId = window.setInterval(() => {
+      const l = pe(o, n, this.config, this.scrollElement);
+      He(l, this.scrollElement);
+    }, 16));
+  }
+  update(o, n) {
+    const l = pe(o, n, this.config, this.scrollElement);
+    (l.x !== 0 || l.y !== 0) && !this.isActive ? this.start(o, n) : l.x === 0 && l.y === 0 && this.isActive && this.stop();
+  }
+  stop() {
+    this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null), this.isActive = !1;
+  }
+  isScrolling() {
+    return this.isActive;
+  }
+  updateConfig(o) {
+    this.config = o;
+  }
+}
+const qe = ({
+  debugConfig: t,
+  dragState: o,
+  customDrag: n,
+  clickState: l,
+  dragModes: r,
+  isMouseDown: u,
+  dragOverPosition: d,
+  setCustomDrag: c,
+  setDragState: b,
+  setDragOverPosition: C,
+  setOriginalPanelPosition: w,
+  setClickState: M,
+  setIsMouseDown: T,
+  findPanelPosition: s,
+  performPanelMove: y,
+  showMousePosition: D,
+  updateMousePosition: m,
+  recordMouseDown: O,
+  recordClickPosition: F,
+  isVirtualClick: U,
+  calculateMoveDistance: B,
+  clearMouseTracking: k,
+  resetDragState: I,
+  resetClickState: X,
+  createDragImage: Q,
+  updateDragImagePosition: h,
+  removeDragImage: f,
+  handlePlaceholderDragEnter: v,
+  handlePlaceholderDragLeave: N
+}) => {
+  const j = H(t);
+  j.current = t;
+  const i = H(null), g = H(null), E = H(0), $ = H(new De(ue));
+  G(() => {
+    const p = document.querySelector("main.max-w-full.flex-1.overflow-auto");
+    p && $.current.setScrollElement(p);
+  }, []);
+  const L = H(d);
+  G(() => {
+    L.current = d, S(j.current, 2, "dragOverPositionRef更新:", d);
+  }, [d]);
+  const Y = P(
+    (p) => {
+      if (n.isActive || l.isClicked) {
+        p.preventDefault();
+        const A = window.getSelection();
+        A && A.rangeCount > 0 && A.removeAllRanges();
+      }
+      if (n.isActive) {
+        m(p.clientX, p.clientY), h(p.clientX, p.clientY), $.current.update(p.clientX, p.clientY);
+        const A = document.elementFromPoint(p.clientX, p.clientY), q = A?.closest("[data-drop-zone]");
+        if (q) {
+          document.body.classList.add("droppable");
+          const x = q.getAttribute("data-column-index"), z = x ? parseInt(x) : null;
+          z !== null && z !== o.dragOverColumn && b((Z) => ({ ...Z, dragOverColumn: z }));
+          const R = A?.closest("[data-placeholder-index]");
+          if (R) {
+            const Z = R.getAttribute("data-placeholder-index"), K = R.getAttribute("data-placeholder-column");
+            if (Z && K) {
+              const W = parseInt(Z), J = parseInt(K);
+              v(J, W);
+            }
+          } else
+            N();
+        } else
+          document.body.classList.remove("droppable"), C(null), b((x) => ({ ...x, dragOverColumn: null }));
+      } else if (u && l.isClicked && l.panelId) {
+        if (r[l.panelId] !== "custom" || B(p.clientX, p.clientY) < 10) return;
+        S(j.current, 1, "🚀 カスタムドラッグ開始 -", l.panelId);
+        const q = document.querySelector(`[data-panel-id="${l.panelId}"]`);
+        if (q && g.current) {
+          const x = q.getBoundingClientRect(), z = g.current.x - x.left, R = g.current.y - x.top;
+          Q(l.panelId, z, R), document.body.classList.add("custom-dragging"), c({
+            isActive: !0,
+            panelId: l.panelId,
+            startX: z,
+            startY: R
+          });
+        }
+        b({ isDragging: !0, draggedPanel: l.panelId, dragOverColumn: null }), w(s(l.panelId)), D(p.clientX, p.clientY), M({ isClicked: !1, panelId: null }), T(!1), k(), g.current = null, i.current && (clearTimeout(i.current), i.current = null);
+      }
+    },
+    [
+      n.isActive,
+      l,
+      o.dragOverColumn,
+      r,
+      u,
+      m,
+      b,
+      C,
+      B,
+      s,
+      c,
+      w,
+      D,
+      M,
+      T,
+      k,
+      Q,
+      h,
+      v,
+      N
+    ]
+  ), V = P(
+    (p) => {
+      if (S(j.current, 1, "🐭 カスタムドラッグハンドラー - グローバルマウスアップ", {
+        isActive: n.isActive,
+        panelId: n.panelId,
+        dragMode: n.panelId ? r[n.panelId] : "unknown"
+      }), n.isActive) {
+        $.current.stop();
+        const A = L.current;
+        if (A) {
+          const x = document.elementFromPoint(p.clientX, p.clientY)?.closest("[data-drop-zone]");
+          if (x) {
+            const z = x.getAttribute("data-column-key");
+            z && r[n.panelId] === "custom" ? (S(j.current, 1, "🔄 カスタムドラッグパネル移動実行:", n.panelId, "→", z), y(n.panelId, z, A.insertIndex)) : S(j.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", n.panelId, "モード:", r[n.panelId]);
+          }
+        }
+        f(), document.body.classList.remove("custom-dragging", "droppable"), I(), E.current = 0;
+      } else if (U(p.clientX, p.clientY)) {
+        const q = document.elementFromPoint(p.clientX, p.clientY)?.closest("[data-panel-id]"), x = q?.getAttribute("data-panel-id") ?? null;
+        if (!q || !x || r[x] !== "custom") {
+          i.current && (clearTimeout(i.current), i.current = null), X(), g.current = null, E.current = 0;
+          return;
+        }
+        E.current += 1, l.isClicked === !1 && E.current === 1 ? (S(j.current, 1, "🖱️ 仮想クリック検出 - ドラッグ待機状態へ:", x), M({ isClicked: !0, panelId: x }), i.current = window.setTimeout(() => {
+          S(j.current, 1, "⏳ クリック待機状態を自動解除:", x), X(), g.current = null, E.current = 0;
+        }, 2e3)) : (S(j.current, 1, "🚫 クリック待機状態を解除 - 仮想クリック検出停止:", x), i.current && (clearTimeout(i.current), i.current = null), X(), g.current = null, E.current = 0, i.current = window.setTimeout(() => {
+          S(j.current, 1, "⏳ 仮想クリック検出再開:", x);
+        }, 2e3));
+      } else l.isClicked && (X(), g.current = null, E.current = 0);
+      u && T(!1);
+    },
+    [
+      n.isActive,
+      n.panelId,
+      l,
+      r,
+      u,
+      y,
+      I,
+      X,
+      U,
+      M,
+      T,
+      f
+    ]
+  ), a = P(
+    (p, A) => {
+      if (r[A] !== "custom") {
+        S(j.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", A);
+        return;
+      }
+      O(p.clientX, p.clientY), l.isClicked && l.panelId === A && (T(!0), i.current !== null && (clearTimeout(i.current), i.current = null), F(p.clientX, p.clientY), g.current = { x: p.clientX, y: p.clientY });
+    },
+    [l, r, O, T, F]
+  );
+  return G(() => () => {
+    i.current !== null && clearTimeout(i.current), $.current.stop();
+  }, []), {
+    handleGlobalMouseMove: Y,
+    handleGlobalMouseUp: V,
+    handleMouseDown: a
+  };
+}, Ue = () => {
+  const [t, o] = ee({
+    x: 0,
+    y: 0,
+    isVisible: !1
+  }), n = H(null), l = H(0), r = H(null), u = P((s, y) => {
+    o({ x: s, y, isVisible: !0 });
+  }, []), d = P(() => {
+    o((s) => ({ ...s, isVisible: !1 }));
+  }, []), c = P((s, y) => {
+    o((D) => D.x === s && D.y === y ? D : {
+      x: s,
+      y,
+      isVisible: D.isVisible
+    });
+  }, []), b = P((s, y) => {
+    l.current = Date.now(), r.current = { x: s, y };
+  }, []), C = P((s, y) => {
+    n.current = { x: s, y };
+  }, []), w = P((s, y, D = 500, m = 5) => Date.now() - (l.current || 0) >= D || !r.current ? !1 : Math.sqrt((s - r.current.x) ** 2 + (y - r.current.y) ** 2) < m, []), M = P((s, y) => {
+    if (!n.current)
+      return 0;
+    const D = Math.abs(s - n.current.x), m = Math.abs(y - n.current.y);
+    return Math.sqrt(D * D + m * m);
+  }, []), T = P(() => {
+    n.current = null, l.current = 0, r.current = null;
+  }, []);
+  return {
+    mousePosition: t,
+    lastClickPosition: n.current,
+    mouseDownTime: l.current,
+    mouseDownPosition: r.current,
+    showMousePosition: u,
+    hideMousePosition: d,
+    updateMousePosition: c,
+    recordMouseDown: b,
+    recordClickPosition: C,
+    isVirtualClick: w,
+    calculateMoveDistance: M,
+    clearMouseTracking: T
+  };
+}, Ie = () => {
+  const [t, o] = ee({
+    isDragging: !1,
+    draggedPanel: null,
+    dragOverColumn: null
+  }), [n, l] = ee(null), [r, u] = ee(null), [d, c] = ee({
+    isActive: !1,
+    panelId: "",
+    startX: 0,
+    startY: 0
+  }), [b, C] = ee({
+    isClicked: !1,
+    panelId: null
+  }), [w, M] = ee({
+    isTouchDragging: !1,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    draggedElement: null
+  }), [T, s] = ee(!1), y = P(() => {
+    c({ isActive: !1, panelId: "", startX: 0, startY: 0 }), o({ isDragging: !1, draggedPanel: null, dragOverColumn: null }), l(null), u(null);
+  }, []), D = P(() => {
+    C({ isClicked: !1, panelId: null }), s(!1);
+  }, []), m = P((X) => {
+    o(X);
+  }, []), O = P((X) => {
+    l(X);
+  }, []), F = P((X) => {
+    u(X);
+  }, []), U = P((X) => {
+    c(X);
+  }, []), B = P((X) => {
+    C(X);
+  }, []), k = P((X) => {
+    M(X);
+  }, []), I = P((X) => {
+    s(X);
+  }, []);
+  return {
+    // States / 状態
+    dragState: t,
+    dragOverPosition: n,
+    originalPanelPosition: r,
+    customDrag: d,
+    clickState: b,
+    touchDragState: w,
+    isMouseDown: T,
+    // Stabilized Setters / 安定化されたセッター
+    setDragState: m,
+    setDragOverPosition: O,
+    setOriginalPanelPosition: F,
+    setCustomDrag: U,
+    setClickState: B,
+    setTouchDragState: k,
+    setIsMouseDown: I,
+    // Utility Functions / ユーティリティ関数
+    resetDragState: y,
+    resetClickState: D
+  };
+}, Ve = ({
+  debugConfig: t,
+  dragState: o,
+  customDrag: n,
+  dragModes: l,
+  columnPanels: r,
+  dragOverPosition: u,
+  originalPanelPosition: d,
+  setDragState: c,
+  setDragOverPosition: b,
+  setOriginalPanelPosition: C,
+  performPanelMove: w,
+  showMousePosition: M,
+  updateMousePosition: T,
+  resetDragState: s,
+  handlePlaceholderDragEnter: y,
+  handlePlaceholderDragLeave: D
+}) => {
+  const m = H(t);
+  m.current = t;
+  const O = H(r);
+  O.current = r;
+  const F = H(o);
+  F.current = o;
+  const U = H(u);
+  U.current = u;
+  const B = H(d);
+  B.current = d;
+  const k = H(new De(ue));
+  G(() => {
+    const v = document.querySelector("main.max-w-full.flex-1.overflow-auto");
+    v && k.current.setScrollElement(v);
+  }, []);
+  const I = P(
+    (v, N) => {
+      if (n.isActive) {
+        S(m.current, 2, "カスタムドラッグアクティブ中 - 通常ドラッグを無効化:", N), v.preventDefault();
+        return;
+      }
+      if (l[N] === "custom") {
+        S(m.current, 2, "カスタムドラッグモード - 通常ドラッグを無効化:", N), v.preventDefault();
+        return;
+      }
+      S(m.current, 1, "ドラッグ開始:", N);
+      const j = Object.keys(O.current);
+      let i = null;
+      for (let g = 0; g < j.length; g++) {
+        const E = j[g], $ = O.current[E].indexOf(N);
+        if ($ !== -1) {
+          i = { columnIndex: g, panelIndex: $ };
+          break;
+        }
+      }
+      C(i), v.dataTransfer && (v.dataTransfer.setData("text/plain", N), v.dataTransfer.effectAllowed = "move"), M(v.clientX, v.clientY), requestAnimationFrame(() => {
+        c({
+          isDragging: !0,
+          draggedPanel: N,
+          dragOverColumn: null
+        });
+      });
+    },
+    [l, n.isActive, C, M, c]
+  ), X = P(() => {
+    S(m.current, 1, "ドラッグ終了"), k.current.stop(), s();
+  }, [s]), Q = P(
+    (v, N) => {
+      if (v.preventDefault(), v.dataTransfer.dropEffect = "move", !F.current.isDragging) return;
+      T(v.clientX, v.clientY), N !== F.current.dragOverColumn && c((g) => ({ ...g, dragOverColumn: N }));
+      const j = document.elementFromPoint(v.clientX, v.clientY), i = j?.closest("[data-placeholder-index]");
+      if (i) {
+        const g = i.getAttribute("data-placeholder-index"), E = i.getAttribute("data-placeholder-column");
+        if (g && E) {
+          const $ = parseInt(g), L = parseInt(E);
+          y(L, $);
+        }
+      } else
+        j?.closest("[data-drop-zone]") || D();
+    },
+    [T, c, y, D]
+  ), h = P(
+    (v, N) => {
+      v.preventDefault();
+      const j = v.dataTransfer.getData("text/plain"), i = U.current;
+      j && i && (S(m.current, 1, "🎯 ドロップ完了:", {
+        draggedPanel: j,
+        targetColumn: N,
+        insertPosition: `カラム${i.columnIndex} - 位置${i.insertIndex}`
+      }), w(j, N, i.insertIndex), b(null), X());
+    },
+    [w, b, X]
+  ), f = P(
+    (v) => {
+      const N = v.currentTarget, j = v.relatedTarget;
+      j && N.contains(j) || (b(null), c((i) => ({ ...i, dragOverColumn: null })));
+    },
+    [b, c]
+  );
+  return G(() => {
+    const v = (N) => {
+      F.current.isDragging && (T(N.clientX, N.clientY), k.current.update(N.clientX, N.clientY));
+    };
+    if (o.isDragging)
+      return document.addEventListener("dragover", v), () => {
+        document.removeEventListener("dragover", v), k.current.stop();
+      };
+  }, [o.isDragging, T]), G(() => () => {
+    k.current.stop();
+  }, []), {
+    handleDragStart: I,
+    handleDragEnd: X,
+    handleDragOverWithInsert: Q,
+    handleDropWithInsert: h,
+    handleColumnDragLeave: f
+  };
+}, Be = (t) => {
+  const [o, n] = ee(t), [l, r] = ee({}), u = H({}), d = H(null), c = H({ x: 0, y: 0 }), b = P((m) => document.querySelector(`[data-panel-id="${m}"]`), []), C = P(
+    (m, O) => {
+      const F = O.getBoundingClientRect(), U = window.getComputedStyle(O), B = {
+        width: Math.round(F.width),
+        height: Math.round(F.height),
+        x: Math.round(F.left),
+        y: Math.round(F.top),
+        minHeight: U.minHeight || "auto",
+        maxHeight: U.maxHeight || "none"
+      }, k = u.current[m];
+      (!k || Object.keys(B).some((I) => k[I] !== B[I])) && (u.current[m] = B, r((I) => ({
+        ...I,
+        [m]: B
+      })));
+    },
+    []
+    // setPanelSizes は React の state セッターなので依存配列に含める必要はありません
+  ), w = P(
+    (m) => {
+      const O = b(m);
+      O && C(m, O);
+    },
+    [b, C]
+  ), M = P(
+    (m, O) => {
+      O && requestAnimationFrame(() => C(m, O));
+    },
+    [C]
+  ), T = P(
+    (m, O, F) => {
+      const U = b(m);
+      if (!U || d.current) return;
+      const B = U.getBoundingClientRect(), k = U.cloneNode(!0);
+      k.style.position = "fixed", k.style.top = "0px", k.style.left = "0px", k.style.width = `${B.width}px`, k.style.height = `${B.height}px`, k.style.pointerEvents = "none", k.style.zIndex = "1000", k.style.opacity = "0.5", k.style.margin = "0", k.style.transition = "none", k.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)", k.style.transform = `translate(${B.left}px, ${B.top}px)`, k.id = `drag-image-${m}`, document.body.appendChild(k), d.current = k, c.current = { x: O, y: F };
+    },
+    [b]
+  ), s = P((m, O) => {
+    if (d.current) {
+      const F = m - c.current.x, U = O - c.current.y;
+      d.current.style.transform = `translate(${F}px, ${U}px) scale(1.05)`;
+    }
+  }, []), y = P(() => {
+    d.current && (d.current.remove(), d.current = null);
+  }, []), D = P((m) => {
+    n((O) => ({
+      ...O,
+      [m]: !O[m]
+    }));
+  }, []);
+  return {
+    // State / 状態
+    panelVisibility: o,
+    panelSizes: l,
+    // State update functions / 状態更新関数
+    setPanelVisibility: n,
+    setPanelSizes: r,
+    setPanelRef: M,
+    updatePanelSize: w,
+    togglePanelVisibility: D,
+    // Utility functions / ユーティリティ関数
+    getPanelElement: b,
+    // Functions for drag image management / ドラッグイメージ管理用の関数
+    createDragImage: T,
+    updateDragImagePosition: s,
+    removeDragImage: y
+  };
+}, at = ({
+  minColumnWidth: t = 350,
+  defaultColumns: o = 3,
+  maxColumns: n = 6,
+  minColumns: l = 1,
+  currentColumnWidths: r = {}
+} = {}) => {
+  const [u, d] = ee(0), c = H(0), b = H(null), [C, w] = ee(!1), M = H(o);
+  G(() => {
+    if (typeof window > "u")
+      return;
+    const y = () => {
+      const m = window.visualViewport?.width ?? 0, O = document?.documentElement?.clientWidth ?? 0, F = document?.body?.clientWidth ?? 0, U = window.innerWidth ?? 0;
+      return O > 0 ? Math.floor(O) : m > 0 ? Math.floor(m) : F > 0 ? Math.floor(F) : Math.floor(U);
+    }, D = () => {
+      b.current !== null && cancelAnimationFrame(b.current), b.current = requestAnimationFrame(() => {
+        const m = y();
+        b.current = null, m !== 0 && (Math.abs(c.current - m) < 2 || (c.current = m, d(m)));
+      });
+    };
+    return D(), window.addEventListener("resize", D), window.addEventListener("orientationchange", D), window.visualViewport?.addEventListener("resize", D), () => {
+      b.current !== null && cancelAnimationFrame(b.current), window.removeEventListener("resize", D), window.removeEventListener("orientationchange", D), window.visualViewport?.removeEventListener("resize", D);
+    };
+  }, []);
+  const T = ve(() => {
+    if (!C || u === 0)
+      return M.current = o, o;
+    const y = Math.max(u - 64, 0), D = 24, m = Object.values(r);
+    let O;
+    if (m.length > 0) {
+      const F = m.reduce((k, I) => k + I, 0) / m.length, U = Math.max(t, F);
+      O = Math.floor((y + D) / (U + D)), m.reduce((k, I) => k + I, 0) + (m.length - 1) * D > y && m.length > l && (O = Math.min(O, m.length - 1));
+    } else
+      O = Math.floor((y + D) / (t + D));
+    return O = Math.max(l, Math.min(n, O)), M.current === O ? M.current : (M.current = O, O);
+  }, [C, u, o, t, n, l, r]), s = P(() => {
+    w((y) => !y);
+  }, []);
+  return {
+    responsiveColumnCount: T,
+    isResponsiveMode: C,
+    screenWidth: u,
+    toggleResponsiveMode: s
+  };
+}, it = ({ initialColumnPanels: t, initialPanelVisibility: o, initialDragModes: n = {}, debugConfig: l, onPanelMove: r, onDragModeChange: u, onColumnPanelsChange: d }) => {
+  const c = H(l);
+  c.current = l;
+  const [b, C] = ee(t), [w, M] = ee(n), T = H(b);
+  T.current = b;
+  const s = Ie(), y = Ue(), D = Be(o), m = H({
+    mousemove: null,
+    mouseup: null
+  }), O = P((i) => {
+    const g = Object.keys(T.current), E = Xe(g, ne);
+    for (let $ = 0; $ < E.length; $++) {
+      const L = E[$], Y = T.current[L]?.indexOf(i) ?? -1;
+      if (Y !== -1)
+        return { columnIndex: $, panelIndex: Y };
+    }
+    return null;
+  }, []), F = P(
+    (i, g, E) => {
+      S(c.current, 1, "🔄 パネル移動実行:", i, "→", g, "@", E), C(($) => {
+        const L = { ...$ }, Y = Object.keys(L).find((V) => L[V].includes(i));
+        if (!Y)
+          return console.error("Source column not found for panel:", i), $;
+        if (!L[g])
+          return console.error("Target column not found:", g), $;
+        if (Y === g) {
+          const V = [...L[Y]], a = V.indexOf(i), [p] = V.splice(a, 1), A = a < E ? E - 1 : E;
+          V.splice(A, 0, p), L[g] = V;
+        } else {
+          L[Y] = L[Y].filter((a) => a !== i);
+          const V = [...L[g]];
+          V.splice(E, 0, i), L[g] = V;
+        }
+        if (S(c.current, 1, "✅ パネル移動完了:", i, "→", g), d && requestAnimationFrame(() => {
+          d(L);
+        }), r) {
+          const V = Object.keys($).find((a) => $[a].includes(i));
+          V && requestAnimationFrame(() => {
+            r(i, V, g, E);
+          });
+        }
+        return L;
+      });
+    },
+    [d, r]
+  ), U = P(
+    (i, g) => {
+      if (!s.dragState.isDragging && !s.customDrag.isActive) return;
+      const E = s.originalPanelPosition;
+      if (E && E.columnIndex === i && (E.panelIndex === g || E.panelIndex + 1 === g)) {
+        S(c.current, 1, `元の位置への挿入をスキップ: カラム${i}, 位置${g}`);
+        return;
+      }
+      const $ = s.dragOverPosition;
+      (!$ || $.columnIndex !== i || $.insertIndex !== g) && (S(c.current, 1, `プレースホルダーエンター: カラム${i}, 位置${g}`), s.setDragOverPosition({ columnIndex: i, insertIndex: g }), s.setDragState((L) => ({ ...L, dragOverColumn: i })));
+    },
+    [s]
+  ), B = P(
+    (i, g, E) => {
+      if (!(!s.dragState.isDragging && !s.customDrag.isActive)) {
+        if (s.customDrag.isActive)
+          S(c.current, 1, "🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"), s.setDragOverPosition(null);
+        else if (s.dragState.isDragging && i && g !== void 0 && E !== void 0) {
+          const $ = s.dragOverPosition;
+          if ($ && $.columnIndex === g && $.insertIndex === E) {
+            const L = i.currentTarget, Y = i.relatedTarget;
+            Y && L.contains(Y) || (S(c.current, 1, `ノーマルドラッグ - プレースホルダーリーブ: カラム${g}, 位置${E}。ハイライトを解除します。`), s.setDragOverPosition(null));
+          }
+        }
+      }
+    },
+    [s]
+  ), k = qe({
+    debugConfig: c.current,
+    dragState: s.dragState,
+    customDrag: s.customDrag,
+    clickState: s.clickState,
+    dragModes: w,
+    isMouseDown: s.isMouseDown,
+    originalPanelPosition: s.originalPanelPosition,
+    dragOverPosition: s.dragOverPosition,
+    setCustomDrag: s.setCustomDrag,
+    setDragState: s.setDragState,
+    setDragOverPosition: s.setDragOverPosition,
+    setOriginalPanelPosition: s.setOriginalPanelPosition,
+    setClickState: s.setClickState,
+    setIsMouseDown: s.setIsMouseDown,
+    findPanelPosition: O,
+    performPanelMove: F,
+    showMousePosition: y.showMousePosition,
+    updateMousePosition: y.updateMousePosition,
+    recordMouseDown: y.recordMouseDown,
+    recordClickPosition: y.recordClickPosition,
+    isVirtualClick: y.isVirtualClick,
+    calculateMoveDistance: y.calculateMoveDistance,
+    clearMouseTracking: y.clearMouseTracking,
+    resetDragState: s.resetDragState,
+    resetClickState: s.resetClickState,
+    createDragImage: D.createDragImage,
+    updateDragImagePosition: D.updateDragImagePosition,
+    removeDragImage: D.removeDragImage,
+    handlePlaceholderDragEnter: U,
+    handlePlaceholderDragLeave: B
+  }), I = Ve({
+    debugConfig: c.current,
+    dragState: s.dragState,
+    customDrag: s.customDrag,
+    dragModes: w,
+    columnPanels: b,
+    dragOverPosition: s.dragOverPosition,
+    originalPanelPosition: s.originalPanelPosition,
+    setDragState: s.setDragState,
+    setDragOverPosition: s.setDragOverPosition,
+    setOriginalPanelPosition: s.setOriginalPanelPosition,
+    performPanelMove: F,
+    showMousePosition: y.showMousePosition,
+    updateMousePosition: y.updateMousePosition,
+    resetDragState: s.resetDragState,
+    handlePlaceholderDragEnter: U,
+    handlePlaceholderDragLeave: B
+  }), X = P((i) => {
+    m.current.mousemove && m.current.mousemove(i);
+  }, []), Q = P((i) => {
+    m.current.mouseup && m.current.mouseup(i);
+  }, []);
+  G(() => (S(c.current, 1, "🔧 グローバルイベントリスナー初期化 - refベース管理開始"), document.addEventListener("mousemove", X), document.addEventListener("mouseup", Q), () => {
+    S(c.current, 1, "🔴 グローバルイベントリスナー終了 - refベース管理終了"), document.removeEventListener("mousemove", X), document.removeEventListener("mouseup", Q);
+  }), [X, Q]), G(() => {
+    const i = !s.clickState.isClicked && Object.entries(w).some(([, E]) => E === "custom"), g = s.clickState.isClicked && s.clickState.panelId;
+    if (i || g) {
+      const E = i ? "パターン1（仮想クリック検出）" : "パターン2,3（ドラッグ準備）";
+      S(c.current, 1, `🔧 イベントハンドラー設定開始: ${E}`), m.current.mousemove = k.handleGlobalMouseMove, m.current.mouseup = k.handleGlobalMouseUp;
+    } else
+      s.customDrag.isActive || s.dragState.isDragging || (m.current.mousemove = null, m.current.mouseup = null);
+  }, [s.clickState.isClicked, s.clickState.panelId, w, s.customDrag.isActive, s.dragState.isDragging, k.handleGlobalMouseMove, k.handleGlobalMouseUp]);
+  const h = P(
+    (i, g) => {
+      const E = i.touches[0], $ = i.currentTarget;
+      s.setTouchDragState({
+        isTouchDragging: !0,
+        startX: E.clientX,
+        startY: E.clientY,
+        currentX: E.clientX,
+        currentY: E.clientY,
+        draggedElement: $
+      }), s.setDragState({
+        isDragging: !0,
+        draggedPanel: g,
+        dragOverColumn: null
+      });
+    },
+    [s]
+  ), f = P(
+    (i) => {
+      if (!s.touchDragState.isTouchDragging) return;
+      i.preventDefault();
+      const g = i.touches[0];
+      s.setTouchDragState((E) => ({
+        ...E,
+        currentX: g.clientX,
+        currentY: g.clientY
+      }));
+    },
+    [s.touchDragState.isTouchDragging, s]
+  ), v = P(
+    (i) => {
+      s.touchDragState.isTouchDragging && (s.setTouchDragState({
+        isTouchDragging: !1,
+        startX: 0,
+        startY: 0,
+        currentX: 0,
+        currentY: 0,
+        draggedElement: null
+      }), I.handleDragEnd());
+    },
+    [s.touchDragState.isTouchDragging, s, I]
+  ), N = P(
+    (i) => {
+      S(c.current, 1, "🔄 toggleDragMode called:", { panelId: i }), M((g) => {
+        const $ = (g[i] || "normal") === "normal" ? "custom" : "normal", L = { ...g, [i]: $ };
+        if (u)
+          try {
+            u(i, $);
+          } catch (Y) {
+            console.error("🔄 Error in onDragModeChange:", Y);
+          }
+        return L;
+      });
+    },
+    [u]
+  ), j = P((i, g) => {
+    i.stopPropagation(), S(c.current, 2, "パネルサイズ情報クリック:", g);
+  }, []);
+  return {
+    // 状態
+    columnPanels: b,
+    panelVisibility: D.panelVisibility,
+    dragModes: w,
+    dragState: s.dragState,
+    dragOverPosition: s.dragOverPosition,
+    originalPanelPosition: s.originalPanelPosition,
+    touchDragState: s.touchDragState,
+    customDrag: s.customDrag,
+    clickState: s.clickState,
+    mousePosition: y.mousePosition,
+    panelSizes: D.panelSizes,
+    // 状態更新関数
+    setColumnPanels: C,
+    setPanelVisibility: D.setPanelVisibility,
+    setDragModes: M,
+    setPanelRef: D.setPanelRef,
+    // イベントハンドラー
+    handleDragStart: I.handleDragStart,
+    handleDragEnd: I.handleDragEnd,
+    handleMouseDown: k.handleMouseDown,
+    handleTouchStart: h,
+    handleTouchMove: f,
+    handleTouchEnd: v,
+    handlePlaceholderDragEnter: U,
+    handlePlaceholderDragLeave: B,
+    handleDragOverWithInsert: I.handleDragOverWithInsert,
+    handleDropWithInsert: I.handleDropWithInsert,
+    handleColumnDragLeave: I.handleColumnDragLeave,
+    handlePanelSizeInfoClick: j,
+    // ユーティリティ関数
+    toggleDragMode: N,
+    findPanelPosition: O
+  };
+}, ct = {
+  showDebugPanel: !1,
+  showMousePosition: !1,
+  showPanelSizes: !1,
+  showPlaceholderInfo: !1,
+  showDropZoneOutlines: !1,
+  logLevel: 0
+};
+export {
+  Ke as ColumnControlPanel,
+  et as ColumnInsertPanel,
+  ne as DEFAULT_COLUMN_ID_CONFIG,
+  ct as DEFAULT_DEBUG_CONFIG,
+  ue as DEFAULT_EDGE_SCROLL_CONFIG,
+  tt as DebugControlPanel,
+  Qe as DragDropLayout,
+  we as DropZoneDebugOverlay,
+  De as EdgeScrollManager,
+  ye as InsertPlaceholder,
+  Ye as PanelSizeDisplay,
+  Je as ResizableColumn,
+  je as ResizeHandle,
+  nt as ResponsiveControl,
+  pe as calculateScrollVector,
+  ot as createColumnIdMapping,
+  S as debugLog,
+  ie as generateColumnId,
+  Pe as generateColumnIds,
+  st as getNextColumnId,
+  rt as isValidColumnId,
+  Fe as normalizeColumnPanels,
+  ce as parseColumnId,
+  He as performScroll,
+  Xe as sortColumnIds,
+  lt as useColumnLayout,
+  qe as useCustomDragHandlers,
+  it as useDragDropColumns,
+  Ie as useDragDropState,
+  Ue as useMouseTracking,
+  Ve as useNormalDragHandlers,
+  Be as usePanelManagement,
+  at as useResponsiveColumns
+};