paneweave 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kirill Osipov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,359 @@
+# paneweave
+
+Reusable React split-pane layout package for applications that need persistent, nested panel layouts without baking app-specific content into the layout engine.
+
+## What It Provides
+
+- Recursive split-tree layout model
+- Registry-driven panels
+- Resize handles with nested split support
+- Corner-handle split creation and collapse behavior
+- Optional persisted layout state via Zustand
+- Package-owned CSS entrypoint at `paneweave/styles.css`
+
+## Why The Name
+
+`paneweave` reflects how the library composes UI panes into a woven, recursive split tree.
+
+## Installation
+
+Install the package and import its stylesheet in the consuming app.
+
+```ts
+import 'paneweave/styles.css'
+import { PaneweaveLayout, type LayoutNode, type PanelDefinition } from 'paneweave'
+import { createLayoutStore } from 'paneweave/zustand'
+```
+
+## Consumer Example
+
+```tsx
+import 'paneweave/styles.css'
+import {
+  PaneweaveLayout,
+  type LayoutNode,
+  type PanelDefinition,
+} from 'paneweave'
+import { createLayoutStore } from 'paneweave/zustand'
+
+type PanelId = 'canvas' | 'inspector' | 'assets'
+
+type AppContext = {
+  projectName: string
+}
+
+const initialLayout: LayoutNode<PanelId> = {
+  type: 'split',
+  id: 'root',
+  direction: 'vertical',
+  ratio: 0.7,
+  first: { type: 'leaf', id: 'canvas-pane', panelId: 'canvas' },
+  second: {
+    type: 'split',
+    id: 'sidebar',
+    direction: 'horizontal',
+    ratio: 0.5,
+    first: { type: 'leaf', id: 'inspector-pane', panelId: 'inspector' },
+    second: { type: 'leaf', id: 'assets-pane', panelId: 'assets' },
+  },
+}
+
+const layoutStore = createLayoutStore({
+  initialLayout,
+  persistence: {
+    storageKey: 'my-app-layout',
+  },
+})
+
+const panelDefinitions: readonly PanelDefinition<PanelId, AppContext>[] = [
+  {
+    id: 'canvas',
+    label: 'Canvas',
+    render: ({ context }) => <div>Canvas for {context.projectName}</div>,
+  },
+  {
+    id: 'inspector',
+    label: 'Inspector',
+    render: () => <div>Inspector</div>,
+  },
+  {
+    id: 'assets',
+    label: 'Assets',
+    render: () => <div>Assets</div>,
+  },
+]
+
+export function ExampleApp() {
+  return (
+    <PaneweaveLayout
+      store={layoutStore}
+      panelDefinitions={panelDefinitions}
+      panelContext={{ projectName: 'Demo' }}
+    />
+  )
+}
+```
+
+## Redux Example (Without Zustand)
+
+You can use paneweave with Redux by creating a small adapter that matches the `LayoutStore` contract.
+
+```tsx
+import 'paneweave/styles.css'
+import {
+  PaneweaveLayout,
+  type LayoutNode,
+  type LayoutStore,
+  type LayoutStoreState,
+  type PanelDefinition,
+  type SplitDirection,
+  type SplitResult,
+} from 'paneweave'
+import { combineReducers, createStore } from 'redux'
+import { Provider, useSelector } from 'react-redux'
+
+type PanelId = 'canvas' | 'inspector' | 'assets'
+type AppContext = { projectName: string }
+
+const initialLayout: LayoutNode<PanelId> = {
+  type: 'split',
+  id: 'root',
+  direction: 'vertical',
+  ratio: 0.7,
+  first: { type: 'leaf', id: 'canvas-pane', panelId: 'canvas' },
+  second: { type: 'leaf', id: 'inspector-pane', panelId: 'inspector' },
+}
+
+type LayoutAction =
+  | { type: 'layout/set'; layout: LayoutNode<PanelId> }
+  | { type: 'layout/resize'; splitId: string; ratio: number }
+
+function updateNode(
+  node: LayoutNode<PanelId>,
+  id: string,
+  updater: (node: LayoutNode<PanelId>) => LayoutNode<PanelId>,
+): LayoutNode<PanelId> {
+  if (node.id === id) return updater(node)
+  if (node.type === 'split') {
+    return {
+      ...node,
+      first: updateNode(node.first, id, updater),
+      second: updateNode(node.second, id, updater),
+    }
+  }
+  return node
+}
+
+function layoutReducer(
+  state: LayoutNode<PanelId> = initialLayout,
+  action: LayoutAction,
+): LayoutNode<PanelId> {
+  switch (action.type) {
+    case 'layout/set':
+      return action.layout
+    case 'layout/resize':
+      return updateNode(state, action.splitId, (node) =>
+        node.type === 'split'
+          ? { ...node, ratio: Math.max(0, Math.min(1, action.ratio)) }
+          : node,
+      )
+    default:
+      return state
+  }
+}
+
+const rootReducer = combineReducers({
+  layout: layoutReducer,
+})
+
+const reduxStore = createStore(rootReducer)
+
+const layoutActions = {
+  setAreaPanel(areaId: string, panelId: PanelId) {
+    const current = reduxStore.getState().layout
+    const next = updateNode(current, areaId, (node) =>
+      node.type === 'leaf' ? { ...node, panelId } : node,
+    )
+    reduxStore.dispatch({ type: 'layout/set', layout: next })
+  },
+  splitArea(_areaId: string, _direction: SplitDirection): SplitResult | null {
+    // Implement split logic in your app reducer. Returning null keeps this minimal example focused.
+    return null
+  },
+  joinArea(_keepId: string) {},
+  removeArea(_targetId: string) {},
+  resizeSplit(splitId: string, ratio: number) {
+    reduxStore.dispatch({ type: 'layout/resize', splitId, ratio })
+  },
+  resetLayout() {
+    reduxStore.dispatch({ type: 'layout/set', layout: initialLayout })
+  },
+  moveArea(_sourceId: string, _targetId: string, _direction: SplitDirection, _insertBefore: boolean) {},
+}
+
+const useReduxLayoutStore = Object.assign(
+  <TSelected,>(selector: (state: LayoutStoreState<PanelId>) => TSelected): TSelected => {
+    const layout = useSelector((state: ReturnType<typeof rootReducer>) => state.layout)
+    return selector({
+      layout,
+      ...layoutActions,
+    })
+  },
+  {
+    getState: (): LayoutStoreState<PanelId> => {
+      const layout = reduxStore.getState().layout
+      return {
+        layout,
+        ...layoutActions,
+      }
+    },
+    setState: (partial: Partial<LayoutStoreState<PanelId>>) => {
+      if (partial.layout) {
+        reduxStore.dispatch({ type: 'layout/set', layout: partial.layout })
+      }
+    },
+  },
+) as LayoutStore<PanelId>
+
+const panelDefinitions: readonly PanelDefinition<PanelId, AppContext>[] = [
+  {
+    id: 'canvas',
+    label: 'Canvas',
+    render: ({ context }) => <div>Canvas for {context.projectName}</div>,
+  },
+  {
+    id: 'inspector',
+    label: 'Inspector',
+    render: () => <div>Inspector</div>,
+  },
+  {
+    id: 'assets',
+    label: 'Assets',
+    render: () => <div>Assets</div>,
+  },
+]
+
+export function AppWithRedux() {
+  return (
+    <Provider store={reduxStore}>
+      <PaneweaveLayout
+        store={useReduxLayoutStore}
+        panelDefinitions={panelDefinitions}
+        panelContext={{ projectName: 'Redux Demo' }}
+      />
+    </Provider>
+  )
+}
+```
+
+Install Redux dependencies in your app:
+
+```bash
+npm install redux react-redux
+```
+
+## Near-Zero Collision Mode
+
+If you host multiple UI libraries on one page and want near-zero class collision risk, use a unique class prefix per app/shell.
+
+`PaneweaveLayout` supports:
+
+- `classNamePrefix`: custom DOM class prefix for all internal nodes.
+- `includeDefaultClassNames`: include `paneweave-layout-*` classes in addition to your custom prefix.
+
+Example:
+
+```tsx
+<PaneweaveLayout
+  store={layoutStore}
+  panelDefinitions={panelDefinitions}
+  panelContext={ctx}
+  classNamePrefix="acme-paneweave-7f3a"
+  includeDefaultClassNames={false}
+/>
+```
+
+AI implementation guidance:
+
+1. Generate a unique, stable prefix per product shell (example: `acme-paneweave-7f3a`).
+2. Pass that prefix through `classNamePrefix` on every `PaneweaveLayout` instance.
+3. Set `includeDefaultClassNames={false}` in strict-isolation deployments.
+4. Keep theme overrides on instance root class (or wrapper) using `--pw-*` tokens.
+5. If legacy overrides rely on `paneweave-layout-*`, temporarily set `includeDefaultClassNames={true}` during migration.
+
+Optional helper:
+
+```ts
+import { createPaneweaveDomClassNames } from 'paneweave'
+
+const classes = createPaneweaveDomClassNames({
+  classNamePrefix: 'acme-paneweave-7f3a',
+  includeDefaultClassNames: false,
+})
+```
+
+## Examples
+
+Standalone example projects live in `examples/`.
+
+- `examples/zustand-react`: Vite + React + TypeScript sample that consumes the library source and demonstrates persisted nested layouts.
+- `examples/redux-react`: Vite + React + TypeScript sample that uses a Redux-backed store adapter instead of `paneweave/zustand`.
+- `examples/vanilla-react`: Vite + React + TypeScript sample that uses a custom store adapter with no external state library.
+
+Run it with:
+
+```bash
+cd examples/zustand-react
+npm install
+npm run dev
+```
+
+## Contributor Notes
+
+- Agent/contributor quickstart and task routing: `CLAUDE.md`
+- Repo-level guardrails for coding agents: `CLAUDE.md`
+
+## API Summary
+
+- `PaneweaveLayout`: top-level React component that renders the nested split tree.
+- `createLayoutStore`: creates the Zustand store used by the layout component.
+- `LayoutNode`, `LayoutLeaf`, `LayoutSplit`: generic tree types for serialized layout state.
+- `PanelDefinition`: registry record containing the panel id, label, optional className, and renderer.
+- `findFirstLeafByPanelId`, `findRightResizeSplit`, `findTopResizeSplit`, `findSplitNode`: helper utilities for advanced consumers.
+
+## Persistence
+
+Persistence is optional. When provided, the package stores only the `layout` tree and leaves the storage key up to the consumer.
+
+```ts
+const store = createLayoutStore({
+  initialLayout,
+  persistence: {
+    storageKey: 'dashboard-layout',
+    storage: window.localStorage,
+  },
+})
+```
+
+## Styling
+
+Import `paneweave/styles.css` and provide theme variables such as `--accent`, `--panel-bg`, and `--panel-border` in the consuming app.
+
+The package is style-agnostic by design:
+
+- No global `:root` theme injection.
+- Tokens are scoped per instance on `.paneweave-layout-root`.
+- Internal tokens use `--pw-*` names and still accept legacy aliases (`--accent`, `--panel-bg`, etc.).
+
+Example per-layout override:
+
+```css
+.my-layout {
+  --pw-root-background: transparent;
+  --pw-panel-bg: #111827;
+  --pw-panel-bg-alt: #0b1220;
+  --pw-panel-border: #334155;
+  --pw-panel-text: #e5e7eb;
+  --pw-accent: #22d3ee;
+}
+```

