@aiquants/drag-drop-panels 0.8.4 → 0.9.0

package/dist/index.es.js

@@ -1,276 +1,276 @@
-import qe, { forwardRef as Ie, createElement as Ee, useRef as F, useState as te, useEffect as K, useLayoutEffect as Se, useCallback as w, memo as st, useMemo as Ue, Fragment as ot } from "react";
-var we = { exports: {} }, pe = {};
-var We;
-function at() {
-  if (We) return pe;
-  We = 1;
-  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), e = /* @__PURE__ */ Symbol.for("react.fragment");
-  function n(s, o, i) {
-    var u = null;
-    if (i !== void 0 && (u = "" + i), o.key !== void 0 && (u = "" + o.key), "key" in o) {
-      i = {};
-      for (var c in o)
-        c !== "key" && (i[c] = o[c]);
-    } else i = o;
-    return o = i.ref, {
-      $$typeof: r,
-      type: s,
-      key: u,
-      ref: o !== void 0 ? o : null,
-      props: i
+import qt, { forwardRef as Wt, createElement as Ge, useRef as W, useState as se, useEffect as ee, useLayoutEffect as we, useCallback as D, memo as hn, useMemo as Re, useId as mn, Fragment as fn } from "react";
+var _e = { exports: {} }, Oe = {};
+var kt;
+function pn() {
+  if (kt) return Oe;
+  kt = 1;
+  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
+  function e(o, r, a) {
+    var l = null;
+    if (a !== void 0 && (l = "" + a), r.key !== void 0 && (l = "" + r.key), "key" in r) {
+      a = {};
+      for (var u in r)
+        u !== "key" && (a[u] = r[u]);
+    } else a = r;
+    return r = a.ref, {
+      $$typeof: t,
+      type: o,
+      key: l,
+      ref: r !== void 0 ? r : null,
+      props: a
     };
   }
-  return pe.Fragment = e, pe.jsx = n, pe.jsxs = n, pe;
+  return Oe.Fragment = n, Oe.jsx = e, Oe.jsxs = e, Oe;
 }
-var xe = {};
-var ze;
-function lt() {
-  return ze || (ze = 1, process.env.NODE_ENV !== "production" && (function() {
-    function r(a) {
-      if (a == null) return null;
-      if (typeof a == "function")
-        return a.$$typeof === C ? null : a.displayName || a.name || null;
-      if (typeof a == "string") return a;
-      switch (a) {
+var Ce = {};
+var Nt;
+function gn() {
+  return Nt || (Nt = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(h) {
+      if (h == null) return null;
+      if (typeof h == "function")
+        return h.$$typeof === L ? null : h.displayName || h.name || null;
+      if (typeof h == "string") return h;
+      switch (h) {
         case k:
           return "Fragment";
-        case R:
+        case N:
           return "Profiler";
-        case _:
+        case S:
           return "StrictMode";
-        case U:
+        case T:
           return "Suspense";
-        case $:
+        case Y:
           return "SuspenseList";
-        case x:
+        case v:
           return "Activity";
       }
-      if (typeof a == "object")
-        switch (typeof a.tag == "number" && console.error(
+      if (typeof h == "object")
+        switch (typeof h.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), a.$$typeof) {
-          case j:
+        ), h.$$typeof) {
+          case P:
             return "Portal";
-          case Z:
-            return a.displayName || "Context";
-          case z:
-            return (a._context.displayName || "Context") + ".Consumer";
-          case Y:
-            var d = a.render;
-            return a = a.displayName, a || (a = d.displayName || d.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
-          case L:
-            return d = a.displayName || null, d !== null ? d : r(a.type) || "Memo";
-          case f:
-            d = a._payload, a = a._init;
+          case d:
+            return h.displayName || "Context";
+          case R:
+            return (h._context.displayName || "Context") + ".Consumer";
+          case $:
+            var x = h.render;
+            return h = h.displayName, h || (h = x.displayName || x.name || "", h = h !== "" ? "ForwardRef(" + h + ")" : "ForwardRef"), h;
+          case G:
+            return x = h.displayName || null, x !== null ? x : t(h.type) || "Memo";
+          case g:
+            x = h._payload, h = h._init;
             try {
-              return r(a(d));
+              return t(h(x));
             } catch {
             }
         }
       return null;
     }
-    function e(a) {
-      return "" + a;
+    function n(h) {
+      return "" + h;
     }
-    function n(a) {
+    function e(h) {
       try {
-        e(a);
-        var d = !1;
+        n(h);
+        var x = !1;
       } catch {
-        d = !0;
+        x = !0;
       }
-      if (d) {
-        d = console;
-        var S = d.error, X = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
-        return S.call(
-          d,
+      if (x) {
+        x = console;
+        var M = x.error, F = typeof Symbol == "function" && Symbol.toStringTag && h[Symbol.toStringTag] || h.constructor.name || "Object";
+        return M.call(
+          x,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          X
-        ), e(a);
+          F
+        ), n(h);
       }
     }
-    function s(a) {
-      if (a === k) return "<>";
-      if (typeof a == "object" && a !== null && a.$$typeof === f)
+    function o(h) {
+      if (h === k) return "<>";
+      if (typeof h == "object" && h !== null && h.$$typeof === g)
         return "<...>";
       try {
-        var d = r(a);
-        return d ? "<" + d + ">" : "<...>";
+        var x = t(h);
+        return x ? "<" + x + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
-      var a = W.A;
-      return a === null ? null : a.getOwner();
+    function r() {
+      var h = w.A;
+      return h === null ? null : h.getOwner();
     }
-    function i() {
+    function a() {
       return Error("react-stack-top-frame");
     }
-    function u(a) {
-      if (p.call(a, "key")) {
-        var d = Object.getOwnPropertyDescriptor(a, "key").get;
-        if (d && d.isReactWarning) return !1;
+    function l(h) {
+      if (m.call(h, "key")) {
+        var x = Object.getOwnPropertyDescriptor(h, "key").get;
+        if (x && x.isReactWarning) return !1;
       }
-      return a.key !== void 0;
+      return h.key !== void 0;
     }
-    function c(a, d) {
-      function S() {
-        v || (v = !0, console.error(
+    function u(h, x) {
+      function M() {
+        _ || (_ = !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)",
-          d
+          x
         ));
       }
-      S.isReactWarning = !0, Object.defineProperty(a, "key", {
-        get: S,
+      M.isReactWarning = !0, Object.defineProperty(h, "key", {
+        get: M,
         configurable: !0
       });
     }
-    function h() {
-      var a = r(this.type);
-      return D[a] || (D[a] = !0, console.error(
+    function f() {
+      var h = t(this.type);
+      return I[h] || (I[h] = !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;
+      )), h = this.props.ref, h !== void 0 ? h : null;
     }
-    function N(a, d, S, X, G, Q) {
-      var V = S.ref;
-      return a = {
-        $$typeof: l,
-        type: a,
-        key: d,
-        props: S,
-        _owner: X
-      }, (V !== void 0 ? V : null) !== null ? Object.defineProperty(a, "ref", {
+    function b(h, x, M, F, Z, ae) {
+      var X = M.ref;
+      return h = {
+        $$typeof: c,
+        type: h,
+        key: x,
+        props: M,
+        _owner: F
+      }, (X !== void 0 ? X : null) !== null ? Object.defineProperty(h, "ref", {
         enumerable: !1,
-        get: h
-      }) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
+        get: f
+      }) : Object.defineProperty(h, "ref", { enumerable: !1, value: null }), h._store = {}, Object.defineProperty(h._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(a, "_debugInfo", {
+      }), Object.defineProperty(h, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(a, "_debugStack", {
+      }), Object.defineProperty(h, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: G
-      }), Object.defineProperty(a, "_debugTask", {
+        value: Z
+      }), Object.defineProperty(h, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Q
-      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
+        value: ae
+      }), Object.freeze && (Object.freeze(h.props), Object.freeze(h)), h;
     }
-    function b(a, d, S, X, G, Q) {
-      var V = d.children;
-      if (V !== void 0)
-        if (X)
-          if (g(V)) {
-            for (X = 0; X < V.length; X++)
-              M(V[X]);
-            Object.freeze && Object.freeze(V);
+    function y(h, x, M, F, Z, ae) {
+      var X = x.children;
+      if (X !== void 0)
+        if (F)
+          if (p(X)) {
+            for (F = 0; F < X.length; F++)
+              A(X[F]);
+            Object.freeze && Object.freeze(X);
           } 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(V);
-      if (p.call(d, "key")) {
-        V = r(a);
-        var re = Object.keys(d).filter(function(se) {
-          return se !== "key";
+        else A(X);
+      if (m.call(x, "key")) {
+        X = t(h);
+        var H = Object.keys(x).filter(function(ue) {
+          return ue !== "key";
         });
-        X = 0 < re.length ? "{key: someKey, " + re.join(": ..., ") + ": ...}" : "{key: someKey}", H[V + X] || (re = 0 < re.length ? "{" + re.join(": ..., ") + ": ...}" : "{}", console.error(
+        F = 0 < H.length ? "{key: someKey, " + H.join(": ..., ") + ": ...}" : "{key: someKey}", oe[X + F] || (H = 0 < H.length ? "{" + H.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} />`,
+          F,
           X,
-          V,
-          re,
-          V
-        ), H[V + X] = !0);
+          H,
+          X
+        ), oe[X + F] = !0);
       }
-      if (V = null, S !== void 0 && (n(S), V = "" + S), u(d) && (n(d.key), V = "" + d.key), "key" in d) {
-        S = {};
-        for (var ce in d)
-          ce !== "key" && (S[ce] = d[ce]);
-      } else S = d;
-      return V && c(
-        S,
-        typeof a == "function" ? a.displayName || a.name || "Unknown" : a
-      ), N(
-        a,
-        V,
-        S,
-        o(),
-        G,
-        Q
+      if (X = null, M !== void 0 && (e(M), X = "" + M), l(x) && (e(x.key), X = "" + x.key), "key" in x) {
+        M = {};
+        for (var ve in x)
+          ve !== "key" && (M[ve] = x[ve]);
+      } else M = x;
+      return X && u(
+        M,
+        typeof h == "function" ? h.displayName || h.name || "Unknown" : h
+      ), b(
+        h,
+        X,
+        M,
+        r(),
+        Z,
+        ae
       );
     }
-    function M(a) {
-      T(a) ? a._store && (a._store.validated = 1) : typeof a == "object" && a !== null && a.$$typeof === f && (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 A(h) {
+      z(h) ? h._store && (h._store.validated = 1) : typeof h == "object" && h !== null && h.$$typeof === g && (h._payload.status === "fulfilled" ? z(h._payload.value) && h._payload.value._store && (h._payload.value._store.validated = 1) : h._store && (h._store.validated = 1));
     }
-    function T(a) {
-      return typeof a == "object" && a !== null && a.$$typeof === l;
+    function z(h) {
+      return typeof h == "object" && h !== null && h.$$typeof === c;
     }
-    var y = qe, l = /* @__PURE__ */ Symbol.for("react.transitional.element"), j = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), _ = /* @__PURE__ */ Symbol.for("react.strict_mode"), R = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), Z = /* @__PURE__ */ Symbol.for("react.context"), Y = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), $ = /* @__PURE__ */ Symbol.for("react.suspense_list"), L = /* @__PURE__ */ Symbol.for("react.memo"), f = /* @__PURE__ */ Symbol.for("react.lazy"), x = /* @__PURE__ */ Symbol.for("react.activity"), C = /* @__PURE__ */ Symbol.for("react.client.reference"), W = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, p = Object.prototype.hasOwnProperty, g = Array.isArray, m = console.createTask ? console.createTask : function() {
+    var E = qt, c = /* @__PURE__ */ Symbol.for("react.transitional.element"), P = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), S = /* @__PURE__ */ Symbol.for("react.strict_mode"), N = /* @__PURE__ */ Symbol.for("react.profiler"), R = /* @__PURE__ */ Symbol.for("react.consumer"), d = /* @__PURE__ */ Symbol.for("react.context"), $ = /* @__PURE__ */ Symbol.for("react.forward_ref"), T = /* @__PURE__ */ Symbol.for("react.suspense"), Y = /* @__PURE__ */ Symbol.for("react.suspense_list"), G = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), v = /* @__PURE__ */ Symbol.for("react.activity"), L = /* @__PURE__ */ Symbol.for("react.client.reference"), w = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, m = Object.prototype.hasOwnProperty, p = Array.isArray, j = console.createTask ? console.createTask : function() {
       return null;
     };
-    y = {
-      react_stack_bottom_frame: function(a) {
-        return a();
+    E = {
+      react_stack_bottom_frame: function(h) {
+        return h();
       }
     };
-    var v, D = {}, A = y.react_stack_bottom_frame.bind(
-      y,
-      i
-    )(), O = m(s(i)), H = {};
-    xe.Fragment = k, xe.jsx = function(a, d, S) {
-      var X = 1e4 > W.recentlyCreatedOwnerStacks++;
-      return b(
-        a,
-        d,
-        S,
+    var _, I = {}, re = E.react_stack_bottom_frame.bind(
+      E,
+      a
+    )(), V = j(o(a)), oe = {};
+    Ce.Fragment = k, Ce.jsx = function(h, x, M) {
+      var F = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return y(
+        h,
+        x,
+        M,
         !1,
-        X ? Error("react-stack-top-frame") : A,
-        X ? m(s(a)) : O
+        F ? Error("react-stack-top-frame") : re,
+        F ? j(o(h)) : V
       );
-    }, xe.jsxs = function(a, d, S) {
-      var X = 1e4 > W.recentlyCreatedOwnerStacks++;
-      return b(
-        a,
-        d,
-        S,
+    }, Ce.jsxs = function(h, x, M) {
+      var F = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return y(
+        h,
+        x,
+        M,
         !0,
-        X ? Error("react-stack-top-frame") : A,
-        X ? m(s(a)) : O
+        F ? Error("react-stack-top-frame") : re,
+        F ? j(o(h)) : V
       );
     };
-  })()), xe;
+  })()), Ce;
 }
-var Ye;
-function it() {
-  return Ye || (Ye = 1, process.env.NODE_ENV === "production" ? we.exports = at() : we.exports = lt()), we.exports;
+var Ot;
+function xn() {
+  return Ot || (Ot = 1, process.env.NODE_ENV === "production" ? _e.exports = pn() : _e.exports = gn()), _e.exports;
 }
-var t = it();
-const ct = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ut = (r) => r.replace(
+var s = xn();
+const vn = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), bn = (t) => t.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (e, n, s) => s ? s.toUpperCase() : n.toLowerCase()
-), Fe = (r) => {
-  const e = ut(r);
-  return e.charAt(0).toUpperCase() + e.slice(1);
-}, Be = (...r) => r.filter((e, n, s) => !!e && e.trim() !== "" && s.indexOf(e) === n).join(" ").trim(), dt = (r) => {
-  for (const e in r)
-    if (e.startsWith("aria-") || e === "role" || e === "title")
+  (n, e, o) => o ? o.toUpperCase() : e.toLowerCase()
+), Ct = (t) => {
+  const n = bn(t);
+  return n.charAt(0).toUpperCase() + n.slice(1);
+}, It = (...t) => t.filter((n, e, o) => !!n && n.trim() !== "" && o.indexOf(n) === e).join(" ").trim(), yn = (t) => {
+  for (const n in t)
+    if (n.startsWith("aria-") || n === "role" || n === "title")
       return !0;
 };
-var ht = {
+var wn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -281,51 +281,67 @@ var ht = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-const mt = Ie(
+const jn = Wt(
   ({
-    color: r = "currentColor",
-    size: e = 24,
-    strokeWidth: n = 2,
-    absoluteStrokeWidth: s,
-    className: o = "",
-    children: i,
-    iconNode: u,
-    ...c
-  }, h) => Ee(
+    color: t = "currentColor",
+    size: n = 24,
+    strokeWidth: e = 2,
+    absoluteStrokeWidth: o,
+    className: r = "",
+    children: a,
+    iconNode: l,
+    ...u
+  }, f) => Ge(
     "svg",
     {
-      ref: h,
-      ...ht,
-      width: e,
-      height: e,
-      stroke: r,
-      strokeWidth: s ? Number(n) * 24 / Number(e) : n,
-      className: Be("lucide", o),
-      ...!i && !dt(c) && { "aria-hidden": "true" },
-      ...c
+      ref: f,
+      ...wn,
+      width: n,
+      height: n,
+      stroke: t,
+      strokeWidth: o ? Number(e) * 24 / Number(n) : e,
+      className: It("lucide", r),
+      ...!a && !yn(u) && { "aria-hidden": "true" },
+      ...u
     },
     [
-      ...u.map(([N, b]) => Ee(N, b)),
-      ...Array.isArray(i) ? i : [i]
+      ...l.map(([b, y]) => Ge(b, y)),
+      ...Array.isArray(a) ? a : [a]
     ]
   )
 );
-const oe = (r, e) => {
-  const n = Ie(
-    ({ className: s, ...o }, i) => Ee(mt, {
-      ref: i,
-      iconNode: e,
-      className: Be(
-        `lucide-${ct(Fe(r))}`,
-        `lucide-${r}`,
-        s
+const ie = (t, n) => {
+  const e = Wt(
+    ({ className: o, ...r }, a) => Ge(jn, {
+      ref: a,
+      iconNode: n,
+      className: It(
+        `lucide-${vn(Ct(t))}`,
+        `lucide-${t}`,
+        o
       ),
-      ...o
+      ...r
     })
   );
-  return n.displayName = Fe(r), n;
+  return e.displayName = Ct(t), e;
 };
-const ft = [
+const Pn = [
+  ["path", { d: "M12 5v14", key: "s699le" }],
+  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
+], En = ie("arrow-down", Pn);
+const Dn = [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+], kn = ie("arrow-left", Dn);
+const Nn = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+], On = ie("arrow-right", Nn);
+const Cn = [
+  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
+  ["path", { d: "M12 19V5", key: "x0mq9r" }]
+], Mn = ie("arrow-up", Cn);
+const Sn = [
   [
     "path",
     {
@@ -334,8 +350,8 @@ const ft = [
     }
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-], pt = oe("eye", ft);
-const xt = [
+], An = ie("eye", Sn);
+const $n = [
   [
     "path",
     {
@@ -352,20 +368,20 @@ const xt = [
     }
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-], Xe = oe("eye-off", xt);
-const gt = [
+], Mt = ie("eye-off", $n);
+const Tn = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "m21 3-7 7", key: "1l2asr" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
-], bt = oe("maximize-2", gt);
-const vt = [
+], Ln = ie("maximize-2", Tn);
+const _n = [
   ["path", { d: "m14 10 7-7", key: "oa77jy" }],
   ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
-], yt = oe("minimize-2", vt);
-const wt = [
+], Rn = ie("minimize-2", _n);
+const zn = [
   ["path", { d: "M12.586 12.586 19 19", key: "ea5xo7" }],
   [
     "path",
@@ -374,8 +390,8 @@ const wt = [
       key: "277e5u"
     }
   ]
-], jt = oe("mouse-pointer", wt);
-const Pt = [
+], qn = ie("mouse-pointer", zn);
+const Wn = [
   ["path", { d: "M14 4.1 12 6", key: "ita8i4" }],
   ["path", { d: "m5.1 8-2.9-.8", key: "1go3kf" }],
   ["path", { d: "m6 12-1.9 2", key: "mnht97" }],
@@ -387,19 +403,19 @@ const Pt = [
       key: "s0h3yz"
     }
   ]
-], kt = oe("mouse-pointer-click", Pt);
-const Nt = [
+], In = ie("mouse-pointer-click", Wn);
+const Hn = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], Ve = oe("x", Nt), le = class le {
+], Ht = ie("x", Hn), me = class me {
   /**
    * @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(e = 2, n = "[drag-drop-panels]", s = console) {
-    this.level = e, this.prefix = n, this.impl = s;
+  constructor(n = 2, e = "[drag-drop-panels]", o = console) {
+    this.level = n, this.prefix = e, this.impl = o;
   }
   /**
    * @method setLevel
@@ -407,8 +423,8 @@ const Nt = [
    * @description 静的インスタンスの現在のログレベルを更新します。
    * @param {LogLevel} level - The new log level.
    */
-  static setLevel(e) {
-    le.instance.setLevel(e);
+  static setLevel(n) {
+    me.instance.setLevel(n);
   }
   /**
    * @method setLevel
@@ -416,8 +432,8 @@ const Nt = [
    * @description 現在のログレベルを更新します。
    * @param {LogLevel} level - The new log level.
    */
-  setLevel(e) {
-    this.level = e;
+  setLevel(n) {
+    this.level = n;
   }
   /**
    * @method setImplementation
@@ -425,8 +441,8 @@ const Nt = [
    * @description 静的インスタンスのロガーの実装を更新します。
    * @param {ILogger} impl - The new logger implementation.
    */
-  static setImplementation(e) {
-    le.instance.setImplementation(e);
+  static setImplementation(n) {
+    me.instance.setImplementation(n);
   }
   /**
    * @method setImplementation
@@ -434,8 +450,8 @@ const Nt = [
    * @description ロガーの実装を更新します。
    * @param {ILogger} impl - The new logger implementation.
    */
-  setImplementation(e) {
-    this.impl = e;
+  setImplementation(n) {
+    this.impl = n;
   }
   /**
    * @method setPrefix
@@ -443,8 +459,8 @@ const Nt = [
    * @description 静的インスタンスのログのプレフィックスを更新します。
    * @param {string} prefix - The new prefix.
    */
-  static setPrefix(e) {
-    le.instance.setPrefix(e);
+  static setPrefix(n) {
+    me.instance.setPrefix(n);
   }
   /**
    * @method setPrefix
@@ -452,462 +468,1038 @@ const Nt = [
    * @description ログのプレフィックスを更新します。
    * @param {string} prefix - The new prefix.
    */
-  setPrefix(e) {
-    this.prefix = e;
+  setPrefix(n) {
+    this.prefix = n;
   }
-  formatMessage(e) {
-    return typeof e == "string" ? [`${this.prefix} ${e}`] : [this.prefix, e];
+  formatMessage(n) {
+    return typeof n == "string" ? [`${this.prefix} ${n}`] : [this.prefix, n];
   }
-  static debug(e, ...n) {
-    le.instance.debug(e, ...n);
+  static debug(n, ...e) {
+    me.instance.debug(n, ...e);
   }
-  debug(e, ...n) {
-    this.level <= 0 && this.impl.debug(...this.formatMessage(e), ...n);
+  debug(n, ...e) {
+    this.level <= 0 && this.impl.debug(...this.formatMessage(n), ...e);
   }
-  static info(e, ...n) {
-    le.instance.info(e, ...n);
+  static info(n, ...e) {
+    me.instance.info(n, ...e);
   }
-  info(e, ...n) {
-    this.level <= 1 && this.impl.info(...this.formatMessage(e), ...n);
+  info(n, ...e) {
+    this.level <= 1 && this.impl.info(...this.formatMessage(n), ...e);
   }
-  static warn(e, ...n) {
-    le.instance.warn(e, ...n);
+  static warn(n, ...e) {
+    me.instance.warn(n, ...e);
   }
-  warn(e, ...n) {
-    this.level <= 2 && this.impl.warn(...this.formatMessage(e), ...n);
+  warn(n, ...e) {
+    this.level <= 2 && this.impl.warn(...this.formatMessage(n), ...e);
   }
-  static error(e, ...n) {
-    le.instance.error(e, ...n);
+  static error(n, ...e) {
+    me.instance.error(n, ...e);
   }
-  error(e, ...n) {
-    this.level <= 3 && this.impl.error(...this.formatMessage(e), ...n);
+  error(n, ...e) {
+    this.level <= 3 && this.impl.error(...this.formatMessage(n), ...e);
   }
 };
-le.instance = new le(2, "[drag-drop-panels]");
-let Ce = le;
-const Dt = ({ config: r, panelId: e, sizeInfo: n, onSizeInfoClick: s }) => r.showPanelSizes && n ? (
+me.instance = new me(2, "[drag-drop-panels]");
+let Ke = me;
+const Yn = ({ config: t, panelId: n, sizeInfo: e, onSizeInfoClick: o }) => t.showPanelSizes && e ? (
   // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素。デバッグ目的のため、インタラクティブ性は限定的。
   // biome-ignore lint/a11y/useKeyWithClickEvents: キーボード操作はデバッグ機能では優先度が低い。
-  /* @__PURE__ */ t.jsxs(
+  /* @__PURE__ */ s.jsxs(
     "div",
     {
       className: "absolute top-1 right-24 z-10 cursor-default rounded-md bg-red-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg",
-      onClick: s,
-      onMouseDown: s,
-      onTouchStart: (o) => o instanceof TouchEvent && s(o),
-      onDragStart: s,
+      onClick: o,
+      onMouseDown: o,
+      onTouchStart: (r) => r instanceof TouchEvent && o(r),
+      onDragStart: o,
       children: [
-        /* @__PURE__ */ t.jsxs("div", { className: "text-[10px] opacity-80", children: [
+        /* @__PURE__ */ s.jsxs("div", { className: "text-[10px] opacity-80", children: [
           "ID:",
-          e
+          n
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { children: [
-          n.width,
+        /* @__PURE__ */ s.jsxs("div", { children: [
+          e.width,
           "×",
-          n.height
+          e.height
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ s.jsxs("div", { children: [
           "X:",
-          n.x,
+          e.x,
           " Y:",
-          n.y
+          e.y
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { className: "text-[10px] opacity-80", children: [
+        /* @__PURE__ */ s.jsxs("div", { className: "text-[10px] opacity-80", children: [
           "min:",
-          n.minHeight,
+          e.minHeight,
           " max:",
-          n.maxHeight
+          e.maxHeight
         ] })
       ]
     }
   )
-) : null, E = (r, e, ...n) => {
-  (r.logLevel ?? 0) >= e && Ce.info(...n);
-}, Ze = qe.memo(({ index: r, columnIndex: e, isDragging: n, dragOverPosition: s, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h }) => {
-  const N = o && o.columnIndex === e && (o.panelIndex === r || o.panelIndex + 1 === r), b = !N && s?.columnIndex === e && s?.insertIndex === r, M = F(null), [T, y] = te(null), l = n || (h?.isActive ?? !1);
-  return K(() => {
-    if (M.current) {
-      const j = M.current.getBoundingClientRect(), k = {
-        width: Math.round(j.width),
-        height: Math.round(j.height),
-        x: Math.round(j.left),
-        y: Math.round(j.top)
+) : null, O = (t, n, ...e) => {
+  (t.logLevel ?? 0) >= n && Ke.info(...e);
+}, et = (t, n, e) => t.columnIndex === n && (t.panelIndex === e || t.panelIndex + 1 === e), Yt = (t, n, e, o) => {
+  const r = Object.keys(t).find((u) => t[u].includes(n));
+  if (r === void 0 || t[e] === void 0) return null;
+  const a = { ...t };
+  if (r === e) {
+    const u = [...t[r]], f = u.indexOf(n);
+    return u.splice(f, 1), u.splice(f < o ? o - 1 : o, 0, n), a[e] = u, a;
+  }
+  a[r] = t[r].filter((u) => u !== n);
+  const l = [...t[e]];
+  return l.splice(o, 0, n), a[e] = l, a;
+}, De = Object.freeze(["previous-column", "next-column", "up", "down"]), Fn = (t, n) => t.columnPanels[n] ?? [], tt = (t) => t.columnKeys.map((n) => Fn(t, n).filter((e) => t.panelVisibility[e] === !0)), Pe = (t, n) => {
+  for (const [e, o] of tt(t).entries()) {
+    const r = o.indexOf(n);
+    if (r >= 0) return { column: e, index: r };
+  }
+  return null;
+}, Ft = (t, n, e) => {
+  switch (e) {
+    case "previous-column":
+    case "next-column": {
+      const o = n.column + (e === "previous-column" ? -1 : 1), r = t[o];
+      return r === void 0 ? null : { column: o, index: Math.min(n.index, r.length) };
+    }
+    case "up":
+      return n.index > 0 ? { column: n.column, index: n.index - 1 } : null;
+    case "down":
+      return n.index < t[n.column].length - 1 ? { column: n.column, index: n.index + 1 } : null;
+    default: {
+      const o = e;
+      throw new RangeError(`[@aiquants/drag-drop-panels] unknown panel move ${JSON.stringify(o)}; expected one of ${De.join(", ")}`);
+    }
+  }
+}, Un = (t, n, e, o) => {
+  const r = t.filter(n), a = (f) => [...t.slice(0, f), e, ...t.slice(f)], l = r[o];
+  if (l !== void 0) return a(t.indexOf(l));
+  const u = r[o - 1];
+  return a(u !== void 0 ? t.indexOf(u) + 1 : t.length);
+}, Bn = (t, n) => {
+  const e = Pe(t, n);
+  if (e === null) return [];
+  const o = tt(t);
+  return De.filter((r) => Ft(o, e, r) !== null);
+}, Xn = (t, n, e) => {
+  if (!De.includes(e)) throw new RangeError(`[@aiquants/drag-drop-panels] unknown panel move ${JSON.stringify(e)}; expected one of ${De.join(", ")}`);
+  const o = Pe(t, n);
+  if (o === null) return null;
+  const r = Ft(tt(t), o, e);
+  if (r === null) return null;
+  const a = (f) => t.panelVisibility[f] === !0, l = Object.fromEntries(Object.entries(t.columnPanels).map(([f, b]) => [f, b.filter((y) => y !== n)])), u = t.columnKeys[r.column];
+  return l[u] = Un(l[u] ?? [], a, n, r.index), { columnPanels: l, from: o, place: r };
+}, Vn = (t, n, e) => {
+  const o = (r, a) => (r[a] ?? []).filter((l) => l !== e);
+  for (const r of /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(n)])) {
+    const a = o(t, r), l = o(n, r);
+    if (a.length !== l.length || a.some((u, f) => u !== l[f])) return !1;
+  }
+  return !0;
+}, Ut = Object.freeze({
+  "previous-column": Object.freeze({ key: "ArrowLeft", aria: "Alt+Shift+ArrowLeft", text: "Alt+Shift+←" }),
+  "next-column": Object.freeze({ key: "ArrowRight", aria: "Alt+Shift+ArrowRight", text: "Alt+Shift+→" }),
+  up: Object.freeze({ key: "ArrowUp", aria: "Alt+Shift+ArrowUp", text: "Alt+Shift+↑" }),
+  down: Object.freeze({ key: "ArrowDown", aria: "Alt+Shift+ArrowDown", text: "Alt+Shift+↓" })
+}), Zn = (t) => {
+  if (!(t.altKey && t.shiftKey) || t.ctrlKey || t.metaKey) return null;
+  const n = De.find((e) => Ut[e].key === t.key);
+  return n === void 0 ? null : n;
+}, Bt = qt.memo(({ index: t, columnIndex: n, isDragging: e, dragOverPosition: o, originalPosition: r, onDragEnter: a, onDragLeave: l, config: u, customDrag: f, label: b }) => {
+  const y = r !== null && et(r, n, t), A = !y && o?.columnIndex === n && o?.insertIndex === t, z = W(null), [E, c] = se(null), P = e || (f?.isActive ?? !1), k = y || !P ? "hidden" : A ? "target" : "shown";
+  return ee(() => {
+    if (z.current) {
+      const S = z.current.getBoundingClientRect(), N = {
+        width: Math.round(S.width),
+        height: Math.round(S.height),
+        x: Math.round(S.left),
+        y: Math.round(S.top)
       };
-      y(k), b && E(c, 1, `🎯 アクティブプレースホルダー ${r}-${e}:`, {
-        size: `${k.width}×${k.height}`,
-        position: `(${k.x}, ${k.y})`,
-        bottomRight: `(${k.x + k.width}, ${k.y + k.height})`,
-        center: `(${k.x + k.width / 2}, ${k.y + k.height / 2})`
+      c(N), A && O(u, 1, `🎯 アクティブプレースホルダー ${t}-${n}:`, {
+        size: `${N.width}×${N.height}`,
+        position: `(${N.x}, ${N.y})`,
+        bottomRight: `(${N.x + N.width}, ${N.y + N.height})`,
+        center: `(${N.x + N.width / 2}, ${N.y + N.height / 2})`
       });
     }
-  }, [b, r, e, c]), E(c, 2, `プレースホルダー${r}-${e}: 表示中`, { isHighlighted: b, isDragging: n, dragOverPosition: s, shouldShow: l }), // biome-ignore lint/a11y/noStaticElementInteractions: ドラッグイベントを処理するための対話的な要素。デバッグ目的のため、キーボード操作は必須ではない。
-  /* @__PURE__ */ t.jsxs(
+  }, [A, t, n, u]), O(u, 2, `プレースホルダー${t}-${n}: 表示中`, { isHighlighted: A, isDragging: e, dragOverPosition: o, shouldShow: P }), // biome-ignore lint/a11y/noStaticElementInteractions: ドラッグイベントを処理するための対話的な要素。デバッグ目的のため、キーボード操作は必須ではない。
+  /* @__PURE__ */ s.jsxs(
     "div",
     {
-      ref: M,
-      "data-placeholder-index": r,
-      "data-placeholder-column": e,
-      onDragEnter: () => i(e, r),
-      onDragLeave: (j) => u(j, e, r),
-      className: `relative flex w-full items-center justify-center transition-all duration-0 ${N ? "pointer-events-none h-0 overflow-hidden opacity-0" : l ? b ? "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: z,
+      "data-placeholder-index": t,
+      "data-placeholder-column": n,
+      "data-aqdd-drop-placeholder": k,
+      onDragEnter: () => a(n, t),
+      onDragLeave: (S) => l(S, n, t),
+      className: `relative flex w-full items-center justify-center ${k === "hidden" ? "pointer-events-none h-0 overflow-hidden opacity-0" : k === "target" ? "my-2 scale-[1.02] rounded-xl border-4 border-dashed px-4 py-6 shadow-lg" : "my-2 rounded-xl border-2 border-dashed px-2 py-4"}`,
       children: [
-        !N && l && c.showPlaceholderInfo && T && /* @__PURE__ */ t.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__ */ t.jsxs("div", { children: [
-            T.width,
+        !y && P && u.showPlaceholderInfo && E && /* @__PURE__ */ s.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__ */ s.jsxs("div", { children: [
+            E.width,
             "×",
-            T.height
+            E.height
           ] }),
-          /* @__PURE__ */ t.jsxs("div", { children: [
+          /* @__PURE__ */ s.jsxs("div", { children: [
             "X:",
-            T.x,
+            E.x,
             " Y:",
-            T.y
+            E.y
           ] }),
-          /* @__PURE__ */ t.jsx("div", { className: "text-[10px] opacity-80", children: "min:200px max:500px" }),
-          /* @__PURE__ */ t.jsxs("div", { className: "mt-0.5 text-[10px] opacity-80", children: [
+          /* @__PURE__ */ s.jsx("div", { className: "text-[10px] opacity-80", children: "min:200px max:500px" }),
+          /* @__PURE__ */ s.jsxs("div", { className: "mt-0.5 text-[10px] opacity-80", children: [
             "PH-",
-            e,
+            n,
             "-",
-            r,
+            t,
             " ",
-            b ? "ACTIVE" : "IDLE"
+            A ? "ACTIVE" : "IDLE"
           ] })
         ] }),
-        !N && l && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-2 text-sky-600", children: [
-          /* @__PURE__ */ t.jsxs("svg", { className: "h-6 w-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
-            /* @__PURE__ */ t.jsx("title", { children: "パネルをここにドロップ" }),
-            /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" })
-          ] }),
-          /* @__PURE__ */ t.jsx("span", { className: "font-medium text-sm", children: "パネルをここにドロップ" })
+        !y && P && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ s.jsx("svg", { className: "h-6 w-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ s.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" }) }),
+          /* @__PURE__ */ s.jsx("span", { lang: b.lang, className: "font-medium text-sm", children: b.text })
         ] })
       ]
     }
   );
 });
-Ze.displayName = "InsertPlaceholder";
-const Ge = ({ columnIndex: r, isDragging: e, dragOverPosition: n, children: s, config: o }) => {
-  const i = F(null), [u, c] = te(null);
-  return K(() => {
-    if (i.current && e) {
-      const h = i.current.getBoundingClientRect(), N = n?.columnIndex === r, b = {
-        width: Math.round(h.width),
-        height: Math.round(h.height),
-        x: Math.round(h.left),
-        y: Math.round(h.top),
-        isActive: N
+Bt.displayName = "InsertPlaceholder";
+const Xt = ({ columnIndex: t, isDragging: n, dragOverPosition: e, children: o, config: r }) => {
+  const a = W(null), [l, u] = se(null);
+  return ee(() => {
+    if (a.current && n) {
+      const f = a.current.getBoundingClientRect(), b = e?.columnIndex === t, y = {
+        width: Math.round(f.width),
+        height: Math.round(f.height),
+        x: Math.round(f.left),
+        y: Math.round(f.top),
+        isActive: b
       };
-      c(b), N && E(o, 1, `🎯 アクティブドロップゾーン ${r}:`, {
-        size: `${b.width}×${b.height}`,
-        position: `(${b.x}, ${b.y})`,
-        bottomRight: `(${b.x + b.width}, ${b.y + b.height})`,
-        center: `(${b.x + b.width / 2}, ${b.y + b.height / 2})`
+      u(y), b && O(r, 1, `🎯 アクティブドロップゾーン ${t}:`, {
+        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})`
       });
     }
-  }, [e, n, r, o]), /* @__PURE__ */ t.jsxs("div", { ref: i, className: "relative", children: [
-    s,
-    e && u && o.showDropZoneOutlines && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx("div", { className: `pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${u.isActive ? "border-red-500 bg-red-100/20 shadow-lg" : "border-gray-400 bg-gray-100/10"}` }),
-      /* @__PURE__ */ t.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 ${u.isActive ? "bg-red-500/90 text-white" : "bg-gray-500/90 text-white"}`, children: [
-        /* @__PURE__ */ t.jsxs("div", { className: "font-bold", children: [
+  }, [n, e, t, r]), /* @__PURE__ */ s.jsxs("div", { ref: a, className: "relative", children: [
+    o,
+    n && l && r.showDropZoneOutlines && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsx("div", { className: `pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${l.isActive ? "border-red-500 bg-red-100/20 shadow-lg" : "border-gray-400 bg-gray-100/10"}` }),
+      /* @__PURE__ */ s.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 ${l.isActive ? "bg-red-500/90 text-white" : "bg-gray-500/90 text-white"}`, children: [
+        /* @__PURE__ */ s.jsxs("div", { className: "font-bold", children: [
           "DropZone-",
-          r
+          t
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { children: [
-          u.width,
+        /* @__PURE__ */ s.jsxs("div", { children: [
+          l.width,
           "×",
-          u.height
+          l.height
         ] }),
-        /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ s.jsxs("div", { children: [
           "X:",
-          u.x,
+          l.x,
           " Y:",
-          u.y
+          l.y
         ] }),
-        /* @__PURE__ */ t.jsx("div", { className: "mt-0.5 text-[10px] opacity-80", children: u.isActive ? "ACTIVE" : "IDLE" })
+        /* @__PURE__ */ s.jsx("div", { className: "mt-0.5 text-[10px] opacity-80", children: l.isActive ? "ACTIVE" : "IDLE" })
       ] }),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ s.jsx(
         "div",
         {
-          className: `pointer-events-none absolute transition-all duration-200 ${u.isActive ? "opacity-100" : "opacity-50"}`,
+          className: `pointer-events-none absolute transition-all duration-200 ${l.isActive ? "opacity-100" : "opacity-50"}`,
           style: {
-            left: `${u.width / 2 - 6}px`,
-            top: `${u.height / 2 - 6}px`
+            left: `${l.width / 2 - 6}px`,
+            top: `${l.height / 2 - 6}px`
           },
-          children: /* @__PURE__ */ t.jsx("div", { className: `h-3 w-3 rounded-full border-2 ${u.isActive ? "border-red-700 bg-red-500" : "border-gray-700 bg-gray-500"}` })
+          children: /* @__PURE__ */ s.jsx("div", { className: `h-3 w-3 rounded-full border-2 ${l.isActive ? "border-red-700 bg-red-500" : "border-gray-700 bg-gray-500"}` })
         }
       ),
-      u.isActive && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
-        /* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" }),
-        /* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
-        /* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500" })
+      l.isActive && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+        /* @__PURE__ */ s.jsx("div", { className: "pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ s.jsx("div", { className: "pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ s.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
+        /* @__PURE__ */ s.jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500" })
       ] })
     ] })
   ] });
 };
-Ge.displayName = "DropZoneDebugOverlay";
-const Et = 0.25, St = typeof window < "u" ? Se : K, Ct = (r, e = Et) => {
-  const n = F(null), [s, o] = te(1);
-  return St(() => {
-    const i = n.current;
-    if (!i || r <= 0) {
-      o(1);
+Xt.displayName = "DropZoneDebugOverlay";
+const Vt = "[data-aqdd-scroll-root]", Ee = "data-aqdd-panel-action", Gn = 0.25, Kn = typeof window < "u" ? we : ee, Jn = (t, n = Gn) => {
+  const e = W(null), [o, r] = se(1);
+  return Kn(() => {
+    const a = e.current;
+    if (!a || t <= 0) {
+      r(1);
       return;
     }
-    const u = () => {
-      const h = i.clientWidth;
-      if (h <= 0)
+    const l = () => {
+      const f = a.clientWidth;
+      if (f <= 0)
         return;
-      const N = h >= r ? 1 : Math.max(h / r, e);
-      o((b) => Math.abs(b - N) < 5e-3 ? b : N);
+      const b = f >= t ? 1 : Math.max(f / t, n);
+      r((y) => Math.abs(y - b) < 5e-3 ? y : b);
     };
-    u();
-    const c = new ResizeObserver(u);
-    return c.observe(i), () => c.disconnect();
-  }, [r, e]), { containerRef: n, scale: s };
-}, Je = ({ columnId: r, onResizeStart: e, onResize: n, onResizeEnd: s, isResizing: o = !1, position: i = "right", className: u = "", debug: c = {} }) => {
-  const h = F(!1), N = F(null);
-  K(() => {
-    !o && h.current && (E(c, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", r), h.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
-  }, [o, r, c]);
-  const b = w(
-    (y) => {
-      y.preventDefault(), y.stopPropagation(), E(c, 2, "リサイズハンドル マウスダウン:", r), h.current = !0, e(r, y.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
+    l();
+    const u = new ResizeObserver(l);
+    return u.observe(a), () => u.disconnect();
+  }, [t, n]), { containerRef: e, scale: o };
+}, Qn = Object.freeze([
+  "--aqdd-panel-surface",
+  "--aqdd-panel-border",
+  "--aqdd-panel-title-color",
+  "--aqdd-header-button-color",
+  "--aqdd-header-button-hover-color",
+  "--aqdd-header-button-hover-surface",
+  "--aqdd-custom-badge-color",
+  "--aqdd-custom-badge-surface",
+  "--aqdd-default-panel-surface",
+  "--aqdd-default-panel-border",
+  "--aqdd-default-panel-title-color",
+  "--aqdd-default-header-button-color",
+  "--aqdd-default-header-button-hover-color",
+  "--aqdd-default-header-button-hover-surface",
+  "--aqdd-default-header-close-hover-color",
+  "--aqdd-default-custom-badge-color",
+  "--aqdd-default-custom-badge-surface"
+]), Zt = (t, n) => {
+  const e = window.getComputedStyle(t);
+  for (const o of Qn) {
+    const r = e.getPropertyValue(o).trim();
+    r !== "" && n.style.setProperty(o, r);
+  }
+}, Gt = (t, n, e) => {
+  const o = t.getBoundingClientRect(), r = t.cloneNode(!0);
+  return r.removeAttribute("data-panel-id"), Zt(t, r), r.style.position = "fixed", r.style.top = "0px", r.style.left = "0px", r.style.width = `${t.offsetWidth}px`, r.style.height = `${t.offsetHeight}px`, r.style.pointerEvents = "none", r.style.zIndex = "1000", r.style.opacity = "0.5", r.style.margin = "0", r.style.transition = "none", r.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)", r.style.transformOrigin = "top left", r.style.transform = `translate(${o.left}px, ${o.top}px) scale(${e})`, r.id = `drag-image-${n}`, document.body.appendChild(r), r;
+}, Kt = (t, n, e, o, r) => {
+  t.style.transform = `translate(${n - o.x}px, ${e - o.y}px) scale(${r * 1.05})`;
+}, er = (t, n) => {
+  let e = n.closest("[data-drop-zone]");
+  for (; e !== null && e.closest("[data-aqdd-layout]") !== t; ) {
+    const o = e.parentElement;
+    e = o === null ? null : o.closest("[data-drop-zone]");
+  }
+  return e;
+}, tr = (t, n, e) => {
+  const o = document.elementFromPoint(n, e), r = o === null ? null : er(t, o);
+  if (r === null) return null;
+  let a = null;
+  for (const l of r.querySelectorAll("[data-placeholder-index]")) {
+    if (l.closest("[data-drop-zone]") !== r) continue;
+    const { top: u, bottom: f } = l.getBoundingClientRect(), b = e < u ? u - e : e > f ? e - f : 0;
+    (a === null || b < a.distance) && (a = { insertIndex: Number(l.getAttribute("data-placeholder-index")), distance: b });
+  }
+  return a === null ? null : { columnIndex: Number(r.getAttribute("data-column-index")), insertIndex: a.insertIndex };
+}, Se = {
+  triggerDistance: 80,
+  scrollSpeed: 5,
+  maxScrollSpeed: 20
+}, nt = () => new DOMRect(0, 0, window.innerWidth, window.innerHeight), nr = (t) => {
+  const n = t.getBoundingClientRect(), e = nt(), o = Math.max(n.left, e.left), r = Math.max(n.top, e.top), a = Math.min(n.right, e.right), l = Math.min(n.bottom, e.bottom);
+  return a > o && l > r ? new DOMRect(o, r, a - o, l - r) : null;
+}, St = (t, n, e = Se, o) => {
+  const { triggerDistance: r, scrollSpeed: a, maxScrollSpeed: l } = e, u = o === void 0 ? nt() : nr(o);
+  if (u === null) return { x: 0, y: 0 };
+  const { left: f, top: b, right: y, bottom: A } = u;
+  let z = 0, E = 0;
+  if (t >= f && t <= y && n >= b && n <= A) {
+    if (t < f + r) {
+      const c = Math.max(0, (f + r - t) / r);
+      z = -Math.min(l, a + c * (l - a));
+    } else if (t > y - r) {
+      const c = Math.max(0, (t - (y - r)) / r);
+      z = Math.min(l, a + c * (l - a));
+    }
+    if (n < b + r) {
+      const c = Math.max(0, (b + r - n) / r);
+      E = -Math.min(l, a + c * (l - a));
+    } else if (n > A - r) {
+      const c = Math.max(0, (n - (A - r)) / r);
+      E = Math.min(l, a + c * (l - a));
+    }
+  }
+  return { x: z, y: E };
+}, rr = (t, n) => {
+  if (t === document.documentElement) return !1;
+  if (t === document.body) {
+    const r = window.getComputedStyle(document.documentElement);
+    if (r.overflowX === "visible" && r.overflowY === "visible") return !1;
+  }
+  const e = window.getComputedStyle(t), o = n === "x" ? e.overflowX : e.overflowY;
+  return o === "auto" || o === "scroll";
+}, or = (t, n, e, o) => e === "x" ? o > 0 ? t.right - n.right : n.left - t.left : o > 0 ? t.bottom - n.bottom : n.top - t.top, Jt = (t, n, e) => {
+  const o = n === "x" ? t.scrollLeft : t.scrollTop;
+  return t.scrollBy(n === "x" ? { left: e, behavior: "instant" } : { top: e, behavior: "instant" }), (n === "x" ? t.scrollLeft : t.scrollTop) !== o;
+}, At = (t, n, e, o, r) => {
+  const a = or(e, n, o, r);
+  return a > 0 && Jt(t, o, Math.sign(r) * Math.min(Math.abs(r), a));
+}, $t = (t, n, e) => {
+  if (Jt(t, n, e)) return;
+  const o = t.getBoundingClientRect();
+  for (let a = t.parentElement; a !== null; a = a.parentElement)
+    if (rr(a, n) && At(a, a.getBoundingClientRect(), o, n, e)) return;
+  const r = document.scrollingElement;
+  r instanceof Element && r !== t && At(r, nt(), o, n, e);
+}, sr = (t, n) => {
+  if (n === void 0) {
+    (t.x !== 0 || t.y !== 0) && window.scrollBy(t.x, t.y);
+    return;
+  }
+  t.x !== 0 && $t(n, "x", t.x), t.y !== 0 && $t(n, "y", t.y);
+};
+class rt {
+  /**
+   * Creates a manager for an element, or for the window without one.
+   * 要素 (無ければウインドウ) の管理役を作る。
+   *
+   * @param config - The edge bands and speeds. 端の帯と速さ。
+   * @param scrollElement - The element to scroll. スクロールする要素。
+   */
+  constructor(n = Se, e) {
+    this.intervalId = null, this.isActive = !1, this.pointX = 0, this.pointY = 0, this.config = n, this.scrollElement = e;
+  }
+  /**
+   * Sets the element to scroll (the window without one).
+   * スクロールする要素を設定する (無ければウインドウ)。
+   *
+   * @param element - The element. 要素。
+   */
+  setScrollElement(n) {
+    this.scrollElement = n;
+  }
+  /**
+   * Starts scrolling for a pointer at a point; while it runs, it only moves the point.
+   * ある点のポインタのスクロールを始める (動いている間は点だけを移す)。
+   *
+   * @param clientX - The pointer's viewport x. ポインタのビューポートの x。
+   * @param clientY - The pointer's viewport y. ポインタのビューポートの y。
+   */
+  start(n, e) {
+    this.pointX = n, this.pointY = e, !this.isActive && (this.isActive = !0, this.intervalId = window.setInterval(() => {
+      const o = St(this.pointX, this.pointY, this.config, this.scrollElement);
+      sr(o, this.scrollElement);
+    }, 16));
+  }
+  /**
+   * Follows the pointer to a new point: starts scrolling when it enters an edge band, keeps scrolling toward its latest
+   * point while it stays in one, and stops when it leaves them.
+   * ポインタを新しい点へ追う処理 (端の帯へ入るとスクロールを始め、帯の中にいる間は最新の点へ向けて続け、帯を出ると止める)。
+   *
+   * @param clientX - The pointer's viewport x. ポインタのビューポートの x。
+   * @param clientY - The pointer's viewport y. ポインタのビューポートの y。
+   */
+  update(n, e) {
+    this.pointX = n, this.pointY = e;
+    const o = St(n, e, this.config, this.scrollElement);
+    (o.x !== 0 || o.y !== 0) && !this.isActive ? this.start(n, e) : o.x === 0 && o.y === 0 && this.isActive && this.stop();
+  }
+  /**
+   * Stops scrolling.
+   * スクロールを止める。
+   */
+  stop() {
+    this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null), this.isActive = !1;
+  }
+  /**
+   * Whether it is scrolling now.
+   * 今スクロールしているか。
+   *
+   * @returns Whether a scroll runs. スクロールが動いているか。
+   */
+  isScrolling() {
+    return this.isActive;
+  }
+  /**
+   * Replaces the edge bands and speeds.
+   * 端の帯と速さを置き換える。
+   *
+   * @param newConfig - The edge bands and speeds. 端の帯と速さ。
+   */
+  updateConfig(n) {
+    this.config = n;
+  }
+}
+const Tt = "custom-dragging", ar = (t, n) => t === null ? n === null : n !== null && t.columnIndex === n.columnIndex && t.insertIndex === n.insertIndex, Lt = (t, n, e) => {
+  const { left: o, top: r, right: a, bottom: l } = t.getBoundingClientRect();
+  return n < o || n > a || e < r || e > l;
+}, lr = (t, n) => {
+  let e = null;
+  const o = (d) => {
+    const $ = t(), T = $.layoutRef.current;
+    if (T === null || Lt(T, d.x, d.y)) return null;
+    const Y = tr(T, d.x, d.y), G = $.originOf(d.panelId);
+    return Y === null || G === null || et(G, Y.columnIndex, Y.insertIndex) ? null : Y;
+  }, r = () => {
+    if (e === null || e.phase !== "dragging") return;
+    const d = o(e);
+    n(($) => $ === null || ar($.over, d) ? $ : { panelId: $.panelId, over: d });
+  }, a = (d) => {
+    if (e === null || d.pointerId !== e.pointerId) return;
+    if (e.x = d.clientX, e.y = d.clientY, e.phase === "pressing") {
+      Math.hypot(e.x - e.startX, e.y - e.startY) > t().config.slop && E();
+      return;
+    }
+    const $ = t(), T = $.layoutRef.current;
+    if (T === null || Lt(T, e.x, e.y)) {
+      c();
+      return;
+    }
+    Kt(e.image, e.x, e.y, e.offset, $.scale), e.edgeScroll.update(e.x, e.y), r();
+  }, l = (d) => {
+    if (e === null || d.pointerId !== e.pointerId) return;
+    if (e.phase === "pressing") {
+      E();
+      return;
+    }
+    e.x = d.clientX, e.y = d.clientY;
+    const $ = o(e), T = E();
+    if (T === null) return;
+    const Y = t();
+    $ === null ? Y.onCancel(T.panelId) : Y.onDrop(T.panelId, $);
+  }, u = (d) => {
+    e !== null && d.pointerId === e.pointerId && c();
+  }, f = (d) => {
+    e !== null && e.phase === "pressing" && d.pointerId !== e.pointerId && E();
+  }, b = (d) => {
+    e !== null && e.phase === "dragging" && d.pointerId === e.pointerId && d.target === e.header && c();
+  }, y = (d) => {
+    e === null || e.phase !== "dragging" || d.key !== "Escape" || d.defaultPrevented || d.isComposing || (d.preventDefault(), c());
+  }, A = () => {
+    document.addEventListener("pointermove", a, !0), document.addEventListener("pointerup", l, !0), document.addEventListener("pointercancel", u, !0), document.addEventListener("pointerdown", f, !0), document.addEventListener("lostpointercapture", b, !0), document.addEventListener("keydown", y, !0);
+  }, z = () => {
+    document.removeEventListener("pointermove", a, !0), document.removeEventListener("pointerup", l, !0), document.removeEventListener("pointercancel", u, !0), document.removeEventListener("pointerdown", f, !0), document.removeEventListener("lostpointercapture", b, !0), document.removeEventListener("keydown", y, !0);
+  }, E = () => {
+    const d = e;
+    return d === null ? null : (e = null, z(), d.phase === "pressing" ? (window.clearTimeout(d.timer), d) : (document.removeEventListener("scroll", r, !0), d.edgeScroll.stop(), d.image.remove(), document.body.classList.remove(Tt), d.header.hasPointerCapture(d.pointerId) && d.header.releasePointerCapture(d.pointerId), n(null), d));
+  }, c = () => {
+    const d = E();
+    d !== null && d.phase === "dragging" && t().onCancel(d.panelId);
+  }, P = () => {
+    if (e === null || e.phase !== "pressing") return;
+    const d = e, $ = t(), T = $.panelElementOf(d.panelId), Y = $.scrollRootRef.current;
+    if (!$.canStart || T === null || Y === null || !d.header.isConnected) {
+      E();
+      return;
+    }
+    try {
+      d.header.setPointerCapture(d.pointerId);
+    } catch (v) {
+      if (v instanceof DOMException) {
+        E();
+        return;
+      }
+      throw v;
+    }
+    const { left: G, top: g } = T.getBoundingClientRect();
+    e = {
+      phase: "dragging",
+      pointerId: d.pointerId,
+      panelId: d.panelId,
+      header: d.header,
+      image: Gt(T, d.panelId, $.scale),
+      offset: { x: d.x - G, y: d.y - g },
+      edgeScroll: new rt(Se, Y),
+      x: d.x,
+      y: d.y
+    }, document.addEventListener("scroll", r, { capture: !0, passive: !0 }), document.body.classList.add(Tt), n({ panelId: d.panelId, over: null }), $.onLift(d.panelId);
+  };
+  return { pressHeader: (d, $) => {
+    if (e !== null || !d.isPrimary || d.button !== 0 || d.pointerType !== "touch" && d.pointerType !== "pen") return;
+    const T = t();
+    T.canStart && (d.target instanceof Element && d.target.closest(`[${Ee}]`) !== null || (e = {
+      phase: "pressing",
+      pointerId: d.pointerId,
+      panelId: $,
+      header: d.currentTarget,
+      startX: d.clientX,
+      startY: d.clientY,
+      timer: window.setTimeout(P, T.config.longPressDelay),
+      x: d.clientX,
+      y: d.clientY
+    }, A()));
+  }, holdContextMenu: (d) => {
+    e !== null && e.header === d.currentTarget && d.preventDefault();
+  }, bindHeader: (d) => {
+    if (d === null) return;
+    const $ = (T) => {
+      e !== null && e.phase === "dragging" && e.header === d && T.cancelable && T.preventDefault();
+    };
+    return d.addEventListener("touchmove", $, { passive: !1 }), () => d.removeEventListener("touchmove", $);
+  }, cancel: c, dispose: () => {
+    E();
+  } };
+}, ir = (t) => {
+  const n = W(t);
+  we(() => {
+    n.current = t;
+  });
+  const [e, o] = se(null), [r] = se(() => lr(() => n.current, o));
+  return ee(() => r.dispose, [r]), { touchDrag: e, pressHeader: r.pressHeader, holdContextMenu: r.holdContextMenu, bindHeader: r.bindHeader, cancel: r.cancel };
+}, qe = Object.freeze({
+  switchToCustomDragMode: { text: "カスタムドラッグモードに切り替え", lang: "ja" },
+  switchToNormalDragMode: { text: "通常ドラッグモードに戻す", lang: "ja" },
+  hidePanel: { text: "パネルを非表示", lang: "ja" },
+  maximizePanel: { text: "パネルを最大化", lang: "ja" },
+  restorePanel: { text: "元のサイズに戻す", lang: "ja" },
+  closePanel: { text: "パネルを閉じる", lang: "ja" },
+  movePanelToPreviousColumn: { text: "前の列へ移動", lang: "ja" },
+  movePanelToNextColumn: { text: "次の列へ移動", lang: "ja" },
+  movePanelUp: { text: "上へ移動", lang: "ja" },
+  movePanelDown: { text: "下へ移動", lang: "ja" },
+  customDragModeBadge: { text: "Custom", lang: "en" },
+  panelMoved: { text: "{title} を {column} 列目の {position} 番目へ移動しました", lang: "ja" },
+  panelMoveUnavailable: { text: "{title} は{move}できません", lang: "ja" },
+  panelDragStarted: { text: "{title} を持ち上げました", lang: "ja" },
+  panelDragCancelled: { text: "{title} の移動を取り消しました", lang: "ja" },
+  hiddenPanels: { text: "非表示のパネル:", lang: "ja" },
+  hiddenPanelBadge: { text: "非表示", lang: "ja" },
+  hiddenPanelNotice: { text: "このパネルは非表示です", lang: "ja" },
+  emptyColumn: { text: "このエリアは空です", lang: "ja" },
+  dropZone: { text: "Drop zone for column {column}", lang: "en" },
+  dropHere: { text: "パネルをここにドロップ", lang: "ja" },
+  resizeColumn: { text: "{column} 列目のカラム幅を調整", lang: "ja" }
+}), _t = new Set(Object.keys(qe)), cr = Object.freeze({
+  panelMoved: Object.freeze(["title", "column", "position"]),
+  panelMoveUnavailable: Object.freeze(["title", "move"]),
+  panelDragStarted: Object.freeze(["title"]),
+  panelDragCancelled: Object.freeze(["title"]),
+  dropZone: Object.freeze(["column"]),
+  resizeColumn: Object.freeze(["column"])
+}), Qt = /\{(\w+)\}/g, Hr = Object.freeze(Object.fromEntries(Object.entries(qe).map(([t, n]) => [t, n.text]))), ur = (t) => {
+  if (t !== void 0) {
+    const e = t;
+    if (e === null || typeof e != "object")
+      throw new TypeError(`[@aiquants/drag-drop-panels] labels must be an object; got ${e === null ? "null" : typeof e}`);
+    for (const o of Object.keys(e))
+      if (!_t.has(o))
+        throw new RangeError(`[@aiquants/drag-drop-panels] labels has the unknown key "${o}"; the labels are ${[..._t].join(", ")}`);
+  }
+  const n = {};
+  for (const e of Object.keys(qe)) {
+    const o = t?.[e];
+    if (o === void 0) {
+      n[e] = qe[e];
+      continue;
+    }
+    if (typeof o != "string")
+      throw new TypeError(`[@aiquants/drag-drop-panels] label "${e}" must be a string; got ${o === null ? "null" : typeof o}`);
+    const r = cr[e];
+    if (r !== void 0) {
+      for (const [, a] of o.matchAll(Qt))
+        if (!r.includes(a))
+          throw new RangeError(`[@aiquants/drag-drop-panels] label "${e}" uses the unknown placeholder {${a}}; it accepts ${r.map((l) => `{${l}}`).join(", ")}`);
+    }
+    n[e] = { text: o, lang: void 0 };
+  }
+  return Object.freeze(n);
+}, ze = (t, n) => {
+  const e = [], o = (r, a) => {
+    if (r === "") return;
+    const l = e[e.length - 1];
+    if (l !== void 0 && l.lang === a) {
+      e[e.length - 1] = { text: `${l.text}${r}`, lang: a };
+      return;
+    }
+    e.push({ text: r, lang: a });
+  };
+  for (const [r, a] of t.text.split(Qt).entries()) {
+    if (r % 2 === 0) {
+      o(a, t.lang);
+      continue;
+    }
+    const l = n[a];
+    if (l === void 0) throw new RangeError(`[@aiquants/drag-drop-panels] no value for the placeholder {${a}} of "${t.text}"`);
+    typeof l == "number" ? o(String(l), t.lang) : o(l.text, l.lang);
+  }
+  return e;
+}, Rt = (t, n) => ({
+  text: ze(t, n).map((e) => e.text).join(""),
+  lang: t.lang
+}), dr = 229, hr = /* @__PURE__ */ new Set(["", "auto", "hint"]), mr = (t) => {
+  for (const n of t.querySelectorAll("[popover]")) {
+    const e = n.getAttribute("popover");
+    if (e !== null && hr.has(e.toLowerCase()) && n.matches(":popover-open")) return !0;
+  }
+  return !1;
+}, fr = (t) => t.key !== "Escape" || t.defaultPrevented || t.isComposing || t.keyCode === dr || t.target instanceof Element && t.target.closest("dialog[open]") !== null ? !1 : !("popover" in HTMLElement.prototype && mr(document)), en = ({ columnId: t, onResizeStart: n, onResize: e, onResizeEnd: o, isResizing: r = !1, position: a = "right", className: l = "", debug: u = {}, label: f }) => {
+  const b = W(!1), y = W(null);
+  ee(() => {
+    !r && b.current && (O(u, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", t), b.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  }, [r, t, u]);
+  const A = D(
+    (c) => {
+      c.preventDefault(), c.stopPropagation(), O(u, 2, "リサイズハンドル マウスダウン:", t), b.current = !0, n(t, c.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
     },
-    [r, e, c]
+    [t, n, u]
   );
-  K(() => {
-    const y = (j) => {
-      h.current && (j.preventDefault(), n(j.clientX));
-    }, l = () => {
-      h.current && (E(c, 2, "リサイズハンドル マウスアップ:", r), h.current = !1, s(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  ee(() => {
+    const c = (k) => {
+      b.current && (k.preventDefault(), e(k.clientX));
+    }, P = () => {
+      b.current && (O(u, 2, "リサイズハンドル マウスアップ:", t), b.current = !1, o(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
     };
-    return document.addEventListener("mousemove", y), document.addEventListener("mouseup", l), () => {
-      document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", l);
+    return document.addEventListener("mousemove", c), document.addEventListener("mouseup", P), () => {
+      document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", P);
     };
-  }, [r, n, s, c]);
-  const M = w(
-    (y) => {
-      y.preventDefault(), y.stopPropagation();
-      const l = y.touches[0];
-      E(c, 2, "リサイズハンドル タッチスタート:", r), h.current = !0, e(r, l.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
+  }, [t, e, o, u]);
+  const z = D(
+    (c) => {
+      c.preventDefault(), c.stopPropagation();
+      const P = c.touches[0];
+      O(u, 2, "リサイズハンドル タッチスタート:", t), b.current = !0, n(t, P.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
     },
-    [r, e, c]
+    [t, n, u]
   );
-  K(() => {
-    const y = (j) => {
-      if (!h.current) return;
-      j.preventDefault();
-      const k = j.touches[0];
-      n(k.clientX);
-    }, l = () => {
-      h.current && (E(c, 2, "リサイズハンドル タッチエンド:", r), h.current = !1, s(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  ee(() => {
+    const c = (k) => {
+      if (!b.current) return;
+      k.preventDefault();
+      const S = k.touches[0];
+      e(S.clientX);
+    }, P = () => {
+      b.current && (O(u, 2, "リサイズハンドル タッチエンド:", t), b.current = !1, o(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
     };
-    return document.addEventListener("touchmove", y, { passive: !1 }), document.addEventListener("touchend", l), () => {
-      document.removeEventListener("touchmove", y), document.removeEventListener("touchend", l);
+    return document.addEventListener("touchmove", c, { passive: !1 }), document.addEventListener("touchend", P), () => {
+      document.removeEventListener("touchmove", c), document.removeEventListener("touchend", P);
     };
-  }, [r, n, s, c]), K(() => () => {
-    h.current && (E(c, 1, "リサイズハンドルアンマウント時のクリーンアップ:", r), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
-  }, [r, c]);
-  const T = ["resize-handle", i, o ? "resizing" : "", u].filter(Boolean).join(" ");
+  }, [t, e, o, u]), ee(() => () => {
+    b.current && (O(u, 1, "リサイズハンドルアンマウント時のクリーンアップ:", t), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
+  }, [t, u]);
+  const E = ["resize-handle", a, r ? "resizing" : "", l].filter(Boolean).join(" ");
   return (
     // biome-ignore lint/a11y/useFocusableInteractive: リサイズハンドルとして機能するためインタラクティブである必要がある
     // biome-ignore lint/a11y/useSemanticElements: divを使用するが、aria-roleでセマンティックな意味を提供している
     // biome-ignore lint/a11y/useAriaPropsForRole: リサイズハンドルのため、値の範囲を指定することが難しい
-    /* @__PURE__ */ t.jsxs("div", { ref: N, className: T, onMouseDown: b, onTouchStart: M, "data-column-id": r, "data-position": i, "aria-label": `${r}のカラム幅を調整`, role: "separator", "aria-orientation": "vertical", children: [
-      /* @__PURE__ */ t.jsx("div", { className: "resize-handle-bar" }),
-      c.showPanelSizes && /* @__PURE__ */ t.jsxs("div", { className: "resize-handle-debug-info", children: [
-        r,
-        o && " (resizing)"
+    /* @__PURE__ */ s.jsxs("div", { ref: y, className: E, onMouseDown: A, onTouchStart: z, "data-column-id": t, "data-position": a, "aria-label": f.text, lang: f.lang, role: "separator", "aria-orientation": "vertical", children: [
+      /* @__PURE__ */ s.jsx("div", { className: "resize-handle-bar" }),
+      u.showPanelSizes && /* @__PURE__ */ s.jsxs("div", { className: "resize-handle-debug-info", children: [
+        t,
+        r && " (resizing)"
       ] })
     ] })
   );
-}, Gt = ({ columnId: r, width: e, minWidth: n = 100, maxWidth: s = 800, onResizeStart: o, onResize: i, onResizeEnd: u, isResizing: c = !1, resizable: h = !0, className: N = "", debug: b = {}, children: M }) => {
-  const T = ["resizable-column", c ? "resizing" : "", N].filter(Boolean).join(" ");
-  return K(() => {
-    const y = document.querySelector(`[data-column-id="${r}"]`);
-    y && (y.style.setProperty("--column-width", `${e}px`), y.style.setProperty("--column-min-width", `${n}px`), y.style.setProperty("--column-max-width", `${s}px`));
-  }, [r, e, n, s]), /* @__PURE__ */ t.jsxs("div", { className: T, "data-column-id": r, "data-width": e, "data-min-width": n, "data-max-width": s, children: [
-    M,
-    h && /* @__PURE__ */ t.jsx(Je, { columnId: r, onResizeStart: o, onResize: i, onResizeEnd: u, isResizing: c, position: "right", debug: b }),
-    b.showPanelSizes && /* @__PURE__ */ t.jsxs("div", { className: "column-debug-size", children: [
-      e,
+}, Yr = ({ columnId: t, width: n, minWidth: e = 100, maxWidth: o = 800, onResizeStart: r, onResize: a, onResizeEnd: l, isResizing: u = !1, resizable: f = !0, className: b = "", debug: y = {}, resizeHandleLabel: A, children: z }) => {
+  const E = ["resizable-column", u ? "resizing" : "", b].filter(Boolean).join(" ");
+  return ee(() => {
+    const c = document.querySelector(`[data-column-id="${t}"]`);
+    c && (c.style.setProperty("--column-width", `${n}px`), c.style.setProperty("--column-min-width", `${e}px`), c.style.setProperty("--column-max-width", `${o}px`));
+  }, [t, n, e, o]), /* @__PURE__ */ s.jsxs("div", { className: E, "data-column-id": t, "data-width": n, "data-min-width": e, "data-max-width": o, children: [
+    z,
+    f && /* @__PURE__ */ s.jsx(en, { columnId: t, onResizeStart: r, onResize: a, onResizeEnd: l, isResizing: u, position: "right", debug: y, label: A }),
+    y.showPanelSizes && /* @__PURE__ */ s.jsxs("div", { className: "column-debug-size", children: [
+      n,
       "px",
-      c && " ↔"
+      u && " ↔"
     ] })
   ] });
-}, Me = st(
+}, pr = Object.freeze({ longPressDelay: 500, slop: 10 }), Ve = Object.freeze(["longPressDelay", "slop"]), gr = (t) => {
+  const n = t;
+  if (n === null || typeof n != "object")
+    throw new TypeError(`[@aiquants/drag-drop-panels] touchDragConfig must be an object; got ${n === null ? "null" : typeof n}`);
+  for (const e of Object.keys(n))
+    if (!Ve.includes(e))
+      throw new RangeError(`[@aiquants/drag-drop-panels] touchDragConfig has the unknown key "${e}"; the keys are ${Ve.join(", ")}`);
+  for (const e of Ve) {
+    const o = t[e];
+    if (typeof o != "number")
+      throw new TypeError(`[@aiquants/drag-drop-panels] touchDragConfig.${e} must be a number; got ${o === null ? "null" : typeof o}`);
+    if (!Number.isFinite(o) || o < 0)
+      throw new RangeError(`[@aiquants/drag-drop-panels] touchDragConfig.${e} must be a finite number of 0 or more; got ${o}`);
+  }
+}, zt = Object.freeze({
+  "previous-column": "movePanelToPreviousColumn",
+  "next-column": "movePanelToNextColumn",
+  up: "movePanelUp",
+  down: "movePanelDown"
+}), xr = Object.freeze({ "previous-column": kn, "next-column": On, up: Mn, down: En }), vr = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])', Ze = (t, n) => ({ segments: n, serial: t === null ? 1 : t.serial + 1 }), br = "​", yr = "(prefers-reduced-motion: reduce)", wr = () => typeof window.matchMedia == "function" && window.matchMedia(yr).matches, jr = (t) => {
+  t.key === "Enter" && t.repeat && t.preventDefault();
+}, Me = ({ action: t, label: n, tooltip: e, unavailable: o, keyShortcuts: r, onActivate: a, children: l }) => /* @__PURE__ */ s.jsx(
+  "button",
+  {
+    type: "button",
+    [Ee]: t,
+    "aria-label": n.text,
+    "aria-disabled": o ? !0 : void 0,
+    "aria-keyshortcuts": r,
+    title: e,
+    lang: n.lang,
+    className: "rounded p-1 motion-safe:transition-colors",
+    onClick: (u) => {
+      u.stopPropagation(), a();
+    },
+    children: l
+  }
+), Je = hn(
   ({
-    index: r,
-    columnIndex: e,
-    isDragging: n,
-    dragOverPosition: s,
-    originalPosition: o,
-    onDragEnter: i,
-    onDragLeave: u,
-    debugConfig: c,
-    customDrag: h
-  }) => /* @__PURE__ */ t.jsx(Ze, { index: r, columnIndex: e, isDragging: n, dragOverPosition: s, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h })
+    index: t,
+    columnIndex: n,
+    isDragging: e,
+    dragOverPosition: o,
+    originalPosition: r,
+    onDragEnter: a,
+    onDragLeave: l,
+    debugConfig: u,
+    customDrag: f,
+    label: b
+  }) => /* @__PURE__ */ s.jsx(Bt, { index: t, columnIndex: n, isDragging: e, dragOverPosition: o, originalPosition: r, onDragEnter: a, onDragLeave: l, config: u, customDrag: f, label: b })
 );
-Me.displayName = "LocalInsertPlaceholder";
-const Jt = ({
-  columns: r,
-  panels: e,
-  columnPanels: n,
-  // onColumnPanelsChange,
-  panelVisibility: s,
-  onPanelVisibilityChange: o,
-  dragState: i,
+Je.displayName = "LocalInsertPlaceholder";
+const Fr = ({
+  columns: t,
+  panels: n,
+  columnPanels: e,
+  onColumnPanelsChange: o,
+  panelVisibility: r,
+  onPanelVisibilityChange: a,
+  dragState: l,
   dragOverPosition: u,
-  originalPanelPosition: c,
-  dragModes: h,
-  onDragStart: N,
-  onDragEnd: b,
-  onPlaceholderDragEnter: M,
-  onPlaceholderDragLeave: T,
-  onDragOverWithInsert: y,
-  onDropWithInsert: l,
-  onColumnDragLeave: j,
-  onPanelClick: k,
-  onPanelMouseDown: _,
-  onTouchStart: R,
-  onTouchMove: z,
-  onTouchEnd: Z,
-  debugConfig: Y,
-  panelSizes: U,
+  originalPanelPosition: f,
+  dragModes: b,
+  onDragStart: y,
+  onDragEnd: A,
+  onPlaceholderDragEnter: z,
+  onPlaceholderDragLeave: E,
+  onDragOverWithInsert: c,
+  onDropWithInsert: P,
+  onColumnDragLeave: k,
+  onPanelClick: S,
+  onPanelMouseDown: N,
+  debugConfig: R,
+  panelSizes: d,
   setPanelRef: $,
-  enableResize: L = !1,
-  columnWidths: f,
+  enableResize: T = !1,
+  columnWidths: Y,
   // onColumnWidthChange,
-  onResizeStart: x,
-  onResize: C,
-  onResizeEnd: W,
-  isResizing: p = !1,
-  resizingColumn: g,
+  onResizeStart: G,
+  onResize: g,
+  onResizeEnd: v,
+  isResizing: L = !1,
+  resizingColumn: w,
   onPanelSizeInfoClick: m,
-  onToggleDragMode: v,
-  onPanelClose: D,
-  onPanelMaximizeChange: A,
-  customDrag: O,
-  dragHandle: H = "panel",
-  maximizedPanel: a = null,
-  panelClassName: d = "",
-  scale: S,
-  autoScale: X,
-  onScaleChange: G
+  onToggleDragMode: p,
+  onPanelClose: j,
+  onPanelMaximizeChange: _,
+  customDrag: I,
+  dragHandle: re = "panel",
+  maximizedPanel: V = null,
+  panelClassName: oe = "",
+  scale: h,
+  autoScale: x,
+  onScaleChange: M,
+  scrollRootElement: F = "div",
+  labels: Z,
+  touchDragConfig: ae = pr
 }) => {
-  const Q = F(Y);
-  K(() => {
-    Q.current = Y;
-  }, [Y]);
-  const { containerRef: V, scale: re } = Ct(X?.requiredWidth ?? 0, X?.minScale), ce = a ? 1 : S ?? (X ? re : 1), se = Number.isFinite(ce) && ce > 0 ? ce : 1, ge = F(se);
-  ge.current = se, K(() => {
-    G && G(se);
-  }, [se, G]);
-  const et = se < 1 ? {
-    width: `${100 / se}%`,
-    height: `${100 / se}%`,
-    transform: `scale(${se})`,
+  if (F !== "div" && F !== "main")
+    throw new RangeError(`[@aiquants/drag-drop-panels] scrollRootElement must be "div" or "main"; got ${JSON.stringify(F)}`);
+  const X = F, H = Re(() => ur(Z), [Z]);
+  gr(ae);
+  const ve = mn(), ue = Re(() => {
+    const i = {};
+    return n.forEach((C) => {
+      i[C.id] = C;
+    }), i;
+  }, [n]), pe = Re(
+    () => ({
+      columnKeys: t.map((i) => i.key),
+      columnPanels: e,
+      panelVisibility: Object.fromEntries(Object.keys(r).map((i) => [i, r[i] === !0 && ue[i] !== void 0]))
+    }),
+    [t, e, r, ue]
+  ), ot = V === null ? null : Pe(pe, V), de = ot !== null, be = W(R);
+  ee(() => {
+    be.current = R;
+  }, [R]);
+  const { containerRef: nn, scale: rn } = Jn(x?.requiredWidth ?? 0, x?.minScale), He = de ? 1 : h ?? (x ? rn : 1), ge = Number.isFinite(He) && He > 0 ? He : 1, st = W(ge);
+  st.current = ge, ee(() => {
+    M && M(ge);
+  }, [ge, M]);
+  const on = ge < 1 ? {
+    width: `${100 / ge}%`,
+    height: `${100 / ge}%`,
+    transform: `scale(${ge})`,
     transformOrigin: "top left"
-  } : void 0, he = F({}), Ne = F(/* @__PURE__ */ new Map());
-  K(() => {
-    E(Q.current, 1, "🎨 DragDropLayout - dragModes props changed:", {
-      dragModes: h,
+  } : void 0, he = W({}), Ye = W(/* @__PURE__ */ new Map());
+  ee(() => {
+    O(be.current, 1, "🎨 DragDropLayout - dragModes props changed:", {
+      dragModes: b,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      keys: Object.keys(h),
-      values: Object.values(h)
+      keys: Object.keys(b),
+      values: Object.values(b)
     });
-  }, [h]);
-  const De = Ue(() => {
-    const P = {};
-    return e.forEach((B) => {
-      P[B.id] = B;
-    }), P;
-  }, [e]);
-  K(() => {
-    if (!(a && A))
+  }, [b]);
+  const [Fe, Ue] = se(null), Ae = W(null), at = W({ arrangement: pe, labels: H, panelComponentMap: ue });
+  we(() => {
+    at.current = { arrangement: pe, labels: H, panelComponentMap: ue };
+  });
+  const lt = W(null), it = W(null), sn = D((i) => {
+    it.current = i;
+  }, []), ct = W(null), Be = (i, C) => {
+    const q = ue[C];
+    if (q === void 0) return;
+    const K = ze(i, { title: { text: q.title, lang: void 0 } });
+    Ue((J) => Ze(J, K));
+  }, ut = (i, C, q, K) => {
+    const J = he.current[i], te = document.activeElement, ne = J instanceof HTMLElement && te !== null && J.contains(te) ? te.closest(`[${Ee}]`)?.getAttribute(Ee) ?? K : null;
+    Ae.current = { panelId: i, from: C, columnPanels: pe.columnPanels, focusAction: ne }, o(q);
+  }, dt = (i) => {
+    for (const [C, q] of t.entries()) {
+      const K = (e[q.key] ?? []).indexOf(i);
+      if (K >= 0) return { columnIndex: C, panelIndex: K };
+    }
+    return null;
+  }, an = (i, C) => {
+    const q = Pe(pe, i), K = t[C.columnIndex], J = q === null || K === void 0 ? null : Yt(e, i, K.key, C.insertIndex);
+    if (q === null || J === null) {
+      Be(H.panelDragCancelled, i);
       return;
-    const P = (B) => {
-      B.key === "Escape" && A(null);
+    }
+    ut(i, q, J, null);
+  }, ht = !(l.isDragging || I?.isActive === !0 || de), ke = ir({
+    config: ae,
+    layoutRef: lt,
+    scrollRootRef: it,
+    scale: ge,
+    canStart: ht,
+    panelElementOf: (i) => he.current[i] ?? null,
+    originOf: dt,
+    onLift: (i) => Be(H.panelDragStarted, i),
+    onDrop: an,
+    onCancel: (i) => Be(H.panelDragCancelled, i)
+  }), { touchDrag: ye } = ke, mt = ye !== null && (!ht || Pe(pe, ye.panelId) === null), ft = ke.cancel;
+  ee(() => {
+    mt && ft();
+  }, [mt, ft]);
+  const $e = l.isDragging || I?.isActive === !0 || ye !== null;
+  we(() => {
+    $e && (Ae.current = null);
+  }, [$e]), we(() => {
+    const i = Ae.current;
+    if (i === null || (Ae.current = null, !Vn(i.columnPanels, e, i.panelId))) return;
+    const C = at.current, q = Pe({ ...C.arrangement, columnPanels: e }, i.panelId);
+    if (q === null || q.column === i.from.column && q.index === i.from.index) return;
+    const K = ze(C.labels.panelMoved, { title: { text: C.panelComponentMap[i.panelId].title, lang: void 0 }, column: q.column + 1, position: q.index + 1 });
+    Ue((Q) => Ze(Q, K));
+    const J = he.current[i.panelId];
+    if (i.focusAction === null || J === null || J === void 0) return;
+    const { activeElement: te, body: ne } = document;
+    if (te === null || te === ne) {
+      const Q = J.querySelector(`[${Ee}="${i.focusAction}"]`);
+      Q instanceof HTMLElement && Q.focus({ preventScroll: !0 });
+    }
+    const U = document.activeElement;
+    U instanceof HTMLElement && J.contains(U) && U.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [e]), ee(() => {
+    if (!(de && _))
+      return;
+    const i = (C) => {
+      fr(C) && (C.preventDefault(), _(null));
     };
-    return document.addEventListener("keydown", P), () => document.removeEventListener("keydown", P);
-  }, [a, A]), Se(() => {
-    const P = /* @__PURE__ */ new Map();
-    Object.keys(he.current).forEach((q) => {
-      const ne = he.current[q];
-      if (ne) {
-        const de = ne.getBoundingClientRect();
-        P.set(q, {
-          rect: de,
-          height: ne.offsetHeight,
-          width: ne.offsetWidth
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [de, _]), we(() => {
+    const i = /* @__PURE__ */ new Map();
+    Object.keys(he.current).forEach((ne) => {
+      const U = he.current[ne];
+      if (U) {
+        const Q = U.getBoundingClientRect();
+        i.set(ne, {
+          rect: Q,
+          height: U.offsetHeight,
+          width: U.offsetWidth
         });
       }
     });
-    const B = Ne.current, ee = 300, me = /* @__PURE__ */ new Set();
-    Object.values(n).forEach((q) => {
-      q.forEach((ne) => {
-        me.add(ne);
+    const C = Ye.current, q = 300, K = /* @__PURE__ */ new Set();
+    Object.values(e).forEach((ne) => {
+      ne.forEach((U) => {
+        K.add(U);
       });
-    }), new Set(B.keys()).forEach((q) => {
-      me.has(q) || (E(Q.current, 1, "パネル削除検出 - クリーンアップ:", q), B.delete(q), he.current[q] && delete he.current[q]);
-    }), P.forEach((q, ne) => {
-      const de = B.get(ne);
-      if (de) {
-        const J = de.rect.left - q.rect.left, fe = de.rect.top - q.rect.top;
-        if (J !== 0 || fe !== 0) {
-          E(Q.current, 2, "パネル移動検出 - アニメーション開始:", ne, { dx: J, dy: fe });
-          const ae = he.current[ne];
-          if (ae) {
-            const be = ge.current || 1;
-            ae.style.transform = `translate(${J / be}px, ${fe / be}px)`, ae.style.transition = "none", ae.classList.add("is-moving"), requestAnimationFrame(() => {
-              ae.style.transition = `transform ${ee}ms cubic-bezier(0.2, 0, 0.2, 1)`, ae.style.transform = "translate(0, 0)", setTimeout(() => {
-                ae.style.transition = "", ae.style.transform = "", ae.classList.remove("is-moving");
-              }, ee);
+    }), new Set(C.keys()).forEach((ne) => {
+      K.has(ne) || (O(be.current, 1, "パネル削除検出 - クリーンアップ:", ne), C.delete(ne), he.current[ne] && delete he.current[ne]);
+    });
+    const te = !wr();
+    i.forEach((ne, U) => {
+      if (!te) return;
+      const Q = C.get(U);
+      if (Q) {
+        const le = Q.rect.left - ne.rect.left, xe = Q.rect.top - ne.rect.top;
+        if (le !== 0 || xe !== 0) {
+          O(be.current, 2, "パネル移動検出 - アニメーション開始:", U, { dx: le, dy: xe });
+          const ce = he.current[U];
+          if (ce) {
+            const Te = st.current || 1;
+            ce.style.transform = `translate(${le / Te}px, ${xe / Te}px)`, ce.style.transition = "none", ce.classList.add("is-moving"), requestAnimationFrame(() => {
+              ce.style.transition = `transform ${q}ms cubic-bezier(0.2, 0, 0.2, 1)`, ce.style.transform = "translate(0, 0)", setTimeout(() => {
+                ce.style.transition = "", ce.style.transform = "", ce.classList.remove("is-moving");
+              }, q);
             });
           }
         }
       } else {
-        E(Q.current, 1, "新規パネル検出 - フェードインアニメーション:", ne);
-        const J = he.current[ne];
-        J && (J.style.opacity = "0", J.style.transition = "none", requestAnimationFrame(() => {
-          J.style.transition = `opacity ${ee}ms ease-out`, J.style.opacity = "1", setTimeout(() => {
-            J.style.transition = "", J.style.opacity = "";
-          }, ee);
+        O(be.current, 1, "新規パネル検出 - フェードインアニメーション:", U);
+        const le = he.current[U];
+        le && (le.style.opacity = "0", le.style.transition = "none", requestAnimationFrame(() => {
+          le.style.transition = `opacity ${q}ms ease-out`, le.style.opacity = "1", setTimeout(() => {
+            le.style.transition = "", le.style.opacity = "";
+          }, q);
         }));
       }
-    }), Ne.current = P;
-  }, [n]), Se(() => {
-    const P = /* @__PURE__ */ new Map();
-    Object.keys(he.current).forEach((B) => {
-      const ee = he.current[B];
-      ee && P.set(B, { rect: ee.getBoundingClientRect(), height: ee.offsetHeight, width: ee.offsetWidth });
-    }), Ne.current = P;
-  }, [se]);
-  const tt = (P) => {
-    if (!s[P]) return null;
-    const B = De[P];
-    if (!B)
-      return E(Q.current, 1, `Panel config not found for panelId: ${P}`), null;
-    const ee = B.component, me = B.title, ue = i.draggedPanel === P, q = h[P] || "normal";
-    E(Q.current, 2, `🎨 renderPanel - ${P}:`, {
-      panelId: P,
-      dragMode: q,
+    }), Ye.current = i;
+  }, [e]), we(() => {
+    const i = /* @__PURE__ */ new Map();
+    Object.keys(he.current).forEach((C) => {
+      const q = he.current[C];
+      q && i.set(C, { rect: q.getBoundingClientRect(), height: q.offsetHeight, width: q.offsetWidth });
+    }), Ye.current = i;
+  }, [ge]);
+  const pt = (i, C, q) => {
+    if ($e) return;
+    const K = Xn(pe, i, C);
+    if (K === null) {
+      if (q) {
+        const J = ze(H.panelMoveUnavailable, { title: { text: ue[i].title, lang: void 0 }, move: H[zt[C]] });
+        Ue((te) => Ze(te, J));
+      }
+      return;
+    }
+    ut(i, K.from, K.columnPanels, `move-${C}`);
+  }, ln = (i, C) => {
+    if (i.defaultPrevented || de || !(i.target instanceof Node && i.currentTarget.contains(i.target))) return;
+    const q = Zn(i);
+    q !== null && (i.target instanceof Element && i.target.closest(vr) !== null || (i.preventDefault(), !i.repeat && pt(C, q, !0)));
+  }, gt = (i, C) => {
+    const q = ct.current;
+    if (q === "touch" || q === "pen") {
+      i.preventDefault();
+      return;
+    }
+    y(i, C);
+  }, Xe = ye === null ? u : ye.over, xt = ye === null ? f : dt(ye.panelId), cn = (i) => {
+    if (!r[i]) return null;
+    const C = ue[i];
+    if (!C)
+      return O(be.current, 1, `Panel config not found for panelId: ${i}`), null;
+    const q = C.component, K = C.title, J = l.draggedPanel === i || ye?.panelId === i, te = b[i] || "normal";
+    O(be.current, 2, `🎨 renderPanel - ${i}:`, {
+      panelId: i,
+      dragMode: te,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     });
-    const ne = (I) => {
-      he.current[P] = I, $ && $(P, I), I && Y.showPanelSizes && requestAnimationFrame(() => {
-        const ye = I.getBoundingClientRect(), Le = window.getComputedStyle(I);
-        E(Q.current, 1, `Panel ${P} mounted with size:`, {
-          width: ye.width,
-          height: ye.height,
-          x: ye.left,
-          y: ye.top,
-          minHeight: Le.minHeight,
-          maxHeight: Le.maxHeight
+    const ne = (B) => {
+      he.current[i] = B, $ && $(i, B), B && R.showPanelSizes && requestAnimationFrame(() => {
+        const je = B.getBoundingClientRect(), Ne = window.getComputedStyle(B);
+        O(be.current, 1, `Panel ${i} mounted with size:`, {
+          width: je.width,
+          height: je.height,
+          x: je.left,
+          y: je.top,
+          minHeight: Ne.minHeight,
+          maxHeight: Ne.maxHeight
         });
       });
-    }, de = U[P], J = a === P, fe = !!A, ae = () => A?.(J ? null : P), be = J ? {
+    }, U = d[i], Q = V === i, le = !!_, xe = () => _?.(Q ? null : i), ce = Q ? null : new Set(Bn(pe, i)), Te = Q ? {
       position: "fixed",
       top: "var(--aqdd-maximize-top, 0px)",
       right: "var(--aqdd-maximize-right, 0px)",
@@ -917,473 +1509,475 @@ const Jt = ({
       minHeight: 0,
       maxHeight: "none"
     } : {
-      minHeight: B.minHeight ?? "200px",
-      maxHeight: B.maxHeight ?? "500px"
-    }, ve = H === "header", Oe = q === "normal" && !ve && !J, Te = q === "normal" && ve && !J, _e = ue ? "cursor-grabbing" : "cursor-grab", Re = `panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${q === "custom" ? "select-none" : ""}`, rt = J ? (
-      // 最大化中: 角丸・ホバー演出・grab カーソル無し、背景は不透過寄りで下のレイアウトを遮蔽
-      `${Re} rounded-none bg-white/95 p-4 ${d}`
-    ) : `${Re} rounded-2xl bg-white/80 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${ve ? "" : _e} ${d}`;
+      minHeight: C.minHeight ?? "200px",
+      maxHeight: C.maxHeight ?? "500px"
+    }, Le = re === "header", bt = te === "normal" && !Le && !Q, yt = te === "normal" && Le && !Q, wt = J ? "cursor-grabbing" : "cursor-grab", jt = `panel-draggable relative flex flex-col overflow-hidden border text-left shadow-lg backdrop-blur-lg ${te === "custom" ? "select-none" : ""}`, dn = Q ? (
+      // 最大化中: 角丸・ホバー演出・grab カーソル無し (下のレイアウトを遮蔽する不透過寄りの面は CSS が data-maximized で描く)
+      `${jt} rounded-none p-4 ${oe}`
+    ) : `${jt} rounded-2xl p-4 motion-safe:transition-all motion-safe:duration-300 motion-safe:hover:-translate-y-1 hover:shadow-xl ${Le ? "" : wt} ${oe}`, Pt = te === "custom" ? H.switchToNormalDragMode : H.switchToCustomDragMode, Et = Q ? H.restorePanel : H.maximizePanel;
     return (
       // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素
-      /* @__PURE__ */ t.jsxs(
+      /* @__PURE__ */ s.jsxs(
         "div",
         {
           ref: ne,
-          "data-panel-id": P,
-          "data-dragging": ue,
-          "data-maximized": J || void 0,
+          "data-panel-id": i,
+          "data-aqdd-panel": !0,
+          "data-aqdd-drag-mode": te,
+          "data-dragging": J,
+          "data-maximized": Q || void 0,
           role: "presentation",
-          draggable: Oe,
-          onDragStart: (I) => Oe && N(I, P),
-          onDragEnd: b,
-          onClick: (I) => k?.(I, P),
-          onMouseDown: (I) => _?.(I, P),
-          onTouchStart: (I) => R?.(I, P),
-          onTouchMove: z,
-          onTouchEnd: Z,
-          style: be,
-          className: rt,
+          draggable: bt,
+          onDragStart: (B) => bt && gt(B, i),
+          onDragEnd: A,
+          onClick: (B) => S?.(B, i),
+          onMouseDown: (B) => N?.(B, i),
+          onKeyDown: (B) => ln(B, i),
+          style: Te,
+          className: dn,
           children: [
-            /* @__PURE__ */ t.jsxs(
+            /* @__PURE__ */ s.jsxs(
               "div",
               {
-                className: `group relative mb-3 flex items-center justify-between ${ve && !J ? _e : ""}`,
-                draggable: Te,
-                onDragStart: (I) => Te && N(I, P),
-                onDoubleClick: fe ? (I) => {
-                  I.stopPropagation(), ae();
+                ref: ke.bindHeader,
+                "data-aqdd-panel-header": !0,
+                className: `relative mb-3 ${Le && !Q ? wt : ""}`,
+                draggable: yt,
+                onDragStart: (B) => yt && gt(B, i),
+                onPointerDown: (B) => ke.pressHeader(B, i),
+                onContextMenu: ke.holdContextMenu,
+                onKeyDown: jr,
+                onDoubleClick: le ? (B) => {
+                  B.stopPropagation(), !(B.target instanceof Element && B.target.closest(`[${Ee}]`) !== null) && xe();
                 } : void 0,
                 children: [
-                  /* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-2", children: [
-                    /* @__PURE__ */ t.jsx("h3", { className: "font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900", children: me }),
-                    q === "custom" && /* @__PURE__ */ t.jsx("span", { className: "rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs", children: "Custom" })
-                  ] }),
-                  /* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
-                    /* @__PURE__ */ t.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (I) => {
-                          I.stopPropagation(), v && v(P);
-                        },
-                        onKeyDown: (I) => {
-                          (I.key === "Enter" || I.key === " ") && (I.preventDefault(), I.stopPropagation(), v && v(P));
-                        },
-                        tabIndex: 0,
-                        className: `cursor-pointer rounded p-1 text-xs transition-colors ${q === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,
-                        title: q === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え",
-                        children: q === "custom" ? /* @__PURE__ */ t.jsx(kt, { className: "h-4 w-4" }) : /* @__PURE__ */ t.jsx(jt, { className: "h-4 w-4" })
-                      }
-                    ),
-                    !J && /* @__PURE__ */ t.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (I) => {
-                          I.stopPropagation(), o({
-                            ...s,
-                            [P]: !1
-                          });
-                        },
-                        className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",
-                        title: "パネルを非表示",
-                        children: /* @__PURE__ */ t.jsx(Xe, { className: "h-4 w-4" })
-                      }
-                    ),
-                    fe && /* @__PURE__ */ t.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (I) => {
-                          I.stopPropagation(), ae();
-                        },
-                        className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",
-                        title: J ? "元のサイズに戻す" : "パネルを最大化",
-                        children: J ? /* @__PURE__ */ t.jsx(yt, { className: "h-4 w-4" }) : /* @__PURE__ */ t.jsx(bt, { className: "h-4 w-4" })
-                      }
-                    ),
-                    D && /* @__PURE__ */ t.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (I) => {
-                          I.stopPropagation(), D(P);
-                        },
-                        className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-red-500",
-                        title: "パネルを閉じる",
-                        children: /* @__PURE__ */ t.jsx(Ve, { className: "h-4 w-4" })
-                      }
-                    )
+                  /* @__PURE__ */ s.jsx("h3", { "data-aqdd-panel-title": !0, className: "font-semibold text-lg", children: K }),
+                  /* @__PURE__ */ s.jsxs("div", { "data-aqdd-panel-controls": !0, children: [
+                    te === "custom" && /* @__PURE__ */ s.jsx("span", { "data-aqdd-custom-badge": !0, lang: H.customDragModeBadge.lang, className: "rounded-md px-2 py-1 font-medium text-xs", children: H.customDragModeBadge.text }),
+                    /* @__PURE__ */ s.jsxs("div", { "data-aqdd-panel-buttons": !0, children: [
+                      ce !== null && De.map((B) => {
+                        const je = xr[B], Ne = H[zt[B]], Dt = Ut[B];
+                        return /* @__PURE__ */ s.jsx(Me, { action: `move-${B}`, label: Ne, tooltip: `${Ne.text} (${Dt.text})`, unavailable: !ce.has(B), keyShortcuts: Dt.aria, onActivate: () => pt(i, B, !1), children: /* @__PURE__ */ s.jsx(je, { className: "h-4 w-4", "aria-hidden": "true" }) }, B);
+                      }),
+                      /* @__PURE__ */ s.jsx(Me, { action: "drag-mode", label: Pt, tooltip: Pt.text, unavailable: !1, keyShortcuts: void 0, onActivate: () => p?.(i), children: te === "custom" ? /* @__PURE__ */ s.jsx(In, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ s.jsx(qn, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+                      !Q && /* @__PURE__ */ s.jsx(Me, { action: "hide", label: H.hidePanel, tooltip: H.hidePanel.text, unavailable: !1, keyShortcuts: void 0, onActivate: () => a({ ...r, [i]: !1 }), children: /* @__PURE__ */ s.jsx(Mt, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+                      le && /* @__PURE__ */ s.jsx(Me, { action: Q ? "restore" : "maximize", label: Et, tooltip: Et.text, unavailable: !1, keyShortcuts: void 0, onActivate: xe, children: Q ? /* @__PURE__ */ s.jsx(Rn, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ s.jsx(Ln, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+                      j && /* @__PURE__ */ s.jsx(Me, { action: "close", label: H.closePanel, tooltip: H.closePanel.text, unavailable: !1, keyShortcuts: void 0, onActivate: () => j(i), children: /* @__PURE__ */ s.jsx(Ht, { className: "h-4 w-4", "aria-hidden": "true" }) })
+                    ] })
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ t.jsx("div", { "data-aqdd-scroll-area": !0, className: "panel-scroll-area min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ t.jsx(ee, { ...B.props || {} }) }),
-            /* @__PURE__ */ t.jsx(Dt, { config: Y, panelId: P, sizeInfo: de, onSizeInfoClick: (I) => m?.(I, P) })
+            /* @__PURE__ */ s.jsx("div", { "data-aqdd-scroll-area": !0, className: "panel-scroll-area min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ s.jsx(q, { ...C.props || {} }) }),
+            /* @__PURE__ */ s.jsx(Yn, { config: R, panelId: i, sizeInfo: U, onSizeInfoClick: (B) => m?.(B, i) })
           ]
         },
-        P
+        i
       )
     );
-  }, nt = (P, B) => {
-    const ee = n[P] || [];
-    let me = !1;
-    for (const q of ee)
-      if (s[q]) {
-        me = !0;
+  }, un = (i, C) => {
+    const q = e[i] || [];
+    let K = !1;
+    for (const U of q)
+      if (r[U]) {
+        K = !0;
         break;
       }
-    const ue = i.isDragging || (O?.isActive ?? !1);
-    return /* @__PURE__ */ t.jsx(Ge, { columnIndex: B, isDragging: ue, dragOverPosition: u, config: Y, children: /* @__PURE__ */ t.jsxs(
+    const J = $e, te = Rt(H.dropZone, { column: C + 1 }), ne = `${ve}-drop-zone-${C}`;
+    return /* @__PURE__ */ s.jsx(Xt, { columnIndex: C, isDragging: J, dragOverPosition: Xe, config: R, children: /* @__PURE__ */ s.jsxs(
       "section",
       {
         "data-drop-zone": "true",
-        "data-column-key": P,
-        "data-column-index": B,
-        "aria-label": `Drop zone for column ${B + 1}`,
-        onDragOver: (q) => y(q, B),
-        onDrop: (q) => l(q, P),
-        onDragLeave: j,
-        className: "relative flex h-full flex-col transition-all duration-200",
+        "data-column-key": i,
+        "data-column-index": C,
+        "aria-labelledby": ne,
+        onDragOver: (U) => c(U, C),
+        onDrop: (U) => P(U, i),
+        onDragLeave: k,
+        className: "relative flex h-full flex-col motion-safe:transition-all motion-safe:duration-200",
         children: [
-          /* @__PURE__ */ t.jsx("div", { className: "placeholder-container", children: /* @__PURE__ */ t.jsx(
-            Me,
+          /* @__PURE__ */ s.jsx("span", { id: ne, hidden: !0, lang: te.lang, children: te.text }),
+          /* @__PURE__ */ s.jsx("div", { className: "placeholder-container", inert: de, children: /* @__PURE__ */ s.jsx(
+            Je,
             {
               index: 0,
-              columnIndex: B,
-              isDragging: ue,
-              dragOverPosition: u,
-              originalPosition: c,
-              onDragEnter: M,
-              onDragLeave: T,
-              debugConfig: Y,
-              customDrag: O
+              columnIndex: C,
+              isDragging: J,
+              dragOverPosition: Xe,
+              originalPosition: xt,
+              onDragEnter: z,
+              onDragLeave: E,
+              debugConfig: R,
+              customDrag: I,
+              label: H.dropHere
             }
           ) }),
-          ee.map((q, ne) => {
-            const de = s[q], J = !(de || ue);
-            return /* @__PURE__ */ t.jsxs("div", { className: `panel-with-placeholder ${J ? "m-0 h-0 overflow-hidden p-0" : ""}`, "data-panel-hidden": J ? "true" : void 0, "aria-hidden": J ? "true" : void 0, children: [
-              de ? tt(q) : ue ? (
-                /* ドラッグ中のみ隠されたパネルのダミー表示 */
-                /* @__PURE__ */ t.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__ */ t.jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [
-                    /* @__PURE__ */ t.jsx("h3", { className: "font-semibold text-amber-700 text-base", children: De[q]?.title || q }),
-                    /* @__PURE__ */ t.jsx("span", { className: "rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs", children: "非表示" })
-                  ] }),
-                  /* @__PURE__ */ t.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ t.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ t.jsxs("div", { className: "text-center text-amber-600", children: [
-                    /* @__PURE__ */ t.jsx(Xe, { className: "mx-auto h-6 w-6 opacity-50" }),
-                    /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-xs", children: "このパネルは非表示です" })
-                  ] }) }) })
-                ] })
-              ) : null,
-              /* @__PURE__ */ t.jsx(
-                Me,
-                {
-                  index: ne + 1,
-                  columnIndex: B,
-                  isDragging: ue,
-                  dragOverPosition: u,
-                  originalPosition: c,
-                  onDragEnter: M,
-                  onDragLeave: T,
-                  debugConfig: Y,
-                  customDrag: O
-                }
-              )
-            ] }, `panel-${q}`);
+          q.map((U, Q) => {
+            const le = r[U], xe = !(le || J), ce = de && U === V;
+            return /* @__PURE__ */ s.jsxs(
+              "div",
+              {
+                className: `panel-with-placeholder ${xe ? "m-0 h-0 overflow-hidden p-0" : ""}`,
+                "data-panel-hidden": xe ? "true" : void 0,
+                "aria-hidden": xe ? "true" : void 0,
+                inert: de && !ce,
+                children: [
+                  le ? cn(U) : J ? (
+                    /* ドラッグ中のみ隠されたパネルの代わりを出す (面・枠線・文字・印の色は CSS が --aqdd-* の変数から描く) */
+                    /* @__PURE__ */ s.jsxs("div", { "data-aqdd-hidden-panel-stand-in": !0, className: "hidden-panel-placeholder relative h-[120px] rounded-2xl border-2 border-dashed p-3 text-left shadow-lg backdrop-blur-lg", children: [
+                      /* @__PURE__ */ s.jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [
+                        /* @__PURE__ */ s.jsx("h3", { className: "font-semibold text-base", children: ue[U]?.title || U }),
+                        /* @__PURE__ */ s.jsx("span", { "data-aqdd-hidden-panel-badge": !0, lang: H.hiddenPanelBadge.lang, className: "rounded-md px-2 py-1 font-medium text-xs", children: H.hiddenPanelBadge.text })
+                      ] }),
+                      /* @__PURE__ */ s.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ s.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ s.jsxs("div", { className: "text-center", children: [
+                        /* @__PURE__ */ s.jsx(Mt, { className: "mx-auto h-6 w-6 opacity-50", "aria-hidden": "true" }),
+                        /* @__PURE__ */ s.jsx("p", { lang: H.hiddenPanelNotice.lang, className: "mt-1 text-xs", children: H.hiddenPanelNotice.text })
+                      ] }) }) })
+                    ] })
+                  ) : null,
+                  ce ? null : /* @__PURE__ */ s.jsx(
+                    Je,
+                    {
+                      index: Q + 1,
+                      columnIndex: C,
+                      isDragging: J,
+                      dragOverPosition: Xe,
+                      originalPosition: xt,
+                      onDragEnter: z,
+                      onDragLeave: E,
+                      debugConfig: R,
+                      customDrag: I,
+                      label: H.dropHere
+                    }
+                  )
+                ]
+              },
+              `panel-${U}`
+            );
           }),
-          !(me || ue) && /* @__PURE__ */ t.jsx("div", { className: "flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-center text-slate-400 transition-all duration-200", children: /* @__PURE__ */ t.jsx("div", { className: "text-sm", children: "このエリアは空です" }) })
+          !(K || J) && /* @__PURE__ */ s.jsx("div", { "data-aqdd-empty-column": !0, className: "flex-shrink-0 rounded-xl border-2 border-dashed p-8 text-center motion-safe:transition-all motion-safe:duration-200", inert: de, children: /* @__PURE__ */ s.jsx("div", { lang: H.emptyColumn.lang, className: "text-sm", children: H.emptyColumn.text }) })
         ]
       }
     ) });
-  }, Ae = Object.keys(s).filter((P) => !s[P]);
-  return /* @__PURE__ */ t.jsxs("div", { className: "flex h-full flex-col", children: [
-    Ae.length > 0 && /* @__PURE__ */ t.jsx("div", { className: "border-slate-200 border-b bg-white/70 px-4 py-2 backdrop-blur-lg", children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-      /* @__PURE__ */ t.jsx("span", { className: "mr-2 text-slate-600 text-sm", children: "非表示のパネル:" }),
-      Ae.map((P) => {
-        const ee = De[P]?.title || P;
-        return /* @__PURE__ */ t.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => o({
-              ...s,
-              [P]: !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__ */ t.jsx(pt, { className: "h-3 w-3" }),
-              /* @__PURE__ */ t.jsx("span", { children: ee })
-            ]
-          },
-          P
-        );
-      })
-    ] }) }),
-    /* @__PURE__ */ t.jsx("div", { ref: V, className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ t.jsx("div", { className: "h-full w-full", style: et, children: /* @__PURE__ */ t.jsx("main", { "data-aqdd-scroll-root": !0, className: "no-scrollbar h-full max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6", children: /* @__PURE__ */ t.jsx("div", { className: "relative flex h-full items-start gap-6 pr-4", children: r.map((P, B) => {
-      const ee = f?.[P.id] || P.initialWidth || 350, me = L && (P.resizable ?? !0);
-      return /* @__PURE__ */ t.jsx(ot, { children: /* @__PURE__ */ t.jsxs(
-        "div",
-        {
-          className: `column relative ${P.className || ""} ${L ? "resize-enabled-column" : "auto-width-column"} ${p && g === P.id ? "column-resizing-active" : ""}`,
-          "data-column": B,
-          "data-column-id": P.id,
-          "data-min-width": P.minWidth || 350,
-          "data-max-width": P.maxWidth,
-          "data-column-width": L ? ee : void 0,
-          ...L && {
-            style: { "--column-width": `${ee}px` }
-          },
-          children: [
-            nt(P.key, B),
-            me && x && C && W && /* @__PURE__ */ t.jsx(Je, { columnId: P.id, onResizeStart: x, onResize: C, onResizeEnd: W, isResizing: p && g === P.id, position: "right", debug: Y })
-          ]
-        }
-      ) }, P.id);
-    }) }) }) }) })
-  ] });
+  }, vt = Object.keys(r).filter((i) => !r[i]);
+  return /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      ref: lt,
+      "data-aqdd-layout": !0,
+      className: "flex h-full flex-col",
+      onPointerDownCapture: (i) => {
+        ct.current = i.pointerType;
+      },
+      children: [
+        /* @__PURE__ */ s.jsxs("div", { "data-aqdd-announcer": !0, role: "status", "aria-live": "polite", "aria-atomic": "true", inert: de, children: [
+          Fe?.segments.map(
+            (i, C) => i.lang === void 0 ? i.text : /* @__PURE__ */ s.jsx("span", { lang: i.lang, children: i.text }, C)
+          ),
+          Fe !== null && Fe.serial % 2 === 0 ? br : null
+        ] }),
+        vt.length > 0 && /* @__PURE__ */ s.jsx("div", { "data-aqdd-hidden-panels": !0, className: "border-b px-4 py-2 backdrop-blur-lg", inert: de, children: /* @__PURE__ */ s.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ s.jsx("span", { lang: H.hiddenPanels.lang, className: "mr-2 text-sm", children: H.hiddenPanels.text }),
+          vt.map((i) => {
+            const q = ue[i]?.title || i;
+            return /* @__PURE__ */ s.jsxs(
+              "button",
+              {
+                type: "button",
+                "data-aqdd-restore-panel": i,
+                onClick: () => a({
+                  ...r,
+                  [i]: !0
+                }),
+                className: "flex items-center space-x-1 rounded-lg px-3 py-1 text-sm shadow-md hover:shadow-lg motion-safe:transition-all motion-safe:duration-200",
+                children: [
+                  /* @__PURE__ */ s.jsx(An, { className: "h-3 w-3", "aria-hidden": "true" }),
+                  /* @__PURE__ */ s.jsx("span", { children: q })
+                ]
+              },
+              i
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ s.jsx("div", { ref: nn, className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ s.jsx("div", { className: "h-full w-full", style: on, children: /* @__PURE__ */ s.jsx(X, { ref: sn, "data-aqdd-scroll-root": !0, className: "no-scrollbar h-full max-w-full flex-1 overflow-auto", children: /* @__PURE__ */ s.jsx("div", { "data-aqdd-columns": !0, className: "relative flex h-full items-start", children: t.map((i, C) => {
+          const q = Y?.[i.id] || i.initialWidth || 350, K = T && (i.resizable ?? !0);
+          return /* @__PURE__ */ s.jsx(fn, { children: /* @__PURE__ */ s.jsxs(
+            "div",
+            {
+              className: `column relative ${i.className || ""} ${T ? "resize-enabled-column" : "auto-width-column"} ${L && w === i.id ? "column-resizing-active" : ""}`,
+              "data-column": C,
+              "data-column-id": i.id,
+              "data-min-width": i.minWidth || 350,
+              "data-max-width": i.maxWidth,
+              "data-column-width": T ? q : void 0,
+              inert: de && C !== ot.column,
+              ...T && {
+                style: { "--column-width": `${q}px` }
+              },
+              children: [
+                un(i.key, C),
+                K && !de && G && g && v && /* @__PURE__ */ s.jsx(
+                  en,
+                  {
+                    columnId: i.id,
+                    onResizeStart: G,
+                    onResize: g,
+                    onResizeEnd: v,
+                    isResizing: L && w === i.id,
+                    position: "right",
+                    debug: R,
+                    label: Rt(H.resizeColumn, { column: C + 1 })
+                  }
+                )
+              ]
+            }
+          ) }, i.id);
+        }) }) }) }) })
+      ]
+    }
+  );
 };
-const Mt = [
+const Pr = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M3 9h18", key: "1pudct" }],
   ["path", { d: "M3 15h18", key: "5xshup" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
-], $t = oe("grid-3x3", Mt);
-const At = [["path", { d: "M5 12h14", key: "1ays0h" }]], Ot = oe("minus", At);
-const Tt = [
+], Er = ie("grid-3x3", Pr);
+const Dr = [["path", { d: "M5 12h14", key: "1ays0h" }]], kr = ie("minus", Dr);
+const Nr = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
-], $e = oe("plus", Tt);
-const _t = [
+], Qe = ie("plus", Nr);
+const Or = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
-], Rt = oe("rotate-ccw", _t), Qt = ({ columnCount: r, onColumnCountChange: e, onAutoBalance: n, onResetWidths: s, minColumns: o = 2, maxColumns: i = 6, isResizing: u = !1, isResponsiveMode: c = !1, responsiveColumnCount: h }) => {
-  const N = r > o && !c, b = r < i && !c;
-  return /* @__PURE__ */ t.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__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ t.jsx("span", { className: "font-medium text-slate-700 text-sm", children: "カラム数:" }),
-      /* @__PURE__ */ t.jsx(
+], Cr = ie("rotate-ccw", Or), Ur = ({ columnCount: t, onColumnCountChange: n, onAutoBalance: e, onResetWidths: o, minColumns: r = 2, maxColumns: a = 6, isResizing: l = !1, isResponsiveMode: u = !1, responsiveColumnCount: f }) => {
+  const b = t > r && !u, y = t < a && !u;
+  return /* @__PURE__ */ s.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__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ s.jsx("span", { className: "font-medium text-slate-700 text-sm", children: "カラム数:" }),
+      /* @__PURE__ */ s.jsx(
         "button",
         {
           type: "button",
-          onClick: () => N && e(r - 1),
-          disabled: !N || u,
-          className: `rounded p-1 text-xs transition-colors ${N && !u ? "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 ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを削除 (最小: ${o}列)`,
-          children: /* @__PURE__ */ t.jsx(Ot, { className: "h-3 w-3" })
+          onClick: () => b && n(t - 1),
+          disabled: !b || l,
+          className: `rounded p-1 text-xs transition-colors ${b && !l ? "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: u ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを削除 (最小: ${r}列)`,
+          children: /* @__PURE__ */ s.jsx(kr, { className: "h-3 w-3" })
         }
       ),
-      /* @__PURE__ */ t.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 ? h ?? r : r,
-        c && /* @__PURE__ */ t.jsx("span", { className: "ml-1 text-xs", children: "自動" })
+      /* @__PURE__ */ s.jsxs("div", { className: `min-w-[2rem] rounded border px-3 py-1 text-center font-mono text-sm ${u ? "border-blue-300 bg-blue-50 text-blue-700" : "border-slate-300 bg-slate-100 text-slate-700"}`, children: [
+        u ? f ?? t : t,
+        u && /* @__PURE__ */ s.jsx("span", { className: "ml-1 text-xs", children: "自動" })
       ] }),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ s.jsx(
         "button",
         {
           type: "button",
-          onClick: () => b && e(r + 1),
-          disabled: !b || u,
-          className: `rounded p-1 text-xs transition-colors ${b && !u ? "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 ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを追加 (最大: ${i}列)`,
-          children: /* @__PURE__ */ t.jsx($e, { className: "h-3 w-3" })
+          onClick: () => y && n(t + 1),
+          disabled: !y || l,
+          className: `rounded p-1 text-xs transition-colors ${y && !l ? "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: u ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを追加 (最大: ${a}列)`,
+          children: /* @__PURE__ */ s.jsx(Qe, { className: "h-3 w-3" })
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsx("div", { className: "h-6 w-px bg-slate-300" }),
-    /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ t.jsxs(
+    /* @__PURE__ */ s.jsx("div", { className: "h-6 w-px bg-slate-300" }),
+    /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ s.jsxs(
         "button",
         {
           type: "button",
-          onClick: n,
-          disabled: u,
-          className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${u ? "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"}`,
+          onClick: e,
+          disabled: l,
+          className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${l ? "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__ */ t.jsx($t, { className: "h-3 w-3" }),
-            /* @__PURE__ */ t.jsx("span", { children: "バランス" })
+            /* @__PURE__ */ s.jsx(Er, { className: "h-3 w-3" }),
+            /* @__PURE__ */ s.jsx("span", { children: "バランス" })
           ]
         }
       ),
-      /* @__PURE__ */ t.jsxs(
+      /* @__PURE__ */ s.jsxs(
         "button",
         {
           type: "button",
-          onClick: s,
-          disabled: u,
-          className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${u ? "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"}`,
+          onClick: o,
+          disabled: l,
+          className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${l ? "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__ */ t.jsx(Rt, { className: "h-3 w-3" }),
-            /* @__PURE__ */ t.jsx("span", { children: "幅リセット" })
+            /* @__PURE__ */ s.jsx(Cr, { className: "h-3 w-3" }),
+            /* @__PURE__ */ s.jsx("span", { children: "幅リセット" })
           ]
         }
       )
     ] }),
-    u && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1 text-blue-600 text-xs", children: [
-      /* @__PURE__ */ t.jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-blue-500" }),
-      /* @__PURE__ */ t.jsx("span", { children: "リサイズ中..." })
+    l && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1 text-blue-600 text-xs", children: [
+      /* @__PURE__ */ s.jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-blue-500" }),
+      /* @__PURE__ */ s.jsx("span", { children: "リサイズ中..." })
     ] })
   ] });
-}, Kt = ({ columnCount: r, onInsertColumn: e, onDeleteColumn: n, minColumns: s = 1, maxColumns: o = 6, isResizing: i = !1, disabled: u = !1 }) => {
-  const c = r < o && !u, h = r > s && !u;
-  return /* @__PURE__ */ t.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 ${u ? "bg-slate-100/80 opacity-60" : "bg-white/80"}`, children: [
-    u && /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-2 text-slate-500 text-xs", children: /* @__PURE__ */ t.jsx("span", { children: "レスポンシブモード有効中：カラム数は自動調整されます" }) }),
-    !u && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(
+}, Br = ({ columnCount: t, onInsertColumn: n, onDeleteColumn: e, minColumns: o = 1, maxColumns: r = 6, isResizing: a = !1, disabled: l = !1 }) => {
+  const u = t < r && !l, f = t > o && !l;
+  return /* @__PURE__ */ s.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 ${l ? "bg-slate-100/80 opacity-60" : "bg-white/80"}`, children: [
+    l && /* @__PURE__ */ s.jsx("div", { className: "flex items-center gap-2 text-slate-500 text-xs", children: /* @__PURE__ */ s.jsx("span", { children: "レスポンシブモード有効中：カラム数は自動調整されます" }) }),
+    !l && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsx(
         "button",
         {
           type: "button",
-          onClick: () => c && e(0),
-          disabled: !c || i,
-          className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${c && !i ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"}`,
+          onClick: () => u && n(0),
+          disabled: !u || a,
+          className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${u && !a ? "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__ */ t.jsx($e, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s.jsx(Qe, { className: "h-4 w-4" })
         }
       ),
-      Array.from({ length: r }, (N, b) => /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ t.jsxs("div", { className: "relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100", children: [
-          /* @__PURE__ */ t.jsx("span", { className: "font-medium font-mono text-slate-700 text-xs", children: b + 1 }),
-          h && !i && /* @__PURE__ */ t.jsx(
+      Array.from({ length: t }, (b, y) => /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ s.jsxs("div", { className: "relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100", children: [
+          /* @__PURE__ */ s.jsx("span", { className: "font-medium font-mono text-slate-700 text-xs", children: y + 1 }),
+          f && !a && /* @__PURE__ */ s.jsx(
             "button",
             {
               type: "button",
-              onClick: () => n(b),
+              onClick: () => e(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: `カラム ${b + 1} を削除`,
-              children: /* @__PURE__ */ t.jsx(Ve, { className: "h-2.5 w-2.5" })
+              title: `カラム ${y + 1} を削除`,
+              children: /* @__PURE__ */ s.jsx(Ht, { className: "h-2.5 w-2.5" })
             }
           )
         ] }),
-        /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ s.jsx(
           "button",
           {
             type: "button",
-            onClick: () => c && e(b + 1),
-            disabled: !c || i,
-            className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${c && !i ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"}`,
+            onClick: () => u && n(y + 1),
+            disabled: !u || a,
+            className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${u && !a ? "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__ */ t.jsx($e, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ s.jsx(Qe, { className: "h-4 w-4" })
           }
         )
-      ] }, `column-${b}`))
+      ] }, `column-${y}`))
     ] })
   ] });
-}, en = ({ config: r, onConfigChange: e, isVisible: n, onToggleVisibility: s }) => n ? /* @__PURE__ */ t.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__ */ t.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-    /* @__PURE__ */ t.jsx("h3", { className: "font-bold text-gray-800 text-sm", children: "🛠️ デバッグ設定" }),
-    /* @__PURE__ */ t.jsx("button", { type: "button", onClick: s, className: "text-gray-500 text-lg hover:text-gray-700", title: "閉じる", children: "✕" })
+}, Xr = ({ config: t, onConfigChange: n, isVisible: e, onToggleVisibility: o }) => e ? /* @__PURE__ */ s.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__ */ s.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+    /* @__PURE__ */ s.jsx("h3", { className: "font-bold text-gray-800 text-sm", children: "🛠️ デバッグ設定" }),
+    /* @__PURE__ */ s.jsx("button", { type: "button", onClick: o, className: "text-gray-500 text-lg hover:text-gray-700", title: "閉じる", children: "✕" })
   ] }),
-  /* @__PURE__ */ t.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
-      /* @__PURE__ */ t.jsx(
+  /* @__PURE__ */ s.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ s.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           type: "checkbox",
-          checked: r.showDebugPanel ?? !1,
-          onChange: (o) => e({
-            ...r,
-            showDebugPanel: o.target.checked
+          checked: t.showDebugPanel ?? !1,
+          onChange: (r) => n({
+            ...t,
+            showDebugPanel: r.target.checked
           }),
           className: "rounded"
         }
       ),
-      /* @__PURE__ */ t.jsx("span", { children: "デバッグパネル表示" })
+      /* @__PURE__ */ s.jsx("span", { children: "デバッグパネル表示" })
     ] }),
-    /* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
-      /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ s.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           type: "checkbox",
-          checked: r.showMousePosition ?? !1,
-          onChange: (o) => e({
-            ...r,
-            showMousePosition: o.target.checked
+          checked: t.showMousePosition ?? !1,
+          onChange: (r) => n({
+            ...t,
+            showMousePosition: r.target.checked
           }),
           className: "rounded"
         }
       ),
-      /* @__PURE__ */ t.jsx("span", { children: "マウス位置表示" })
+      /* @__PURE__ */ s.jsx("span", { children: "マウス位置表示" })
     ] }),
-    /* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
-      /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ s.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           type: "checkbox",
-          checked: r.showPanelSizes ?? !1,
-          onChange: (o) => e({
-            ...r,
-            showPanelSizes: o.target.checked
+          checked: t.showPanelSizes ?? !1,
+          onChange: (r) => n({
+            ...t,
+            showPanelSizes: r.target.checked
           }),
           className: "rounded"
         }
       ),
-      /* @__PURE__ */ t.jsx("span", { children: "パネルサイズ情報" })
+      /* @__PURE__ */ s.jsx("span", { children: "パネルサイズ情報" })
     ] }),
-    /* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
-      /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ s.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           type: "checkbox",
-          checked: r.showPlaceholderInfo ?? !1,
-          onChange: (o) => e({
-            ...r,
-            showPlaceholderInfo: o.target.checked
+          checked: t.showPlaceholderInfo ?? !1,
+          onChange: (r) => n({
+            ...t,
+            showPlaceholderInfo: r.target.checked
           }),
           className: "rounded"
         }
       ),
-      /* @__PURE__ */ t.jsx("span", { children: "プレースホルダー詳細" })
+      /* @__PURE__ */ s.jsx("span", { children: "プレースホルダー詳細" })
     ] }),
-    /* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
-      /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ s.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           type: "checkbox",
-          checked: r.showDropZoneOutlines ?? !1,
-          onChange: (o) => e({
-            ...r,
-            showDropZoneOutlines: o.target.checked
+          checked: t.showDropZoneOutlines ?? !1,
+          onChange: (r) => n({
+            ...t,
+            showDropZoneOutlines: r.target.checked
           }),
           className: "rounded"
         }
       ),
-      /* @__PURE__ */ t.jsx("span", { children: "ドロップゾーン境界" })
+      /* @__PURE__ */ s.jsx("span", { children: "ドロップゾーン境界" })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: "border-gray-200 border-t pt-2", children: [
-      /* @__PURE__ */ t.jsxs("label", { htmlFor: "log-level-slider", className: "mb-1 block text-sm", children: [
+    /* @__PURE__ */ s.jsxs("div", { className: "border-gray-200 border-t pt-2", children: [
+      /* @__PURE__ */ s.jsxs("label", { htmlFor: "log-level-slider", className: "mb-1 block text-sm", children: [
         "ログレベル: ",
-        r.logLevel ?? 0
+        t.logLevel ?? 0
       ] }),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           id: "log-level-slider",
           type: "range",
           min: "0",
           max: "2",
-          value: r.logLevel ?? 0,
-          onChange: (o) => e({
-            ...r,
-            logLevel: parseInt(o.target.value, 10)
+          value: t.logLevel ?? 0,
+          onChange: (r) => n({
+            ...t,
+            logLevel: parseInt(r.target.value, 10)
           }),
           className: "w-full",
           "aria-label": "ログレベル設定"
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { className: "mt-1 flex justify-between text-gray-500 text-xs", children: [
-        /* @__PURE__ */ t.jsx("span", { children: "無効" }),
-        /* @__PURE__ */ t.jsx("span", { children: "基本" }),
-        /* @__PURE__ */ t.jsx("span", { children: "詳細" })
+      /* @__PURE__ */ s.jsxs("div", { className: "mt-1 flex justify-between text-gray-500 text-xs", children: [
+        /* @__PURE__ */ s.jsx("span", { children: "無効" }),
+        /* @__PURE__ */ s.jsx("span", { children: "基本" }),
+        /* @__PURE__ */ s.jsx("span", { children: "詳細" })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: "space-y-2 pt-2", children: [
-      /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ s.jsxs("div", { className: "space-y-2 pt-2", children: [
+      /* @__PURE__ */ s.jsx(
         "button",
         {
           type: "button",
-          onClick: () => e({
+          onClick: () => n({
             showDebugPanel: !0,
             showMousePosition: !0,
             showPanelSizes: !0,
@@ -1395,11 +1989,11 @@ const _t = [
           children: "すべて有効"
         }
       ),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ s.jsx(
         "button",
         {
           type: "button",
-          onClick: () => e({
+          onClick: () => n({
             showDebugPanel: !1,
             showMousePosition: !1,
             showPanelSizes: !1,
@@ -1413,1104 +2007,979 @@ const _t = [
       )
     ] })
   ] })
-] }) : /* @__PURE__ */ t.jsx("button", { type: "button", onClick: s, 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: "🛠️" }), ie = {
+] }) : /* @__PURE__ */ s.jsx("button", { type: "button", onClick: o, 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: "🛠️" }), fe = {
   prefix: "column",
   startIndex: 1,
   separator: "_"
-}, je = (r, e = ie) => {
-  const { prefix: n, startIndex: s, separator: o } = e, i = r + s;
-  return `${n}${o}${i}`;
-}, Qe = (r, e = ie) => Array.from({ length: r }, (n, s) => je(s, e)), Pe = (r, e = ie) => {
-  const { prefix: n, startIndex: s, separator: o } = e, i = `${n}${o}`;
-  if (!r.startsWith(i))
+}, We = (t, n = fe) => {
+  const { prefix: e, startIndex: o, separator: r } = n, a = t + o;
+  return `${e}${r}${a}`;
+}, tn = (t, n = fe) => Array.from({ length: t }, (e, o) => We(o, n)), Ie = (t, n = fe) => {
+  const { prefix: e, startIndex: o, separator: r } = n, a = `${e}${r}`;
+  if (!t.startsWith(a))
     return null;
-  const u = r.slice(i.length), c = parseInt(u, 10);
-  return Number.isNaN(c) || c < s ? null : c - s;
-}, tn = (r, e = ie) => Pe(r, e) !== null, nn = (r, e = ie) => {
-  const n = r.map((s) => Pe(s, e)).filter((s) => s !== null).sort((s, o) => s - o);
-  for (let s = 0; s < n.length; s++)
-    if (n[s] !== s)
-      return je(s, e);
-  return je(n.length, e);
-}, Lt = (r, e = ie) => r.sort((n, s) => {
-  const o = Pe(n, e) ?? -1, i = Pe(s, e) ?? -1;
-  return o - i;
-}), rn = (r, e = ie) => {
-  const n = {};
-  return r.forEach((s, o) => {
-    const i = je(o, e);
-    n[s] = i;
-  }), n;
-}, Wt = (r, e, n = ie) => {
-  const s = [];
-  Object.values(r).forEach((u) => {
-    s.push(...u);
+  const l = t.slice(a.length), u = parseInt(l, 10);
+  return Number.isNaN(u) || u < o ? null : u - o;
+}, Vr = (t, n = fe) => Ie(t, n) !== null, Zr = (t, n = fe) => {
+  const e = t.map((o) => Ie(o, n)).filter((o) => o !== null).sort((o, r) => o - r);
+  for (let o = 0; o < e.length; o++)
+    if (e[o] !== o)
+      return We(o, n);
+  return We(e.length, n);
+}, Mr = (t, n = fe) => t.sort((e, o) => {
+  const r = Ie(e, n) ?? -1, a = Ie(o, n) ?? -1;
+  return r - a;
+}), Gr = (t, n = fe) => {
+  const e = {};
+  return t.forEach((o, r) => {
+    const a = We(r, n);
+    e[o] = a;
+  }), e;
+}, Sr = (t, n, e = fe) => {
+  const o = [];
+  Object.values(t).forEach((l) => {
+    o.push(...l);
   });
-  const o = {}, i = Qe(e, n);
-  return i.forEach((u) => {
-    o[u] = [];
-  }), s.forEach((u, c) => {
-    const h = c % e, N = i[h];
-    o[N].push(u);
-  }), o;
-}, sn = ({ initialColumns: r, initialPanels: e, debug: n = {}, onLayoutChange: s }) => {
-  const [o, i] = te(() => {
-    const f = {};
-    for (const x of r)
-      f[x.id] = x.initialWidth || 400;
+  const r = {}, a = tn(n, e);
+  return a.forEach((l) => {
+    r[l] = [];
+  }), o.forEach((l, u) => {
+    const f = u % n, b = a[f];
+    r[b].push(l);
+  }), r;
+}, Kr = ({ initialColumns: t, initialPanels: n, debug: e = {}, onLayoutChange: o }) => {
+  const [r, a] = se(() => {
+    const g = {};
+    for (const v of t)
+      g[v.id] = v.initialWidth || 400;
     return {
-      columns: r,
-      columnWidths: f,
+      columns: t,
+      columnWidths: g,
       isResizing: !1,
       resizingColumn: null,
-      columnPanels: e,
+      columnPanels: n,
       showInsertPlaceholders: !1
     };
-  }), u = F(0), c = F(0);
-  K(() => {
-    s?.(o);
-  }, [o, s]);
-  const h = w(
-    (f, x) => {
-      E(n, 1, "カラム追加:", f.id, "at position:", x), i((C) => {
-        const W = [...C.columns], p = x ?? W.length;
-        W.splice(p, 0, f);
-        const g = {
-          ...C.columnWidths,
-          [f.id]: f.initialWidth || 400
-        }, m = {
-          ...C.columnPanels,
-          [f.id]: []
+  }), l = W(0), u = W(0);
+  ee(() => {
+    o?.(r);
+  }, [r, o]);
+  const f = D(
+    (g, v) => {
+      O(e, 1, "カラム追加:", g.id, "at position:", v), a((L) => {
+        const w = [...L.columns], m = v ?? w.length;
+        w.splice(m, 0, g);
+        const p = {
+          ...L.columnWidths,
+          [g.id]: g.initialWidth || 400
+        }, j = {
+          ...L.columnPanels,
+          [g.id]: []
         };
         return {
-          ...C,
-          columns: W,
-          columnWidths: g,
-          columnPanels: m
+          ...L,
+          columns: w,
+          columnWidths: p,
+          columnPanels: j
         };
       });
     },
-    [n]
-  ), N = w(
-    (f) => {
-      E(n, 1, "カラム削除:", f), i((x) => {
-        const C = x.columnPanels[f] || [], W = x.columns.filter((v) => v.id !== f);
-        if (W.length === 0)
-          return E(n, 1, "警告: 最後のカラムを削除しようとしています"), x;
-        const p = W[0].id, g = { ...x.columnPanels };
-        C.length > 0 && (g[p] = [...g[p], ...C]), delete g[f];
-        const m = { ...x.columnWidths };
-        return delete m[f], {
-          ...x,
-          columns: W,
-          columnWidths: m,
-          columnPanels: g
+    [e]
+  ), b = D(
+    (g) => {
+      O(e, 1, "カラム削除:", g), a((v) => {
+        const L = v.columnPanels[g] || [], w = v.columns.filter((_) => _.id !== g);
+        if (w.length === 0)
+          return O(e, 1, "警告: 最後のカラムを削除しようとしています"), v;
+        const m = w[0].id, p = { ...v.columnPanels };
+        L.length > 0 && (p[m] = [...p[m], ...L]), delete p[g];
+        const j = { ...v.columnWidths };
+        return delete j[g], {
+          ...v,
+          columns: w,
+          columnWidths: j,
+          columnPanels: p
         };
       });
     },
-    [n]
-  ), b = w(
-    (f, x) => {
-      E(n, 1, "カラム移動:", f, "->", x), i((C) => {
-        const W = [...C.columns], [p] = W.splice(f, 1);
-        return W.splice(x, 0, p), {
-          ...C,
-          columns: W
+    [e]
+  ), y = D(
+    (g, v) => {
+      O(e, 1, "カラム移動:", g, "->", v), a((L) => {
+        const w = [...L.columns], [m] = w.splice(g, 1);
+        return w.splice(v, 0, m), {
+          ...L,
+          columns: w
         };
       });
     },
-    [n]
-  ), M = w(
-    (f, x) => {
-      E(n, 2, "リサイズ開始:", f, "at X:", x), u.current = x, c.current = o.columnWidths[f] || 300, i((C) => ({
-        ...C,
+    [e]
+  ), A = D(
+    (g, v) => {
+      O(e, 2, "リサイズ開始:", g, "at X:", v), l.current = v, u.current = r.columnWidths[g] || 300, a((L) => ({
+        ...L,
         isResizing: !0,
-        resizingColumn: f
+        resizingColumn: g
       }));
     },
-    [n, o.columnWidths]
-  ), T = w(
-    (f) => {
-      const { resizingColumn: x, isResizing: C } = o;
-      if (!(C && x)) return;
-      const W = f - u.current, p = Math.max(100, Math.min(800, c.current + W));
-      E(n, 2, "リサイズ中:", x, "new width:", p), i((g) => ({
-        ...g,
+    [e, r.columnWidths]
+  ), z = D(
+    (g) => {
+      const { resizingColumn: v, isResizing: L } = r;
+      if (!(L && v)) return;
+      const w = g - l.current, m = Math.max(100, Math.min(800, u.current + w));
+      O(e, 2, "リサイズ中:", v, "new width:", m), a((p) => ({
+        ...p,
         columnWidths: {
-          ...g.columnWidths,
-          [x]: p
+          ...p.columnWidths,
+          [v]: m
         }
       }));
     },
-    [n, o]
-  ), y = w(() => {
-    E(n, 2, "リサイズ終了"), i((f) => ({
-      ...f,
+    [e, r]
+  ), E = D(() => {
+    O(e, 2, "リサイズ終了"), a((g) => ({
+      ...g,
       isResizing: !1,
       resizingColumn: null
     }));
-  }, [n]), l = w(
-    (f, x) => {
-      E(n, 2, "カラム幅設定:", f, x), i((C) => ({
-        ...C,
+  }, [e]), c = D(
+    (g, v) => {
+      O(e, 2, "カラム幅設定:", g, v), a((L) => ({
+        ...L,
         columnWidths: {
-          ...C.columnWidths,
-          [f]: Math.max(100, Math.min(800, x))
+          ...L.columnWidths,
+          [g]: Math.max(100, Math.min(800, v))
         }
       }));
     },
-    [n]
-  ), j = w(() => {
-    E(n, 1, "カラム幅リセット"), i((f) => {
-      const x = {};
-      for (const C of f.columns)
-        x[C.id] = C.initialWidth || 400;
+    [e]
+  ), P = D(() => {
+    O(e, 1, "カラム幅リセット"), a((g) => {
+      const v = {};
+      for (const L of g.columns)
+        v[L.id] = L.initialWidth || 400;
       return {
-        ...f,
-        columnWidths: x
+        ...g,
+        columnWidths: v
       };
     });
-  }, [n]), k = w(
-    (f, x, C, W) => {
-      E(n, 1, "パネル移動:", f, "from", x, "to", C, "at", W), i((p) => {
-        const g = { ...p.columnPanels };
-        if (x in g && (g[x] = g[x].filter((m) => m !== f)), C in g) {
-          const m = [...g[C]];
-          m.splice(W, 0, f), g[C] = m;
+  }, [e]), k = D(
+    (g, v, L, w) => {
+      O(e, 1, "パネル移動:", g, "from", v, "to", L, "at", w), a((m) => {
+        const p = { ...m.columnPanels };
+        if (v in p && (p[v] = p[v].filter((j) => j !== g)), L in p) {
+          const j = [...p[L]];
+          j.splice(w, 0, g), p[L] = j;
         }
         return {
-          ...p,
-          columnPanels: g
+          ...m,
+          columnPanels: p
         };
       });
     },
-    [n]
-  ), _ = w(
-    (f, x, C) => {
-      E(n, 1, "パネル追加:", f, "to column:", x), i((W) => {
-        const p = { ...W.columnPanels };
-        x in p || (p[x] = []);
-        const g = [...p[x]], m = C ?? g.length;
-        return g.splice(m, 0, f), p[x] = g, {
-          ...W,
-          columnPanels: p
+    [e]
+  ), S = D(
+    (g, v, L) => {
+      O(e, 1, "パネル追加:", g, "to column:", v), a((w) => {
+        const m = { ...w.columnPanels };
+        v in m || (m[v] = []);
+        const p = [...m[v]], j = L ?? p.length;
+        return p.splice(j, 0, g), m[v] = p, {
+          ...w,
+          columnPanels: m
         };
       });
     },
-    [n]
-  ), R = w(
-    (f) => {
-      E(n, 1, "パネル削除:", f), i((x) => {
-        const C = {};
-        for (const [W, p] of Object.entries(x.columnPanels))
-          C[W] = p.filter((g) => g !== f);
+    [e]
+  ), N = D(
+    (g) => {
+      O(e, 1, "パネル削除:", g), a((v) => {
+        const L = {};
+        for (const [w, m] of Object.entries(v.columnPanels))
+          L[w] = m.filter((p) => p !== g);
         return {
-          ...x,
-          columnPanels: C
+          ...v,
+          columnPanels: L
         };
       });
     },
-    [n]
-  ), z = w(
-    (f) => {
-      E(n, 1, "カラム数更新:", f), i((x) => {
-        const C = x.columns.length;
-        if (f === C) return x;
-        const W = Wt(x.columnPanels, f, ie), p = Qe(f, ie), g = x.isResizing && x.resizingColumn && !p.includes(x.resizingColumn);
-        g && E(n, 1, "リサイズ中のカラムが削除されるためリサイズを強制終了:", x.resizingColumn);
-        const m = p.map((O, H) => ({
-          id: O,
-          title: `カラム ${H + 1}`,
+    [e]
+  ), R = D(
+    (g) => {
+      O(e, 1, "カラム数更新:", g), a((v) => {
+        const L = v.columns.length;
+        if (g === L) return v;
+        const w = Sr(v.columnPanels, g, fe), m = tn(g, fe), p = v.isResizing && v.resizingColumn && !m.includes(v.resizingColumn);
+        p && O(e, 1, "リサイズ中のカラムが削除されるためリサイズを強制終了:", v.resizingColumn);
+        const j = m.map((V, oe) => ({
+          id: V,
+          title: `カラム ${oe + 1}`,
           minWidth: 350,
           maxWidth: 800,
           initialWidth: 400,
-          resizable: !(H === 1 && f === 3)
-        })), v = {};
-        if (Object.entries(x.columnWidths).some(([, O]) => O !== 400))
-          p.forEach((O) => {
-            const H = x.columnWidths[O];
-            H && H !== 400 ? v[O] = H : v[O] = 400;
+          resizable: !(oe === 1 && g === 3)
+        })), _ = {};
+        if (Object.entries(v.columnWidths).some(([, V]) => V !== 400))
+          m.forEach((V) => {
+            const oe = v.columnWidths[V];
+            oe && oe !== 400 ? _[V] = oe : _[V] = 400;
           });
         else {
-          const O = C > f ? Object.values(x.columnWidths).reduce((a, d) => a + d, 0) : f * 400, H = Math.max(O / f, 350);
-          p.forEach((a) => {
-            v[a] = H;
+          const V = L > g ? Object.values(v.columnWidths).reduce((h, x) => h + x, 0) : g * 400, oe = Math.max(V / g, 350);
+          m.forEach((h) => {
+            _[h] = oe;
           });
         }
         return {
-          ...x,
-          columns: m,
-          columnPanels: W,
-          columnWidths: v,
-          isResizing: g ? !1 : x.isResizing,
-          resizingColumn: g ? null : x.resizingColumn
+          ...v,
+          columns: j,
+          columnPanels: w,
+          columnWidths: _,
+          isResizing: p ? !1 : v.isResizing,
+          resizingColumn: p ? null : v.resizingColumn
         };
       });
     },
-    [n]
-  ), Z = w(() => {
-    E(n, 1, "カラム自動バランス調整"), i((f) => {
-      const x = [];
-      for (const p of Object.keys(f.columnPanels))
-        for (const g of f.columnPanels[p])
-          x.push(g);
-      const C = {};
-      for (const p of f.columns)
-        C[p.id] = [];
-      let W = 0;
-      for (const p of x) {
-        const g = f.columns[W % f.columns.length].id;
-        C[g].push(p), W += 1;
+    [e]
+  ), d = D(() => {
+    O(e, 1, "カラム自動バランス調整"), a((g) => {
+      const v = [];
+      for (const m of Object.keys(g.columnPanels))
+        for (const p of g.columnPanels[m])
+          v.push(p);
+      const L = {};
+      for (const m of g.columns)
+        L[m.id] = [];
+      let w = 0;
+      for (const m of v) {
+        const p = g.columns[w % g.columns.length].id;
+        L[p].push(m), w += 1;
       }
       return {
-        ...f,
-        columnPanels: C
+        ...g,
+        columnPanels: L
       };
     });
-  }, [n]), Y = w(
-    (f) => o.columns.find((x) => x.id === f),
-    [o.columns]
-  ), U = w(() => {
-    let f = 0;
-    for (const x of Object.values(o.columnWidths))
-      f += x;
-    return f;
-  }, [o.columnWidths]), $ = w((f) => document.querySelector(`[data-column-id="${f}"]`), []), L = w((f) => {
-    i((x) => ({
-      ...x,
-      showInsertPlaceholders: f
+  }, [e]), $ = D(
+    (g) => r.columns.find((v) => v.id === g),
+    [r.columns]
+  ), T = D(() => {
+    let g = 0;
+    for (const v of Object.values(r.columnWidths))
+      g += v;
+    return g;
+  }, [r.columnWidths]), Y = D((g) => document.querySelector(`[data-column-id="${g}"]`), []), G = D((g) => {
+    a((v) => ({
+      ...v,
+      showInsertPlaceholders: g
     }));
   }, []);
   return {
-    layoutState: o,
-    addColumn: h,
-    removeColumn: N,
-    moveColumn: b,
-    startResize: M,
-    handleResize: T,
-    endResize: y,
-    setColumnWidth: l,
-    resetColumnWidths: j,
+    layoutState: r,
+    addColumn: f,
+    removeColumn: b,
+    moveColumn: y,
+    startResize: A,
+    handleResize: z,
+    endResize: E,
+    setColumnWidth: c,
+    resetColumnWidths: P,
     movePanel: k,
-    addPanel: _,
-    removePanel: R,
-    updateColumnCount: z,
-    autoBalanceColumns: Z,
-    getColumnById: Y,
-    getTotalWidth: U,
-    getColumnElement: $,
-    setShowInsertPlaceholders: L
+    addPanel: S,
+    removePanel: N,
+    updateColumnCount: R,
+    autoBalanceColumns: d,
+    getColumnById: $,
+    getTotalWidth: T,
+    getColumnElement: Y,
+    setShowInsertPlaceholders: G
   };
-}, ke = {
-  triggerDistance: 80,
-  scrollSpeed: 5,
-  maxScrollSpeed: 20
-}, He = (r, e, n = ke, s) => {
-  const { triggerDistance: o, scrollSpeed: i, maxScrollSpeed: u } = n;
-  let c;
-  s ? c = s.getBoundingClientRect() : c = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-  const { left: h, top: N, right: b, bottom: M } = c;
-  let T = 0, y = 0;
-  if (r >= h && r <= b && e >= N && e <= M) {
-    if (r < h + o) {
-      const l = Math.max(0, (h + o - r) / o);
-      T = -Math.min(u, i + l * (u - i));
-    } else if (r > b - o) {
-      const l = Math.max(0, (r - (b - o)) / o);
-      T = Math.min(u, i + l * (u - i));
-    }
-    if (e < N + o) {
-      const l = Math.max(0, (N + o - e) / o);
-      y = -Math.min(u, i + l * (u - i));
-    } else if (e > M - o) {
-      const l = Math.max(0, (e - (M - o)) / o);
-      y = Math.min(u, i + l * (u - i));
-    }
-  }
-  return { x: T, y };
-}, zt = (r, e) => {
-  (r.x !== 0 || r.y !== 0) && (e ? e.scrollBy(r.x, r.y) : window.scrollBy(r.x, r.y));
-};
-class Ke {
-  constructor(e = ke, n) {
-    this.intervalId = null, this.isActive = !1, this.config = e, this.scrollElement = n;
-  }
-  setScrollElement(e) {
-    this.scrollElement = e;
-  }
-  start(e, n) {
-    this.isActive || (this.isActive = !0, this.intervalId = window.setInterval(() => {
-      const s = He(e, n, this.config, this.scrollElement);
-      zt(s, this.scrollElement);
-    }, 16));
-  }
-  update(e, n) {
-    const s = He(e, n, this.config, this.scrollElement);
-    (s.x !== 0 || s.y !== 0) && !this.isActive ? this.start(e, n) : s.x === 0 && s.y === 0 && this.isActive && this.stop();
-  }
-  stop() {
-    this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null), this.isActive = !1;
-  }
-  isScrolling() {
-    return this.isActive;
-  }
-  updateConfig(e) {
-    this.config = e;
-  }
-}
-const Yt = ({
-  debugConfig: r,
-  dragState: e,
-  customDrag: n,
-  clickState: s,
-  dragModes: o,
-  isMouseDown: i,
-  dragOverPosition: u,
-  setCustomDrag: c,
-  setDragState: h,
-  setDragOverPosition: N,
-  setOriginalPanelPosition: b,
-  setClickState: M,
-  setIsMouseDown: T,
-  findPanelPosition: y,
-  performPanelMove: l,
-  showMousePosition: j,
+}, Ar = ({
+  debugConfig: t,
+  dragState: n,
+  customDrag: e,
+  clickState: o,
+  dragModes: r,
+  isMouseDown: a,
+  dragOverPosition: l,
+  setCustomDrag: u,
+  setDragState: f,
+  setDragOverPosition: b,
+  setOriginalPanelPosition: y,
+  setClickState: A,
+  setIsMouseDown: z,
+  findPanelPosition: E,
+  performPanelMove: c,
+  showMousePosition: P,
   updateMousePosition: k,
-  recordMouseDown: _,
-  recordClickPosition: R,
-  isVirtualClick: z,
-  calculateMoveDistance: Z,
-  clearMouseTracking: Y,
-  resetDragState: U,
-  resetClickState: $,
-  createDragImage: L,
-  updateDragImagePosition: f,
-  removeDragImage: x,
-  handlePlaceholderDragEnter: C,
-  handlePlaceholderDragLeave: W
+  recordMouseDown: S,
+  recordClickPosition: N,
+  isVirtualClick: R,
+  calculateMoveDistance: d,
+  clearMouseTracking: $,
+  resetDragState: T,
+  resetClickState: Y,
+  createDragImage: G,
+  updateDragImagePosition: g,
+  removeDragImage: v,
+  handlePlaceholderDragEnter: L,
+  handlePlaceholderDragLeave: w
 }) => {
-  const p = F(r);
-  p.current = r;
-  const g = F(null), m = F(null), v = F(0), D = F(new Ke(ke));
-  K(() => {
-    const d = document.querySelector("main[data-aqdd-scroll-root]");
-    d && D.current.setScrollElement(d);
+  const m = W(t);
+  m.current = t;
+  const p = W(null), j = W(null), _ = W(0), I = W(new rt(Se));
+  ee(() => {
+    const x = document.querySelector(Vt);
+    x && I.current.setScrollElement(x);
   }, []);
-  const A = F(u);
-  K(() => {
-    A.current = u, E(p.current, 2, "dragOverPositionRef更新:", u);
-  }, [u]);
-  const O = w(
-    (d) => {
-      if (n.isActive || s.isClicked) {
-        d.preventDefault();
-        const S = window.getSelection();
-        S && S.rangeCount > 0 && S.removeAllRanges();
+  const re = W(l);
+  ee(() => {
+    re.current = l, O(m.current, 2, "dragOverPositionRef更新:", l);
+  }, [l]);
+  const V = D(
+    (x) => {
+      if (e.isActive || o.isClicked) {
+        x.preventDefault();
+        const M = window.getSelection();
+        M && M.rangeCount > 0 && M.removeAllRanges();
       }
-      if (n.isActive) {
-        k(d.clientX, d.clientY), f(d.clientX, d.clientY), D.current.update(d.clientX, d.clientY);
-        const S = document.elementFromPoint(d.clientX, d.clientY), X = S?.closest("[data-drop-zone]");
-        if (X) {
+      if (e.isActive) {
+        k(x.clientX, x.clientY), g(x.clientX, x.clientY), I.current.update(x.clientX, x.clientY);
+        const M = document.elementFromPoint(x.clientX, x.clientY), F = M?.closest("[data-drop-zone]");
+        if (F) {
           document.body.classList.add("droppable");
-          const G = X.getAttribute("data-column-index"), Q = G ? parseInt(G, 10) : null;
-          Q !== null && Q !== e.dragOverColumn && h((re) => ({ ...re, dragOverColumn: Q }));
-          const V = S?.closest("[data-placeholder-index]");
-          if (V) {
-            const re = V.getAttribute("data-placeholder-index"), ce = V.getAttribute("data-placeholder-column");
-            if (re && ce) {
-              const se = parseInt(re, 10), ge = parseInt(ce, 10);
-              C(ge, se);
+          const Z = F.getAttribute("data-column-index"), ae = Z ? parseInt(Z, 10) : null;
+          ae !== null && ae !== n.dragOverColumn && f((H) => ({ ...H, dragOverColumn: ae }));
+          const X = M?.closest("[data-placeholder-index]");
+          if (X) {
+            const H = X.getAttribute("data-placeholder-index"), ve = X.getAttribute("data-placeholder-column");
+            if (H && ve) {
+              const ue = parseInt(H, 10), pe = parseInt(ve, 10);
+              L(pe, ue);
             }
           } else
-            W();
+            w();
         } else
-          document.body.classList.remove("droppable"), N(null), h((G) => ({ ...G, dragOverColumn: null }));
-      } else if (i && s.isClicked && s.panelId) {
-        if (o[s.panelId] !== "custom" || Z(d.clientX, d.clientY) < 10) return;
-        E(p.current, 1, "🚀 カスタムドラッグ開始 -", s.panelId);
-        const X = document.querySelector(`[data-panel-id="${s.panelId}"]`);
-        if (X && m.current) {
-          const G = X.getBoundingClientRect(), Q = m.current.x - G.left, V = m.current.y - G.top;
-          L(s.panelId, Q, V), document.body.classList.add("custom-dragging"), c({
+          document.body.classList.remove("droppable"), b(null), f((Z) => ({ ...Z, dragOverColumn: null }));
+      } else if (a && o.isClicked && o.panelId) {
+        if (r[o.panelId] !== "custom" || d(x.clientX, x.clientY) < 10) return;
+        O(m.current, 1, "🚀 カスタムドラッグ開始 -", o.panelId);
+        const F = document.querySelector(`[data-panel-id="${o.panelId}"]`);
+        if (F && j.current) {
+          const Z = F.getBoundingClientRect(), ae = j.current.x - Z.left, X = j.current.y - Z.top;
+          G(o.panelId, ae, X), document.body.classList.add("custom-dragging"), u({
             isActive: !0,
-            panelId: s.panelId,
-            startX: Q,
-            startY: V
+            panelId: o.panelId,
+            startX: ae,
+            startY: X
           });
         }
-        h({ isDragging: !0, draggedPanel: s.panelId, dragOverColumn: null }), b(y(s.panelId)), j(d.clientX, d.clientY), M({ isClicked: !1, panelId: null }), T(!1), Y(), m.current = null, g.current && (clearTimeout(g.current), g.current = null);
+        f({ isDragging: !0, draggedPanel: o.panelId, dragOverColumn: null }), y(E(o.panelId)), P(x.clientX, x.clientY), A({ isClicked: !1, panelId: null }), z(!1), $(), j.current = null, p.current && (clearTimeout(p.current), p.current = null);
       }
     },
     [
-      n.isActive,
-      s,
-      e.dragOverColumn,
+      e.isActive,
       o,
-      i,
+      n.dragOverColumn,
+      r,
+      a,
       k,
-      h,
-      N,
-      Z,
-      y,
-      c,
+      f,
       b,
-      j,
-      M,
-      T,
-      Y,
+      d,
+      E,
+      u,
+      y,
+      P,
+      A,
+      z,
+      $,
+      G,
+      g,
       L,
-      f,
-      C,
-      W
+      w
     ]
-  ), H = w(
-    (d) => {
-      if (E(p.current, 1, "🐭 カスタムドラッグハンドラー - グローバルマウスアップ", {
-        isActive: n.isActive,
-        panelId: n.panelId,
-        dragMode: n.panelId ? o[n.panelId] : "unknown"
-      }), n.isActive) {
-        D.current.stop();
-        const S = A.current;
-        if (S) {
-          const G = document.elementFromPoint(d.clientX, d.clientY)?.closest("[data-drop-zone]");
-          if (G) {
-            const Q = G.getAttribute("data-column-key");
-            Q && o[n.panelId] === "custom" ? (E(p.current, 1, "🔄 カスタムドラッグパネル移動実行:", n.panelId, "→", Q), l(n.panelId, Q, S.insertIndex)) : E(p.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", n.panelId, "モード:", o[n.panelId]);
+  ), oe = D(
+    (x) => {
+      if (O(m.current, 1, "🐭 カスタムドラッグハンドラー - グローバルマウスアップ", {
+        isActive: e.isActive,
+        panelId: e.panelId,
+        dragMode: e.panelId ? r[e.panelId] : "unknown"
+      }), e.isActive) {
+        I.current.stop();
+        const M = re.current;
+        if (M) {
+          const Z = document.elementFromPoint(x.clientX, x.clientY)?.closest("[data-drop-zone]");
+          if (Z) {
+            const ae = Z.getAttribute("data-column-key");
+            ae && r[e.panelId] === "custom" ? (O(m.current, 1, "🔄 カスタムドラッグパネル移動実行:", e.panelId, "→", ae), c(e.panelId, ae, M.insertIndex)) : O(m.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", e.panelId, "モード:", r[e.panelId]);
           }
         }
-        x(), document.body.classList.remove("custom-dragging", "droppable"), U(), v.current = 0;
-      } else if (z(d.clientX, d.clientY)) {
-        const X = document.elementFromPoint(d.clientX, d.clientY)?.closest("[data-panel-id]"), G = X?.getAttribute("data-panel-id") ?? null;
-        if (!(X && G) || o[G] !== "custom") {
-          g.current && (clearTimeout(g.current), g.current = null), $(), m.current = null, v.current = 0;
+        v(), document.body.classList.remove("custom-dragging", "droppable"), T(), _.current = 0;
+      } else if (R(x.clientX, x.clientY)) {
+        const F = document.elementFromPoint(x.clientX, x.clientY)?.closest("[data-panel-id]"), Z = F?.getAttribute("data-panel-id") ?? null;
+        if (!(F && Z) || r[Z] !== "custom") {
+          p.current && (clearTimeout(p.current), p.current = null), Y(), j.current = null, _.current = 0;
           return;
         }
-        v.current += 1, s.isClicked === !1 && v.current === 1 ? (E(p.current, 1, "🖱️ 仮想クリック検出 - ドラッグ待機状態へ:", G), M({ isClicked: !0, panelId: G }), g.current = window.setTimeout(() => {
-          E(p.current, 1, "⏳ クリック待機状態を自動解除:", G), $(), m.current = null, v.current = 0;
-        }, 2e3)) : (E(p.current, 1, "🚫 クリック待機状態を解除 - 仮想クリック検出停止:", G), g.current && (clearTimeout(g.current), g.current = null), $(), m.current = null, v.current = 0, g.current = window.setTimeout(() => {
-          E(p.current, 1, "⏳ 仮想クリック検出再開:", G);
+        _.current += 1, o.isClicked === !1 && _.current === 1 ? (O(m.current, 1, "🖱️ 仮想クリック検出 - ドラッグ待機状態へ:", Z), A({ isClicked: !0, panelId: Z }), p.current = window.setTimeout(() => {
+          O(m.current, 1, "⏳ クリック待機状態を自動解除:", Z), Y(), j.current = null, _.current = 0;
+        }, 2e3)) : (O(m.current, 1, "🚫 クリック待機状態を解除 - 仮想クリック検出停止:", Z), p.current && (clearTimeout(p.current), p.current = null), Y(), j.current = null, _.current = 0, p.current = window.setTimeout(() => {
+          O(m.current, 1, "⏳ 仮想クリック検出再開:", Z);
         }, 2e3));
-      } else s.isClicked && ($(), m.current = null, v.current = 0);
-      i && T(!1);
+      } else o.isClicked && (Y(), j.current = null, _.current = 0);
+      a && z(!1);
     },
-    [n.isActive, n.panelId, s, o, i, l, U, $, z, M, T, x]
-  ), a = w(
-    (d, S) => {
-      if (o[S] !== "custom") {
-        E(p.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", S);
+    [e.isActive, e.panelId, o, r, a, c, T, Y, R, A, z, v]
+  ), h = D(
+    (x, M) => {
+      if (r[M] !== "custom") {
+        O(m.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", M);
         return;
       }
-      _(d.clientX, d.clientY), s.isClicked && s.panelId === S && (T(!0), g.current !== null && (clearTimeout(g.current), g.current = null), R(d.clientX, d.clientY), m.current = { x: d.clientX, y: d.clientY });
+      S(x.clientX, x.clientY), o.isClicked && o.panelId === M && (z(!0), p.current !== null && (clearTimeout(p.current), p.current = null), N(x.clientX, x.clientY), j.current = { x: x.clientX, y: x.clientY });
     },
-    [s, o, _, T, R]
+    [o, r, S, z, N]
   );
-  return K(() => () => {
-    g.current !== null && clearTimeout(g.current), D.current.stop();
+  return ee(() => () => {
+    p.current !== null && clearTimeout(p.current), I.current.stop();
   }, []), {
-    handleGlobalMouseMove: O,
-    handleGlobalMouseUp: H,
-    handleMouseDown: a
+    handleGlobalMouseMove: V,
+    handleGlobalMouseUp: oe,
+    handleMouseDown: h
   };
-}, Ft = () => {
-  const [r, e] = te({
+}, $r = () => {
+  const [t, n] = se({
     isDragging: !1,
     draggedPanel: null,
     dragOverColumn: null
-  }), [n, s] = te(null), [o, i] = te(null), [u, c] = te({
+  }), [e, o] = se(null), [r, a] = se(null), [l, u] = se({
     isActive: !1,
     panelId: "",
     startX: 0,
     startY: 0
-  }), [h, N] = te({
+  }), [f, b] = se({
     isClicked: !1,
     panelId: null
-  }), [b, M] = te({
-    isTouchDragging: !1,
-    startX: 0,
-    startY: 0,
-    currentX: 0,
-    currentY: 0,
-    draggedElement: null
-  }), [T, y] = te(!1), l = w(() => {
-    c({ isActive: !1, panelId: "", startX: 0, startY: 0 }), e({ isDragging: !1, draggedPanel: null, dragOverColumn: null }), s(null), i(null);
-  }, []), j = w(() => {
-    N({ isClicked: !1, panelId: null }), y(!1);
-  }, []), k = w(($) => {
-    e($);
-  }, []), _ = w(($) => {
-    s($);
-  }, []), R = w(($) => {
-    i($);
-  }, []), z = w(($) => {
-    c($);
-  }, []), Z = w(($) => {
-    N($);
-  }, []), Y = w(($) => {
-    M($);
-  }, []), U = w(($) => {
-    y($);
+  }), [y, A] = se(!1), z = D(() => {
+    u({ isActive: !1, panelId: "", startX: 0, startY: 0 }), n({ isDragging: !1, draggedPanel: null, dragOverColumn: null }), o(null), a(null);
+  }, []), E = D(() => {
+    b({ isClicked: !1, panelId: null }), A(!1);
+  }, []), c = D((d) => {
+    n(d);
+  }, []), P = D((d) => {
+    o(d);
+  }, []), k = D((d) => {
+    a(d);
+  }, []), S = D((d) => {
+    u(d);
+  }, []), N = D((d) => {
+    b(d);
+  }, []), R = D((d) => {
+    A(d);
   }, []);
   return {
     // States / 状態
-    dragState: r,
-    dragOverPosition: n,
-    originalPanelPosition: o,
-    customDrag: u,
-    clickState: h,
-    touchDragState: b,
-    isMouseDown: T,
+    dragState: t,
+    dragOverPosition: e,
+    originalPanelPosition: r,
+    customDrag: l,
+    clickState: f,
+    isMouseDown: y,
     // Stabilized Setters / 安定化されたセッター
-    setDragState: k,
-    setDragOverPosition: _,
-    setOriginalPanelPosition: R,
-    setCustomDrag: z,
-    setClickState: Z,
-    setTouchDragState: Y,
-    setIsMouseDown: U,
+    setDragState: c,
+    setDragOverPosition: P,
+    setOriginalPanelPosition: k,
+    setCustomDrag: S,
+    setClickState: N,
+    setIsMouseDown: R,
     // Utility Functions / ユーティリティ関数
-    resetDragState: l,
-    resetClickState: j
+    resetDragState: z,
+    resetClickState: E
   };
-}, Xt = () => {
-  const [r, e] = te({
+}, Tr = () => {
+  const [t, n] = se({
     x: 0,
     y: 0,
     isVisible: !1
-  }), n = F(null), s = F(0), o = F(null), i = w((y, l) => {
-    e({ x: y, y: l, isVisible: !0 });
-  }, []), u = w(() => {
-    e((y) => ({ ...y, isVisible: !1 }));
-  }, []), c = w((y, l) => {
-    e((j) => j.x === y && j.y === l ? j : {
-      x: y,
-      y: l,
-      isVisible: j.isVisible
+  }), e = W(null), o = W(0), r = W(null), a = D((E, c) => {
+    n({ x: E, y: c, isVisible: !0 });
+  }, []), l = D(() => {
+    n((E) => ({ ...E, isVisible: !1 }));
+  }, []), u = D((E, c) => {
+    n((P) => P.x === E && P.y === c ? P : {
+      x: E,
+      y: c,
+      isVisible: P.isVisible
     });
-  }, []), h = w((y, l) => {
-    s.current = Date.now(), o.current = { x: y, y: l };
-  }, []), N = w((y, l) => {
-    n.current = { x: y, y: l };
-  }, []), b = w((y, l, j = 500, k = 5) => Date.now() - (s.current || 0) >= j || !o.current ? !1 : Math.sqrt((y - o.current.x) ** 2 + (l - o.current.y) ** 2) < k, []), M = w((y, l) => {
-    if (!n.current)
+  }, []), f = D((E, c) => {
+    o.current = Date.now(), r.current = { x: E, y: c };
+  }, []), b = D((E, c) => {
+    e.current = { x: E, y: c };
+  }, []), y = D((E, c, P = 500, k = 5) => Date.now() - (o.current || 0) >= P || !r.current ? !1 : Math.sqrt((E - r.current.x) ** 2 + (c - r.current.y) ** 2) < k, []), A = D((E, c) => {
+    if (!e.current)
       return 0;
-    const j = Math.abs(y - n.current.x), k = Math.abs(l - n.current.y);
-    return Math.sqrt(j * j + k * k);
-  }, []), T = w(() => {
-    n.current = null, s.current = 0, o.current = null;
+    const P = Math.abs(E - e.current.x), k = Math.abs(c - e.current.y);
+    return Math.sqrt(P * P + k * k);
+  }, []), z = D(() => {
+    e.current = null, o.current = 0, r.current = null;
   }, []);
   return {
-    mousePosition: r,
-    lastClickPosition: n.current,
-    mouseDownTime: s.current,
-    mouseDownPosition: o.current,
-    showMousePosition: i,
-    hideMousePosition: u,
-    updateMousePosition: c,
-    recordMouseDown: h,
-    recordClickPosition: N,
-    isVirtualClick: b,
-    calculateMoveDistance: M,
-    clearMouseTracking: T
+    mousePosition: t,
+    lastClickPosition: e.current,
+    mouseDownTime: o.current,
+    mouseDownPosition: r.current,
+    showMousePosition: a,
+    hideMousePosition: l,
+    updateMousePosition: u,
+    recordMouseDown: f,
+    recordClickPosition: b,
+    isVirtualClick: y,
+    calculateMoveDistance: A,
+    clearMouseTracking: z
   };
-}, Ht = ({
-  debugConfig: r,
-  dragState: e,
-  customDrag: n,
-  dragModes: s,
-  columnPanels: o,
-  dragOverPosition: i,
-  originalPanelPosition: u,
-  setDragState: c,
-  setDragOverPosition: h,
-  setOriginalPanelPosition: N,
-  performPanelMove: b,
-  showMousePosition: M,
-  updateMousePosition: T,
-  resetDragState: y,
-  handlePlaceholderDragEnter: l,
-  handlePlaceholderDragLeave: j,
+}, Lr = ({
+  debugConfig: t,
+  dragState: n,
+  customDrag: e,
+  dragModes: o,
+  columnPanels: r,
+  dragOverPosition: a,
+  originalPanelPosition: l,
+  setDragState: u,
+  setDragOverPosition: f,
+  setOriginalPanelPosition: b,
+  performPanelMove: y,
+  showMousePosition: A,
+  updateMousePosition: z,
+  resetDragState: E,
+  handlePlaceholderDragEnter: c,
+  handlePlaceholderDragLeave: P,
   scale: k = 1
 }) => {
-  const _ = F(r);
-  _.current = r;
-  const R = F(o);
-  R.current = o;
-  const z = F(e);
-  z.current = e;
-  const Z = F(i);
-  Z.current = i;
-  const Y = F(u);
-  Y.current = u;
-  const U = F(k);
-  U.current = k;
-  const $ = F(new Ke(ke));
-  K(() => {
-    const p = document.querySelector("main[data-aqdd-scroll-root]");
-    p && $.current.setScrollElement(p);
+  const S = W(t);
+  S.current = t;
+  const N = W(r);
+  N.current = r;
+  const R = W(n);
+  R.current = n;
+  const d = W(a);
+  d.current = a;
+  const $ = W(l);
+  $.current = l;
+  const T = W(k);
+  T.current = k;
+  const Y = W(new rt(Se));
+  ee(() => {
+    const m = document.querySelector(Vt);
+    m && Y.current.setScrollElement(m);
   }, []);
-  const L = w(
-    (p, g) => {
-      if (n.isActive) {
-        E(_.current, 2, "カスタムドラッグアクティブ中 - 通常ドラッグを無効化:", g), p.preventDefault();
+  const G = D(
+    (m, p) => {
+      if (e.isActive) {
+        O(S.current, 2, "カスタムドラッグアクティブ中 - 通常ドラッグを無効化:", p), m.preventDefault();
         return;
       }
-      if (s[g] === "custom") {
-        E(_.current, 2, "カスタムドラッグモード - 通常ドラッグを無効化:", g), p.preventDefault();
+      if (o[p] === "custom") {
+        O(S.current, 2, "カスタムドラッグモード - 通常ドラッグを無効化:", p), m.preventDefault();
         return;
       }
-      E(_.current, 1, "ドラッグ開始:", g);
-      const m = Object.keys(R.current);
-      let v = null;
-      for (let D = 0; D < m.length; D++) {
-        const A = m[D], O = R.current[A].indexOf(g);
-        if (O !== -1) {
-          v = { columnIndex: D, panelIndex: O };
+      O(S.current, 1, "ドラッグ開始:", p);
+      const j = Object.keys(N.current);
+      let _ = null;
+      for (let I = 0; I < j.length; I++) {
+        const re = j[I], V = N.current[re].indexOf(p);
+        if (V !== -1) {
+          _ = { columnIndex: I, panelIndex: V };
           break;
         }
       }
-      if (N(v), p.dataTransfer) {
-        p.dataTransfer.setData("text/plain", g), p.dataTransfer.effectAllowed = "move";
-        const D = U.current;
-        if (D < 1) {
-          const A = p.currentTarget.closest("[data-panel-id]") ?? p.currentTarget, O = A.getBoundingClientRect(), H = A.offsetWidth, a = A.offsetHeight, d = A.cloneNode(!0);
-          d.removeAttribute("data-panel-id"), d.removeAttribute("id"), d.style.margin = "0", d.style.width = `${H}px`, d.style.height = `${a}px`, d.style.transform = `scale(${D})`, d.style.transformOrigin = "top left";
-          const S = document.createElement("div");
-          S.style.position = "fixed", S.style.top = "0", S.style.left = "-10000px", S.style.width = `${H * D}px`, S.style.height = `${a * D}px`, S.style.overflow = "hidden", S.style.opacity = "0.8", S.style.pointerEvents = "none", S.appendChild(d), document.body.appendChild(S), p.dataTransfer.setDragImage(S, p.clientX - O.left, p.clientY - O.top), requestAnimationFrame(() => S.remove());
+      if (b(_), m.dataTransfer) {
+        m.dataTransfer.setData("text/plain", p), m.dataTransfer.effectAllowed = "move";
+        const I = T.current;
+        if (I < 1) {
+          const re = m.currentTarget.closest("[data-panel-id]") ?? m.currentTarget, V = re.getBoundingClientRect(), oe = re.offsetWidth, h = re.offsetHeight, x = re.cloneNode(!0);
+          x.removeAttribute("data-panel-id"), x.removeAttribute("id"), Zt(re, x), x.style.margin = "0", x.style.width = `${oe}px`, x.style.height = `${h}px`, x.style.transform = `scale(${I})`, x.style.transformOrigin = "top left";
+          const M = document.createElement("div");
+          M.style.position = "fixed", M.style.top = "0", M.style.left = "-10000px", M.style.width = `${oe * I}px`, M.style.height = `${h * I}px`, M.style.overflow = "hidden", M.style.opacity = "0.8", M.style.pointerEvents = "none", M.appendChild(x), document.body.appendChild(M), m.dataTransfer.setDragImage(M, m.clientX - V.left, m.clientY - V.top), requestAnimationFrame(() => M.remove());
         }
       }
-      M(p.clientX, p.clientY), requestAnimationFrame(() => {
-        c({
+      A(m.clientX, m.clientY), requestAnimationFrame(() => {
+        u({
           isDragging: !0,
-          draggedPanel: g,
+          draggedPanel: p,
           dragOverColumn: null
         });
       });
     },
-    [s, n.isActive, N, M, c]
-  ), f = w(() => {
-    E(_.current, 1, "ドラッグ終了"), $.current.stop(), y();
-  }, [y]), x = w(
-    (p, g) => {
-      if (p.preventDefault(), p.dataTransfer.dropEffect = "move", !z.current.isDragging) return;
-      T(p.clientX, p.clientY), g !== z.current.dragOverColumn && c((D) => ({ ...D, dragOverColumn: g }));
-      const m = document.elementFromPoint(p.clientX, p.clientY), v = m?.closest("[data-placeholder-index]");
-      if (v) {
-        const D = v.getAttribute("data-placeholder-index"), A = v.getAttribute("data-placeholder-column");
-        if (D && A) {
-          const O = parseInt(D, 10), H = parseInt(A, 10);
-          l(H, O);
+    [o, e.isActive, b, A, u]
+  ), g = D(() => {
+    O(S.current, 1, "ドラッグ終了"), Y.current.stop(), E();
+  }, [E]), v = D(
+    (m, p) => {
+      if (m.preventDefault(), m.dataTransfer.dropEffect = "move", !R.current.isDragging) return;
+      z(m.clientX, m.clientY), p !== R.current.dragOverColumn && u((I) => ({ ...I, dragOverColumn: p }));
+      const j = document.elementFromPoint(m.clientX, m.clientY), _ = j?.closest("[data-placeholder-index]");
+      if (_) {
+        const I = _.getAttribute("data-placeholder-index"), re = _.getAttribute("data-placeholder-column");
+        if (I && re) {
+          const V = parseInt(I, 10), oe = parseInt(re, 10);
+          c(oe, V);
         }
       } else
-        m?.closest("[data-drop-zone]") || j();
+        j?.closest("[data-drop-zone]") || P();
     },
-    [T, c, l, j]
-  ), C = w(
-    (p, g) => {
-      p.preventDefault();
-      const m = p.dataTransfer.getData("text/plain"), v = Z.current;
-      m && v && (E(_.current, 1, "🎯 ドロップ完了:", {
-        draggedPanel: m,
-        targetColumn: g,
-        insertPosition: `カラム${v.columnIndex} - 位置${v.insertIndex}`
-      }), b(m, g, v.insertIndex), h(null), f());
+    [z, u, c, P]
+  ), L = D(
+    (m, p) => {
+      m.preventDefault();
+      const j = m.dataTransfer.getData("text/plain"), _ = d.current;
+      j && _ && (O(S.current, 1, "🎯 ドロップ完了:", {
+        draggedPanel: j,
+        targetColumn: p,
+        insertPosition: `カラム${_.columnIndex} - 位置${_.insertIndex}`
+      }), y(j, p, _.insertIndex), f(null), g());
     },
-    [b, h, f]
-  ), W = w(
-    (p) => {
-      const g = p.currentTarget, m = p.relatedTarget;
-      m && g.contains(m) || (h(null), c((v) => ({ ...v, dragOverColumn: null })));
+    [y, f, g]
+  ), w = D(
+    (m) => {
+      const p = m.currentTarget, j = m.relatedTarget;
+      j && p.contains(j) || (f(null), u((_) => ({ ..._, dragOverColumn: null })));
     },
-    [h, c]
+    [f, u]
   );
-  return K(() => {
-    const p = (g) => {
-      z.current.isDragging && (T(g.clientX, g.clientY), $.current.update(g.clientX, g.clientY));
+  return ee(() => {
+    const m = (p) => {
+      R.current.isDragging && (z(p.clientX, p.clientY), Y.current.update(p.clientX, p.clientY));
     };
-    if (e.isDragging)
-      return document.addEventListener("dragover", p), () => {
-        document.removeEventListener("dragover", p), $.current.stop();
+    if (n.isDragging)
+      return document.addEventListener("dragover", m), () => {
+        document.removeEventListener("dragover", m), Y.current.stop();
       };
-  }, [e.isDragging, T]), K(() => () => {
-    $.current.stop();
+  }, [n.isDragging, z]), ee(() => () => {
+    Y.current.stop();
   }, []), {
-    handleDragStart: L,
-    handleDragEnd: f,
-    handleDragOverWithInsert: x,
-    handleDropWithInsert: C,
-    handleColumnDragLeave: W
+    handleDragStart: G,
+    handleDragEnd: g,
+    handleDragOverWithInsert: v,
+    handleDropWithInsert: L,
+    handleColumnDragLeave: w
   };
-}, qt = (r, e = 1) => {
-  const [n, s] = te(r), [o, i] = te({}), u = F({}), c = F(null), h = F({ x: 0, y: 0 }), N = F(e);
-  N.current = e;
-  const b = w((R) => document.querySelector(`[data-panel-id="${R}"]`), []), M = w(
-    (R, z) => {
-      const Z = z.getBoundingClientRect(), Y = window.getComputedStyle(z), U = {
-        width: Math.round(Z.width),
-        height: Math.round(Z.height),
-        x: Math.round(Z.left),
-        y: Math.round(Z.top),
-        minHeight: Y.minHeight || "auto",
-        maxHeight: Y.maxHeight || "none"
-      }, $ = u.current[R];
-      (!$ || Object.keys(U).some((L) => $[L] !== U[L])) && (u.current[R] = U, i((L) => ({
-        ...L,
-        [R]: U
+}, _r = (t, n = 1) => {
+  const [e, o] = se(t), [r, a] = se({}), l = W({}), u = W(null), f = W({ x: 0, y: 0 }), b = W(n);
+  b.current = n;
+  const y = D((N) => document.querySelector(`[data-panel-id="${N}"]`), []), A = D(
+    (N, R) => {
+      const d = R.getBoundingClientRect(), $ = window.getComputedStyle(R), T = {
+        width: Math.round(d.width),
+        height: Math.round(d.height),
+        x: Math.round(d.left),
+        y: Math.round(d.top),
+        minHeight: $.minHeight || "auto",
+        maxHeight: $.maxHeight || "none"
+      }, Y = l.current[N];
+      (!Y || Object.keys(T).some((G) => Y[G] !== T[G])) && (l.current[N] = T, a((G) => ({
+        ...G,
+        [N]: T
       })));
     },
     []
     // setPanelSizes は React の state セッターなので依存配列に含める必要はありません
-  ), T = w(
-    (R) => {
-      const z = b(R);
-      z && M(R, z);
+  ), z = D(
+    (N) => {
+      const R = y(N);
+      R && A(N, R);
     },
-    [b, M]
-  ), y = w(
-    (R, z) => {
-      z && requestAnimationFrame(() => M(R, z));
+    [y, A]
+  ), E = D(
+    (N, R) => {
+      R && requestAnimationFrame(() => A(N, R));
     },
-    [M]
-  ), l = w(
-    (R, z, Z) => {
-      const Y = b(R);
-      if (!Y || c.current) return;
-      const U = N.current, $ = Y.getBoundingClientRect(), L = Y.cloneNode(!0);
-      L.removeAttribute("data-panel-id"), L.style.position = "fixed", L.style.top = "0px", L.style.left = "0px", L.style.width = `${Y.offsetWidth}px`, L.style.height = `${Y.offsetHeight}px`, L.style.pointerEvents = "none", L.style.zIndex = "1000", L.style.opacity = "0.5", L.style.margin = "0", L.style.transition = "none", L.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)", L.style.transformOrigin = "top left", L.style.transform = `translate(${$.left}px, ${$.top}px) scale(${U})`, L.id = `drag-image-${R}`, document.body.appendChild(L), c.current = L, h.current = { x: z, y: Z };
+    [A]
+  ), c = D(
+    (N, R, d) => {
+      const $ = y(N);
+      !$ || u.current || (u.current = Gt($, N, b.current), f.current = { x: R, y: d });
     },
-    [b]
-  ), j = w((R, z) => {
-    if (c.current) {
-      const Z = R - h.current.x, Y = z - h.current.y;
-      c.current.style.transform = `translate(${Z}px, ${Y}px) scale(${N.current * 1.05})`;
-    }
-  }, []), k = w(() => {
-    c.current && (c.current.remove(), c.current = null);
-  }, []), _ = w((R) => {
-    s((z) => ({
-      ...z,
-      [R]: !z[R]
+    [y]
+  ), P = D((N, R) => {
+    u.current && Kt(u.current, N, R, f.current, b.current);
+  }, []), k = D(() => {
+    u.current && (u.current.remove(), u.current = null);
+  }, []), S = D((N) => {
+    o((R) => ({
+      ...R,
+      [N]: !R[N]
     }));
   }, []);
   return {
     // State / 状態
-    panelVisibility: n,
-    panelSizes: o,
+    panelVisibility: e,
+    panelSizes: r,
     // State update functions / 状態更新関数
-    setPanelVisibility: s,
-    setPanelSizes: i,
-    setPanelRef: y,
-    updatePanelSize: T,
-    togglePanelVisibility: _,
+    setPanelVisibility: o,
+    setPanelSizes: a,
+    setPanelRef: E,
+    updatePanelSize: z,
+    togglePanelVisibility: S,
     // Utility functions / ユーティリティ関数
-    getPanelElement: b,
+    getPanelElement: y,
     // Functions for drag image management / ドラッグイメージ管理用の関数
-    createDragImage: l,
-    updateDragImagePosition: j,
+    createDragImage: c,
+    updateDragImagePosition: P,
     removeDragImage: k
   };
-}, on = ({ initialColumnPanels: r, initialPanelVisibility: e, initialDragModes: n = {}, debugConfig: s, onPanelMove: o, onDragModeChange: i, onColumnPanelsChange: u, scale: c = 1 }) => {
-  const h = F(s);
-  h.current = s;
-  const [N, b] = te(r), [M, T] = te(n), y = F(N);
-  y.current = N;
-  const l = Ft(), j = Xt(), k = qt(e, c), _ = F({
+}, Jr = ({ initialColumnPanels: t, initialPanelVisibility: n, initialDragModes: e = {}, debugConfig: o, onPanelMove: r, onDragModeChange: a, onColumnPanelsChange: l, scale: u = 1 }) => {
+  const f = W(o);
+  f.current = o;
+  const [b, y] = se(t), [A, z] = se(e), E = W(b);
+  E.current = b;
+  const c = $r(), P = Tr(), k = _r(n, u), S = W({
     mousemove: null,
     mouseup: null
-  }), R = w((m) => {
-    const v = Object.keys(y.current), D = Lt(v, ie);
-    for (let A = 0; A < D.length; A++) {
-      const O = D[A], H = y.current[O]?.indexOf(m) ?? -1;
-      if (H !== -1)
-        return { columnIndex: A, panelIndex: H };
+  }), N = D((w) => {
+    const m = Object.keys(E.current), p = Mr(m, fe);
+    for (let j = 0; j < p.length; j++) {
+      const _ = p[j], I = E.current[_]?.indexOf(w) ?? -1;
+      if (I !== -1)
+        return { columnIndex: j, panelIndex: I };
     }
     return null;
-  }, []), z = w(
-    (m, v, D) => {
-      E(h.current, 1, "🔄 パネル移動実行:", m, "→", v, "@", D), b((A) => {
-        const O = { ...A }, H = Object.keys(O).find((a) => O[a].includes(m));
-        if (!H)
-          return console.error("Source column not found for panel:", m), A;
-        if (!O[v])
-          return console.error("Target column not found:", v), A;
-        if (H === v) {
-          const a = [...O[H]], d = a.indexOf(m), [S] = a.splice(d, 1), X = d < D ? D - 1 : D;
-          a.splice(X, 0, S), O[v] = a;
-        } else {
-          O[H] = O[H].filter((d) => d !== m);
-          const a = [...O[v]];
-          a.splice(D, 0, m), O[v] = a;
-        }
-        if (E(h.current, 1, "✅ パネル移動完了:", m, "→", v), u && requestAnimationFrame(() => {
-          u(O);
-        }), o) {
-          const a = Object.keys(A).find((d) => A[d].includes(m));
-          a && requestAnimationFrame(() => {
-            o(m, a, v, D);
+  }, []), R = D(
+    (w, m, p) => {
+      O(f.current, 1, "🔄 パネル移動実行:", w, "→", m, "@", p), y((j) => {
+        if (!Object.values(j).some((I) => I.includes(w)))
+          return console.error("Source column not found for panel:", w), j;
+        if (!j[m])
+          return console.error("Target column not found:", m), j;
+        const _ = Yt(j, w, m, p);
+        if (_ === null) return j;
+        if (O(f.current, 1, "✅ パネル移動完了:", w, "→", m), l && requestAnimationFrame(() => {
+          l(_);
+        }), r) {
+          const I = Object.keys(j).find((re) => j[re].includes(w));
+          I && requestAnimationFrame(() => {
+            r(w, I, m, p);
           });
         }
-        return O;
+        return _;
       });
     },
-    [u, o]
-  ), Z = w(
-    (m, v) => {
-      if (!(l.dragState.isDragging || l.customDrag.isActive)) return;
-      const D = l.originalPanelPosition;
-      if (D && D.columnIndex === m && (D.panelIndex === v || D.panelIndex + 1 === v)) {
-        E(h.current, 1, `元の位置への挿入をスキップ: カラム${m}, 位置${v}`);
+    [l, r]
+  ), d = D(
+    (w, m) => {
+      if (!(c.dragState.isDragging || c.customDrag.isActive)) return;
+      const p = c.originalPanelPosition;
+      if (p !== null && et(p, w, m)) {
+        O(f.current, 1, `元の位置への挿入をスキップ: カラム${w}, 位置${m}`);
         return;
       }
-      const A = l.dragOverPosition;
-      (!A || A.columnIndex !== m || A.insertIndex !== v) && (E(h.current, 1, `プレースホルダーエンター: カラム${m}, 位置${v}`), l.setDragOverPosition({ columnIndex: m, insertIndex: v }), l.setDragState((O) => ({ ...O, dragOverColumn: m })));
+      const j = c.dragOverPosition;
+      (!j || j.columnIndex !== w || j.insertIndex !== m) && (O(f.current, 1, `プレースホルダーエンター: カラム${w}, 位置${m}`), c.setDragOverPosition({ columnIndex: w, insertIndex: m }), c.setDragState((_) => ({ ..._, dragOverColumn: w })));
     },
-    [l]
-  ), Y = w(
-    (m, v, D) => {
-      if (l.dragState.isDragging || l.customDrag.isActive) {
-        if (l.customDrag.isActive)
-          E(h.current, 1, "🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"), l.setDragOverPosition(null);
-        else if (l.dragState.isDragging && m && v !== void 0 && D !== void 0) {
-          const A = l.dragOverPosition;
-          if (A && A.columnIndex === v && A.insertIndex === D) {
-            const O = m.currentTarget, H = m.relatedTarget;
-            H && O.contains(H) || (E(h.current, 1, `ノーマルドラッグ - プレースホルダーリーブ: カラム${v}, 位置${D}。ハイライトを解除します。`), l.setDragOverPosition(null));
+    [c]
+  ), $ = D(
+    (w, m, p) => {
+      if (c.dragState.isDragging || c.customDrag.isActive) {
+        if (c.customDrag.isActive)
+          O(f.current, 1, "🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"), c.setDragOverPosition(null);
+        else if (c.dragState.isDragging && w && m !== void 0 && p !== void 0) {
+          const j = c.dragOverPosition;
+          if (j && j.columnIndex === m && j.insertIndex === p) {
+            const _ = w.currentTarget, I = w.relatedTarget;
+            I && _.contains(I) || (O(f.current, 1, `ノーマルドラッグ - プレースホルダーリーブ: カラム${m}, 位置${p}。ハイライトを解除します。`), c.setDragOverPosition(null));
           }
         }
       }
     },
-    [l]
-  ), U = Yt({
-    debugConfig: h.current,
-    dragState: l.dragState,
-    customDrag: l.customDrag,
-    clickState: l.clickState,
-    dragModes: M,
-    isMouseDown: l.isMouseDown,
-    originalPanelPosition: l.originalPanelPosition,
-    dragOverPosition: l.dragOverPosition,
-    setCustomDrag: l.setCustomDrag,
-    setDragState: l.setDragState,
-    setDragOverPosition: l.setDragOverPosition,
-    setOriginalPanelPosition: l.setOriginalPanelPosition,
-    setClickState: l.setClickState,
-    setIsMouseDown: l.setIsMouseDown,
-    findPanelPosition: R,
-    performPanelMove: z,
-    showMousePosition: j.showMousePosition,
-    updateMousePosition: j.updateMousePosition,
-    recordMouseDown: j.recordMouseDown,
-    recordClickPosition: j.recordClickPosition,
-    isVirtualClick: j.isVirtualClick,
-    calculateMoveDistance: j.calculateMoveDistance,
-    clearMouseTracking: j.clearMouseTracking,
-    resetDragState: l.resetDragState,
-    resetClickState: l.resetClickState,
+    [c]
+  ), T = Ar({
+    debugConfig: f.current,
+    dragState: c.dragState,
+    customDrag: c.customDrag,
+    clickState: c.clickState,
+    dragModes: A,
+    isMouseDown: c.isMouseDown,
+    originalPanelPosition: c.originalPanelPosition,
+    dragOverPosition: c.dragOverPosition,
+    setCustomDrag: c.setCustomDrag,
+    setDragState: c.setDragState,
+    setDragOverPosition: c.setDragOverPosition,
+    setOriginalPanelPosition: c.setOriginalPanelPosition,
+    setClickState: c.setClickState,
+    setIsMouseDown: c.setIsMouseDown,
+    findPanelPosition: N,
+    performPanelMove: R,
+    showMousePosition: P.showMousePosition,
+    updateMousePosition: P.updateMousePosition,
+    recordMouseDown: P.recordMouseDown,
+    recordClickPosition: P.recordClickPosition,
+    isVirtualClick: P.isVirtualClick,
+    calculateMoveDistance: P.calculateMoveDistance,
+    clearMouseTracking: P.clearMouseTracking,
+    resetDragState: c.resetDragState,
+    resetClickState: c.resetClickState,
     createDragImage: k.createDragImage,
     updateDragImagePosition: k.updateDragImagePosition,
     removeDragImage: k.removeDragImage,
-    handlePlaceholderDragEnter: Z,
-    handlePlaceholderDragLeave: Y
-  }), $ = Ht({
-    debugConfig: h.current,
-    dragState: l.dragState,
-    customDrag: l.customDrag,
-    dragModes: M,
-    columnPanels: N,
-    dragOverPosition: l.dragOverPosition,
-    originalPanelPosition: l.originalPanelPosition,
-    setDragState: l.setDragState,
-    setDragOverPosition: l.setDragOverPosition,
-    setOriginalPanelPosition: l.setOriginalPanelPosition,
-    performPanelMove: z,
-    showMousePosition: j.showMousePosition,
-    updateMousePosition: j.updateMousePosition,
-    resetDragState: l.resetDragState,
-    handlePlaceholderDragEnter: Z,
-    handlePlaceholderDragLeave: Y,
-    scale: c
-  }), L = w((m) => {
-    _.current.mousemove && _.current.mousemove(m);
-  }, []), f = w((m) => {
-    _.current.mouseup && _.current.mouseup(m);
+    handlePlaceholderDragEnter: d,
+    handlePlaceholderDragLeave: $
+  }), Y = Lr({
+    debugConfig: f.current,
+    dragState: c.dragState,
+    customDrag: c.customDrag,
+    dragModes: A,
+    columnPanels: b,
+    dragOverPosition: c.dragOverPosition,
+    originalPanelPosition: c.originalPanelPosition,
+    setDragState: c.setDragState,
+    setDragOverPosition: c.setDragOverPosition,
+    setOriginalPanelPosition: c.setOriginalPanelPosition,
+    performPanelMove: R,
+    showMousePosition: P.showMousePosition,
+    updateMousePosition: P.updateMousePosition,
+    resetDragState: c.resetDragState,
+    handlePlaceholderDragEnter: d,
+    handlePlaceholderDragLeave: $,
+    scale: u
+  }), G = D((w) => {
+    S.current.mousemove && S.current.mousemove(w);
+  }, []), g = D((w) => {
+    S.current.mouseup && S.current.mouseup(w);
   }, []);
-  K(() => (E(h.current, 1, "🔧 グローバルイベントリスナー初期化 - refベース管理開始"), document.addEventListener("mousemove", L), document.addEventListener("mouseup", f), () => {
-    E(h.current, 1, "🔴 グローバルイベントリスナー終了 - refベース管理終了"), document.removeEventListener("mousemove", L), document.removeEventListener("mouseup", f);
-  }), [L, f]), K(() => {
-    const m = !l.clickState.isClicked && Object.entries(M).some(([, D]) => D === "custom"), v = l.clickState.isClicked && l.clickState.panelId;
-    if (m || v) {
-      const D = m ? "パターン1（仮想クリック検出）" : "パターン2,3（ドラッグ準備）";
-      E(h.current, 1, `🔧 イベントハンドラー設定開始: ${D}`), _.current.mousemove = U.handleGlobalMouseMove, _.current.mouseup = U.handleGlobalMouseUp;
+  ee(() => (O(f.current, 1, "🔧 グローバルイベントリスナー初期化 - refベース管理開始"), document.addEventListener("mousemove", G), document.addEventListener("mouseup", g), () => {
+    O(f.current, 1, "🔴 グローバルイベントリスナー終了 - refベース管理終了"), document.removeEventListener("mousemove", G), document.removeEventListener("mouseup", g);
+  }), [G, g]), ee(() => {
+    const w = !c.clickState.isClicked && Object.entries(A).some(([, p]) => p === "custom"), m = c.clickState.isClicked && c.clickState.panelId;
+    if (w || m) {
+      const p = w ? "パターン1（仮想クリック検出）" : "パターン2,3（ドラッグ準備）";
+      O(f.current, 1, `🔧 イベントハンドラー設定開始: ${p}`), S.current.mousemove = T.handleGlobalMouseMove, S.current.mouseup = T.handleGlobalMouseUp;
     } else
-      l.customDrag.isActive || l.dragState.isDragging || (_.current.mousemove = null, _.current.mouseup = null);
-  }, [l.clickState.isClicked, l.clickState.panelId, M, l.customDrag.isActive, l.dragState.isDragging, U.handleGlobalMouseMove, U.handleGlobalMouseUp]);
-  const x = w(
-    (m, v) => {
-      const D = m.touches[0], A = m.currentTarget;
-      l.setTouchDragState({
-        isTouchDragging: !0,
-        startX: D.clientX,
-        startY: D.clientY,
-        currentX: D.clientX,
-        currentY: D.clientY,
-        draggedElement: A
-      }), l.setDragState({
-        isDragging: !0,
-        draggedPanel: v,
-        dragOverColumn: null
-      });
-    },
-    [l]
-  ), C = w(
-    (m) => {
-      if (!l.touchDragState.isTouchDragging) return;
-      m.preventDefault();
-      const v = m.touches[0];
-      l.setTouchDragState((D) => ({
-        ...D,
-        currentX: v.clientX,
-        currentY: v.clientY
-      }));
-    },
-    [l.touchDragState.isTouchDragging, l]
-  ), W = w(
-    (m) => {
-      l.touchDragState.isTouchDragging && (l.setTouchDragState({
-        isTouchDragging: !1,
-        startX: 0,
-        startY: 0,
-        currentX: 0,
-        currentY: 0,
-        draggedElement: null
-      }), $.handleDragEnd());
-    },
-    [l.touchDragState.isTouchDragging, l, $]
-  ), p = w(
-    (m) => {
-      E(h.current, 1, "🔄 toggleDragMode called:", { panelId: m }), T((v) => {
-        const A = (v[m] || "normal") === "normal" ? "custom" : "normal", O = { ...v, [m]: A };
-        if (i)
+      c.customDrag.isActive || c.dragState.isDragging || (S.current.mousemove = null, S.current.mouseup = null);
+  }, [c.clickState.isClicked, c.clickState.panelId, A, c.customDrag.isActive, c.dragState.isDragging, T.handleGlobalMouseMove, T.handleGlobalMouseUp]);
+  const v = D(
+    (w) => {
+      O(f.current, 1, "🔄 toggleDragMode called:", { panelId: w }), z((m) => {
+        const j = (m[w] || "normal") === "normal" ? "custom" : "normal", _ = { ...m, [w]: j };
+        if (a)
           try {
-            i(m, A);
-          } catch (H) {
-            console.error("🔄 Error in onDragModeChange:", H);
+            a(w, j);
+          } catch (I) {
+            console.error("🔄 Error in onDragModeChange:", I);
           }
-        return O;
+        return _;
       });
     },
-    [i]
-  ), g = w((m, v) => {
-    m.stopPropagation(), E(h.current, 2, "パネルサイズ情報クリック:", v);
+    [a]
+  ), L = D((w, m) => {
+    w.stopPropagation(), O(f.current, 2, "パネルサイズ情報クリック:", m);
   }, []);
   return {
     // 状態
-    columnPanels: N,
+    columnPanels: b,
     panelVisibility: k.panelVisibility,
-    dragModes: M,
-    dragState: l.dragState,
-    dragOverPosition: l.dragOverPosition,
-    originalPanelPosition: l.originalPanelPosition,
-    touchDragState: l.touchDragState,
-    customDrag: l.customDrag,
-    clickState: l.clickState,
-    mousePosition: j.mousePosition,
+    dragModes: A,
+    dragState: c.dragState,
+    dragOverPosition: c.dragOverPosition,
+    originalPanelPosition: c.originalPanelPosition,
+    customDrag: c.customDrag,
+    clickState: c.clickState,
+    mousePosition: P.mousePosition,
     panelSizes: k.panelSizes,
     // 状態更新関数
-    setColumnPanels: b,
+    setColumnPanels: y,
     setPanelVisibility: k.setPanelVisibility,
-    setDragModes: T,
+    setDragModes: z,
     setPanelRef: k.setPanelRef,
     // イベントハンドラー
-    handleDragStart: $.handleDragStart,
-    handleDragEnd: $.handleDragEnd,
-    handleMouseDown: U.handleMouseDown,
-    handleTouchStart: x,
-    handleTouchMove: C,
-    handleTouchEnd: W,
-    handlePlaceholderDragEnter: Z,
-    handlePlaceholderDragLeave: Y,
-    handleDragOverWithInsert: $.handleDragOverWithInsert,
-    handleDropWithInsert: $.handleDropWithInsert,
-    handleColumnDragLeave: $.handleColumnDragLeave,
-    handlePanelSizeInfoClick: g,
+    handleDragStart: Y.handleDragStart,
+    handleDragEnd: Y.handleDragEnd,
+    handleMouseDown: T.handleMouseDown,
+    handlePlaceholderDragEnter: d,
+    handlePlaceholderDragLeave: $,
+    handleDragOverWithInsert: Y.handleDragOverWithInsert,
+    handleDropWithInsert: Y.handleDropWithInsert,
+    handleColumnDragLeave: Y.handleColumnDragLeave,
+    handlePanelSizeInfoClick: L,
     // ユーティリティ関数
-    toggleDragMode: p,
-    findPanelPosition: R
+    toggleDragMode: v,
+    findPanelPosition: N
   };
-}, an = ({ minColumnWidth: r = 350, defaultColumns: e = 3, maxColumns: n = 6, minColumns: s = 1, currentColumnWidths: o = {} } = {}) => {
-  const [i, u] = te(0), c = F(0), h = F(null), [N, b] = te(!1), M = F(e);
-  K(() => {
+}, Qr = ({ minColumnWidth: t = 350, defaultColumns: n = 3, maxColumns: e = 6, minColumns: o = 1, currentColumnWidths: r = {} } = {}) => {
+  const [a, l] = se(0), u = W(0), f = W(null), [b, y] = se(!1), A = W(n);
+  ee(() => {
     if (typeof window > "u")
       return;
-    const l = () => {
-      const k = window.visualViewport?.width ?? 0, _ = document?.documentElement?.clientWidth ?? 0, R = document?.body?.clientWidth ?? 0, z = window.innerWidth ?? 0;
-      return _ > 0 ? Math.floor(_) : k > 0 ? Math.floor(k) : R > 0 ? Math.floor(R) : Math.floor(z);
-    }, j = () => {
-      h.current !== null && cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
-        const k = l();
-        h.current = null, k !== 0 && (Math.abs(c.current - k) < 2 || (c.current = k, u(k)));
+    const c = () => {
+      const k = window.visualViewport?.width ?? 0, S = document?.documentElement?.clientWidth ?? 0, N = document?.body?.clientWidth ?? 0, R = window.innerWidth ?? 0;
+      return S > 0 ? Math.floor(S) : k > 0 ? Math.floor(k) : N > 0 ? Math.floor(N) : Math.floor(R);
+    }, P = () => {
+      f.current !== null && cancelAnimationFrame(f.current), f.current = requestAnimationFrame(() => {
+        const k = c();
+        f.current = null, k !== 0 && (Math.abs(u.current - k) < 2 || (u.current = k, l(k)));
       });
     };
-    return j(), window.addEventListener("resize", j), window.addEventListener("orientationchange", j), window.visualViewport?.addEventListener("resize", j), () => {
-      h.current !== null && cancelAnimationFrame(h.current), window.removeEventListener("resize", j), window.removeEventListener("orientationchange", j), window.visualViewport?.removeEventListener("resize", j);
+    return P(), window.addEventListener("resize", P), window.addEventListener("orientationchange", P), window.visualViewport?.addEventListener("resize", P), () => {
+      f.current !== null && cancelAnimationFrame(f.current), window.removeEventListener("resize", P), window.removeEventListener("orientationchange", P), window.visualViewport?.removeEventListener("resize", P);
     };
   }, []);
-  const T = Ue(() => {
-    if (!N || i === 0)
-      return M.current = e, e;
-    const l = Math.max(i - 64, 0), j = 24, k = Object.values(o);
-    let _;
+  const z = Re(() => {
+    if (!b || a === 0)
+      return A.current = n, n;
+    const c = Math.max(a - 64, 0), P = 24, k = Object.values(r);
+    let S;
     if (k.length > 0) {
-      const R = k.reduce((Y, U) => Y + U, 0) / k.length, z = Math.max(r, R);
-      _ = Math.floor((l + j) / (z + j)), k.reduce((Y, U) => Y + U, 0) + (k.length - 1) * j > l && k.length > s && (_ = Math.min(_, k.length - 1));
+      const N = k.reduce(($, T) => $ + T, 0) / k.length, R = Math.max(t, N);
+      S = Math.floor((c + P) / (R + P)), k.reduce(($, T) => $ + T, 0) + (k.length - 1) * P > c && k.length > o && (S = Math.min(S, k.length - 1));
     } else
-      _ = Math.floor((l + j) / (r + j));
-    return _ = Math.max(s, Math.min(n, _)), M.current === _ ? M.current : (M.current = _, _);
-  }, [N, i, e, r, n, s, o]), y = w(() => {
-    b((l) => !l);
+      S = Math.floor((c + P) / (t + P));
+    return S = Math.max(o, Math.min(e, S)), A.current === S ? A.current : (A.current = S, S);
+  }, [b, a, n, t, e, o, r]), E = D(() => {
+    y((c) => !c);
   }, []);
   return {
-    responsiveColumnCount: T,
-    isResponsiveMode: N,
-    screenWidth: i,
-    toggleResponsiveMode: y
+    responsiveColumnCount: z,
+    isResponsiveMode: b,
+    screenWidth: a,
+    toggleResponsiveMode: E
   };
 };
-const It = [
+const Rr = [
   ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
   ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
-], Ut = oe("monitor", It);
-const Bt = [
+], zr = ie("monitor", Rr);
+const qr = [
   ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
   ["path", { d: "M12 18h.01", key: "mhygvu" }]
-], Vt = oe("smartphone", Bt), ln = ({ isResponsiveMode: r, responsiveColumnCount: e, currentColumnCount: n, screenWidth: s, onToggleResponsive: o }) => /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1", children: [
-  /* @__PURE__ */ t.jsxs(
+], Wr = ie("smartphone", qr), eo = ({ isResponsiveMode: t, responsiveColumnCount: n, currentColumnCount: e, screenWidth: o, onToggleResponsive: r }) => /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1", children: [
+  /* @__PURE__ */ s.jsxs(
     "button",
     {
       type: "button",
-      onClick: o,
-      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 ? "レスポンシブモードを無効化" : "レスポンシブモードを有効化",
+      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: [
-        r ? /* @__PURE__ */ t.jsx(Vt, { className: "h-3 w-3" }) : /* @__PURE__ */ t.jsx(Ut, { className: "h-3 w-3" }),
-        /* @__PURE__ */ t.jsx("span", { children: r ? "レスポンシブ" : "固定" })
+        t ? /* @__PURE__ */ s.jsx(Wr, { className: "h-3 w-3" }) : /* @__PURE__ */ s.jsx(zr, { className: "h-3 w-3" }),
+        /* @__PURE__ */ s.jsx("span", { children: t ? "レスポンシブ" : "固定" })
       ]
     }
   ),
-  r && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1 text-slate-600 text-xs", children: [
-    /* @__PURE__ */ t.jsxs("span", { className: "font-mono", children: [
-      s,
+  t && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-1 text-slate-600 text-xs", children: [
+    /* @__PURE__ */ s.jsxs("span", { className: "font-mono", children: [
+      o,
       "px"
     ] }),
-    /* @__PURE__ */ t.jsx("span", { children: "→" }),
-    /* @__PURE__ */ t.jsxs("span", { className: "font-semibold text-blue-600", children: [
-      e,
+    /* @__PURE__ */ s.jsx("span", { children: "→" }),
+    /* @__PURE__ */ s.jsxs("span", { className: "font-semibold text-blue-600", children: [
+      n,
       "列"
     ] }),
-    e !== n && /* @__PURE__ */ t.jsx("span", { className: "text-orange-600", children: "(変更予定)" })
+    n !== e && /* @__PURE__ */ s.jsx("span", { className: "text-orange-600", children: "(変更予定)" })
   ] })
-] }), cn = {
+] }), to = {
   showDebugPanel: !1,
   showMousePosition: !1,
   showPanelSizes: !1,
@@ -2519,37 +2988,49 @@ const Bt = [
   logLevel: 0
 };
 export {
-  Qt as ColumnControlPanel,
-  Kt as ColumnInsertPanel,
-  ie as DEFAULT_COLUMN_ID_CONFIG,
-  cn as DEFAULT_DEBUG_CONFIG,
-  ke as DEFAULT_EDGE_SCROLL_CONFIG,
-  en as DebugControlPanel,
-  Jt as DragDropLayout,
-  Ge as DropZoneDebugOverlay,
-  Ke as EdgeScrollManager,
-  Ze as InsertPlaceholder,
-  Dt as PanelSizeDisplay,
-  Gt as ResizableColumn,
-  Je as ResizeHandle,
-  ln as ResponsiveControl,
-  He as calculateScrollVector,
-  rn as createColumnIdMapping,
-  E as debugLog,
-  je as generateColumnId,
-  Qe as generateColumnIds,
-  nn as getNextColumnId,
-  tn as isValidColumnId,
-  Wt as normalizeColumnPanels,
-  Pe as parseColumnId,
-  zt as performScroll,
-  Lt as sortColumnIds,
-  sn as useColumnLayout,
-  Yt as useCustomDragHandlers,
-  on as useDragDropColumns,
-  Ft as useDragDropState,
-  Xt as useMouseTracking,
-  Ht as useNormalDragHandlers,
-  qt as usePanelManagement,
-  an as useResponsiveColumns
+  Ur as ColumnControlPanel,
+  Br as ColumnInsertPanel,
+  fe as DEFAULT_COLUMN_ID_CONFIG,
+  to as DEFAULT_DEBUG_CONFIG,
+  Hr as DEFAULT_DRAG_DROP_LAYOUT_LABELS,
+  Se as DEFAULT_EDGE_SCROLL_CONFIG,
+  pr as DEFAULT_TOUCH_DRAG_CONFIG,
+  Xr as DebugControlPanel,
+  Fr as DragDropLayout,
+  Xt as DropZoneDebugOverlay,
+  rt as EdgeScrollManager,
+  Bt as InsertPlaceholder,
+  Ee as PANEL_ACTION_ATTRIBUTE,
+  De as PANEL_MOVES,
+  Ut as PANEL_MOVE_SHORTCUTS,
+  Yn as PanelSizeDisplay,
+  Yr as ResizableColumn,
+  en as ResizeHandle,
+  eo as ResponsiveControl,
+  Vt as SCROLL_ROOT_SELECTOR,
+  cr as TEMPLATE_PLACEHOLDERS,
+  Bn as availablePanelMoves,
+  St as calculateScrollVector,
+  Gr as createColumnIdMapping,
+  O as debugLog,
+  We as generateColumnId,
+  tn as generateColumnIds,
+  Zr as getNextColumnId,
+  Yt as insertPanelAt,
+  Vr as isValidColumnId,
+  Xn as movePanelInColumns,
+  Sr as normalizeColumnPanels,
+  Zn as panelMoveOfKey,
+  Ie as parseColumnId,
+  sr as performScroll,
+  Pe as shownPanelPlace,
+  Mr as sortColumnIds,
+  Kr as useColumnLayout,
+  Ar as useCustomDragHandlers,
+  Jr as useDragDropColumns,
+  $r as useDragDropState,
+  Tr as useMouseTracking,
+  Lr as useNormalDragHandlers,
+  _r as usePanelManagement,
+  Qr as useResponsiveColumns
 };