npm - @aiquants/drag-drop-panels - Versions diffs - 0.8.1 → 0.8.3 - Mend

@aiquants/drag-drop-panels 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +27 -2
package/dist/DragDropLayout.d.ts.map +1 -1
package/dist/drag-drop/ColumnControlPanel.d.ts.map +1 -1
package/dist/drag-drop/ColumnInsertPanel.d.ts.map +1 -1
package/dist/drag-drop/ResponsiveControl.d.ts.map +1 -1
package/dist/index.es.js +1332 -1176
package/dist/index.umd.js +2 -2
package/package.json +1 -1
package/src/DragDropLayout.spec.tsx +4 -0
package/src/DragDropLayout.tsx +7 -1
package/src/drag-drop/ColumnControlPanel.tsx +5 -2
package/src/drag-drop/ColumnInsertPanel.tsx +2 -1
package/src/drag-drop/ResponsiveControl.tsx +2 -1
package/src/lucide-icons.d.ts +6 -0

package/dist/index.umd.js CHANGED Viewed

@@ -1,6 +1,6 @@
-(function(W,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","lucide-react"],n):(W=typeof globalThis<"u"?globalThis:W||self,n(W.AiquantsDragDropPanels={},W.React,W["lucide-react"]))})(this,(function(W,n,ee){"use strict";var be={exports:{}},he={};var Me;function Ke(){if(Me)return he;Me=1;var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function s(l,a,i){var d=null;if(i!==void 0&&(d=""+i),a.key!==void 0&&(d=""+a.key),"key"in a){i={};for(var u in a)u!=="key"&&(i[u]=a[u])}else i=a;return a=i.ref,{$$typeof:r,type:l,key:d,ref:a!==void 0?a:null,props:i}}return he.Fragment=t,he.jsx=s,he.jsxs=s,he}var fe={};var Ae;function qe(){return Ae||(Ae=1,process.env.NODE_ENV!=="production"&&(function(){function r(o){if(o==null)return null;if(typeof o=="function")return o.$$typeof===N?null:o.displayName||o.name||null;if(typeof o=="string")return o;switch(o){case k:return"Fragment";case _:return"Profiler";case L:return"StrictMode";case B:return"Suspense";case T:return"SuspenseList";case p:return"Activity"}if(typeof o=="object")switch(typeof o.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),o.$$typeof){case j:return"Portal";case J:return o.displayName||"Context";case Y:return(o._context.displayName||"Context")+".Consumer";case X:var m=o.render;return o=o.displayName,o||(o=m.displayName||m.name||"",o=o!==""?"ForwardRef("+o+")":"ForwardRef"),o;case z:return m=o.displayName||null,m!==null?m:r(o.type)||"Memo";case g:m=o._payload,o=o._init;try{return r(o(m))}catch{}}return null}function t(o){return""+o}function s(o){try{t(o);var m=!1}catch{m=!0}if(m){m=console;var S=m.error,H=typeof Symbol=="function"&&Symbol.toStringTag&&o[Symbol.toStringTag]||o.constructor.name||"Object";return S.call(m,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",H),t(o)}}function l(o){if(o===k)return"<>";if(typeof o=="object"&&o!==null&&o.$$typeof===g)return"<...>";try{var m=r(o);return m?"<"+m+">":"<...>"}catch{return"<...>"}}function a(){var o=F.A;return o===null?null:o.getOwner()}function i(){return Error("react-stack-top-frame")}function d(o){if(x.call(o,"key")){var m=Object.getOwnPropertyDescriptor(o,"key").get;if(m&&m.isReactWarning)return!1}return o.key!==void 0}function u(o,m){function S(){v||(v=!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)",m))}S.isReactWarning=!0,Object.defineProperty(o,"key",{get:S,configurable:!0})}function h(){var o=r(this.type);return D[o]||(D[o]=!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.")),o=this.props.ref,o!==void 0?o:null}function E(o,m,S,H,Q,q){var Z=S.ref;return o={$$typeof:c,type:o,key:m,props:S,_owner:H},(Z!==void 0?Z:null)!==null?Object.defineProperty(o,"ref",{enumerable:!1,get:h}):Object.defineProperty(o,"ref",{enumerable:!1,value:null}),o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(o,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(o,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.defineProperty(o,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o}function y(o,m,S,H,Q,q){var Z=m.children;if(Z!==void 0)if(H)if(b(Z)){for(H=0;H<Z.length;H++)O(Z[H]);Object.freeze&&Object.freeze(Z)}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 O(Z);if(x.call(m,"key")){Z=r(o);var ne=Object.keys(m).filter(function(se){return se!=="key"});H=0<ne.length?"{key: someKey, "+ne.join(": ..., ")+": ...}":"{key: someKey}",I[Z+H]||(ne=0<ne.length?"{"+ne.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(F,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(F=typeof globalThis<"u"?globalThis:F||self,s(F.AiquantsDragDropPanels={},F.React))})(this,(function(F,s){"use strict";var be={exports:{}},me={};var Ae;function nt(){if(Ae)return me;Ae=1;var o=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function n(r,a,i){var d=null;if(i!==void 0&&(d=""+i),a.key!==void 0&&(d=""+a.key),"key"in a){i={};for(var u in a)u!=="key"&&(i[u]=a[u])}else i=a;return a=i.ref,{$$typeof:o,type:r,key:d,ref:a!==void 0?a:null,props:i}}return me.Fragment=e,me.jsx=n,me.jsxs=n,me}var fe={};var Te;function st(){return Te||(Te=1,process.env.NODE_ENV!=="production"&&(function(){function o(l){if(l==null)return null;if(typeof l=="function")return l.$$typeof===S?null:l.displayName||l.name||null;if(typeof l=="string")return l;switch(l){case C:return"Fragment";case L:return"Profiler";case T:return"StrictMode";case B:return"Suspense";case R:return"SuspenseList";case x:return"Activity"}if(typeof l=="object")switch(typeof l.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),l.$$typeof){case k:return"Portal";case J:return l.displayName||"Context";case Y:return(l._context.displayName||"Context")+".Consumer";case H:var h=l.render;return l=l.displayName,l||(l=h.displayName||h.name||"",l=l!==""?"ForwardRef("+l+")":"ForwardRef"),l;case W:return h=l.displayName||null,h!==null?h:o(l.type)||"Memo";case g:h=l._payload,l=l._init;try{return o(l(h))}catch{}}return null}function e(l){return""+l}function n(l){try{e(l);var h=!1}catch{h=!0}if(h){h=console;var E=h.error,X=typeof Symbol=="function"&&Symbol.toStringTag&&l[Symbol.toStringTag]||l.constructor.name||"Object";return E.call(h,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",X),e(l)}}function r(l){if(l===C)return"<>";if(typeof l=="object"&&l!==null&&l.$$typeof===g)return"<...>";try{var h=o(l);return h?"<"+h+">":"<...>"}catch{return"<...>"}}function a(){var l=z.A;return l===null?null:l.getOwner()}function i(){return Error("react-stack-top-frame")}function d(l){if(p.call(l,"key")){var h=Object.getOwnPropertyDescriptor(l,"key").get;if(h&&h.isReactWarning)return!1}return l.key!==void 0}function u(l,h){function E(){y||(y=!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)",h))}E.isReactWarning=!0,Object.defineProperty(l,"key",{get:E,configurable:!0})}function m(){var l=o(this.type);return D[l]||(D[l]=!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.")),l=this.props.ref,l!==void 0?l:null}function P(l,h,E,X,Q,q){var Z=E.ref;return l={$$typeof:c,type:l,key:h,props:E,_owner:X},(Z!==void 0?Z:null)!==null?Object.defineProperty(l,"ref",{enumerable:!1,get:m}):Object.defineProperty(l,"ref",{enumerable:!1,value:null}),l._store={},Object.defineProperty(l._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(l,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(l,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.defineProperty(l,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(l.props),Object.freeze(l)),l}function v(l,h,E,X,Q,q){var Z=h.children;if(Z!==void 0)if(X)if(b(Z)){for(X=0;X<Z.length;X++)M(Z[X]);Object.freeze&&Object.freeze(Z)}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(Z);if(p.call(h,"key")){Z=o(l);var ne=Object.keys(h).filter(function(se){return se!=="key"});X=0<ne.length?"{key: someKey, "+ne.join(": ..., ")+": ...}":"{key: someKey}",I[Z+X]||(ne=0<ne.length?"{"+ne.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} />`,H,Z,ne,Z),I[Z+H]=!0)}if(Z=null,S!==void 0&&(s(S),Z=""+S),d(m)&&(s(m.key),Z=""+m.key),"key"in m){S={};for(var le in m)le!=="key"&&(S[le]=m[le])}else S=m;return Z&&u(S,typeof o=="function"?o.displayName||o.name||"Unknown":o),E(o,Z,S,a(),Q,q)}function O(o){A(o)?o._store&&(o._store.validated=1):typeof o=="object"&&o!==null&&o.$$typeof===g&&(o._payload.status==="fulfilled"?A(o._payload.value)&&o._payload.value._store&&(o._payload.value._store.validated=1):o._store&&(o._store.validated=1))}function A(o){return typeof o=="object"&&o!==null&&o.$$typeof===c}var w=n,c=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),L=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),Y=Symbol.for("react.consumer"),J=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),T=Symbol.for("react.suspense_list"),z=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),p=Symbol.for("react.activity"),N=Symbol.for("react.client.reference"),F=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,b=Array.isArray,f=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(o){return o()}};var v,D={},R=w.react_stack_bottom_frame.bind(w,i)(),M=f(l(i)),I={};fe.Fragment=k,fe.jsx=function(o,m,S){var H=1e4>F.recentlyCreatedOwnerStacks++;return y(o,m,S,!1,H?Error("react-stack-top-frame"):R,H?f(l(o)):M)},fe.jsxs=function(o,m,S){var H=1e4>F.recentlyCreatedOwnerStacks++;return y(o,m,S,!0,H?Error("react-stack-top-frame"):R,H?f(l(o)):M)}})()),fe}var Le;function $e(){return Le||(Le=1,process.env.NODE_ENV==="production"?be.exports=Ke():be.exports=qe()),be.exports}var e=$e();const ae=class ae{constructor(t=2,s="[drag-drop-panels]",l=console){this.level=t,this.prefix=s,this.impl=l}static setLevel(t){ae.instance.setLevel(t)}setLevel(t){this.level=t}static setImplementation(t){ae.instance.setImplementation(t)}setImplementation(t){this.impl=t}static setPrefix(t){ae.instance.setPrefix(t)}setPrefix(t){this.prefix=t}formatMessage(t){return typeof t=="string"?[`${this.prefix} ${t}`]:[this.prefix,t]}static debug(t,...s){ae.instance.debug(t,...s)}debug(t,...s){this.level<=0&&this.impl.debug(...this.formatMessage(t),...s)}static info(t,...s){ae.instance.info(t,...s)}info(t,...s){this.level<=1&&this.impl.info(...this.formatMessage(t),...s)}static warn(t,...s){ae.instance.warn(t,...s)}warn(t,...s){this.level<=2&&this.impl.warn(...this.formatMessage(t),...s)}static error(t,...s){ae.instance.error(t,...s)}error(t,...s){this.level<=3&&this.impl.error(...this.formatMessage(t),...s)}};ae.instance=new ae(2,"[drag-drop-panels]");let Ce=ae;const _e=({config:r,panelId:t,sizeInfo:s,onSizeInfoClick:l})=>r.showPanelSizes&&s?e.jsxs("div",{className:"absolute top-1 right-24 z-10 cursor-default rounded-md bg-red-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg",onClick:l,onMouseDown:l,onTouchStart:a=>a instanceof TouchEvent&&l(a),onDragStart:l,children:[e.jsxs("div",{className:"text-[10px] opacity-80",children:["ID:",t]}),e.jsxs("div",{children:[s.width,"×",s.height]}),e.jsxs("div",{children:["X:",s.x," Y:",s.y]}),e.jsxs("div",{className:"text-[10px] opacity-80",children:["min:",s.minHeight," max:",s.maxHeight]})]}):null,P=(r,t,...s)=>{(r.logLevel??0)>=t&&Ce.info(...s)},ke=n.memo(({index:r,columnIndex:t,isDragging:s,dragOverPosition:l,originalPosition:a,onDragEnter:i,onDragLeave:d,config:u,customDrag:h})=>{const E=a&&a.columnIndex===t&&(a.panelIndex===r||a.panelIndex+1===r),y=!E&&l?.columnIndex===t&&l?.insertIndex===r,O=n.useRef(null),[A,w]=n.useState(null),c=s||(h?.isActive??!1);return n.useEffect(()=>{if(O.current){const j=O.current.getBoundingClientRect(),k={width:Math.round(j.width),height:Math.round(j.height),x:Math.round(j.left),y:Math.round(j.top)};w(k),y&&P(u,1,`🎯 アクティブプレースホルダー ${r}-${t}:`,{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})`})}},[y,r,t,u]),P(u,2,`プレースホルダー${r}-${t}: 表示中`,{isHighlighted:y,isDragging:s,dragOverPosition:l,shouldShow:c}),e.jsxs("div",{ref:O,"data-placeholder-index":r,"data-placeholder-column":t,onDragEnter:()=>i(t,r),onDragLeave:j=>d(j,t,r),className:`relative flex w-full items-center justify-center transition-all duration-0 ${E?"pointer-events-none h-0 overflow-hidden opacity-0":c?y?"my-2 scale-[1.02] rounded-xl border-4 border-sky-500 border-dashed bg-sky-200 px-4 py-6 shadow-lg ring-2 ring-sky-400 ring-opacity-50":"my-2 rounded-xl border-2 border-sky-300 border-dashed bg-sky-50/70 px-2 py-4 opacity-80":"pointer-events-none h-0 overflow-hidden opacity-0"}`,children:[!E&&c&&u.showPlaceholderInfo&&A&&e.jsxs("div",{className:"absolute top-1 right-1 z-10 rounded-md bg-blue-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg",children:[e.jsxs("div",{children:[A.width,"×",A.height]}),e.jsxs("div",{children:["X:",A.x," Y:",A.y]}),e.jsx("div",{className:"text-[10px] opacity-80",children:"min:200px max:500px"}),e.jsxs("div",{className:"mt-0.5 text-[10px] opacity-80",children:["PH-",t,"-",r," ",y?"ACTIVE":"IDLE"]})]}),!E&&c&&e.jsxs("div",{className:"flex items-center space-x-2 text-sky-600",children:[e.jsxs("svg",{className:"h-6 w-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[e.jsx("title",{children:"パネルをここにドロップ"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 6v6m0 0v6m0-6h6m-6 0H6"})]}),e.jsx("span",{className:"font-medium text-sm",children:"パネルをここにドロップ"})]})]})});ke.displayName="InsertPlaceholder";const Pe=({columnIndex:r,isDragging:t,dragOverPosition:s,children:l,config:a})=>{const i=n.useRef(null),[d,u]=n.useState(null);return n.useEffect(()=>{if(i.current&&t){const h=i.current.getBoundingClientRect(),E=s?.columnIndex===r,y={width:Math.round(h.width),height:Math.round(h.height),x:Math.round(h.left),y:Math.round(h.top),isActive:E};u(y),E&&P(a,1,`🎯 アクティブドロップゾーン ${r}:`,{size:`${y.width}×${y.height}`,position:`(${y.x}, ${y.y})`,bottomRight:`(${y.x+y.width}, ${y.y+y.height})`,center:`(${y.x+y.width/2}, ${y.y+y.height/2})`})}},[t,s,r,a]),e.jsxs("div",{ref:i,className:"relative",children:[l,t&&d&&a.showDropZoneOutlines&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:`pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${d.isActive?"border-red-500 bg-red-100/20 shadow-lg":"border-gray-400 bg-gray-100/10"}`}),e.jsxs("div",{className:`absolute top-2 left-2 z-20 rounded-md px-2 py-1 font-mono text-xs leading-tight shadow-lg transition-all duration-200 ${d.isActive?"bg-red-500/90 text-white":"bg-gray-500/90 text-white"}`,children:[e.jsxs("div",{className:"font-bold",children:["DropZone-",r]}),e.jsxs("div",{children:[d.width,"×",d.height]}),e.jsxs("div",{children:["X:",d.x," Y:",d.y]}),e.jsx("div",{className:"mt-0.5 text-[10px] opacity-80",children:d.isActive?"ACTIVE":"IDLE"})]}),e.jsx("div",{className:`pointer-events-none absolute transition-all duration-200 ${d.isActive?"opacity-100":"opacity-50"}`,style:{left:`${d.width/2-6}px`,top:`${d.height/2-6}px`},children:e.jsx("div",{className:`h-3 w-3 rounded-full border-2 ${d.isActive?"border-red-700 bg-red-500":"border-gray-700 bg-gray-500"}`})}),d.isActive&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500"}),e.jsx("div",{className:"pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"}),e.jsx("div",{className:"pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500"}),e.jsx("div",{className:"pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500"})]})]})]})};Pe.displayName="DropZoneDebugOverlay";const et=.25,tt=typeof window<"u"?n.useLayoutEffect:n.useEffect,nt=(r,t=et)=>{const s=n.useRef(null),[l,a]=n.useState(1);return tt(()=>{const i=s.current;if(!i||r<=0){a(1);return}const d=()=>{const h=i.clientWidth;if(h<=0)return;const E=h>=r?1:Math.max(h/r,t);a(y=>Math.abs(y-E)<.005?y:E)};d();const u=new ResizeObserver(d);return u.observe(i),()=>u.disconnect()},[r,t]),{containerRef:s,scale:l}},De=({columnId:r,onResizeStart:t,onResize:s,onResizeEnd:l,isResizing:a=!1,position:i="right",className:d="",debug:u={}})=>{const h=n.useRef(!1),E=n.useRef(null);n.useEffect(()=>{!a&&h.current&&(P(u,1,"外部からのリサイズ解除を検出、ドラッグ状態を強制解除:",r),h.current=!1,document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))},[a,r,u]);const y=n.useCallback(w=>{w.preventDefault(),w.stopPropagation(),P(u,2,"リサイズハンドル マウスダウン:",r),h.current=!0,t(r,w.clientX),document.body.style.cursor="col-resize",document.body.style.userSelect="none",document.body.classList.add("resizing-column")},[r,t,u]);n.useEffect(()=>{const w=j=>{h.current&&(j.preventDefault(),s(j.clientX))},c=()=>{h.current&&(P(u,2,"リサイズハンドル マウスアップ:",r),h.current=!1,l(),document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))};return document.addEventListener("mousemove",w),document.addEventListener("mouseup",c),()=>{document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",c)}},[r,s,l,u]);const O=n.useCallback(w=>{w.preventDefault(),w.stopPropagation();const c=w.touches[0];P(u,2,"リサイズハンドル タッチスタート:",r),h.current=!0,t(r,c.clientX),document.body.style.cursor="col-resize",document.body.style.userSelect="none",document.body.classList.add("resizing-column")},[r,t,u]);n.useEffect(()=>{const w=j=>{if(!h.current)return;j.preventDefault();const k=j.touches[0];s(k.clientX)},c=()=>{h.current&&(P(u,2,"リサイズハンドル タッチエンド:",r),h.current=!1,l(),document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))};return document.addEventListener("touchmove",w,{passive:!1}),document.addEventListener("touchend",c),()=>{document.removeEventListener("touchmove",w),document.removeEventListener("touchend",c)}},[r,s,l,u]),n.useEffect(()=>()=>{h.current&&(P(u,1,"リサイズハンドルアンマウント時のクリーンアップ:",r),document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))},[r,u]);const A=["resize-handle",i,a?"resizing":"",d].filter(Boolean).join(" ");return e.jsxs("div",{ref:E,className:A,onMouseDown:y,onTouchStart:O,"data-column-id":r,"data-position":i,"aria-label":`${r}のカラム幅を調整`,role:"separator","aria-orientation":"vertical",children:[e.jsx("div",{className:"resize-handle-bar"}),u.showPanelSizes&&e.jsxs("div",{className:"resize-handle-debug-info",children:[r,a&&" (resizing)"]})]})},st=({columnId:r,width:t,minWidth:s=100,maxWidth:l=800,onResizeStart:a,onResize:i,onResizeEnd:d,isResizing:u=!1,resizable:h=!0,className:E="",debug:y={},children:O})=>{const A=["resizable-column",u?"resizing":"",E].filter(Boolean).join(" ");return n.useEffect(()=>{const w=document.querySelector(`[data-column-id="${r}"]`);w&&(w.style.setProperty("--column-width",`${t}px`),w.style.setProperty("--column-min-width",`${s}px`),w.style.setProperty("--column-max-width",`${l}px`))},[r,t,s,l]),e.jsxs("div",{className:A,"data-column-id":r,"data-width":t,"data-min-width":s,"data-max-width":l,children:[O,h&&e.jsx(De,{columnId:r,onResizeStart:a,onResize:i,onResizeEnd:d,isResizing:u,position:"right",debug:y}),y.showPanelSizes&&e.jsxs("div",{className:"column-debug-size",children:[t,"px",u&&" ↔"]})]})},Ee=n.memo(({index:r,columnIndex:t,isDragging:s,dragOverPosition:l,originalPosition:a,onDragEnter:i,onDragLeave:d,debugConfig:u,customDrag:h})=>e.jsx(ke,{index:r,columnIndex:t,isDragging:s,dragOverPosition:l,originalPosition:a,onDragEnter:i,onDragLeave:d,config:u,customDrag:h}));Ee.displayName="LocalInsertPlaceholder";const rt=({columns:r,panels:t,columnPanels:s,panelVisibility:l,onPanelVisibilityChange:a,dragState:i,dragOverPosition:d,originalPanelPosition:u,dragModes:h,onDragStart:E,onDragEnd:y,onPlaceholderDragEnter:O,onPlaceholderDragLeave:A,onDragOverWithInsert:w,onDropWithInsert:c,onColumnDragLeave:j,onPanelClick:k,onPanelMouseDown:L,onTouchStart:_,onTouchMove:Y,onTouchEnd:J,debugConfig:X,panelSizes:B,setPanelRef:T,enableResize:z=!1,columnWidths:g,onResizeStart:p,onResize:N,onResizeEnd:F,isResizing:x=!1,resizingColumn:b,onPanelSizeInfoClick:f,onToggleDragMode:v,onPanelClose:D,onPanelMaximizeChange:R,customDrag:M,dragHandle:I="panel",maximizedPanel:o=null,panelClassName:m="",scale:S,autoScale:H,onScaleChange:Q})=>{const q=n.useRef(X);n.useEffect(()=>{q.current=X},[X]);const{containerRef:Z,scale:ne}=nt(H?.requiredWidth??0,H?.minScale),le=o?1:S??(H?ne:1),se=Number.isFinite(le)&&le>0?le:1,ve=n.useRef(se);ve.current=se,n.useEffect(()=>{Q&&Q(se)},[se,Q]);const xt=se<1?{width:`${100/se}%`,height:`${100/se}%`,transform:`scale(${se})`,transformOrigin:"top left"}:void 0,ue=n.useRef({}),Te=n.useRef(new Map);n.useEffect(()=>{P(q.current,1,"🎨 DragDropLayout - dragModes props changed:",{dragModes:h,timestamp:new Date().toISOString(),keys:Object.keys(h),values:Object.values(h)})},[h]);const Re=n.useMemo(()=>{const C={};return t.forEach(G=>{C[G.id]=G}),C},[t]);n.useEffect(()=>{if(!(o&&R))return;const C=G=>{G.key==="Escape"&&R(null)};return document.addEventListener("keydown",C),()=>document.removeEventListener("keydown",C)},[o,R]),n.useLayoutEffect(()=>{const C=new Map;Object.keys(ue.current).forEach(U=>{const te=ue.current[U];if(te){const ie=te.getBoundingClientRect();C.set(U,{rect:ie,height:te.offsetHeight,width:te.offsetWidth})}});const G=Te.current,$=300,de=new Set;Object.values(s).forEach(U=>{U.forEach(te=>{de.add(te)})}),new Set(G.keys()).forEach(U=>{de.has(U)||(P(q.current,1,"パネル削除検出 - クリーンアップ:",U),G.delete(U),ue.current[U]&&delete ue.current[U])}),C.forEach((U,te)=>{const ie=G.get(te);if(ie){const K=ie.rect.left-U.rect.left,me=ie.rect.top-U.rect.top;if(K!==0||me!==0){P(q.current,2,"パネル移動検出 - アニメーション開始:",te,{dx:K,dy:me});const oe=ue.current[te];if(oe){const ye=ve.current||1;oe.style.transform=`translate(${K/ye}px, ${me/ye}px)`,oe.style.transition="none",oe.classList.add("is-moving"),requestAnimationFrame(()=>{oe.style.transition=`transform ${$}ms cubic-bezier(0.2, 0, 0.2, 1)`,oe.style.transform="translate(0, 0)",setTimeout(()=>{oe.style.transition="",oe.style.transform="",oe.classList.remove("is-moving")},$)})}}}else{P(q.current,1,"新規パネル検出 - フェードインアニメーション:",te);const K=ue.current[te];K&&(K.style.opacity="0",K.style.transition="none",requestAnimationFrame(()=>{K.style.transition=`opacity ${$}ms ease-out`,K.style.opacity="1",setTimeout(()=>{K.style.transition="",K.style.opacity=""},$)}))}}),Te.current=C},[s]),n.useLayoutEffect(()=>{const C=new Map;Object.keys(ue.current).forEach(G=>{const $=ue.current[G];$&&C.set(G,{rect:$.getBoundingClientRect(),height:$.offsetHeight,width:$.offsetWidth})}),Te.current=C},[se]);const pt=C=>{if(!l[C])return null;const G=Re[C];if(!G)return P(q.current,1,`Panel config not found for panelId: ${C}`),null;const $=G.component,de=G.title,ce=i.draggedPanel===C,U=h[C]||"normal";P(q.current,2,`🎨 renderPanel - ${C}:`,{panelId:C,dragMode:U,timestamp:new Date().toISOString()});const te=V=>{ue.current[C]=V,T&&T(C,V),V&&X.showPanelSizes&&requestAnimationFrame(()=>{const je=V.getBoundingClientRect(),Qe=window.getComputedStyle(V);P(q.current,1,`Panel ${C} mounted with size:`,{width:je.width,height:je.height,x:je.left,y:je.top,minHeight:Qe.minHeight,maxHeight:Qe.maxHeight})})},ie=B[C],K=o===C,me=!!R,oe=()=>R?.(K?null:C),ye=K?{position:"fixed",top:"var(--aqdd-maximize-top, 0px)",right:"var(--aqdd-maximize-right, 0px)",bottom:"var(--aqdd-maximize-bottom, 0px)",left:"var(--aqdd-maximize-left, 0px)",zIndex:50,minHeight:0,maxHeight:"none"}:{minHeight:G.minHeight??"200px",maxHeight:G.maxHeight??"500px"},we=I==="header",Be=U==="normal"&&!we&&!K,Ge=U==="normal"&&we&&!K,Ze=ce?"cursor-grabbing":"cursor-grab",Je=`panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${U==="custom"?"select-none":""}`,vt=K?`${Je} rounded-none bg-white/95 p-4 ${m}`:`${Je} rounded-2xl bg-white/80 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${we?"":Ze} ${m}`;return e.jsxs("div",{ref:te,"data-panel-id":C,"data-dragging":ce,"data-maximized":K||void 0,role:"presentation",draggable:Be,onDragStart:V=>Be&&E(V,C),onDragEnd:y,onClick:V=>k?.(V,C),onMouseDown:V=>L?.(V,C),onTouchStart:V=>_?.(V,C),onTouchMove:Y,onTouchEnd:J,style:ye,className:vt,children:[e.jsxs("div",{className:`group relative mb-3 flex items-center justify-between ${we&&!K?Ze:""}`,draggable:Ge,onDragStart:V=>Ge&&E(V,C),onDoubleClick:me?V=>{V.stopPropagation(),oe()}:void 0,children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("h3",{className:"font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900",children:de}),U==="custom"&&e.jsx("span",{className:"rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs",children:"Custom"})]}),e.jsxs("div",{className:"flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100",children:[e.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),v&&v(C)},onKeyDown:V=>{(V.key==="Enter"||V.key===" ")&&(V.preventDefault(),V.stopPropagation(),v&&v(C))},tabIndex:0,className:`cursor-pointer rounded p-1 text-xs transition-colors ${U==="custom"?"bg-orange-100 text-orange-600 hover:bg-orange-200":"text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,title:U==="custom"?"通常ドラッグモードに戻す":"カスタムドラッグモードに切り替え",children:U==="custom"?e.jsx(ee.MousePointerClick,{className:"h-4 w-4"}):e.jsx(ee.MousePointer,{className:"h-4 w-4"})}),!K&&e.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),a({...l,[C]:!1})},className:"rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",title:"パネルを非表示",children:e.jsx(ee.EyeOff,{className:"h-4 w-4"})}),me&&e.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),oe()},className:"rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",title:K?"元のサイズに戻す":"パネルを最大化",children:K?e.jsx(ee.Minimize2,{className:"h-4 w-4"}):e.jsx(ee.Maximize2,{className:"h-4 w-4"})}),D&&e.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),D(C)},className:"rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-red-500",title:"パネルを閉じる",children:e.jsx(ee.X,{className:"h-4 w-4"})})]})]}),e.jsx("div",{"data-aqdd-scroll-area":!0,className:"panel-scroll-area min-h-0 flex-1 overflow-y-auto",children:e.jsx($,{...G.props||{}})}),e.jsx(_e,{config:X,panelId:C,sizeInfo:ie,onSizeInfoClick:V=>f?.(V,C)})]},C)},bt=(C,G)=>{const $=s[C]||[];let de=!1;for(const U of $)if(l[U]){de=!0;break}const ce=i.isDragging||(M?.isActive??!1);return e.jsx(Pe,{columnIndex:G,isDragging:ce,dragOverPosition:d,config:X,children:e.jsxs("section",{"data-drop-zone":"true","data-column-key":C,"data-column-index":G,"aria-label":`Drop zone for column ${G+1}`,onDragOver:U=>w(U,G),onDrop:U=>c(U,C),onDragLeave:j,className:"relative flex h-full flex-col transition-all duration-200",children:[e.jsx("div",{className:"placeholder-container",children:e.jsx(Ee,{index:0,columnIndex:G,isDragging:ce,dragOverPosition:d,originalPosition:u,onDragEnter:O,onDragLeave:A,debugConfig:X,customDrag:M})}),$.map((U,te)=>{const ie=l[U],K=!(ie||ce);return e.jsxs("div",{className:`panel-with-placeholder ${K?"m-0 h-0 overflow-hidden p-0":""}`,"data-panel-hidden":K?"true":void 0,"aria-hidden":K?"true":void 0,children:[ie?pt(U):ce?e.jsxs("div",{className:"hidden-panel-placeholder relative h-[120px] rounded-2xl border-2 border-amber-300 border-dashed bg-gradient-to-br from-amber-50 to-orange-50 p-3 text-left shadow-lg backdrop-blur-lg",children:[e.jsxs("div",{className:"mb-2 flex items-center space-x-2",children:[e.jsx("h3",{className:"font-semibold text-amber-700 text-base",children:Re[U]?.title||U}),e.jsx("span",{className:"rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs",children:"非表示"})]}),e.jsx("div",{className:"flex-1 overflow-hidden",children:e.jsx("div",{className:"flex h-full items-center justify-center",children:e.jsxs("div",{className:"text-center text-amber-600",children:[e.jsx(ee.EyeOff,{className:"mx-auto h-6 w-6 opacity-50"}),e.jsx("p",{className:"mt-1 text-xs",children:"このパネルは非表示です"})]})})})]}):null,e.jsx(Ee,{index:te+1,columnIndex:G,isDragging:ce,dragOverPosition:d,originalPosition:u,onDragEnter:O,onDragLeave:A,debugConfig:X,customDrag:M})]},`panel-${U}`)}),!(de||ce)&&e.jsx("div",{className:"flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-center text-slate-400 transition-all duration-200",children:e.jsx("div",{className:"text-sm",children:"このエリアは空です"})})]})})},Ve=Object.keys(l).filter(C=>!l[C]);return e.jsxs("div",{className:"flex h-full flex-col",children:[Ve.length>0&&e.jsx("div",{className:"border-slate-200 border-b bg-white/70 px-4 py-2 backdrop-blur-lg",children:e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx("span",{className:"mr-2 text-slate-600 text-sm",children:"非表示のパネル:"}),Ve.map(C=>{const $=Re[C]?.title||C;return e.jsxs("button",{type:"button",onClick:()=>a({...l,[C]:!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:[e.jsx(ee.Eye,{className:"h-3 w-3"}),e.jsx("span",{children:$})]},C)})]})}),e.jsx("div",{ref:Z,className:"relative min-h-0 flex-1 overflow-hidden",children:e.jsx("div",{className:"h-full w-full",style:xt,children:e.jsx("main",{"data-aqdd-scroll-root":!0,className:"no-scrollbar h-full max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6",children:e.jsx("div",{className:"relative flex h-full items-start gap-6 pr-4",children:r.map((C,G)=>{const $=g?.[C.id]||C.initialWidth||350,de=z&&(C.resizable??!0);return e.jsx(n.Fragment,{children:e.jsxs("div",{className:`column relative ${C.className||""} ${z?"resize-enabled-column":"auto-width-column"} ${x&&b===C.id?"column-resizing-active":""}`,"data-column":G,"data-column-id":C.id,"data-min-width":C.minWidth||350,"data-max-width":C.maxWidth,"data-column-width":z?$:void 0,...z&&{style:{"--column-width":`${$}px`}},children:[bt(C.key,G),de&&p&&N&&F&&e.jsx(De,{columnId:C.id,onResizeStart:p,onResize:N,onResizeEnd:F,isResizing:x&&b===C.id,position:"right",debug:X})]})},C.id)})})})})})]})},ot=({columnCount:r,onColumnCountChange:t,onAutoBalance:s,onResetWidths:l,minColumns:a=2,maxColumns:i=6,isResizing:d=!1,isResponsiveMode:u=!1,responsiveColumnCount:h})=>{const E=r>a&&!u,y=r<i&&!u;return e.jsxs("div",{className:"flex items-center gap-3 rounded-lg border border-slate-200 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-lg",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"font-medium text-slate-700 text-sm",children:"カラム数:"}),e.jsx("button",{type:"button",onClick:()=>E&&t(r-1),disabled:!E||d,className:`rounded p-1 text-xs transition-colors ${E&&!d?"border border-slate-300 text-slate-600 hover:border-red-300 hover:bg-red-50 hover:text-red-600":"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,title:u?"レスポンシブモード中：カラム数は自動調整されます":`カラムを削除 (最小: ${a}列)`,children:e.jsx(ee.Minus,{className:"h-3 w-3"})}),e.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?h??r:r,u&&e.jsx("span",{className:"ml-1 text-xs",children:"自動"})]}),e.jsx("button",{type:"button",onClick:()=>y&&t(r+1),disabled:!y||d,className:`rounded p-1 text-xs transition-colors ${y&&!d?"border border-slate-300 text-slate-600 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600":"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,title:u?"レスポンシブモード中：カラム数は自動調整されます":`カラムを追加 (最大: ${i}列)`,children:e.jsx(ee.Plus,{className:"h-3 w-3"})})]}),e.jsx("div",{className:"h-6 w-px bg-slate-300"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:s,disabled:d,className:`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${d?"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300":"border border-slate-300 text-slate-600 hover:border-green-300 hover:bg-green-50 hover:text-green-600"}`,title:"パネルを全カラムに均等分散",children:[e.jsx(ee.Grid3X3,{className:"h-3 w-3"}),e.jsx("span",{children:"バランス"})]}),e.jsxs("button",{type:"button",onClick:l,disabled:d,className:`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${d?"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300":"border border-slate-300 text-slate-600 hover:border-orange-300 hover:bg-orange-50 hover:text-orange-600"}`,title:"カラム幅を初期値にリセット",children:[e.jsx(ee.RotateCcw,{className:"h-3 w-3"}),e.jsx("span",{children:"幅リセット"})]})]}),d&&e.jsxs("div",{className:"flex items-center gap-1 text-blue-600 text-xs",children:[e.jsx("div",{className:"h-2 w-2 animate-pulse rounded-full bg-blue-500"}),e.jsx("span",{children:"リサイズ中..."})]})]})},at=({columnCount:r,onInsertColumn:t,onDeleteColumn:s,minColumns:l=1,maxColumns:a=6,isResizing:i=!1,disabled:d=!1})=>{const u=r<a&&!d,h=r>l&&!d;return e.jsxs("div",{className:`flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-4 py-2 shadow-sm backdrop-blur-lg ${d?"bg-slate-100/80 opacity-60":"bg-white/80"}`,children:[d&&e.jsx("div",{className:"flex items-center gap-2 text-slate-500 text-xs",children:e.jsx("span",{children:"レスポンシブモード有効中：カラム数は自動調整されます"})}),!d&&e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",onClick:()=>u&&t(0),disabled:!u||i,className:`flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${u&&!i?"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:e.jsx(ee.Plus,{className:"h-4 w-4"})}),Array.from({length:r},(E,y)=>e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsxs("div",{className:"relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100",children:[e.jsx("span",{className:"font-medium font-mono text-slate-700 text-xs",children:y+1}),h&&!i&&e.jsx("button",{type:"button",onClick:()=>s(y),className:"absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border border-red-300 bg-red-100 text-red-600 hover:bg-red-200",title:`カラム ${y+1} を削除`,children:e.jsx(ee.X,{className:"h-2.5 w-2.5"})})]}),e.jsx("button",{type:"button",onClick:()=>u&&t(y+1),disabled:!u||i,className:`flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${u&&!i?"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:e.jsx(ee.Plus,{className:"h-4 w-4"})})]},`column-${y}`))]})]})},lt=({config:r,onConfigChange:t,isVisible:s,onToggleVisibility:l})=>s?e.jsxs("div",{className:"fixed right-4 bottom-4 z-50 max-w-sm rounded-lg border border-gray-300 bg-white p-4 shadow-xl",children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between",children:[e.jsx("h3",{className:"font-bold text-gray-800 text-sm",children:"🛠️ デバッグ設定"}),e.jsx("button",{type:"button",onClick:l,className:"text-gray-500 text-lg hover:text-gray-700",title:"閉じる",children:"✕"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[e.jsx("input",{type:"checkbox",checked:r.showDebugPanel??!1,onChange:a=>t({...r,showDebugPanel:a.target.checked}),className:"rounded"}),e.jsx("span",{children:"デバッグパネル表示"})]}),e.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[e.jsx("input",{type:"checkbox",checked:r.showMousePosition??!1,onChange:a=>t({...r,showMousePosition:a.target.checked}),className:"rounded"}),e.jsx("span",{children:"マウス位置表示"})]}),e.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[e.jsx("input",{type:"checkbox",checked:r.showPanelSizes??!1,onChange:a=>t({...r,showPanelSizes:a.target.checked}),className:"rounded"}),e.jsx("span",{children:"パネルサイズ情報"})]}),e.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[e.jsx("input",{type:"checkbox",checked:r.showPlaceholderInfo??!1,onChange:a=>t({...r,showPlaceholderInfo:a.target.checked}),className:"rounded"}),e.jsx("span",{children:"プレースホルダー詳細"})]}),e.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[e.jsx("input",{type:"checkbox",checked:r.showDropZoneOutlines??!1,onChange:a=>t({...r,showDropZoneOutlines:a.target.checked}),className:"rounded"}),e.jsx("span",{children:"ドロップゾーン境界"})]}),e.jsxs("div",{className:"border-gray-200 border-t pt-2",children:[e.jsxs("label",{htmlFor:"log-level-slider",className:"mb-1 block text-sm",children:["ログレベル: ",r.logLevel??0]}),e.jsx("input",{id:"log-level-slider",type:"range",min:"0",max:"2",value:r.logLevel??0,onChange:a=>t({...r,logLevel:parseInt(a.target.value,10)}),className:"w-full","aria-label":"ログレベル設定"}),e.jsxs("div",{className:"mt-1 flex justify-between text-gray-500 text-xs",children:[e.jsx("span",{children:"無効"}),e.jsx("span",{children:"基本"}),e.jsx("span",{children:"詳細"})]})]}),e.jsxs("div",{className:"space-y-2 pt-2",children:[e.jsx("button",{type:"button",onClick:()=>t({showDebugPanel:!0,showMousePosition:!0,showPanelSizes:!0,showPlaceholderInfo:!0,showDropZoneOutlines:!0,logLevel:2}),className:"w-full rounded bg-blue-100 px-2 py-1 text-blue-700 text-sm transition-colors hover:bg-blue-200",children:"すべて有効"}),e.jsx("button",{type:"button",onClick:()=>t({showDebugPanel:!1,showMousePosition:!1,showPanelSizes:!1,showPlaceholderInfo:!1,showDropZoneOutlines:!1,logLevel:0}),className:"w-full rounded bg-gray-100 px-2 py-1 text-gray-700 text-sm transition-colors hover:bg-gray-200",children:"すべて無効"})]})]})]}):e.jsx("button",{type:"button",onClick:l,className:"fixed right-4 bottom-4 z-50 rounded-lg bg-gray-800 p-2 text-white shadow-lg transition-colors hover:bg-gray-700",title:"デバッグ設定を開く",children:"🛠️"}),re={prefix:"column",startIndex:1,separator:"_"},ge=(r,t=re)=>{const{prefix:s,startIndex:l,separator:a}=t,i=r+l;return`${s}${a}${i}`},Se=(r,t=re)=>Array.from({length:r},(s,l)=>ge(l,t)),xe=(r,t=re)=>{const{prefix:s,startIndex:l,separator:a}=t,i=`${s}${a}`;if(!r.startsWith(i))return null;const d=r.slice(i.length),u=parseInt(d,10);return Number.isNaN(u)||u<l?null:u-l},ct=(r,t=re)=>xe(r,t)!==null,it=(r,t=re)=>{const s=r.map(l=>xe(l,t)).filter(l=>l!==null).sort((l,a)=>l-a);for(let l=0;l<s.length;l++)if(s[l]!==l)return ge(l,t);return ge(s.length,t)},We=(r,t=re)=>r.sort((s,l)=>{const a=xe(s,t)??-1,i=xe(l,t)??-1;return a-i}),ut=(r,t=re)=>{const s={};return r.forEach((l,a)=>{const i=ge(a,t);s[l]=i}),s},ze=(r,t,s=re)=>{const l=[];Object.values(r).forEach(d=>{l.push(...d)});const a={},i=Se(t,s);return i.forEach(d=>{a[d]=[]}),l.forEach((d,u)=>{const h=u%t,E=i[h];a[E].push(d)}),a},dt=({initialColumns:r,initialPanels:t,debug:s={},onLayoutChange:l})=>{const[a,i]=n.useState(()=>{const g={};for(const p of r)g[p.id]=p.initialWidth||400;return{columns:r,columnWidths:g,isResizing:!1,resizingColumn:null,columnPanels:t,showInsertPlaceholders:!1}}),d=n.useRef(0),u=n.useRef(0);n.useEffect(()=>{l?.(a)},[a,l]);const h=n.useCallback((g,p)=>{P(s,1,"カラム追加:",g.id,"at position:",p),i(N=>{const F=[...N.columns],x=p??F.length;F.splice(x,0,g);const b={...N.columnWidths,[g.id]:g.initialWidth||400},f={...N.columnPanels,[g.id]:[]};return{...N,columns:F,columnWidths:b,columnPanels:f}})},[s]),E=n.useCallback(g=>{P(s,1,"カラム削除:",g),i(p=>{const N=p.columnPanels[g]||[],F=p.columns.filter(v=>v.id!==g);if(F.length===0)return P(s,1,"警告: 最後のカラムを削除しようとしています"),p;const x=F[0].id,b={...p.columnPanels};N.length>0&&(b[x]=[...b[x],...N]),delete b[g];const f={...p.columnWidths};return delete f[g],{...p,columns:F,columnWidths:f,columnPanels:b}})},[s]),y=n.useCallback((g,p)=>{P(s,1,"カラム移動:",g,"->",p),i(N=>{const F=[...N.columns],[x]=F.splice(g,1);return F.splice(p,0,x),{...N,columns:F}})},[s]),O=n.useCallback((g,p)=>{P(s,2,"リサイズ開始:",g,"at X:",p),d.current=p,u.current=a.columnWidths[g]||300,i(N=>({...N,isResizing:!0,resizingColumn:g}))},[s,a.columnWidths]),A=n.useCallback(g=>{const{resizingColumn:p,isResizing:N}=a;if(!(N&&p))return;const F=g-d.current,x=Math.max(100,Math.min(800,u.current+F));P(s,2,"リサイズ中:",p,"new width:",x),i(b=>({...b,columnWidths:{...b.columnWidths,[p]:x}}))},[s,a]),w=n.useCallback(()=>{P(s,2,"リサイズ終了"),i(g=>({...g,isResizing:!1,resizingColumn:null}))},[s]),c=n.useCallback((g,p)=>{P(s,2,"カラム幅設定:",g,p),i(N=>({...N,columnWidths:{...N.columnWidths,[g]:Math.max(100,Math.min(800,p))}}))},[s]),j=n.useCallback(()=>{P(s,1,"カラム幅リセット"),i(g=>{const p={};for(const N of g.columns)p[N.id]=N.initialWidth||400;return{...g,columnWidths:p}})},[s]),k=n.useCallback((g,p,N,F)=>{P(s,1,"パネル移動:",g,"from",p,"to",N,"at",F),i(x=>{const b={...x.columnPanels};if(p in b&&(b[p]=b[p].filter(f=>f!==g)),N in b){const f=[...b[N]];f.splice(F,0,g),b[N]=f}return{...x,columnPanels:b}})},[s]),L=n.useCallback((g,p,N)=>{P(s,1,"パネル追加:",g,"to column:",p),i(F=>{const x={...F.columnPanels};p in x||(x[p]=[]);const b=[...x[p]],f=N??b.length;return b.splice(f,0,g),x[p]=b,{...F,columnPanels:x}})},[s]),_=n.useCallback(g=>{P(s,1,"パネル削除:",g),i(p=>{const N={};for(const[F,x]of Object.entries(p.columnPanels))N[F]=x.filter(b=>b!==g);return{...p,columnPanels:N}})},[s]),Y=n.useCallback(g=>{P(s,1,"カラム数更新:",g),i(p=>{const N=p.columns.length;if(g===N)return p;const F=ze(p.columnPanels,g,re),x=Se(g,re),b=p.isResizing&&p.resizingColumn&&!x.includes(p.resizingColumn);b&&P(s,1,"リサイズ中のカラムが削除されるためリサイズを強制終了:",p.resizingColumn);const f=x.map((M,I)=>({id:M,title:`カラム ${I+1}`,minWidth:350,maxWidth:800,initialWidth:400,resizable:!(I===1&&g===3)})),v={};if(Object.entries(p.columnWidths).some(([,M])=>M!==400))x.forEach(M=>{const I=p.columnWidths[M];I&&I!==400?v[M]=I:v[M]=400});else{const M=N>g?Object.values(p.columnWidths).reduce((o,m)=>o+m,0):g*400,I=Math.max(M/g,350);x.forEach(o=>{v[o]=I})}return{...p,columns:f,columnPanels:F,columnWidths:v,isResizing:b?!1:p.isResizing,resizingColumn:b?null:p.resizingColumn}})},[s]),J=n.useCallback(()=>{P(s,1,"カラム自動バランス調整"),i(g=>{const p=[];for(const x of Object.keys(g.columnPanels))for(const b of g.columnPanels[x])p.push(b);const N={};for(const x of g.columns)N[x.id]=[];let F=0;for(const x of p){const b=g.columns[F%g.columns.length].id;N[b].push(x),F+=1}return{...g,columnPanels:N}})},[s]),X=n.useCallback(g=>a.columns.find(p=>p.id===g),[a.columns]),B=n.useCallback(()=>{let g=0;for(const p of Object.values(a.columnWidths))g+=p;return g},[a.columnWidths]),T=n.useCallback(g=>document.querySelector(`[data-column-id="${g}"]`),[]),z=n.useCallback(g=>{i(p=>({...p,showInsertPlaceholders:g}))},[]);return{layoutState:a,addColumn:h,removeColumn:E,moveColumn:y,startResize:O,handleResize:A,endResize:w,setColumnWidth:c,resetColumnWidths:j,movePanel:k,addPanel:L,removePanel:_,updateColumnCount:Y,autoBalanceColumns:J,getColumnById:X,getTotalWidth:B,getColumnElement:T,setShowInsertPlaceholders:z}},pe={triggerDistance:80,scrollSpeed:5,maxScrollSpeed:20},Ne=(r,t,s=pe,l)=>{const{triggerDistance:a,scrollSpeed:i,maxScrollSpeed:d}=s;let u;l?u=l.getBoundingClientRect():u=new DOMRect(0,0,window.innerWidth,window.innerHeight);const{left:h,top:E,right:y,bottom:O}=u;let A=0,w=0;if(r>=h&&r<=y&&t>=E&&t<=O){if(r<h+a){const c=Math.max(0,(h+a-r)/a);A=-Math.min(d,i+c*(d-i))}else if(r>y-a){const c=Math.max(0,(r-(y-a))/a);A=Math.min(d,i+c*(d-i))}if(t<E+a){const c=Math.max(0,(E+a-t)/a);w=-Math.min(d,i+c*(d-i))}else if(t>O-a){const c=Math.max(0,(t-(O-a))/a);w=Math.min(d,i+c*(d-i))}}return{x:A,y:w}},Fe=(r,t)=>{(r.x!==0||r.y!==0)&&(t?t.scrollBy(r.x,r.y):window.scrollBy(r.x,r.y))};class Oe{constructor(t=pe,s){this.intervalId=null,this.isActive=!1,this.config=t,this.scrollElement=s}setScrollElement(t){this.scrollElement=t}start(t,s){this.isActive||(this.isActive=!0,this.intervalId=window.setInterval(()=>{const l=Ne(t,s,this.config,this.scrollElement);Fe(l,this.scrollElement)},16))}update(t,s){const l=Ne(t,s,this.config,this.scrollElement);(l.x!==0||l.y!==0)&&!this.isActive?this.start(t,s):l.x===0&&l.y===0&&this.isActive&&this.stop()}stop(){this.intervalId!==null&&(clearInterval(this.intervalId),this.intervalId=null),this.isActive=!1}isScrolling(){return this.isActive}updateConfig(t){this.config=t}}const Ye=({debugConfig:r,dragState:t,customDrag:s,clickState:l,dragModes:a,isMouseDown:i,dragOverPosition:d,setCustomDrag:u,setDragState:h,setDragOverPosition:E,setOriginalPanelPosition:y,setClickState:O,setIsMouseDown:A,findPanelPosition:w,performPanelMove:c,showMousePosition:j,updateMousePosition:k,recordMouseDown:L,recordClickPosition:_,isVirtualClick:Y,calculateMoveDistance:J,clearMouseTracking:X,resetDragState:B,resetClickState:T,createDragImage:z,updateDragImagePosition:g,removeDragImage:p,handlePlaceholderDragEnter:N,handlePlaceholderDragLeave:F})=>{const x=n.useRef(r);x.current=r;const b=n.useRef(null),f=n.useRef(null),v=n.useRef(0),D=n.useRef(new Oe(pe));n.useEffect(()=>{const m=document.querySelector("main[data-aqdd-scroll-root]");m&&D.current.setScrollElement(m)},[]);const R=n.useRef(d);n.useEffect(()=>{R.current=d,P(x.current,2,"dragOverPositionRef更新:",d)},[d]);const M=n.useCallback(m=>{if(s.isActive||l.isClicked){m.preventDefault();const S=window.getSelection();S&&S.rangeCount>0&&S.removeAllRanges()}if(s.isActive){k(m.clientX,m.clientY),g(m.clientX,m.clientY),D.current.update(m.clientX,m.clientY);const S=document.elementFromPoint(m.clientX,m.clientY),H=S?.closest("[data-drop-zone]");if(H){document.body.classList.add("droppable");const Q=H.getAttribute("data-column-index"),q=Q?parseInt(Q,10):null;q!==null&&q!==t.dragOverColumn&&h(ne=>({...ne,dragOverColumn:q}));const Z=S?.closest("[data-placeholder-index]");if(Z){const ne=Z.getAttribute("data-placeholder-index"),le=Z.getAttribute("data-placeholder-column");if(ne&&le){const se=parseInt(ne,10),ve=parseInt(le,10);N(ve,se)}}else F()}else document.body.classList.remove("droppable"),E(null),h(Q=>({...Q,dragOverColumn:null}))}else if(i&&l.isClicked&&l.panelId){if(a[l.panelId]!=="custom"||J(m.clientX,m.clientY)<10)return;P(x.current,1,"🚀 カスタムドラッグ開始 -",l.panelId);const H=document.querySelector(`[data-panel-id="${l.panelId}"]`);if(H&&f.current){const Q=H.getBoundingClientRect(),q=f.current.x-Q.left,Z=f.current.y-Q.top;z(l.panelId,q,Z),document.body.classList.add("custom-dragging"),u({isActive:!0,panelId:l.panelId,startX:q,startY:Z})}h({isDragging:!0,draggedPanel:l.panelId,dragOverColumn:null}),y(w(l.panelId)),j(m.clientX,m.clientY),O({isClicked:!1,panelId:null}),A(!1),X(),f.current=null,b.current&&(clearTimeout(b.current),b.current=null)}},[s.isActive,l,t.dragOverColumn,a,i,k,h,E,J,w,u,y,j,O,A,X,z,g,N,F]),I=n.useCallback(m=>{if(P(x.current,1,"🐭 カスタムドラッグハンドラー - グローバルマウスアップ",{isActive:s.isActive,panelId:s.panelId,dragMode:s.panelId?a[s.panelId]:"unknown"}),s.isActive){D.current.stop();const S=R.current;if(S){const Q=document.elementFromPoint(m.clientX,m.clientY)?.closest("[data-drop-zone]");if(Q){const q=Q.getAttribute("data-column-key");q&&a[s.panelId]==="custom"?(P(x.current,1,"🔄 カスタムドラッグパネル移動実行:",s.panelId,"→",q),c(s.panelId,q,S.insertIndex)):P(x.current,1,"🚫 カスタムドラッグパネル移動スキップ:",s.panelId,"モード:",a[s.panelId])}}p(),document.body.classList.remove("custom-dragging","droppable"),B(),v.current=0}else if(Y(m.clientX,m.clientY)){const H=document.elementFromPoint(m.clientX,m.clientY)?.closest("[data-panel-id]"),Q=H?.getAttribute("data-panel-id")??null;if(!(H&&Q)||a[Q]!=="custom"){b.current&&(clearTimeout(b.current),b.current=null),T(),f.current=null,v.current=0;return}v.current+=1,l.isClicked===!1&&v.current===1?(P(x.current,1,"🖱️ 仮想クリック検出 - ドラッグ待機状態へ:",Q),O({isClicked:!0,panelId:Q}),b.current=window.setTimeout(()=>{P(x.current,1,"⏳ クリック待機状態を自動解除:",Q),T(),f.current=null,v.current=0},2e3)):(P(x.current,1,"🚫 クリック待機状態を解除 - 仮想クリック検出停止:",Q),b.current&&(clearTimeout(b.current),b.current=null),T(),f.current=null,v.current=0,b.current=window.setTimeout(()=>{P(x.current,1,"⏳ 仮想クリック検出再開:",Q)},2e3))}else l.isClicked&&(T(),f.current=null,v.current=0);i&&A(!1)},[s.isActive,s.panelId,l,a,i,c,B,T,Y,O,A,p]),o=n.useCallback((m,S)=>{if(a[S]!=="custom"){P(x.current,1,"🚫 カスタムドラッグモードではない - スキップ:",S);return}L(m.clientX,m.clientY),l.isClicked&&l.panelId===S&&(A(!0),b.current!==null&&(clearTimeout(b.current),b.current=null),_(m.clientX,m.clientY),f.current={x:m.clientX,y:m.clientY})},[l,a,L,A,_]);return n.useEffect(()=>()=>{b.current!==null&&clearTimeout(b.current),D.current.stop()},[]),{handleGlobalMouseMove:M,handleGlobalMouseUp:I,handleMouseDown:o}},Xe=()=>{const[r,t]=n.useState({isDragging:!1,draggedPanel:null,dragOverColumn:null}),[s,l]=n.useState(null),[a,i]=n.useState(null),[d,u]=n.useState({isActive:!1,panelId:"",startX:0,startY:0}),[h,E]=n.useState({isClicked:!1,panelId:null}),[y,O]=n.useState({isTouchDragging:!1,startX:0,startY:0,currentX:0,currentY:0,draggedElement:null}),[A,w]=n.useState(!1),c=n.useCallback(()=>{u({isActive:!1,panelId:"",startX:0,startY:0}),t({isDragging:!1,draggedPanel:null,dragOverColumn:null}),l(null),i(null)},[]),j=n.useCallback(()=>{E({isClicked:!1,panelId:null}),w(!1)},[]),k=n.useCallback(T=>{t(T)},[]),L=n.useCallback(T=>{l(T)},[]),_=n.useCallback(T=>{i(T)},[]),Y=n.useCallback(T=>{u(T)},[]),J=n.useCallback(T=>{E(T)},[]),X=n.useCallback(T=>{O(T)},[]),B=n.useCallback(T=>{w(T)},[]);return{dragState:r,dragOverPosition:s,originalPanelPosition:a,customDrag:d,clickState:h,touchDragState:y,isMouseDown:A,setDragState:k,setDragOverPosition:L,setOriginalPanelPosition:_,setCustomDrag:Y,setClickState:J,setTouchDragState:X,setIsMouseDown:B,resetDragState:c,resetClickState:j}},He=()=>{const[r,t]=n.useState({x:0,y:0,isVisible:!1}),s=n.useRef(null),l=n.useRef(0),a=n.useRef(null),i=n.useCallback((w,c)=>{t({x:w,y:c,isVisible:!0})},[]),d=n.useCallback(()=>{t(w=>({...w,isVisible:!1}))},[]),u=n.useCallback((w,c)=>{t(j=>j.x===w&&j.y===c?j:{x:w,y:c,isVisible:j.isVisible})},[]),h=n.useCallback((w,c)=>{l.current=Date.now(),a.current={x:w,y:c}},[]),E=n.useCallback((w,c)=>{s.current={x:w,y:c}},[]),y=n.useCallback((w,c,j=500,k=5)=>Date.now()-(l.current||0)>=j||!a.current?!1:Math.sqrt((w-a.current.x)**2+(c-a.current.y)**2)<k,[]),O=n.useCallback((w,c)=>{if(!s.current)return 0;const j=Math.abs(w-s.current.x),k=Math.abs(c-s.current.y);return Math.sqrt(j*j+k*k)},[]),A=n.useCallback(()=>{s.current=null,l.current=0,a.current=null},[]);return{mousePosition:r,lastClickPosition:s.current,mouseDownTime:l.current,mouseDownPosition:a.current,showMousePosition:i,hideMousePosition:d,updateMousePosition:u,recordMouseDown:h,recordClickPosition:E,isVirtualClick:y,calculateMoveDistance:O,clearMouseTracking:A}},Ie=({debugConfig:r,dragState:t,customDrag:s,dragModes:l,columnPanels:a,dragOverPosition:i,originalPanelPosition:d,setDragState:u,setDragOverPosition:h,setOriginalPanelPosition:E,performPanelMove:y,showMousePosition:O,updateMousePosition:A,resetDragState:w,handlePlaceholderDragEnter:c,handlePlaceholderDragLeave:j,scale:k=1})=>{const L=n.useRef(r);L.current=r;const _=n.useRef(a);_.current=a;const Y=n.useRef(t);Y.current=t;const J=n.useRef(i);J.current=i;const X=n.useRef(d);X.current=d;const B=n.useRef(k);B.current=k;const T=n.useRef(new Oe(pe));n.useEffect(()=>{const x=document.querySelector("main[data-aqdd-scroll-root]");x&&T.current.setScrollElement(x)},[]);const z=n.useCallback((x,b)=>{if(s.isActive){P(L.current,2,"カスタムドラッグアクティブ中 - 通常ドラッグを無効化:",b),x.preventDefault();return}if(l[b]==="custom"){P(L.current,2,"カスタムドラッグモード - 通常ドラッグを無効化:",b),x.preventDefault();return}P(L.current,1,"ドラッグ開始:",b);const f=Object.keys(_.current);let v=null;for(let D=0;D<f.length;D++){const R=f[D],M=_.current[R].indexOf(b);if(M!==-1){v={columnIndex:D,panelIndex:M};break}}if(E(v),x.dataTransfer){x.dataTransfer.setData("text/plain",b),x.dataTransfer.effectAllowed="move";const D=B.current;if(D<1){const R=x.currentTarget.closest("[data-panel-id]")??x.currentTarget,M=R.getBoundingClientRect(),I=R.offsetWidth,o=R.offsetHeight,m=R.cloneNode(!0);m.removeAttribute("data-panel-id"),m.removeAttribute("id"),m.style.margin="0",m.style.width=`${I}px`,m.style.height=`${o}px`,m.style.transform=`scale(${D})`,m.style.transformOrigin="top left";const S=document.createElement("div");S.style.position="fixed",S.style.top="0",S.style.left="-10000px",S.style.width=`${I*D}px`,S.style.height=`${o*D}px`,S.style.overflow="hidden",S.style.opacity="0.8",S.style.pointerEvents="none",S.appendChild(m),document.body.appendChild(S),x.dataTransfer.setDragImage(S,x.clientX-M.left,x.clientY-M.top),requestAnimationFrame(()=>S.remove())}}O(x.clientX,x.clientY),requestAnimationFrame(()=>{u({isDragging:!0,draggedPanel:b,dragOverColumn:null})})},[l,s.isActive,E,O,u]),g=n.useCallback(()=>{P(L.current,1,"ドラッグ終了"),T.current.stop(),w()},[w]),p=n.useCallback((x,b)=>{if(x.preventDefault(),x.dataTransfer.dropEffect="move",!Y.current.isDragging)return;A(x.clientX,x.clientY),b!==Y.current.dragOverColumn&&u(D=>({...D,dragOverColumn:b}));const f=document.elementFromPoint(x.clientX,x.clientY),v=f?.closest("[data-placeholder-index]");if(v){const D=v.getAttribute("data-placeholder-index"),R=v.getAttribute("data-placeholder-column");if(D&&R){const M=parseInt(D,10),I=parseInt(R,10);c(I,M)}}else f?.closest("[data-drop-zone]")||j()},[A,u,c,j]),N=n.useCallback((x,b)=>{x.preventDefault();const f=x.dataTransfer.getData("text/plain"),v=J.current;f&&v&&(P(L.current,1,"🎯 ドロップ完了:",{draggedPanel:f,targetColumn:b,insertPosition:`カラム${v.columnIndex} - 位置${v.insertIndex}`}),y(f,b,v.insertIndex),h(null),g())},[y,h,g]),F=n.useCallback(x=>{const b=x.currentTarget,f=x.relatedTarget;f&&b.contains(f)||(h(null),u(v=>({...v,dragOverColumn:null})))},[h,u]);return n.useEffect(()=>{const x=b=>{Y.current.isDragging&&(A(b.clientX,b.clientY),T.current.update(b.clientX,b.clientY))};if(t.isDragging)return document.addEventListener("dragover",x),()=>{document.removeEventListener("dragover",x),T.current.stop()}},[t.isDragging,A]),n.useEffect(()=>()=>{T.current.stop()},[]),{handleDragStart:z,handleDragEnd:g,handleDragOverWithInsert:p,handleDropWithInsert:N,handleColumnDragLeave:F}},Ue=(r,t=1)=>{const[s,l]=n.useState(r),[a,i]=n.useState({}),d=n.useRef({}),u=n.useRef(null),h=n.useRef({x:0,y:0}),E=n.useRef(t);E.current=t;const y=n.useCallback(_=>document.querySelector(`[data-panel-id="${_}"]`),[]),O=n.useCallback((_,Y)=>{const J=Y.getBoundingClientRect(),X=window.getComputedStyle(Y),B={width:Math.round(J.width),height:Math.round(J.height),x:Math.round(J.left),y:Math.round(J.top),minHeight:X.minHeight||"auto",maxHeight:X.maxHeight||"none"},T=d.current[_];(!T||Object.keys(B).some(z=>T[z]!==B[z]))&&(d.current[_]=B,i(z=>({...z,[_]:B})))},[]),A=n.useCallback(_=>{const Y=y(_);Y&&O(_,Y)},[y,O]),w=n.useCallback((_,Y)=>{Y&&requestAnimationFrame(()=>O(_,Y))},[O]),c=n.useCallback((_,Y,J)=>{const X=y(_);if(!X||u.current)return;const B=E.current,T=X.getBoundingClientRect(),z=X.cloneNode(!0);z.removeAttribute("data-panel-id"),z.style.position="fixed",z.style.top="0px",z.style.left="0px",z.style.width=`${X.offsetWidth}px`,z.style.height=`${X.offsetHeight}px`,z.style.pointerEvents="none",z.style.zIndex="1000",z.style.opacity="0.5",z.style.margin="0",z.style.transition="none",z.style.boxShadow="0 8px 32px rgba(0,0,0,0.3)",z.style.transformOrigin="top left",z.style.transform=`translate(${T.left}px, ${T.top}px) scale(${B})`,z.id=`drag-image-${_}`,document.body.appendChild(z),u.current=z,h.current={x:Y,y:J}},[y]),j=n.useCallback((_,Y)=>{if(u.current){const J=_-h.current.x,X=Y-h.current.y;u.current.style.transform=`translate(${J}px, ${X}px) scale(${E.current*1.05})`}},[]),k=n.useCallback(()=>{u.current&&(u.current.remove(),u.current=null)},[]),L=n.useCallback(_=>{l(Y=>({...Y,[_]:!Y[_]}))},[]);return{panelVisibility:s,panelSizes:a,setPanelVisibility:l,setPanelSizes:i,setPanelRef:w,updatePanelSize:A,togglePanelVisibility:L,getPanelElement:y,createDragImage:c,updateDragImagePosition:j,removeDragImage:k}},mt=({initialColumnPanels:r,initialPanelVisibility:t,initialDragModes:s={},debugConfig:l,onPanelMove:a,onDragModeChange:i,onColumnPanelsChange:d,scale:u=1})=>{const h=n.useRef(l);h.current=l;const[E,y]=n.useState(r),[O,A]=n.useState(s),w=n.useRef(E);w.current=E;const c=Xe(),j=He(),k=Ue(t,u),L=n.useRef({mousemove:null,mouseup:null}),_=n.useCallback(f=>{const v=Object.keys(w.current),D=We(v,re);for(let R=0;R<D.length;R++){const M=D[R],I=w.current[M]?.indexOf(f)??-1;if(I!==-1)return{columnIndex:R,panelIndex:I}}return null},[]),Y=n.useCallback((f,v,D)=>{P(h.current,1,"🔄 パネル移動実行:",f,"→",v,"@",D),y(R=>{const M={...R},I=Object.keys(M).find(o=>M[o].includes(f));if(!I)return console.error("Source column not found for panel:",f),R;if(!M[v])return console.error("Target column not found:",v),R;if(I===v){const o=[...M[I]],m=o.indexOf(f),[S]=o.splice(m,1),H=m<D?D-1:D;o.splice(H,0,S),M[v]=o}else{M[I]=M[I].filter(m=>m!==f);const o=[...M[v]];o.splice(D,0,f),M[v]=o}if(P(h.current,1,"✅ パネル移動完了:",f,"→",v),d&&requestAnimationFrame(()=>{d(M)}),a){const o=Object.keys(R).find(m=>R[m].includes(f));o&&requestAnimationFrame(()=>{a(f,o,v,D)})}return M})},[d,a]),J=n.useCallback((f,v)=>{if(!(c.dragState.isDragging||c.customDrag.isActive))return;const D=c.originalPanelPosition;if(D&&D.columnIndex===f&&(D.panelIndex===v||D.panelIndex+1===v)){P(h.current,1,`元の位置への挿入をスキップ: カラム${f}, 位置${v}`);return}const R=c.dragOverPosition;(!R||R.columnIndex!==f||R.insertIndex!==v)&&(P(h.current,1,`プレースホルダーエンター: カラム${f}, 位置${v}`),c.setDragOverPosition({columnIndex:f,insertIndex:v}),c.setDragState(M=>({...M,dragOverColumn:f})))},[c]),X=n.useCallback((f,v,D)=>{if(c.dragState.isDragging||c.customDrag.isActive){if(c.customDrag.isActive)P(h.current,1,"🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"),c.setDragOverPosition(null);else if(c.dragState.isDragging&&f&&v!==void 0&&D!==void 0){const R=c.dragOverPosition;if(R&&R.columnIndex===v&&R.insertIndex===D){const M=f.currentTarget,I=f.relatedTarget;I&&M.contains(I)||(P(h.current,1,`ノーマルドラッグ - プレースホルダーリーブ: カラム${v}, 位置${D}。ハイライトを解除します。`),c.setDragOverPosition(null))}}}},[c]),B=Ye({debugConfig:h.current,dragState:c.dragState,customDrag:c.customDrag,clickState:c.clickState,dragModes:O,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:_,performPanelMove:Y,showMousePosition:j.showMousePosition,updateMousePosition:j.updateMousePosition,recordMouseDown:j.recordMouseDown,recordClickPosition:j.recordClickPosition,isVirtualClick:j.isVirtualClick,calculateMoveDistance:j.calculateMoveDistance,clearMouseTracking:j.clearMouseTracking,resetDragState:c.resetDragState,resetClickState:c.resetClickState,createDragImage:k.createDragImage,updateDragImagePosition:k.updateDragImagePosition,removeDragImage:k.removeDragImage,handlePlaceholderDragEnter:J,handlePlaceholderDragLeave:X}),T=Ie({debugConfig:h.current,dragState:c.dragState,customDrag:c.customDrag,dragModes:O,columnPanels:E,dragOverPosition:c.dragOverPosition,originalPanelPosition:c.originalPanelPosition,setDragState:c.setDragState,setDragOverPosition:c.setDragOverPosition,setOriginalPanelPosition:c.setOriginalPanelPosition,performPanelMove:Y,showMousePosition:j.showMousePosition,updateMousePosition:j.updateMousePosition,resetDragState:c.resetDragState,handlePlaceholderDragEnter:J,handlePlaceholderDragLeave:X,scale:u}),z=n.useCallback(f=>{L.current.mousemove&&L.current.mousemove(f)},[]),g=n.useCallback(f=>{L.current.mouseup&&L.current.mouseup(f)},[]);n.useEffect(()=>(P(h.current,1,"🔧 グローバルイベントリスナー初期化 - refベース管理開始"),document.addEventListener("mousemove",z),document.addEventListener("mouseup",g),()=>{P(h.current,1,"🔴 グローバルイベントリスナー終了 - refベース管理終了"),document.removeEventListener("mousemove",z),document.removeEventListener("mouseup",g)}),[z,g]),n.useEffect(()=>{const f=!c.clickState.isClicked&&Object.entries(O).some(([,D])=>D==="custom"),v=c.clickState.isClicked&&c.clickState.panelId;if(f||v){const D=f?"パターン1（仮想クリック検出）":"パターン2,3（ドラッグ準備）";P(h.current,1,`🔧 イベントハンドラー設定開始: ${D}`),L.current.mousemove=B.handleGlobalMouseMove,L.current.mouseup=B.handleGlobalMouseUp}else c.customDrag.isActive||c.dragState.isDragging||(L.current.mousemove=null,L.current.mouseup=null)},[c.clickState.isClicked,c.clickState.panelId,O,c.customDrag.isActive,c.dragState.isDragging,B.handleGlobalMouseMove,B.handleGlobalMouseUp]);const p=n.useCallback((f,v)=>{const D=f.touches[0],R=f.currentTarget;c.setTouchDragState({isTouchDragging:!0,startX:D.clientX,startY:D.clientY,currentX:D.clientX,currentY:D.clientY,draggedElement:R}),c.setDragState({isDragging:!0,draggedPanel:v,dragOverColumn:null})},[c]),N=n.useCallback(f=>{if(!c.touchDragState.isTouchDragging)return;f.preventDefault();const v=f.touches[0];c.setTouchDragState(D=>({...D,currentX:v.clientX,currentY:v.clientY}))},[c.touchDragState.isTouchDragging,c]),F=n.useCallback(f=>{c.touchDragState.isTouchDragging&&(c.setTouchDragState({isTouchDragging:!1,startX:0,startY:0,currentX:0,currentY:0,draggedElement:null}),T.handleDragEnd())},[c.touchDragState.isTouchDragging,c,T]),x=n.useCallback(f=>{P(h.current,1,"🔄 toggleDragMode called:",{panelId:f}),A(v=>{const R=(v[f]||"normal")==="normal"?"custom":"normal",M={...v,[f]:R};if(i)try{i(f,R)}catch(I){console.error("🔄 Error in onDragModeChange:",I)}return M})},[i]),b=n.useCallback((f,v)=>{f.stopPropagation(),P(h.current,2,"パネルサイズ情報クリック:",v)},[]);return{columnPanels:E,panelVisibility:k.panelVisibility,dragModes:O,dragState:c.dragState,dragOverPosition:c.dragOverPosition,originalPanelPosition:c.originalPanelPosition,touchDragState:c.touchDragState,customDrag:c.customDrag,clickState:c.clickState,mousePosition:j.mousePosition,panelSizes:k.panelSizes,setColumnPanels:y,setPanelVisibility:k.setPanelVisibility,setDragModes:A,setPanelRef:k.setPanelRef,handleDragStart:T.handleDragStart,handleDragEnd:T.handleDragEnd,handleMouseDown:B.handleMouseDown,handleTouchStart:p,handleTouchMove:N,handleTouchEnd:F,handlePlaceholderDragEnter:J,handlePlaceholderDragLeave:X,handleDragOverWithInsert:T.handleDragOverWithInsert,handleDropWithInsert:T.handleDropWithInsert,handleColumnDragLeave:T.handleColumnDragLeave,handlePanelSizeInfoClick:b,toggleDragMode:x,findPanelPosition:_}},ht=({minColumnWidth:r=350,defaultColumns:t=3,maxColumns:s=6,minColumns:l=1,currentColumnWidths:a={}}={})=>{const[i,d]=n.useState(0),u=n.useRef(0),h=n.useRef(null),[E,y]=n.useState(!1),O=n.useRef(t);n.useEffect(()=>{if(typeof window>"u")return;const c=()=>{const k=window.visualViewport?.width??0,L=document?.documentElement?.clientWidth??0,_=document?.body?.clientWidth??0,Y=window.innerWidth??0;return L>0?Math.floor(L):k>0?Math.floor(k):_>0?Math.floor(_):Math.floor(Y)},j=()=>{h.current!==null&&cancelAnimationFrame(h.current),h.current=requestAnimationFrame(()=>{const k=c();h.current=null,k!==0&&(Math.abs(u.current-k)<2||(u.current=k,d(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)}},[]);const A=n.useMemo(()=>{if(!E||i===0)return O.current=t,t;const c=Math.max(i-64,0),j=24,k=Object.values(a);let L;if(k.length>0){const _=k.reduce((X,B)=>X+B,0)/k.length,Y=Math.max(r,_);L=Math.floor((c+j)/(Y+j)),k.reduce((X,B)=>X+B,0)+(k.length-1)*j>c&&k.length>l&&(L=Math.min(L,k.length-1))}else L=Math.floor((c+j)/(r+j));return L=Math.max(l,Math.min(s,L)),O.current===L?O.current:(O.current=L,L)},[E,i,t,r,s,l,a]),w=n.useCallback(()=>{y(c=>!c)},[]);return{responsiveColumnCount:A,isResponsiveMode:E,screenWidth:i,toggleResponsiveMode:w}},ft=({isResponsiveMode:r,responsiveColumnCount:t,currentColumnCount:s,screenWidth:l,onToggleResponsive:a})=>e.jsxs("div",{className:"flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1",children:[e.jsxs("button",{type:"button",onClick:a,className:`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${r?"border border-blue-300 bg-blue-100 text-blue-700":"border border-slate-300 text-slate-600 hover:bg-blue-50 hover:text-blue-600"}`,title:r?"レスポンシブモードを無効化":"レスポンシブモードを有効化",children:[r?e.jsx(ee.Smartphone,{className:"h-3 w-3"}):e.jsx(ee.Monitor,{className:"h-3 w-3"}),e.jsx("span",{children:r?"レスポンシブ":"固定"})]}),r&&e.jsxs("div",{className:"flex items-center gap-1 text-slate-600 text-xs",children:[e.jsxs("span",{className:"font-mono",children:[l,"px"]}),e.jsx("span",{children:"→"}),e.jsxs("span",{className:"font-semibold text-blue-600",children:[t,"列"]}),t!==s&&e.jsx("span",{className:"text-orange-600",children:"(変更予定)"})]})]}),gt={showDebugPanel:!1,showMousePosition:!1,showPanelSizes:!1,showPlaceholderInfo:!1,showDropZoneOutlines:!1,logLevel:0};W.ColumnControlPanel=ot,W.ColumnInsertPanel=at,W.DEFAULT_COLUMN_ID_CONFIG=re,W.DEFAULT_DEBUG_CONFIG=gt,W.DEFAULT_EDGE_SCROLL_CONFIG=pe,W.DebugControlPanel=lt,W.DragDropLayout=rt,W.DropZoneDebugOverlay=Pe,W.EdgeScrollManager=Oe,W.InsertPlaceholder=ke,W.PanelSizeDisplay=_e,W.ResizableColumn=st,W.ResizeHandle=De,W.ResponsiveControl=ft,W.calculateScrollVector=Ne,W.createColumnIdMapping=ut,W.debugLog=P,W.generateColumnId=ge,W.generateColumnIds=Se,W.getNextColumnId=it,W.isValidColumnId=ct,W.normalizeColumnPanels=ze,W.parseColumnId=xe,W.performScroll=Fe,W.sortColumnIds=We,W.useColumnLayout=dt,W.useCustomDragHandlers=Ye,W.useDragDropColumns=mt,W.useDragDropState=Xe,W.useMouseTracking=He,W.useNormalDragHandlers=Ie,W.usePanelManagement=Ue,W.useResponsiveColumns=ht,Object.defineProperty(W,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,X,Z,ne,Z),I[Z+X]=!0)}if(Z=null,E!==void 0&&(n(E),Z=""+E),d(h)&&(n(h.key),Z=""+h.key),"key"in h){E={};for(var le in h)le!=="key"&&(E[le]=h[le])}else E=h;return Z&&u(E,typeof l=="function"?l.displayName||l.name||"Unknown":l),P(l,Z,E,a(),Q,q)}function M(l){A(l)?l._store&&(l._store.validated=1):typeof l=="object"&&l!==null&&l.$$typeof===g&&(l._payload.status==="fulfilled"?A(l._payload.value)&&l._payload.value._store&&(l._payload.value._store.validated=1):l._store&&(l._store.validated=1))}function A(l){return typeof l=="object"&&l!==null&&l.$$typeof===c}var w=s,c=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),Y=Symbol.for("react.consumer"),J=Symbol.for("react.context"),H=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),R=Symbol.for("react.suspense_list"),W=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),x=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),z=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,p=Object.prototype.hasOwnProperty,b=Array.isArray,f=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(l){return l()}};var y,D={},_=w.react_stack_bottom_frame.bind(w,i)(),O=f(r(i)),I={};fe.Fragment=C,fe.jsx=function(l,h,E){var X=1e4>z.recentlyCreatedOwnerStacks++;return v(l,h,E,!1,X?Error("react-stack-top-frame"):_,X?f(r(l)):O)},fe.jsxs=function(l,h,E){var X=1e4>z.recentlyCreatedOwnerStacks++;return v(l,h,E,!0,X?Error("react-stack-top-frame"):_,X?f(r(l)):O)}})()),fe}var Le;function ot(){return Le||(Le=1,process.env.NODE_ENV==="production"?be.exports=nt():be.exports=st()),be.exports}var t=ot();const rt=o=>o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),at=o=>o.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,n,r)=>r?r.toUpperCase():n.toLowerCase()),We=o=>{const e=at(o);return e.charAt(0).toUpperCase()+e.slice(1)},ze=(...o)=>o.filter((e,n,r)=>!!e&&e.trim()!==""&&r.indexOf(e)===n).join(" ").trim(),lt=o=>{for(const e in o)if(e.startsWith("aria-")||e==="role"||e==="title")return!0};var ct={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};const it=s.forwardRef(({color:o="currentColor",size:e=24,strokeWidth:n=2,absoluteStrokeWidth:r,className:a="",children:i,iconNode:d,...u},m)=>s.createElement("svg",{ref:m,...ct,width:e,height:e,stroke:o,strokeWidth:r?Number(n)*24/Number(e):n,className:ze("lucide",a),...!i&&!lt(u)&&{"aria-hidden":"true"},...u},[...d.map(([P,v])=>s.createElement(P,v)),...Array.isArray(i)?i:[i]]));const te=(o,e)=>{const n=s.forwardRef(({className:r,...a},i)=>s.createElement(it,{ref:i,iconNode:e,className:ze(`lucide-${rt(We(o))}`,`lucide-${o}`,r),...a}));return n.displayName=We(o),n};const ut=te("eye",[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",key:"1nclc0"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);const Fe=te("eye-off",[["path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",key:"ct8e1f"}],["path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242",key:"151rxh"}],["path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",key:"13bj9a"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]]);const dt=te("maximize-2",[["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"}]]);const ht=te("minimize-2",[["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"}]]);const mt=te("mouse-pointer",[["path",{d:"M12.586 12.586 19 19",key:"ea5xo7"}],["path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z",key:"277e5u"}]]);const ft=te("mouse-pointer-click",[["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"}],["path",{d:"M7.2 2.2 8 5.1",key:"1cfko1"}],["path",{d:"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z",key:"s0h3yz"}]]);const Ye=te("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),ae=class ae{constructor(e=2,n="[drag-drop-panels]",r=console){this.level=e,this.prefix=n,this.impl=r}static setLevel(e){ae.instance.setLevel(e)}setLevel(e){this.level=e}static setImplementation(e){ae.instance.setImplementation(e)}setImplementation(e){this.impl=e}static setPrefix(e){ae.instance.setPrefix(e)}setPrefix(e){this.prefix=e}formatMessage(e){return typeof e=="string"?[`${this.prefix} ${e}`]:[this.prefix,e]}static debug(e,...n){ae.instance.debug(e,...n)}debug(e,...n){this.level<=0&&this.impl.debug(...this.formatMessage(e),...n)}static info(e,...n){ae.instance.info(e,...n)}info(e,...n){this.level<=1&&this.impl.info(...this.formatMessage(e),...n)}static warn(e,...n){ae.instance.warn(e,...n)}warn(e,...n){this.level<=2&&this.impl.warn(...this.formatMessage(e),...n)}static error(e,...n){ae.instance.error(e,...n)}error(e,...n){this.level<=3&&this.impl.error(...this.formatMessage(e),...n)}};ae.instance=new ae(2,"[drag-drop-panels]");let je=ae;const He=({config:o,panelId:e,sizeInfo:n,onSizeInfoClick:r})=>o.showPanelSizes&&n?t.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:r,onMouseDown:r,onTouchStart:a=>a instanceof TouchEvent&&r(a),onDragStart:r,children:[t.jsxs("div",{className:"text-[10px] opacity-80",children:["ID:",e]}),t.jsxs("div",{children:[n.width,"×",n.height]}),t.jsxs("div",{children:["X:",n.x," Y:",n.y]}),t.jsxs("div",{className:"text-[10px] opacity-80",children:["min:",n.minHeight," max:",n.maxHeight]})]}):null,N=(o,e,...n)=>{(o.logLevel??0)>=e&&je.info(...n)},Ce=s.memo(({index:o,columnIndex:e,isDragging:n,dragOverPosition:r,originalPosition:a,onDragEnter:i,onDragLeave:d,config:u,customDrag:m})=>{const P=a&&a.columnIndex===e&&(a.panelIndex===o||a.panelIndex+1===o),v=!P&&r?.columnIndex===e&&r?.insertIndex===o,M=s.useRef(null),[A,w]=s.useState(null),c=n||(m?.isActive??!1);return s.useEffect(()=>{if(M.current){const k=M.current.getBoundingClientRect(),C={width:Math.round(k.width),height:Math.round(k.height),x:Math.round(k.left),y:Math.round(k.top)};w(C),v&&N(u,1,`🎯 アクティブプレースホルダー ${o}-${e}:`,{size:`${C.width}×${C.height}`,position:`(${C.x}, ${C.y})`,bottomRight:`(${C.x+C.width}, ${C.y+C.height})`,center:`(${C.x+C.width/2}, ${C.y+C.height/2})`})}},[v,o,e,u]),N(u,2,`プレースホルダー${o}-${e}: 表示中`,{isHighlighted:v,isDragging:n,dragOverPosition:r,shouldShow:c}),t.jsxs("div",{ref:M,"data-placeholder-index":o,"data-placeholder-column":e,onDragEnter:()=>i(e,o),onDragLeave:k=>d(k,e,o),className:`relative flex w-full items-center justify-center transition-all duration-0 ${P?"pointer-events-none h-0 overflow-hidden opacity-0":c?v?"my-2 scale-[1.02] rounded-xl border-4 border-sky-500 border-dashed bg-sky-200 px-4 py-6 shadow-lg ring-2 ring-sky-400 ring-opacity-50":"my-2 rounded-xl border-2 border-sky-300 border-dashed bg-sky-50/70 px-2 py-4 opacity-80":"pointer-events-none h-0 overflow-hidden opacity-0"}`,children:[!P&&c&&u.showPlaceholderInfo&&A&&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:[t.jsxs("div",{children:[A.width,"×",A.height]}),t.jsxs("div",{children:["X:",A.x," Y:",A.y]}),t.jsx("div",{className:"text-[10px] opacity-80",children:"min:200px max:500px"}),t.jsxs("div",{className:"mt-0.5 text-[10px] opacity-80",children:["PH-",e,"-",o," ",v?"ACTIVE":"IDLE"]})]}),!P&&c&&t.jsxs("div",{className:"flex items-center space-x-2 text-sky-600",children:[t.jsxs("svg",{className:"h-6 w-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[t.jsx("title",{children:"パネルをここにドロップ"}),t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 6v6m0 0v6m0-6h6m-6 0H6"})]}),t.jsx("span",{className:"font-medium text-sm",children:"パネルをここにドロップ"})]})]})});Ce.displayName="InsertPlaceholder";const Ne=({columnIndex:o,isDragging:e,dragOverPosition:n,children:r,config:a})=>{const i=s.useRef(null),[d,u]=s.useState(null);return s.useEffect(()=>{if(i.current&&e){const m=i.current.getBoundingClientRect(),P=n?.columnIndex===o,v={width:Math.round(m.width),height:Math.round(m.height),x:Math.round(m.left),y:Math.round(m.top),isActive:P};u(v),P&&N(a,1,`🎯 アクティブドロップゾーン ${o}:`,{size:`${v.width}×${v.height}`,position:`(${v.x}, ${v.y})`,bottomRight:`(${v.x+v.width}, ${v.y+v.height})`,center:`(${v.x+v.width/2}, ${v.y+v.height/2})`})}},[e,n,o,a]),t.jsxs("div",{ref:i,className:"relative",children:[r,e&&d&&a.showDropZoneOutlines&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:`pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${d.isActive?"border-red-500 bg-red-100/20 shadow-lg":"border-gray-400 bg-gray-100/10"}`}),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 ${d.isActive?"bg-red-500/90 text-white":"bg-gray-500/90 text-white"}`,children:[t.jsxs("div",{className:"font-bold",children:["DropZone-",o]}),t.jsxs("div",{children:[d.width,"×",d.height]}),t.jsxs("div",{children:["X:",d.x," Y:",d.y]}),t.jsx("div",{className:"mt-0.5 text-[10px] opacity-80",children:d.isActive?"ACTIVE":"IDLE"})]}),t.jsx("div",{className:`pointer-events-none absolute transition-all duration-200 ${d.isActive?"opacity-100":"opacity-50"}`,style:{left:`${d.width/2-6}px`,top:`${d.height/2-6}px`},children:t.jsx("div",{className:`h-3 w-3 rounded-full border-2 ${d.isActive?"border-red-700 bg-red-500":"border-gray-700 bg-gray-500"}`})}),d.isActive&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500"}),t.jsx("div",{className:"pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"}),t.jsx("div",{className:"pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500"}),t.jsx("div",{className:"pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500"})]})]})]})};Ne.displayName="DropZoneDebugOverlay";const gt=.25,pt=typeof window<"u"?s.useLayoutEffect:s.useEffect,xt=(o,e=gt)=>{const n=s.useRef(null),[r,a]=s.useState(1);return pt(()=>{const i=n.current;if(!i||o<=0){a(1);return}const d=()=>{const m=i.clientWidth;if(m<=0)return;const P=m>=o?1:Math.max(m/o,e);a(v=>Math.abs(v-P)<.005?v:P)};d();const u=new ResizeObserver(d);return u.observe(i),()=>u.disconnect()},[o,e]),{containerRef:n,scale:r}},Pe=({columnId:o,onResizeStart:e,onResize:n,onResizeEnd:r,isResizing:a=!1,position:i="right",className:d="",debug:u={}})=>{const m=s.useRef(!1),P=s.useRef(null);s.useEffect(()=>{!a&&m.current&&(N(u,1,"外部からのリサイズ解除を検出、ドラッグ状態を強制解除:",o),m.current=!1,document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))},[a,o,u]);const v=s.useCallback(w=>{w.preventDefault(),w.stopPropagation(),N(u,2,"リサイズハンドル マウスダウン:",o),m.current=!0,e(o,w.clientX),document.body.style.cursor="col-resize",document.body.style.userSelect="none",document.body.classList.add("resizing-column")},[o,e,u]);s.useEffect(()=>{const w=k=>{m.current&&(k.preventDefault(),n(k.clientX))},c=()=>{m.current&&(N(u,2,"リサイズハンドル マウスアップ:",o),m.current=!1,r(),document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))};return document.addEventListener("mousemove",w),document.addEventListener("mouseup",c),()=>{document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",c)}},[o,n,r,u]);const M=s.useCallback(w=>{w.preventDefault(),w.stopPropagation();const c=w.touches[0];N(u,2,"リサイズハンドル タッチスタート:",o),m.current=!0,e(o,c.clientX),document.body.style.cursor="col-resize",document.body.style.userSelect="none",document.body.classList.add("resizing-column")},[o,e,u]);s.useEffect(()=>{const w=k=>{if(!m.current)return;k.preventDefault();const C=k.touches[0];n(C.clientX)},c=()=>{m.current&&(N(u,2,"リサイズハンドル タッチエンド:",o),m.current=!1,r(),document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))};return document.addEventListener("touchmove",w,{passive:!1}),document.addEventListener("touchend",c),()=>{document.removeEventListener("touchmove",w),document.removeEventListener("touchend",c)}},[o,n,r,u]),s.useEffect(()=>()=>{m.current&&(N(u,1,"リサイズハンドルアンマウント時のクリーンアップ:",o),document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))},[o,u]);const A=["resize-handle",i,a?"resizing":"",d].filter(Boolean).join(" ");return t.jsxs("div",{ref:P,className:A,onMouseDown:v,onTouchStart:M,"data-column-id":o,"data-position":i,"aria-label":`${o}のカラム幅を調整`,role:"separator","aria-orientation":"vertical",children:[t.jsx("div",{className:"resize-handle-bar"}),u.showPanelSizes&&t.jsxs("div",{className:"resize-handle-debug-info",children:[o,a&&" (resizing)"]})]})},bt=({columnId:o,width:e,minWidth:n=100,maxWidth:r=800,onResizeStart:a,onResize:i,onResizeEnd:d,isResizing:u=!1,resizable:m=!0,className:P="",debug:v={},children:M})=>{const A=["resizable-column",u?"resizing":"",P].filter(Boolean).join(" ");return s.useEffect(()=>{const w=document.querySelector(`[data-column-id="${o}"]`);w&&(w.style.setProperty("--column-width",`${e}px`),w.style.setProperty("--column-min-width",`${n}px`),w.style.setProperty("--column-max-width",`${r}px`))},[o,e,n,r]),t.jsxs("div",{className:A,"data-column-id":o,"data-width":e,"data-min-width":n,"data-max-width":r,children:[M,m&&t.jsx(Pe,{columnId:o,onResizeStart:a,onResize:i,onResizeEnd:d,isResizing:u,position:"right",debug:v}),v.showPanelSizes&&t.jsxs("div",{className:"column-debug-size",children:[e,"px",u&&" ↔"]})]})},De=s.memo(({index:o,columnIndex:e,isDragging:n,dragOverPosition:r,originalPosition:a,onDragEnter:i,onDragLeave:d,debugConfig:u,customDrag:m})=>t.jsx(Ce,{index:o,columnIndex:e,isDragging:n,dragOverPosition:r,originalPosition:a,onDragEnter:i,onDragLeave:d,config:u,customDrag:m}));De.displayName="LocalInsertPlaceholder";const vt=({columns:o,panels:e,columnPanels:n,panelVisibility:r,onPanelVisibilityChange:a,dragState:i,dragOverPosition:d,originalPanelPosition:u,dragModes:m,onDragStart:P,onDragEnd:v,onPlaceholderDragEnter:M,onPlaceholderDragLeave:A,onDragOverWithInsert:w,onDropWithInsert:c,onColumnDragLeave:k,onPanelClick:C,onPanelMouseDown:T,onTouchStart:L,onTouchMove:Y,onTouchEnd:J,debugConfig:H,panelSizes:B,setPanelRef:R,enableResize:W=!1,columnWidths:g,onResizeStart:x,onResize:S,onResizeEnd:z,isResizing:p=!1,resizingColumn:b,onPanelSizeInfoClick:f,onToggleDragMode:y,onPanelClose:D,onPanelMaximizeChange:_,customDrag:O,dragHandle:I="panel",maximizedPanel:l=null,panelClassName:h="",scale:E,autoScale:X,onScaleChange:Q})=>{const q=s.useRef(H);s.useEffect(()=>{q.current=H},[H]);const{containerRef:Z,scale:ne}=xt(X?.requiredWidth??0,X?.minScale),le=l?1:E??(X?ne:1),se=Number.isFinite(le)&&le>0?le:1,ve=s.useRef(se);ve.current=se,s.useEffect(()=>{Q&&Q(se)},[se,Q]);const Lt=se<1?{width:`${100/se}%`,height:`${100/se}%`,transform:`scale(${se})`,transformOrigin:"top left"}:void 0,ue=s.useRef({}),_e=s.useRef(new Map);s.useEffect(()=>{N(q.current,1,"🎨 DragDropLayout - dragModes props changed:",{dragModes:m,timestamp:new Date().toISOString(),keys:Object.keys(m),values:Object.values(m)})},[m]);const Oe=s.useMemo(()=>{const j={};return e.forEach(G=>{j[G.id]=G}),j},[e]);s.useEffect(()=>{if(!(l&&_))return;const j=G=>{G.key==="Escape"&&_(null)};return document.addEventListener("keydown",j),()=>document.removeEventListener("keydown",j)},[l,_]),s.useLayoutEffect(()=>{const j=new Map;Object.keys(ue.current).forEach(U=>{const ee=ue.current[U];if(ee){const ie=ee.getBoundingClientRect();j.set(U,{rect:ie,height:ee.offsetHeight,width:ee.offsetWidth})}});const G=_e.current,$=300,de=new Set;Object.values(n).forEach(U=>{U.forEach(ee=>{de.add(ee)})}),new Set(G.keys()).forEach(U=>{de.has(U)||(N(q.current,1,"パネル削除検出 - クリーンアップ:",U),G.delete(U),ue.current[U]&&delete ue.current[U])}),j.forEach((U,ee)=>{const ie=G.get(ee);if(ie){const K=ie.rect.left-U.rect.left,he=ie.rect.top-U.rect.top;if(K!==0||he!==0){N(q.current,2,"パネル移動検出 - アニメーション開始:",ee,{dx:K,dy:he});const re=ue.current[ee];if(re){const ye=ve.current||1;re.style.transform=`translate(${K/ye}px, ${he/ye}px)`,re.style.transition="none",re.classList.add("is-moving"),requestAnimationFrame(()=>{re.style.transition=`transform ${$}ms cubic-bezier(0.2, 0, 0.2, 1)`,re.style.transform="translate(0, 0)",setTimeout(()=>{re.style.transition="",re.style.transform="",re.classList.remove("is-moving")},$)})}}}else{N(q.current,1,"新規パネル検出 - フェードインアニメーション:",ee);const K=ue.current[ee];K&&(K.style.opacity="0",K.style.transition="none",requestAnimationFrame(()=>{K.style.transition=`opacity ${$}ms ease-out`,K.style.opacity="1",setTimeout(()=>{K.style.transition="",K.style.opacity=""},$)}))}}),_e.current=j},[n]),s.useLayoutEffect(()=>{const j=new Map;Object.keys(ue.current).forEach(G=>{const $=ue.current[G];$&&j.set(G,{rect:$.getBoundingClientRect(),height:$.offsetHeight,width:$.offsetWidth})}),_e.current=j},[se]);const Wt=j=>{if(!r[j])return null;const G=Oe[j];if(!G)return N(q.current,1,`Panel config not found for panelId: ${j}`),null;const $=G.component,de=G.title,ce=i.draggedPanel===j,U=m[j]||"normal";N(q.current,2,`🎨 renderPanel - ${j}:`,{panelId:j,dragMode:U,timestamp:new Date().toISOString()});const ee=V=>{ue.current[j]=V,R&&R(j,V),V&&H.showPanelSizes&&requestAnimationFrame(()=>{const ke=V.getBoundingClientRect(),tt=window.getComputedStyle(V);N(q.current,1,`Panel ${j} mounted with size:`,{width:ke.width,height:ke.height,x:ke.left,y:ke.top,minHeight:tt.minHeight,maxHeight:tt.maxHeight})})},ie=B[j],K=l===j,he=!!_,re=()=>_?.(K?null:j),ye=K?{position:"fixed",top:"var(--aqdd-maximize-top, 0px)",right:"var(--aqdd-maximize-right, 0px)",bottom:"var(--aqdd-maximize-bottom, 0px)",left:"var(--aqdd-maximize-left, 0px)",zIndex:50,minHeight:0,maxHeight:"none"}:{minHeight:G.minHeight??"200px",maxHeight:G.maxHeight??"500px"},we=I==="header",Ke=U==="normal"&&!we&&!K,qe=U==="normal"&&we&&!K,$e=ce?"cursor-grabbing":"cursor-grab",et=`panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${U==="custom"?"select-none":""}`,Ft=K?`${et} rounded-none bg-white/95 p-4 ${h}`:`${et} rounded-2xl bg-white/80 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${we?"":$e} ${h}`;return t.jsxs("div",{ref:ee,"data-panel-id":j,"data-dragging":ce,"data-maximized":K||void 0,role:"presentation",draggable:Ke,onDragStart:V=>Ke&&P(V,j),onDragEnd:v,onClick:V=>C?.(V,j),onMouseDown:V=>T?.(V,j),onTouchStart:V=>L?.(V,j),onTouchMove:Y,onTouchEnd:J,style:ye,className:Ft,children:[t.jsxs("div",{className:`group relative mb-3 flex items-center justify-between ${we&&!K?$e:""}`,draggable:qe,onDragStart:V=>qe&&P(V,j),onDoubleClick:he?V=>{V.stopPropagation(),re()}:void 0,children:[t.jsxs("div",{className:"flex items-center space-x-2",children:[t.jsx("h3",{className:"font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900",children:de}),U==="custom"&&t.jsx("span",{className:"rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs",children:"Custom"})]}),t.jsxs("div",{className:"flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100",children:[t.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),y&&y(j)},onKeyDown:V=>{(V.key==="Enter"||V.key===" ")&&(V.preventDefault(),V.stopPropagation(),y&&y(j))},tabIndex:0,className:`cursor-pointer rounded p-1 text-xs transition-colors ${U==="custom"?"bg-orange-100 text-orange-600 hover:bg-orange-200":"text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,title:U==="custom"?"通常ドラッグモードに戻す":"カスタムドラッグモードに切り替え",children:U==="custom"?t.jsx(ft,{className:"h-4 w-4"}):t.jsx(mt,{className:"h-4 w-4"})}),!K&&t.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),a({...r,[j]:!1})},className:"rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",title:"パネルを非表示",children:t.jsx(Fe,{className:"h-4 w-4"})}),he&&t.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),re()},className:"rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",title:K?"元のサイズに戻す":"パネルを最大化",children:K?t.jsx(ht,{className:"h-4 w-4"}):t.jsx(dt,{className:"h-4 w-4"})}),D&&t.jsx("button",{type:"button",onClick:V=>{V.stopPropagation(),D(j)},className:"rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-red-500",title:"パネルを閉じる",children:t.jsx(Ye,{className:"h-4 w-4"})})]})]}),t.jsx("div",{"data-aqdd-scroll-area":!0,className:"panel-scroll-area min-h-0 flex-1 overflow-y-auto",children:t.jsx($,{...G.props||{}})}),t.jsx(He,{config:H,panelId:j,sizeInfo:ie,onSizeInfoClick:V=>f?.(V,j)})]},j)},zt=(j,G)=>{const $=n[j]||[];let de=!1;for(const U of $)if(r[U]){de=!0;break}const ce=i.isDragging||(O?.isActive??!1);return t.jsx(Ne,{columnIndex:G,isDragging:ce,dragOverPosition:d,config:H,children:t.jsxs("section",{"data-drop-zone":"true","data-column-key":j,"data-column-index":G,"aria-label":`Drop zone for column ${G+1}`,onDragOver:U=>w(U,G),onDrop:U=>c(U,j),onDragLeave:k,className:"relative flex h-full flex-col transition-all duration-200",children:[t.jsx("div",{className:"placeholder-container",children:t.jsx(De,{index:0,columnIndex:G,isDragging:ce,dragOverPosition:d,originalPosition:u,onDragEnter:M,onDragLeave:A,debugConfig:H,customDrag:O})}),$.map((U,ee)=>{const ie=r[U],K=!(ie||ce);return t.jsxs("div",{className:`panel-with-placeholder ${K?"m-0 h-0 overflow-hidden p-0":""}`,"data-panel-hidden":K?"true":void 0,"aria-hidden":K?"true":void 0,children:[ie?Wt(U):ce?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:[t.jsxs("div",{className:"mb-2 flex items-center space-x-2",children:[t.jsx("h3",{className:"font-semibold text-amber-700 text-base",children:Oe[U]?.title||U}),t.jsx("span",{className:"rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs",children:"非表示"})]}),t.jsx("div",{className:"flex-1 overflow-hidden",children:t.jsx("div",{className:"flex h-full items-center justify-center",children:t.jsxs("div",{className:"text-center text-amber-600",children:[t.jsx(Fe,{className:"mx-auto h-6 w-6 opacity-50"}),t.jsx("p",{className:"mt-1 text-xs",children:"このパネルは非表示です"})]})})})]}):null,t.jsx(De,{index:ee+1,columnIndex:G,isDragging:ce,dragOverPosition:d,originalPosition:u,onDragEnter:M,onDragLeave:A,debugConfig:H,customDrag:O})]},`panel-${U}`)}),!(de||ce)&&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:t.jsx("div",{className:"text-sm",children:"このエリアは空です"})})]})})},Qe=Object.keys(r).filter(j=>!r[j]);return t.jsxs("div",{className:"flex h-full flex-col",children:[Qe.length>0&&t.jsx("div",{className:"border-slate-200 border-b bg-white/70 px-4 py-2 backdrop-blur-lg",children:t.jsxs("div",{className:"flex flex-wrap gap-2",children:[t.jsx("span",{className:"mr-2 text-slate-600 text-sm",children:"非表示のパネル:"}),Qe.map(j=>{const $=Oe[j]?.title||j;return t.jsxs("button",{type:"button",onClick:()=>a({...r,[j]:!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:[t.jsx(ut,{className:"h-3 w-3"}),t.jsx("span",{children:$})]},j)})]})}),t.jsx("div",{ref:Z,className:"relative min-h-0 flex-1 overflow-hidden",children:t.jsx("div",{className:"h-full w-full",style:Lt,children: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:t.jsx("div",{className:"relative flex h-full items-start gap-6 pr-4",children:o.map((j,G)=>{const $=g?.[j.id]||j.initialWidth||350,de=W&&(j.resizable??!0);return t.jsx(s.Fragment,{children:t.jsxs("div",{className:`column relative ${j.className||""} ${W?"resize-enabled-column":"auto-width-column"} ${p&&b===j.id?"column-resizing-active":""}`,"data-column":G,"data-column-id":j.id,"data-min-width":j.minWidth||350,"data-max-width":j.maxWidth,"data-column-width":W?$:void 0,...W&&{style:{"--column-width":`${$}px`}},children:[zt(j.key,G),de&&x&&S&&z&&t.jsx(Pe,{columnId:j.id,onResizeStart:x,onResize:S,onResizeEnd:z,isResizing:p&&b===j.id,position:"right",debug:H})]})},j.id)})})})})})]})};const yt=te("grid-3x3",[["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"}]]);const wt=te("minus",[["path",{d:"M5 12h14",key:"1ays0h"}]]);const Ee=te("plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]]);const kt=te("rotate-ccw",[["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"}]]),jt=({columnCount:o,onColumnCountChange:e,onAutoBalance:n,onResetWidths:r,minColumns:a=2,maxColumns:i=6,isResizing:d=!1,isResponsiveMode:u=!1,responsiveColumnCount:m})=>{const P=o>a&&!u,v=o<i&&!u;return 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:[t.jsxs("div",{className:"flex items-center gap-2",children:[t.jsx("span",{className:"font-medium text-slate-700 text-sm",children:"カラム数:"}),t.jsx("button",{type:"button",onClick:()=>P&&e(o-1),disabled:!P||d,className:`rounded p-1 text-xs transition-colors ${P&&!d?"border border-slate-300 text-slate-600 hover:border-red-300 hover:bg-red-50 hover:text-red-600":"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,title:u?"レスポンシブモード中：カラム数は自動調整されます":`カラムを削除 (最小: ${a}列)`,children:t.jsx(wt,{className:"h-3 w-3"})}),t.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?m??o:o,u&&t.jsx("span",{className:"ml-1 text-xs",children:"自動"})]}),t.jsx("button",{type:"button",onClick:()=>v&&e(o+1),disabled:!v||d,className:`rounded p-1 text-xs transition-colors ${v&&!d?"border border-slate-300 text-slate-600 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600":"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,title:u?"レスポンシブモード中：カラム数は自動調整されます":`カラムを追加 (最大: ${i}列)`,children:t.jsx(Ee,{className:"h-3 w-3"})})]}),t.jsx("div",{className:"h-6 w-px bg-slate-300"}),t.jsxs("div",{className:"flex items-center gap-2",children:[t.jsxs("button",{type:"button",onClick:n,disabled:d,className:`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${d?"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300":"border border-slate-300 text-slate-600 hover:border-green-300 hover:bg-green-50 hover:text-green-600"}`,title:"パネルを全カラムに均等分散",children:[t.jsx(yt,{className:"h-3 w-3"}),t.jsx("span",{children:"バランス"})]}),t.jsxs("button",{type:"button",onClick:r,disabled:d,className:`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${d?"cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300":"border border-slate-300 text-slate-600 hover:border-orange-300 hover:bg-orange-50 hover:text-orange-600"}`,title:"カラム幅を初期値にリセット",children:[t.jsx(kt,{className:"h-3 w-3"}),t.jsx("span",{children:"幅リセット"})]})]}),d&&t.jsxs("div",{className:"flex items-center gap-1 text-blue-600 text-xs",children:[t.jsx("div",{className:"h-2 w-2 animate-pulse rounded-full bg-blue-500"}),t.jsx("span",{children:"リサイズ中..."})]})]})},Ct=({columnCount:o,onInsertColumn:e,onDeleteColumn:n,minColumns:r=1,maxColumns:a=6,isResizing:i=!1,disabled:d=!1})=>{const u=o<a&&!d,m=o>r&&!d;return 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 ${d?"bg-slate-100/80 opacity-60":"bg-white/80"}`,children:[d&&t.jsx("div",{className:"flex items-center gap-2 text-slate-500 text-xs",children:t.jsx("span",{children:"レスポンシブモード有効中：カラム数は自動調整されます"})}),!d&&t.jsxs(t.Fragment,{children:[t.jsx("button",{type:"button",onClick:()=>u&&e(0),disabled:!u||i,className:`flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${u&&!i?"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:t.jsx(Ee,{className:"h-4 w-4"})}),Array.from({length:o},(P,v)=>t.jsxs("div",{className:"flex items-center gap-1",children:[t.jsxs("div",{className:"relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100",children:[t.jsx("span",{className:"font-medium font-mono text-slate-700 text-xs",children:v+1}),m&&!i&&t.jsx("button",{type:"button",onClick:()=>n(v),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:`カラム ${v+1} を削除`,children:t.jsx(Ye,{className:"h-2.5 w-2.5"})})]}),t.jsx("button",{type:"button",onClick:()=>u&&e(v+1),disabled:!u||i,className:`flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${u&&!i?"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:t.jsx(Ee,{className:"h-4 w-4"})})]},`column-${v}`))]})]})},Nt=({config:o,onConfigChange:e,isVisible:n,onToggleVisibility:r})=>n?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:[t.jsxs("div",{className:"mb-3 flex items-center justify-between",children:[t.jsx("h3",{className:"font-bold text-gray-800 text-sm",children:"🛠️ デバッグ設定"}),t.jsx("button",{type:"button",onClick:r,className:"text-gray-500 text-lg hover:text-gray-700",title:"閉じる",children:"✕"})]}),t.jsxs("div",{className:"space-y-2",children:[t.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[t.jsx("input",{type:"checkbox",checked:o.showDebugPanel??!1,onChange:a=>e({...o,showDebugPanel:a.target.checked}),className:"rounded"}),t.jsx("span",{children:"デバッグパネル表示"})]}),t.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[t.jsx("input",{type:"checkbox",checked:o.showMousePosition??!1,onChange:a=>e({...o,showMousePosition:a.target.checked}),className:"rounded"}),t.jsx("span",{children:"マウス位置表示"})]}),t.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[t.jsx("input",{type:"checkbox",checked:o.showPanelSizes??!1,onChange:a=>e({...o,showPanelSizes:a.target.checked}),className:"rounded"}),t.jsx("span",{children:"パネルサイズ情報"})]}),t.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[t.jsx("input",{type:"checkbox",checked:o.showPlaceholderInfo??!1,onChange:a=>e({...o,showPlaceholderInfo:a.target.checked}),className:"rounded"}),t.jsx("span",{children:"プレースホルダー詳細"})]}),t.jsxs("label",{className:"flex items-center space-x-2 text-sm",children:[t.jsx("input",{type:"checkbox",checked:o.showDropZoneOutlines??!1,onChange:a=>e({...o,showDropZoneOutlines:a.target.checked}),className:"rounded"}),t.jsx("span",{children:"ドロップゾーン境界"})]}),t.jsxs("div",{className:"border-gray-200 border-t pt-2",children:[t.jsxs("label",{htmlFor:"log-level-slider",className:"mb-1 block text-sm",children:["ログレベル: ",o.logLevel??0]}),t.jsx("input",{id:"log-level-slider",type:"range",min:"0",max:"2",value:o.logLevel??0,onChange:a=>e({...o,logLevel:parseInt(a.target.value,10)}),className:"w-full","aria-label":"ログレベル設定"}),t.jsxs("div",{className:"mt-1 flex justify-between text-gray-500 text-xs",children:[t.jsx("span",{children:"無効"}),t.jsx("span",{children:"基本"}),t.jsx("span",{children:"詳細"})]})]}),t.jsxs("div",{className:"space-y-2 pt-2",children:[t.jsx("button",{type:"button",onClick:()=>e({showDebugPanel:!0,showMousePosition:!0,showPanelSizes:!0,showPlaceholderInfo:!0,showDropZoneOutlines:!0,logLevel:2}),className:"w-full rounded bg-blue-100 px-2 py-1 text-blue-700 text-sm transition-colors hover:bg-blue-200",children:"すべて有効"}),t.jsx("button",{type:"button",onClick:()=>e({showDebugPanel:!1,showMousePosition:!1,showPanelSizes:!1,showPlaceholderInfo:!1,showDropZoneOutlines:!1,logLevel:0}),className:"w-full rounded bg-gray-100 px-2 py-1 text-gray-700 text-sm transition-colors hover:bg-gray-200",children:"すべて無効"})]})]})]}):t.jsx("button",{type:"button",onClick:r,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:"🛠️"}),oe={prefix:"column",startIndex:1,separator:"_"},ge=(o,e=oe)=>{const{prefix:n,startIndex:r,separator:a}=e,i=o+r;return`${n}${a}${i}`},Se=(o,e=oe)=>Array.from({length:o},(n,r)=>ge(r,e)),pe=(o,e=oe)=>{const{prefix:n,startIndex:r,separator:a}=e,i=`${n}${a}`;if(!o.startsWith(i))return null;const d=o.slice(i.length),u=parseInt(d,10);return Number.isNaN(u)||u<r?null:u-r},Pt=(o,e=oe)=>pe(o,e)!==null,Dt=(o,e=oe)=>{const n=o.map(r=>pe(r,e)).filter(r=>r!==null).sort((r,a)=>r-a);for(let r=0;r<n.length;r++)if(n[r]!==r)return ge(r,e);return ge(n.length,e)},Xe=(o,e=oe)=>o.sort((n,r)=>{const a=pe(n,e)??-1,i=pe(r,e)??-1;return a-i}),Et=(o,e=oe)=>{const n={};return o.forEach((r,a)=>{const i=ge(a,e);n[r]=i}),n},Ie=(o,e,n=oe)=>{const r=[];Object.values(o).forEach(d=>{r.push(...d)});const a={},i=Se(e,n);return i.forEach(d=>{a[d]=[]}),r.forEach((d,u)=>{const m=u%e,P=i[m];a[P].push(d)}),a},St=({initialColumns:o,initialPanels:e,debug:n={},onLayoutChange:r})=>{const[a,i]=s.useState(()=>{const g={};for(const x of o)g[x.id]=x.initialWidth||400;return{columns:o,columnWidths:g,isResizing:!1,resizingColumn:null,columnPanels:e,showInsertPlaceholders:!1}}),d=s.useRef(0),u=s.useRef(0);s.useEffect(()=>{r?.(a)},[a,r]);const m=s.useCallback((g,x)=>{N(n,1,"カラム追加:",g.id,"at position:",x),i(S=>{const z=[...S.columns],p=x??z.length;z.splice(p,0,g);const b={...S.columnWidths,[g.id]:g.initialWidth||400},f={...S.columnPanels,[g.id]:[]};return{...S,columns:z,columnWidths:b,columnPanels:f}})},[n]),P=s.useCallback(g=>{N(n,1,"カラム削除:",g),i(x=>{const S=x.columnPanels[g]||[],z=x.columns.filter(y=>y.id!==g);if(z.length===0)return N(n,1,"警告: 最後のカラムを削除しようとしています"),x;const p=z[0].id,b={...x.columnPanels};S.length>0&&(b[p]=[...b[p],...S]),delete b[g];const f={...x.columnWidths};return delete f[g],{...x,columns:z,columnWidths:f,columnPanels:b}})},[n]),v=s.useCallback((g,x)=>{N(n,1,"カラム移動:",g,"->",x),i(S=>{const z=[...S.columns],[p]=z.splice(g,1);return z.splice(x,0,p),{...S,columns:z}})},[n]),M=s.useCallback((g,x)=>{N(n,2,"リサイズ開始:",g,"at X:",x),d.current=x,u.current=a.columnWidths[g]||300,i(S=>({...S,isResizing:!0,resizingColumn:g}))},[n,a.columnWidths]),A=s.useCallback(g=>{const{resizingColumn:x,isResizing:S}=a;if(!(S&&x))return;const z=g-d.current,p=Math.max(100,Math.min(800,u.current+z));N(n,2,"リサイズ中:",x,"new width:",p),i(b=>({...b,columnWidths:{...b.columnWidths,[x]:p}}))},[n,a]),w=s.useCallback(()=>{N(n,2,"リサイズ終了"),i(g=>({...g,isResizing:!1,resizingColumn:null}))},[n]),c=s.useCallback((g,x)=>{N(n,2,"カラム幅設定:",g,x),i(S=>({...S,columnWidths:{...S.columnWidths,[g]:Math.max(100,Math.min(800,x))}}))},[n]),k=s.useCallback(()=>{N(n,1,"カラム幅リセット"),i(g=>{const x={};for(const S of g.columns)x[S.id]=S.initialWidth||400;return{...g,columnWidths:x}})},[n]),C=s.useCallback((g,x,S,z)=>{N(n,1,"パネル移動:",g,"from",x,"to",S,"at",z),i(p=>{const b={...p.columnPanels};if(x in b&&(b[x]=b[x].filter(f=>f!==g)),S in b){const f=[...b[S]];f.splice(z,0,g),b[S]=f}return{...p,columnPanels:b}})},[n]),T=s.useCallback((g,x,S)=>{N(n,1,"パネル追加:",g,"to column:",x),i(z=>{const p={...z.columnPanels};x in p||(p[x]=[]);const b=[...p[x]],f=S??b.length;return b.splice(f,0,g),p[x]=b,{...z,columnPanels:p}})},[n]),L=s.useCallback(g=>{N(n,1,"パネル削除:",g),i(x=>{const S={};for(const[z,p]of Object.entries(x.columnPanels))S[z]=p.filter(b=>b!==g);return{...x,columnPanels:S}})},[n]),Y=s.useCallback(g=>{N(n,1,"カラム数更新:",g),i(x=>{const S=x.columns.length;if(g===S)return x;const z=Ie(x.columnPanels,g,oe),p=Se(g,oe),b=x.isResizing&&x.resizingColumn&&!p.includes(x.resizingColumn);b&&N(n,1,"リサイズ中のカラムが削除されるためリサイズを強制終了:",x.resizingColumn);const f=p.map((O,I)=>({id:O,title:`カラム ${I+1}`,minWidth:350,maxWidth:800,initialWidth:400,resizable:!(I===1&&g===3)})),y={};if(Object.entries(x.columnWidths).some(([,O])=>O!==400))p.forEach(O=>{const I=x.columnWidths[O];I&&I!==400?y[O]=I:y[O]=400});else{const O=S>g?Object.values(x.columnWidths).reduce((l,h)=>l+h,0):g*400,I=Math.max(O/g,350);p.forEach(l=>{y[l]=I})}return{...x,columns:f,columnPanels:z,columnWidths:y,isResizing:b?!1:x.isResizing,resizingColumn:b?null:x.resizingColumn}})},[n]),J=s.useCallback(()=>{N(n,1,"カラム自動バランス調整"),i(g=>{const x=[];for(const p of Object.keys(g.columnPanels))for(const b of g.columnPanels[p])x.push(b);const S={};for(const p of g.columns)S[p.id]=[];let z=0;for(const p of x){const b=g.columns[z%g.columns.length].id;S[b].push(p),z+=1}return{...g,columnPanels:S}})},[n]),H=s.useCallback(g=>a.columns.find(x=>x.id===g),[a.columns]),B=s.useCallback(()=>{let g=0;for(const x of Object.values(a.columnWidths))g+=x;return g},[a.columnWidths]),R=s.useCallback(g=>document.querySelector(`[data-column-id="${g}"]`),[]),W=s.useCallback(g=>{i(x=>({...x,showInsertPlaceholders:g}))},[]);return{layoutState:a,addColumn:m,removeColumn:P,moveColumn:v,startResize:M,handleResize:A,endResize:w,setColumnWidth:c,resetColumnWidths:k,movePanel:C,addPanel:T,removePanel:L,updateColumnCount:Y,autoBalanceColumns:J,getColumnById:H,getTotalWidth:B,getColumnElement:R,setShowInsertPlaceholders:W}},xe={triggerDistance:80,scrollSpeed:5,maxScrollSpeed:20},Me=(o,e,n=xe,r)=>{const{triggerDistance:a,scrollSpeed:i,maxScrollSpeed:d}=n;let u;r?u=r.getBoundingClientRect():u=new DOMRect(0,0,window.innerWidth,window.innerHeight);const{left:m,top:P,right:v,bottom:M}=u;let A=0,w=0;if(o>=m&&o<=v&&e>=P&&e<=M){if(o<m+a){const c=Math.max(0,(m+a-o)/a);A=-Math.min(d,i+c*(d-i))}else if(o>v-a){const c=Math.max(0,(o-(v-a))/a);A=Math.min(d,i+c*(d-i))}if(e<P+a){const c=Math.max(0,(P+a-e)/a);w=-Math.min(d,i+c*(d-i))}else if(e>M-a){const c=Math.max(0,(e-(M-a))/a);w=Math.min(d,i+c*(d-i))}}return{x:A,y:w}},Ue=(o,e)=>{(o.x!==0||o.y!==0)&&(e?e.scrollBy(o.x,o.y):window.scrollBy(o.x,o.y))};class Re{constructor(e=xe,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 r=Me(e,n,this.config,this.scrollElement);Ue(r,this.scrollElement)},16))}update(e,n){const r=Me(e,n,this.config,this.scrollElement);(r.x!==0||r.y!==0)&&!this.isActive?this.start(e,n):r.x===0&&r.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 Ve=({debugConfig:o,dragState:e,customDrag:n,clickState:r,dragModes:a,isMouseDown:i,dragOverPosition:d,setCustomDrag:u,setDragState:m,setDragOverPosition:P,setOriginalPanelPosition:v,setClickState:M,setIsMouseDown:A,findPanelPosition:w,performPanelMove:c,showMousePosition:k,updateMousePosition:C,recordMouseDown:T,recordClickPosition:L,isVirtualClick:Y,calculateMoveDistance:J,clearMouseTracking:H,resetDragState:B,resetClickState:R,createDragImage:W,updateDragImagePosition:g,removeDragImage:x,handlePlaceholderDragEnter:S,handlePlaceholderDragLeave:z})=>{const p=s.useRef(o);p.current=o;const b=s.useRef(null),f=s.useRef(null),y=s.useRef(0),D=s.useRef(new Re(xe));s.useEffect(()=>{const h=document.querySelector("main[data-aqdd-scroll-root]");h&&D.current.setScrollElement(h)},[]);const _=s.useRef(d);s.useEffect(()=>{_.current=d,N(p.current,2,"dragOverPositionRef更新:",d)},[d]);const O=s.useCallback(h=>{if(n.isActive||r.isClicked){h.preventDefault();const E=window.getSelection();E&&E.rangeCount>0&&E.removeAllRanges()}if(n.isActive){C(h.clientX,h.clientY),g(h.clientX,h.clientY),D.current.update(h.clientX,h.clientY);const E=document.elementFromPoint(h.clientX,h.clientY),X=E?.closest("[data-drop-zone]");if(X){document.body.classList.add("droppable");const Q=X.getAttribute("data-column-index"),q=Q?parseInt(Q,10):null;q!==null&&q!==e.dragOverColumn&&m(ne=>({...ne,dragOverColumn:q}));const Z=E?.closest("[data-placeholder-index]");if(Z){const ne=Z.getAttribute("data-placeholder-index"),le=Z.getAttribute("data-placeholder-column");if(ne&&le){const se=parseInt(ne,10),ve=parseInt(le,10);S(ve,se)}}else z()}else document.body.classList.remove("droppable"),P(null),m(Q=>({...Q,dragOverColumn:null}))}else if(i&&r.isClicked&&r.panelId){if(a[r.panelId]!=="custom"||J(h.clientX,h.clientY)<10)return;N(p.current,1,"🚀 カスタムドラッグ開始 -",r.panelId);const X=document.querySelector(`[data-panel-id="${r.panelId}"]`);if(X&&f.current){const Q=X.getBoundingClientRect(),q=f.current.x-Q.left,Z=f.current.y-Q.top;W(r.panelId,q,Z),document.body.classList.add("custom-dragging"),u({isActive:!0,panelId:r.panelId,startX:q,startY:Z})}m({isDragging:!0,draggedPanel:r.panelId,dragOverColumn:null}),v(w(r.panelId)),k(h.clientX,h.clientY),M({isClicked:!1,panelId:null}),A(!1),H(),f.current=null,b.current&&(clearTimeout(b.current),b.current=null)}},[n.isActive,r,e.dragOverColumn,a,i,C,m,P,J,w,u,v,k,M,A,H,W,g,S,z]),I=s.useCallback(h=>{if(N(p.current,1,"🐭 カスタムドラッグハンドラー - グローバルマウスアップ",{isActive:n.isActive,panelId:n.panelId,dragMode:n.panelId?a[n.panelId]:"unknown"}),n.isActive){D.current.stop();const E=_.current;if(E){const Q=document.elementFromPoint(h.clientX,h.clientY)?.closest("[data-drop-zone]");if(Q){const q=Q.getAttribute("data-column-key");q&&a[n.panelId]==="custom"?(N(p.current,1,"🔄 カスタムドラッグパネル移動実行:",n.panelId,"→",q),c(n.panelId,q,E.insertIndex)):N(p.current,1,"🚫 カスタムドラッグパネル移動スキップ:",n.panelId,"モード:",a[n.panelId])}}x(),document.body.classList.remove("custom-dragging","droppable"),B(),y.current=0}else if(Y(h.clientX,h.clientY)){const X=document.elementFromPoint(h.clientX,h.clientY)?.closest("[data-panel-id]"),Q=X?.getAttribute("data-panel-id")??null;if(!(X&&Q)||a[Q]!=="custom"){b.current&&(clearTimeout(b.current),b.current=null),R(),f.current=null,y.current=0;return}y.current+=1,r.isClicked===!1&&y.current===1?(N(p.current,1,"🖱️ 仮想クリック検出 - ドラッグ待機状態へ:",Q),M({isClicked:!0,panelId:Q}),b.current=window.setTimeout(()=>{N(p.current,1,"⏳ クリック待機状態を自動解除:",Q),R(),f.current=null,y.current=0},2e3)):(N(p.current,1,"🚫 クリック待機状態を解除 - 仮想クリック検出停止:",Q),b.current&&(clearTimeout(b.current),b.current=null),R(),f.current=null,y.current=0,b.current=window.setTimeout(()=>{N(p.current,1,"⏳ 仮想クリック検出再開:",Q)},2e3))}else r.isClicked&&(R(),f.current=null,y.current=0);i&&A(!1)},[n.isActive,n.panelId,r,a,i,c,B,R,Y,M,A,x]),l=s.useCallback((h,E)=>{if(a[E]!=="custom"){N(p.current,1,"🚫 カスタムドラッグモードではない - スキップ:",E);return}T(h.clientX,h.clientY),r.isClicked&&r.panelId===E&&(A(!0),b.current!==null&&(clearTimeout(b.current),b.current=null),L(h.clientX,h.clientY),f.current={x:h.clientX,y:h.clientY})},[r,a,T,A,L]);return s.useEffect(()=>()=>{b.current!==null&&clearTimeout(b.current),D.current.stop()},[]),{handleGlobalMouseMove:O,handleGlobalMouseUp:I,handleMouseDown:l}},Be=()=>{const[o,e]=s.useState({isDragging:!1,draggedPanel:null,dragOverColumn:null}),[n,r]=s.useState(null),[a,i]=s.useState(null),[d,u]=s.useState({isActive:!1,panelId:"",startX:0,startY:0}),[m,P]=s.useState({isClicked:!1,panelId:null}),[v,M]=s.useState({isTouchDragging:!1,startX:0,startY:0,currentX:0,currentY:0,draggedElement:null}),[A,w]=s.useState(!1),c=s.useCallback(()=>{u({isActive:!1,panelId:"",startX:0,startY:0}),e({isDragging:!1,draggedPanel:null,dragOverColumn:null}),r(null),i(null)},[]),k=s.useCallback(()=>{P({isClicked:!1,panelId:null}),w(!1)},[]),C=s.useCallback(R=>{e(R)},[]),T=s.useCallback(R=>{r(R)},[]),L=s.useCallback(R=>{i(R)},[]),Y=s.useCallback(R=>{u(R)},[]),J=s.useCallback(R=>{P(R)},[]),H=s.useCallback(R=>{M(R)},[]),B=s.useCallback(R=>{w(R)},[]);return{dragState:o,dragOverPosition:n,originalPanelPosition:a,customDrag:d,clickState:m,touchDragState:v,isMouseDown:A,setDragState:C,setDragOverPosition:T,setOriginalPanelPosition:L,setCustomDrag:Y,setClickState:J,setTouchDragState:H,setIsMouseDown:B,resetDragState:c,resetClickState:k}},Ge=()=>{const[o,e]=s.useState({x:0,y:0,isVisible:!1}),n=s.useRef(null),r=s.useRef(0),a=s.useRef(null),i=s.useCallback((w,c)=>{e({x:w,y:c,isVisible:!0})},[]),d=s.useCallback(()=>{e(w=>({...w,isVisible:!1}))},[]),u=s.useCallback((w,c)=>{e(k=>k.x===w&&k.y===c?k:{x:w,y:c,isVisible:k.isVisible})},[]),m=s.useCallback((w,c)=>{r.current=Date.now(),a.current={x:w,y:c}},[]),P=s.useCallback((w,c)=>{n.current={x:w,y:c}},[]),v=s.useCallback((w,c,k=500,C=5)=>Date.now()-(r.current||0)>=k||!a.current?!1:Math.sqrt((w-a.current.x)**2+(c-a.current.y)**2)<C,[]),M=s.useCallback((w,c)=>{if(!n.current)return 0;const k=Math.abs(w-n.current.x),C=Math.abs(c-n.current.y);return Math.sqrt(k*k+C*C)},[]),A=s.useCallback(()=>{n.current=null,r.current=0,a.current=null},[]);return{mousePosition:o,lastClickPosition:n.current,mouseDownTime:r.current,mouseDownPosition:a.current,showMousePosition:i,hideMousePosition:d,updateMousePosition:u,recordMouseDown:m,recordClickPosition:P,isVirtualClick:v,calculateMoveDistance:M,clearMouseTracking:A}},Ze=({debugConfig:o,dragState:e,customDrag:n,dragModes:r,columnPanels:a,dragOverPosition:i,originalPanelPosition:d,setDragState:u,setDragOverPosition:m,setOriginalPanelPosition:P,performPanelMove:v,showMousePosition:M,updateMousePosition:A,resetDragState:w,handlePlaceholderDragEnter:c,handlePlaceholderDragLeave:k,scale:C=1})=>{const T=s.useRef(o);T.current=o;const L=s.useRef(a);L.current=a;const Y=s.useRef(e);Y.current=e;const J=s.useRef(i);J.current=i;const H=s.useRef(d);H.current=d;const B=s.useRef(C);B.current=C;const R=s.useRef(new Re(xe));s.useEffect(()=>{const p=document.querySelector("main[data-aqdd-scroll-root]");p&&R.current.setScrollElement(p)},[]);const W=s.useCallback((p,b)=>{if(n.isActive){N(T.current,2,"カスタムドラッグアクティブ中 - 通常ドラッグを無効化:",b),p.preventDefault();return}if(r[b]==="custom"){N(T.current,2,"カスタムドラッグモード - 通常ドラッグを無効化:",b),p.preventDefault();return}N(T.current,1,"ドラッグ開始:",b);const f=Object.keys(L.current);let y=null;for(let D=0;D<f.length;D++){const _=f[D],O=L.current[_].indexOf(b);if(O!==-1){y={columnIndex:D,panelIndex:O};break}}if(P(y),p.dataTransfer){p.dataTransfer.setData("text/plain",b),p.dataTransfer.effectAllowed="move";const D=B.current;if(D<1){const _=p.currentTarget.closest("[data-panel-id]")??p.currentTarget,O=_.getBoundingClientRect(),I=_.offsetWidth,l=_.offsetHeight,h=_.cloneNode(!0);h.removeAttribute("data-panel-id"),h.removeAttribute("id"),h.style.margin="0",h.style.width=`${I}px`,h.style.height=`${l}px`,h.style.transform=`scale(${D})`,h.style.transformOrigin="top left";const E=document.createElement("div");E.style.position="fixed",E.style.top="0",E.style.left="-10000px",E.style.width=`${I*D}px`,E.style.height=`${l*D}px`,E.style.overflow="hidden",E.style.opacity="0.8",E.style.pointerEvents="none",E.appendChild(h),document.body.appendChild(E),p.dataTransfer.setDragImage(E,p.clientX-O.left,p.clientY-O.top),requestAnimationFrame(()=>E.remove())}}M(p.clientX,p.clientY),requestAnimationFrame(()=>{u({isDragging:!0,draggedPanel:b,dragOverColumn:null})})},[r,n.isActive,P,M,u]),g=s.useCallback(()=>{N(T.current,1,"ドラッグ終了"),R.current.stop(),w()},[w]),x=s.useCallback((p,b)=>{if(p.preventDefault(),p.dataTransfer.dropEffect="move",!Y.current.isDragging)return;A(p.clientX,p.clientY),b!==Y.current.dragOverColumn&&u(D=>({...D,dragOverColumn:b}));const f=document.elementFromPoint(p.clientX,p.clientY),y=f?.closest("[data-placeholder-index]");if(y){const D=y.getAttribute("data-placeholder-index"),_=y.getAttribute("data-placeholder-column");if(D&&_){const O=parseInt(D,10),I=parseInt(_,10);c(I,O)}}else f?.closest("[data-drop-zone]")||k()},[A,u,c,k]),S=s.useCallback((p,b)=>{p.preventDefault();const f=p.dataTransfer.getData("text/plain"),y=J.current;f&&y&&(N(T.current,1,"🎯 ドロップ完了:",{draggedPanel:f,targetColumn:b,insertPosition:`カラム${y.columnIndex} - 位置${y.insertIndex}`}),v(f,b,y.insertIndex),m(null),g())},[v,m,g]),z=s.useCallback(p=>{const b=p.currentTarget,f=p.relatedTarget;f&&b.contains(f)||(m(null),u(y=>({...y,dragOverColumn:null})))},[m,u]);return s.useEffect(()=>{const p=b=>{Y.current.isDragging&&(A(b.clientX,b.clientY),R.current.update(b.clientX,b.clientY))};if(e.isDragging)return document.addEventListener("dragover",p),()=>{document.removeEventListener("dragover",p),R.current.stop()}},[e.isDragging,A]),s.useEffect(()=>()=>{R.current.stop()},[]),{handleDragStart:W,handleDragEnd:g,handleDragOverWithInsert:x,handleDropWithInsert:S,handleColumnDragLeave:z}},Je=(o,e=1)=>{const[n,r]=s.useState(o),[a,i]=s.useState({}),d=s.useRef({}),u=s.useRef(null),m=s.useRef({x:0,y:0}),P=s.useRef(e);P.current=e;const v=s.useCallback(L=>document.querySelector(`[data-panel-id="${L}"]`),[]),M=s.useCallback((L,Y)=>{const J=Y.getBoundingClientRect(),H=window.getComputedStyle(Y),B={width:Math.round(J.width),height:Math.round(J.height),x:Math.round(J.left),y:Math.round(J.top),minHeight:H.minHeight||"auto",maxHeight:H.maxHeight||"none"},R=d.current[L];(!R||Object.keys(B).some(W=>R[W]!==B[W]))&&(d.current[L]=B,i(W=>({...W,[L]:B})))},[]),A=s.useCallback(L=>{const Y=v(L);Y&&M(L,Y)},[v,M]),w=s.useCallback((L,Y)=>{Y&&requestAnimationFrame(()=>M(L,Y))},[M]),c=s.useCallback((L,Y,J)=>{const H=v(L);if(!H||u.current)return;const B=P.current,R=H.getBoundingClientRect(),W=H.cloneNode(!0);W.removeAttribute("data-panel-id"),W.style.position="fixed",W.style.top="0px",W.style.left="0px",W.style.width=`${H.offsetWidth}px`,W.style.height=`${H.offsetHeight}px`,W.style.pointerEvents="none",W.style.zIndex="1000",W.style.opacity="0.5",W.style.margin="0",W.style.transition="none",W.style.boxShadow="0 8px 32px rgba(0,0,0,0.3)",W.style.transformOrigin="top left",W.style.transform=`translate(${R.left}px, ${R.top}px) scale(${B})`,W.id=`drag-image-${L}`,document.body.appendChild(W),u.current=W,m.current={x:Y,y:J}},[v]),k=s.useCallback((L,Y)=>{if(u.current){const J=L-m.current.x,H=Y-m.current.y;u.current.style.transform=`translate(${J}px, ${H}px) scale(${P.current*1.05})`}},[]),C=s.useCallback(()=>{u.current&&(u.current.remove(),u.current=null)},[]),T=s.useCallback(L=>{r(Y=>({...Y,[L]:!Y[L]}))},[]);return{panelVisibility:n,panelSizes:a,setPanelVisibility:r,setPanelSizes:i,setPanelRef:w,updatePanelSize:A,togglePanelVisibility:T,getPanelElement:v,createDragImage:c,updateDragImagePosition:k,removeDragImage:C}},Mt=({initialColumnPanels:o,initialPanelVisibility:e,initialDragModes:n={},debugConfig:r,onPanelMove:a,onDragModeChange:i,onColumnPanelsChange:d,scale:u=1})=>{const m=s.useRef(r);m.current=r;const[P,v]=s.useState(o),[M,A]=s.useState(n),w=s.useRef(P);w.current=P;const c=Be(),k=Ge(),C=Je(e,u),T=s.useRef({mousemove:null,mouseup:null}),L=s.useCallback(f=>{const y=Object.keys(w.current),D=Xe(y,oe);for(let _=0;_<D.length;_++){const O=D[_],I=w.current[O]?.indexOf(f)??-1;if(I!==-1)return{columnIndex:_,panelIndex:I}}return null},[]),Y=s.useCallback((f,y,D)=>{N(m.current,1,"🔄 パネル移動実行:",f,"→",y,"@",D),v(_=>{const O={..._},I=Object.keys(O).find(l=>O[l].includes(f));if(!I)return console.error("Source column not found for panel:",f),_;if(!O[y])return console.error("Target column not found:",y),_;if(I===y){const l=[...O[I]],h=l.indexOf(f),[E]=l.splice(h,1),X=h<D?D-1:D;l.splice(X,0,E),O[y]=l}else{O[I]=O[I].filter(h=>h!==f);const l=[...O[y]];l.splice(D,0,f),O[y]=l}if(N(m.current,1,"✅ パネル移動完了:",f,"→",y),d&&requestAnimationFrame(()=>{d(O)}),a){const l=Object.keys(_).find(h=>_[h].includes(f));l&&requestAnimationFrame(()=>{a(f,l,y,D)})}return O})},[d,a]),J=s.useCallback((f,y)=>{if(!(c.dragState.isDragging||c.customDrag.isActive))return;const D=c.originalPanelPosition;if(D&&D.columnIndex===f&&(D.panelIndex===y||D.panelIndex+1===y)){N(m.current,1,`元の位置への挿入をスキップ: カラム${f}, 位置${y}`);return}const _=c.dragOverPosition;(!_||_.columnIndex!==f||_.insertIndex!==y)&&(N(m.current,1,`プレースホルダーエンター: カラム${f}, 位置${y}`),c.setDragOverPosition({columnIndex:f,insertIndex:y}),c.setDragState(O=>({...O,dragOverColumn:f})))},[c]),H=s.useCallback((f,y,D)=>{if(c.dragState.isDragging||c.customDrag.isActive){if(c.customDrag.isActive)N(m.current,1,"🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"),c.setDragOverPosition(null);else if(c.dragState.isDragging&&f&&y!==void 0&&D!==void 0){const _=c.dragOverPosition;if(_&&_.columnIndex===y&&_.insertIndex===D){const O=f.currentTarget,I=f.relatedTarget;I&&O.contains(I)||(N(m.current,1,`ノーマルドラッグ - プレースホルダーリーブ: カラム${y}, 位置${D}。ハイライトを解除します。`),c.setDragOverPosition(null))}}}},[c]),B=Ve({debugConfig:m.current,dragState:c.dragState,customDrag:c.customDrag,clickState:c.clickState,dragModes:M,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:L,performPanelMove:Y,showMousePosition:k.showMousePosition,updateMousePosition:k.updateMousePosition,recordMouseDown:k.recordMouseDown,recordClickPosition:k.recordClickPosition,isVirtualClick:k.isVirtualClick,calculateMoveDistance:k.calculateMoveDistance,clearMouseTracking:k.clearMouseTracking,resetDragState:c.resetDragState,resetClickState:c.resetClickState,createDragImage:C.createDragImage,updateDragImagePosition:C.updateDragImagePosition,removeDragImage:C.removeDragImage,handlePlaceholderDragEnter:J,handlePlaceholderDragLeave:H}),R=Ze({debugConfig:m.current,dragState:c.dragState,customDrag:c.customDrag,dragModes:M,columnPanels:P,dragOverPosition:c.dragOverPosition,originalPanelPosition:c.originalPanelPosition,setDragState:c.setDragState,setDragOverPosition:c.setDragOverPosition,setOriginalPanelPosition:c.setOriginalPanelPosition,performPanelMove:Y,showMousePosition:k.showMousePosition,updateMousePosition:k.updateMousePosition,resetDragState:c.resetDragState,handlePlaceholderDragEnter:J,handlePlaceholderDragLeave:H,scale:u}),W=s.useCallback(f=>{T.current.mousemove&&T.current.mousemove(f)},[]),g=s.useCallback(f=>{T.current.mouseup&&T.current.mouseup(f)},[]);s.useEffect(()=>(N(m.current,1,"🔧 グローバルイベントリスナー初期化 - refベース管理開始"),document.addEventListener("mousemove",W),document.addEventListener("mouseup",g),()=>{N(m.current,1,"🔴 グローバルイベントリスナー終了 - refベース管理終了"),document.removeEventListener("mousemove",W),document.removeEventListener("mouseup",g)}),[W,g]),s.useEffect(()=>{const f=!c.clickState.isClicked&&Object.entries(M).some(([,D])=>D==="custom"),y=c.clickState.isClicked&&c.clickState.panelId;if(f||y){const D=f?"パターン1（仮想クリック検出）":"パターン2,3（ドラッグ準備）";N(m.current,1,`🔧 イベントハンドラー設定開始: ${D}`),T.current.mousemove=B.handleGlobalMouseMove,T.current.mouseup=B.handleGlobalMouseUp}else c.customDrag.isActive||c.dragState.isDragging||(T.current.mousemove=null,T.current.mouseup=null)},[c.clickState.isClicked,c.clickState.panelId,M,c.customDrag.isActive,c.dragState.isDragging,B.handleGlobalMouseMove,B.handleGlobalMouseUp]);const x=s.useCallback((f,y)=>{const D=f.touches[0],_=f.currentTarget;c.setTouchDragState({isTouchDragging:!0,startX:D.clientX,startY:D.clientY,currentX:D.clientX,currentY:D.clientY,draggedElement:_}),c.setDragState({isDragging:!0,draggedPanel:y,dragOverColumn:null})},[c]),S=s.useCallback(f=>{if(!c.touchDragState.isTouchDragging)return;f.preventDefault();const y=f.touches[0];c.setTouchDragState(D=>({...D,currentX:y.clientX,currentY:y.clientY}))},[c.touchDragState.isTouchDragging,c]),z=s.useCallback(f=>{c.touchDragState.isTouchDragging&&(c.setTouchDragState({isTouchDragging:!1,startX:0,startY:0,currentX:0,currentY:0,draggedElement:null}),R.handleDragEnd())},[c.touchDragState.isTouchDragging,c,R]),p=s.useCallback(f=>{N(m.current,1,"🔄 toggleDragMode called:",{panelId:f}),A(y=>{const _=(y[f]||"normal")==="normal"?"custom":"normal",O={...y,[f]:_};if(i)try{i(f,_)}catch(I){console.error("🔄 Error in onDragModeChange:",I)}return O})},[i]),b=s.useCallback((f,y)=>{f.stopPropagation(),N(m.current,2,"パネルサイズ情報クリック:",y)},[]);return{columnPanels:P,panelVisibility:C.panelVisibility,dragModes:M,dragState:c.dragState,dragOverPosition:c.dragOverPosition,originalPanelPosition:c.originalPanelPosition,touchDragState:c.touchDragState,customDrag:c.customDrag,clickState:c.clickState,mousePosition:k.mousePosition,panelSizes:C.panelSizes,setColumnPanels:v,setPanelVisibility:C.setPanelVisibility,setDragModes:A,setPanelRef:C.setPanelRef,handleDragStart:R.handleDragStart,handleDragEnd:R.handleDragEnd,handleMouseDown:B.handleMouseDown,handleTouchStart:x,handleTouchMove:S,handleTouchEnd:z,handlePlaceholderDragEnter:J,handlePlaceholderDragLeave:H,handleDragOverWithInsert:R.handleDragOverWithInsert,handleDropWithInsert:R.handleDropWithInsert,handleColumnDragLeave:R.handleColumnDragLeave,handlePanelSizeInfoClick:b,toggleDragMode:p,findPanelPosition:L}},Rt=({minColumnWidth:o=350,defaultColumns:e=3,maxColumns:n=6,minColumns:r=1,currentColumnWidths:a={}}={})=>{const[i,d]=s.useState(0),u=s.useRef(0),m=s.useRef(null),[P,v]=s.useState(!1),M=s.useRef(e);s.useEffect(()=>{if(typeof window>"u")return;const c=()=>{const C=window.visualViewport?.width??0,T=document?.documentElement?.clientWidth??0,L=document?.body?.clientWidth??0,Y=window.innerWidth??0;return T>0?Math.floor(T):C>0?Math.floor(C):L>0?Math.floor(L):Math.floor(Y)},k=()=>{m.current!==null&&cancelAnimationFrame(m.current),m.current=requestAnimationFrame(()=>{const C=c();m.current=null,C!==0&&(Math.abs(u.current-C)<2||(u.current=C,d(C)))})};return k(),window.addEventListener("resize",k),window.addEventListener("orientationchange",k),window.visualViewport?.addEventListener("resize",k),()=>{m.current!==null&&cancelAnimationFrame(m.current),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),window.visualViewport?.removeEventListener("resize",k)}},[]);const A=s.useMemo(()=>{if(!P||i===0)return M.current=e,e;const c=Math.max(i-64,0),k=24,C=Object.values(a);let T;if(C.length>0){const L=C.reduce((H,B)=>H+B,0)/C.length,Y=Math.max(o,L);T=Math.floor((c+k)/(Y+k)),C.reduce((H,B)=>H+B,0)+(C.length-1)*k>c&&C.length>r&&(T=Math.min(T,C.length-1))}else T=Math.floor((c+k)/(o+k));return T=Math.max(r,Math.min(n,T)),M.current===T?M.current:(M.current=T,T)},[P,i,e,o,n,r,a]),w=s.useCallback(()=>{v(c=>!c)},[]);return{responsiveColumnCount:A,isResponsiveMode:P,screenWidth:i,toggleResponsiveMode:w}};const _t=te("monitor",[["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"}]]);const Ot=te("smartphone",[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2",key:"1yt0o3"}],["path",{d:"M12 18h.01",key:"mhygvu"}]]),At=({isResponsiveMode:o,responsiveColumnCount:e,currentColumnCount:n,screenWidth:r,onToggleResponsive:a})=>t.jsxs("div",{className:"flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1",children:[t.jsxs("button",{type:"button",onClick:a,className:`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${o?"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:o?"レスポンシブモードを無効化":"レスポンシブモードを有効化",children:[o?t.jsx(Ot,{className:"h-3 w-3"}):t.jsx(_t,{className:"h-3 w-3"}),t.jsx("span",{children:o?"レスポンシブ":"固定"})]}),o&&t.jsxs("div",{className:"flex items-center gap-1 text-slate-600 text-xs",children:[t.jsxs("span",{className:"font-mono",children:[r,"px"]}),t.jsx("span",{children:"→"}),t.jsxs("span",{className:"font-semibold text-blue-600",children:[e,"列"]}),e!==n&&t.jsx("span",{className:"text-orange-600",children:"(変更予定)"})]})]}),Tt={showDebugPanel:!1,showMousePosition:!1,showPanelSizes:!1,showPlaceholderInfo:!1,showDropZoneOutlines:!1,logLevel:0};F.ColumnControlPanel=jt,F.ColumnInsertPanel=Ct,F.DEFAULT_COLUMN_ID_CONFIG=oe,F.DEFAULT_DEBUG_CONFIG=Tt,F.DEFAULT_EDGE_SCROLL_CONFIG=xe,F.DebugControlPanel=Nt,F.DragDropLayout=vt,F.DropZoneDebugOverlay=Ne,F.EdgeScrollManager=Re,F.InsertPlaceholder=Ce,F.PanelSizeDisplay=He,F.ResizableColumn=bt,F.ResizeHandle=Pe,F.ResponsiveControl=At,F.calculateScrollVector=Me,F.createColumnIdMapping=Et,F.debugLog=N,F.generateColumnId=ge,F.generateColumnIds=Se,F.getNextColumnId=Dt,F.isValidColumnId=Pt,F.normalizeColumnPanels=Ie,F.parseColumnId=pe,F.performScroll=Ue,F.sortColumnIds=Xe,F.useColumnLayout=St,F.useCustomDragHandlers=Ve,F.useDragDropColumns=Mt,F.useDragDropState=Be,F.useMouseTracking=Ge,F.useNormalDragHandlers=Ze,F.usePanelManagement=Je,F.useResponsiveColumns=Rt,Object.defineProperty(F,Symbol.toStringTag,{value:"Module"})}));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/drag-drop-panels",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Reusable drag-and-drop panel layout components and utilities",
   "keywords": [
     "react",

package/src/DragDropLayout.spec.tsx CHANGED Viewed

@@ -1,4 +1,8 @@
 /** @vitest-environment jsdom */
+/**
+ * @fileoverview Unit tests for DragDropLayout component features including maximized CSS variable bounds.
+ * DragDropLayout コンポーネントの最大化 CSS 変数境界を含むユニットテスト。
+ */
 import { render } from "@testing-library/react"
 import { describe, expect, it } from "vitest"
 import { DragDropLayout } from "./DragDropLayout"

package/src/DragDropLayout.tsx CHANGED Viewed

@@ -5,7 +5,13 @@
  * このファイルは、ドラッグ＆ドロップインターフェースのメインレイアウトコンポーネントを定義します。
  * カラム、パネル、ドラッグイベント、FLIPアニメーションを統合し、完全にインタラクティブなユーザーエクスペリエンスを提供します。
  */
-import { Eye, EyeOff, Maximize2, Minimize2, MousePointer, MousePointerClick, X } from "lucide-react"
+import Eye from "lucide-react/dist/esm/icons/eye.js"
+import EyeOff from "lucide-react/dist/esm/icons/eye-off.js"
+import Maximize2 from "lucide-react/dist/esm/icons/maximize-2.js"
+import Minimize2 from "lucide-react/dist/esm/icons/minimize-2.js"
+import MousePointer from "lucide-react/dist/esm/icons/mouse-pointer.js"
+import MousePointerClick from "lucide-react/dist/esm/icons/mouse-pointer-click.js"
+import X from "lucide-react/dist/esm/icons/x.js"
 import { type CSSProperties, type DragEvent, Fragment, type MouseEvent, memo, type TouchEvent, useEffect, useLayoutEffect, useMemo, useRef } from "react"
 import { debugLog, PanelSizeDisplay } from "./drag-drop/DebugComponents"
 import { DropZoneDebugOverlay, InsertPlaceholder } from "./drag-drop/DebugOverlay"

package/src/drag-drop/ColumnControlPanel.tsx CHANGED Viewed

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

package/src/drag-drop/ColumnInsertPanel.tsx CHANGED Viewed

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

package/src/drag-drop/ResponsiveControl.tsx CHANGED Viewed

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

package/src/lucide-icons.d.ts ADDED Viewed

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