@aiquants/resize-panels 1.9.0 → 2.0.0

package/README.md

@@ -1,16 +1,18 @@
 # @aiquants/resize-panels
 
-Resizable panel layout components for React. Packages the layout management, DOM measurement, and snapping logic previously used in application templates into a reusable library.
+Resizable panel layout components for React, built on one rule: **there is a single function that decides panel sizes, and the handle is the boundary rather than a thing positioned near it.**
+
+Every state change — first paint, container resize, drag, collapse, restored layout — runs the same allocator, so the panels always fill the container exactly and the handle can never drift away from the edge it moves.
 
 ## Key Features
 
-- **Core Components**: `PanelGroup`, `Panel`, and `PanelResizeHandle` synchronized via a central state reducer for layout and DOM measurements.
-- **Snap & Noise Filtering**: Uses `calculateSnapThreshold` and noise filtering to prevent layout jitter and unwanted collapse during resizing.
-- **Directional Collapsible Control**: Declarative `collapsible` settings (`from: 'start' | 'end' | 'both'`) and `usePanelControls` hook support collapsing/expanding via both drag actions and UI controls.
-- **Keyboard & Touch Accessibility**: Handles support mouse/touch dragging as well as **keyboard navigation via arrow keys** (5x step multiplier with Shift). Drag states remain robust under multi-touch or `pointercancel` interruptions.
-- **Full RTL Layout Support**: Under `dir="rtl"`, drag interactions, keyboard shortcuts, and handle positions automatically mirror visual layout directions.
-- **Auto-Persistence**: Set `autoSaveId` to save panel sizes to `localStorage` (debounced after layout stabilization) and restore state on page reloads.
-- **Debug & Visualization**: Enable `showDebugInfo` to inspect panel metrics and constraint violations via `PanelDebugInfo` and a global debug overlay (dynamically lazy-loaded, zero overhead in production bundles).
+- **One allocator, one geometry**: `allocatePanelSizes` distributes the container among the panels (proportional water-filling with per-panel minimum/maximum bounds). `Σ panel sizes == the group's content box` holds after every transition the declared bounds allow, and the reducer logs a breach of that invariant rather than letting it pass silently — a container the minimums overflow, or that the maximums cannot reach, is reported as a constraint violation instead.
+- **A handle that cannot drift**: the resize handle renders a zero-length in-flow flex item at the boundary and draws its hit area symmetrically around it. Nothing computes its position, so it stays on the boundary in LTR and RTL, horizontal and vertical, with group padding, and during every frame of a live container resize. A drag divides the pointer's travel by the group's visual scale, so the grab point stays under the cursor even below a transformed ancestor.
+- **Predictable proportions**: a flexible panel's size is a weight — only the ratio between weights matters, unless the panel declares `flexAdjustPriority`, which reads the same number as a claim on that share of the container. A dragged layout becomes a fixed point of the allocator, so it survives the next resize as a ratio instead of snapping back.
+- **Directional Collapsible Control**: declarative `collapsible` settings (`from: 'start' | 'end' | 'both'`) and the `usePanelControls` hook support collapsing/expanding from drags and from UI controls; expanding restores the layout the panel had before it closed.
+- **Keyboard & Touch Accessibility**: handles are `role="separator"` widgets whose `aria-valuenow` / `aria-valuemin` / `aria-valuemax` publish the boundary and the travel *this* handle can reach, collapsing included; a collapsed neighbour is reported as length 0 rather than making the values disappear. Arrow keys resize (5x step with Shift), reopen a collapsed neighbour from the side it closed towards and collapse a panel the pair's travel cannot shrink further, while a handle with nowhere to go leaves the key to the page. A drag needs the primary button and survives multi-touch and `pointercancel`.
+- **Auto-Persistence**: set `autoSaveId` to store each panel's open length and collapsed flag in `localStorage` next to its panel id, so a layout saved by a different set of panels is rejected instead of being applied by position.
+- **Debug & Visualization**: enable `showDebugInfo` to inspect allocations through the per-panel `PanelDebugInfo` badge and a global overlay (lazily imported; production bundles without it create no per-panel observers at all). A constraint violation needs no flag: the group draws its own placeholder over the panels whenever the allocator reports one.
 
 ## Installation
 
