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

@aiquants/drag-drop-panels 0.8.0 → 0.8.3

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

Files changed (15) hide show

package/README.md +104 -79
package/dist/DragDropLayout.d.ts.map +1 -1
package/dist/drag-drop/ColumnControlPanel.d.ts.map +1 -1
package/dist/drag-drop/ColumnInsertPanel.d.ts.map +1 -1
package/dist/drag-drop/ResponsiveControl.d.ts.map +1 -1
package/dist/index.es.js +1298 -1133
package/dist/index.umd.js +2 -2
package/dist/styles/drag-drop-panels.standalone.css +1 -1
package/package.json +1 -1
package/src/DragDropLayout.spec.tsx +68 -0
package/src/DragDropLayout.tsx +17 -2
package/src/drag-drop/ColumnControlPanel.tsx +5 -2
package/src/drag-drop/ColumnInsertPanel.tsx +2 -1
package/src/drag-drop/ResponsiveControl.tsx +2 -1
package/src/lucide-icons.d.ts +6 -0

package/dist/index.umd.js CHANGED Viewed

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

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

@@ -1,3 +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}}
+@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}.col-1{grid-column:1}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.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 CHANGED Viewed

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

package/src/DragDropLayout.spec.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+/** @vitest-environment jsdom */
+/**
+ * @fileoverview Unit tests for DragDropLayout component features including maximized CSS variable bounds.
+ * DragDropLayout コンポーネントの最大化 CSS 変数境界を含むユニットテスト。
+ */
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { DragDropLayout } from "./DragDropLayout"
+describe("DragDropLayout - Maximized Bounds CSS Variables", () => {
+    it("applies --aqdd-maximize-* CSS variables in heightStyle when a panel is maximized", () => {
+        const columns = [
+            {
+                id: "col-1",
+                key: "col-1",
+                title: "Column 1",
+                panelIds: ["panel-1"],
+            },
+        ]
+        const DummyContent = () => <div>Panel Content</div>
+        const panelList = [
+            {
+                id: "panel-1",
+                title: "Test Panel",
+                component: DummyContent,
+            },
+        ]
+        const { container } = render(
+            <DragDropLayout
+                columns={columns}
+                panels={panelList}
+                columnPanels={{ "col-1": ["panel-1"] }}
+                panelVisibility={{ "panel-1": true }}
+                panelSizes={{ "panel-1": { width: 100, height: 300, x: 0, y: 0, minHeight: "0px", maxHeight: "none" } }}
+                dragState={{ isDragging: false, draggedPanel: null, dragOverColumn: null }}
+                dragOverPosition={null}
+                originalPanelPosition={null}
+                dragModes={{ "panel-1": "normal" }}
+                debugConfig={{ showDebugPanel: false, logLevel: 0 }}
+                maximizedPanel="panel-1"
+                onPanelMaximizeChange={() => {}}
+                onColumnPanelsChange={() => {}}
+                onPanelVisibilityChange={() => {}}
+                onDragStart={() => {}}
+                onDragEnd={() => {}}
+                onPlaceholderDragEnter={() => {}}
+                onPlaceholderDragLeave={() => {}}
+                onDragOverWithInsert={() => {}}
+                onDropWithInsert={() => {}}
+                onColumnDragLeave={() => {}}
+            />,
+        )
+        const maximizedPanel = container.querySelector('[data-maximized="true"]')
+        expect(maximizedPanel).not.toBeNull()
+        if (maximizedPanel) {
+            const htmlElement = maximizedPanel as HTMLElement
+            expect(htmlElement.style.position).toBe("fixed")
+            expect(htmlElement.style.top).toBe("var(--aqdd-maximize-top, 0px)")
+            expect(htmlElement.style.right).toBe("var(--aqdd-maximize-right, 0px)")
+            expect(htmlElement.style.bottom).toBe("var(--aqdd-maximize-bottom, 0px)")
+            expect(htmlElement.style.left).toBe("var(--aqdd-maximize-left, 0px)")
+        }
+    })
+})