@aiquants/drag-drop-panels 0.3.0 → 0.4.0

package/dist/index.es.js

@@ -1,33 +1,33 @@
-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 = {};
-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) {
+import we, { useRef as H, useState as ee, useEffect as G, useCallback as P, memo as Se, useMemo as ye, useLayoutEffect as ke, Fragment as Ce } from "react";
+import { Eye as Oe, EyeOff as xe, MousePointerClick as Te, MousePointer as Me, Minus as Ae, Plus as me, Grid3X3 as $e, RotateCcw as Re, X as _e, Smartphone as Le, Monitor as We } from "lucide-react";
+var ie = { exports: {} }, le = {};
+var ge;
+function ze() {
+  if (ge) return le;
+  ge = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
+  function n(l, s, u) {
     var d = null;
-    if (u !== void 0 && (d = "" + u), r.key !== void 0 && (d = "" + r.key), "key" in r) {
+    if (u !== void 0 && (d = "" + u), s.key !== void 0 && (d = "" + s.key), "key" in s) {
       u = {};
-      for (var c in r)
-        c !== "key" && (u[c] = r[c]);
-    } else u = r;
-    return r = u.ref, {
-      $$typeof: t,
+      for (var c in s)
+        c !== "key" && (u[c] = s[c]);
+    } else u = s;
+    return s = u.ref, {
+      $$typeof: r,
       type: l,
       key: d,
-      ref: r !== void 0 ? r : null,
+      ref: s !== void 0 ? s : null,
       props: u
     };
   }
-  return oe.Fragment = o, oe.jsx = n, oe.jsxs = n, oe;
+  return le.Fragment = t, le.jsx = n, le.jsxs = n, le;
 }
-var le = {};
-var xe;
-function Le() {
-  return xe || (xe = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(a) {
+var ae = {};
+var pe;
+function Ye() {
+  return pe || (pe = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(a) {
       if (a == null) return null;
       if (typeof a == "function")
         return a.$$typeof === v ? null : a.displayName || a.name || null;
@@ -39,7 +39,7 @@ function Le() {
           return "Profiler";
         case O:
           return "StrictMode";
-        case I:
+        case U:
           return "Suspense";
         case X:
           return "SuspenseList";
@@ -54,40 +54,40 @@ function Le() {
             return "Portal";
           case B:
             return a.displayName || "Context";
-          case U:
+          case q:
             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";
+            return p = a.displayName || null, p !== null ? p : r(a.type) || "Memo";
           case h:
             p = a._payload, a = a._init;
             try {
-              return t(a(p));
+              return r(a(p));
             } catch {
             }
         }
       return null;
     }
-    function o(a) {
+    function t(a) {
       return "" + a;
     }
     function n(a) {
       try {
-        o(a);
+        t(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(
+        var M = p.error, I = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
+        return M.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);
+          I
+        ), t(a);
       }
     }
     function l(a) {
@@ -95,13 +95,13 @@ function Le() {
       if (typeof a == "object" && a !== null && a.$$typeof === h)
         return "<...>";
       try {
-        var p = t(a);
+        var p = r(a);
         return p ? "<" + p + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function r() {
+    function s() {
       var a = N.A;
       return a === null ? null : a.getOwner();
     }
@@ -116,31 +116,31 @@ function Le() {
       return a.key !== void 0;
     }
     function c(a, p) {
-      function A() {
+      function M() {
         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,
+      M.isReactWarning = !0, Object.defineProperty(a, "key", {
+        get: M,
         configurable: !0
       });
     }
     function b() {
-      var a = t(this.type);
+      var a = r(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;
+    function C(a, p, M, I, x, z) {
+      var R = M.ref;
       return a = {
-        $$typeof: y,
+        $$typeof: w,
         type: a,
         key: p,
-        props: A,
-        _owner: q
+        props: M,
+        _owner: I
       }, (R !== void 0 ? R : null) !== null ? Object.defineProperty(a, "ref", {
         enumerable: !1,
         get: b
@@ -166,101 +166,195 @@ function Le() {
         value: z
       }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
     }
-    function w(a, p, A, q, x, z) {
+    function y(a, p, M, I, x, z) {
       var R = p.children;
       if (R !== void 0)
-        if (q)
+        if (I)
           if (i(R)) {
-            for (q = 0; q < R.length; q++)
-              M(R[q]);
+            for (I = 0; I < R.length; I++)
+              A(R[I]);
             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);
+        else A(R);
       if (j.call(p, "key")) {
-        R = t(a);
-        var Z = Object.keys(p).filter(function(W) {
-          return W !== "key";
+        R = r(a);
+        var Z = Object.keys(p).filter(function(L) {
+          return L !== "key";
         });
-        q = 0 < Z.length ? "{key: someKey, " + Z.join(": ..., ") + ": ...}" : "{key: someKey}", V[R + q] || (Z = 0 < Z.length ? "{" + Z.join(": ..., ") + ": ...}" : "{}", console.error(
+        I = 0 < Z.length ? "{key: someKey, " + Z.join(": ..., ") + ": ...}" : "{key: someKey}", V[R + I] || (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,
+          I,
           R,
           Z,
           R
-        ), V[R + q] = !0);
+        ), V[R + I] = !0);
       }
-      if (R = null, A !== void 0 && (n(A), R = "" + A), d(p) && (n(p.key), R = "" + p.key), "key" in p) {
-        A = {};
+      if (R = null, M !== void 0 && (n(M), R = "" + M), d(p) && (n(p.key), R = "" + p.key), "key" in p) {
+        M = {};
         for (var K in p)
-          K !== "key" && (A[K] = p[K]);
-      } else A = p;
+          K !== "key" && (M[K] = p[K]);
+      } else M = p;
       return R && c(
-        A,
+        M,
         typeof a == "function" ? a.displayName || a.name || "Unknown" : a
       ), C(
         a,
         R,
-        A,
-        r(),
+        M,
+        s(),
         x,
         z
       );
     }
-    function M(a) {
+    function A(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;
+      return typeof a == "object" && a !== null && a.$$typeof === w;
     }
-    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() {
+    var o = we, w = /* @__PURE__ */ Symbol.for("react.transitional.element"), D = /* @__PURE__ */ Symbol.for("react.portal"), m = /* @__PURE__ */ Symbol.for("react.fragment"), O = /* @__PURE__ */ Symbol.for("react.strict_mode"), F = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), B = /* @__PURE__ */ Symbol.for("react.context"), k = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), Q = /* @__PURE__ */ Symbol.for("react.memo"), h = /* @__PURE__ */ Symbol.for("react.lazy"), f = /* @__PURE__ */ Symbol.for("react.activity"), v = /* @__PURE__ */ Symbol.for("react.client.reference"), N = o.__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 = {
+    o = {
       react_stack_bottom_frame: function(a) {
         return a();
       }
     };
-    var E, $ = {}, L = s.react_stack_bottom_frame.bind(
-      s,
+    var E, $ = {}, W = o.react_stack_bottom_frame.bind(
+      o,
       u
     )(), Y = g(l(u)), V = {};
-    le.Fragment = m, le.jsx = function(a, p, A) {
-      var q = 1e4 > N.recentlyCreatedOwnerStacks++;
-      return w(
+    ae.Fragment = m, ae.jsx = function(a, p, M) {
+      var I = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return y(
         a,
         p,
-        A,
+        M,
         !1,
-        q ? Error("react-stack-top-frame") : L,
-        q ? g(l(a)) : Y
+        I ? Error("react-stack-top-frame") : W,
+        I ? g(l(a)) : Y
       );
-    }, le.jsxs = function(a, p, A) {
-      var q = 1e4 > N.recentlyCreatedOwnerStacks++;
-      return w(
+    }, ae.jsxs = function(a, p, M) {
+      var I = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return y(
         a,
         p,
-        A,
+        M,
         !0,
-        q ? Error("react-stack-top-frame") : L,
-        q ? g(l(a)) : Y
+        I ? Error("react-stack-top-frame") : W,
+        I ? g(l(a)) : Y
       );
     };
-  })()), le;
+  })()), ae;
 }
-var ge;
-function ze() {
-  return ge || (ge = 1, process.env.NODE_ENV === "production" ? ae.exports = We() : ae.exports = Le()), ae.exports;
+var be;
+function Xe() {
+  return be || (be = 1, process.env.NODE_ENV === "production" ? ie.exports = ze() : ie.exports = Ye()), ie.exports;
 }
-var e = ze();
-const Ye = ({ config: t, panelId: o, sizeInfo: n, onSizeInfoClick: l }) => t.showPanelSizes && n ? (
+var e = Xe();
+const ne = class ne {
+  /**
+   * @constructor
+   * @param {LogLevel} [level=LogLevel.WARN] - The minimum log level to output.
+   * @param {string} [prefix="[drag-drop-panels]"] - The prefix to add to all log messages.
+   * @param {ILogger} [impl=console] - The implementation to use for logging.
+   */
+  constructor(t = 2, n = "[drag-drop-panels]", l = console) {
+    this.level = t, this.prefix = n, this.impl = l;
+  }
+  /**
+   * @method setLevel
+   * @description Updates the current log level for the static instance.
+   * @description 静的インスタンスの現在のログレベルを更新します。
+   * @param {LogLevel} level - The new log level.
+   */
+  static setLevel(t) {
+    ne.instance.setLevel(t);
+  }
+  /**
+   * @method setLevel
+   * @description Updates the current log level.
+   * @description 現在のログレベルを更新します。
+   * @param {LogLevel} level - The new log level.
+   */
+  setLevel(t) {
+    this.level = t;
+  }
+  /**
+   * @method setImplementation
+   * @description Updates the logger implementation for the static instance.
+   * @description 静的インスタンスのロガーの実装を更新します。
+   * @param {ILogger} impl - The new logger implementation.
+   */
+  static setImplementation(t) {
+    ne.instance.setImplementation(t);
+  }
+  /**
+   * @method setImplementation
+   * @description Updates the logger implementation.
+   * @description ロガーの実装を更新します。
+   * @param {ILogger} impl - The new logger implementation.
+   */
+  setImplementation(t) {
+    this.impl = t;
+  }
+  /**
+   * @method setPrefix
+   * @description Updates the log prefix for the static instance.
+   * @description 静的インスタンスのログのプレフィックスを更新します。
+   * @param {string} prefix - The new prefix.
+   */
+  static setPrefix(t) {
+    ne.instance.setPrefix(t);
+  }
+  /**
+   * @method setPrefix
+   * @description Updates the log prefix.
+   * @description ログのプレフィックスを更新します。
+   * @param {string} prefix - The new prefix.
+   */
+  setPrefix(t) {
+    this.prefix = t;
+  }
+  formatMessage(t) {
+    return typeof t == "string" ? [`${this.prefix} ${t}`] : [this.prefix, t];
+  }
+  static debug(t, ...n) {
+    ne.instance.debug(t, ...n);
+  }
+  debug(t, ...n) {
+    this.level <= 0 && this.impl.debug(...this.formatMessage(t), ...n);
+  }
+  static info(t, ...n) {
+    ne.instance.info(t, ...n);
+  }
+  info(t, ...n) {
+    this.level <= 1 && this.impl.info(...this.formatMessage(t), ...n);
+  }
+  static warn(t, ...n) {
+    ne.instance.warn(t, ...n);
+  }
+  warn(t, ...n) {
+    this.level <= 2 && this.impl.warn(...this.formatMessage(t), ...n);
+  }
+  static error(t, ...n) {
+    ne.instance.error(t, ...n);
+  }
+  error(t, ...n) {
+    this.level <= 3 && this.impl.error(...this.formatMessage(t), ...n);
+  }
+};
+ne.instance = new ne(2, "[drag-drop-panels]");
+let he = ne;
+const Fe = ({ config: r, panelId: t, sizeInfo: n, onSizeInfoClick: l }) => r.showPanelSizes && n ? (
   // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素。デバッグ目的のため、インタラクティブ性は限定的。
   // biome-ignore lint/a11y/useKeyWithClickEvents: キーボード操作はデバッグ機能では優先度が低い。
   /* @__PURE__ */ e.jsxs(
@@ -269,12 +363,12 @@ const Ye = ({ config: t, panelId: o, sizeInfo: n, onSizeInfoClick: l }) => t.sho
       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),
+      onTouchStart: (s) => s instanceof TouchEvent && l(s),
       onDragStart: l,
       children: [
         /* @__PURE__ */ e.jsxs("div", { className: "text-[10px] opacity-80", children: [
           "ID:",
-          o
+          t
         ] }),
         /* @__PURE__ */ e.jsxs("div", { children: [
           n.width,
@@ -296,37 +390,37 @@ const Ye = ({ config: t, panelId: o, sizeInfo: n, onSizeInfoClick: l }) => t.sho
       ]
     }
   )
-) : 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);
+) : null, S = (r, t, ...n) => {
+  (r.logLevel ?? 0) >= t && he.info(...n);
+}, je = we.memo(({ index: r, columnIndex: t, isDragging: n, dragOverPosition: l, originalPosition: s, onDragEnter: u, onDragLeave: d, config: c, customDrag: b }) => {
+  const C = s && s.columnIndex === t && (s.panelIndex === r || s.panelIndex + 1 === r), y = !C && l?.columnIndex === t && l?.insertIndex === r, A = H(null), [T, o] = ee(null), w = n || (b?.isActive ?? !1);
   return G(() => {
-    if (M.current) {
-      const D = M.current.getBoundingClientRect(), m = {
+    if (A.current) {
+      const D = A.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}:`, {
+      o(m), y && S(c, 1, `🎯 アクティブプレースホルダー ${r}-${t}:`, {
         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: ドラッグイベントを処理するための対話的な要素。デバッグ目的のため、キーボード操作は必須ではない。
+  }, [y, r, t, c]), S(c, 2, `プレースホルダー${r}-${t}: 表示中`, { isHighlighted: y, isDragging: n, dragOverPosition: l, shouldShow: w }), // 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"}`,
+      ref: A,
+      "data-placeholder-index": r,
+      "data-placeholder-column": t,
+      onDragEnter: () => u(t, r),
+      onDragLeave: (D) => d(D, t, r),
+      className: `relative flex w-full items-center justify-center transition-all duration-0 ${C ? "pointer-events-none h-0 overflow-hidden opacity-0" : w ? y ? "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: [
+        !C && w && 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,
             "×",
@@ -341,14 +435,14 @@ const Ye = ({ config: t, panelId: o, sizeInfo: n, onSizeInfoClick: l }) => t.sho
           /* @__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,
+            "-",
+            r,
             " ",
-            w ? "ACTIVE" : "IDLE"
+            y ? "ACTIVE" : "IDLE"
           ] })
         ] }),
-        !C && y && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2 text-sky-600", children: [
+        !C && w && /* @__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" })
@@ -359,33 +453,33 @@ const Ye = ({ config: t, panelId: o, sizeInfo: n, onSizeInfoClick: l }) => t.sho
     }
   );
 });
-ye.displayName = "InsertPlaceholder";
-const we = ({ columnIndex: t, isDragging: o, dragOverPosition: n, children: l, config: r }) => {
+je.displayName = "InsertPlaceholder";
+const Pe = ({ columnIndex: r, isDragging: t, dragOverPosition: n, children: l, config: s }) => {
   const u = H(null), [d, c] = ee(null);
   return G(() => {
-    if (u.current && o) {
-      const b = u.current.getBoundingClientRect(), C = n?.columnIndex === t, w = {
+    if (u.current && t) {
+      const b = u.current.getBoundingClientRect(), C = n?.columnIndex === r, y = {
         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})`
+      c(y), C && S(s, 1, `🎯 アクティブドロップゾーン ${r}:`, {
+        size: `${y.width}×${y.height}`,
+        position: `(${y.x}, ${y.y})`,
+        bottomRight: `(${y.x + y.width}, ${y.y + y.height})`,
+        center: `(${y.x + y.width / 2}, ${y.y + y.height / 2})`
       });
     }
-  }, [o, n, t, r]), /* @__PURE__ */ e.jsxs("div", { ref: u, className: "relative", children: [
+  }, [t, n, r, s]), /* @__PURE__ */ e.jsxs("div", { ref: u, className: "relative", children: [
     l,
-    o && d && r.showDropZoneOutlines && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    t && d && s.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
+          r
         ] }),
         /* @__PURE__ */ e.jsxs("div", { children: [
           d.width,
@@ -420,116 +514,117 @@ const we = ({ columnIndex: t, isDragging: o, dragOverPosition: n, children: l, c
     ] })
   ] });
 };
-we.displayName = "DropZoneDebugOverlay";
-const je = ({ columnId: t, onResizeStart: o, onResize: n, onResizeEnd: l, isResizing: r = !1, position: u = "right", className: d = "", debug: c = {} }) => {
+Pe.displayName = "DropZoneDebugOverlay";
+const De = ({ columnId: r, onResizeStart: t, onResize: n, onResizeEnd: l, isResizing: s = !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");
+    !s && b.current && (S(c, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", r), b.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  }, [s, r, c]);
+  const y = P(
+    (o) => {
+      o.preventDefault(), o.stopPropagation(), S(c, 2, "リサイズハンドル マウスダウン:", r), b.current = !0, t(r, o.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
     },
-    [t, o, c]
+    [r, t, c]
   );
   G(() => {
-    const s = (D) => {
+    const o = (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"));
+    }, w = () => {
+      b.current && (S(c, 2, "リサイズハンドル マウスアップ:", r), 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);
+    return document.addEventListener("mousemove", o), document.addEventListener("mouseup", w), () => {
+      document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", w);
     };
-  }, [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");
+  }, [r, n, l, c]);
+  const A = P(
+    (o) => {
+      o.preventDefault(), o.stopPropagation();
+      const w = o.touches[0];
+      S(c, 2, "リサイズハンドル タッチスタート:", r), b.current = !0, t(r, w.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
     },
-    [t, o, c]
+    [r, t, c]
   );
   G(() => {
-    const s = (D) => {
+    const o = (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"));
+    }, w = () => {
+      b.current && (S(c, 2, "リサイズハンドル タッチエンド:", r), 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);
+    return document.addEventListener("touchmove", o, { passive: !1 }), document.addEventListener("touchend", w), () => {
+      document.removeEventListener("touchmove", o), document.removeEventListener("touchend", w);
     };
-  }, [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(" ");
+  }, [r, n, l, c]), G(() => () => {
+    b.current && (S(c, 1, "リサイズハンドルアンマウント時のクリーンアップ:", r), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  }, [r, c]);
+  const T = ["resize-handle", u, s ? "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: [
+    // biome-ignore lint/a11y/useAriaPropsForRole: リサイズハンドルのため、値の範囲を指定することが難しい
+    /* @__PURE__ */ e.jsxs("div", { ref: C, className: T, onMouseDown: y, onTouchStart: A, "data-column-id": r, "data-position": u, "aria-label": `${r}のカラム幅を調整`, 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)"
+        r,
+        s && " (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 }) => {
+}, Ke = ({ columnId: r, width: t, minWidth: n = 100, maxWidth: l = 800, onResizeStart: s, onResize: u, onResizeEnd: d, isResizing: c = !1, resizable: b = !0, className: C = "", debug: y = {}, children: A }) => {
   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,
+    const o = document.querySelector(`[data-column-id="${r}"]`);
+    o && (o.style.setProperty("--column-width", `${t}px`), o.style.setProperty("--column-min-width", `${n}px`), o.style.setProperty("--column-max-width", `${l}px`));
+  }, [r, t, n, l]), /* @__PURE__ */ e.jsxs("div", { className: T, "data-column-id": r, "data-width": t, "data-min-width": n, "data-max-width": l, children: [
+    A,
+    b && /* @__PURE__ */ e.jsx(De, { columnId: r, onResizeStart: s, onResize: u, onResizeEnd: d, isResizing: c, position: "right", debug: y }),
+    y.showPanelSizes && /* @__PURE__ */ e.jsxs("div", { className: "column-debug-size", children: [
+      t,
       "px",
       c && " ↔"
     ] })
   ] });
-}, me = Ne(
+}, fe = Se(
   ({
-    index: t,
-    columnIndex: o,
+    index: r,
+    columnIndex: t,
     isDragging: n,
     dragOverPosition: l,
-    originalPosition: r,
+    originalPosition: s,
     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 })
+  }) => /* @__PURE__ */ e.jsx(je, { index: r, columnIndex: t, isDragging: n, dragOverPosition: l, originalPosition: s, onDragEnter: u, onDragLeave: d, config: c, customDrag: b })
 );
-me.displayName = "LocalInsertPlaceholder";
-const Qe = ({
-  columns: t,
-  panels: o,
+fe.displayName = "LocalInsertPlaceholder";
+const et = ({
+  columns: r,
+  panels: t,
   columnPanels: n,
   // onColumnPanelsChange,
   panelVisibility: l,
-  onPanelVisibilityChange: r,
+  onPanelVisibilityChange: s,
   dragState: u,
   dragOverPosition: d,
   originalPanelPosition: c,
   dragModes: b,
   onDragStart: C,
-  onDragEnd: w,
-  onPlaceholderDragEnter: M,
+  onDragEnd: y,
+  onPlaceholderDragEnter: A,
   onPlaceholderDragLeave: T,
-  onDragOverWithInsert: s,
-  onDropWithInsert: y,
+  onDragOverWithInsert: o,
+  onDropWithInsert: w,
   onColumnDragLeave: D,
   onPanelClick: m,
   onPanelMouseDown: O,
   onTouchStart: F,
-  onTouchMove: U,
+  onTouchMove: q,
   onTouchEnd: B,
   debugConfig: k,
-  panelSizes: I,
+  panelSizes: U,
   setPanelRef: X,
   enableResize: Q = !1,
   columnWidths: h,
@@ -543,58 +638,60 @@ const Qe = ({
   onToggleDragMode: E,
   customDrag: $
 }) => {
-  const L = H(k);
+  const W = H(k);
   G(() => {
-    L.current = k;
+    W.current = k;
   }, [k]);
   const Y = H({}), V = H(/* @__PURE__ */ new Map());
   G(() => {
-    S(L.current, 1, "🎨 DragDropLayout - dragModes props changed:", {
+    S(W.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 a = ye(() => {
     const x = {};
-    return o.forEach((z) => {
+    return t.forEach((z) => {
       x[z.id] = z;
     }), x;
-  }, [o]);
-  Ee(() => {
+  }, [t]);
+  ke(() => {
     const x = /* @__PURE__ */ new Map();
-    Object.keys(Y.current).forEach((W) => {
-      const J = Y.current[W];
+    Object.keys(Y.current).forEach((L) => {
+      const J = Y.current[L];
       if (J) {
-        const re = J.getBoundingClientRect();
-        x.set(W, {
-          rect: re,
+        const se = J.getBoundingClientRect();
+        x.set(L, {
+          rect: se,
           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 });
+    Object.values(n).forEach((L) => {
+      L.forEach((J) => {
+        Z.add(J);
+      });
+    }), new Set(z.keys()).forEach((L) => {
+      Z.has(L) || (S(W.current, 1, "パネル削除検出 - クリーンアップ:", L), z.delete(L), Y.current[L] && delete Y.current[L]);
+    }), x.forEach((L, J) => {
+      const se = z.get(J);
+      if (se) {
+        const _ = se.rect.left - L.rect.left, oe = se.rect.top - L.rect.top;
+        if (_ !== 0 || oe !== 0) {
+          S(W.current, 2, "パネル移動検出 - アニメーション開始:", J, { dx: _, dy: oe });
           const te = Y.current[J];
-          te && (te.style.transform = `translate(${_}px, ${se}px)`, te.style.transition = "none", te.classList.add("is-moving"), requestAnimationFrame(() => {
+          te && (te.style.transform = `translate(${_}px, ${oe}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);
+        S(W.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(() => {
@@ -608,26 +705,26 @@ const Qe = ({
     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}:`, {
+      return S(W.current, 1, `Panel config not found for panelId: ${x}`), null;
+    const R = z.component, Z = z.title, K = u.draggedPanel === x, L = b[x] || "normal";
+    S(W.current, 2, `🎨 renderPanel - ${x}:`, {
       panelId: x,
-      dragMode: W,
+      dragMode: L,
       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,
+        const oe = _.getBoundingClientRect(), te = window.getComputedStyle(_);
+        S(W.current, 1, `Panel ${x} mounted with size:`, {
+          width: oe.width,
+          height: oe.height,
+          x: oe.left,
+          y: oe.top,
           minHeight: te.minHeight,
           maxHeight: te.maxHeight
         });
       });
-    }, re = I[x];
+    }, se = U[x];
     return (
       // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素
       /* @__PURE__ */ e.jsxs(
@@ -637,20 +734,20 @@ const Qe = ({
           "data-panel-id": x,
           "data-dragging": K,
           role: "presentation",
-          draggable: W === "normal",
-          onDragStart: (_) => W === "normal" && C(_, x),
-          onDragEnd: w,
+          draggable: L === "normal",
+          onDragStart: (_) => L === "normal" && C(_, x),
+          onDragEnd: y,
           onClick: (_) => m?.(_, x),
           onMouseDown: (_) => O?.(_, x),
           onTouchStart: (_) => F?.(_, x),
-          onTouchMove: U,
+          onTouchMove: q,
           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"}`,
+          className: `panel-draggable group relative flex max-h-[500px] min-h-[200px] 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 ${L === "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" })
+                L === "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(
@@ -664,9 +761,9 @@ const Qe = ({
                       (_.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" })
+                    className: `cursor-pointer rounded p-1 text-xs transition-colors ${L === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,
+                    title: L === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え",
+                    children: L === "custom" ? /* @__PURE__ */ e.jsx(Te, { className: "h-4 w-4" }) : /* @__PURE__ */ e.jsx(Me, { className: "h-4 w-4" })
                   }
                 ),
                 /* @__PURE__ */ e.jsx(
@@ -674,113 +771,113 @@ const Qe = ({
                   {
                     type: "button",
                     onClick: (_) => {
-                      _.stopPropagation(), r({
+                      _.stopPropagation(), s({
                         ...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" })
+                    children: /* @__PURE__ */ e.jsx(xe, { 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) })
+            /* @__PURE__ */ e.jsx("div", { className: "panel-scroll-area min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ e.jsx(R, { ...z.props || {} }) }),
+            /* @__PURE__ */ e.jsx(Fe, { config: k, panelId: x, sizeInfo: se, onSizeInfoClick: (_) => g?.(_, x) })
           ]
         },
         x
       )
     );
-  }, A = (x, z) => {
+  }, M = (x, z) => {
     const R = n[x] || [];
     let Z = !1;
-    for (const W of R)
-      if (l[W]) {
+    for (const L of R)
+      if (l[L]) {
         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(
+    return /* @__PURE__ */ e.jsx(Pe, { 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),
+        onDragOver: (L) => o(L, z),
+        onDrop: (L) => w(L, 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,
+            fe,
             {
               index: 0,
               columnIndex: z,
               isDragging: K,
               dragOverPosition: d,
               originalPosition: c,
-              onDragEnter: M,
+              onDragEnter: A,
               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 ? (
+          R.map((L, J) => {
+            const se = l[L], _ = !(se || K);
+            return /* @__PURE__ */ e.jsxs("div", { className: `panel-with-placeholder ${_ ? "m-0 h-0 overflow-hidden p-0" : ""}`, "data-panel-hidden": _ ? "true" : void 0, "aria-hidden": _ ? "true" : void 0, children: [
+              se ? p(L) : 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("h3", { className: "font-semibold text-amber-700 text-base", children: a[L]?.title || L }),
                     /* @__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: "このパネルは非表示です" })
+                    /* @__PURE__ */ e.jsx(xe, { className: "mx-auto h-6 w-6 opacity-50" }),
+                    /* @__PURE__ */ e.jsx("p", { className: "mt-1 text-xs", children: "このパネルは非表示です" })
                   ] }) }) })
                 ] })
               ) : null,
               /* @__PURE__ */ e.jsx(
-                me,
+                fe,
                 {
                   index: J + 1,
                   columnIndex: z,
                   isDragging: K,
                   dragOverPosition: d,
                   originalPosition: c,
-                  onDragEnter: M,
+                  onDragEnter: A,
                   onDragLeave: T,
                   debugConfig: k,
                   customDrag: $
                 }
               )
-            ] }, `panel-${W}`);
+            ] }, `panel-${L}`);
           }),
-          !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: "このエリアは空です" }) })
+          !(Z || K) && /* @__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: "このエリアは空です" }) })
         ]
       }
     ) });
-  }, q = Object.keys(l).filter((x) => !l[x]);
+  }, I = 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: [
+    I.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) => {
+      I.map((x) => {
         const R = a[x]?.title || x;
         return /* @__PURE__ */ e.jsxs(
           "button",
           {
             type: "button",
-            onClick: () => r({
+            onClick: () => s({
               ...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(Oe, { className: "h-3 w-3" }),
               /* @__PURE__ */ e.jsx("span", { children: R })
             ]
           },
@@ -788,9 +885,9 @@ const Qe = ({
         );
       })
     ] }) }),
-    /* @__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) => {
+    /* @__PURE__ */ e.jsx("main", { className: "no-scrollbar 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((x, z) => {
       const R = h?.[x.id] || x.initialWidth || 350, Z = Q && (x.resizable ?? !0);
-      return /* @__PURE__ */ e.jsx(Se, { children: /* @__PURE__ */ e.jsxs(
+      return /* @__PURE__ */ e.jsx(Ce, { children: /* @__PURE__ */ e.jsxs(
         "div",
         {
           className: `column relative ${x.className || ""} ${Q ? "resize-enabled-column" : "auto-width-column"} ${j && i === x.id ? "column-resizing-active" : ""}`,
@@ -803,15 +900,15 @@ const Qe = ({
             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 })
+            M(x.key, z),
+            Z && f && v && N && /* @__PURE__ */ e.jsx(De, { 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;
+}, tt = ({ columnCount: r, onColumnCountChange: t, onAutoBalance: n, onResetWidths: l, minColumns: s = 2, maxColumns: u = 6, isResizing: d = !1, isResponsiveMode: c = !1, responsiveColumnCount: b }) => {
+  const C = r > s && !c, y = r < 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: "カラム数:" }),
@@ -819,26 +916,26 @@ const Qe = ({
         "button",
         {
           type: "button",
-          onClick: () => C && o(t - 1),
+          onClick: () => C && t(r - 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" })
+          title: c ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを削除 (最小: ${s}列)`,
+          children: /* @__PURE__ */ e.jsx(Ae, { 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 ? b ?? r : r,
         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"}`,
+          onClick: () => y && t(r + 1),
+          disabled: !y || d,
+          className: `rounded p-1 text-xs transition-colors ${y && !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" })
+          children: /* @__PURE__ */ e.jsx(me, { className: "h-3 w-3" })
         }
       )
     ] }),
@@ -853,7 +950,7 @@ const Qe = ({
           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($e, { className: "h-3 w-3" }),
             /* @__PURE__ */ e.jsx("span", { children: "バランス" })
           ]
         }
@@ -867,7 +964,7 @@ const Qe = ({
           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(Re, { className: "h-3 w-3" }),
             /* @__PURE__ */ e.jsx("span", { children: "幅リセット" })
           ]
         }
@@ -878,8 +975,8 @@ const Qe = ({
       /* @__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;
+}, nt = ({ columnCount: r, onInsertColumn: t, onDeleteColumn: n, minColumns: l = 1, maxColumns: s = 6, isResizing: u = !1, disabled: d = !1 }) => {
+  const c = r < s && !d, b = r > 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: [
@@ -887,26 +984,26 @@ const Qe = ({
         "button",
         {
           type: "button",
-          onClick: () => c && o(0),
+          onClick: () => c && t(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" })
+          children: /* @__PURE__ */ e.jsx(me, { className: "h-4 w-4" })
         }
       ),
-      Array.from({ length: t }, (C, w) => (
+      Array.from({ length: r }, (C, y) => (
         // 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 }),
+            /* @__PURE__ */ e.jsx("span", { className: "font-medium font-mono text-slate-700 text-xs", children: y + 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" })
+                onClick: () => n(y),
+                className: "absolute -top-1 -right-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: `カラム ${y + 1} を削除`,
+                children: /* @__PURE__ */ e.jsx(_e, { className: "h-2.5 w-2.5" })
               }
             )
           ] }),
@@ -914,18 +1011,18 @@ const Qe = ({
             "button",
             {
               type: "button",
-              onClick: () => c && o(w + 1),
+              onClick: () => c && t(y + 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" })
+              children: /* @__PURE__ */ e.jsx(me, { className: "h-4 w-4" })
             }
           )
-        ] }, `column-${w}`)
+        ] }, `column-${y}`)
       ))
     ] })
   ] });
-}, 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: [
+}, rt = ({ config: r, onConfigChange: t, 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: "✕" })
@@ -936,10 +1033,10 @@ const Qe = ({
         "input",
         {
           type: "checkbox",
-          checked: t.showDebugPanel ?? !1,
-          onChange: (r) => o({
-            ...t,
-            showDebugPanel: r.target.checked
+          checked: r.showDebugPanel ?? !1,
+          onChange: (s) => t({
+            ...r,
+            showDebugPanel: s.target.checked
           }),
           className: "rounded"
         }
@@ -951,10 +1048,10 @@ const Qe = ({
         "input",
         {
           type: "checkbox",
-          checked: t.showMousePosition ?? !1,
-          onChange: (r) => o({
-            ...t,
-            showMousePosition: r.target.checked
+          checked: r.showMousePosition ?? !1,
+          onChange: (s) => t({
+            ...r,
+            showMousePosition: s.target.checked
           }),
           className: "rounded"
         }
@@ -966,10 +1063,10 @@ const Qe = ({
         "input",
         {
           type: "checkbox",
-          checked: t.showPanelSizes ?? !1,
-          onChange: (r) => o({
-            ...t,
-            showPanelSizes: r.target.checked
+          checked: r.showPanelSizes ?? !1,
+          onChange: (s) => t({
+            ...r,
+            showPanelSizes: s.target.checked
           }),
           className: "rounded"
         }
@@ -981,10 +1078,10 @@ const Qe = ({
         "input",
         {
           type: "checkbox",
-          checked: t.showPlaceholderInfo ?? !1,
-          onChange: (r) => o({
-            ...t,
-            showPlaceholderInfo: r.target.checked
+          checked: r.showPlaceholderInfo ?? !1,
+          onChange: (s) => t({
+            ...r,
+            showPlaceholderInfo: s.target.checked
           }),
           className: "rounded"
         }
@@ -996,10 +1093,10 @@ const Qe = ({
         "input",
         {
           type: "checkbox",
-          checked: t.showDropZoneOutlines ?? !1,
-          onChange: (r) => o({
-            ...t,
-            showDropZoneOutlines: r.target.checked
+          checked: r.showDropZoneOutlines ?? !1,
+          onChange: (s) => t({
+            ...r,
+            showDropZoneOutlines: s.target.checked
           }),
           className: "rounded"
         }
@@ -1009,7 +1106,7 @@ const Qe = ({
     /* @__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
+        r.logLevel ?? 0
       ] }),
       /* @__PURE__ */ e.jsx(
         "input",
@@ -1018,10 +1115,10 @@ const Qe = ({
           type: "range",
           min: "0",
           max: "2",
-          value: t.logLevel ?? 0,
-          onChange: (r) => o({
-            ...t,
-            logLevel: parseInt(r.target.value)
+          value: r.logLevel ?? 0,
+          onChange: (s) => t({
+            ...r,
+            logLevel: parseInt(s.target.value, 10)
           }),
           className: "w-full",
           "aria-label": "ログレベル設定"
@@ -1038,7 +1135,7 @@ const Qe = ({
         "button",
         {
           type: "button",
-          onClick: () => o({
+          onClick: () => t({
             showDebugPanel: !0,
             showMousePosition: !0,
             showPanelSizes: !0,
@@ -1054,7 +1151,7 @@ const Qe = ({
         "button",
         {
           type: "button",
-          onClick: () => o({
+          onClick: () => t({
             showDebugPanel: !1,
             showMousePosition: !1,
             showPanelSizes: !1,
@@ -1068,89 +1165,63 @@ const Qe = ({
       )
     ] })
   ] })
-] }) : /* @__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 = {
+] }) : /* @__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: "🛠️" }), re = {
   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))
+}, ce = (r, t = re) => {
+  const { prefix: n, startIndex: l, separator: s } = t, u = r + l;
+  return `${n}${s}${u}`;
+}, Ne = (r, t = re) => Array.from({ length: r }, (n, l) => ce(l, t)), ue = (r, t = re) => {
+  const { prefix: n, startIndex: l, separator: s } = t, u = `${n}${s}`;
+  if (!r.startsWith(u))
     return null;
-  const d = t.slice(u.length), c = parseInt(d, 10);
+  const d = r.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);
+}, st = (r, t = re) => ue(r, t) !== null, ot = (r, t = re) => {
+  const n = r.map((l) => ue(l, t)).filter((l) => l !== null).sort((l, s) => l - s);
   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) => {
+      return ce(l, t);
+  return ce(n.length, t);
+}, He = (r, t = re) => r.sort((n, l) => {
+  const s = ue(n, t) ?? -1, u = ue(l, t) ?? -1;
+  return s - u;
+}), lt = (r, t = re) => {
   const n = {};
-  return t.forEach((l, r) => {
-    const u = ie(r, o);
+  return r.forEach((l, s) => {
+    const u = ce(s, t);
     n[l] = u;
   }), n;
-}, Fe = (t, o, n = ne) => {
+}, Ie = (r, t, n = re) => {
   const l = [];
-  Object.values(t).forEach((d) => {
+  Object.values(r).forEach((d) => {
     l.push(...d);
   });
-  const r = {}, u = Pe(o, n);
+  const s = {}, u = Ne(t, n);
   return u.forEach((d) => {
-    r[d] = [];
+    s[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 b = c % t, C = u[b];
+    s[C].push(d);
+  }), s;
+}, at = ({ initialColumns: r, initialPanels: t, debug: n = {}, onLayoutChange: l }) => {
+  const [s, u] = ee(() => {
     const h = {};
-    for (const f of t)
+    for (const f of r)
       h[f.id] = f.initialWidth || 400;
     return {
-      columns: t,
+      columns: r,
       columnWidths: h,
       isResizing: !1,
       resizingColumn: null,
-      columnPanels: o,
+      columnPanels: t,
       showInsertPlaceholders: !1
     };
   }), d = H(0), c = H(0);
   G(() => {
-    l?.(r);
-  }, [r, l]);
+    l?.(s);
+  }, [s, l]);
   const b = P(
     (h, f) => {
       S(n, 1, "カラム追加:", h.id, "at position:", f), u((v) => {
@@ -1190,7 +1261,7 @@ const Qe = ({
       });
     },
     [n]
-  ), w = P(
+  ), y = P(
     (h, f) => {
       S(n, 1, "カラム移動:", h, "->", f), u((v) => {
         const N = [...v.columns], [j] = N.splice(h, 1);
@@ -1201,18 +1272,18 @@ const Qe = ({
       });
     },
     [n]
-  ), M = P(
+  ), A = P(
     (h, f) => {
-      S(n, 2, "リサイズ開始:", h, "at X:", f), d.current = f, c.current = r.columnWidths[h] || 300, u((v) => ({
+      S(n, 2, "リサイズ開始:", h, "at X:", f), d.current = f, c.current = s.columnWidths[h] || 300, u((v) => ({
         ...v,
         isResizing: !0,
         resizingColumn: h
       }));
     },
-    [n, r.columnWidths]
+    [n, s.columnWidths]
   ), T = P(
     (h) => {
-      const { resizingColumn: f, isResizing: v } = r;
+      const { resizingColumn: f, isResizing: v } = s;
       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) => ({
@@ -1223,14 +1294,14 @@ const Qe = ({
         }
       }));
     },
-    [n, r]
-  ), s = P(() => {
+    [n, s]
+  ), o = P(() => {
     S(n, 2, "リサイズ終了"), u((h) => ({
       ...h,
       isResizing: !1,
       resizingColumn: null
     }));
-  }, [n]), y = P(
+  }, [n]), w = P(
     (h, f) => {
       S(n, 2, "カラム幅設定:", h, f), u((v) => ({
         ...v,
@@ -1292,12 +1363,12 @@ const Qe = ({
       });
     },
     [n]
-  ), U = P(
+  ), q = 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);
+        const N = Ie(f.columnPanels, h, re), j = Ne(h, re), i = f.isResizing && f.resizingColumn && !j.includes(f.resizingColumn);
         i && S(n, 1, "リサイズ中のカラムが削除されるためリサイズを強制終了:", f.resizingColumn);
         const g = j.map((Y, V) => ({
           id: Y,
@@ -1349,85 +1420,85 @@ const Qe = ({
       };
     });
   }, [n]), k = P(
-    (h) => r.columns.find((f) => f.id === h),
-    [r.columns]
-  ), I = P(() => {
+    (h) => s.columns.find((f) => f.id === h),
+    [s.columns]
+  ), U = P(() => {
     let h = 0;
-    for (const f of Object.values(r.columnWidths))
+    for (const f of Object.values(s.columnWidths))
       h += f;
     return h;
-  }, [r.columnWidths]), X = P((h) => document.querySelector(`[data-column-id="${h}"]`), []), Q = P((h) => {
+  }, [s.columnWidths]), X = P((h) => document.querySelector(`[data-column-id="${h}"]`), []), Q = P((h) => {
     u((f) => ({
       ...f,
       showInsertPlaceholders: h
     }));
   }, []);
   return {
-    layoutState: r,
+    layoutState: s,
     addColumn: b,
     removeColumn: C,
-    moveColumn: w,
-    startResize: M,
+    moveColumn: y,
+    startResize: A,
     handleResize: T,
-    endResize: s,
-    setColumnWidth: y,
+    endResize: o,
+    setColumnWidth: w,
     resetColumnWidths: D,
     movePanel: m,
     addPanel: O,
     removePanel: F,
-    updateColumnCount: U,
+    updateColumnCount: q,
     autoBalanceColumns: B,
     getColumnById: k,
-    getTotalWidth: I,
+    getTotalWidth: U,
     getColumnElement: X,
     setShowInsertPlaceholders: Q
   };
-}, ue = {
+}, de = {
   triggerDistance: 80,
   scrollSpeed: 5,
   maxScrollSpeed: 20
-}, pe = (t, o, n = ue, l) => {
-  const { triggerDistance: r, scrollSpeed: u, maxScrollSpeed: d } = n;
+}, ve = (r, t, n = de, l) => {
+  const { triggerDistance: s, 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));
+  const { left: b, top: C, right: y, bottom: A } = c;
+  let T = 0, o = 0;
+  if (r >= b && r <= y && t >= C && t <= A) {
+    if (r < b + s) {
+      const w = Math.max(0, (b + s - r) / s);
+      T = -Math.min(d, u + w * (d - u));
+    } else if (r > y - s) {
+      const w = Math.max(0, (r - (y - s)) / s);
+      T = Math.min(d, u + w * (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));
+    if (t < C + s) {
+      const w = Math.max(0, (C + s - t) / s);
+      o = -Math.min(d, u + w * (d - u));
+    } else if (t > A - s) {
+      const w = Math.max(0, (t - (A - s)) / s);
+      o = Math.min(d, u + w * (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));
+  return { x: T, y: o };
+}, qe = (r, t) => {
+  (r.x !== 0 || r.y !== 0) && (t ? t.scrollBy(r.x, r.y) : window.scrollBy(r.x, r.y));
 };
-class De {
-  constructor(o = ue, n) {
-    this.intervalId = null, this.isActive = !1, this.config = o, this.scrollElement = n;
+class Ee {
+  constructor(t = de, n) {
+    this.intervalId = null, this.isActive = !1, this.config = t, this.scrollElement = n;
   }
-  setScrollElement(o) {
-    this.scrollElement = o;
+  setScrollElement(t) {
+    this.scrollElement = t;
   }
-  start(o, n) {
+  start(t, n) {
     this.isActive || (this.isActive = !0, this.intervalId = window.setInterval(() => {
-      const l = pe(o, n, this.config, this.scrollElement);
-      He(l, this.scrollElement);
+      const l = ve(t, n, this.config, this.scrollElement);
+      qe(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();
+  update(t, n) {
+    const l = ve(t, n, this.config, this.scrollElement);
+    (l.x !== 0 || l.y !== 0) && !this.isActive ? this.start(t, n) : l.x === 0 && l.y === 0 && this.isActive && this.stop();
   }
   stop() {
     this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null), this.isActive = !1;
@@ -1435,34 +1506,34 @@ class De {
   isScrolling() {
     return this.isActive;
   }
-  updateConfig(o) {
-    this.config = o;
+  updateConfig(t) {
+    this.config = t;
   }
 }
-const qe = ({
-  debugConfig: t,
-  dragState: o,
+const Ue = ({
+  debugConfig: r,
+  dragState: t,
   customDrag: n,
   clickState: l,
-  dragModes: r,
+  dragModes: s,
   isMouseDown: u,
   dragOverPosition: d,
   setCustomDrag: c,
   setDragState: b,
   setDragOverPosition: C,
-  setOriginalPanelPosition: w,
-  setClickState: M,
+  setOriginalPanelPosition: y,
+  setClickState: A,
   setIsMouseDown: T,
-  findPanelPosition: s,
-  performPanelMove: y,
+  findPanelPosition: o,
+  performPanelMove: w,
   showMousePosition: D,
   updateMousePosition: m,
   recordMouseDown: O,
   recordClickPosition: F,
-  isVirtualClick: U,
+  isVirtualClick: q,
   calculateMoveDistance: B,
   clearMouseTracking: k,
-  resetDragState: I,
+  resetDragState: U,
   resetClickState: X,
   createDragImage: Q,
   updateDragImagePosition: h,
@@ -1470,48 +1541,48 @@ const qe = ({
   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));
+  const j = H(r);
+  j.current = r;
+  const i = H(null), g = H(null), E = H(0), $ = H(new Ee(de));
   G(() => {
     const p = document.querySelector("main.max-w-full.flex-1.overflow-auto");
     p && $.current.setScrollElement(p);
   }, []);
-  const L = H(d);
+  const W = H(d);
   G(() => {
-    L.current = d, S(j.current, 2, "dragOverPositionRef更新:", d);
+    W.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();
+        const M = window.getSelection();
+        M && M.rangeCount > 0 && M.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) {
+        const M = document.elementFromPoint(p.clientX, p.clientY), I = M?.closest("[data-drop-zone]");
+        if (I) {
           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]");
+          const x = I.getAttribute("data-column-index"), z = x ? parseInt(x, 10) : null;
+          z !== null && z !== t.dragOverColumn && b((Z) => ({ ...Z, dragOverColumn: z }));
+          const R = M?.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);
+              const L = parseInt(Z, 10), J = parseInt(K, 10);
+              v(J, L);
             }
           } 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;
+        if (s[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;
+        const I = document.querySelector(`[data-panel-id="${l.panelId}"]`);
+        if (I && g.current) {
+          const x = I.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,
@@ -1519,24 +1590,24 @@ const qe = ({
             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);
+        b({ isDragging: !0, draggedPanel: l.panelId, dragOverColumn: null }), y(o(l.panelId)), D(p.clientX, p.clientY), A({ isClicked: !1, panelId: null }), T(!1), k(), g.current = null, i.current && (clearTimeout(i.current), i.current = null);
       }
     },
     [
       n.isActive,
       l,
-      o.dragOverColumn,
-      r,
+      t.dragOverColumn,
+      s,
       u,
       m,
       b,
       C,
       B,
-      s,
+      o,
       c,
-      w,
+      y,
       D,
-      M,
+      A,
       T,
       k,
       Q,
@@ -1549,25 +1620,25 @@ const qe = ({
       if (S(j.current, 1, "🐭 カスタムドラッグハンドラー - グローバルマウスアップ", {
         isActive: n.isActive,
         panelId: n.panelId,
-        dragMode: n.panelId ? r[n.panelId] : "unknown"
+        dragMode: n.panelId ? s[n.panelId] : "unknown"
       }), n.isActive) {
         $.current.stop();
-        const A = L.current;
-        if (A) {
+        const M = W.current;
+        if (M) {
           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]);
+            z && s[n.panelId] === "custom" ? (S(j.current, 1, "🔄 カスタムドラッグパネル移動実行:", n.panelId, "→", z), w(n.panelId, z, M.insertIndex)) : S(j.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", n.panelId, "モード:", s[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") {
+        f(), document.body.classList.remove("custom-dragging", "droppable"), U(), E.current = 0;
+      } else if (q(p.clientX, p.clientY)) {
+        const I = document.elementFromPoint(p.clientX, p.clientY)?.closest("[data-panel-id]"), x = I?.getAttribute("data-panel-id") ?? null;
+        if (!(I && x) || s[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(() => {
+        E.current += 1, l.isClicked === !1 && E.current === 1 ? (S(j.current, 1, "🖱️ 仮想クリック検出 - ドラッグ待機状態へ:", x), A({ 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);
@@ -1575,16 +1646,16 @@ const qe = ({
       } 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]
+    [n.isActive, n.panelId, l, s, u, w, U, X, q, A, T, f]
   ), a = P(
-    (p, A) => {
-      if (r[A] !== "custom") {
-        S(j.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", A);
+    (p, M) => {
+      if (s[M] !== "custom") {
+        S(j.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", M);
         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 });
+      O(p.clientX, p.clientY), l.isClicked && l.panelId === M && (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]
+    [l, s, O, T, F]
   );
   return G(() => () => {
     i.current !== null && clearTimeout(i.current), $.current.stop();
@@ -1593,53 +1664,12 @@ const qe = ({
     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({
+}, Ve = () => {
+  const [r, t] = ee({
     isDragging: !1,
     draggedPanel: null,
     dragOverColumn: null
-  }), [n, l] = ee(null), [r, u] = ee(null), [d, c] = ee({
+  }), [n, l] = ee(null), [s, u] = ee(null), [d, c] = ee({
     isActive: !1,
     panelId: "",
     startX: 0,
@@ -1647,87 +1677,128 @@ const qe = ({
   }), [b, C] = ee({
     isClicked: !1,
     panelId: null
-  }), [w, M] = ee({
+  }), [y, A] = 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);
+  }), [T, o] = ee(!1), w = P(() => {
+    c({ isActive: !1, panelId: "", startX: 0, startY: 0 }), t({ isDragging: !1, draggedPanel: null, dragOverColumn: null }), l(null), u(null);
   }, []), D = P(() => {
-    C({ isClicked: !1, panelId: null }), s(!1);
+    C({ isClicked: !1, panelId: null }), o(!1);
   }, []), m = P((X) => {
-    o(X);
+    t(X);
   }, []), O = P((X) => {
     l(X);
   }, []), F = P((X) => {
     u(X);
-  }, []), U = P((X) => {
+  }, []), q = P((X) => {
     c(X);
   }, []), B = P((X) => {
     C(X);
   }, []), k = P((X) => {
-    M(X);
-  }, []), I = P((X) => {
-    s(X);
+    A(X);
+  }, []), U = P((X) => {
+    o(X);
   }, []);
   return {
     // States / 状態
-    dragState: t,
+    dragState: r,
     dragOverPosition: n,
-    originalPanelPosition: r,
+    originalPanelPosition: s,
     customDrag: d,
     clickState: b,
-    touchDragState: w,
+    touchDragState: y,
     isMouseDown: T,
     // Stabilized Setters / 安定化されたセッター
     setDragState: m,
     setDragOverPosition: O,
     setOriginalPanelPosition: F,
-    setCustomDrag: U,
+    setCustomDrag: q,
     setClickState: B,
     setTouchDragState: k,
-    setIsMouseDown: I,
+    setIsMouseDown: U,
     // Utility Functions / ユーティリティ関数
-    resetDragState: y,
+    resetDragState: w,
     resetClickState: D
   };
-}, Ve = ({
-  debugConfig: t,
-  dragState: o,
+}, Be = () => {
+  const [r, t] = ee({
+    x: 0,
+    y: 0,
+    isVisible: !1
+  }), n = H(null), l = H(0), s = H(null), u = P((o, w) => {
+    t({ x: o, y: w, isVisible: !0 });
+  }, []), d = P(() => {
+    t((o) => ({ ...o, isVisible: !1 }));
+  }, []), c = P((o, w) => {
+    t((D) => D.x === o && D.y === w ? D : {
+      x: o,
+      y: w,
+      isVisible: D.isVisible
+    });
+  }, []), b = P((o, w) => {
+    l.current = Date.now(), s.current = { x: o, y: w };
+  }, []), C = P((o, w) => {
+    n.current = { x: o, y: w };
+  }, []), y = P((o, w, D = 500, m = 5) => Date.now() - (l.current || 0) >= D || !s.current ? !1 : Math.sqrt((o - s.current.x) ** 2 + (w - s.current.y) ** 2) < m, []), A = P((o, w) => {
+    if (!n.current)
+      return 0;
+    const D = Math.abs(o - n.current.x), m = Math.abs(w - n.current.y);
+    return Math.sqrt(D * D + m * m);
+  }, []), T = P(() => {
+    n.current = null, l.current = 0, s.current = null;
+  }, []);
+  return {
+    mousePosition: r,
+    lastClickPosition: n.current,
+    mouseDownTime: l.current,
+    mouseDownPosition: s.current,
+    showMousePosition: u,
+    hideMousePosition: d,
+    updateMousePosition: c,
+    recordMouseDown: b,
+    recordClickPosition: C,
+    isVirtualClick: y,
+    calculateMoveDistance: A,
+    clearMouseTracking: T
+  };
+}, Ze = ({
+  debugConfig: r,
+  dragState: t,
   customDrag: n,
   dragModes: l,
-  columnPanels: r,
+  columnPanels: s,
   dragOverPosition: u,
   originalPanelPosition: d,
   setDragState: c,
   setDragOverPosition: b,
   setOriginalPanelPosition: C,
-  performPanelMove: w,
-  showMousePosition: M,
+  performPanelMove: y,
+  showMousePosition: A,
   updateMousePosition: T,
-  resetDragState: s,
-  handlePlaceholderDragEnter: y,
+  resetDragState: o,
+  handlePlaceholderDragEnter: w,
   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 m = H(r);
+  m.current = r;
+  const O = H(s);
+  O.current = s;
+  const F = H(t);
+  F.current = t;
+  const q = H(u);
+  q.current = u;
   const B = H(d);
   B.current = d;
-  const k = H(new De(ue));
+  const k = H(new Ee(de));
   G(() => {
     const v = document.querySelector("main.max-w-full.flex-1.overflow-auto");
     v && k.current.setScrollElement(v);
   }, []);
-  const I = P(
+  const U = P(
     (v, N) => {
       if (n.isActive) {
         S(m.current, 2, "カスタムドラッグアクティブ中 - 通常ドラッグを無効化:", N), v.preventDefault();
@@ -1747,7 +1818,7 @@ const qe = ({
           break;
         }
       }
-      C(i), v.dataTransfer && (v.dataTransfer.setData("text/plain", N), v.dataTransfer.effectAllowed = "move"), M(v.clientX, v.clientY), requestAnimationFrame(() => {
+      C(i), v.dataTransfer && (v.dataTransfer.setData("text/plain", N), v.dataTransfer.effectAllowed = "move"), A(v.clientX, v.clientY), requestAnimationFrame(() => {
         c({
           isDragging: !0,
           draggedPanel: N,
@@ -1755,10 +1826,10 @@ const qe = ({
         });
       });
     },
-    [l, n.isActive, C, M, c]
+    [l, n.isActive, C, A, c]
   ), X = P(() => {
-    S(m.current, 1, "ドラッグ終了"), k.current.stop(), s();
-  }, [s]), Q = P(
+    S(m.current, 1, "ドラッグ終了"), k.current.stop(), o();
+  }, [o]), 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 }));
@@ -1766,24 +1837,24 @@ const qe = ({
       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, $);
+          const $ = parseInt(g, 10), W = parseInt(E, 10);
+          w(W, $);
         }
       } else
         j?.closest("[data-drop-zone]") || D();
     },
-    [T, c, y, D]
+    [T, c, w, D]
   ), h = P(
     (v, N) => {
       v.preventDefault();
-      const j = v.dataTransfer.getData("text/plain"), i = U.current;
+      const j = v.dataTransfer.getData("text/plain"), i = q.current;
       j && i && (S(m.current, 1, "🎯 ドロップ完了:", {
         draggedPanel: j,
         targetColumn: N,
         insertPosition: `カラム${i.columnIndex} - 位置${i.insertIndex}`
-      }), w(j, N, i.insertIndex), b(null), X());
+      }), y(j, N, i.insertIndex), b(null), X());
     },
-    [w, b, X]
+    [y, b, X]
   ), f = P(
     (v) => {
       const N = v.currentTarget, j = v.relatedTarget;
@@ -1795,62 +1866,62 @@ const qe = ({
     const v = (N) => {
       F.current.isDragging && (T(N.clientX, N.clientY), k.current.update(N.clientX, N.clientY));
     };
-    if (o.isDragging)
+    if (t.isDragging)
       return document.addEventListener("dragover", v), () => {
         document.removeEventListener("dragover", v), k.current.stop();
       };
-  }, [o.isDragging, T]), G(() => () => {
+  }, [t.isDragging, T]), G(() => () => {
     k.current.stop();
   }, []), {
-    handleDragStart: I,
+    handleDragStart: U,
     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(
+}, Ge = (r) => {
+  const [t, n] = ee(r), [l, s] = 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 = {
+      const F = O.getBoundingClientRect(), q = 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"
+        minHeight: q.minHeight || "auto",
+        maxHeight: q.maxHeight || "none"
       }, k = u.current[m];
-      (!k || Object.keys(B).some((I) => k[I] !== B[I])) && (u.current[m] = B, r((I) => ({
-        ...I,
+      (!k || Object.keys(B).some((U) => k[U] !== B[U])) && (u.current[m] = B, s((U) => ({
+        ...U,
         [m]: B
       })));
     },
     []
     // setPanelSizes は React の state セッターなので依存配列に含める必要はありません
-  ), w = P(
+  ), y = P(
     (m) => {
       const O = b(m);
       O && C(m, O);
     },
     [b, C]
-  ), M = P(
+  ), A = 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);
+      const q = b(m);
+      if (!q || d.current) return;
+      const B = q.getBoundingClientRect(), k = q.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) => {
+  ), o = 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)`;
+      const F = m - c.current.x, q = O - c.current.y;
+      d.current.style.transform = `translate(${F}px, ${q}px) scale(1.05)`;
     }
-  }, []), y = P(() => {
+  }, []), w = P(() => {
     d.current && (d.current.remove(), d.current = null);
   }, []), D = P((m) => {
     n((O) => ({
@@ -1860,71 +1931,33 @@ const qe = ({
   }, []);
   return {
     // State / 状態
-    panelVisibility: o,
+    panelVisibility: t,
     panelSizes: l,
     // State update functions / 状態更新関数
     setPanelVisibility: n,
-    setPanelSizes: r,
-    setPanelRef: M,
-    updatePanelSize: w,
+    setPanelSizes: s,
+    setPanelRef: A,
+    updatePanelSize: y,
     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
+    updateDragImagePosition: o,
+    removeDragImage: w
   };
-}, it = ({ initialColumnPanels: t, initialPanelVisibility: o, initialDragModes: n = {}, debugConfig: l, onPanelMove: r, onDragModeChange: u, onColumnPanelsChange: d }) => {
+}, it = ({ initialColumnPanels: r, initialPanelVisibility: t, initialDragModes: n = {}, debugConfig: l, onPanelMove: s, onDragModeChange: u, onColumnPanelsChange: d }) => {
   const c = H(l);
   c.current = l;
-  const [b, C] = ee(t), [w, M] = ee(n), T = H(b);
+  const [b, C] = ee(r), [y, A] = ee(n), T = H(b);
   T.current = b;
-  const s = Ie(), y = Ue(), D = Be(o), m = H({
+  const o = Ve(), w = Be(), D = Ge(t), m = H({
     mousemove: null,
     mouseup: null
   }), O = P((i) => {
-    const g = Object.keys(T.current), E = Xe(g, ne);
+    const g = Object.keys(T.current), E = He(g, re);
     for (let $ = 0; $ < E.length; $++) {
-      const L = E[$], Y = T.current[L]?.indexOf(i) ?? -1;
+      const W = E[$], Y = T.current[W]?.indexOf(i) ?? -1;
       if (Y !== -1)
         return { columnIndex: $, panelIndex: Y };
     }
@@ -1932,105 +1965,105 @@ const qe = ({
   }, []), 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));
+        const W = { ...$ }, Y = Object.keys(W).find((V) => W[V].includes(i));
         if (!Y)
           return console.error("Source column not found for panel:", i), $;
-        if (!L[g])
+        if (!W[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;
+          const V = [...W[Y]], a = V.indexOf(i), [p] = V.splice(a, 1), M = a < E ? E - 1 : E;
+          V.splice(M, 0, p), W[g] = V;
         } else {
-          L[Y] = L[Y].filter((a) => a !== i);
-          const V = [...L[g]];
-          V.splice(E, 0, i), L[g] = V;
+          W[Y] = W[Y].filter((a) => a !== i);
+          const V = [...W[g]];
+          V.splice(E, 0, i), W[g] = V;
         }
         if (S(c.current, 1, "✅ パネル移動完了:", i, "→", g), d && requestAnimationFrame(() => {
-          d(L);
-        }), r) {
+          d(W);
+        }), s) {
           const V = Object.keys($).find((a) => $[a].includes(i));
           V && requestAnimationFrame(() => {
-            r(i, V, g, E);
+            s(i, V, g, E);
           });
         }
-        return L;
+        return W;
       });
     },
-    [d, r]
-  ), U = P(
+    [d, s]
+  ), q = P(
     (i, g) => {
-      if (!s.dragState.isDragging && !s.customDrag.isActive) return;
-      const E = s.originalPanelPosition;
+      if (!(o.dragState.isDragging || o.customDrag.isActive)) return;
+      const E = o.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 })));
+      const $ = o.dragOverPosition;
+      (!$ || $.columnIndex !== i || $.insertIndex !== g) && (S(c.current, 1, `プレースホルダーエンター: カラム${i}, 位置${g}`), o.setDragOverPosition({ columnIndex: i, insertIndex: g }), o.setDragState((W) => ({ ...W, dragOverColumn: i })));
     },
-    [s]
+    [o]
   ), 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 (o.dragState.isDragging || o.customDrag.isActive) {
+        if (o.customDrag.isActive)
+          S(c.current, 1, "🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"), o.setDragOverPosition(null);
+        else if (o.dragState.isDragging && i && g !== void 0 && E !== void 0) {
+          const $ = o.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));
+            const W = i.currentTarget, Y = i.relatedTarget;
+            Y && W.contains(Y) || (S(c.current, 1, `ノーマルドラッグ - プレースホルダーリーブ: カラム${g}, 位置${E}。ハイライトを解除します。`), o.setDragOverPosition(null));
           }
         }
       }
     },
-    [s]
-  ), k = qe({
+    [o]
+  ), k = Ue({
     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,
+    dragState: o.dragState,
+    customDrag: o.customDrag,
+    clickState: o.clickState,
+    dragModes: y,
+    isMouseDown: o.isMouseDown,
+    originalPanelPosition: o.originalPanelPosition,
+    dragOverPosition: o.dragOverPosition,
+    setCustomDrag: o.setCustomDrag,
+    setDragState: o.setDragState,
+    setDragOverPosition: o.setDragOverPosition,
+    setOriginalPanelPosition: o.setOriginalPanelPosition,
+    setClickState: o.setClickState,
+    setIsMouseDown: o.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,
+    showMousePosition: w.showMousePosition,
+    updateMousePosition: w.updateMousePosition,
+    recordMouseDown: w.recordMouseDown,
+    recordClickPosition: w.recordClickPosition,
+    isVirtualClick: w.isVirtualClick,
+    calculateMoveDistance: w.calculateMoveDistance,
+    clearMouseTracking: w.clearMouseTracking,
+    resetDragState: o.resetDragState,
+    resetClickState: o.resetClickState,
     createDragImage: D.createDragImage,
     updateDragImagePosition: D.updateDragImagePosition,
     removeDragImage: D.removeDragImage,
-    handlePlaceholderDragEnter: U,
+    handlePlaceholderDragEnter: q,
     handlePlaceholderDragLeave: B
-  }), I = Ve({
+  }), U = Ze({
     debugConfig: c.current,
-    dragState: s.dragState,
-    customDrag: s.customDrag,
-    dragModes: w,
+    dragState: o.dragState,
+    customDrag: o.customDrag,
+    dragModes: y,
     columnPanels: b,
-    dragOverPosition: s.dragOverPosition,
-    originalPanelPosition: s.originalPanelPosition,
-    setDragState: s.setDragState,
-    setDragOverPosition: s.setDragOverPosition,
-    setOriginalPanelPosition: s.setOriginalPanelPosition,
+    dragOverPosition: o.dragOverPosition,
+    originalPanelPosition: o.originalPanelPosition,
+    setDragState: o.setDragState,
+    setDragOverPosition: o.setDragOverPosition,
+    setOriginalPanelPosition: o.setOriginalPanelPosition,
     performPanelMove: F,
-    showMousePosition: y.showMousePosition,
-    updateMousePosition: y.updateMousePosition,
-    resetDragState: s.resetDragState,
-    handlePlaceholderDragEnter: U,
+    showMousePosition: w.showMousePosition,
+    updateMousePosition: w.updateMousePosition,
+    resetDragState: o.resetDragState,
+    handlePlaceholderDragEnter: q,
     handlePlaceholderDragLeave: B
   }), X = P((i) => {
     m.current.mousemove && m.current.mousemove(i);
@@ -2040,65 +2073,65 @@ const qe = ({
   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;
+    const i = !o.clickState.isClicked && Object.entries(y).some(([, E]) => E === "custom"), g = o.clickState.isClicked && o.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]);
+      o.customDrag.isActive || o.dragState.isDragging || (m.current.mousemove = null, m.current.mouseup = null);
+  }, [o.clickState.isClicked, o.clickState.panelId, y, o.customDrag.isActive, o.dragState.isDragging, k.handleGlobalMouseMove, k.handleGlobalMouseUp]);
   const h = P(
     (i, g) => {
       const E = i.touches[0], $ = i.currentTarget;
-      s.setTouchDragState({
+      o.setTouchDragState({
         isTouchDragging: !0,
         startX: E.clientX,
         startY: E.clientY,
         currentX: E.clientX,
         currentY: E.clientY,
         draggedElement: $
-      }), s.setDragState({
+      }), o.setDragState({
         isDragging: !0,
         draggedPanel: g,
         dragOverColumn: null
       });
     },
-    [s]
+    [o]
   ), f = P(
     (i) => {
-      if (!s.touchDragState.isTouchDragging) return;
+      if (!o.touchDragState.isTouchDragging) return;
       i.preventDefault();
       const g = i.touches[0];
-      s.setTouchDragState((E) => ({
+      o.setTouchDragState((E) => ({
         ...E,
         currentX: g.clientX,
         currentY: g.clientY
       }));
     },
-    [s.touchDragState.isTouchDragging, s]
+    [o.touchDragState.isTouchDragging, o]
   ), v = P(
     (i) => {
-      s.touchDragState.isTouchDragging && (s.setTouchDragState({
+      o.touchDragState.isTouchDragging && (o.setTouchDragState({
         isTouchDragging: !1,
         startX: 0,
         startY: 0,
         currentX: 0,
         currentY: 0,
         draggedElement: null
-      }), I.handleDragEnd());
+      }), U.handleDragEnd());
     },
-    [s.touchDragState.isTouchDragging, s, I]
+    [o.touchDragState.isTouchDragging, o, U]
   ), N = P(
     (i) => {
-      S(c.current, 1, "🔄 toggleDragMode called:", { panelId: i }), M((g) => {
-        const $ = (g[i] || "normal") === "normal" ? "custom" : "normal", L = { ...g, [i]: $ };
+      S(c.current, 1, "🔄 toggleDragMode called:", { panelId: i }), A((g) => {
+        const $ = (g[i] || "normal") === "normal" ? "custom" : "normal", W = { ...g, [i]: $ };
         if (u)
           try {
             u(i, $);
           } catch (Y) {
             console.error("🔄 Error in onDragModeChange:", Y);
           }
-        return L;
+        return W;
       });
     },
     [u]
@@ -2109,38 +2142,102 @@ const qe = ({
     // 状態
     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,
+    dragModes: y,
+    dragState: o.dragState,
+    dragOverPosition: o.dragOverPosition,
+    originalPanelPosition: o.originalPanelPosition,
+    touchDragState: o.touchDragState,
+    customDrag: o.customDrag,
+    clickState: o.clickState,
+    mousePosition: w.mousePosition,
     panelSizes: D.panelSizes,
     // 状態更新関数
     setColumnPanels: C,
     setPanelVisibility: D.setPanelVisibility,
-    setDragModes: M,
+    setDragModes: A,
     setPanelRef: D.setPanelRef,
     // イベントハンドラー
-    handleDragStart: I.handleDragStart,
-    handleDragEnd: I.handleDragEnd,
+    handleDragStart: U.handleDragStart,
+    handleDragEnd: U.handleDragEnd,
     handleMouseDown: k.handleMouseDown,
     handleTouchStart: h,
     handleTouchMove: f,
     handleTouchEnd: v,
-    handlePlaceholderDragEnter: U,
+    handlePlaceholderDragEnter: q,
     handlePlaceholderDragLeave: B,
-    handleDragOverWithInsert: I.handleDragOverWithInsert,
-    handleDropWithInsert: I.handleDropWithInsert,
-    handleColumnDragLeave: I.handleColumnDragLeave,
+    handleDragOverWithInsert: U.handleDragOverWithInsert,
+    handleDropWithInsert: U.handleDropWithInsert,
+    handleColumnDragLeave: U.handleColumnDragLeave,
     handlePanelSizeInfoClick: j,
     // ユーティリティ関数
     toggleDragMode: N,
     findPanelPosition: O
   };
-}, ct = {
+}, ct = ({ minColumnWidth: r = 350, defaultColumns: t = 3, maxColumns: n = 6, minColumns: l = 1, currentColumnWidths: s = {} } = {}) => {
+  const [u, d] = ee(0), c = H(0), b = H(null), [C, y] = ee(!1), A = H(t);
+  G(() => {
+    if (typeof window > "u")
+      return;
+    const w = () => {
+      const m = window.visualViewport?.width ?? 0, O = document?.documentElement?.clientWidth ?? 0, F = document?.body?.clientWidth ?? 0, q = window.innerWidth ?? 0;
+      return O > 0 ? Math.floor(O) : m > 0 ? Math.floor(m) : F > 0 ? Math.floor(F) : Math.floor(q);
+    }, D = () => {
+      b.current !== null && cancelAnimationFrame(b.current), b.current = requestAnimationFrame(() => {
+        const m = w();
+        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 = ye(() => {
+    if (!C || u === 0)
+      return A.current = t, t;
+    const w = Math.max(u - 64, 0), D = 24, m = Object.values(s);
+    let O;
+    if (m.length > 0) {
+      const F = m.reduce((k, U) => k + U, 0) / m.length, q = Math.max(r, F);
+      O = Math.floor((w + D) / (q + D)), m.reduce((k, U) => k + U, 0) + (m.length - 1) * D > w && m.length > l && (O = Math.min(O, m.length - 1));
+    } else
+      O = Math.floor((w + D) / (r + D));
+    return O = Math.max(l, Math.min(n, O)), A.current === O ? A.current : (A.current = O, O);
+  }, [C, u, t, r, n, l, s]), o = P(() => {
+    y((w) => !w);
+  }, []);
+  return {
+    responsiveColumnCount: T,
+    isResponsiveMode: C,
+    screenWidth: u,
+    toggleResponsiveMode: o
+  };
+}, ut = ({ isResponsiveMode: r, responsiveColumnCount: t, currentColumnCount: n, screenWidth: l, onToggleResponsive: s }) => /* @__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: s,
+      className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${r ? "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: r ? "レスポンシブモードを無効化" : "レスポンシブモードを有効化",
+      children: [
+        r ? /* @__PURE__ */ e.jsx(Le, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(We, { className: "h-3 w-3" }),
+        /* @__PURE__ */ e.jsx("span", { children: r ? "レスポンシブ" : "固定" })
+      ]
+    }
+  ),
+  r && /* @__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: [
+      t,
+      "列"
+    ] }),
+    t !== n && /* @__PURE__ */ e.jsx("span", { className: "text-orange-600", children: "(変更予定)" })
+  ] })
+] }), dt = {
   showDebugPanel: !1,
   showMousePosition: !1,
   showPanelSizes: !1,
@@ -2149,37 +2246,37 @@ const qe = ({
   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,
+  tt as ColumnControlPanel,
+  nt as ColumnInsertPanel,
+  re as DEFAULT_COLUMN_ID_CONFIG,
+  dt as DEFAULT_DEBUG_CONFIG,
+  de as DEFAULT_EDGE_SCROLL_CONFIG,
+  rt as DebugControlPanel,
+  et as DragDropLayout,
+  Pe as DropZoneDebugOverlay,
+  Ee as EdgeScrollManager,
+  je as InsertPlaceholder,
+  Fe as PanelSizeDisplay,
+  Ke as ResizableColumn,
+  De as ResizeHandle,
+  ut as ResponsiveControl,
+  ve as calculateScrollVector,
+  lt 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,
+  ce as generateColumnId,
+  Ne as generateColumnIds,
+  ot as getNextColumnId,
+  st as isValidColumnId,
+  Ie as normalizeColumnPanels,
+  ue as parseColumnId,
+  qe as performScroll,
+  He as sortColumnIds,
+  at as useColumnLayout,
+  Ue as useCustomDragHandlers,
   it as useDragDropColumns,
-  Ie as useDragDropState,
-  Ue as useMouseTracking,
-  Ve as useNormalDragHandlers,
-  Be as usePanelManagement,
-  at as useResponsiveColumns
+  Ve as useDragDropState,
+  Be as useMouseTracking,
+  Ze as useNormalDragHandlers,
+  Ge as usePanelManagement,
+  ct as useResponsiveColumns
 };