package/dist/components/AreaNodeRenderer.d.ts

@@ -0,0 +1,17 @@
+import type { PaneweaveDomClassNames } from '../domClassNames.js';
+import type { LayoutStore } from '../store.js';
+import type { LayoutNode, PanelDefinition } from '../types.js';
+/** Props consumed by `AreaNodeRenderer`. */
+interface AreaNodeRendererProps<TPanelId extends string, TContext> {
+    node: LayoutNode<TPanelId>;
+    store: LayoutStore<TPanelId>;
+    panelDefinitions: readonly PanelDefinition<TPanelId, TContext>[];
+    panelMap: Map<TPanelId, PanelDefinition<TPanelId, TContext>>;
+    panelContext: TContext;
+    domClassNames: PaneweaveDomClassNames;
+}
+/**
+ * Recursively renders a layout node as either an `<AreaView>` (leaf) or a `<SplitView>` (split).
+ */
+export declare function AreaNodeRenderer<TPanelId extends string, TContext>({ node, store, panelDefinitions, panelMap, panelContext, domClassNames, }: AreaNodeRendererProps<TPanelId, TContext>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AreaView.d.ts

@@ -0,0 +1,14 @@
+import type { PaneweaveDomClassNames } from '../domClassNames.js';
+import type { LayoutStore } from '../store.js';
+import type { LayoutLeaf, PanelDefinition } from '../types.js';
+/**
+ * Renders a single leaf panel area: header bar with panel selector, corner drag handle, and panel content.
+ */
+export declare function AreaView<TPanelId extends string, TContext>({ area, store, panelDefinitions, panelMap, panelContext, domClassNames, }: {
+    area: LayoutLeaf<TPanelId>;
+    store: LayoutStore<TPanelId>;
+    panelDefinitions: readonly PanelDefinition<TPanelId, TContext>[];
+    panelMap: Map<TPanelId, PanelDefinition<TPanelId, TContext>>;
+    panelContext: TContext;
+    domClassNames: PaneweaveDomClassNames;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/CornerHandle.d.ts

@@ -0,0 +1,13 @@
+import type { PaneweaveDomClassNames } from '../domClassNames.js';
+import { type LayoutStore } from '../store.js';
+/**
+ * A small drag handle in the header of each panel area.
+ *
+ * Dragging it creates a new split, or resizes an adjacent split when dragged
+ * toward an existing handle boundary.
+ */
+export declare function CornerHandle<TPanelId extends string>({ areaId, store, domClassNames, }: {
+    areaId: string;
+    store: LayoutStore<TPanelId>;
+    domClassNames: PaneweaveDomClassNames;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DropOverlay.d.ts

@@ -0,0 +1,10 @@
+import type { DropZone } from '../dragState.js';
+import type { PaneweaveDomClassNames } from '../domClassNames.js';
+/**
+ * Absolute-positioned overlay rendered inside a panel area during a drag-over.
+ * Highlights the half of the area where the panel will be dropped.
+ */
+export declare function DropOverlay({ zone, domClassNames, }: {
+    zone: DropZone;
+    domClassNames: PaneweaveDomClassNames;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/PaneweaveLayout.d.ts

@@ -0,0 +1,21 @@
+import { type PaneweaveDomClassOptions } from '../domClassNames.js';
+import type { LayoutStore } from '../store.js';
+import type { PanelDefinition } from '../types.js';
+/** Props for the `<PaneweaveLayout>` component. */
+export interface PaneweaveLayoutProps<TPanelId extends string, TContext> {
+    store: LayoutStore<TPanelId>;
+    panelDefinitions: readonly PanelDefinition<TPanelId, TContext>[];
+    panelContext: TContext;
+    className?: string;
+    classNamePrefix?: PaneweaveDomClassOptions['classNamePrefix'];
+    includeDefaultClassNames?: PaneweaveDomClassOptions['includeDefaultClassNames'];
+}
+/**
+ * Top-level component that renders a recursive split-pane layout.
+ *
+ * @example
+ * ```tsx
+ * <PaneweaveLayout store={layoutStore} panelDefinitions={defs} panelContext={ctx} />
+ * ```
+ */
+export declare function PaneweaveLayout<TPanelId extends string, TContext>({ store, panelDefinitions, panelContext, className, classNamePrefix, includeDefaultClassNames, }: PaneweaveLayoutProps<TPanelId, TContext>): import("react/jsx-runtime").JSX.Element;

package/dist/components/SplitView.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { PaneweaveDomClassNames } from '../domClassNames.js';
+import type { LayoutStore } from '../store.js';
+import type { LayoutNode, LayoutSplit } from '../types.js';
+/**
+ * Renders a split container with a draggable resize handle between two child nodes.
+ *
+ * Child nodes are rendered via the `renderNode` callback to avoid circular imports.
+ */
+export declare function SplitView<TPanelId extends string>({ split, store, renderNode, domClassNames, }: {
+    split: LayoutSplit<TPanelId>;
+    store: LayoutStore<TPanelId>;
+    renderNode: (node: LayoutNode<TPanelId>) => ReactNode;
+    domClassNames: PaneweaveDomClassNames;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/domClassNames.d.ts

@@ -0,0 +1,29 @@
+export interface PaneweaveDomClassNames {
+    rootClassName: string;
+    splitClassName: string;
+    splitVerticalClassName: string;
+    splitHorizontalClassName: string;
+    resizeHandleClassName: string;
+    resizeHandleVerticalClassName: string;
+    resizeHandleHorizontalClassName: string;
+    areaClassName: string;
+    headerClassName: string;
+    selectorClassName: string;
+    selectorTriggerClassName: string;
+    selectorArrowClassName: string;
+    selectorMenuClassName: string;
+    selectorOptionClassName: string;
+    headerSpacerClassName: string;
+    contentClassName: string;
+    cornerHandleClassName: string;
+    dropOverlayClassName: string;
+    rootSelector: string;
+    splitSelector: string;
+    selectorSelector: string;
+    cornerHandleSelector: string;
+}
+export interface PaneweaveDomClassOptions {
+    classNamePrefix?: string;
+    includeDefaultClassNames?: boolean;
+}
+export declare function createPaneweaveDomClassNames(options?: PaneweaveDomClassOptions): PaneweaveDomClassNames;

package/dist/dragState.d.ts

@@ -0,0 +1,11 @@
+/** Direction quadrant where a dragged panel is hovering over a target. */
+export type DropZone = 'left' | 'right' | 'top' | 'bottom';
+/** Set which area is currently being dragged. Pass `null` on drag end. */
+export declare function setDraggedAreaId(id: string | null): void;
+/** Get id of area currently being dragged, or `null` if none. */
+export declare function getDraggedAreaId(): string | null;
+/**
+ * Determine drop zone quadrant based on pointer position within a rect.
+ * Divides the rect into 4 triangles from the center point.
+ */
+export declare function getDropZone(rect: DOMRect, clientX: number, clientY: number): DropZone;

package/dist/findPerpendicularHandle.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Finds the closest perpendicular resize handle to the current pointer position.
+ *
+ * Used when dragging a resize handle to simultaneously resize an intersecting split.
+ *
+ * @param paneweaveRoot - The root layout element to search within.
+ * @param isVertical - Whether the dragged handle is vertical (col-resize).
+ * @param clientX - Pointer X coordinate.
+ * @param clientY - Pointer Y coordinate.
+ * @param originContainer - Split container of the active dragged handle.
+ * @returns The nearest perpendicular handle's split id and container element, or null.
+ */
+export declare function findPerpendicularHandle(paneweaveRoot: Element, isVertical: boolean, clientX: number, clientY: number, originContainer?: HTMLElement | null, splitSelector?: string): {
+    splitId: string;
+    container: HTMLElement;
+} | null;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { PaneweaveLayout } from './components/PaneweaveLayout.js';
+export { createPaneweaveDomClassNames } from './domClassNames.js';
+export type { PaneweaveDomClassNames, PaneweaveDomClassOptions, } from './domClassNames.js';
+export type { CreateLayoutStoreOptions, LayoutStore, LayoutStoreState, } from './store.js';
+export { createLayoutStore, createStateCreator, findFirstLeafByPanelId, findRightResizeSplit, findSiblingId, findSplitNode, findTopResizeSplit, } from './store.js';
+export type { LayoutLeaf, LayoutNode, LayoutPersistenceOptions, LayoutSplit, PanelDefinition, PanelRenderArgs, SplitDirection, SplitResult, } from './types.js';

package/dist/index.js

@@ -0,0 +1 @@
+import{useMemo as Pe}from"react";var le="paneweave-layout";function $(e,t){return`${e}-${t}`}function v(e,t,n){let r=$(e,t),i=$(le,t);return!n||r===i?r:`${i} ${r}`}function G(e={}){let{classNamePrefix:t=le,includeDefaultClassNames:n=!1}=e;return{rootClassName:v(t,"root",n),splitClassName:v(t,"split",n),splitVerticalClassName:v(t,"split-v",n),splitHorizontalClassName:v(t,"split-h",n),resizeHandleClassName:v(t,"resize-handle",n),resizeHandleVerticalClassName:v(t,"resize-handle-v",n),resizeHandleHorizontalClassName:v(t,"resize-handle-h",n),areaClassName:v(t,"area",n),headerClassName:v(t,"header",n),selectorClassName:v(t,"selector",n),selectorTriggerClassName:v(t,"selector-trigger",n),selectorArrowClassName:v(t,"selector-arrow",n),selectorMenuClassName:v(t,"selector-menu",n),selectorOptionClassName:v(t,"selector-option",n),headerSpacerClassName:v(t,"header-spacer",n),contentClassName:v(t,"content",n),cornerHandleClassName:v(t,"corner-handle",n),dropOverlayClassName:v(t,"drop-overlay",n),rootSelector:`.${$(t,"root")}`,splitSelector:`.${$(t,"split")}`,selectorSelector:`.${$(t,"selector")}`,cornerHandleSelector:`.${$(t,"corner-handle")}`}}import{useEffect as Me,useRef as we,useState as fe}from"react";var se=null;function Y(e){se=e}function Q(){return se}function ce(e,t,n){let r=(t-e.left)/e.width,i=(n-e.top)/e.height,a=Math.abs(r-.5),g=Math.abs(i-.5);return a>=g?r<.5?"left":"right":i<.5?"top":"bottom"}import{useCallback as he}from"react";import{useSyncExternalStore as ve}from"react";function k(){return crypto.randomUUID()}function R(e,t,n){return e.id===t?n(e):e.type==="split"?{...e,first:R(e.first,t,n),second:R(e.second,t,n)}:e}function U(e,t){return e.type!=="split"?null:e.first.id===t||e.second.id===t?e:U(e.first,t)??U(e.second,t)}function b(e,t){return e.id===t?!0:e.type!=="split"?!1:b(e.first,t)||b(e.second,t)}function Z(e){return e.type==="leaf"?e.id:Z(e.first)}function ee(e,t){return e.id===t?e.type==="leaf"?e:null:e.type==="split"?ee(e.first,t)??ee(e.second,t):null}function F(e,t){return e.type!=="split"?e:e.first.id===t?e.second:e.second.id===t?e.first:{...e,first:F(e.first,t),second:F(e.second,t)}}function de(e){return t=>({layout:e,setAreaPanel:(n,r)=>t(i=>({layout:R(i.layout,n,a=>a.type==="leaf"?{...a,panelId:r}:a)})),splitArea:(n,r,i=!1,a=.5)=>{let g=null;return t(c=>({layout:R(c.layout,n,P=>{if(P.type!=="leaf")return P;let u=k(),p=k(),d={type:"leaf",id:u,panelId:P.panelId};return g={splitId:p,newAreaId:u},{type:"split",id:p,direction:r,ratio:Math.max(0,Math.min(1,a)),first:i?d:P,second:i?P:d}})})),g},joinArea:n=>t(r=>{let i=U(r.layout,n);if(!i)return r;let a=i.first.id===n?i.first:i.second;return{layout:R(r.layout,i.id,()=>a)}}),removeArea:n=>t(r=>r.layout.type!=="split"?r:{layout:F(r.layout,n)}),resizeSplit:(n,r)=>t(i=>({layout:R(i.layout,n,a=>a.type==="split"?{...a,ratio:Math.max(0,Math.min(1,r))}:a)})),resetLayout:()=>t({layout:e}),moveArea:(n,r,i,a)=>t(g=>{if(n===r||g.layout.type==="leaf")return g;let c=ee(g.layout,n);if(!c)return g;let P=null,u=R(g.layout,r,p=>{if(p.type!=="leaf")return p;let d=k(),S=k();P=d;let m={type:"leaf",id:d,panelId:c.panelId};return{type:"split",id:S,direction:i,ratio:.5,first:a?m:p,second:a?p:m}});return P?(u.type==="split"&&(u=F(u,n)),{layout:u}):g})})}function Ne(e,t){try{let n=e.getItem(t);return n?JSON.parse(n):null}catch{return null}}function Ie({initialLayout:e,persistence:t}){let n=t?.storage??globalThis.localStorage,r=new Set,i=t?Ne(n,t.storageKey)??e:e,a=()=>{if(t)try{n.setItem(t.storageKey,JSON.stringify(i))}catch{}},g=()=>{r.forEach(s=>s())},u=de(e)(s=>{let l=typeof s=="function"?s(d()):s;l.layout!==void 0&&(i=l.layout,a(),p=null,g())}),p=null,d=()=>(p||(p={...u,layout:i}),p),S=s=>(r.add(s),()=>{r.delete(s)}),m=(s=>(ve(S,d,d),s(d())));return m.getState=()=>d(),m.setState=(s,l=!1)=>{let o=typeof s=="function"?s(d()):s;if(l){o.layout&&(i=o.layout,a(),g());return}o.layout&&(i=o.layout,a(),g())},m}function te(e,t){return e.type==="leaf"?e.panelId===t?e.id:null:te(e.first,t)??te(e.second,t)}function Ce(e,t,n){let r=U(e,t);return r?n==="right"&&r.direction==="vertical"&&r.first.id===t?Z(r.second):n==="left"&&r.direction==="vertical"&&r.second.id===t?Z(r.first):n==="below"&&r.direction==="horizontal"&&r.first.id===t?Z(r.second):n==="above"&&r.direction==="horizontal"&&r.second.id===t?Z(r.first):null:null}function O(e,t){return e.type!=="split"?null:e.direction==="vertical"&&b(e.first,t)?O(e.first,t)??e.id:b(e.first,t)?O(e.first,t):b(e.second,t)?O(e.second,t):null}function B(e,t){return e.type!=="split"?null:e.direction==="horizontal"&&b(e.second,t)?B(e.second,t)??e.id:b(e.first,t)?B(e.first,t):b(e.second,t)?B(e.second,t):null}function j(e,t){return e.type!=="split"?null:e.id===t?e:j(e.first,t)??j(e.second,t)}import{jsx as xe}from"react/jsx-runtime";function ue({areaId:e,store:t,domClassNames:n}){let r=t(c=>c.splitArea),i=t(c=>c.removeArea),a=t(c=>c.layout),g=he(c=>{c.preventDefault(),c.stopPropagation();let P=c.currentTarget.closest("[data-area-id]");if(!P)return;let u=P.getBoundingClientRect(),p=c.clientX,d=c.clientY,S=O(a,e),m=B(a,e),s=null,l=!1,o=!1,f=null,y=null,h=()=>{window.removeEventListener("pointermove",H),window.removeEventListener("pointerup",C),document.body.style.cursor=""},H=N=>{let L=N.clientX-p,T=N.clientY-d;if(!s&&!l&&!o){let I=L>18&&Math.abs(L)>=Math.abs(T),D=T<-18&&Math.abs(T)>Math.abs(L),A=L<-18&&Math.abs(L)>=Math.abs(T),K=T>18&&Math.abs(T)>Math.abs(L);if(!I&&!D&&!A&&!K)return;if(I&&S){let w=document.querySelector(`[data-split-id="${S}"]`)?.closest(n.splitSelector);w&&(f=w.getBoundingClientRect(),l=!0,document.body.style.cursor="col-resize")}if(D&&m){let w=document.querySelector(`[data-split-id="${m}"]`)?.closest(n.splitSelector);w&&(y=w.getBoundingClientRect(),o=!0,document.body.style.cursor="row-resize")}if(l||o)return;if(A){let E=r(e,"vertical",!1,1);E&&(s={...E,direction:"vertical"})}else{let E=r(e,"horizontal",!0,0);E&&(s={...E,direction:"horizontal"})}if(!s)return}if(l&&f&&S){f=document.querySelector(`[data-split-id="${S}"]`)?.closest(n.splitSelector)?.getBoundingClientRect()??f;let I=Math.max(f.width,1),D=(N.clientX-f.left)/I;t.getState().resizeSplit(S,D);return}if(o&&y&&m){y=document.querySelector(`[data-split-id="${m}"]`)?.closest(n.splitSelector)?.getBoundingClientRect()??y;let I=Math.max(y.height,1),D=(N.clientY-y.top)/I;t.getState().resizeSplit(m,D);return}if(!s)return;if(s.direction==="vertical"){let D=1-Math.max(0,Math.min(u.width,-L))/Math.max(u.width,1);t.getState().resizeSplit(s.splitId,D);return}let M=Math.max(0,Math.min(u.height,T))/Math.max(u.height,1);t.getState().resizeSplit(s.splitId,M)},C=N=>{if(h(),l&&S){let T=j(t.getState().layout,S),x=document.querySelector(`[data-split-id="${S}"]`)?.closest(n.splitSelector)?.getBoundingClientRect();if(T&&x){let M=T.ratio,I=M*x.width,D=(1-M)*x.width;I<10?i(T.first.id):D<10&&i(T.second.id)}return}if(o&&m){let T=j(t.getState().layout,m),x=document.querySelector(`[data-split-id="${m}"]`)?.closest(n.splitSelector)?.getBoundingClientRect();if(T&&x){let M=T.ratio,I=M*x.height,D=(1-M)*x.height;I<10?i(T.first.id):D<10&&i(T.second.id)}return}if(!s)return;if(s.direction==="vertical"){Math.max(0,Math.min(u.width,-(N.clientX-p)))<10&&i(s.newAreaId);return}Math.max(0,Math.min(u.height,N.clientY-d))<10&&i(s.newAreaId)};window.addEventListener("pointermove",H),window.addEventListener("pointerup",C)},[e,n.splitSelector,a,i,r,t]);return xe("div",{className:n.cornerHandleClassName,onPointerDown:g})}import{jsx as De}from"react/jsx-runtime";function pe({zone:e,domClassNames:t}){return De("div",{className:t.dropOverlayClassName,"data-zone":e})}import{jsx as z,jsxs as W}from"react/jsx-runtime";function He(e){switch(e){case"left":return{direction:"vertical",insertBefore:!0};case"right":return{direction:"vertical",insertBefore:!1};case"top":return{direction:"horizontal",insertBefore:!0};case"bottom":return{direction:"horizontal",insertBefore:!1}}}function J(e,t){return e.id===t?!0:e.type==="leaf"?!1:J(e.first,t)||J(e.second,t)}function me({area:e,store:t,panelDefinitions:n,panelMap:r,panelContext:i,domClassNames:a}){let g=t(o=>o.setAreaPanel),c=t(o=>o.moveArea),P=t(o=>o.layout),u=r.get(e.panelId),[p,d]=fe(!1),[S,m]=fe(null),s=we(null),l=u?.className?`${a.areaClassName} ${u.className}`:a.areaClassName;return Me(()=>{if(!p)return;let o=f=>{s.current&&!s.current.contains(f.target)&&d(!1)};return document.addEventListener("pointerdown",o),()=>document.removeEventListener("pointerdown",o)},[p]),W("section",{"data-area-id":e.id,"data-panel-id":e.panelId,className:l,onDragOver:o=>{let f=Q();if(!f||f===e.id){m(null);return}if(!J(P,f)){m(null);return}o.preventDefault();let y=o.currentTarget.getBoundingClientRect(),h=ce(y,o.clientX,o.clientY);(h==="top"||h==="bottom"?y.height:y.width)<20||m(h)},onDragLeave:o=>{o.currentTarget.contains(o.relatedTarget)||m(null)},onDrop:o=>{let f=Q();if(!f||!S)return;if(!J(P,f)){m(null);return}o.preventDefault();let y=o.currentTarget.getBoundingClientRect();if((S==="top"||S==="bottom"?y.height:y.width)<20){m(null);return}let{direction:C,insertBefore:N}=He(S);c(f,e.id,C,N),m(null)},children:[W("div",{className:a.headerClassName,draggable:!0,onDragStart:o=>{let f=o.target;if(f.closest(a.selectorSelector)||f.closest(a.cornerHandleSelector)){o.preventDefault(),Y(null);return}Y(e.id),o.dataTransfer.effectAllowed="move"},onDragEnd:()=>Y(null),children:[W("div",{className:a.selectorClassName,ref:s,children:[W("button",{type:"button",className:a.selectorTriggerClassName,onClick:()=>d(o=>!o),children:[u?.label??e.panelId,z("span",{className:a.selectorArrowClassName,children:"\u25BE"})]}),p&&z("div",{className:a.selectorMenuClassName,children:n.map(o=>z("button",{type:"button",className:`${a.selectorOptionClassName}${o.id===e.panelId?" is-active":""}`,onClick:()=>{g(e.id,o.id),d(!1)},children:o.label},o.id))})]}),z("div",{className:a.headerSpacerClassName}),z(ue,{areaId:e.id,store:t,domClassNames:a})]}),z("div",{className:a.contentClassName,children:u?u.render({area:e,context:i}):null}),S&&z(pe,{zone:S,domClassNames:a})]})}import{useCallback as X,useRef as ye}from"react";function oe(e,t,n,r,i,a=".paneweave-layout-split"){let g=t?'[data-split-dir="h"]':'[data-split-dir="v"]',c=e.querySelectorAll(g),P=null,u=null;for(let p of c){let d=p.getBoundingClientRect();if(!(t?r>=d.top-3&&r<=d.bottom+3:n>=d.left-3&&n<=d.right+3))continue;let m=Math.abs(t?r-(d.top+d.bottom)/2:n-(d.left+d.right)/2);if(!P||m<P.distance){let s=p.closest(a),l=p.dataset.splitId;s&&l&&(P={splitId:l,container:s,distance:m},i&&s!==i&&s.contains(i)&&(!u||m<u.distance)&&(u={splitId:l,container:s,distance:m}))}}return u??P}import{jsx as Ee,jsxs as be}from"react/jsx-runtime";function ge({split:e,store:t,renderNode:n,domClassNames:r}){let i=t(l=>l.resizeSplit),a=t(l=>l.removeArea),g=ye(null),c=e.direction==="vertical",P=ye(null),u=X(()=>{P.current?.classList.remove("is-hovered"),P.current=null},[]),p=X(l=>{let o=l.closest(r.splitSelector);if(!o)return!1;let f=o.getBoundingClientRect();return(l.dataset.splitDir==="v"?f.width:f.height)>=20},[]),d=X(l=>{let o=p(l);return l.classList.toggle("can-drag",o),o},[p]),S=X(l=>{let o=l.currentTarget,f=o.closest(r.rootSelector);if(!f)return;if(!d(o)){o.style.cursor="",u();return}let h=o.closest(r.splitSelector),H=oe(f,c,l.clientX,l.clientY,h,r.splitSelector),C=H?f.querySelector(`[data-split-id="${H.splitId}"]`):null,N=C?d(C):!1;o.style.cursor=N?"move":"";let L=N?C:null;P.current!==L&&(u(),L&&(L.classList.add("is-hovered"),P.current=L))},[r.rootSelector,r.splitSelector,c,u,d]),m=X(l=>{d(l.currentTarget)},[d]),s=X(l=>{l.preventDefault();let o=g.current;if(!o)return;let f=o.getBoundingClientRect(),y=l.currentTarget;if(!d(y))return;y.setPointerCapture(l.pointerId);let h=o.closest(r.rootSelector),H=y.closest(r.splitSelector),C=h?oe(h,c,l.clientX,l.clientY,H,r.splitSelector):null,N=C?h?.querySelector(`[data-split-id="${C.splitId}"]`)??null:null,L=C&&N&&d(N)?C:null;L&&(document.body.style.cursor="move");let T=M=>{let I=c?f.width:f.height,A=(c?M.clientX-f.left:M.clientY-f.top)/I,K=A*I,E=(1-A)*I;if(K<10){a(e.first.id),y.releasePointerCapture(l.pointerId),y.removeEventListener("pointermove",T),y.removeEventListener("pointerup",x),document.body.style.cursor="";return}if(E<10){a(e.second.id),y.releasePointerCapture(l.pointerId),y.removeEventListener("pointermove",T),y.removeEventListener("pointerup",x),document.body.style.cursor="";return}if(i(e.id,A),L&&L.container.isConnected){let w=L.container.getBoundingClientRect(),q=c?w.height:w.width;if(q>0){let Se=c?M.clientY-w.top:M.clientX-w.left,Le=Math.max(10/q,Math.min(1-10/q,Se/q));i(L.splitId,Le)}}},x=()=>{y.releasePointerCapture(l.pointerId),y.removeEventListener("pointermove",T),y.removeEventListener("pointerup",x),document.body.style.cursor=""};y.addEventListener("pointermove",T),y.addEventListener("pointerup",x)},[r.rootSelector,r.splitSelector,c,a,i,e.first.id,e.id,e.second.id,d]);return be("div",{ref:g,className:`${r.splitClassName} ${c?r.splitVerticalClassName:r.splitHorizontalClassName}`,style:c?{gridTemplateColumns:`minmax(0,${e.ratio}fr) 6px minmax(0,${1-e.ratio}fr)`}:{gridTemplateRows:`minmax(0,${e.ratio}fr) 6px minmax(0,${1-e.ratio}fr)`},children:[n(e.first),Ee("div",{className:`${r.resizeHandleClassName} ${c?r.resizeHandleVerticalClassName:r.resizeHandleHorizontalClassName}`,"data-split-id":e.id,"data-split-dir":c?"v":"h",onPointerDown:s,onPointerEnter:m,onPointerMove:S,onPointerLeave:l=>{l.currentTarget.style.cursor="",u()}}),n(e.second)]})}import{jsx as ae}from"react/jsx-runtime";function ie({node:e,store:t,panelDefinitions:n,panelMap:r,panelContext:i,domClassNames:a}){let g=c=>ae(ie,{node:c,store:t,panelDefinitions:n,panelMap:r,panelContext:i,domClassNames:a});return e.type==="leaf"?ae(me,{area:e,store:t,panelDefinitions:n,panelMap:r,panelContext:i,domClassNames:a}):ae(ge,{split:e,store:t,renderNode:g,domClassNames:a})}import{jsx as Te}from"react/jsx-runtime";function Re({store:e,panelDefinitions:t,panelContext:n,className:r,classNamePrefix:i,includeDefaultClassNames:a}){let g=e(p=>p.layout),c=Pe(()=>new Map(t.map(p=>[p.id,p])),[t]),P=Pe(()=>G({classNamePrefix:i,includeDefaultClassNames:a}),[i,a]),u=r?`${P.rootClassName} ${r}`:P.rootClassName;return Te("div",{className:u,children:Te(ie,{node:g,store:e,panelDefinitions:t,panelMap:c,panelContext:n,domClassNames:P})})}export{Re as PaneweaveLayout,Ie as createLayoutStore,G as createPaneweaveDomClassNames,de as createStateCreator,te as findFirstLeafByPanelId,O as findRightResizeSplit,Ce as findSiblingId,j as findSplitNode,B as findTopResizeSplit};

package/dist/layoutConstants.d.ts

@@ -0,0 +1,8 @@
+/** Minimum panel size in pixels before it collapses during a resize drag. */
+export declare const MIN_AREA_PX = 10;
+/** Snap tolerance in pixels for detecting perpendicular resize-handle intersections. */
+export declare const INTERSECTION_SNAP = 3;
+/** Minimum pointer travel in pixels before a corner-handle drag commits to a direction. */
+export declare const MIN_DRAG = 18;
+/** Minimum size in pixels for a newly created panel; smaller panels are discarded on pointer-up. */
+export declare const MIN_CREATED_AREA_PX = 10;

package/dist/store.d.ts

@@ -0,0 +1,80 @@
+import type { LayoutNode, LayoutPersistenceOptions, LayoutSplit, SplitDirection, SplitResult } from './types.js';
+/** Full Zustand state shape for a layout store instance. */
+export interface LayoutStoreState<TPanelId extends string = string> {
+    /** Current layout tree root. */
+    layout: LayoutNode<TPanelId>;
+    /** Replaces a leaf panel type by area id. */
+    setAreaPanel: (areaId: string, panelId: TPanelId) => void;
+    /** Splits a target leaf and returns ids for created nodes. */
+    splitArea: (areaId: string, direction: SplitDirection, insertBefore?: boolean, initialRatio?: number) => SplitResult | null;
+    /** Removes an area's sibling and keeps this area in place. */
+    joinArea: (keepId: string) => void;
+    /** Removes an area and collapses its parent split. */
+    removeArea: (targetId: string) => void;
+    /** Updates split ratio, clamped to the [0,1] range. */
+    resizeSplit: (splitId: string, ratio: number) => void;
+    /** Restores `layout` to the initial tree. */
+    resetLayout: () => void;
+    /**
+     * Moves a panel area next to another area by splitting the target.
+     * The source area is removed after the split. No-op if source equals target
+     * or source is the only remaining leaf.
+     */
+    moveArea: (sourceId: string, targetId: string, direction: SplitDirection, insertBefore: boolean) => void;
+}
+/**
+ * Generic store contract consumed by layout components.
+ *
+ * Compatible with Zustand-style hook stores, but does not require Zustand
+ * types in consumers that only import the root package API.
+ */
+export interface LayoutStore<TPanelId extends string = string> {
+    <TSelected>(selector: (state: LayoutStoreState<TPanelId>) => TSelected): TSelected;
+    getState: () => LayoutStoreState<TPanelId>;
+    setState: (partial: Partial<LayoutStoreState<TPanelId>> | ((state: LayoutStoreState<TPanelId>) => Partial<LayoutStoreState<TPanelId>> | LayoutStoreState<TPanelId>), replace?: boolean) => void;
+}
+/**
+ * Creates the Zustand state creator with all layout operations.
+ *
+ * @param initialLayout - Baseline layout used for initialization and reset.
+ */
+export declare function createStateCreator<TPanelId extends string>(initialLayout: LayoutNode<TPanelId>): (set: (partial: Partial<LayoutStoreState<TPanelId>> | ((state: LayoutStoreState<TPanelId>) => Partial<LayoutStoreState<TPanelId>> | LayoutStoreState<TPanelId>)) => void) => LayoutStoreState<TPanelId>;
+/** Options accepted by `createLayoutStore`. */
+export interface CreateLayoutStoreOptions<TPanelId extends string = string> {
+    initialLayout: LayoutNode<TPanelId>;
+    persistence?: LayoutPersistenceOptions;
+}
+/**
+ * Creates a vanilla store (no external state library) that manages the layout tree.
+ *
+ * @param options.initialLayout - The default layout tree used on first render and after `resetLayout`.
+ * @param options.persistence - Optional storage key and `Storage` implementation for persisting the layout.
+ * @returns A store compatible with `<PaneweaveLayout>`.
+ */
+export declare function createLayoutStore<TPanelId extends string>({ initialLayout, persistence, }: CreateLayoutStoreOptions<TPanelId>): LayoutStore<TPanelId>;
+/**
+ * Returns the id of the first leaf in traversal order whose `panelId` matches.
+ *
+ * @returns The leaf's `id`, or `null` if not found.
+ */
+export declare function findFirstLeafByPanelId<TPanelId extends string>(node: LayoutNode<TPanelId>, panelId: TPanelId): string | null;
+/**
+ * Returns the id of the first leaf on the given side of `areaId`, or `null` if none exists.
+ *
+ * Useful for moving focus between adjacent panels.
+ */
+export declare function findSiblingId<TPanelId extends string>(root: LayoutNode<TPanelId>, areaId: string, side: 'right' | 'left' | 'above' | 'below'): string | null;
+/**
+ * Returns the id of the vertical split that controls the right edge of `areaId`.
+ *
+ * Used by the corner handle to resize an adjacent split when dragging right.
+ */
+export declare function findRightResizeSplit<TPanelId extends string>(root: LayoutNode<TPanelId>, areaId: string): string | null;
+/**
+ * Returns the id of the horizontal split that controls the top edge of `areaId`.
+ *
+ * Used by the corner handle to resize an adjacent split when dragging upward.
+ */
+export declare function findTopResizeSplit<TPanelId extends string>(root: LayoutNode<TPanelId>, areaId: string): string | null;
+/** Looks up a split node by id in the layout tree. */
+export declare function findSplitNode<TPanelId extends string>(root: LayoutNode<TPanelId>, splitId: string): LayoutSplit<TPanelId> | null;

package/dist/styles.css

@@ -0,0 +1 @@
+.paneweave-layout-root{--pw-accent: var(--accent, #4d9eff);--pw-panel-bg: var(--panel-bg, #1e1e1e);--pw-panel-bg-alt: var(--panel-bg-alt, #252525);--pw-panel-border: var(--panel-border, #383838);--pw-panel-text: var(--panel-text, #d4d4d4);--pw-handle-bg: var(--handle-bg, #2e2e2e);--pw-handle-hover: var(--handle-hover, var(--pw-accent));--pw-handle-grip: var(--handle-grip, #555);--pw-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .5));--pw-handle-size: 5px;--pw-handle-grip-length: 32px;--pw-header-height: 30px;--pw-header-pad-x: 6px;--pw-corner-size: 14px;--pw-corner-radius: 3px;--pw-drop-border-width: 2px;--pw-drop-radius: 4px;--pw-selector-font-size: 12px;--pw-selector-radius: 5px;--pw-selector-menu-radius: 8px;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden;overscroll-behavior:none;background:var(--pw-root-background, transparent);color:var(--pw-root-color, inherit);font-family:var(--pw-root-font-family, inherit)}.paneweave-layout-split{display:grid;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden}.paneweave-layout-resize-handle{position:relative;background:var(--pw-handle-bg);border:0;z-index:10;transition:background .1s ease;flex-shrink:0}.paneweave-layout-resize-handle:after{content:"";position:absolute;inset:0;margin:auto;border-radius:2px;background:var(--pw-handle-grip);transition:background .1s ease}.paneweave-layout-resize-handle-v{width:var(--pw-handle-size)}.paneweave-layout-resize-handle-v:after{width:1px;height:var(--pw-handle-grip-length)}.paneweave-layout-resize-handle-h{height:var(--pw-handle-size)}.paneweave-layout-resize-handle-v.can-drag{cursor:col-resize}.paneweave-layout-resize-handle-h.can-drag{cursor:row-resize}.paneweave-layout-resize-handle-h:after{width:var(--pw-handle-grip-length);height:1px}.paneweave-layout-resize-handle.can-drag:hover,.paneweave-layout-resize-handle.can-drag.is-hovered,.paneweave-layout-resize-handle.can-drag:active{background:color-mix(in srgb,var(--pw-handle-hover) 25%,var(--pw-handle-bg))}.paneweave-layout-resize-handle.can-drag:hover:after,.paneweave-layout-resize-handle.can-drag.is-hovered:after,.paneweave-layout-resize-handle.can-drag:active:after{background:var(--pw-handle-hover)}.paneweave-layout-area{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--pw-panel-bg);border:1px solid var(--pw-panel-border);position:relative}.paneweave-layout-header{display:flex;align-items:center;gap:.25rem;flex-shrink:0;padding:0 var(--pw-header-pad-x);height:var(--pw-header-height);background:var(--pw-panel-bg-alt);border-bottom:1px solid var(--pw-panel-border);cursor:grab}.paneweave-layout-header:active{cursor:grabbing}.paneweave-layout-header .paneweave-layout-selector,.paneweave-layout-header .paneweave-layout-selector *,.paneweave-layout-header .paneweave-layout-corner-handle{cursor:auto}.paneweave-layout-header-spacer{flex:1}.paneweave-layout-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain}.paneweave-layout-corner-handle{width:var(--pw-corner-size);height:var(--pw-corner-size);flex-shrink:0;cursor:crosshair;border-radius:var(--pw-corner-radius);background:linear-gradient(135deg,var(--pw-accent) 33%,color-mix(in srgb,var(--pw-accent) 20%,transparent) 33%,color-mix(in srgb,var(--pw-accent) 20%,transparent) 66%,var(--pw-accent) 66%);opacity:.4;transition:opacity .1s ease}.paneweave-layout-corner-handle:hover{opacity:1}.paneweave-layout-drop-overlay{position:absolute;pointer-events:none;z-index:var(--pw-drop-z-index, 100);background:color-mix(in srgb,var(--pw-accent) 18%,transparent);border:var(--pw-drop-border-width) solid var(--pw-accent);border-radius:var(--pw-drop-radius);inset:0}.paneweave-layout-drop-overlay[data-zone=left]{right:50%}.paneweave-layout-drop-overlay[data-zone=right]{left:50%}.paneweave-layout-drop-overlay[data-zone=top]{bottom:50%}.paneweave-layout-drop-overlay[data-zone=bottom]{top:50%}.paneweave-layout-selector{position:relative}.paneweave-layout-selector-trigger{display:inline-flex;align-items:center;gap:.3rem;padding:2px 6px;border:1px solid transparent;border-radius:var(--pw-selector-radius);background:transparent;color:var(--pw-panel-text);font-size:var(--pw-selector-font-size);font-weight:500;cursor:pointer;transition:background .1s ease,border-color .1s ease}.paneweave-layout-selector-trigger:hover{background:color-mix(in srgb,var(--pw-accent) 12%,var(--pw-panel-bg-alt));border-color:var(--pw-panel-border)}.paneweave-layout-selector-arrow{font-size:.75em;opacity:.6}.paneweave-layout-selector-menu{position:absolute;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:160px;padding:4px;border:1px solid var(--pw-panel-border);border-radius:var(--pw-selector-menu-radius);background:var(--pw-panel-bg-alt);box-shadow:var(--pw-shadow);z-index:20}.paneweave-layout-selector-option{width:100%;padding:5px 8px;text-align:left;border:none;border-radius:var(--pw-selector-radius);background:transparent;color:var(--pw-panel-text);font-size:var(--pw-selector-font-size);cursor:pointer;transition:background 80ms ease}.paneweave-layout-selector-option:hover{background:color-mix(in srgb,var(--pw-accent) 14%,var(--pw-panel-bg-alt))}.paneweave-layout-selector-option.is-active{background:color-mix(in srgb,var(--pw-accent) 22%,var(--pw-panel-bg-alt));color:var(--pw-accent)}

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+/** Direction of a split: `'horizontal'` stacks panels top/bottom, `'vertical'` places them left/right. */
+export type SplitDirection = 'horizontal' | 'vertical';
+/** A leaf node in the layout tree — occupies a single panel area. */
+export interface LayoutLeaf<TPanelId extends string = string> {
+    type: 'leaf';
+    id: string;
+    panelId: TPanelId;
+}
+/** An internal node in the layout tree that splits its space between two children. */
+export interface LayoutSplit<TPanelId extends string = string> {
+    type: 'split';
+    id: string;
+    direction: SplitDirection;
+    ratio: number;
+    first: LayoutNode<TPanelId>;
+    second: LayoutNode<TPanelId>;
+}
+/** A node in the layout tree — either a leaf panel area or a split container. */
+export type LayoutNode<TPanelId extends string = string> = LayoutLeaf<TPanelId> | LayoutSplit<TPanelId>;
+/** Ids returned after a successful `splitArea` operation. */
+export interface SplitResult {
+    splitId: string;
+    newAreaId: string;
+}
+/** Arguments passed to a panel's `render` function. */
+export interface PanelRenderArgs<TPanelId extends string, TContext> {
+    area: LayoutLeaf<TPanelId>;
+    context: TContext;
+}
+/** Registry entry that describes a panel type and how to render it. */
+export interface PanelDefinition<TPanelId extends string = string, TContext = unknown> {
+    id: TPanelId;
+    label: string;
+    className?: string;
+    render: (args: PanelRenderArgs<TPanelId, TContext>) => ReactNode;
+}
+/** Options for persisting the layout tree to a `Storage` implementation. */
+export interface LayoutPersistenceOptions {
+    storageKey: string;
+    storage?: Storage;
+}

package/dist/zustand.d.ts

@@ -0,0 +1,17 @@
+import type { LayoutNode, LayoutPersistenceOptions } from './types.js';
+import { findFirstLeafByPanelId, findRightResizeSplit, findSiblingId, findSplitNode, findTopResizeSplit, type LayoutStore, type LayoutStoreState } from './store.js';
+export { findFirstLeafByPanelId, findRightResizeSplit, findSiblingId, findSplitNode, findTopResizeSplit, };
+export type { LayoutStore, LayoutStoreState };
+/** Options accepted by `createLayoutStore`. */
+export interface CreateLayoutStoreOptions<TPanelId extends string = string> {
+    initialLayout: LayoutNode<TPanelId>;
+    persistence?: LayoutPersistenceOptions;
+}
+/**
+ * Creates a Zustand store that manages the layout tree.
+ *
+ * @param options.initialLayout - The default layout tree used on first render and after `resetLayout`.
+ * @param options.persistence - Optional storage key and `Storage` implementation for persisting the layout.
+ * @returns A bound Zustand store to pass to `<PaneweaveLayout>`.
+ */
+export declare function createLayoutStore<TPanelId extends string>({ initialLayout, persistence, }: CreateLayoutStoreOptions<TPanelId>): LayoutStore<TPanelId>;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "paneweave",
+  "version": "0.0.0",
+  "description": "Reusable React split-pane layout engine with registry-driven panels, typed APIs, and configurable persistence.",
+  "keywords": [
+    "react",
+    "layout",
+    "split-pane",
+    "panels"
+  ],
+  "license": "MIT",
+  "author": "Kirill Osipov",
+  "type": "module",
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run build:types && npm run build:js && npm run build:css",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build:js": "esbuild src/index.ts --bundle --format=esm --platform=browser --target=es2020 --minify --tree-shaking=true --external:react --external:react-dom --outdir=dist",
+    "build:css": "esbuild src/styles.css --minify --outfile=dist/styles.css",
+    "clean": "rm -rf dist",
+    "test": "npm run build && node --test tests/*.test.mjs",
+    "deploy": "npm run deploy:npm",
+    "deploy:dry": "npm run deploy:npm:dry",
+    "deploy:npm": "npm run test && npm publish",
+    "deploy:npm:dry": "npm run test && npm publish --dry-run"
+  },
+  "x-docs": {
+    "readme": "./README.md",
+    "usage": "See the Consumer Example section in README.md"
+  },
+  "x-consumer-example": {
+    "imports": [
+      "import { PaneweaveLayout } from 'paneweave'",
+      "import { createLayoutStore } from 'paneweave/zustand'",
+      "import 'paneweave/styles.css'"
+    ],
+    "steps": [
+      "Create a layout store with createLayoutStore({ initialLayout, persistence })",
+      "Register your panels with ids, labels, and render functions",
+      "Render <PaneweaveLayout store={store} panelDefinitions={panelDefinitions} panelContext={context} />"
+    ]
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zustand": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.25.9",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "~5.9.3",
+    "zustand": "^5.0.12"
+  }
+}