@pasquelin/panels 0.1.0

package/dist/core/hooks/usePointerDrag.d.ts

@@ -0,0 +1,21 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+export type Dragging<T> = T & {
+    pointerId: number;
+};
+export type PointerDrag<T> = {
+    /** Captures the pointer, so the gesture survives a cursor leaving the element it began on. */
+    start: (event: ReactPointerEvent<Element>, held: T) => void;
+    /**
+     * The drag this event belongs to, or `null`. A mouse has no implicit capture, so a move with
+     * the button held from elsewhere reaches us too, and would be read from a stale origin.
+     */
+    matching: (event: ReactPointerEvent<Element>) => Dragging<T> | null;
+    /** Ends it whatever the pointer, releasing nothing — for a capture the platform took back. */
+    cancel: () => void;
+};
+/**
+ * One drag, held against the pointer that opened it. What a gesture MEANS stays with its caller;
+ * this holds the pointer, the identity guard and the capture. Stable across renders, so a caller
+ * may put it in the deps of a memoised handler.
+ */
+export declare function usePointerDrag<T extends object>(): PointerDrag<T>;

package/dist/core/hooks/useZone.d.ts

@@ -0,0 +1,28 @@
+import { type PanelSpec, type Slot, type Zone } from '../types';
+export type ZoneView<Id extends string> = {
+    /** What each half actually DRAWS — not what it holds: a `solo` panel silences the other. */
+    primary?: PanelSpec<Id>;
+    secondary?: PanelSpec<Id>;
+    /** Whether the zone draws at all. An empty one takes neither room nor handle. */
+    draws: boolean;
+    /** The zone's length along its own axis, already bounded so the centre keeps its floor. */
+    size: number;
+    /** Where the divider between the two halves stands. Undefined means CSS divides them evenly. */
+    split: number | undefined;
+    focused: boolean;
+};
+/**
+ * Everything one zone needs to draw itself.
+ *
+ * The size it answers is BOUNDED, not merely stored: two untouched columns asking for 320 and
+ * 380 leave a 900 px container 104 px of centre, well under its floor, and nothing in the stored
+ * lengths would have caught it — there is nothing stored at all. `sharedSizes` settles that,
+ * against the opposite zone and the room actually measured.
+ *
+ * 🛑 The selectors are SCALAR on purpose. Subscribing to `lengths` or to `available` as objects
+ * woke every mounted zone on each `pointermove` of a drag, because both are replaced wholesale
+ * on every write — five re-renders a frame where two are owed.
+ */
+export declare function useZone<Id extends string = string>(zone: Zone): ZoneView<Id>;
+/** The panels a rail draws for that zone, cut the way the zone itself is cut. */
+export declare function useZonePanels<Id extends string = string>(zone: Zone): [Slot, PanelSpec<Id>[]][];