@@ -41,7 +43,7 @@ export const Example = () => {
     const baseId = useId()
 
     return (
-        <PanelGroup id={`${baseId}-group`} direction="horizontal" className="h-96">
+        <PanelGroup id={`${baseId}-group`} direction="horizontal" style={{ height: "24rem" }}>
             <Panel id={`${baseId}-left`} defaultSize={{ value: 200, unit: "pixels" }} className="bg-slate-100">
                 Left Panel
             </Panel>
@@ -59,7 +61,7 @@ export const Example = () => {
 Specify `collapsible={{ from: "start" }}` or `collapsible={{ from: "end" }}` on a `Panel` to enable automatic collapse/expand when dragging the corresponding handle to container boundaries. Set `defaultCollapsed` to set initial state to collapsed. Use `collapsible={{ from: "both" }}` to allow collapsing from either edge.
 
 ```tsx
-<PanelGroup direction="horizontal" className="h-96">
+<PanelGroup direction="horizontal" style={{ height: "24rem" }}>
     <Panel id="sidebar" defaultSize={{ value: 240, unit: "pixels" }} collapsible={{ from: "end" }}>
         Sidebar
     </Panel>
@@ -98,7 +100,7 @@ const PanelToggleButtons = ({ panelId, label }: { panelId: string; label: string
 }
 
 export const Example = () => (
-    <PanelGroup direction="horizontal" className="h-96">
+    <PanelGroup direction="horizontal" style={{ height: "24rem" }}>
         <Panel id="sidebar" defaultSize={{ value: 240, unit: "pixels" }} collapsible={{ from: "end" }}>
             <PanelToggleButtons panelId="sidebar" label="Sidebar" />
         </Panel>
@@ -124,7 +126,7 @@ export const Example = () => (
 | `direction` | `'horizontal' \| 'vertical'` | Panel layout orientation |
 | `className` / `style` | `string` / `React.CSSProperties` | Additional styling for the container |
 | `children` | `React.ReactNode` | `Panel` and `PanelResizeHandle` child elements |
-| `showDebugInfo` | `boolean` | Enables `PanelDebugInfo` and global debug overlay |
+| `showDebugInfo` | `boolean` | Enables the per-panel `PanelDebugInfo` badge and the global debug overlay |
 | `onLayout` | `(sizes: number[]) => void` | Callback emitting updated pixel size arrays on resize/init |
 | `autoSaveId` | `string` | Key used to automatically persist and restore panel sizes in `localStorage` |
 
@@ -132,14 +134,27 @@ export const Example = () => (
 
 | Property | Type | Description |
 | --- | --- | --- |
-| `id` | `string` | Panel identifier. Explicit string required for SSR consistency |
-| `defaultSize` | `{ value: number; unit: 'pixels' \| 'percentage' } \| number` | Initial panel size (numbers parsed as percentages) |
+| `id` | `string` | Panel identifier (reflected in `data-panel-id`). Optional — a `useId`-derived id is generated when omitted — but fixed at mount: a later change is ignored with a warning |
+| `defaultSize` | `{ value: number; unit: 'pixels' \| 'percentage' } \| number` | Initial panel size (numbers parsed as percentages; `50%` when omitted) |
 | `minSize` / `maxSize` | `FlexibleSize` | Panel size boundaries (pixels or percentages) |
 | `collapsible` | `{ from: 'start' \| 'end' \| 'both' }` | Declarative collapsible edge configuration |
 | `defaultCollapsed` | `boolean` | Whether the panel starts collapsed |
-| `pixelAdjustPriority` | `number` | Priority for assigning excess space to pixel-based panels |
+| `pixelAdjustPriority` | `number` | Order in which pixel panels are served when space is scarce (higher first) |
+| `flexAdjustPriority` | `number` | Serving order among flexible panels (higher first); declaring it also reads `defaultSize` as an absolute claim on that share of the container |
+| `contentOverflow` | `React.CSSProperties["overflow"]` | Overflow of the panel's content wrapper (`auto` by default) |
 | `className` / `style` | `string` / `React.CSSProperties` | Panel container styles |
 
+`Panel` and `PanelGroup` forward any other DOM attribute (`data-testid`, `aria-*`, event handlers) to their
+element, except the ones they compute themselves: `Panel` owns `aria-hidden`, which follows the collapsed state,
+and its own `data-panel-*` attributes, while `PanelGroup` owns `data-panel-group-id` and
+`data-panel-group-direction` — the first is what `getPanelGroupElement` looks up, the second is what marks an
+element as a group for `findOwningGroup` and therefore for every handle. `aria-hidden` is removed
+from `PanelProps` to state that ownership, but TypeScript does not type-check JSX attribute names containing a
+hyphen, so neither it nor a `data-panel-*` / `data-panel-group-*` of your own is rejected at compile time: what
+enforces the contract is the runtime override, which applies these attributes after everything you forwarded. A
+`data-panel-group-id` you pass disappears altogether when the group itself has no `id`. Both elements merge your
+`className` with their own (`panel` / `panel-group`) instead of replacing it.
+
 ### PanelResizeHandle Properties
 
 | Property | Type | Description |
@@ -157,23 +172,82 @@ export const Example = () => (
 | `className` / `style` | `string` / `React.CSSProperties` | Additional styling for the resize handle |
 | `children` | `React.ReactNode` | Custom indicator element rendered inside handle (overrides default indicator) |
 
-> Handles render as `<button>` elements accessible via arrow keys (`←`/`→` for horizontal, `↑`/`↓` for vertical). Holding `Shift` increases step distance 5x. Under `dir="rtl"`, keyboard and drag directions adjust to visual layout. Dimension options snap to integer pixels via `roundHalfToEven` to eliminate subpixel blurring.
+> Handles render as `<button role="separator">` elements accessible via arrow keys (`←`/`→` for horizontal, `↑`/`↓` for vertical); holding `Shift` increases the step 5x. Under `dir="rtl"` the drag and keyboard directions follow the visual layout. The handle sits inside a zero-length anchor placed by flex layout, so its hit area is centred on the panel boundary without any position arithmetic.
+
+`PanelResizeHandle` forwards any other DOM attribute to its `<button>`, and calls your `onPointerDown` /
+`onKeyDown` before its own handling — calling `preventDefault()` in them stops the library's gesture from starting.
+The attributes it computes from the layout (`role`, `aria-orientation`, `aria-valuenow` / `aria-valuemin` /
+`aria-valuemax`, `aria-disabled`, `aria-hidden`) are removed from `PanelResizeHandleProps`, though only `role` is
+actually caught by the compiler — the hyphenated names are not type-checked in JSX, and it is the runtime override
+that keeps them the library's. `aria-label` stays yours and replaces the built-in description, and `title` defaults
+to that same description.
+
+Your `style` reaches the button between two library layers. The handle's resolved dimensions are published as CSS
+custom properties — `--rp-handle-thickness`, `--rp-indicator-thickness`, `--rp-indicator-length`,
+`--rp-indicator-bar-thickness`, `--rp-indicator-bar-length` — *before* it, so decorations of your own can be sized
+from the same numbers and may redefine them; the declarations that keep the hit area centred on the boundary
+(`position: absolute`, `zIndex: 20`, `touchAction: none`, the logical insets and the thickness / cross-axis `100%`
+box) are applied *after* it and take no override. While the group reports a constraint violation, every handle is
+hidden (`display: none` on its anchor) as well as disabled.
 
 ## Hooks & Utilities
 
-- `useResizablePanels`: Internal hook used by `PanelGroup`. Useful for building custom panel containers.
-- `usePanelGroup`: Context accessor for panel lists and layout state.
-- `usePanelControls`: Provides `collapse`, `expand`, and `toggle` operations for a specified panel ID.
-- `saveLayout` & `loadLayout`: Programmatically persist or restore layout state.
+- `useResizablePanels`: the hook behind `PanelGroup`. It measures the container, keeps the panel order equal to DOM order, notifies `onLayout`, persists the layout and returns the group's base style — it never computes a panel size.
+- `usePanelGroup` / `PanelGroupContext`: context accessor, and the context itself, for the panel list, the container length, the constraint violation and `layoutOrderKey` — the document order of the panels and handle anchors, which changes even when only a handle moved to another boundary.
+- `usePanelControls`: `collapse`, `expand` and `toggle` for a given panel id.
+- `allocatePanelSizes`, `resolvePanelBounds`, `isPixelPanel`: the layout calculation itself, exported for tests and for hosts that drive their own container.
+- `panelReducer`, `initialPanelGroupLayoutState`, `getPanelPreferenceInPixels`, `findLayoutInvariantBreach`: the state machine around the allocator, the length a layout should persist, and the `Σ sizes == container` check.
+- `getContainerSize`: measure one axis of an element in layout pixels; it returns `{ content, border }`, and `content` (padding and borders removed) is the length the allocator fills.
+- `findOwningGroup`, `getGroupLayoutElements`: resolve the group that owns an element, and that group's panels and handle anchors in document order — across wrapper elements, `display: contents` included, while skipping both a nested group's own elements and any `data-panel-id` that belongs to a panel's content rather than to this group.
+- `saveLayout` & `loadLayout`: persist or restore a layout (`{ id, size, collapsed }[]`).
+- `clamp`, `getConstraintInPixels`, `normalizeSizeConfig`, `percentageToPixels`, `toRoundedPercentage`, `calculateSnapThreshold`: the unit conversions and thresholds the components share.
 - `getPanelElement`, `getPanelGroupElement`, `getResizeHandleElement`: DOM element query helpers via `data-*` attributes.
 
+Every public type (`PanelProps`, `PanelGroupProps`, `PanelResizeHandleProps`, `PanelLayoutData`, `PanelRegistration`, `PersistedPanelSize`, `PanelGroupLayoutState`, `PanelAction`, `LayoutAllocation`, `PanelBounds`, `ContainerAxisMeasurement`, …) is re-exported from the package root; `docs/specs` (`00-architecture-overview.md` §8) lists the surface in full.
+
+## How sizes are decided
+
+| Panel kind | What it declares | What it gets |
+| --- | --- | --- |
+| Flexible (`percentage`, or a bare number) | a weight — only the ratio between such weights matters | its share of what is left after the panels with an absolute target, clamped to its bounds |
+| Flexible with `flexAdjustPriority` | the same number, read as a claim on that share of the container | that claim, served after the pixel panels and clamped to its bounds |
+| Pixel (`pixels`) | an absolute length | that length, clamped to its bounds, once the panels ahead of it in `pixelAdjustPriority` order have been served |
+
+Scarcity and surplus are two ends of one order. While space is scarce, targets are served in that order — pixel
+panels by `pixelAdjustPriority`, then flexible panels by `flexAdjustPriority` — so the panel last in line is the
+one that falls short of its target, even when every declared minimum would fit. While space is left over, it is
+offered to the ratio panels by weight, then to the prioritized flexible panels by weight, then to the pixel panels
+in `pixelAdjustPriority` order up to their `maxSize`, and last, in equal parts, to the flexible panels that have a
+weight of 0 and no `flexAdjustPriority`. A sidebar declared in pixels therefore grows past its declared length when
+nothing else can absorb the surplus: give it a `maxSize` to pin it. When a clamp bites, the residue is
+redistributed among the remaining panels of the same stage in their own ratio, and the container ends up exactly
+filled as long as one panel can still take the surplus; when none can, the gap is reported — as a constraint
+violation when the panels' maximums cannot reach the container, and as a logged invariant breach otherwise. The
+full statement, including the proofs of ratio preservation, continuity and the drag fixed point, is in `docs/specs`
+(`11-layout-allocator.md`).
+
 ## Layout Persistence
 
-When `autoSaveId` is provided to `PanelGroup`, panel dimensions are saved to `localStorage` (debounced by 200ms after `ResizeObserver` stabilization). Re-opening the page automatically applies `loadLayout(autoSaveId)` to restore both pixel- and percentage-based panels.
+When `autoSaveId` is provided to `PanelGroup`, the layout is written to `localStorage` under the key
+`panel-layout-<autoSaveId>` as `{ id, size, collapsed }[]`, 200ms after the layout stops changing: a change arriving
+inside that window restarts the timer rather than forcing a write, so a drag never runs synchronous storage I/O once
+per frame. The one write outside that timer is the flush on unmount, which hands over the entries still pending so
+the last layout is not lost to a navigation. The stored `size` is the panel's preference — the length it occupies
+while open — not its allocated size, so a panel saved while collapsed still knows what to reopen to. On the next
+mount, and again whenever `autoSaveId` changes, the payload is applied only if it names exactly the panels that are
+present; a payload from a different panel set is ignored rather than applied by position.
+Restoring into a container of a different length scales a flexible panel by ratio, because its stored length is
+re-read as a share of the current container, while a pixel panel restores the absolute length it had.
 
 ## Debugging & Inspection
 
-Enabling `showDebugInfo` on `PanelGroup` renders overlay inspection metrics over each `Panel` (showing collapse status, measured dimensions, and percentages) along with a global container inspector listing handle thickness (8px default) and constraint alerts. Debug components are lazily imported (`React.lazy`) and excluded from production builds when unused.
+Enabling `showDebugInfo` on `PanelGroup` renders inspection metrics over each `Panel` (container length, allocated
+size, preference, resolved bounds) along with a global inspector: a header counting the groups, panels and resize
+handles on the page, then one card per group carrying its direction and container box and, for every panel, the
+state size next to the measured size, both percentages, the preference, the unit, the declared bounds and the two
+priorities. Individual handle measurements and constraint violations are not part of that overlay; a violation is
+shown by the placeholder the group draws over its panels, with or without the flag. Debug components are lazily
+imported (`React.lazy`); without the flag no per-panel `ResizeObserver` is created.
 
 ## Styling (CSS)
 
@@ -196,6 +270,39 @@ The package provides two CSS consumption options:
 
   Dark mode activates based on the `.dark` class on `<html>`.
 
+### Style ownership
+
+Your `className` and `style` reach all three components, but the declarations the layout itself depends on are
+applied *after* them and do not accept an override:
+
+- **Group**: `display: flex`, `flexDirection`, `alignItems: stretch`, `gap: 0px`, `position: relative`,
+  `boxSizing: border-box`, `writingMode: horizontal-tb`. The presentation defaults (`width`, `height`, `minWidth`,
+  `minHeight`, `overflow`) are yours to change.
+- **Panel**: the flex triple (`flexBasis` / `flexGrow` / `flexShrink`), `order: 0`, `margin: 0`, `display: flex`,
+  `flexDirection: column`, `position: relative`, `boxSizing: border-box`, `minWidth` and `minHeight: 0`,
+  `maxWidth` and `maxHeight: none`, the cross-axis `100%`, and `display: none` while collapsed. The presentation
+  defaults you can override are `overflow: hidden` and `isolation: isolate`.
+- **Handle button**: `position: absolute`, `zIndex: 20`, `touchAction: none`, the logical inset that centres it on
+  the boundary, its primary-axis thickness and its cross-axis `100%`. The `--rp-*` custom properties are placed
+  before your `style`, so those you may redefine.
+
+Both halves of that list are written to the `style` attribute, so a presentation default is overridable by your
+`style` **only** — a utility class loses to the inline declaration it would replace, which is why the examples
+above give the group its height through `style` rather than an `h-*` class. Every property the components do not
+write inline (colour, padding, borders, radius, …) stays entirely yours to set by class.
+
+A panel owns `maxWidth` / `maxHeight` because a single utility class (`max-w-*` and friends) would otherwise draw
+it shorter than the length the allocator handed out, leaving state and rendering disagreeing with the handle stuck.
+It defaults to `isolation: isolate` so that a `z-index` used inside a panel cannot rise above the handles; a panel
+whose content must escape its own box — a `position: fixed` maximised overlay, say — opts out with
+`style={{ isolation: "auto" }}` and accepts that the content may then cover a handle. That trade-off is inherent to
+stacking contexts: nothing can both take part in the panel's own stacking order and paint above its siblings.
+
+A panel renders its children inside an in-flow `flex: 1 1 auto` wrapper, so padding you set on a panel behaves
+normally; `contentOverflow` chooses how that wrapper scrolls. The group keeps `overflow: hidden` so that a handle
+straddling a boundary cannot raise a scrollbar — at the cost that when an edge panel collapses, the outer half of
+the handle now sitting on the group's own edge is clipped (its centre stays on the boundary).
+
 ## Demo App
 
 Run the included workspace demo app:

package/dist/GlobalDebugOverlay-Cf3GOn2A.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),P=require("react-dom"),x=require("./debugOverlayStore-DY09saU8.cjs"),R=require("./index-DqATP_BA.cjs"),n=(o,i)=>typeof o!="number"||!Number.isFinite(o)?"—":`${(o<0?0:o).toFixed(8)}${i}`,T={position:"fixed",left:"50%",bottom:"20px",transform:"translate(-50%, 0)",zIndex:100,maxWidth:"min(90vw, 1120px)",width:"100%",borderRadius:"14px",backgroundColor:"rgba(15, 23, 42, 0.72)",color:"#e2e8f0",fontFamily:"monospace",fontSize:"11px",lineHeight:1.6,boxShadow:"0 22px 45px rgba(15,23,42,0.45)",border:"1px solid rgba(148, 163, 184, 0.22)",backdropFilter:"blur(10px)",WebkitBackdropFilter:"blur(10px)",pointerEvents:"auto",overflow:"auto"},Y={display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:"12px"},w={display:"flex",flexDirection:"column",gap:"4px"},D={padding:"6px 10px",borderRadius:"9999px",border:"1px solid rgba(148, 163, 184, 0.35)",color:"#e2e8f0",fontWeight:600,fontSize:"10px",letterSpacing:"0.03em",textTransform:"uppercase",cursor:"pointer",transition:"background-color 0.18s ease, border-color 0.18s ease"},C={padding:"10px 12px",borderRadius:"10px",backgroundColor:"rgba(30, 41, 59, 0.55)",border:"1px solid rgba(148, 163, 184, 0.18)",display:"flex",flexDirection:"column",gap:"10px"},N={padding:"8px 10px",borderRadius:"8px",backgroundColor:"rgba(15, 23, 42, 0.55)",border:"1px solid rgba(148, 163, 184, 0.16)",display:"flex",flexDirection:"column",gap:"4px"},p={display:"flex",justifyContent:"space-between",alignItems:"center",gap:"6px"},k={display:"grid",gridTemplateColumns:"auto 1fr",gap:"2px 10px",color:"#e2e8f0"},G={padding:"2px 6px",borderRadius:"9999px",fontSize:"10px",textTransform:"uppercase"},I=({groupId:o})=>x.useDebugOverlayOwnerId()!==o?null:e.jsx(u,{}),u=()=>{const i=x.useDebugOverlaySnapshot().groups,[t,g]=A.useState(!0);if(i.length===0||typeof document>"u")return null;const b=i.reduce((s,a)=>s+a.panels.length,0),h=i.reduce((s,a)=>s+(a.handles?.length??0),0),f=()=>g(s=>!s),m=e.jsxs("div",{style:{...T,padding:t?"10px 18px":"14px 18px",maxHeight:t?"52px":"min(65vh, 520px)",transition:"max-height 0.24s ease, padding 0.24s ease"},children:[e.jsxs("div",{style:{...Y,marginBottom:t?0:"12px"},children:[e.jsxs("div",{style:w,children:[e.jsx("span",{style:{fontWeight:700,fontSize:"12px",letterSpacing:"0.03em"},children:"Panel Overview"}),e.jsxs("span",{style:{color:"#cbd5f5"},children:["groups: ",i.length," / panels: ",b," / resizers: ",h]})]}),e.jsx("button",{type:"button",onClick:f,style:{...D,backgroundColor:t?"rgba(59, 130, 246, 0.2)":"rgba(71, 85, 105, 0.45)"},title:t?"Panel Overview を開く":"Panel Overview を閉じる",children:t?"開く":"閉じる"})]}),!t&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"12px",maxHeight:"45vh",overflowY:"auto",paddingRight:"6px"},children:i.map((s,a)=>{const l=s.direction==="horizontal"?s.containerSize.width:s.containerSize.height;return e.jsxs("div",{style:C,children:[e.jsxs("div",{style:{...p,flexWrap:"wrap",gap:"10px",color:"#dbeafe"},children:[e.jsxs("span",{style:{fontWeight:600,fontSize:"11px",letterSpacing:"0.02em",textTransform:"uppercase"},children:["group ",a+1,": ",s.displayName]}),e.jsxs("span",{children:["direction: ",s.direction," / container: ",n(s.containerSize.width,"px")," × ",n(s.containerSize.height,"px")]})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"10px"},children:s.panels.map((r,y)=>{const d=r.measuredPixelSize??r.size,S=r.size,j=n(S,"px"),v=l>0?r.size/l*100:void 0,E=r.measuredPercentageSize!==void 0?r.measuredPercentageSize:l>0?d/l*100:void 0,c=r.collapsed||d<=R.PANEL_SNAP_THRESHOLD,O=r.collapsed?"collapsed":c?"hidden":"visible",z=n(v,"%"),L=n(E,"%"),_=n(d,"px");return e.jsxs("div",{style:N,children:[e.jsxs("div",{style:p,children:[e.jsx("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis"},children:r.id}),e.jsx("span",{style:{...G,backgroundColor:r.collapsed?"rgba(251, 113, 133, 0.25)":c?"rgba(250, 204, 21, 0.25)":"rgba(74, 222, 128, 0.25)",color:r.collapsed?"#fecdd3":c?"#fef08a":"#bbf7d0"},children:O})]}),e.jsxs("div",{style:k,children:[e.jsx("span",{children:"size (state):"}),e.jsx("span",{children:j}),e.jsx("span",{children:"size (measured):"}),e.jsx("span",{children:_}),e.jsx("span",{children:"percentage (state):"}),e.jsx("span",{children:z}),e.jsx("span",{children:"preference:"}),e.jsx("span",{children:r.sizeUnit==="pixels"?n(r.preferredPixelSize,"px"):n(r.preferredPercentageSize,"%")}),e.jsx("span",{children:"percentage (measured):"}),e.jsx("span",{children:L}),e.jsx("span",{children:"unit:"}),e.jsx("span",{children:r.sizeUnit}),e.jsx("span",{children:"min:"}),e.jsx("span",{children:r.minSize!==void 0?JSON.stringify(r.minSize):"—"}),e.jsx("span",{children:"max:"}),e.jsx("span",{children:r.maxSize!==void 0?JSON.stringify(r.maxSize):"—"}),e.jsx("span",{children:"priority:"}),e.jsx("span",{children:r.pixelAdjustPriority??"—"}),e.jsx("span",{children:"flex priority:"}),e.jsx("span",{children:r.flexAdjustPriority??"—"})]})]},r.id||y)})})]},s.groupId)})})]});return P.createPortal(m,document.body)};exports.GlobalDebugOverlay=u;exports.GlobalDebugOverlayGate=I;

package/dist/{GlobalDebugOverlay-Do70T2l6.js → GlobalDebugOverlay-DQtUdNeF.js}

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { useState as A } from "react";
 import { createPortal as P } from "react-dom";
-import { useDebugOverlayOwnerId as R, useDebugOverlaySnapshot as T } from "./debugOverlayStore-Cntyxboe.js";
-import { P as Y } from "./index-B6YGX2DH.js";
-const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s < 0 ? 0 : s).toFixed(8)}${n}`, w = {
+import { useDebugOverlayOwnerId as R, useDebugOverlaySnapshot as T } from "./debugOverlayStore-D7FT6zPE.js";
+import { P as Y } from "./index-DZ0itiBD.js";
+const s = (a, n) => typeof a != "number" || !Number.isFinite(a) ? "—" : `${(a < 0 ? 0 : a).toFixed(8)}${n}`, w = {
   position: "fixed",
   left: "50%",
   bottom: "20px",
@@ -75,11 +75,11 @@ const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s
   borderRadius: "9999px",
   fontSize: "10px",
   textTransform: "uppercase"
-}, M = ({ groupId: s }) => R() !== s ? null : /* @__PURE__ */ e(W, {}), W = () => {
+}, J = ({ groupId: a }) => R() !== a ? null : /* @__PURE__ */ e(W, {}), W = () => {
   const n = T().groups, [o, g] = A(!0);
   if (n.length === 0 || typeof document > "u")
     return null;
-  const u = n.reduce((r, d) => r + d.panels.length, 0), h = n.reduce((r, d) => r + (d.handles?.length ?? 0), 0), m = () => g((r) => !r), f = /* @__PURE__ */ t(
+  const u = n.reduce((i, d) => i + d.panels.length, 0), h = n.reduce((i, d) => i + (d.handles?.length ?? 0), 0), m = () => g((i) => !i), f = /* @__PURE__ */ t(
     "div",
     {
       style: {
@@ -145,8 +145,8 @@ const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s
               overflowY: "auto",
               paddingRight: "6px"
             },
-            children: n.map((r, d) => {
-              const l = r.direction === "horizontal" ? r.containerSize.width : r.containerSize.height;
+            children: n.map((i, d) => {
+              const l = i.direction === "horizontal" ? i.containerSize.width : i.containerSize.height;
               return /* @__PURE__ */ t("div", { style: k, children: [
                 /* @__PURE__ */ t(
                   "div",
@@ -171,17 +171,17 @@ const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s
                             "group ",
                             d + 1,
                             ": ",
-                            r.displayName
+                            i.displayName
                           ]
                         }
                       ),
                       /* @__PURE__ */ t("span", { children: [
                         "direction: ",
-                        r.direction,
+                        i.direction,
                         " / container: ",
-                        a(r.containerSize.width, "px"),
+                        s(i.containerSize.width, "px"),
                         " × ",
-                        a(r.containerSize.height, "px")
+                        s(i.containerSize.height, "px")
                       ] })
                     ]
                   }
@@ -194,18 +194,18 @@ const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s
                       gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
                       gap: "10px"
                     },
-                    children: r.panels.map((i, b) => {
-                      const c = i.measuredPixelSize ?? i.size, y = i.size, S = a(y, "px"), v = i.percentageSize ?? (l > 0 ? i.size / l * 100 : void 0), E = i.measuredPercentageSize !== void 0 ? i.measuredPercentageSize : l > 0 ? c / l * 100 : void 0, p = i.collapsed || c <= Y, z = i.collapsed ? "collapsed" : p ? "hidden" : "visible", O = a(v, "%"), L = a(E, "%"), _ = a(c, "px");
+                    children: i.panels.map((r, b) => {
+                      const p = r.measuredPixelSize ?? r.size, y = r.size, S = s(y, "px"), v = l > 0 ? r.size / l * 100 : void 0, E = r.measuredPercentageSize !== void 0 ? r.measuredPercentageSize : l > 0 ? p / l * 100 : void 0, c = r.collapsed || p <= Y, z = r.collapsed ? "collapsed" : c ? "hidden" : "visible", L = s(v, "%"), O = s(E, "%"), _ = s(p, "px");
                       return /* @__PURE__ */ t("div", { style: I, children: [
                         /* @__PURE__ */ t("div", { style: x, children: [
-                          /* @__PURE__ */ e("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }, children: i.id }),
+                          /* @__PURE__ */ e("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }, children: r.id }),
                           /* @__PURE__ */ e(
                             "span",
                             {
                               style: {
                                 ...H,
-                                backgroundColor: i.collapsed ? "rgba(251, 113, 133, 0.25)" : p ? "rgba(250, 204, 21, 0.25)" : "rgba(74, 222, 128, 0.25)",
-                                color: i.collapsed ? "#fecdd3" : p ? "#fef08a" : "#bbf7d0"
+                                backgroundColor: r.collapsed ? "rgba(251, 113, 133, 0.25)" : c ? "rgba(250, 204, 21, 0.25)" : "rgba(74, 222, 128, 0.25)",
+                                color: r.collapsed ? "#fecdd3" : c ? "#fef08a" : "#bbf7d0"
                               },
                               children: z
                             }
@@ -217,27 +217,27 @@ const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s
                           /* @__PURE__ */ e("span", { children: "size (measured):" }),
                           /* @__PURE__ */ e("span", { children: _ }),
                           /* @__PURE__ */ e("span", { children: "percentage (state):" }),
-                          /* @__PURE__ */ e("span", { children: O }),
-                          /* @__PURE__ */ e("span", { children: "percentage (measured):" }),
                           /* @__PURE__ */ e("span", { children: L }),
+                          /* @__PURE__ */ e("span", { children: "preference:" }),
+                          /* @__PURE__ */ e("span", { children: r.sizeUnit === "pixels" ? s(r.preferredPixelSize, "px") : s(r.preferredPercentageSize, "%") }),
+                          /* @__PURE__ */ e("span", { children: "percentage (measured):" }),
+                          /* @__PURE__ */ e("span", { children: O }),
                           /* @__PURE__ */ e("span", { children: "unit:" }),
-                          /* @__PURE__ */ e("span", { children: i.sizeUnit }),
+                          /* @__PURE__ */ e("span", { children: r.sizeUnit }),
                           /* @__PURE__ */ e("span", { children: "min:" }),
-                          /* @__PURE__ */ e("span", { children: i.minSize !== void 0 ? JSON.stringify(i.minSize) : "—" }),
-                          /* @__PURE__ */ e("span", { children: "auto min:" }),
-                          /* @__PURE__ */ e("span", { children: i.autoMinSize !== void 0 ? JSON.stringify(i.autoMinSize) : "—" }),
+                          /* @__PURE__ */ e("span", { children: r.minSize !== void 0 ? JSON.stringify(r.minSize) : "—" }),
                           /* @__PURE__ */ e("span", { children: "max:" }),
-                          /* @__PURE__ */ e("span", { children: i.maxSize !== void 0 ? JSON.stringify(i.maxSize) : "—" }),
+                          /* @__PURE__ */ e("span", { children: r.maxSize !== void 0 ? JSON.stringify(r.maxSize) : "—" }),
                           /* @__PURE__ */ e("span", { children: "priority:" }),
-                          /* @__PURE__ */ e("span", { children: i.pixelAdjustPriority ?? "—" }),
+                          /* @__PURE__ */ e("span", { children: r.pixelAdjustPriority ?? "—" }),
                           /* @__PURE__ */ e("span", { children: "flex priority:" }),
-                          /* @__PURE__ */ e("span", { children: i.flexAdjustPriority ?? "—" })
+                          /* @__PURE__ */ e("span", { children: r.flexAdjustPriority ?? "—" })
                         ] })
-                      ] }, i.id || b);
+                      ] }, r.id || b);
                     })
                   }
                 )
-              ] }, r.groupId);
+              ] }, i.groupId);
             })
           }
         )
