@aiquants/drag-drop-panels 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## Unreleased
+
+### Fixed
+
+- `useDragDropColumns` reports each mouse drop to its `onColumnPanelsChange` and `onPanelMove` options exactly once, in one animation frame after the arrangement changed, and each drag-mode switch to `onDragModeChange` exactly once, right after the switch — also under React's StrictMode, whose replay of state updaters in development made each of them fire twice.
+  A drop is computed on the arrangement the previous one produced, and `onPanelMove` is still called when `onColumnPanelsChange` throws; what they throw leaves that frame, one error as it is and both as one `AggregateError` whose `errors` keep the call order.
+  The returned `setColumnPanels` and `setDragModes` take the next value itself, as typed: an updater function, which the type never admitted but 0.9.0 handed on to React, throws a `TypeError` and changes nothing.
+- `ResizeHandle`, and with it the column resize handles of `enableResize`, drags through Pointer Events for a mouse, a finger and a pen alike: the primary button of a primary pointer starts a drag that captures the pointer, and its release, a `pointercancel` or the loss of the capture ends it with exactly one `onResizeEnd`.
+  A cancelled touch no longer leaves the drag running, a second finger, another button or another pointer no longer takes part, and the handle no longer keeps `mousemove`, `mouseup`, a non-passive `touchmove` and `touchend` listeners on the document for its whole lifetime: it listens only while a drag runs.
+  The handle's stylesheet sets `touch-action: none`, so a touch or a pen on it neither scrolls nor zooms the page. The props are unchanged.
+- Edge scrolling measures the visible part of the scroll root against the visual viewport (`window.visualViewport`) where the browser has one, so under a pinch zoom the bands sit at the edges of the screen instead of at off-screen edges of the layout viewport, and the page scrolls while the zoomed view hides part of the scroll root. The bands stay `triggerDistance` (80) CSS px wide at every zoom.
+
 ## 0.9.0 (2026-10-06)
 
 ### Breaking

package/README.md

@@ -117,15 +117,19 @@ function MyApp() {
 }
 ```
 
+`dnd.setColumnPanels` and `dnd.setDragModes` take the next value itself, as typed: the hook computes the next mouse drop and drag-mode switch on the last value they were given, so an updater function (`(current) => next`) throws a `TypeError` and changes nothing.
+
 ### Observing Moves
 
 Two callbacks report moves, and each move reaches exactly one of them:
 
 | Move | Who changes the arrangement | Reported through |
 | --- | --- | --- |
-| A mouse drop (HTML5 drag or custom drag) | `useDragDropColumns`, in its own state | the hook's `onPanelMove` and `onColumnPanelsChange` options, in an animation frame |
+| A mouse drop (HTML5 drag or custom drag) | `useDragDropColumns`, in its own state | the hook's `onPanelMove` and `onColumnPanelsChange` options, each once per drop in one animation frame after the change (also under React's StrictMode) |
 | A header move button, Alt + Shift + an arrow, a touch or pen drop | you, answering the layout's request | `DragDropLayout`'s `onColumnPanelsChange` prop |
 
+In the frame of a mouse drop the hook calls its `onColumnPanelsChange` first and its `onPanelMove` second, the second even when the first throws. What they throw leaves that frame: one error as it is, both as one `AggregateError` whose `errors` hold the two in call order.
+
 The layout's `onColumnPanelsChange` is a required prop. Wiring it to `dnd.setColumnPanels` (or to the state you pass back as `columnPanels`), as above, is all the move buttons and a touch screen need: the layout runs the touch and pen drag itself (see [Touch and Pen Drag](#touch-and-pen-drag)). The hook's options never see those moves, and the layout's prop never sees a mouse drop. To observe every change of the arrangement — to persist or log it — wire one handler to both, or observe `dnd.columnPanels`:
 
 ```tsx
@@ -243,11 +247,20 @@ An announcement keeps the language of every part: the template's own words and n
 
 ### Edge Scrolling
 