package/dist/core/layoutEffect.d.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` in a browser, `useEffect` anywhere else.
+ *
+ * The chassis settles its arrangement and measures its container before the first paint — done
+ * in a plain effect, the first frame shows every zone closed and the second shows them open.
+ * On a server there is nothing to measure, and React warns about the layout variant, so it
+ * falls back rather than shouting.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/core/persistence.d.ts

@@ -0,0 +1,30 @@
+import { type Lengths, type OpenByZone } from './types';
+/**
+ * Where a layout is kept. `localStorage` by default, so the library works the moment it is
+ * installed; a project that stores elsewhere — a file, an API, `electron-store` — passes its own.
+ */
+export type LayoutStorage = {
+    read: (key: string) => string | null;
+    write: (key: string, value: string) => void;
+};
+export declare const memoryStorage: () => LayoutStorage;
+/**
+ * The browser's own, guarded: a private window, a disabled store or a full quota all throw, and
+ * a layout that cannot be saved is not a reason to take the application down.
+ */
+export declare const browserStorage: () => LayoutStorage;
+/** Bumped when the stored shape stops being one this build can restore. */
+export declare const LAYOUT_VERSION = 1;
+/**
+ * Reads a stored layout back, dropping anything this build cannot make sense of. Returns
+ * `undefined` rather than a partial answer: a half-read layout is worse than none, since the
+ * project's own defaults are a deliberate arrangement and a corrupted one is not.
+ */
+export declare function readLayout<Id extends string>(storage: LayoutStorage, key: string): {
+    open: OpenByZone<Id>;
+    lengths: Lengths;
+} | undefined;
+export declare function writeLayout<Id extends string>(storage: LayoutStorage, key: string, layout: {
+    open: OpenByZone<Id>;
+    lengths: Lengths;
+}): void;

package/dist/core/store.d.ts

@@ -0,0 +1,86 @@
+import { type StoreApi } from 'zustand/vanilla';
+import { type Lengths, type OpenByZone, type PanelSpec, type Slot, type Zone, type ZoneSlots } from './types';
+export type PanelsState<Id extends string = string> = {
+    /** Panels declared by the project, in the order they mounted. The rail reads this. */
+    registry: PanelSpec<Id>[];
+    open: OpenByZone<Id>;
+    lengths: Lengths;
+    /** Last clicked zone: the one whose rail icon gets accented. */
+    focusedZone: Zone | null;
+    /**
+     * What a zone held before a `solo` panel took it whole. Never persisted: a column reopening
+     * by itself days later, on an arrangement nobody remembers making, is not a restoration.
+     */
+    stashed: Partial<Record<Zone, ZoneSlots<Id>>>;
+    /** Whether the opening arrangement has been settled — see `settle`. */
+    settled: boolean;
+    /**
+     * The room the zones and the centre share, as last measured. Held in the store rather than
+     * read per component: every zone has to be bounded against the SAME number, and against what
+     * the opposite zone is taking out of it.
+     */
+    available: {
+        width: number;
+        height: number;
+    };
+    register: (spec: PanelSpec<Id>) => void;
+    unregister: (id: Id) => void;
+    /** Opens each untouched half on the first panel declared for it. Runs once. */
+    settle: (defaults?: OpenByZone<Id>) => void;
+    show: (id: Id) => void;
+    close: (zone: Zone, slot: Slot) => void;
+    toggle: (id: Id) => void;
+    focus: (zone: Zone | null) => void;
+    /** `available`: the container's dimension along the zone's axis. */
+    resize: (zone: Zone, size: number, available: number) => void;
+    /** Moves the divider between a zone's two halves. */
+    resplit: (zone: Zone, size: number, available: number) => void;
+    /** Moves the divider BETWEEN the band's two zones, which is a width. */
+    resplitBand: (size: number, available: number) => void;
+    /** Re-clamps every length after the container changed size. */
+    fit: (width: number, height: number) => void;
+    reset: () => void;
+};
+export type PanelsStore<Id extends string = string> = StoreApi<PanelsState<Id>>;
+/**
+ * A panel by its id. Exported because four sites had written this same lookup for want of it,
+ * and one of them had already drifted on how it treated `undefined`. It is also the single place
+ * to change the day the registry stops being a list and becomes a `Map`.
+ */
+export declare function specOf<Id extends string>(registry: PanelSpec<Id>[], id: Id | undefined): PanelSpec<Id> | undefined;
+/**
+ * Both halves at once, because one can silence the other: a `solo` panel takes the zone WHOLE.
+ * Resolved here rather than in each reader, which would contradict it.
+ */
+export declare function shownIn<Id extends string>(state: Pick<PanelsState<Id>, 'registry' | 'open'>, zone: Zone): {
+    primary?: Id;
+    secondary?: Id;
+};
+/**
+ * Whether the zone takes room off the axis it shares with its opposite.
+ *
+ * 🛑 NOT the same question as `zoneDraws`, and the band is the whole difference: its two halves
+ * share ONE height, so either of them drawing means the strip is taking that height. Asked per
+ * half, the top zone was told nothing faced it whenever `bottomRight` happened to be the closed
+ * one — and it could then be dragged over the height `bottomLeft` was already drawing in.
+ */
+export declare function zoneTakesRoom<Id extends string>(state: Pick<PanelsState<Id>, 'registry' | 'open'>, zone: Zone): boolean;
+/** Whether the zone draws at all — an empty one takes neither room nor handle. */
+export declare function zoneDraws<Id extends string>(state: Pick<PanelsState<Id>, 'registry' | 'open'>, zone: Zone): boolean;
+/**
+ * The size a zone opens at, given the panel leading it. A panel may ask for more than the zone's
+ * own default — a conversation at 260 wraps every sentence onto three lines.
+ *
+ * Takes the LEADING panel rather than resolving it: every caller has already asked `shownIn`,
+ * and resolving it again here was a second pass over the registry per zone, per drag frame.
+ */
+export declare function undraggedSizeOf<Id extends string>(registry: PanelSpec<Id>[], zone: Zone, leading: Id | undefined): number;
+export declare const EMPTY_LENGTHS: Lengths;
+export type CreatePanelsStoreOptions<Id extends string> = {
+    /** Restored layout, if any. Halves it names are taken as chosen and `settle` leaves them be. */
+    initial?: Partial<{
+        open: OpenByZone<Id>;
+        lengths: Lengths;
+    }>;
+};
+export declare function createPanelsStore<Id extends string = string>(options?: CreatePanelsStoreOptions<Id>): PanelsStore<Id>;

package/dist/core/types.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+/**
+ * The vocabulary of the chassis, and nothing else. No domain, no surfaces, no capabilities:
+ * a project declares the panels it wants and this describes only WHERE they hang.
+ */
+/**
+ * Where a panel hangs. The bottom band is TWO zones sharing one height: whichever of them is
+ * alone runs under the opposite column, and together they split the width between them.
+ */
+export type Zone = 'left' | 'right' | 'top' | 'bottomLeft' | 'bottomRight';
+export declare const ZONES: readonly Zone[];
+/**
+ * A zone is cut in two, and each half shows one panel at a time. The rail draws the same cut as
+ * a separator: icons above it open in the first half, icons below in the second.
+ *
+ * `primary` is the half nearest the window edge the zone hangs from — the top of a side column,
+ * the left of the bottom strip.
+ */
+export type Slot = 'primary' | 'secondary';
+export declare const SLOTS: readonly Slot[];
+/** The band's two halves, in the order they are drawn. */
+export declare const BOTTOM_ZONES: readonly Zone[];
+/** Whether the zone is one of the band's halves, which share a height and a resize handle. */
+export declare function isBottom(zone: Zone): boolean;
+/** Horizontal zones: their size is set as a height, not a width. */
+export declare function isHorizontal(zone: Zone): boolean;
+/** Which edge a zone hangs from. The band's two halves take the side their name gives. */
+export type Side = 'left' | 'right';
+/**
+ * The zones each rail carries, in the order it stacks them: the column's own at the top, its
+ * half of the bottom band at the foot.
+ *
+ * Stated here rather than inside the rail, because the frame lays itself out on the same
+ * knowledge — which column runs to the foot, which half of the band sits under it. Written in
+ * both places, the two could disagree about who is on the left with nothing to catch it.
+ */
+export declare const ZONES_BY_SIDE: Record<Side, {
+    column: Zone[];
+    band: Zone;
+}>;
+/**
+ * Zones whose panel sits before its resize handle. The opposite zones grow backwards, which
+ * is also why their drag direction is inverted.
+ */
+export declare function isLeading(zone: Zone): boolean;
+/**
+ * What a project registers for one panel. The content itself never passes through here — it is
+ * rendered by `<Panel>` where it was declared, and this is only what the rail and the frame
+ * need to know before the panel is on screen.
+ */
+export type PanelSpec<Id extends string = string> = {
+    id: Id;
+    zone: Zone;
+    slot: Slot;
+    /** Accessible name and header title. Already translated — the library carries no i18n. */
+    title: string;
+    /** Free-form: an icon component, an SVG, an image. The library imposes no icon set. */
+    icon?: ReactNode;
+    /**
+     * What the zone opens at while this panel leads it, where the zone's own size does not suit
+     * it. A size the reader dragged always wins over this.
+     */
+    opens?: number;
+    /** Takes the zone WHOLE: shown, the other half draws nothing. `primary` only. */
+    solo?: boolean;
+};
+/** Which panel each half of each zone currently shows. Absent means the half is closed. */
+export type ZoneSlots<Id extends string = string> = Partial<Record<Slot, Id>>;
+export type OpenByZone<Id extends string = string> = Partial<Record<Zone, ZoneSlots<Id>>>;
+export type SizesByZone = Partial<Record<Zone, number>>;
+/**
+ * How wide and how tall the frame is. `sizes` is the zone's own length — a width for the side
+ * columns, a height for the strips; `splits` is what the second half takes inside its zone.
+ */
+export type Lengths = {
+    sizes: SizesByZone;
+    splits: SizesByZone;
+    /**
+     * Width the band's LEFT zone takes while both halves draw. Unset means half each — a fraction
+     * would have to be re-read on every resize, where a length is what the handle drags.
+     */
+    bandSplit?: number;
+};
+/** The layout as it is stored and restored. This is the whole of what persistence carries. */
+export type LayoutState<Id extends string = string> = {
+    open: OpenByZone<Id>;
+    lengths: Lengths;
+};

package/dist/cx-CcykAxZN.js

@@ -0,0 +1,6 @@
+function o(...n) {
+  return n.filter(Boolean).join(" ");
+}
+export {
+  o as c
+};

package/dist/cx-YyuC5RtB.cjs

@@ -0,0 +1 @@
+"use strict";function t(...n){return n.filter(Boolean).join(" ")}exports.cx=t;

package/dist/dockview/DockviewCenter.d.ts

@@ -0,0 +1,37 @@
+import { type DockviewApi, type IDockviewPanelProps } from 'dockview-react';
+import { type FunctionComponent } from 'react';
+/**
+ * What each kind of document renders, keyed by the component name a panel asks for.
+ *
+ * Dockview's own prop shape rather than a narrowed one: it hands a panel its api and its
+ * params, and a project that wants either would otherwise have to cast to reach them.
+ */
+export type DocumentTabs = Record<string, FunctionComponent<IDockviewPanelProps>>;
+export type DockviewCenterProps = {
+    documents: DocumentTabs;
+    /**
+     * A layout to restore, as `api.toJSON()` gave it. Dockview throws on a layout naming a
+     * component this build cannot find, so a refused one is dropped rather than kept — it would
+     * fail again at every launch.
+     */
+    layout?: unknown;
+    /** Called whenever the arrangement changes, with what to store. */
+    onLayout?: (layout: unknown) => void;
+    /** The api, once Dockview is ready — for opening documents from outside. */
+    onReady?: (api: DockviewApi) => void;
+    /** Drawn while no document is open. Without one, Dockview shows a bare watermark. */
+    empty?: FunctionComponent;
+    className?: string;
+};
+/**
+ * Document tabs for the centre, on Dockview.
+ *
+ * A SEPARATE entry point (`@pasquelin/panels/dockview`) on purpose: Dockview is a large
+ * dependency, and the centre is a free slot for every project that only wants to put a router
+ * outlet or a canvas there. Importing this is how a project opts into paying for it.
+ *
+ * 🛑 Tool panels never enter here. The centre takes documents — things with a name, that a
+ * person opens and closes. Panels live on the edges and are switched from the rail, which is why
+ * they wear an icon and not a tab.
+ */
+export declare function DockviewCenter({ documents, layout, onLayout, onReady, empty, className, }: DockviewCenterProps): import("react").JSX.Element;

package/dist/dockview/index.d.ts

@@ -0,0 +1,3 @@
+import './dockview-theme.css';
+export { DockviewCenter, type DockviewCenterProps, type DocumentTabs } from './DockviewCenter';
+export type { DockviewApi } from 'dockview-react';

package/dist/dockview.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),p=require("dockview-react"),o=require("react"),f=require("./cx-YyuC5RtB.cjs");function k({documents:n,layout:c,onLayout:e,onReady:i,empty:s,className:a}){const t=o.useRef(!1),u=o.useCallback(r=>{if(c!==void 0&&!t.current){t.current=!0;try{r.api.fromJSON(c)}catch{e?.(void 0)}}i?.(r.api),e&&r.api.onDidLayoutChange(()=>e(r.api.toJSON()))},[c,e,i]);return d.jsx(p.DockviewReact,{className:f.cx("pnl-dockview",a),components:n,watermarkComponent:s,onReady:u})}exports.DockviewCenter=k;

package/dist/dockview.js

@@ -0,0 +1,39 @@
+import { jsx as s } from "react/jsx-runtime";
+import { DockviewReact as f } from "dockview-react";
+import { useRef as n, useCallback as d } from "react";
+import { c as k } from "./cx-CcykAxZN.js";
+function x({
+  documents: t,
+  layout: e,
+  onLayout: r,
+  onReady: i,
+  empty: m,
+  className: a
+}) {
+  const c = n(!1), p = d(
+    (o) => {
+      if (e !== void 0 && !c.current) {
+        c.current = !0;
+        try {
+          o.api.fromJSON(e);
+        } catch {
+          r?.(void 0);
+        }
+      }
+      i?.(o.api), r && o.api.onDidLayoutChange(() => r(o.api.toJSON()));
+    },
+    [e, r, i]
+  );
+  return /* @__PURE__ */ s(
+    f,
+    {
+      className: k("pnl-dockview", a),
+      components: t,
+      watermarkComponent: m,
+      onReady: p
+    }
+  );
+}
+export {
+  x as DockviewCenter
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),f=require("react"),x=require("./cx-YyuC5RtB.cjs"),ie=e=>{let n;const t=new Set,o=(d,u)=>{const p=typeof d=="function"?d(n):d;if(!Object.is(p,n)){const h=n;n=u??(typeof p!="object"||p===null)?p:Object.assign({},n,p),t.forEach(m=>m(n,h))}},r=()=>n,c={setState:o,getState:r,getInitialState:()=>a,subscribe:d=>(t.add(d),()=>t.delete(d))},a=n=e(o,r,c);return c},Be=(e=>e?ie(e):ie),Fe=e=>e;function Ae(e,n=Fe){const t=f.useSyncExternalStore(e.subscribe,f.useCallback(()=>n(e.getState()),[e,n]),f.useCallback(()=>n(e.getInitialState()),[e,n]));return f.useDebugValue(t),t}const E=["left","right","top","bottomLeft","bottomRight"],B=["primary","secondary"],ue=["bottomLeft","bottomRight"];function k(e){return e==="bottomLeft"||e==="bottomRight"}function C(e){return e==="top"||k(e)}const F={left:{column:["left","top"],band:"bottomLeft"},right:{column:["right"],band:"bottomRight"}};function G(e){return e==="left"||e==="top"}const L=140,ee=240,Z=100,de={left:320,right:260,top:180,bottomLeft:240,bottomRight:240},fe="bottomRight";function O(e){return k(e)?fe:e}const M={left:"right",right:"left",top:fe,bottomLeft:"top",bottomRight:"top"};function pe(e,n,t){return Math.min(Math.max(e,n),t)}function ne(e,n,t){const o=Math.max(L,Math.round(n-t-ee));return pe(Math.round(e),L,o)}function T(e,n){const t=Math.max(Z,Math.round(n-Z));return pe(Math.round(e),Z,t)}function A(e,n){const t=e[n];return t!==void 0&&(t.primary!==void 0||t.secondary!==void 0)}function De(e){return A(e,"bottomLeft")||A(e,"bottomRight")}function he(e,n,t,o){return(k(t)?De(n):A(n,t))?e.sizes[O(t)]??o(t):0}function He(e,n,t,o,r){const s={...e.sizes},i={...e.splits};for(const a of E){const d=s[a];if(d===void 0)continue;const u=C(a)?o:t;s[a]=ne(d,u,he(e,n,M[a],r));const p=i[a];p!==void 0&&(i[a]=T(p,C(a)?t:o))}const c=e.bandSplit===void 0?void 0:T(e.bandSplit,t);return{sizes:s,splits:i,bandSplit:c}}function ge(e,n,t){const o=t-ee,r=e+n;if(r<=o)return[e,n];const s=d=>d===0?0:L,i=s(e)+s(n);if(o<=i)return[Math.min(e,s(e)),Math.min(n,s(n))];const c=o/r,a=Math.max(s(e),Math.round(e*c));return[a,Math.max(s(n),Math.round(o-a))]}function Ue(e,n,t){return e.find(o=>o.zone===n&&o.slot===t)?.id}function S(e,n){return n===void 0?void 0:e.find(t=>t.id===n)}function N(e,n){const t=e.open[n],o=t?.primary;return o!==void 0&&S(e.registry,o)?.solo===!0?{primary:o}:{primary:o,secondary:t?.secondary}}function me(e,n){return k(n)?ue.some(t=>D(e,t)):D(e,n)}function D(e,n){const t=N(e,n);return t.primary!==void 0||t.secondary!==void 0}function H(e,n,t){return Math.max(de[n],S(e,t)?.opens??0)}function Ye(e,n,t,o){const r=e.open[n]??{},s={...e.stashed};if(S(e.registry,o)?.solo===!0)return s[n]=r,[{[t]:o},s];const i=r.primary;if(!(i!==void 0&&S(e.registry,i)?.solo===!0))return[{...r,[t]:o},e.stashed];const a=s[n]??{};return delete s[n],[{...a,[t]:o},s]}function Ve(e,n,t){const o=e.open[n]??{},r=o[t],s=e.stashed[n];if(s&&r!==void 0&&S(e.registry,r)?.solo===!0){const c={...e.stashed};return delete c[n],[s,c]}const i={...o};return delete i[t],[i,e.stashed]}const ce={sizes:{},splits:{}};function be(e={}){const n=e.initial;return Be()((t,o)=>({registry:[],open:n?.open??{},lengths:n?.lengths??ce,focusedZone:null,stashed:{},settled:n?.open!==void 0,available:{width:0,height:0},register:r=>t(s=>({registry:[...s.registry.filter(c=>c.id!==r.id),r]})),unregister:r=>t(s=>{const i={...s.open};for(const c of E){const a=i[c];if(a)for(const d of B){if(a[d]!==r)continue;const u={...a};delete u[d],i[c]=u}}return{registry:s.registry.filter(c=>c.id!==r),open:i}}),settle:r=>t(s=>{if(s.settled)return s;const i={...r??{}};for(const c of E)for(const a of B){if(i[c]?.[a]!==void 0)continue;const d=Ue(s.registry,c,a);d!==void 0&&(i[c]={...i[c]??{},[a]:d})}return{open:i,settled:!0}}),show:r=>t(s=>{const i=S(s.registry,r);if(!i)return s;const{zone:c,slot:a}=i;if(s.open[c]?.[a]===r)return{focusedZone:c};const[d,u]=Ye(s,c,a,r);return{open:{...s.open,[c]:d},stashed:u,focusedZone:c}}),close:(r,s)=>t(i=>{const[c,a]=Ve(i,r,s),d={...i.open,[r]:c};return{open:d,stashed:a,focusedZone:!A(d,r)&&i.focusedZone===r?null:i.focusedZone}}),toggle:r=>{const s=o(),i=S(s.registry,r);if(!i)return;N(s,i.zone)[i.slot]===r?s.close(i.zone,i.slot):s.show(r)},focus:r=>t(s=>s.focusedZone===r?s:{focusedZone:r}),resize:(r,s,i)=>t(c=>{const a=he(c.lengths,c.open,M[r],p=>H(c.registry,p,N(c,p).primary)),d=ne(s,i,a),u=O(r);return d===c.lengths.sizes[u]?c:{lengths:{...c.lengths,sizes:{...c.lengths.sizes,[u]:d}}}}),resplit:(r,s,i)=>t(c=>{const a=T(s,i);return a===c.lengths.splits[r]?c:{lengths:{...c.lengths,splits:{...c.lengths.splits,[r]:a}}}}),resplitBand:(r,s)=>t(i=>{const c=T(r,s);return c===i.lengths.bandSplit?i:{lengths:{...i.lengths,bandSplit:c}}}),fit:(r,s)=>t(i=>({available:{width:r,height:s},lengths:He(i.lengths,i.open,r,s,c=>H(i.registry,c,N(i,c).primary))})),reset:()=>t(r=>({open:{},lengths:ce,focusedZone:null,stashed:{},settled:!1,registry:r.registry}))}))}const $e=()=>{const e=new Map;return{read:n=>e.get(n)??null,write:(n,t)=>{e.set(n,t)}}},xe=()=>({read:e=>{try{return globalThis.localStorage?.getItem(e)??null}catch{return null}},write:(e,n)=>{try{globalThis.localStorage?.setItem(e,n)}catch{}}}),te=1;function _(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function qe(e){const n={};for(const t of E){const o=e[t];if(_(o))for(const r of B){const s=o[r];typeof s=="string"&&(n[t]={...n[t],[r]:s})}}return n}function le(e){const n={};for(const t of E){const o=e[t];typeof o=="number"&&Number.isFinite(o)&&(n[t]=o)}return n}function ye(e,n){const t=e.read(n);if(t===null)return;let o;try{o=JSON.parse(t)}catch{return}if(!_(o)||o.version!==te||!_(o.open)||!_(o.lengths))return;const r=o.lengths;if(!_(r.sizes)||!_(r.splits))return;const s=r.bandSplit;return{open:qe(o.open),lengths:{sizes:le(r.sizes),splits:le(r.splits),bandSplit:typeof s=="number"&&Number.isFinite(s)?s:void 0}}}function ve(e,n,t){const o={version:te,...t};e.write(n,JSON.stringify(o))}const Se=typeof globalThis.document>"u"?f.useEffect:f.useLayoutEffect,je=f.createContext(null);function we({store:e,storageKey:n="panels:layout",storage:t,defaultOpen:o,children:r}){const[s]=f.useState(()=>t===null?null:t??xe()),[i]=f.useState(()=>e??be({initial:s?ye(s,n):void 0}));return Se(()=>{i.getState().settle(o)},[i,o]),f.useEffect(()=>{if(s)return i.subscribe(c=>{c.settled&&ve(s,n,{open:c.open,lengths:c.lengths})})},[s,i,n]),l.jsx(je.Provider,{value:i,children:r})}function I(){const e=f.useContext(je);if(!e)throw new Error("usePanelsStore must be used inside a <Panels> or <PanelsProvider>");return e}function v(e){const n=I();return Ae(n,e)}function z(){const e=I();return f.useMemo(()=>{const{show:n,close:t,toggle:o,focus:r,resize:s,resplit:i,resplitBand:c,fit:a,reset:d}=e.getState();return{show:n,close:t,toggle:o,focus:r,resize:s,resplit:i,resplitBand:c,fit:a,reset:d}},[e])}function Pe(e){const n=I();f.useEffect(()=>{const t=e.current;if(!t)return;const o=()=>{const{clientWidth:s,clientHeight:i}=t;s===0||i===0||n.getState().fit(s,i)};if(o(),typeof ResizeObserver>"u")return;const r=new ResizeObserver(o);return r.observe(t),()=>r.disconnect()},[e,n])}function R(){const e=v(t=>t.registry),n=v(t=>t.open);return f.useMemo(()=>({registry:e,open:n}),[e,n])}function U(e){const n=R();return f.useMemo(()=>N(n,e),[n,e])}function J(e){const n=R();return f.useMemo(()=>D(n,e),[n,e])}function Ne(e){const n=R();return f.useMemo(()=>me(n,e),[n,e])}function _e(){return{left:J(F.left.band),right:J(F.right.band)}}function Me(){const e=f.useRef(null);return f.useMemo(()=>({start:(t,o)=>{t.currentTarget.setPointerCapture(t.pointerId),e.current={...o,pointerId:t.pointerId}},matching:t=>e.current?.pointerId===t.pointerId?e.current:null,cancel:()=>{e.current=null}}),[])}function Y({axis:e,invert:n=!1,size:t,onSize:o,measure:r,label:s,min:i,max:c,step:a=16,className:d}){const u=Me(),p=f.useRef(null),h=e==="vertical",m=f.useCallback(g=>(h?g?.clientHeight:g?.clientWidth)??0,[h]),b=f.useCallback(g=>{const y=u.matching(g);if(!y)return;const W=(h?g.clientY:g.clientX)-y.position;o(y.size+W*(n?-1:1),y.available)},[u,n,h,o]),j=f.useCallback(g=>{const y=h?"ArrowUp":"ArrowLeft",w=h?"ArrowDown":"ArrowRight";if(g.key!==y&&g.key!==w)return;const W=m(p.current?.parentElement),Te=t??r?.()??0,ke=g.key===w?1:-1;g.preventDefault(),o(Te+a*ke*(n?-1:1),W)},[n,h,r,o,m,t,a]);return l.jsx("div",{ref:p,role:"separator",tabIndex:0,"aria-label":s,"aria-orientation":h?"horizontal":"vertical","aria-valuenow":t===void 0?void 0:Math.round(t),"aria-valuemin":i,"aria-valuemax":c,onPointerDown:g=>{u.start(g,{position:h?g.clientY:g.clientX,size:t??r?.()??0,available:m(g.currentTarget.parentElement)})},onPointerMove:b,onPointerUp:u.cancel,onPointerCancel:u.cancel,onLostPointerCapture:u.cancel,onKeyDown:j,className:x.cx("pnl-handle",h?"pnl-handle--row":"pnl-handle--col",d)})}function ae(e,n,t,o,r){return r?t??H(e,o,n):0}function Ze(e){const n=R(),t=U(e),o=U(M[e]),r=Ne(M[e]),s=v(u=>u.lengths.sizes[O(e)]),i=v(u=>u.lengths.sizes[O(M[e])]),c=v(u=>u.lengths.splits[e]),a=v(u=>C(e)?u.available.height:u.available.width),d=v(u=>u.focusedZone===e);return f.useMemo(()=>{const{registry:u}=n,p=S(u,t.primary),h=S(u,t.secondary),m=p!==void 0||h!==void 0,b=ae(u,t.primary,s,e,m),j=ae(u,o.primary,i,M[e],r);return{primary:p,secondary:h,draws:m,size:a===0?b:ge(b,j,a)[0],split:c,focused:d}},[n,t,o,r,s,i,a,c,d,e])}function Ee(e){const n=v(t=>t.registry);return f.useMemo(()=>[["primary",n.filter(o=>o.zone===e&&o.slot==="primary")],["secondary",n.filter(o=>o.zone===e&&o.slot==="secondary")]].filter(([,o])=>o.length>0),[n,e])}const Ce=f.createContext(new Map),Ie=Ce.Provider;function ze(e){return f.useContext(Ce).get(e)}function Re({title:e,children:n,fillActions:t,trailing:o,className:r}){return l.jsxs("header",{className:x.cx("pnl-header",r),children:[l.jsx("span",{className:x.cx("pnl-header__title",t&&"pnl-header__title--fixed"),children:e}),l.jsx("span",{className:x.cx("pnl-header__actions",t&&"pnl-header__actions--fill"),children:n}),l.jsx("span",{className:"pnl-header__trailing",children:o})]})}function V({orientation:e="vertical",className:n}){return l.jsx("span",{"aria-hidden":"true",className:x.cx("pnl-separator",`pnl-separator--${e}`,n)})}function oe({children:e,className:n,...t}){return l.jsx("section",{className:x.cx("pnl-surface",n),...t,children:e})}function se({icon:e,label:n,active:t,accented:o,acts:r,className:s,children:i,ref:c,...a}){return l.jsxs("button",{type:"button",ref:c,"aria-label":n,"aria-pressed":r?void 0:t,className:x.cx("pnl-icon-button",t&&"pnl-icon-button--active",o&&"pnl-icon-button--accented",s),...a,children:[e!==void 0&&l.jsx("span",{className:"pnl-icon-button__glyph",children:e}),i]})}function We({panel:e,length:n,closeLabel:t,onFocus:o}){const{close:r}=z(),s=ze(e.id);return l.jsxs(oe,{"aria-label":e.title,onPointerDownCapture:o,className:n===void 0?"pnl-surface--fill":"pnl-surface--give",style:n===void 0?void 0:{flexBasis:n},children:[l.jsx(Re,{title:e.title,fillActions:s?.actions!==void 0&&C(e.zone),trailing:l.jsxs(l.Fragment,{children:[s?.actions!==void 0&&l.jsx(V,{}),l.jsx(se,{label:t,acts:!0,onClick:()=>r(e.zone,e.slot),className:"pnl-icon-button--header",icon:l.jsx(Ge,{})})]}),children:s?.actions}),l.jsx("div",{className:x.cx("pnl-body"),children:s?.content})]})}const K=f.memo(We);function Ge(){return l.jsx("svg",{viewBox:"0 0 24 24",width:"14",height:"14","aria-hidden":"true",focusable:"false",children:l.jsx("path",{fill:"currentColor",d:"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"})})}function Je({zone:e,labels:n}){const t=Ze(e),{focus:o,resize:r,resplit:s}=z(),i=f.useRef(null),c=f.useCallback(()=>o(e),[o,e]),a=C(e),d=f.useCallback(()=>a?i.current?.clientHeight??0:i.current?.clientWidth??0,[a]);if(!t.draws)return null;const{primary:u,secondary:p,size:h,split:m}=t,b=l.jsxs("div",{ref:i,className:x.cx("pnl-zone",a?"pnl-zone--row":"pnl-zone--col"),style:{[a?"height":"width"]:h},children:[u&&l.jsx(K,{panel:u,closeLabel:n.closePanel,onFocus:c}),u&&p&&l.jsx(Y,{axis:a?"horizontal":"vertical",invert:!0,size:m,min:Z,label:n.resizeSplit,onSize:(g,y)=>s(e,g,y)}),p&&l.jsx(K,{panel:p,length:u&&m!==void 0?m:void 0,closeLabel:n.closePanel,onFocus:c})]}),j=l.jsx(Y,{axis:a?"vertical":"horizontal",invert:!G(e),size:h,min:L,measure:d,label:n.resizeZone,onSize:(g,y)=>r(e,g,y)});return G(e)?l.jsxs(l.Fragment,{children:[b,j]}):l.jsxs(l.Fragment,{children:[j,b]})}const P=f.memo(Je);function Le({left:e,right:n,labels:t}){const o=v(i=>i.lengths.bandSplit),{resplitBand:r}=z(),s=f.useCallback((i,c)=>r(i,c),[r]);return!e&&!n?null:!e||!n?l.jsx(P,{zone:e?"bottomLeft":"bottomRight",labels:t}):l.jsxs("div",{className:"pnl-band",children:[l.jsx("div",{className:x.cx("pnl-band__half",o===void 0&&"pnl-band__half--even"),style:o===void 0?void 0:{width:o},children:l.jsx(P,{zone:"bottomLeft",labels:t})}),l.jsx(Y,{axis:"horizontal",size:o,min:Z,label:t.resizeBand,onSize:s}),l.jsx("div",{className:"pnl-band__half pnl-band__half--rest",children:l.jsx(P,{zone:"bottomRight",labels:t})})]})}function $(e){return null}$.displayName="Panels.Center";const Oe={closePanel:"Close panel",resizeZone:"Resize panel area",resizeSplit:"Resize the two panels",resizeBand:"Resize the bottom panels"};function q(e){return null}q.displayName="Panels.Panel";function X({side:e,header:n,className:t}){const{column:o,band:r}=F[e];return l.jsxs("div",{role:"toolbar","aria-orientation":"vertical",className:x.cx("pnl-rail",`pnl-rail--${e}`,t),children:[l.jsxs("div",{className:"pnl-rail__group",children:[n!==void 0&&l.jsxs(l.Fragment,{children:[n,l.jsx(V,{orientation:"horizontal"})]}),o.map(s=>l.jsx(Q,{zone:s},s))]}),l.jsx(Q,{zone:r})]})}function Q({zone:e}){const n=Ee(e),t=U(e),o=v(s=>s.focusedZone===e),{toggle:r}=z();return n.length===0?null:l.jsx("div",{className:"pnl-rail__group",children:n.map(([s,i],c)=>l.jsxs(f.Fragment,{children:[c>0&&l.jsx(V,{orientation:"horizontal"}),i.map(a=>{const d=t[s]===a.id;return l.jsx(se,{icon:a.icon,label:a.title,active:d,accented:d&&o,onClick:()=>r(a.id),className:"pnl-rail__button"},a.id)})]},`${e}:${s}`))})}function Ke(e){const n=[],t=new Map,o=[];let r=null;for(const s of f.Children.toArray(e)){if(!f.isValidElement(s)){o.push(s);continue}if(s.type===$){r=s;continue}if(s.type!==q){o.push(s);continue}const i=s.props,{id:c,zone:a,slot:d="primary",title:u,icon:p,opens:h,solo:m,actions:b,children:j}=i;n.push({id:c,zone:a,slot:d,title:u,icon:p,opens:h,solo:m}),t.set(c,{content:j,actions:b})}return{specs:n,content:t,centre:r,loose:o}}function re({header:e,footer:n,railHeader:t,labels:o,theme:r,className:s,children:i,...c}){return l.jsx(we,{...c,children:l.jsx(Xe,{header:e,footer:n,railHeader:t,labels:o,theme:r,className:s,children:i})})}function Xe({header:e,footer:n,railHeader:t,labels:o,theme:r,className:s,children:i}){const c=I(),a=f.useRef(null);Pe(a);const{specs:d,content:u,centre:p,loose:h}=f.useMemo(()=>Ke(i),[i]),m=f.useMemo(()=>({...Oe,...o}),[o]);Se(()=>{const{register:j,unregister:g}=c.getState();for(const w of d)j(w);const y=new Set(d.map(w=>w.id));for(const w of c.getState().registry)y.has(w.id)||g(w.id)},[c,d]);const b=_e();return l.jsx(Ie,{value:u,children:l.jsxs("div",{"data-pnl-theme":r,className:x.cx("pnl-root",s),children:[e,l.jsxs("div",{className:"pnl-middle",children:[l.jsx(X,{side:"left",header:t}),l.jsxs("div",{ref:a,className:"pnl-columns",children:[l.jsx(P,{zone:"top",labels:m}),l.jsxs("div",{className:"pnl-row",children:[!b.left&&l.jsx(P,{zone:"left",labels:m}),l.jsxs("div",{className:"pnl-stack",children:[l.jsxs("div",{className:"pnl-row",children:[b.left&&l.jsx(P,{zone:"left",labels:m}),l.jsx(oe,{className:"pnl-centre",children:p?.props.children}),b.right&&l.jsx(P,{zone:"right",labels:m})]}),l.jsx(Le,{left:b.left,right:b.right,labels:m})]}),!b.right&&l.jsx(P,{zone:"right",labels:m})]})]}),l.jsx(X,{side:"right"})]}),n,h]})})}re.Panel=q;re.Center=$;function Qe(){const e=I(),n=R(),t=v(i=>i.focusedZone),o=z(),r=f.useCallback(i=>{const c=S(n.registry,i);return c!==void 0&&N(n,c.zone)[c.slot]===i},[n]),s=f.useCallback(i=>{const c=S(n.registry,i);!c||N(n,c.zone)[c.slot]!==i||e.getState().close(c.zone,c.slot)},[n,e]);return f.useMemo(()=>({panels:n.registry,reveal:o.show,close:s,toggle:o.toggle,isShown:r,focusedZone:t,reset:o.reset}),[n,o.show,o.toggle,o.reset,s,r,t])}exports.cx=x.cx;exports.BOTTOM_ZONES=ue;exports.Band=Le;exports.Center=$;exports.ContentProvider=Ie;exports.DEFAULT_LABELS=Oe;exports.DEFAULT_SIZES=de;exports.IconButton=se;exports.LAYOUT_VERSION=te;exports.MIN_CENTER=ee;exports.MIN_SIZE=L;exports.MIN_SPLIT=Z;exports.Panel=q;exports.PanelFrame=K;exports.PanelHeader=Re;exports.Panels=re;exports.PanelsProvider=we;exports.Rail=X;exports.RailZone=Q;exports.ResizeHandle=Y;exports.SLOTS=B;exports.Separator=V;exports.Surface=oe;exports.ZONES=E;exports.ZONES_BY_SIDE=F;exports.ZoneEdge=P;exports.browserStorage=xe;exports.createPanelsStore=be;exports.fitSplit=T;exports.fitZoneSize=ne;exports.isBottom=k;exports.isHorizontal=C;exports.isLeading=G;exports.memoryStorage=$e;exports.readLayout=ye;exports.sharedSizes=ge;exports.shownIn=N;exports.sizeKeyOf=O;exports.specOf=S;exports.undraggedSizeOf=H;exports.useArrangement=R;exports.useBandHalves=_e;exports.useContainerFit=Pe;exports.usePanelContent=ze;exports.usePanels=Qe;exports.usePanelsActions=z;exports.usePanelsState=v;exports.usePanelsStore=I;exports.usePointerDrag=Me;exports.useShownIn=U;exports.useZone=Ze;exports.useZoneDraws=J;exports.useZonePanels=Ee;exports.useZoneTakesRoom=Ne;exports.writeLayout=ve;exports.zoneDraws=D;exports.zoneTakesRoom=me;

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import './styles/panels.css';
+export { Panels, type PanelsProps } from './components/Panels';
+export { Panel, type PanelProps } from './components/Panel';
+export { Center, type CenterProps } from './components/Center';
+export { Rail, RailZone, type RailProps } from './components/Rail';
+export { ZoneEdge, type ZoneEdgeProps } from './components/ZoneEdge';
+export { Band, type BandProps } from './components/Band';
+export { PanelFrame, type PanelFrameProps } from './components/PanelFrame';
+export { Surface } from './components/Surface';
+export { PanelHeader, type PanelHeaderProps } from './components/PanelHeader';
+export { IconButton, type IconButtonProps } from './components/IconButton';
+export { Separator, type SeparatorProps } from './components/Separator';
+export { ResizeHandle, type ResizeHandleProps } from './components/ResizeHandle';
+export { DEFAULT_LABELS, type PanelsLabels } from './components/labels';
+export { usePanelContent, ContentProvider, type PanelContent } from './components/content';
+export { PanelsProvider, usePanelsStore, usePanelsState, usePanelsActions, type PanelsProviderProps, } from './core/context';
+export { usePanels, type PanelsApi } from './core/hooks/usePanels';
+export { useArrangement, useBandHalves, useShownIn, useZoneDraws, useZoneTakesRoom, } from './core/hooks/useArrangement';
+export { useZone, useZonePanels, type ZoneView } from './core/hooks/useZone';
+export { useContainerFit } from './core/hooks/useContainerFit';
+export { usePointerDrag, type PointerDrag } from './core/hooks/usePointerDrag';
+export { createPanelsStore, shownIn, specOf, zoneDraws, zoneTakesRoom, undraggedSizeOf, type PanelsState, type PanelsStore, } from './core/store';
+export { browserStorage, memoryStorage, readLayout, writeLayout, LAYOUT_VERSION, type LayoutStorage, } from './core/persistence';
+export { MIN_SIZE, MIN_CENTER, MIN_SPLIT, DEFAULT_SIZES, fitZoneSize, fitSplit, sharedSizes, sizeKeyOf, } from './core/clamps';
+export { ZONES, SLOTS, BOTTOM_ZONES, ZONES_BY_SIDE, type Side, isBottom, isHorizontal, isLeading, type Zone, type Slot, type PanelSpec, type ZoneSlots, type OpenByZone, type SizesByZone, type Lengths, type LayoutState, } from './core/types';
+export { cx } from './core/cx';