@aiquants/drag-drop-panels 0.7.2 → 0.8.0

package/dist/index.umd.js

@@ -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(a,l,i){var d=null;if(i!==void 0&&(d=""+i),l.key!==void 0&&(d=""+l.key),"key"in l){i={};for(var u in l)u!=="key"&&(i[u]=l[u])}else i=l;return l=i.ref,{$$typeof:r,type:a,key:d,ref:l!==void 0?l: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 a(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 l(){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(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:
   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 ae in m)ae!=="key"&&(S[ae]=m[ae])}else S=m;return Z&&u(S,typeof o=="function"?o.displayName||o.name||"Unknown":o),E(o,Z,S,l(),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(a(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(a(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(a(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 le=class le{constructor(t=2,s="[drag-drop-panels]",a=console){this.level=t,this.prefix=s,this.impl=a}static setLevel(t){le.instance.setLevel(t)}setLevel(t){this.level=t}static setImplementation(t){le.instance.setImplementation(t)}setImplementation(t){this.impl=t}static setPrefix(t){le.instance.setPrefix(t)}setPrefix(t){this.prefix=t}formatMessage(t){return typeof t=="string"?[`${this.prefix} ${t}`]:[this.prefix,t]}static debug(t,...s){le.instance.debug(t,...s)}debug(t,...s){this.level<=0&&this.impl.debug(...this.formatMessage(t),...s)}static info(t,...s){le.instance.info(t,...s)}info(t,...s){this.level<=1&&this.impl.info(...this.formatMessage(t),...s)}static warn(t,...s){le.instance.warn(t,...s)}warn(t,...s){this.level<=2&&this.impl.warn(...this.formatMessage(t),...s)}static error(t,...s){le.instance.error(t,...s)}error(t,...s){this.level<=3&&this.impl.error(...this.formatMessage(t),...s)}};le.instance=new le(2,"[drag-drop-panels]");let Ce=le;const _e=({config:r,panelId:t,sizeInfo:s,onSizeInfoClick:a})=>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:a,onMouseDown:a,onTouchStart:l=>l instanceof TouchEvent&&a(l),onDragStart:a,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:a,originalPosition:l,onDragEnter:i,onDragLeave:d,config:u,customDrag:h})=>{const E=l&&l.columnIndex===t&&(l.panelIndex===r||l.panelIndex+1===r),y=!E&&a?.columnIndex===t&&a?.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:a,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:a,config:l})=>{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(l,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,l]),e.jsxs("div",{ref:i,className:"relative",children:[a,t&&d&&l.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),[a,l]=n.useState(1);return tt(()=>{const i=s.current;if(!i||r<=0){l(1);return}const d=()=>{const h=i.clientWidth;if(h<=0)return;const E=h>=r?1:Math.max(h/r,t);l(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:a}},De=({columnId:r,onResizeStart:t,onResize:s,onResizeEnd:a,isResizing:l=!1,position:i="right",className:d="",debug:u={}})=>{const h=n.useRef(!1),E=n.useRef(null);n.useEffect(()=>{!l&&h.current&&(P(u,1,"外部からのリサイズ解除を検出、ドラッグ状態を強制解除:",r),h.current=!1,document.body.style.cursor="",document.body.style.userSelect="",document.body.classList.remove("resizing-column"))},[l,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,a(),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,a,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,a(),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,a,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,l?"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,l&&" (resizing)"]})]})},st=({columnId:r,width:t,minWidth:s=100,maxWidth:a=800,onResizeStart:l,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",`${a}px`))},[r,t,s,a]),e.jsxs("div",{className:A,"data-column-id":r,"data-width":t,"data-min-width":s,"data-max-width":a,children:[O,h&&e.jsx(De,{columnId:r,onResizeStart:l,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:a,originalPosition:l,onDragEnter:i,onDragLeave:d,debugConfig:u,customDrag:h})=>e.jsx(ke,{index:r,columnIndex:t,isDragging:s,dragOverPosition:a,originalPosition:l,onDragEnter:i,onDragLeave:d,config:u,customDrag:h}));Ee.displayName="LocalInsertPlaceholder";const rt=({columns:r,panels:t,columnPanels:s,panelVisibility:a,onPanelVisibilityChange:l,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),ae=o?1:S??(H?ne:1),se=Number.isFinite(ae)&&ae>0?ae: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(!a[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",inset:0,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(),l({...a,[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",{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(a[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=a[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:"textcenter flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-slate-400 transition-all duration-200",children:e.jsx("div",{className:"text-sm",children:"このエリアは空です"})})]})})},Ve=Object.keys(a).filter(C=>!a[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:()=>l({...a,[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",{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:a,minColumns:l=2,maxColumns:i=6,isResizing:d=!1,isResponsiveMode:u=!1,responsiveColumnCount:h})=>{const E=r>l&&!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?"レスポンシブモード中：カラム数は自動調整されます":`カラムを削除 (最小: ${l}列)`,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:a,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:"リサイズ中..."})]})]})},lt=({columnCount:r,onInsertColumn:t,onDeleteColumn:s,minColumns:a=1,maxColumns:l=6,isResizing:i=!1,disabled:d=!1})=>{const u=r<l&&!d,h=r>a&&!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}`))]})]})},at=({config:r,onConfigChange:t,isVisible:s,onToggleVisibility:a})=>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:a,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:l=>t({...r,showDebugPanel:l.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:l=>t({...r,showMousePosition:l.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:l=>t({...r,showPanelSizes:l.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:l=>t({...r,showPlaceholderInfo:l.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:l=>t({...r,showDropZoneOutlines:l.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:l=>t({...r,logLevel:parseInt(l.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:a,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:a,separator:l}=t,i=r+a;return`${s}${l}${i}`},Se=(r,t=re)=>Array.from({length:r},(s,a)=>ge(a,t)),xe=(r,t=re)=>{const{prefix:s,startIndex:a,separator:l}=t,i=`${s}${l}`;if(!r.startsWith(i))return null;const d=r.slice(i.length),u=parseInt(d,10);return Number.isNaN(u)||u<a?null:u-a},ct=(r,t=re)=>xe(r,t)!==null,it=(r,t=re)=>{const s=r.map(a=>xe(a,t)).filter(a=>a!==null).sort((a,l)=>a-l);for(let a=0;a<s.length;a++)if(s[a]!==a)return ge(a,t);return ge(s.length,t)},We=(r,t=re)=>r.sort((s,a)=>{const l=xe(s,t)??-1,i=xe(a,t)??-1;return l-i}),ut=(r,t=re)=>{const s={};return r.forEach((a,l)=>{const i=ge(l,t);s[a]=i}),s},ze=(r,t,s=re)=>{const a=[];Object.values(r).forEach(d=>{a.push(...d)});const l={},i=Se(t,s);return i.forEach(d=>{l[d]=[]}),a.forEach((d,u)=>{const h=u%t,E=i[h];l[E].push(d)}),l},dt=({initialColumns:r,initialPanels:t,debug:s={},onLayoutChange:a})=>{const[l,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(()=>{a?.(l)},[l,a]);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=l.columnWidths[g]||300,i(N=>({...N,isResizing:!0,resizingColumn:g}))},[s,l.columnWidths]),A=n.useCallback(g=>{const{resizingColumn:p,isResizing:N}=l;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,l]),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=>l.columns.find(p=>p.id===g),[l.columns]),B=n.useCallback(()=>{let g=0;for(const p of Object.values(l.columnWidths))g+=p;return g},[l.columnWidths]),T=n.useCallback(g=>document.querySelector(`[data-column-id="${g}"]`),[]),z=n.useCallback(g=>{i(p=>({...p,showInsertPlaceholders:g}))},[]);return{layoutState:l,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,a)=>{const{triggerDistance:l,scrollSpeed:i,maxScrollSpeed:d}=s;let u;a?u=a.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+l){const c=Math.max(0,(h+l-r)/l);A=-Math.min(d,i+c*(d-i))}else if(r>y-l){const c=Math.max(0,(r-(y-l))/l);A=Math.min(d,i+c*(d-i))}if(t<E+l){const c=Math.max(0,(E+l-t)/l);w=-Math.min(d,i+c*(d-i))}else if(t>O-l){const c=Math.max(0,(t-(O-l))/l);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 a=Ne(t,s,this.config,this.scrollElement);Fe(a,this.scrollElement)},16))}update(t,s){const a=Ne(t,s,this.config,this.scrollElement);(a.x!==0||a.y!==0)&&!this.isActive?this.start(t,s):a.x===0&&a.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:a,dragModes:l,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.max-w-full.flex-1.overflow-auto");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||a.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"),ae=Z.getAttribute("data-placeholder-column");if(ne&&ae){const se=parseInt(ne,10),ve=parseInt(ae,10);N(ve,se)}}else F()}else document.body.classList.remove("droppable"),E(null),h(Q=>({...Q,dragOverColumn:null}))}else if(i&&a.isClicked&&a.panelId){if(l[a.panelId]!=="custom"||J(m.clientX,m.clientY)<10)return;P(x.current,1,"🚀 カスタムドラッグ開始 -",a.panelId);const H=document.querySelector(`[data-panel-id="${a.panelId}"]`);if(H&&f.current){const Q=H.getBoundingClientRect(),q=f.current.x-Q.left,Z=f.current.y-Q.top;z(a.panelId,q,Z),document.body.classList.add("custom-dragging"),u({isActive:!0,panelId:a.panelId,startX:q,startY:Z})}h({isDragging:!0,draggedPanel:a.panelId,dragOverColumn:null}),y(w(a.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,a,t.dragOverColumn,l,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?l[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&&l[s.panelId]==="custom"?(P(x.current,1,"🔄 カスタムドラッグパネル移動実行:",s.panelId,"→",q),c(s.panelId,q,S.insertIndex)):P(x.current,1,"🚫 カスタムドラッグパネル移動スキップ:",s.panelId,"モード:",l[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)||l[Q]!=="custom"){b.current&&(clearTimeout(b.current),b.current=null),T(),f.current=null,v.current=0;return}v.current+=1,a.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 a.isClicked&&(T(),f.current=null,v.current=0);i&&A(!1)},[s.isActive,s.panelId,a,l,i,c,B,T,Y,O,A,p]),o=n.useCallback((m,S)=>{if(l[S]!=="custom"){P(x.current,1,"🚫 カスタムドラッグモードではない - スキップ:",S);return}L(m.clientX,m.clientY),a.isClicked&&a.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})},[a,l,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,a]=n.useState(null),[l,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}),a(null),i(null)},[]),j=n.useCallback(()=>{E({isClicked:!1,panelId:null}),w(!1)},[]),k=n.useCallback(T=>{t(T)},[]),L=n.useCallback(T=>{a(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:l,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),a=n.useRef(0),l=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)=>{a.current=Date.now(),l.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()-(a.current||0)>=j||!l.current?!1:Math.sqrt((w-l.current.x)**2+(c-l.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,a.current=0,l.current=null},[]);return{mousePosition:r,lastClickPosition:s.current,mouseDownTime:a.current,mouseDownPosition:l.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:a,columnPanels:l,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(l);_.current=l;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.max-w-full.flex-1.overflow-auto");x&&T.current.setScrollElement(x)},[]);const z=n.useCallback((x,b)=>{if(s.isActive){P(L.current,2,"カスタムドラッグアクティブ中 - 通常ドラッグを無効化:",b),x.preventDefault();return}if(a[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})})},[a,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,a]=n.useState(r),[l,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(_=>{a(Y=>({...Y,[_]:!Y[_]}))},[]);return{panelVisibility:s,panelSizes:l,setPanelVisibility:a,setPanelSizes:i,setPanelRef:w,updatePanelSize:A,togglePanelVisibility:L,getPanelElement:y,createDragImage:c,updateDragImagePosition:j,removeDragImage:k}},mt=({initialColumnPanels:r,initialPanelVisibility:t,initialDragModes:s={},debugConfig:a,onPanelMove:l,onDragModeChange:i,onColumnPanelsChange:d,scale:u=1})=>{const h=n.useRef(a);h.current=a;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)}),l){const o=Object.keys(R).find(m=>R[m].includes(f));o&&requestAnimationFrame(()=>{l(f,o,v,D)})}return M})},[d,l]),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:a=1,currentColumnWidths:l={}}={})=>{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(l);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>a&&(L=Math.min(L,k.length-1))}else L=Math.floor((c+j)/(r+j));return L=Math.max(a,Math.min(s,L)),O.current===L?O.current:(O.current=L,L)},[E,i,t,r,s,a,l]),w=n.useCallback(()=>{y(c=>!c)},[]);return{responsiveColumnCount:A,isResponsiveMode:E,screenWidth:i,toggleResponsiveMode:w}},ft=({isResponsiveMode:r,responsiveColumnCount:t,currentColumnCount:s,screenWidth:a,onToggleResponsive:l})=>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:l,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:[a,"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=lt,W.DEFAULT_COLUMN_ID_CONFIG=re,W.DEFAULT_DEBUG_CONFIG=gt,W.DEFAULT_EDGE_SCROLL_CONFIG=pe,W.DebugControlPanel=at,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} />`,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",inset:0,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"})}));

package/dist/styles/drag-drop-panels.standalone.css

@@ -0,0 +1,3 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! @aiquants/drag-drop-panels standalone CSS — 非 Tailwind ホスト専用。ホストの Tailwind ビルドと混在させないこと */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-orange-50:oklch(98% .016 73.684);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-600:oklch(64.6% .222 41.116);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-50:oklch(98.2% .018 155.826);--color-green-300:oklch(87.1% .15 154.449);--color-green-600:oklch(62.7% .194 149.214);--color-cyan-300:oklch(86.5% .127 207.078);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-600:oklch(58.8% .158 241.966);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-purple-300:oklch(82.7% .119 306.383);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--radius-md:calc(var(--radius,.5rem) - 2px);--radius-lg:var(--radius,.5rem);--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-lg:16px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base;@layer components{.resize-enabled-column{width:var(--column-width,350px);flex-grow:0;flex-shrink:0}.auto-width-column{flex:1}.resizing-cursor{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.column-resizing{opacity:.8;transition:opacity .2s}.column-resizing-active{opacity:1;transition:none;box-shadow:0 0 0 2px #3b82f680}body.resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.custom-dragging,body.custom-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}body.custom-dragging :before,body.custom-dragging :after{cursor:grabbing!important}.panel-draggable[data-dragging=true]{opacity:.2;transition:transform 1s,opacity 1s,box-shadow 1s;transform:rotate(1deg);box-shadow:0 0 0 2px #60a5fa80}.panel.is-moving *{overflow:hidden!important}.panel-with-placeholder[data-panel-hidden=true]{opacity:0;height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}[data-drop-zone=true]>.panel-with-placeholder{margin-top:0;transition:margin .2s}[data-drop-zone=true]>.panel-with-placeholder:not([data-panel-hidden=true])~.panel-with-placeholder:not([data-panel-hidden=true]){margin-top:1rem}.panel-scroll-area{scrollbar-width:thin;scrollbar-color:#0f172a40 transparent}.panel-scroll-area:hover{scrollbar-color:#0f172a59 transparent}.panel-scroll-area::-webkit-scrollbar{width:6px}.panel-scroll-area::-webkit-scrollbar-track{background:0 0}.panel-scroll-area::-webkit-scrollbar-thumb{background-color:#0f172a40;border-radius:9999px}.panel-scroll-area:hover::-webkit-scrollbar-thumb{background-color:#0f172a59}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.resize-handle{cursor:col-resize;z-index:10;justify-content:center;align-items:center;width:12px;transition:background-color .2s;display:flex;position:absolute;top:0;bottom:0}.resize-handle.right{right:-6px}.resize-handle.left{left:-6px}.resize-handle.resizing,.resize-handle:hover{background-color:#0000000d}.resize-handle-bar{background-color:#6366f180;border-radius:999px;width:2px;height:40px}.resize-handle.resizing .resize-handle-bar{background-color:#6366f1e6;box-shadow:0 0 6px #6366f199}.resize-handle-debug-info{color:#fff;white-space:nowrap;pointer-events:none;background:#1e40afd9;border-radius:4px;padding:4px 8px;font-size:11px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.column-debug-size{color:#fff;pointer-events:none;background:#1e40afd9;border-radius:4px;padding:4px 8px;font-size:11px;position:absolute;top:8px;right:12px}}@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.-right-1{right:calc(var(--spacing) * -1)}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-4{right:calc(var(--spacing) * 4)}.right-24{right:calc(var(--spacing) * 24)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-0{left:calc(var(--spacing) * 0)}.left-2{left:calc(var(--spacing) * 2)}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-1{margin-left:calc(var(--spacing) * 1)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.h-0{height:calc(var(--spacing) * 0)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-\[120px\]{height:120px}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-12{width:calc(var(--spacing) * 12)}.w-full{width:100%}.w-px{width:1px}.max-w-full{max-width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-\[2rem\]{min-width:2rem}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.scale-\[1\.02\]{scale:1.02}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-300{border-color:var(--color-amber-300)}.border-blue-300{border-color:var(--color-blue-300)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-700{border-color:var(--color-gray-700)}.border-red-300{border-color:var(--color-red-300)}.border-red-500{border-color:var(--color-red-500)}.border-red-700{border-color:var(--color-red-700)}.border-sky-300{border-color:var(--color-sky-300)}.border-sky-500{border-color:var(--color-sky-500)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-300{border-color:var(--color-slate-300)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-500\/90{background-color:#3080ffe6}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/90{background-color:color-mix(in oklab, var(--color-blue-500) 90%, transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-100\/10{background-color:#f3f4f61a}@supports (color:color-mix(in lab, red, red)){.bg-gray-100\/10{background-color:color-mix(in oklab, var(--color-gray-100) 10%, transparent)}}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-500\/90{background-color:#6a7282e6}@supports (color:color-mix(in lab, red, red)){.bg-gray-500\/90{background-color:color-mix(in oklab, var(--color-gray-500) 90%, transparent)}}.bg-gray-800{background-color:var(--color-gray-800)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-100\/20{background-color:#ffe2e233}@supports (color:color-mix(in lab, red, red)){.bg-red-100\/20{background-color:color-mix(in oklab, var(--color-red-100) 20%, transparent)}}.bg-red-500{background-color:var(--color-red-500)}.bg-red-500\/90{background-color:#fb2c36e6}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/90{background-color:color-mix(in oklab, var(--color-red-500) 90%, transparent)}}.bg-sky-50\/70{background-color:#f0f9ffb3}@supports (color:color-mix(in lab, red, red)){.bg-sky-50\/70{background-color:color-mix(in oklab, var(--color-sky-50) 70%, transparent)}}.bg-sky-200{background-color:var(--color-sky-200)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-100\/80{background-color:#f1f5f9cc}@supports (color:color-mix(in lab, red, red)){.bg-slate-100\/80{background-color:color-mix(in oklab, var(--color-slate-100) 80%, transparent)}}.bg-slate-300{background-color:var(--color-slate-300)}.bg-white{background-color:var(--color-white)}.bg-white\/30{background-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.bg-white\/30{background-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.bg-white\/70{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.bg-white\/70{background-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-white\/80{background-color:#fffc}@supports (color:color-mix(in lab, red, red)){.bg-white\/80{background-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.bg-yellow-500\/90{background-color:#edb200e6}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/90{background-color:color-mix(in oklab, var(--color-yellow-500) 90%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-amber-50{--tw-gradient-from:var(--color-amber-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-sky-500{--tw-gradient-from:var(--color-sky-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-indigo-500{--tw-gradient-to:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-orange-50{--tw-gradient-to:var(--color-orange-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-black{color:var(--color-black)}.text-blue-300{color:var(--color-blue-300)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-cyan-300{color:var(--color-cyan-300)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-green-300{color:var(--color-green-300)}.text-orange-300{color:var(--color-orange-300)}.text-orange-600{color:var(--color-orange-600)}.text-purple-300{color:var(--color-purple-300)}.text-red-300{color:var(--color-red-300)}.text-red-600{color:var(--color-red-600)}.text-sky-600{color:var(--color-sky-600)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-white{color:var(--color-white)}.text-yellow-300{color:var(--color-yellow-300)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-sky-400{--tw-ring-color:var(--color-sky-400)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-0{--tw-duration:0s;transition-duration:0s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:text-slate-900:is(:where(.group):hover *){color:var(--color-slate-900)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-blue-300:hover{border-color:var(--color-blue-300)}.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-green-300:hover{border-color:var(--color-green-300)}.hover\:border-orange-300:hover{border-color:var(--color-orange-300)}.hover\:border-red-300:hover{border-color:var(--color-red-300)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-blue-200:hover{background-color:var(--color-blue-200)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:bg-green-50:hover{background-color:var(--color-green-50)}.hover\:bg-orange-50:hover{background-color:var(--color-orange-50)}.hover\:bg-orange-200:hover{background-color:var(--color-orange-200)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-red-200:hover{background-color:var(--color-red-200)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:from-sky-600:hover{--tw-gradient-from:var(--color-sky-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:to-indigo-600:hover{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-green-600:hover{color:var(--color-green-600)}.hover\:text-orange-600:hover{color:var(--color-orange-600)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}@media (min-width:640px){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes pulse{50%{opacity:.5}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/drag-drop-panels",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Reusable drag-and-drop panel layout components and utilities",
   "keywords": [
     "react",
@@ -24,11 +24,14 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
-    "./css": "./dist/drag-drop-panels.css"
+    "./css": "./dist/drag-drop-panels.css",
+    "./styles/drag-drop-panels.standalone.css": "./dist/styles/drag-drop-panels.standalone.css"
   },
   "files": [
     "dist",
-    "README.md"
+    "src",
+    "README.md",
+    "LICENSE"
   ],
   "engines": {
     "node": ">=18.0.0",
@@ -42,6 +45,7 @@
     "lucide-react": "^0.561.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.7",
@@ -51,6 +55,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rimraf": "^6.1.2",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.2.7",
     "vite-plugin-dts": "^3.9.1",
@@ -61,7 +66,9 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && pnpm build:css",
+    "build:css": "tailwindcss -i src/styles/standalone.entry.css -o dist/styles/drag-drop-panels.standalone.css --minify",
+    "watch:css": "tailwindcss -i src/styles/standalone.entry.css -o dist/styles/drag-drop-panels.standalone.css --minify --watch",
     "dev": "vite build --watch",
     "watch": "vite build --watch",
     "typecheck": "tsc --noEmit",