@@ -248,5 +248,5 @@ const a = (s, n) => typeof s != "number" || !Number.isFinite(s) ? "—" : `${(s
 };
 export {
   W as GlobalDebugOverlay,
-  M as GlobalDebugOverlayGate
+  J as GlobalDebugOverlayGate
 };

package/dist/debugOverlayStore-D7FT6zPE.js

@@ -0,0 +1,135 @@
+import { useSyncExternalStore as x } from "react";
+const k = (l) => JSON.stringify(
+  l.map((e) => ({
+    id: e.id,
+    size: e.size,
+    sizeUnit: e.sizeUnit,
+    preferredPercentageSize: e.preferredPercentageSize,
+    preferredPixelSize: e.preferredPixelSize,
+    minSize: e.minSize ?? null,
+    maxSize: e.maxSize ?? null,
+    collapseFromStart: e.collapseFromStart,
+    collapseFromEnd: e.collapseFromEnd,
+    collapsed: e.collapsed,
+    collapsedByDirection: e.collapsedByDirection,
+    preferenceBeforeCollapse: e.preferenceBeforeCollapse,
+    pixelAdjustPriority: e.pixelAdjustPriority ?? null,
+    flexAdjustPriority: e.flexAdjustPriority ?? null,
+    measuredPixelSize: e.measuredPixelSize ?? null,
+    measuredPercentageSize: e.measuredPercentageSize ?? null
+  }))
+), H = (l) => JSON.stringify(
+  l.map((e) => ({
+    id: e.id,
+    thickness: e.thickness,
+    visible: e.visible,
+    direction: e.direction,
+    startPanelId: e.startPanelId ?? null,
+    endPanelId: e.endPanelId ?? null
+  }))
+), N = () => {
+  const l = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Set();
+  let c = null, v = 0, u = !0, h = [], P = {
+    ownerId: null,
+    groups: h
+  };
+  const y = () => {
+    for (const s of l)
+      s();
+  }, S = () => {
+    u = !0, y();
+  }, p = () => {
+    const s = c;
+    if (s && d.has(s))
+      return !1;
+    c = null;
+    const r = d.values().next();
+    return r.done || (c = r.value), s !== c;
+  };
+  return {
+    subscribe: (s) => (l.add(s), () => {
+      l.delete(s);
+    }),
+    getSnapshot: () => (p() && (u = !0), u && (h = Array.from(e.values()).sort((r, n) => r.index - n.index).map(({ serializedPanels: r, serializedHandles: n, ...f }) => f), P = {
+      ownerId: c,
+      groups: h
+    }, u = !1), P),
+    getOwnerId: () => (p() && (u = !0), c),
+    enableGroup: (s) => {
+      const r = d.size;
+      d.add(s), d.size !== r && p() && S();
+    },
+    disableGroup: (s) => {
+      d.delete(s) && p() && S();
+    },
+    updateGroup: (s, r) => {
+      const n = e.get(s), f = n?.index ?? v++, b = k(r.panels), m = H(r.handles), G = n?.displayName !== r.displayName, O = n?.direction !== r.direction, w = n ? n.containerSize.width !== r.containerSize.width || n.containerSize.height !== r.containerSize.height : !0;
+      let g = n?.serializedPanels !== b;
+      if (!g && n)
+        if (n.panels.length !== r.panels.length)
+          g = !0;
+        else
+          for (let o = 0; o < r.panels.length; o += 1) {
+            const i = n.panels[o], t = r.panels[o];
+            if (!(i && t)) {
+              g = !0;
+              break;
+            }
+            if (i.id !== t.id || i.size !== t.size || i.preferredPercentageSize !== t.preferredPercentageSize || i.preferredPixelSize !== t.preferredPixelSize || i.collapsed !== t.collapsed || i.measuredPixelSize !== t.measuredPixelSize || i.measuredPercentageSize !== t.measuredPercentageSize) {
+              g = !0;
+              break;
+            }
+          }
+      let z = n?.serializedHandles !== m;
+      if (!z && n)
+        if (n.handles.length !== r.handles.length)
+          z = !0;
+        else
+          for (let o = 0; o < r.handles.length; o += 1) {
+            const i = n.handles[o], t = r.handles[o];
+            if (!(i && t)) {
+              z = !0;
+              break;
+            }
+            if (i.id !== t.id || i.thickness !== t.thickness || i.visible !== t.visible || i.direction !== t.direction || i.startPanelId !== t.startPanelId || i.endPanelId !== t.endPanelId) {
+              z = !0;
+              break;
+            }
+          }
+      if (!n && r.panels.length === 0 && r.handles.length === 0 || n && !G && !O && !w && !g && !z)
+        return;
+      const C = r.panels.map((o) => ({ ...o })), I = r.handles.map((o) => ({ ...o })), D = { ...r.containerSize };
+      e.set(s, {
+        groupId: s,
+        displayName: r.displayName,
+        direction: r.direction,
+        containerSize: D,
+        panels: C,
+        handles: I,
+        index: f,
+        serializedPanels: b,
+        serializedHandles: m
+      }), S();
+    },
+    removeGroup: (s) => {
+      const r = e.delete(s), n = d.delete(s), f = p();
+      (r || n || f) && S();
+    }
+  };
+}, a = N(), M = () => x(a.subscribe, a.getOwnerId, a.getOwnerId), q = () => x(a.subscribe, a.getSnapshot, a.getSnapshot), K = (l) => {
+  a.enableGroup(l);
+}, L = (l) => {
+  a.disableGroup(l);
+}, Q = (l, e) => {
+  a.updateGroup(l, e);
+}, R = (l) => {
+  a.removeGroup(l);
+};
+export {
+  L as disableDebugOverlayGroup,
+  K as enableDebugOverlayGroup,
+  R as removeDebugOverlayGroup,
+  Q as updateDebugOverlayGroup,
+  M as useDebugOverlayOwnerId,
+  q as useDebugOverlaySnapshot
+};

package/dist/debugOverlayStore-DY09saU8.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),k=l=>JSON.stringify(l.map(e=>({id:e.id,size:e.size,sizeUnit:e.sizeUnit,preferredPercentageSize:e.preferredPercentageSize,preferredPixelSize:e.preferredPixelSize,minSize:e.minSize??null,maxSize:e.maxSize??null,collapseFromStart:e.collapseFromStart,collapseFromEnd:e.collapseFromEnd,collapsed:e.collapsed,collapsedByDirection:e.collapsedByDirection,preferenceBeforeCollapse:e.preferenceBeforeCollapse,pixelAdjustPriority:e.pixelAdjustPriority??null,flexAdjustPriority:e.flexAdjustPriority??null,measuredPixelSize:e.measuredPixelSize??null,measuredPercentageSize:e.measuredPercentageSize??null}))),H=l=>JSON.stringify(l.map(e=>({id:e.id,thickness:e.thickness,visible:e.visible,direction:e.direction,startPanelId:e.startPanelId??null,endPanelId:e.endPanelId??null}))),N=()=>{const l=new Set,e=new Map,d=new Set;let c=null,v=0,u=!0,z=[],h={ownerId:null,groups:z};const x=()=>{for(const s of l)s()},b=()=>{u=!0,x()},g=()=>{const s=c;if(s&&d.has(s))return!1;c=null;const r=d.values().next();return r.done||(c=r.value),s!==c};return{subscribe:s=>(l.add(s),()=>{l.delete(s)}),getSnapshot:()=>(g()&&(u=!0),u&&(z=Array.from(e.values()).sort((r,n)=>r.index-n.index).map(({serializedPanels:r,serializedHandles:n,...p})=>p),h={ownerId:c,groups:z},u=!1),h),getOwnerId:()=>(g()&&(u=!0),c),enableGroup:s=>{const r=d.size;d.add(s),d.size!==r&&g()&&b()},disableGroup:s=>{d.delete(s)&&g()&&b()},updateGroup:(s,r)=>{const n=e.get(s),p=n?.index??v++,P=k(r.panels),m=H(r.handles),O=n?.displayName!==r.displayName,G=n?.direction!==r.direction,w=n?n.containerSize.width!==r.containerSize.width||n.containerSize.height!==r.containerSize.height:!0;let S=n?.serializedPanels!==P;if(!S&&n)if(n.panels.length!==r.panels.length)S=!0;else for(let o=0;o<r.panels.length;o+=1){const i=n.panels[o],t=r.panels[o];if(!(i&&t)){S=!0;break}if(i.id!==t.id||i.size!==t.size||i.preferredPercentageSize!==t.preferredPercentageSize||i.preferredPixelSize!==t.preferredPixelSize||i.collapsed!==t.collapsed||i.measuredPixelSize!==t.measuredPixelSize||i.measuredPercentageSize!==t.measuredPercentageSize){S=!0;break}}let f=n?.serializedHandles!==m;if(!f&&n)if(n.handles.length!==r.handles.length)f=!0;else for(let o=0;o<r.handles.length;o+=1){const i=n.handles[o],t=r.handles[o];if(!(i&&t)){f=!0;break}if(i.id!==t.id||i.thickness!==t.thickness||i.visible!==t.visible||i.direction!==t.direction||i.startPanelId!==t.startPanelId||i.endPanelId!==t.endPanelId){f=!0;break}}if(!n&&r.panels.length===0&&r.handles.length===0||n&&!O&&!G&&!w&&!S&&!f)return;const D=r.panels.map(o=>({...o})),I=r.handles.map(o=>({...o})),C={...r.containerSize};e.set(s,{groupId:s,displayName:r.displayName,direction:r.direction,containerSize:C,panels:D,handles:I,index:p,serializedPanels:P,serializedHandles:m}),b()},removeGroup:s=>{const r=e.delete(s),n=d.delete(s),p=g();(r||n||p)&&b()}}},a=N(),j=()=>y.useSyncExternalStore(a.subscribe,a.getOwnerId,a.getOwnerId),A=()=>y.useSyncExternalStore(a.subscribe,a.getSnapshot,a.getSnapshot),B=l=>{a.enableGroup(l)},E=l=>{a.disableGroup(l)},F=(l,e)=>{a.updateGroup(l,e)},J=l=>{a.removeGroup(l)};exports.disableDebugOverlayGroup=E;exports.enableDebugOverlayGroup=B;exports.removeDebugOverlayGroup=J;exports.updateDebugOverlayGroup=F;exports.useDebugOverlayOwnerId=j;exports.useDebugOverlaySnapshot=A;