-During any drag — a mouse's HTML5 or custom drag, or a touch or pen drag — a pointer within 80 px of an edge of the visible part of the layout's scroll root (`[data-aqdd-scroll-root]`, its box clipped to the viewport) scrolls toward that edge, faster the nearer it is, following the pointer as it moves within the band.
+During any drag — a mouse's HTML5 or custom drag, or a touch or pen drag — a pointer within 80 px of an edge of the visible part of the layout's scroll root (`[data-aqdd-scroll-root]`, its box clipped to the part of the page you see — the visual viewport under a pinch zoom) scrolls toward that edge, faster the nearer it is, following the pointer as it moves within the band.
 
 - The scroll root itself scrolls while it can move that way.
 - Where it cannot — at its end, or not scrolling at all because the layout sits in a container of no definite height — the nearest ancestor you can scroll that way (`overflow` `auto` or `scroll`) that hides part of the scroll root on that side scrolls instead, else the page while the viewport hides part of it. Each scrolls by no more than the hidden length, so the scroll stops once the scroll root's edge is in view; a scroll root that is entirely in view never scrolls the page.
 - Every step is instant, so a `scroll-behavior: smooth` on your page does not slow it.
+- The bands stay 80 CSS px wide under a pinch zoom: like the speeds and every other target of a drag, they grow with the content they lie over.
+
+### Column Resizing
+
+With `enableResize`, each column whose `resizable` is not `false` gets a resize handle on its right edge (`role="separator"`) that a mouse, a finger and a pen drag alike. Handles render only while `onResizeStart`, `onResize` and `onResizeEnd` are all passed — leave out any one of them and no column gets a handle, without a warning — and none render while a shown panel is maximized (see [Maximize](#maximize)).
+
+- The primary button of a primary pointer starts a drag and reports `onResizeStart(columnId, x)`; every move of that pointer reports `onResize(x)`; its release, a `pointercancel` or the loss of the pointer capture reports `onResizeEnd()` exactly once (`x` is the pointer's viewport x in CSS px).
+- Other pointers and buttons start nothing. The handle has `touch-action: none`, so a touch or a pen on it never scrolls or zooms the page.
+- Turning `isResizing` off during a drag, or unmounting the handle, stops the drag without `onResizeEnd`.
 
 ### Panel Header
 

package/dist/drag-drop-panels.css

@@ -1 +1 @@
-:where([data-aqdd-scroll-root]){padding-block:var(--aqdd-stage-padding-block, 1.5rem);padding-inline:var(--aqdd-stage-padding-inline, 1rem 2rem)}@media(min-width:40rem){:where([data-aqdd-scroll-root]){padding-inline:var(--aqdd-stage-padding-inline, 1.5rem 2.5rem)}}:where([data-aqdd-columns]){gap:var(--aqdd-column-gap, 1.5rem)}:where([data-aqdd-layout],[data-aqdd-panel]){--aqdd-default-panel-surface: rgb(255 255 255 / .8);--aqdd-default-panel-border: #e2e8f0;--aqdd-default-panel-title-color: #334155;--aqdd-default-header-button-color: #475569;--aqdd-default-header-button-hover-color: #0f172a;--aqdd-default-header-button-hover-surface: #f1f5f9;--aqdd-default-header-close-hover-color: #b91c1c;--aqdd-default-custom-badge-color: #9a3412;--aqdd-default-custom-badge-surface: #ffedd5}:where([data-aqdd-panel][data-maximized]){--aqdd-default-panel-surface: rgb(255 255 255 / .95)}:where([data-aqdd-layout]){--aqdd-default-restore-button-color: #ffffff;--aqdd-default-restore-button-surface: #0369a1;--aqdd-default-restore-button-hover-surface: #075985}:where([data-aqdd-drop-placeholder]){--aqdd-default-drop-placeholder-color: #075985;--aqdd-default-drop-placeholder-surface: rgb(240 249 255 / .9);--aqdd-default-drop-placeholder-target-surface: #bae6fd}:where(.dark [data-aqdd-layout],.dark [data-aqdd-panel]){--aqdd-default-panel-surface: rgb(15 23 42 / .8);--aqdd-default-panel-border: #334155;--aqdd-default-panel-title-color: #e2e8f0;--aqdd-default-header-button-color: #94a3b8;--aqdd-default-header-button-hover-color: #f1f5f9;--aqdd-default-header-button-hover-surface: #334155;--aqdd-default-header-close-hover-color: #fca5a5;--aqdd-default-custom-badge-color: #fdba74;--aqdd-default-custom-badge-surface: #431407}:where(.dark [data-aqdd-panel][data-maximized]){--aqdd-default-panel-surface: rgb(15 23 42 / .95)}:where(.dark [data-aqdd-drop-placeholder]){--aqdd-default-drop-placeholder-color: #bae6fd;--aqdd-default-drop-placeholder-surface: rgb(8 47 73 / .9);--aqdd-default-drop-placeholder-target-surface: #075985}:where([data-aqdd-panel],[data-aqdd-hidden-panels],[data-aqdd-empty-column],[data-aqdd-hidden-panel-stand-in]){border-color:var(--aqdd-panel-border, var(--aqdd-default-panel-border));background-color:var(--aqdd-panel-surface, var(--aqdd-default-panel-surface))}:where([data-aqdd-hidden-panels],[data-aqdd-empty-column],[data-aqdd-hidden-panel-stand-in]){color:var(--aqdd-panel-title-color, var(--aqdd-default-panel-title-color))}:where([data-aqdd-restore-panel]){color:var(--aqdd-restore-button-color, var(--aqdd-default-restore-button-color));background-color:var(--aqdd-restore-button-surface, var(--aqdd-default-restore-button-surface))}:where([data-aqdd-restore-panel]:hover){background-color:var(--aqdd-restore-button-hover-surface, var(--aqdd-default-restore-button-hover-surface))}:where([data-aqdd-drop-placeholder=shown],[data-aqdd-drop-placeholder=target]){color:var(--aqdd-drop-placeholder-color, var(--aqdd-default-drop-placeholder-color));border-color:var(--aqdd-drop-placeholder-color, var(--aqdd-default-drop-placeholder-color));background-color:var(--aqdd-drop-placeholder-surface, var(--aqdd-default-drop-placeholder-surface))}:where([data-aqdd-drop-placeholder=target]){background-color:var(--aqdd-drop-placeholder-target-surface, var(--aqdd-default-drop-placeholder-target-surface))}:where([data-aqdd-panel-header]){display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;row-gap:.25rem;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:where([data-aqdd-panel-title]){flex:1 1 6em;min-inline-size:min(100%,6em);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--aqdd-panel-title-color, var(--aqdd-default-panel-title-color))}:where([data-aqdd-panel-controls]),:where([data-aqdd-panel-buttons]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem;min-inline-size:0}:where([data-aqdd-panel-controls]){margin-inline-start:auto}:where([data-aqdd-panel-buttons]){opacity:0;transition:opacity .15s ease}:where([data-aqdd-panel]:hover [data-aqdd-panel-buttons]){opacity:1}:where([data-aqdd-panel-buttons]:focus-within){opacity:1}@media(hover:none){:where([data-aqdd-panel-buttons]){opacity:1}}:where([data-aqdd-panel-action]){cursor:pointer;color:var(--aqdd-header-button-color, var(--aqdd-default-header-button-color))}:where([data-aqdd-panel-action]:hover){color:var(--aqdd-header-button-hover-color, var(--aqdd-default-header-button-hover-color));background-color:var(--aqdd-header-button-hover-surface, var(--aqdd-default-header-button-hover-surface))}:where([data-aqdd-panel-action=close]:hover){color:var(--aqdd-header-button-hover-color, var(--aqdd-default-header-close-hover-color))}:where([data-aqdd-custom-badge]),:where([data-aqdd-hidden-panel-badge]),:where([data-aqdd-drag-mode=custom] [data-aqdd-panel-action=drag-mode]){color:var(--aqdd-custom-badge-color, var(--aqdd-default-custom-badge-color));background-color:var(--aqdd-custom-badge-surface, var(--aqdd-default-custom-badge-surface))}:where([data-aqdd-panel-action][aria-disabled=true]){cursor:not-allowed;color:var(--aqdd-header-button-color, var(--aqdd-default-header-button-color));background-color:transparent}:where([data-aqdd-panel-action][aria-disabled=true]>svg){opacity:.382}@media(forced-colors:active){:where([data-aqdd-drag-mode=custom] [data-aqdd-panel-action=drag-mode]){forced-color-adjust:none;color:HighlightText;background-color:Highlight}:where([data-aqdd-panel-action][aria-disabled=true]){color:GrayText}}:where([data-aqdd-announcer]){position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.resize-enabled-column{flex-shrink:0;flex-grow:0;width:var(--column-width, 350px)}.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 ease}.column-resizing-active{opacity:1;box-shadow:0 0 0 2px #3b82f680;transition:none}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;-webkit-touch-callout:none!important}body.custom-dragging *:before,body.custom-dragging *:after{cursor:grabbing!important}.panel-draggable[data-dragging=true]{transform:rotate(1deg);opacity:.2;box-shadow:0 0 0 2px #60a5fa80;transition:transform 1s ease,opacity 1s ease,box-shadow 1s ease}.panel.is-moving *{overflow:hidden!important}.panel-with-placeholder[data-panel-hidden=true]{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;height:0!important;opacity:0}[data-drop-zone=true]>.panel-with-placeholder{margin-top:0;transition:margin .2s ease}[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:rgba(15,23,42,.25) transparent}.panel-scroll-area:hover{scrollbar-color:rgba(15,23,42,.35) transparent}.panel-scroll-area::-webkit-scrollbar{width:6px}.panel-scroll-area::-webkit-scrollbar-track{background:transparent}.panel-scroll-area::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#0f172a40}.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}@media(prefers-reduced-motion:reduce){:where([data-aqdd-panel-buttons]){transition:none}.column-resizing,.panel-draggable[data-dragging=true]{transition:none}[data-drop-zone=true]>.panel-with-placeholder{transition:none}}.resize-handle{position:absolute;top:0;bottom:0;width:12px;display:flex;align-items:center;justify-content:center;cursor:col-resize;z-index:10;transition:background-color .2s ease}.resize-handle.right{right:-6px}.resize-handle.left{left:-6px}.resize-handle.resizing,.resize-handle:hover{background-color:#0000000d}.resize-handle-bar{width:2px;height:40px;background-color:#6366f180;border-radius:999px}.resize-handle.resizing .resize-handle-bar{background-color:#6366f1e6;box-shadow:0 0 6px #6366f199}.resize-handle-debug-info{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none}@media(prefers-reduced-motion:reduce){.resize-handle{transition:none}}.column-debug-size{position:absolute;top:8px;right:12px;background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;pointer-events:none}
+:where([data-aqdd-scroll-root]){padding-block:var(--aqdd-stage-padding-block, 1.5rem);padding-inline:var(--aqdd-stage-padding-inline, 1rem 2rem)}@media(min-width:40rem){:where([data-aqdd-scroll-root]){padding-inline:var(--aqdd-stage-padding-inline, 1.5rem 2.5rem)}}:where([data-aqdd-columns]){gap:var(--aqdd-column-gap, 1.5rem)}:where([data-aqdd-layout],[data-aqdd-panel]){--aqdd-default-panel-surface: rgb(255 255 255 / .8);--aqdd-default-panel-border: #e2e8f0;--aqdd-default-panel-title-color: #334155;--aqdd-default-header-button-color: #475569;--aqdd-default-header-button-hover-color: #0f172a;--aqdd-default-header-button-hover-surface: #f1f5f9;--aqdd-default-header-close-hover-color: #b91c1c;--aqdd-default-custom-badge-color: #9a3412;--aqdd-default-custom-badge-surface: #ffedd5}:where([data-aqdd-panel][data-maximized]){--aqdd-default-panel-surface: rgb(255 255 255 / .95)}:where([data-aqdd-layout]){--aqdd-default-restore-button-color: #ffffff;--aqdd-default-restore-button-surface: #0369a1;--aqdd-default-restore-button-hover-surface: #075985}:where([data-aqdd-drop-placeholder]){--aqdd-default-drop-placeholder-color: #075985;--aqdd-default-drop-placeholder-surface: rgb(240 249 255 / .9);--aqdd-default-drop-placeholder-target-surface: #bae6fd}:where(.dark [data-aqdd-layout],.dark [data-aqdd-panel]){--aqdd-default-panel-surface: rgb(15 23 42 / .8);--aqdd-default-panel-border: #334155;--aqdd-default-panel-title-color: #e2e8f0;--aqdd-default-header-button-color: #94a3b8;--aqdd-default-header-button-hover-color: #f1f5f9;--aqdd-default-header-button-hover-surface: #334155;--aqdd-default-header-close-hover-color: #fca5a5;--aqdd-default-custom-badge-color: #fdba74;--aqdd-default-custom-badge-surface: #431407}:where(.dark [data-aqdd-panel][data-maximized]){--aqdd-default-panel-surface: rgb(15 23 42 / .95)}:where(.dark [data-aqdd-drop-placeholder]){--aqdd-default-drop-placeholder-color: #bae6fd;--aqdd-default-drop-placeholder-surface: rgb(8 47 73 / .9);--aqdd-default-drop-placeholder-target-surface: #075985}:where([data-aqdd-panel],[data-aqdd-hidden-panels],[data-aqdd-empty-column],[data-aqdd-hidden-panel-stand-in]){border-color:var(--aqdd-panel-border, var(--aqdd-default-panel-border));background-color:var(--aqdd-panel-surface, var(--aqdd-default-panel-surface))}:where([data-aqdd-hidden-panels],[data-aqdd-empty-column],[data-aqdd-hidden-panel-stand-in]){color:var(--aqdd-panel-title-color, var(--aqdd-default-panel-title-color))}:where([data-aqdd-restore-panel]){color:var(--aqdd-restore-button-color, var(--aqdd-default-restore-button-color));background-color:var(--aqdd-restore-button-surface, var(--aqdd-default-restore-button-surface))}:where([data-aqdd-restore-panel]:hover){background-color:var(--aqdd-restore-button-hover-surface, var(--aqdd-default-restore-button-hover-surface))}:where([data-aqdd-drop-placeholder=shown],[data-aqdd-drop-placeholder=target]){color:var(--aqdd-drop-placeholder-color, var(--aqdd-default-drop-placeholder-color));border-color:var(--aqdd-drop-placeholder-color, var(--aqdd-default-drop-placeholder-color));background-color:var(--aqdd-drop-placeholder-surface, var(--aqdd-default-drop-placeholder-surface))}:where([data-aqdd-drop-placeholder=target]){background-color:var(--aqdd-drop-placeholder-target-surface, var(--aqdd-default-drop-placeholder-target-surface))}:where([data-aqdd-panel-header]){display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;row-gap:.25rem;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:where([data-aqdd-panel-title]){flex:1 1 6em;min-inline-size:min(100%,6em);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--aqdd-panel-title-color, var(--aqdd-default-panel-title-color))}:where([data-aqdd-panel-controls]),:where([data-aqdd-panel-buttons]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem;min-inline-size:0}:where([data-aqdd-panel-controls]){margin-inline-start:auto}:where([data-aqdd-panel-buttons]){opacity:0;transition:opacity .15s ease}:where([data-aqdd-panel]:hover [data-aqdd-panel-buttons]){opacity:1}:where([data-aqdd-panel-buttons]:focus-within){opacity:1}@media(hover:none){:where([data-aqdd-panel-buttons]){opacity:1}}:where([data-aqdd-panel-action]){cursor:pointer;color:var(--aqdd-header-button-color, var(--aqdd-default-header-button-color))}:where([data-aqdd-panel-action]:hover){color:var(--aqdd-header-button-hover-color, var(--aqdd-default-header-button-hover-color));background-color:var(--aqdd-header-button-hover-surface, var(--aqdd-default-header-button-hover-surface))}:where([data-aqdd-panel-action=close]:hover){color:var(--aqdd-header-button-hover-color, var(--aqdd-default-header-close-hover-color))}:where([data-aqdd-custom-badge]),:where([data-aqdd-hidden-panel-badge]),:where([data-aqdd-drag-mode=custom] [data-aqdd-panel-action=drag-mode]){color:var(--aqdd-custom-badge-color, var(--aqdd-default-custom-badge-color));background-color:var(--aqdd-custom-badge-surface, var(--aqdd-default-custom-badge-surface))}:where([data-aqdd-panel-action][aria-disabled=true]){cursor:not-allowed;color:var(--aqdd-header-button-color, var(--aqdd-default-header-button-color));background-color:transparent}:where([data-aqdd-panel-action][aria-disabled=true]>svg){opacity:.382}@media(forced-colors:active){:where([data-aqdd-drag-mode=custom] [data-aqdd-panel-action=drag-mode]){forced-color-adjust:none;color:HighlightText;background-color:Highlight}:where([data-aqdd-panel-action][aria-disabled=true]){color:GrayText}}:where([data-aqdd-announcer]){position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.resize-enabled-column{flex-shrink:0;flex-grow:0;width:var(--column-width, 350px)}.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 ease}.column-resizing-active{opacity:1;box-shadow:0 0 0 2px #3b82f680;transition:none}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;-webkit-touch-callout:none!important}body.custom-dragging *:before,body.custom-dragging *:after{cursor:grabbing!important}.panel-draggable[data-dragging=true]{transform:rotate(1deg);opacity:.2;box-shadow:0 0 0 2px #60a5fa80;transition:transform 1s ease,opacity 1s ease,box-shadow 1s ease}.panel.is-moving *{overflow:hidden!important}.panel-with-placeholder[data-panel-hidden=true]{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;height:0!important;opacity:0}[data-drop-zone=true]>.panel-with-placeholder{margin-top:0;transition:margin .2s ease}[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:rgba(15,23,42,.25) transparent}.panel-scroll-area:hover{scrollbar-color:rgba(15,23,42,.35) transparent}.panel-scroll-area::-webkit-scrollbar{width:6px}.panel-scroll-area::-webkit-scrollbar-track{background:transparent}.panel-scroll-area::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#0f172a40}.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}@media(prefers-reduced-motion:reduce){:where([data-aqdd-panel-buttons]){transition:none}.column-resizing,.panel-draggable[data-dragging=true]{transition:none}[data-drop-zone=true]>.panel-with-placeholder{transition:none}}.resize-handle{position:absolute;top:0;bottom:0;width:12px;display:flex;align-items:center;justify-content:center;cursor:col-resize;z-index:10;transition:background-color .2s ease;touch-action:none}.resize-handle.right{right:-6px}.resize-handle.left{left:-6px}.resize-handle.resizing,.resize-handle:hover{background-color:#0000000d}.resize-handle-bar{width:2px;height:40px;background-color:#6366f180;border-radius:999px}.resize-handle.resizing .resize-handle-bar{background-color:#6366f1e6;box-shadow:0 0 6px #6366f199}.resize-handle-debug-info{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none}@media(prefers-reduced-motion:reduce){.resize-handle{transition:none}}.column-debug-size{position:absolute;top:8px;right:12px;background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;pointer-events:none}