react-dockable-desktop

---

react-dockable-desktop

Hooks

WindowActions

Defined in: components/WindowManagerContext.tsx:223

All layout mutation methods, event bus handles, and serialization methods exposed by the WindowManagerProvider.

Obtain this object via useWindowManagerActions inside a component, or via WorkspaceClient methods from outside the React tree.

Example

function MyToolbar() {
  const actions = useWindowManagerActions();
  return <button onClick={() => actions.openPanel('map-1', 'map')}>Open Map</button>;
}

Properties

Property	Type	Description	Defined in
closeLeafGroup	(leafId) => void	Closes an empty leaf group (removes it from the grid tree).	components/WindowManagerContext.tsx:395
closePanel	(id) => void	Closes a panel immediately, bypassing dirty-state close guards. For guarded close, use requestClosePanel.	components/WindowManagerContext.tsx:258
dockPanel	(id, targetLeafId?) => void	Returns a floating window to a docked grid tab group.	components/WindowManagerContext.tsx:281
dockPanelToGroup	(id, targetLeafId, position) => void	Splits an existing leaf group and docks a panel to the given side.	components/WindowManagerContext.tsx:383
dockPanelToWorkspaceEdge	(id, position) => void	Docks a floating panel to a workspace edge, creating a full-width or full-height column/row.	components/WindowManagerContext.tsx:450
findPanelId	(component, dedupeKey) => string | null	Finds the ID of an already-open panel of the given component with a matching dedupeKey (set via openPanel's dedupeKey option). Uses a synchronous stateRef read — safe to call outside of render.	components/WindowManagerContext.tsx:340
floatPanel	(id, rect?, anchor?) => void	Detaches a docked panel, converting it to a resizable floating window.	components/WindowManagerContext.tsx:275
focusPanel	(id) => void	Activates the given panel regardless of its current state. - Floating panel: raises z-index so the window appears on top of others. - Docked panel: selects the tab within its leaf group. Example // Ensure a panel is visible before updating its content: if (actions.isOpen('map-1')) actions.focusPanel('map-1');	components/WindowManagerContext.tsx:310
getOpenPanelIds	() => string[]	Returns the IDs of all currently open panels (docked, floating, and minimized). Uses a synchronous stateRef read — safe to call outside of render.	components/WindowManagerContext.tsx:331
isOpen	(id) => boolean	Returns true if a panel with the given ID is currently open (docked, floating, or minimized). Uses a synchronous stateRef read — safe to call outside of render. Example if (!actions.isOpen('map-1')) { actions.openPanel('map-1', 'map'); } else { actions.focusPanel('map-1'); }	components/WindowManagerContext.tsx:325
loadLayout	(layoutJson) => boolean	Restores a previously serialized workspace from a JSON string. Replaces the entire current layout — all panels not in the snapshot are closed.	components/WindowManagerContext.tsx:357
maximizePanel	(id) => void	Maximizes a floating window to cover the entire workspace viewport.	components/WindowManagerContext.tsx:286
minimizePanel	(id) => void	Minimizes a panel to the bottom taskbar dock, preserving its layout position.	components/WindowManagerContext.tsx:263
movePanelOrder	(panelId, targetLeafId, targetIndex) => void	Reorders a panel's tab index within a docked leaf group.	components/WindowManagerContext.tsx:390
openPanel	<P>(id, component, options?) => void	Opens a registered panel into the workspace. If the panel ID is already open, the panel is focused instead of duplicated. Becomes state.activePanelId by default — pass options.focus: false to open without stealing focus from whatever is currently active. Default true Example // Open floating and pin to the top-right corner: actions.openPanel('layers', 'layertree', { initialTarget: 'floating', anchor: 'top-right' }); // Open in the background without stealing focus: actions.openPanel('prefetch', 'report', { focus: false }); // Open with per-instance data, deduped by document path: actions.openPanel(crypto.randomUUID(), 'document', { props: { path: '/notes/todo.md' }, dedupeKey: '/notes/todo.md', });	components/WindowManagerContext.tsx:252
publish	(event, data) => void	Publishes an event to the inter-panel pub/sub event bus.	components/WindowManagerContext.tsx:363
registerCloseGuard	(id, guard) => void	Registers a close guard that can intercept and cancel panel close requests.	components/WindowManagerContext.tsx:401
registerStateProvider	(id, provider) => void	Registers a callback reporting a docked/floating panel's current restorable state, pulled fresh every saveLayout() call — for panels whose props alone can't capture state they accumulate after opening (scroll position, an in-progress edit, a view-mode toggle). A panel that registers nothing keeps its static open-time props (or none). The returned value goes through the same isSerializable check as static props, re-evaluated on every save — a provider-backed panel's serializability can flip over its lifetime.	components/WindowManagerContext.tsx:418
requestClosePanel	(id, options?) => Promise<void>	Closes a panel, first running any registered close guards. If the panel is dirty, shows the built-in unsaved-changes confirmation dialog.	components/WindowManagerContext.tsx:444
restorePanel	(id) => void	Restores a minimized panel back to its last docked or floating position.	components/WindowManagerContext.tsx:268
saveLayout	() => string	Serializes the entire workspace state to a JSON string. Includes grid layout, floating window positions, minimized panels, and panel metadata. Example localStorage.setItem('layout', actions.saveLayout());	components/WindowManagerContext.tsx:350
setDirection	(dir) => void	Overrides the workspace layout direction.	components/WindowManagerContext.tsx:455
setDraggedPanelId	(id) => void	Internal Stores reference to the active tab ID being dragged.	components/WindowManagerContext.tsx:376
setPanelDirty	(id, dirty, options?) => void	Marks a panel as dirty (has unsaved changes). Dirty panels show a visual indicator and the built-in close guard prompts the user before closing.	components/WindowManagerContext.tsx:431
showContextMenu	(options) => void	Imperatively shows the workspace context menu at the given position. Delegates to the active ContextMenuProvider, so custom adapters and externally-placed providers are respected automatically.	components/WindowManagerContext.tsx:461
subscribe	(event, callback) => () => void	Subscribes a callback to the inter-panel pub/sub event bus. Example useEffect(() => actions.subscribe('map:zoom', ({ level }) => setZoom(level)), []);	components/WindowManagerContext.tsx:374
unregisterCloseGuard	(id) => void	Removes a previously registered close guard.	components/WindowManagerContext.tsx:406
unregisterStateProvider	(id) => void	Removes a previously registered state provider.	components/WindowManagerContext.tsx:423
updateFloatingPosition	(id, updates) => void	Updates the position or size of a floating window.	components/WindowManagerContext.tsx:298
updatePanelTitle	(id, title) => void	Updates the display title of an open panel.	components/WindowManagerContext.tsx:437
updateSplitSizes	(path, sizes) => void	Resizes the flex split proportions of a branch node's children.	components/WindowManagerContext.tsx:292

---

usePanelId()

function usePanelId(): string;

Defined in: components/WindowManagerContext.tsx:1926

React hook to retrieve the panel instance ID for the component currently rendered inside the dockable desktop. Works for docked, floating, modal, and side-panel containers. Opt-in — components that don't need the ID require no changes.

Returns

string

The unique panel instance ID string.

Example

function MyPanel() {
  const panelId = usePanelId();
  const { closePanel } = useWindowManagerActions();
  return <button onClick={() => closePanel(panelId)}>Close</button>;
}

---

useRegistry()

function useRegistry(): PanelRegistryClass;

Defined in: components/WindowManagerContext.tsx:526

React hook to read the scoped PanelRegistryClass for the current provider. When the provider was created with a WorkspaceClient, this returns the client's private registry. Otherwise it returns the global PanelRegistry singleton.

Returns

PanelRegistryClass

The panel registry instance in scope.

Example

function MyComponent() {
  const registry = useRegistry();
  const entry = registry.get('map');
  return entry ? <entry.Component panelId="preview" /> : null;
}

---

useWindowManagerActions()

function useWindowManagerActions(): WindowActions;

Defined in: components/WindowManagerContext.tsx:1851

React hook to retrieve all layout mutation actions. Returns the public WindowActions interface.

Returns

WindowActions

The full set of workspace mutation methods.

Throws

Error if used outside of a WindowManagerProvider.

Example

function Toolbar() {
  const actions = useWindowManagerActions();
  return (
    <button onClick={() => actions.openPanel('map-1', 'map')}>Open Map</button>
  );
}

Classes

PanelRegistryClass

Defined in: components/PanelRegistry.ts:40

Registry mapping catalog entries to allow programmatic panel instantiation inside dynamic layout cells or floating windows. Exported so WorkspaceClient can create scoped, per-instance registries.

Constructors

Constructor

new PanelRegistryClass(): PanelRegistryClass;

Returns

PanelRegistryClass

Methods

get()

get(id): PanelRegistryEntry | undefined;

Defined in: components/PanelRegistry.ts:63

Retrieve a registered panel configuration by identifier.

Parameters

Parameter	Type
id	string

Returns

PanelRegistryEntry | undefined

getRegisteredIds()

getRegisteredIds(): string[];

Defined in: components/PanelRegistry.ts:70

Returns a list of all registered panel entry identifiers.

Returns

string[]

register()

register<P>(
   id, 
   Component, 
   defaultOptions?): void;

Defined in: components/PanelRegistry.ts:49

Register a new component to the panel catalog registry.

Type Parameters

Type Parameter
P extends object

Parameters

Parameter	Type	Description
id	string	Unique string identifier.
Component	ComponentType<P>	React component instance template.
defaultOptions?	{ canClose?: boolean; canDrag?: boolean; canMinimize?: boolean; defaultAnchor?: FloatAnchor; disableLivePreview?: boolean; favoritePosition?: { height: string | number; width: string | number; x: string | number; y: string | number; }; icon?: ReactNode; initialTarget?: "docked" | "floating" | "tabbed"; renderHeaderActions?: (panelId) => ReactNode; title?: | string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; }; }	Custom default settings configuration.
defaultOptions.canClose?	boolean	Enables/disables closing actions for the tab/window.
defaultOptions.canDrag?	boolean	Enables/disables window drag interactions.
defaultOptions.canMinimize?	boolean	Enables/disables minimizing of the panel instance.
defaultOptions.defaultAnchor?	FloatAnchor	Corner of the workspace to anchor newly-opened floating windows to.
defaultOptions.disableLivePreview?	boolean	Disables live WebGL rendering canvas thumbnails inside the taskbar hover popup previews.
defaultOptions.favoritePosition?	{ height: string | number; width: string | number; x: string | number; y: string | number; }	Custom default bounds applied when the container is floated.
defaultOptions.favoritePosition.height?	string | number	-
defaultOptions.favoritePosition.width?	string | number	-
defaultOptions.favoritePosition.x?	string | number	-
defaultOptions.favoritePosition.y?	string | number	-
defaultOptions.icon?	ReactNode	Icon placed next to title tags.
defaultOptions.initialTarget?	"docked" | "floating" | "tabbed"	Initial mounting state inside the desktop layout grid.
defaultOptions.renderHeaderActions?	(panelId) => ReactNode	Custom header actions renderer, placing custom components in the window/tab titlebar.
defaultOptions.title?	| string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; }	Tab and window headers text — plain string or i18n descriptor.

Returns

void

---

WorkspaceClient

Defined in: WorkspaceClient.ts:117

WorkspaceClient is the central configuration and imperative API object for react-dockable-desktop. Create one instance outside the React tree and pass it to <WindowManagerProvider client={client}>.

Pattern: TanStack QueryClient / Redux store — configuration and imperative access live on the client; rendering is delegated to the thin React provider.

Remarks

Calls made before the provider mounts are queued and replayed automatically in order once _connect() fires. Duplicate openPanel calls for the same ID are deduplicated while queued. Subscriptions made before mount are buffered and re-registered on each connect/reconnect.

Example

const workspace = new WorkspaceClient<MyEvents>({
  panels: {
    map:    { component: MapPanel },
    editor: { component: EditorPanel, defaultOptions: { title: 'Code Editor' } },
  },
  initialState: localStorage.getItem('layout'),
});

<WindowManagerProvider client={workspace}>
  <WindowManager />
</WindowManagerProvider>

// Imperative access from anywhere:
workspace.saveLayout();
workspace.openPanel('map-1', 'map');
workspace.focusPanel('map-1');

Type Parameters

Type Parameter	Default type
TUserEvents extends Record<string, unknown>	Record<string, unknown>

Accessors

isConnected

Get Signature

get isConnected(): boolean;

Defined in: WorkspaceClient.ts:194

True while the provider is mounted and React state is accessible.

Returns

boolean

Constructors

Constructor

new WorkspaceClient<TUserEvents>(config?): WorkspaceClient<TUserEvents>;

Defined in: WorkspaceClient.ts:146

Parameters

Parameter	Type
config	WorkspaceClientConfig

Returns

WorkspaceClient<TUserEvents>

Methods

_connect()

_connect(actions): void;

Defined in: WorkspaceClient.ts:168

Internal

Called by WindowManagerProvider after mount.

Parameters

Parameter	Type
actions	WindowActions

Returns

void

_disconnect()

_disconnect(): void;

Defined in: WorkspaceClient.ts:185

Internal

Called by WindowManagerProvider on unmount.

Returns

void

closeLeafGroup()

closeLeafGroup(leafId): void;

Defined in: WorkspaceClient.ts:322

Closes an entire leaf group (all of its tabs) at once.

Parameters

Parameter	Type
leafId	string

Returns

void

closePanel()

closePanel(id): void;

Defined in: WorkspaceClient.ts:253

Parameters

Parameter	Type
id	string

Returns

void

dockPanel()

dockPanel(...args): void;

Defined in: WorkspaceClient.ts:263

Parameters

Parameter	Type
...args	[string, string]

Returns

void

dockPanelToGroup()

dockPanelToGroup(
   id, 
   targetLeafId, 
   position): void;

Defined in: WorkspaceClient.ts:312

Docks a panel into an existing leaf group at the given drop position.

Parameters

Parameter	Type
id	string
targetLeafId	string
position	DropPosition

Returns

void

dockPanelToWorkspaceEdge()

dockPanelToWorkspaceEdge(id, position): void;

Defined in: WorkspaceClient.ts:367

Docks a panel to one of the workspace's outer edges.

Parameters

Parameter	Type
id	string
position	SplitDirection

Returns

void

findPanelId()

findPanelId(component, dedupeKey): string | null;

Defined in: WorkspaceClient.ts:284

Finds an already-open panel of the given component with a matching dedupeKey (set via openPanel's dedupeKey option). Returns null if none is open.

Parameters

Parameter	Type
component	string
dedupeKey	string

Returns

string | null

floatPanel()

floatPanel(...args): void;

Defined in: WorkspaceClient.ts:259

Parameters

Parameter	Type
...args	[string, { height: number; width: number; x: number; y: number; }, FloatAnchor | null]

Returns

void

focusPanel()

focusPanel(id): void;

Defined in: WorkspaceClient.ts:274

Activates the given panel regardless of its current state. For floating panels: raises z-index so the window appears on top. For docked panels: selects the tab within its leaf group.

Parameters

Parameter	Type
id	string

Returns

void

getOpenPanelIds()

getOpenPanelIds(): string[];

Defined in: WorkspaceClient.ts:280

Returns the IDs of all currently open panels.

Returns

string[]

isOpen()

isOpen(id): boolean;

Defined in: WorkspaceClient.ts:277

Returns true if a panel with this ID is currently open.

Parameters

Parameter	Type
id	string

Returns

boolean

loadLayout()

loadLayout(json): boolean;

Defined in: WorkspaceClient.ts:290

Parameters

Parameter	Type
json	string

Returns

boolean

maximizePanel()

maximizePanel(id): void;

Defined in: WorkspaceClient.ts:267

Parameters

Parameter	Type
id	string

Returns

void

minimizePanel()

minimizePanel(id): void;

Defined in: WorkspaceClient.ts:255

Parameters

Parameter	Type
id	string

Returns

void

movePanelOrder()

movePanelOrder(
   panelId, 
   targetLeafId, 
   targetIndex): void;

Defined in: WorkspaceClient.ts:317

Reorders a panel's tab within its leaf group.

Parameters

Parameter	Type
panelId	string
targetLeafId	string
targetIndex	number

Returns

void

onLayoutChanged()

onLayoutChanged(callback): () => void;

Defined in: WorkspaceClient.ts:423

Subscribe to the coalesced layout-change signal — see BuiltInPanelEvents's 'layout:changed' doc for exactly what it covers (and doesn't).

Parameters

Parameter	Type
callback	() => void

Returns

() => void

onPanelClose()

onPanelClose(callback): () => void;

Defined in: WorkspaceClient.ts:401

Subscribe to panel close events.

Parameters

Parameter	Type
callback	(id) => void

Returns

() => void

onPanelMinimize()

onPanelMinimize(callback): () => void;

Defined in: WorkspaceClient.ts:408

Subscribe to panel minimize events.

Parameters

Parameter	Type
callback	(id) => void

Returns

() => void

onPanelOpen()

onPanelOpen(callback): () => void;

Defined in: WorkspaceClient.ts:393

Subscribe to panel open events. Fires only for newly created panels.

Parameters

Parameter	Type
callback	(id, component) => void

Returns

() => void

onPanelRestore()

onPanelRestore(callback): () => void;

Defined in: WorkspaceClient.ts:415

Subscribe to panel restore events.

Parameters

Parameter	Type
callback	(id) => void

Returns

() => void

onPanelsExcluded()

onPanelsExcluded(callback): () => void;

Defined in: WorkspaceClient.ts:430

Subscribe to notification that a saveLayout() call excluded one or more panels because their current props weren't serializable — see BuiltInPanelEvents's 'layout:panels-excluded' doc.

Parameters

Parameter	Type
callback	(panels) => void

Returns

() => void

openPanel()

openPanel(...args): void;

Defined in: WorkspaceClient.ts:237

Parameters

Parameter	Type
...args	[string, string, OpenPanelOptions<object>]

Returns

void

publish()

publish<K>(event, data): void;

Defined in: WorkspaceClient.ts:376

Type Parameters

Type Parameter
K extends string | number | symbol

Parameters

Parameter	Type
event	K
data	TUserEvents & BuiltInPanelEvents[K]

Returns

void

registerCloseGuard()

registerCloseGuard(id, guard): void;

Defined in: WorkspaceClient.ts:325

Registers a guard that can veto closing the given panel.

Parameters

Parameter	Type
id	string
guard	() => boolean | Promise<boolean>

Returns

void

registerStateProvider()

registerStateProvider(id, provider): void;

Defined in: WorkspaceClient.ts:335

Registers a callback reporting a panel's current restorable state, pulled fresh on every saveLayout() call — see BuiltInPanelEvents's 'layout:panels-excluded' doc and FormContainerContract.registerStateProvider.

Parameters

Parameter	Type
id	string
provider	() => unknown

Returns

void

requestClosePanel()

requestClosePanel(id, options?): Promise<void>;

Defined in: WorkspaceClient.ts:360

Requests that a panel close, honoring its dirty flag and any registered close guard. Resolves once the close (or user cancellation) has been resolved.

Parameters

Parameter	Type
id	string
options?	{ force?: boolean; onConfirm?: (opts?) => Promise<boolean>; }
options.force?	boolean
options.onConfirm?	(opts?) => Promise<boolean>

Returns

Promise<void>

Remarks

If called before the provider mounts, the request is queued and this returns an already-resolved promise immediately — the caller can't observe the eventual outcome of a queued call, only that the request was accepted.

restorePanel()

restorePanel(id): void;

Defined in: WorkspaceClient.ts:257

Parameters

Parameter	Type
id	string

Returns

void

saveLayout()

saveLayout(): string;

Defined in: WorkspaceClient.ts:288

Returns

string

setDirection()

setDirection(dir): void;

Defined in: WorkspaceClient.ts:296

Parameters

Parameter	Type
dir	"rtl" | "ltr"

Returns

void

setDraggedPanelId()

setDraggedPanelId(id): void;

Defined in: WorkspaceClient.ts:309

Internal

Drives the drag-in-progress visual state; normally only the library's own drag UI calls this.

Parameters

Parameter	Type
id	string | null

Returns

void

setPanelDirty()

setPanelDirty(
   id, 
   dirty, 
   options?): void;

Defined in: WorkspaceClient.ts:343

Sets/clears a panel's dirty (unsaved changes) flag.

Parameters

Parameter	Type
id	string
dirty	boolean
options?	DirtyStateOptions

Returns

void

showContextMenu()

showContextMenu(options): void;

Defined in: WorkspaceClient.ts:372

Shows a context menu using the app's configured ContextMenuAdapter.

Parameters

Parameter	Type
options	ShowContextMenuOptions

Returns

void

subscribe()

subscribe<K>(event, callback): () => void;

Defined in: WorkspaceClient.ts:383

Type Parameters

Type Parameter
K extends string | number | symbol

Parameters

Parameter	Type
event	K
callback	(data) => void

Returns

() => void

unregisterCloseGuard()

unregisterCloseGuard(id): void;

Defined in: WorkspaceClient.ts:330

Removes a previously registered close guard.

Parameters

Parameter	Type
id	string

Returns

void

unregisterStateProvider()

unregisterStateProvider(id): void;

Defined in: WorkspaceClient.ts:340

Removes a previously registered state provider.

Parameters

Parameter	Type
id	string

Returns

void

updateFloatingPosition()

updateFloatingPosition(id, updates): void;

Defined in: WorkspaceClient.ts:304

Updates position/size/anchor of a floating panel.

Parameters

Parameter	Type
id	string
updates	Partial<Pick<FloatingWindow, "x" | "y" | "width" | "height" | "anchor">>

Returns

void

updatePanelTitle()

updatePanelTitle(id, title): void;

Defined in: WorkspaceClient.ts:348

Updates a panel's displayed title.

Parameters

Parameter	Type
id	string
title	| string | ContextMenuPredefinedMessage

Returns

void

updateSplitSizes()

updateSplitSizes(path, sizes): void;

Defined in: WorkspaceClient.ts:299

Updates the split-size fractions at the given grid path.

Parameters

Parameter	Type
path	number[]
sizes	number[]

Returns

void

Properties

Property	Modifier	Type	Description	Defined in
config	readonly	Pick<WorkspaceClientConfig, | "formatMessage" | "predefinedMessages" | "dir" | "defaultSplitRatio" | "defaultEdgeSplitRatio" | "zIndexBase">	Non-rendering configuration forwarded to the provider.	WorkspaceClient.ts:125
initialState	readonly	string | null	Serialised layout to restore on mount, or null to start with an empty canvas.	WorkspaceClient.ts:122
registry	readonly	PanelRegistryClass	Scoped panel registry — fully independent from the global singleton.	WorkspaceClient.ts:119

Functions

computeResizedRect()

function computeResizedRect(
   dir, 
   dx, 
   dy, 
   start, 
   constraints): ResizeRect;

Defined in: components/dragResize.ts:96

Pure function computing the new rect for an 8-directional resize handle drag.

maxW/maxH and minX/minY are independent, direction-scoped constraints rather than one "container bound" — a resize toward the fixed edge (e/s) is naturally bounded by a maximum dimension, while a resize toward the moving edge (w/n) is naturally bounded by a minimum position, and the two calling sites this was extracted from need different subsets of these (see WindowManager.tsx's startResize, which omits all four and lets a window grow unbounded and be dragged fully off-screen, vs. PanelOverlay.tsx's handleResizePointerDown, which supplies all four to keep windows within their container).

Parameters

Parameter	Type
dir	ResizeDir
dx	number
dy	number
start	ResizeRect
constraints	ResizeConstraints

Returns

ResizeRect

---

formatLabel()

function formatLabel(label, formatter): string;

Defined in: components/WindowManagerContext.tsx:1886

Helper to resolve dynamic label strings or localizable descriptor objects into text.

Parameters

Parameter	Type
label	| string | ContextMenuPredefinedMessage | undefined
formatter	MessageFormatter

Returns

string

---

isSerializable()

function isSerializable(value): boolean;

Defined in: components/serializable.ts:21

Recursively checks whether a value can round-trip through JSON.stringify/JSON.parse without silently losing information.

Deliberately not a JSON.stringify try/catch — that call doesn't throw for the actual failure case this guards against: a function-valued property is simply dropped by JSON.stringify, not rejected. This walks the value tree instead, returning false as soon as it finds a function, symbol, undefined, React element, or any non-plain object (a class instance, Map, Set, RegExp, etc.).

Date is treated as an explicit exception — serializable-enough, matching JSON.stringify's own behavior — even though it doesn't round-trip back to a Date instance on parse. That's a smaller, more tolerable gotcha than a silently-vanishing function, so it's documented rather than treated as a disqualifying case.

Used to decide whether a docked/floating panel's props can be included in WorkspaceClient.saveLayout()'s output — see PanelInfo.serializable.

Parameters

Parameter	Type
value	unknown

Returns

boolean

---

PanelFloatingWindow()

function PanelFloatingWindow(props): 
  | ReactElement<unknown, string | JSXElementConstructor<any>>
  | null;

Defined in: components/PanelOverlay.tsx:701

Declarative floating window anchored inside a PanelOverlayRoot. Supports 8-direction resize, drag-to-free, and drag-to-dock at any corner. Multiple windows docked to the same corner stack vertically with animated offsets.

Parameters

Parameter	Type
props	PanelFloatingWindowProps

Returns

| ReactElement<unknown, string | JSXElementConstructor<any>> | null

Example

const info = usePanelFloatingWindow();
<PanelFloatingWindow
  id="layer-info" title="Layer Info"
  open={info.isOpen} onClose={info.close}
  defaultAnchor="top-right" defaultWidth={300} defaultHeight={200}
>
  <LayerInfoContent />
</PanelFloatingWindow>

---

PanelOverlayRoot()

function PanelOverlayRoot(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:120

Context provider and layout root for the Panel Overlay system. Wrap your panel content with this to enable PanelToolbar, PanelFloatingWindow, and usePanelFloatingWindowManager.

Parameters

Parameter	Type
__namedParameters	PanelOverlayRootProps

Returns

ReactElement

Example

function MyPanel() {
  return (
    <PanelOverlayRoot style={{ position: 'relative', width: '100%', height: '100%' }}>
      <PanelToolbar position="top">...</PanelToolbar>
      <div className="panel-body">content</div>
    </PanelOverlayRoot>
  );
}

---

PanelToolbar()

function PanelToolbar(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:315

Toolbar strip that attaches to any edge of a PanelOverlayRoot. Left/right toolbars inset automatically to avoid overlapping top/bottom toolbars. RTL layouts are detected and handled automatically.

Parameters

Parameter	Type
__namedParameters	PanelToolbarProps

Returns

ReactElement

Example

<PanelToolbar position="top" variant="frosted">
  <ToolbarButton icon={<SaveIcon />} title="Save" onClick={save} />
  <ToolbarToggle icon={<GridIcon />} title="Grid" active={grid} onToggle={() => setGrid(v => !v)} />
</PanelToolbar>

---

PanelToolbarItem()

function PanelToolbarItem(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:470

Wrapper for a custom non-button control (e.g. a dropdown or input) inside a PanelToolbar.

Parameters

Parameter	Type
__namedParameters	{ children: ReactNode; }
__namedParameters.children	ReactNode

Returns

ReactElement

---

PanelToolbarSeparator()

function PanelToolbarSeparator(): ReactElement;

Defined in: components/PanelOverlay.tsx:456

Vertical (or horizontal) divider line between groups of toolbar items.

Returns

ReactElement

---

sidebarSectionToTab()

function sidebarSectionToTab(section, fallbackIcon?): SidebarTab;

Defined in: components/PanelContributionContext.tsx:151

Converts a contributed sidebar section into a SidebarTab for <Sidebar tabs={...}>. SidebarTab.icon is required, so supply fallbackIcon for sections that omit one. eagerMount/preserveState have no contribution-side equivalent — a contribution only exists while its owning panel is mounted and active, so both are left unset.

Parameters

Parameter	Type	Default value
section	PanelSidebarSection	undefined
fallbackIcon	ReactNode	null

Returns

SidebarTab

---

startPointerDrag()

function startPointerDrag<TStart>(config): void;

Defined in: components/dragResize.ts:36

Starts a pointer-capture-based drag: captures the pointer on element, tracks movement via listeners scoped to that element's own lifetime (not window), and cleans up automatically on release or cancel.

Type Parameters

Type Parameter
TStart

Parameters

Parameter	Type
config	PointerDragConfig<TStart>

Returns

void

---

ToastContainer()

function ToastContainer(__namedParameters): 
  | ReactElement<unknown, string | JSXElementConstructor<any>>
  | null;

Defined in: components/Toast.tsx:420

Portal-rendered notification host. Mount once at your app root, outside the workspace container. All toast.* calls are routed here automatically via the internal event emitter.

Parameters

Parameter	Type
__namedParameters	ToastContainerProps

Returns

| ReactElement<unknown, string | JSXElementConstructor<any>> | null

Example

<ToastContainer position="top-right" progressBar />

---

ToolbarButton()

function ToolbarButton(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:402

Icon button for use inside a PanelToolbar.

Parameters

Parameter	Type
__namedParameters	ToolbarButtonProps

Returns

ReactElement

---

ToolbarCenter()

function ToolbarCenter(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:477

Centers its children within the toolbar using absolute positioning.

Parameters

Parameter	Type
__namedParameters	{ children: ReactNode; }
__namedParameters.children	ReactNode

Returns

ReactElement

---

ToolbarSearchInput()

function ToolbarSearchInput(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:522

Debounced async search field for use inside a PanelToolbar. Renders as a compact icon button that expands into a text input on activation. Results appear in a portal-rendered dropdown below the input.

Parameters

Parameter	Type
__namedParameters	ToolbarSearchInputProps

Returns

ReactElement

Example

<ToolbarSearchInput
  placeholder="Find layer…"
  onSearch={(q, signal) => fetchLayers(q, { signal })}
  onSelect={result => workspace.focusLayer(result.id)}
/>

---

ToolbarSpacer()

function ToolbarSpacer(): ReactElement;

Defined in: components/PanelOverlay.tsx:463

Flex-grow spacer that pushes subsequent toolbar items to the far edge.

Returns

ReactElement

---

ToolbarToggle()

function ToolbarToggle(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:436

Two-state icon toggle button for use inside a PanelToolbar. Sets aria-pressed automatically.

Parameters

Parameter	Type
__namedParameters	ToolbarToggleProps

Returns

ReactElement

---

useActivePanelContribution()

function useActivePanelContribution(): PanelContribution | null;

Defined in: components/PanelContributionContext.tsx:130

Returns whatever the currently active panel (state.activePanelId) has published via usePanelContribution(), or null if no panel is active or the active panel hasn't contributed anything. Intended for the app shell to merge into its own <Toolbar items={...}> / <Sidebar tabs={...}> calls.

Returns

PanelContribution | null

Throws

Error if used outside of a PanelContributionProvider.

---

useColorScheme()

function useColorScheme(): "dark" | "light";

Defined in: hooks/useColorScheme.ts:12

Reactively reads the workspace's current data-color-scheme attribute (set on document.documentElement by <WindowManager />), returning 'dark' or 'light' and re-rendering whenever it changes.

Useful for panel content that needs to react to the same scheme the workspace itself is using — e.g. swapping a map's tile layer or an embedded editor's theme to match.

Returns

"dark" | "light"

---

useFormatMessage()

function useFormatMessage(): MessageFormatter;

Defined in: components/WindowManagerContext.tsx:1870

React hook to retrieve the active i18n formatter.

Returns

MessageFormatter

---

useFormContainer()

function useFormContainer(): FormContainerContract;

Defined in: components/FormContainerContext.ts:118

React hook to retrieve the current FormContainerContract from context. Enables sub-forms to trigger close/minimize requests, mark themselves dirty, rename their tabs, query dimensions, or subscribe to lifecycle events (resize, close, minimize, restore, activate, deactivate, container-type changes).

Returns

FormContainerContract

---

useMergedSidebarTabs()

function useMergedSidebarTabs(staticTabs, fallbackIcon?): SidebarTab[];

Defined in: components/PanelContributionContext.tsx:180

Convenience wrapper around useActivePanelContribution() for the common case: append the active panel's contributed sidebar sections (via sidebarSectionToTab) to a static tab list, as dynamic tabs that appear only while their panel is active. Returns staticTabs unchanged when there's nothing to add.

Parameters

Parameter	Type	Default value
staticTabs	SidebarTab[]	undefined
fallbackIcon	ReactNode	null

Returns

SidebarTab[]

---

useMergedToolbarItems()

function useMergedToolbarItems(staticItems): ToolbarItem[];

Defined in: components/PanelContributionContext.tsx:167

Convenience wrapper around useActivePanelContribution() for the common case: append the active panel's contributed toolbar items (behind a separator) to a static list. Returns staticItems unchanged when there's nothing to add. For manual control (a different merge position, no separator, etc.), call useActivePanelContribution() directly instead.

Parameters

Parameter	Type
staticItems	ToolbarItem[]

Returns

ToolbarItem[]

---

usePanelActions()

function usePanelActions(): PanelActions;

Defined in: components/PanelProviderContext.tsx:314

React hook to retrieve actions enabling drawer toggles and modal push actions.

Returns

PanelActions

Throws

Error if used outside of a PanelProvider.

---

usePanelContext()

function usePanelContext(): Pick<WindowActions, "publish" | "subscribe">;

Defined in: components/WindowManagerContext.tsx:1898

React hook providing pub-sub helper methods for inter-panel event messaging.

Returns

Pick<WindowActions, "publish" | "subscribe">

---

usePanelContextMenu()

function usePanelContextMenu(items): void;

Defined in: components/WindowManagerContext.tsx:1948

React hook for injecting custom context menu items into a panel's context menu from inside the panel component. Items are dynamic — the array is re-read each time the menu opens, so state-driven changes (enable/disable, add/remove) work automatically. The hook reads the panel ID internally via usePanelId — no prop needed.

Parameters

Parameter	Type	Description
items	ContextMenuItem[]	Array of ContextMenuItem entries (simple items, separators, submenus).

Returns

void

Example

import { usePanelContextMenu } from 'dockable-windows';

function MyPanel() {
  const [dirty, setDirty] = useState(false);
  usePanelContextMenu([
    { label: 'Save', action: () => save() },
    { label: 'Revert', action: () => revert() },
  ]);
  return <Editor onChange={() => setDirty(true)} />;
}

---

usePanelContribution()

function usePanelContribution(contribution): void;

Defined in: components/PanelContributionContext.tsx:104

Publish this panel's toolbar items and/or sidebar sections. Call on every render — republishes automatically whenever contribution changes, and is cleared when the panel unmounts. Memoize the object (and its array/callback contents, e.g. with useMemo/useCallback) to avoid republishing on every unrelated re-render.

Contributions are only ever surfaced while this panel is state.activePanelId — see useActivePanelContribution().

Parameters

Parameter	Type
contribution	PanelContribution

Returns

void

Throws

Error if used outside of a PanelContributionProvider.

Example

function MapPanel() {
  const [controller, setController] = useState<'pan' | 'draw' | 'measure'>('pan');
  usePanelContribution({
    toolbarItems: (['pan', 'draw', 'measure'] as const).map(id => ({
      type: 'toggle', id, label: id, icon: icons[id],
      active: controller === id, onToggle: () => setController(id),
    })),
    sidebarSections: [{ id: 'layers', label: 'Layers', content: <LayerList /> }],
  });
  // ...
}

---

usePanelFloatingWindow()

function usePanelFloatingWindow(): UsePanelFloatingWindowReturn;

Defined in: components/PanelOverlay.tsx:995

Manages the open/close boolean state for a single PanelFloatingWindow. Pass isOpen to open, close to onClose on the component directly.

Returns

UsePanelFloatingWindowReturn

A stable UsePanelFloatingWindowReturn object.

Example

const info = usePanelFloatingWindow();
<PanelFloatingWindow id="info" open={info.isOpen} onClose={info.close} ... />

---

usePanelFloatingWindowManager()

function usePanelFloatingWindowManager(): PanelFloatingWindowManagerHandle;

Defined in: components/PanelOverlay.tsx:1033

Imperative hook for spawning N named floating windows at runtime from data or event handlers. All windows share z-ordering, drag, and corner-docking infrastructure of the PanelOverlayRoot.

Must be called inside a descendant of PanelOverlayRoot, not in the component that renders the root.

Returns

PanelFloatingWindowManagerHandle

A stable PanelFloatingWindowManagerHandle.

Example

const manager = usePanelFloatingWindowManager();
manager.open('feature-42', { title: 'Feature 42', content: <FeatureDetail id={42} />, anchor: 'top-right' });

---

usePanelSize()

function usePanelSize(): 
  | {
  height: number;
  width: number;
}
  | null;

Defined in: components/FormContainerContext.ts:129

Reactive alternative to calling FormContainerContract.getDimensions yourself. Returns the panel's current { width, height }, or null before it has been laid out, and re-renders whenever the panel's rendered box changes — including resizes caused by the workspace itself (a grid split being dragged, docking, floating, or tab activation), not just resizes of an element the panel created.

Returns

| { height: number; width: number; } | null

---

usePanelState()

function usePanelState(): PanelState;

Defined in: components/PanelProviderContext.tsx:304

React hook to retrieve the active floating/drawer panels state.

Returns

PanelState

Throws

Error if used outside of a PanelProvider.

---

usePredefinedMessages()

function usePredefinedMessages(): Record<PredefinedMessageKey, ContextMenuPredefinedMessage>;

Defined in: components/WindowManagerContext.tsx:1906

React hook to fetch the localizable predefined message map catalog.

Returns

Record<PredefinedMessageKey, ContextMenuPredefinedMessage>

---

useShowContextMenu()

function useShowContextMenu(): (options) => void;

Defined in: components/ContextMenu.tsx:488

Returns

(options) => void

---

useSidebar()

function useSidebar(): SidebarContextValue;

Defined in: components/Sidebar.tsx:703

Returns sidebar control functions from anywhere inside a <Sidebar> tree, including floating panels rendered via {children}.

Returns

SidebarContextValue

Throws

Error if used outside of a Sidebar.

---

useSidebarTab()

function useSidebarTab(): SidebarTabContextValue;

Defined in: components/Sidebar.tsx:715

Returns tab-specific control functions for components rendered inside a sidebar tab's renderContent tree.

Returns

SidebarTabContextValue

Throws

Error if used outside of a Sidebar tab's renderContent tree.

---

useStyleClasses()

function useStyleClasses(): StyleClasses;

Defined in: components/WindowManagerContext.tsx:506

Custom hook to read configured style class contexts.

Returns

StyleClasses

---

useToolbar()

function useToolbar(): ToolbarContextValue;

Defined in: components/ToolbarContext.tsx:45

Returns toolbar state and control functions from anywhere inside a <DockableDesktopProvider> tree.

Returns

ToolbarContextValue

Throws

Error if used outside of a DockableDesktopProvider.

---

useWindowManagerState()

Call Signature

function useWindowManagerState(): WindowState;

Defined in: components/WindowManagerContext.tsx:1809

Returns

WindowState

Call Signature

function useWindowManagerState<T>(selector): T;

Defined in: components/WindowManagerContext.tsx:1810

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
selector	(state) => T

Returns

T

Interfaces

BuiltInPanelEvents

Defined in: WorkspaceClient.ts:16

Built-in lifecycle events always available on the WorkspaceClient event bus.

Properties

Property	Type	Description	Defined in
layout:changed	Record<string, never>	Fires whenever something saveLayout() would capture changes — open/close/minimize/restore, and an openPanel dedupeKey redirect. Coalesces those into one signal for autosave-style consumers, so they don't need to subscribe to four separate events. Does not cover a registerStateProvider callback's return value changing on its own — that's a pull, there's no way to observe it changing without the panel separately notifying — nor resize/split-ratio drag/dock-rearrange, which have no hooks yet.	WorkspaceClient.ts:29
layout:panels-excluded	{ panels: { component: string; id: string; }[]; }	Fires from inside saveLayout() itself, only when that specific call excluded at least one panel (a panel whose current props — static or from a registerStateProvider — failed isSerializable). A passive PanelInfo.serializable flag alone isn't enough for this: nobody may be polling it at the exact moment a save happens and something silently drops out (e.g. a floating window rendering data from a live class instance). This is deliberately just a signal, not a UI opinion — decide for yourself whether that becomes a toast, a console warning, or nothing.	WorkspaceClient.ts:39
layout:panels-excluded.panels	{ component: string; id: string; }[]	-	WorkspaceClient.ts:39
panel:closed	{ id: string; }	-	WorkspaceClient.ts:18
panel:closed.id	string	-	WorkspaceClient.ts:18
panel:minimized	{ id: string; }	-	WorkspaceClient.ts:19
panel:minimized.id	string	-	WorkspaceClient.ts:19
panel:opened	{ component: string; id: string; }	-	WorkspaceClient.ts:17
panel:opened.component	string	-	WorkspaceClient.ts:17
panel:opened.id	string	-	WorkspaceClient.ts:17
panel:restored	{ id: string; }	-	WorkspaceClient.ts:20
panel:restored.id	string	-	WorkspaceClient.ts:20

---

CloseOptions

Defined in: components/FormContainerContext.ts:7

Options used when requesting to close a container.

Properties

Property	Type	Description	Defined in
force?	boolean	If true, bypasses any dirty state warnings or custom close guards.	components/FormContainerContext.ts:9

---

ConfirmationFormProps

Defined in: forms/ConfirmationForm.tsx:8

Props for the ConfirmationForm component.

Properties

Property	Type	Description	Defined in
alert?	string	Optional auxiliary top alert notification text.	forms/ConfirmationForm.tsx:14
alertType?	"info" | "warning" | "success" | "danger"	Type style classification for the alert notice banner.	forms/ConfirmationForm.tsx:16
message	| string | { defaultMessage?: string; id: string; values?: any; }	Main message text or localizable descriptor to display.	forms/ConfirmationForm.tsx:12
onCancel?	() => void	Callback fired when the user selects the cancel button.	forms/ConfirmationForm.tsx:22
onOK?	() => void	Callback fired when the user selects the confirm button.	forms/ConfirmationForm.tsx:20
title?	| string | { defaultMessage?: string; id: string; values?: any; }	Optional custom title text or localizable descriptor for the dialog container.	forms/ConfirmationForm.tsx:10
useYesNoTitles?	boolean	If true, changes action button labels to 'Yes' and 'No' instead of 'OK' and 'Cancel'.	forms/ConfirmationForm.tsx:18

---

ContextMenuAdapter

Defined in: components/ContextMenu.tsx:76

Properties

Property	Type	Defined in
Component	ForwardRefExoticComponent<ContextMenuProps & RefAttributes<ContextMenuHandle>>	components/ContextMenu.tsx:77

---

ContextMenuCheckbox

Defined in: components/ContextMenu.tsx:17

Properties

Property	Type	Description	Defined in
active?	boolean	Whether the checkbox column renders at all (default: true).	components/ContextMenu.tsx:19
enabled?	boolean	Whether the item is interactive (default: true). Prefer top-level disabled on the item instead.	components/ContextMenu.tsx:21
value	boolean	Current checked state.	components/ContextMenu.tsx:23

---

ContextMenuHandle

Defined in: components/ContextMenu.tsx:57

Methods

show()

show(options): void;

Defined in: components/ContextMenu.tsx:58

Parameters

Parameter	Type
options	ShowContextMenuOptions

Returns

void

---

ContextMenuPredefinedMessage

Defined in: components/WindowManagerContext.tsx:17

Structure representing localizable message descriptors used in context menus.

Properties

Property	Type	Description	Defined in
defaultMessage?	string	Fallback label text if translation key is missing.	components/WindowManagerContext.tsx:21
id	string	Translation dictionary key.	components/WindowManagerContext.tsx:19
values?	Record<string, string | number>	Values injected into the translated text placeholder.	components/WindowManagerContext.tsx:23

---

ContextMenuProps

Defined in: components/ContextMenu.tsx:63

Properties

Property	Type	Defined in
animation?	string	components/ContextMenu.tsx:65
className?	string	components/ContextMenu.tsx:70
formatMessageProvider?	MessageFormatter	components/ContextMenu.tsx:66
onHide?	() => void	components/ContextMenu.tsx:68
onOpenChange?	(open) => void	components/ContextMenu.tsx:69
onShow?	() => void	components/ContextMenu.tsx:67
style?	CSSProperties	components/ContextMenu.tsx:71
theme?	string	components/ContextMenu.tsx:64

---

ContextMenuSeparator

Defined in: components/ContextMenu.tsx:36

Properties

Property	Type	Defined in
separator	true	components/ContextMenu.tsx:37

---

ContextMenuSimpleItem

Defined in: components/ContextMenu.tsx:26

Properties

Property	Type	Defined in
action?	MenuItemAction	components/ContextMenu.tsx:31
checkbox?	ContextMenuCheckbox	components/ContextMenu.tsx:30
cyAction?	string	components/ContextMenu.tsx:32
disabled?	boolean	components/ContextMenu.tsx:33
icon?	ReactNode	components/ContextMenu.tsx:28
label	ContextMenuLabel	components/ContextMenu.tsx:27
title?	ContextMenuLabel	components/ContextMenu.tsx:29

---

ContextMenuSubMenu

Defined in: components/ContextMenu.tsx:40

Properties

Property	Type	Defined in
items?	ContextMenuItem[]	components/ContextMenu.tsx:43
label	ContextMenuLabel	components/ContextMenu.tsx:41
title?	ContextMenuLabel	components/ContextMenu.tsx:42

---

DockableDesktopProviderProps

Defined in: components/DockableDesktopProvider.tsx:14

Props for <DockableDesktopProvider>. Extends WindowManagerProviderProps with workspace-level context menu configuration.

Extends

• WindowManagerProviderProps

Properties

Property	Type	Description	Inherited from	Defined in
children	ReactNode	-	WindowManagerProviderProps.children	components/WindowManagerContext.tsx:620
client?	WorkspaceClient<Record<string, unknown>>	WorkspaceClient instance created outside the React tree. When provided, its panel registry and config take precedence over the individual props below.	WindowManagerProviderProps.client	components/WindowManagerContext.tsx:623
contextMenuAdapter?	ContextMenuAdapter	Context menu adapter for the workspace-level ContextMenuProvider. Defaults to DefaultContextMenuAdapter. Ignored if a <ContextMenuProvider> already exists above <DockableDesktopProvider> in the tree.	-	components/DockableDesktopProvider.tsx:20
dir?	"rtl" | "ltr"	Layout direction. 'rtl' mirrors all controls, tab order, and drop zones. Can also be changed at runtime via WorkspaceClient.setDirection(). Default 'ltr'	WindowManagerProviderProps.dir	components/WindowManagerContext.tsx:632
formatMessage?	MessageFormatter	Custom i18n formatter. Receives a { id, defaultMessage } descriptor and returns the translated string. When omitted, defaultMessage is used as-is.	WindowManagerProviderProps.formatMessage	components/WindowManagerContext.tsx:626
modalBodyClass?	string	CSS class applied to the inner content area of every modal overlay.	WindowManagerProviderProps.modalBodyClass	components/WindowManagerContext.tsx:636
modalClass?	string	CSS class applied to the outer wrapper element of every modal overlay.	WindowManagerProviderProps.modalClass	components/WindowManagerContext.tsx:634
predefinedMessages?	Record<string, ContextMenuPredefinedMessage>	Override the built-in predefined UI strings (confirm button labels, close tooltips, etc.). Merge with or replace defaultPredefinedMessages to localise system strings.	WindowManagerProviderProps.predefinedMessages	components/WindowManagerContext.tsx:629
sidePanelBodyClass?	string	CSS class applied to the inner content area of side-panel drawers.	WindowManagerProviderProps.sidePanelBodyClass	components/WindowManagerContext.tsx:640
sidePanelClass?	string	CSS class applied to the outer wrapper of left/right side-panel drawers.	WindowManagerProviderProps.sidePanelClass	components/WindowManagerContext.tsx:638
windowBodyClass?	string	CSS class applied to the inner content area of floating panel windows.	WindowManagerProviderProps.windowBodyClass	components/WindowManagerContext.tsx:644
windowClass?	string	CSS class applied to the outer wrapper of floating panel windows.	WindowManagerProviderProps.windowClass	components/WindowManagerContext.tsx:642
zIndexBase?	number	Starting z-index for floating windows and the library's own chrome overlays (context menu, toolbar flyout, modal stack, toast, workspace edge zones), all of which shift together via --rdd-z-base. Set this above/below a host app's own modal z-index range to control stacking against it. Default 1000	WindowManagerProviderProps.zIndexBase	components/WindowManagerContext.tsx:651

---

DropTarget

Defined in: components/WindowManagerContext.tsx:39

The target leaf and position for a drag-and-drop dock operation.

Properties

Property	Type	Defined in
leafId	string	components/WindowManagerContext.tsx:40
position	DropPosition	components/WindowManagerContext.tsx:41

---

FloatingWindow

Defined in: components/WindowManagerContext.tsx:92

Bounds and depth metadata for floated panel windows.

Properties

Property	Type	Description	Defined in
anchor?	FloatAnchor | null	Corner of the workspace this window is pinned to, or null when free-floating.	components/WindowManagerContext.tsx:108
height	string | number	CSS height value.	components/WindowManagerContext.tsx:102
id	string	Unique ID of the floating window.	components/WindowManagerContext.tsx:94
maximized?	boolean	True if the window is currently maximized to full workspace bounds.	components/WindowManagerContext.tsx:106
width	string | number	CSS width value.	components/WindowManagerContext.tsx:100
x	string | number	CSS left position offset (supports number/px or percentage strings).	components/WindowManagerContext.tsx:96
y	string | number	CSS top position offset.	components/WindowManagerContext.tsx:98
z	number	Rendering depth stack index layer.	components/WindowManagerContext.tsx:104

---

FormContainerContract

Defined in: components/FormContainerContext.ts:25

Contract interface exposed by a container (like a tab, window, modal, or side-panel) to its children forms, enabling them to control or listen to container events.

Properties

Property	Type	Description	Defined in
containerType?	ContainerType	The type of container the panel is mounted in. Reflects the state at mount time; subscribe to onContainerTypeChange for live updates.	components/FormContainerContext.ts:48
getDimensions?	() => | { height: number; width: number; } | null	Returns the current rendered dimensions of this panel, or null if the panel has not been laid out yet.	components/FormContainerContext.ts:62
instanceId	string	Unique identifier of the panel or window instance.	components/FormContainerContext.ts:50
onActivate?	(handler) => () => void	Subscribe to this panel becoming the globally active panel. Fires when activePanelId transitions to this panel's id. Returns an unsubscribe function.	components/FormContainerContext.ts:68
onClose?	(handler) => () => void	Subscribe to the container's close event. Returns an unsubscribe function.	components/FormContainerContext.ts:52
onCloseRequested	(handler) => () => void	Register a custom close guard handler. Returning false or a promise resolving to false blocks closing.	components/FormContainerContext.ts:31
onContainerTypeChange?	(handler) => () => void	Subscribe to changes in the panel's container type (e.g. docked ↔ floating). Does not fire for minimize/restore cycles — use onMinimize / onRestore for those. Returns an unsubscribe function.	components/FormContainerContext.ts:81
onDeactivate?	(handler) => () => void	Subscribe to this panel losing active status. Fires when activePanelId transitions away from this panel's id, and also fires if the panel is destroyed while it is active. Returns an unsubscribe function.	components/FormContainerContext.ts:75
onMinimize?	(handler) => () => void	Subscribe to the container's minimize event. Returns an unsubscribe function.	components/FormContainerContext.ts:54
onResize?	(handler) => () => void	Subscribe to the container's window resize event, returning width and height. Returns an unsubscribe function.	components/FormContainerContext.ts:58
onRestore?	(handler) => () => void	Subscribe to the container's restore event. Returns an unsubscribe function.	components/FormContainerContext.ts:56
registerStateProvider?	(getState) => () => void	Registers a callback reporting this panel's current restorable state, pulled fresh by WorkspaceClient.saveLayout() every time it's called — for panels whose static open-time props can't capture state accumulated after opening (scroll position, an in-progress edit, a view-mode toggle). Only meaningful for docked/floating panels — left/right side panels and modals already have a complete answer to this via openLeftPanel/openRightPanel/ openModal's own props argument plus updateInstance, so this is undefined there. The returned value must be synchronous — saveLayout() itself never returns a Promise. Return undefined to fall back to the static props this panel was opened with.	components/FormContainerContext.ts:42
requestClose	(options?) => void	Request the container to close itself. Bypassed by default unless options.force is true.	components/FormContainerContext.ts:27
requestMinimize?	() => void	Request the container to minimize itself to the taskbar. No-op if the container type does not support minimize.	components/FormContainerContext.ts:60
setDirty	(dirty, options?) => void	Mark the form's content as dirty (having unsaved changes), triggering alert dialogs on close.	components/FormContainerContext.ts:29
setIcon?	(icon) => void	Change the tab or window icon dynamically.	components/FormContainerContext.ts:46
setTitle	(title) => void	Change the display title of the containing tab or window dynamically.	components/FormContainerContext.ts:44

---

LayoutGridNode

Defined in: components/WindowManagerContext.tsx:47

Grid layout branch node containing nested splits and relative flex sizes.

Properties

Property	Type	Description	Defined in
children	LayoutNode[]	Children branches or leaf panels.	components/WindowManagerContext.tsx:52
orientation	SplitOrientation	Split orientation orientation indicator.	components/WindowManagerContext.tsx:50
sizes	number[]	Relative percentage sizes of each child layout block.	components/WindowManagerContext.tsx:54
type	"branch"	-	components/WindowManagerContext.tsx:48

---

LayoutLeafNode

Defined in: components/WindowManagerContext.tsx:60

Grid layout leaf node containing active tab groups and panel arrays.

Properties

Property	Type	Description	Defined in
activePanelId	string | null	The currently active panel tab ID.	components/WindowManagerContext.tsx:67
canClose?	boolean	If false, close menu buttons are disabled for this group's tabs.	components/WindowManagerContext.tsx:69
id	string	Unique leaf identifier.	components/WindowManagerContext.tsx:63
keepOnEmpty?	boolean	When true, the group persists in the layout even after its last panel is closed.	components/WindowManagerContext.tsx:71
panels	string[]	Array of panel IDs mounted inside this group.	components/WindowManagerContext.tsx:65
type	"leaf"	-	components/WindowManagerContext.tsx:61

---

ManagedWindowConfig

Defined in: components/PanelOverlay.tsx:32

Configuration for a window spawned imperatively via usePanelFloatingWindowManager().open().

See

usePanelFloatingWindowManager

Properties

Property	Type	Description	Defined in
anchor?	FloatAnchor	Corner of the panel to dock to on first render. Default 'top-right'	components/PanelOverlay.tsx:40
content	ReactNode	Window body content.	components/PanelOverlay.tsx:38
height?	number	Initial height in pixels.	components/PanelOverlay.tsx:44
icon?	ReactNode	Optional icon shown to the left of the title in the header.	components/PanelOverlay.tsx:36
title	string	Text shown in the window's header bar.	components/PanelOverlay.tsx:34
width?	number	Initial width in pixels.	components/PanelOverlay.tsx:42

---

ModalOptions

Defined in: components/PanelProviderContext.tsx:35

Configuration options applied when opening a Modal.

Properties

Property	Type	Description	Defined in
closable?	boolean	If false, hides the modal backdrop exit click and header close button.	components/PanelProviderContext.tsx:43
icon?	ReactNode	Icon displayed in the modal title bar.	components/PanelProviderContext.tsx:39
size?	"small" | "auto" | "medium" | "large" | "fullscreen"	Size modifier affecting CSS max-width rules.	components/PanelProviderContext.tsx:41
title?	PanelTitle	Display title for the modal header.	components/PanelProviderContext.tsx:37

---

OpenPanelOptions

Defined in: components/WindowManagerContext.tsx:152

Options accepted by WindowActions.openPanel.

Type Parameters

Type Parameter	Default type
P extends object	Record<string, unknown>

Properties

Property	Type	Description	Defined in
anchor?	FloatAnchor | null	Pin the new floating window to a workspace corner on creation. Has no effect when initialTarget is 'docked' or 'tabbed'.	components/WindowManagerContext.tsx:159
dedupeKey?	string	If set, and another currently-open panel of the same component already has this exact dedupeKey, that existing panel is focused instead of opening a new one — the id/props passed to this call are ignored in that case, the same way re-opening an already-open exact id already focuses it instead of duplicating it. Use this when multiple call sites might not agree on the same literal id for what is semantically the same entity (e.g. "the panel for the document at this path"). See also WindowActions.findPanelId.	components/WindowManagerContext.tsx:178
focus?	boolean	Set state.activePanelId to this panel. Default true	components/WindowManagerContext.tsx:161
initialTarget?	"docked" | "floating" | "tabbed"	Initial placement: 'floating', 'docked' (default when a grid exists), or 'tabbed'.	components/WindowManagerContext.tsx:156
props?	P	Custom per-instance data spread onto the panel component alongside panelId, matching openModal/openLeftPanel/openRightPanel's already-unconstrained props argument — no type restriction here either. Whether a specific value round-trips through saveLayout() is a runtime fact, not a type-level guarantee: see PanelInfo.serializable and the 'layout:panels-excluded' event.	components/WindowManagerContext.tsx:169
title?	| string | ContextMenuPredefinedMessage	Override the panel tab/window title. Accepts a plain string or an i18n message descriptor.	components/WindowManagerContext.tsx:154

---

PanelActions

Defined in: components/PanelProviderContext.tsx:77

Exposes methods to trigger state actions on drawers and modals.

Properties

Property	Type	Description	Defined in
close	(id) => void	Closes an instance by ID.	components/PanelProviderContext.tsx:85
closeAll	() => void	Closes all drawers and modals in a single action.	components/PanelProviderContext.tsx:87
closeAllModals	() => void	Closes all open modals.	components/PanelProviderContext.tsx:89
getInstance	(id) => PanelInstance | undefined	Retrieves metadata for an active instance by ID.	components/PanelProviderContext.tsx:91
openLeftPanel	<P>(Component, props, options?) => Promise<string | null>	Mounts a panel in the left-side container drawer.	components/PanelProviderContext.tsx:79
openModal	<P>(Component, props, options?) => string	Pushes a new modal component instance to the top of the stack.	components/PanelProviderContext.tsx:83
openRightPanel	<P>(Component, props, options?) => Promise<string | null>	Mounts a panel in the right-side container drawer.	components/PanelProviderContext.tsx:81
registerCloseHandler	(id, handler) => void	Subscribes a custom close confirmation intercept handler.	components/PanelProviderContext.tsx:97
setDirty	(id, dirty, options?) => void	Flags an instance as dirty (contains unsaved changes).	components/PanelProviderContext.tsx:95
unregisterCloseHandler	(id) => void	Unsubscribes close confirmation handler.	components/PanelProviderContext.tsx:99
updateInstance	(id, updates) => void	Updates the props, configuration options, or dirty flag of an active panel.	components/PanelProviderContext.tsx:93

---

PanelContribution

Defined in: components/PanelContributionContext.tsx:29

What a panel publishes via usePanelContribution(). Both fields are optional and independent — a panel may contribute only toolbar items, only sidebar sections, both, or neither. The app decides what "toolbar items" and "sidebar sections" mean for its own domain (map controls, document formatting, anything else).

Properties

Property	Type	Defined in
sidebarSections?	PanelSidebarSection[]	components/PanelContributionContext.tsx:31
toolbarItems?	ToolbarItem[]	components/PanelContributionContext.tsx:30

---

PanelDefinition

Defined in: WorkspaceClient.ts:43

Per-panel definition supplied to WorkspaceClient constructor.

Properties

Property	Type	Description	Defined in
component	ComponentType<any>	-	WorkspaceClient.ts:44
defaultOptions?	{ canClose?: boolean; canDrag?: boolean; canMinimize?: boolean; defaultAnchor?: FloatAnchor; disableLivePreview?: boolean; favoritePosition?: { height: string | number; width: string | number; x: string | number; y: string | number; }; icon?: ReactNode; initialTarget?: "docked" | "floating" | "tabbed"; renderHeaderActions?: (panelId) => ReactNode; title?: | string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; }; }	-	WorkspaceClient.ts:45
defaultOptions.canClose?	boolean	Enables/disables closing actions for the tab/window.	components/PanelRegistry.ts:25
defaultOptions.canDrag?	boolean	Enables/disables window drag interactions.	components/PanelRegistry.ts:21
defaultOptions.canMinimize?	boolean	Enables/disables minimizing of the panel instance.	components/PanelRegistry.ts:23
defaultOptions.defaultAnchor?	FloatAnchor	Corner of the workspace to anchor newly-opened floating windows to.	components/PanelRegistry.ts:27
defaultOptions.disableLivePreview?	boolean	Disables live WebGL rendering canvas thumbnails inside the taskbar hover popup previews.	components/PanelRegistry.ts:29
defaultOptions.favoritePosition?	{ height: string | number; width: string | number; x: string | number; y: string | number; }	Custom default bounds applied when the container is floated.	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.height	string | number	-	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.width	string | number	-	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.x	string | number	-	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.y	string | number	-	components/PanelRegistry.ts:19
defaultOptions.icon?	ReactNode	Icon placed next to title tags.	components/PanelRegistry.ts:15
defaultOptions.initialTarget?	"docked" | "floating" | "tabbed"	Initial mounting state inside the desktop layout grid.	components/PanelRegistry.ts:17
defaultOptions.renderHeaderActions?	(panelId) => ReactNode	Custom header actions renderer, placing custom components in the window/tab titlebar.	components/PanelRegistry.ts:31
defaultOptions.title?	| string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; }	Tab and window headers text — plain string or i18n descriptor.	components/PanelRegistry.ts:13

---

PanelFloatingWindowManagerHandle

Defined in: components/PanelOverlay.tsx:1010

Imperative handle returned by usePanelFloatingWindowManager.

See

usePanelFloatingWindowManager

Methods

close()

close(id): void;

Defined in: components/PanelOverlay.tsx:1014

Close a named window by ID. No-op if the window is not open.

Parameters

Parameter	Type
id	string

Returns

void

closeAll()

closeAll(): void;

Defined in: components/PanelOverlay.tsx:1016

Close all managed windows.

Returns

void

isOpen()

isOpen(id): boolean;

Defined in: components/PanelOverlay.tsx:1018

Returns true if the named window is currently open.

Parameters

Parameter	Type
id	string

Returns

boolean

open()

open(id, config): void;

Defined in: components/PanelOverlay.tsx:1012

Spawn or reconfigure a named window. Safe to call with an already-open ID to update config.

Parameters

Parameter	Type
id	string
config	ManagedWindowConfig

Returns

void

Properties

Property	Type	Description	Defined in
openIds	string[]	IDs of all currently open managed windows. Changes to this array trigger re-renders.	components/PanelOverlay.tsx:1020

---

PanelFloatingWindowProps

Defined in: components/PanelOverlay.tsx:667

Props for <PanelFloatingWindow>.

Methods

onClose()

onClose(): void;

Defined in: components/PanelOverlay.tsx:677

Called when the user clicks the × button. Set open to false in response.

Returns

void

Properties

Property	Type	Description	Defined in
children?	ReactNode	-	components/PanelOverlay.tsx:684
defaultAnchor	FloatAnchor	Corner of the panel to dock to on first render. See FloatAnchor	components/PanelOverlay.tsx:679
defaultHeight	number	Initial height in pixels.	components/PanelOverlay.tsx:683
defaultWidth	number	Initial width in pixels.	components/PanelOverlay.tsx:681
icon?	ReactNode	Optional icon shown to the left of the title in the header.	components/PanelOverlay.tsx:673
id	string	Unique identifier within the panel overlay. Used for z-order and stack tracking.	components/PanelOverlay.tsx:669
open	boolean	Whether the window is mounted and visible. Set to false to close/unmount it.	components/PanelOverlay.tsx:675
title	string	Text shown in the window's header bar.	components/PanelOverlay.tsx:671

---

PanelInfo

Defined in: components/WindowManagerContext.tsx:114

Stores active runtime properties and status metadata for individual panel instances.

Properties

Property	Type	Description	Defined in
component	string	String matching the component registration ID in the PanelRegistry.	components/WindowManagerContext.tsx:120
dedupeKey?	string	Optional dedup key. If another open panel of the same component already has this exact key, openPanel focuses that existing panel instead of creating a new one — see WindowActions.openPanel's dedupeKey option and WindowActions.findPanelId.	components/WindowManagerContext.tsx:146
dirty?	boolean	True if the panel contains unsaved user edits.	components/WindowManagerContext.tsx:130
dirtyOptions?	DirtyStateOptions	Custom options applied to the automatic unsaved changes modal.	components/WindowManagerContext.tsx:132
id	string	Unique panel identifier.	components/WindowManagerContext.tsx:116
lastFloatingRect?	{ anchor?: FloatAnchor | null; height: number; width: number; x: number; y: number; }	Saved position boundaries used when returning the panel to a floating state.	components/WindowManagerContext.tsx:126
lastFloatingRect.anchor?	FloatAnchor | null	-	components/WindowManagerContext.tsx:126
lastFloatingRect.height	number	-	components/WindowManagerContext.tsx:126
lastFloatingRect.width	number	-	components/WindowManagerContext.tsx:126
lastFloatingRect.x	number	-	components/WindowManagerContext.tsx:126
lastFloatingRect.y	number	-	components/WindowManagerContext.tsx:126
lastLeafId?	string	The leaf group ID this panel was docked in prior to being floated.	components/WindowManagerContext.tsx:128
previousState?	"docked" | "floating"	Last state held before panel was minimized.	components/WindowManagerContext.tsx:124
props?	Record<string, unknown>	Custom per-instance data passed via openPanel(id, component, { props }). Unconstrained — any value is accepted, but only a value that passes isSerializable is actually included in WindowActions.saveLayout's output. See PanelInfo.serializable.	components/WindowManagerContext.tsx:136
serializable	boolean	Whether this panel's current props can round-trip through saveLayout()/loadLayout(). Computed automatically — true when no props were passed, or when they were and passed isSerializable. A panel with serializable: false still renders and works normally; it's simply excluded from the next saveLayout() call (and pruned from gridRoot/ floating/minimized in that saved snapshot) rather than corrupting or throwing.	components/WindowManagerContext.tsx:142
state	"docked" | "floating" | "minimized"	Current workspace placement mode.	components/WindowManagerContext.tsx:122
title	| string | ContextMenuPredefinedMessage	Plain text label or localizable message descriptor.	components/WindowManagerContext.tsx:118

---

PanelInstance

Defined in: components/PanelProviderContext.tsx:49

Represents a rendered instance of a panel or modal in the layout.

Properties

Property	Type	Description	Defined in
Component	ComponentType<any>	React Component to mount inside the panel.	components/PanelProviderContext.tsx:53
containerType	"left-panel" | "right-panel" | "modal"	The target rendering layout zone.	components/PanelProviderContext.tsx:57
dirty?	boolean	True if the form container has unsaved user edits.	components/PanelProviderContext.tsx:61
dirtyOptions?	DirtyStateOptions	Custom warning options applied to the automatic unsaved changes modal.	components/PanelProviderContext.tsx:63
id	string	Unique ID generated for this instance.	components/PanelProviderContext.tsx:51
options	SidePanelOptions | ModalOptions	Configuration metadata settings.	components/PanelProviderContext.tsx:59
props	Record<string, any>	Property props passed to the Component.	components/PanelProviderContext.tsx:55

---

PanelOverlayRootProps

Defined in: components/PanelOverlay.tsx:101

Props for <PanelOverlayRoot>.

Properties

Property	Type	Defined in
children	ReactNode	components/PanelOverlay.tsx:102
className?	string	components/PanelOverlay.tsx:103
style?	CSSProperties	components/PanelOverlay.tsx:104

---

PanelRegistryEntry

Defined in: components/PanelRegistry.ts:7

Represents a registered component configuration template inside the panel catalog registry.

Properties

Property	Type	Description	Defined in
Component	ComponentType<any>	The React component type registered.	components/PanelRegistry.ts:9
defaultOptions?	{ canClose?: boolean; canDrag?: boolean; canMinimize?: boolean; defaultAnchor?: FloatAnchor; disableLivePreview?: boolean; favoritePosition?: { height: string | number; width: string | number; x: string | number; y: string | number; }; icon?: ReactNode; initialTarget?: "docked" | "floating" | "tabbed"; renderHeaderActions?: (panelId) => ReactNode; title?: | string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; }; }	Default metadata settings configuration applied on instantiation.	components/PanelRegistry.ts:11
defaultOptions.canClose?	boolean	Enables/disables closing actions for the tab/window.	components/PanelRegistry.ts:25
defaultOptions.canDrag?	boolean	Enables/disables window drag interactions.	components/PanelRegistry.ts:21
defaultOptions.canMinimize?	boolean	Enables/disables minimizing of the panel instance.	components/PanelRegistry.ts:23
defaultOptions.defaultAnchor?	FloatAnchor	Corner of the workspace to anchor newly-opened floating windows to.	components/PanelRegistry.ts:27
defaultOptions.disableLivePreview?	boolean	Disables live WebGL rendering canvas thumbnails inside the taskbar hover popup previews.	components/PanelRegistry.ts:29
defaultOptions.favoritePosition?	{ height: string | number; width: string | number; x: string | number; y: string | number; }	Custom default bounds applied when the container is floated.	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.height	string | number	-	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.width	string | number	-	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.x	string | number	-	components/PanelRegistry.ts:19
defaultOptions.favoritePosition.y	string | number	-	components/PanelRegistry.ts:19
defaultOptions.icon?	ReactNode	Icon placed next to title tags.	components/PanelRegistry.ts:15
defaultOptions.initialTarget?	"docked" | "floating" | "tabbed"	Initial mounting state inside the desktop layout grid.	components/PanelRegistry.ts:17
defaultOptions.renderHeaderActions?	(panelId) => ReactNode	Custom header actions renderer, placing custom components in the window/tab titlebar.	components/PanelRegistry.ts:31
defaultOptions.title?	| string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; }	Tab and window headers text — plain string or i18n descriptor.	components/PanelRegistry.ts:13

---

PanelSidebarSection

Defined in: components/PanelContributionContext.tsx:16

A single named, labeled slot of content a panel contributes to the app's Sidebar while active.

Properties

Property	Type	Defined in
content	ReactNode	components/PanelContributionContext.tsx:20
icon?	ReactNode	components/PanelContributionContext.tsx:19
id	string	components/PanelContributionContext.tsx:17
label	string	components/PanelContributionContext.tsx:18

---

PanelState

Defined in: components/PanelProviderContext.tsx:67

Stores the active layout structures for floating overlays.

Properties

Property	Type	Description	Defined in
leftPanel	PanelInstance | null	The currently open left drawer panel instance, or null.	components/PanelProviderContext.tsx:69
modals	PanelInstance[]	Stack containing all active floating modal instances.	components/PanelProviderContext.tsx:73
rightPanel	PanelInstance | null	The currently open right drawer panel instance, or null.	components/PanelProviderContext.tsx:71

---

PanelToolbarProps

Defined in: components/PanelOverlay.tsx:291

Props for <PanelToolbar>.

Properties

Property	Type	Description	Defined in
buttonSize?	number	Icon size in pixels for all buttons in this toolbar. Falls back to CSS default when unset.	components/PanelOverlay.tsx:299
buttonVariant?	ButtonVariant	Default button style inherited by ToolbarButton and ToolbarToggle children. Default 'ghost'	components/PanelOverlay.tsx:297
children?	ReactNode	-	components/PanelOverlay.tsx:302
className?	string	-	components/PanelOverlay.tsx:301
position	ToolbarPosition	Edge of the panel overlay to attach to. See ToolbarPosition	components/PanelOverlay.tsx:293
style?	CSSProperties	-	components/PanelOverlay.tsx:300
variant?	ToolbarVariant	Background style of the toolbar strip. Default 'transparent'	components/PanelOverlay.tsx:295

---

PointerDragConfig

Defined in: components/dragResize.ts:14

Shared pointer-drag-resize primitives.

Extracted from four previously-independent implementations (the workspace grid split resizer, the sidebar drawer resizer, and two floating-window resize-handle implementations) that had quietly drifted apart in exactly the kind of detail (an inline-style property present in one and missing in the other) that once caused a real, user-visible bug. This file is the single place that mechanic now lives, so it can't drift again.

Type Parameters

Type Parameter
TStart

Properties

Property	Type	Description	Defined in
activeClasses?	{ classes: string[]; el: HTMLElement; }[]	Classes toggled on the given elements for the duration of the drag.	components/dragResize.ts:28
captureStart	() => TStart	Snapshot whatever state the caller needs at drag start (sizes, positions, ...).	components/dragResize.ts:22
element	HTMLElement	The element to capture the pointer on — normally the handle the user grabbed.	components/dragResize.ts:16
onEnd?	(start) => void	Called once when the drag ends (pointerup or pointercancel).	components/dragResize.ts:26
onMove	(dx, dy, start) => void	Called on every pointermove with the delta from the drag's start position.	components/dragResize.ts:24
pointerId	number	-	components/dragResize.ts:17
startClientX	number	The pointerdown event's clientX/clientY, used as the delta origin.	components/dragResize.ts:19
startClientY	number	-	components/dragResize.ts:20

---

ResizeConstraints

Defined in: components/dragResize.ts:71

Properties

Property	Type	Description	Defined in
maxH?	number	Upper bound on height — only applies to southward growth (dir includes 's').	components/dragResize.ts:77
maxW?	number	Upper bound on width — only applies to eastward growth (dir includes 'e').	components/dragResize.ts:75
minH	number	-	components/dragResize.ts:73
minW	number	-	components/dragResize.ts:72
minX?	number	Lower bound on the resulting x — only applies to westward growth (dir includes 'w').	components/dragResize.ts:79
minY?	number	Lower bound on the resulting y — only applies to northward growth (dir includes 'n').	components/dragResize.ts:81

---

ResizeRect

Defined in: components/dragResize.ts:64

Properties

Property	Type	Defined in
h	number	components/dragResize.ts:68
w	number	components/dragResize.ts:67
x	number	components/dragResize.ts:65
y	number	components/dragResize.ts:66

---

ResolvedToastOptions

Defined in: components/Toast.tsx:37

Fully-resolved options passed to ToastAdapter.show() and ToastAdapter.update(). All optional ToastOptions fields are resolved against the container defaults.

Properties

Property	Type	Defined in
closable	boolean	components/Toast.tsx:41
content?	ReactNode	components/Toast.tsx:43
duration	number	components/Toast.tsx:40
icon?	ReactNode	components/Toast.tsx:42
id	string	components/Toast.tsx:38
onClose?	() => void	components/Toast.tsx:44
type	ToastType	components/Toast.tsx:39

---

SearchResult

Defined in: components/PanelOverlay.tsx:484

A single result item returned by ToolbarSearchInputProps.onSearch.

Properties

Property	Type	Description	Defined in
description?	string	Optional secondary text shown below the label in the dropdown.	components/PanelOverlay.tsx:490
group?	string	Optional group header used to bucket results visually.	components/PanelOverlay.tsx:492
icon?	ReactNode	Optional icon shown to the left of the label.	components/PanelOverlay.tsx:494
id	string	Unique identifier for this result — passed to onSelect.	components/PanelOverlay.tsx:486
label	string	Primary display text.	components/PanelOverlay.tsx:488

---

SerializedLayout

Defined in: components/WindowManagerContext.tsx:557

The on-disk shape produced by saveLayout() and accepted by loadLayout()/initialState.

Properties

Property	Type	Description	Defined in
floating	FloatingWindow[]	-	components/WindowManagerContext.tsx:561
gridRoot	LayoutNode	-	components/WindowManagerContext.tsx:560
minimized	{ component: string; id: string; title: | string | ContextMenuPredefinedMessage; }[]	-	components/WindowManagerContext.tsx:562
panels	Record<string, PanelInfo>	-	components/WindowManagerContext.tsx:563
version?	number	Schema version — absent on layouts saved before this field was introduced (treated as 0).	components/WindowManagerContext.tsx:559

---

ShowContextMenuOptions

Defined in: components/ContextMenu.tsx:50

Properties

Property	Type	Defined in
event?	| MouseEvent | MouseEvent<Element, MouseEvent> | TouchEvent<Element> | TouchEvent	components/ContextMenu.tsx:51
items	ContextMenuItem[]	components/ContextMenu.tsx:54
x?	number	components/ContextMenu.tsx:52
y?	number	components/ContextMenu.tsx:53

---

SidebarContextValue

Defined in: components/Sidebar.tsx:181

Value provided by useSidebar(). Available to any component inside the <Sidebar> React tree, including panels rendered via {children}.

Properties

Property	Type	Defined in
closeDrawer	() => void	components/Sidebar.tsx:183
getActiveTab	() => string | null	components/Sidebar.tsx:184
openTab	(tabId) => void	components/Sidebar.tsx:182

---

SidebarHandle

Defined in: components/Sidebar.tsx:164

Imperative handle exposed by <Sidebar ref={...}>.

Properties

Property	Type	Defined in
closeDrawer	() => void	components/Sidebar.tsx:166
getActiveTab	() => string | null	components/Sidebar.tsx:167
getWidth	() => number	components/Sidebar.tsx:174
hide	() => void	components/Sidebar.tsx:169
hideStrip	() => void	components/Sidebar.tsx:172
openTab	(tabId) => void	components/Sidebar.tsx:165
setWidth	(px) => void	components/Sidebar.tsx:173
show	() => void	components/Sidebar.tsx:168
showStrip	() => void	components/Sidebar.tsx:171
toggle	() => void	components/Sidebar.tsx:170

---

SidebarHeaderActionButton

Defined in: components/Sidebar.tsx:60

Simple case for SidebarProps.headerAction/footerAction: the library renders a default-styled icon button (visually consistent with the regular tab buttons) and forwards the click.

Properties

Property	Type	Description	Defined in
disabled?	boolean	-	components/Sidebar.tsx:67
icon	ReactNode	-	components/Sidebar.tsx:63
id?	string	Only needed when used inside a SidebarRailEntry[] array, for the React key.	components/Sidebar.tsx:62
label	string	Tooltip and aria-label — same convention as SidebarTab.label.	components/Sidebar.tsx:65
onClick	() => void	-	components/Sidebar.tsx:66

---

SidebarHeaderActionCustom

Defined in: components/Sidebar.tsx:76

Full-control case for SidebarProps.headerAction/footerAction: the consumer supplies their own markup (a Material UI IconButton, a Bootstrap Button, a Tailwind-styled <button>, or anything else) wholesale. The library renders exactly what this returns, unwrapped, so the consumer's own hover/active/focus/ripple behavior and click handling are untouched.

Properties

Property	Type	Description	Defined in
id?	string	Only needed when used inside a SidebarRailEntry[] array, for the React key.	components/Sidebar.tsx:78
render	() => ReactNode	-	components/Sidebar.tsx:79

---

SidebarProps

Defined in: components/Sidebar.tsx:111

Properties

Property	Type	Description	Defined in
activeTabId?	string | null	Controlled active tab id. Omit to use internal state.	components/Sidebar.tsx:141
children?	ReactNode	Main workspace content rendered alongside the sidebar.	components/Sidebar.tsx:158
defaultWidth?	number	Initial drawer width in pixels. Default: 280	components/Sidebar.tsx:133
footerAction?	SidebarRailEntry | SidebarRailEntry[]	Mirror of headerAction, pinned to the bottom of the tab strip via its own .rdd-sidebar-footer-area — e.g. a "Settings" tab that should always sit at the bottom regardless of tab count. Override --rdd-sidebar-footer-area-padding-top/ --rdd-sidebar-footer-area-padding-bottom (both default 8px) to control its spacing.	components/Sidebar.tsx:131
headerAction?	SidebarRailEntry | SidebarRailEntry[]	One or more non-toggling action buttons and/or real tabs shown above the tabs, in their own .rdd-sidebar-header-area — independent of the tabs' own inter-item gap. Pass a single { icon, label, onClick }/{ render } object (the common case), or an array mixing action buttons, custom renders, and SidebarTab entries — a tab entry here behaves exactly like a main-list tab (mounts, activates, closes through the same lifecycle). Override --rdd-sidebar-header-area-padding-top/--rdd-sidebar-header-area-padding-bottom (both default 8px) to control its spacing/effective height.	components/Sidebar.tsx:124
maxWidth?	number	Maximum drawer width in pixels during drag-resize. Default: 600	components/Sidebar.tsx:137
minWidth?	number	Minimum drawer width in pixels during drag-resize. Default: 150	components/Sidebar.tsx:135
onActiveTabChange?	(tabId) => void	Called when the active tab changes.	components/Sidebar.tsx:143
onStripVisibilityChange?	(visible) => void	Called when showStrip/hideStrip is invoked on the imperative handle.	components/Sidebar.tsx:151
onVisibilityChange?	(visible) => void	Called when show/hide/toggle is invoked on the imperative handle.	components/Sidebar.tsx:147
onWidthChange?	(px) => void	Called during drag resize and on setWidth() with the new pixel width.	components/Sidebar.tsx:139
position?	"left" | "right"	Which side the activity bar and drawer appear on. Default: 'right'	components/Sidebar.tsx:113
showCloseButton?	boolean	Show an "X" close button in the expanded drawer's header, as an additional way to collapse the sidebar (equivalent to clicking the active tab's own icon again). Opt-in. Default: false	components/Sidebar.tsx:156
stripVisible?	boolean	Collapse only the activity bar strip, leaving the drawer unaffected. Default: true	components/Sidebar.tsx:149
tabs	SidebarTab[]	-	components/Sidebar.tsx:114
visible?	boolean	Collapse the entire sidebar (strip + drawer). Default: true	components/Sidebar.tsx:145

---

SidebarTab

Defined in: components/Sidebar.tsx:30

Per-tab configuration supplied by the consuming application.

Properties

Property	Type	Description	Defined in
eagerMount?	boolean	Mount immediately when the Sidebar first renders, not on first user click. Implies preserveState: true. Default: false	components/Sidebar.tsx:39
icon	ReactNode	-	components/Sidebar.tsx:33
id	string	-	components/Sidebar.tsx:31
label	string	-	components/Sidebar.tsx:32
preserveState?	boolean	Keep the component alive behind display: none when closed instead of unmounting it. Use for panels with expensive local state. Default: false	components/Sidebar.tsx:45
renderContent	(tabId, onClose, onOpen) => ReactNode	Called to obtain the drawer content for this tab.	components/Sidebar.tsx:52

---

SidebarTabContextValue

Defined in: components/Sidebar.tsx:191

Value provided by useSidebarTab(). Available only to components rendered inside a sidebar tab's renderContent tree.

Properties

Property	Type	Defined in
onClose	() => void	components/Sidebar.tsx:194
onOpen	() => void	components/Sidebar.tsx:193
openTab	(tabId) => void	components/Sidebar.tsx:195
tabId	string	components/Sidebar.tsx:192

---

SidePanelOptions

Defined in: components/PanelProviderContext.tsx:25

Configuration options applied when opening a SidePanel.

Properties

Property	Type	Description	Defined in
icon?	ReactNode	Icon displayed next to the panel title.	components/PanelProviderContext.tsx:29
title?	PanelTitle	Display title for the side-panel header.	components/PanelProviderContext.tsx:27
width?	string | number	Specific CSS width (e.g. 300, '40%') for the panel container.	components/PanelProviderContext.tsx:31

---

SidePanelRendererProps

Defined in: components/SidePanelRenderer.tsx:155

Properties

Property	Type	Description	Defined in
defaultWidth?	string | number	Default panel width applied when openLeftPanel/openRightPanel do not specify one. Accepts a number (treated as px) or any CSS width string (e.g. '40vw'). Falls back to 400px if omitted.	components/SidePanelRenderer.tsx:161

---

StyleClasses

Defined in: components/WindowManagerContext.tsx:494

Represents custom CSS classes injected into layout parts.

Properties

Property	Type	Defined in
modalBodyClass?	string	components/WindowManagerContext.tsx:496
modalClass?	string	components/WindowManagerContext.tsx:495
sidePanelBodyClass?	string	components/WindowManagerContext.tsx:498
sidePanelClass?	string	components/WindowManagerContext.tsx:497
windowBodyClass?	string	components/WindowManagerContext.tsx:500
windowClass?	string	components/WindowManagerContext.tsx:499

---

ToastAdapter

Defined in: components/Toast.tsx:95

Strategy interface for replacing the built-in toast renderer with an external library. Pass an instance via <ToastContainer adapter={...} /> to redirect all toast.* calls without changing any call sites in your application.

See

ToastContainerProps.adapter

Methods

dismiss()

dismiss(id?): void;

Defined in: components/Toast.tsx:101

Called to dismiss one notification (id provided) or all active notifications (no id).

Parameters

Parameter	Type
id?	string

Returns

void

show()

show(
   id, 
   message, 
   options): void;

Defined in: components/Toast.tsx:97

Called when a new notification is requested.

Parameters

Parameter	Type
id	string
message	ReactNode
options	ResolvedToastOptions

Returns

void

update()

update(
   id, 
   message, 
   options): void;

Defined in: components/Toast.tsx:99

Called when an existing notification is updated (e.g. after toast.promise() resolves).

Parameters

Parameter	Type
id	string
message	ReactNode
options	Partial<ResolvedToastOptions>

Returns

void

Properties

Property	Type	Description	Defined in
Container	| ComponentType<{ position: ToastPosition; }> | null	null means the adapter manages its own DOM and <ToastContainer> renders nothing. A component causes <ToastContainer> to portal-render it with a position prop.	components/Toast.tsx:106

---

ToastContainerProps

Defined in: components/Toast.tsx:52

Props for <ToastContainer>. Mount one instance at your app root alongside ModalStackRenderer.

Example

<ToastContainer position="top-right" progressBar />

Properties

Property	Type	Description	Defined in
adapter?	ToastAdapter	Delegate all toast.* calls to a custom renderer (Ant Design, MUI, Sonner, etc.).	components/Toast.tsx:72
animation?	"none" | "slide" | "fade"	Entry/exit animation style. Default 'slide'	components/Toast.tsx:64
defaultClosable?	boolean	Show the × close button on all notifications unless overridden per-toast. Default true	components/Toast.tsx:60
defaultDuration?	number	Default auto-dismiss delay in ms. 0 = all notifications sticky. Default 5000	components/Toast.tsx:58
maxVisible?	number	Maximum number of notifications shown simultaneously. Extras are queued. Default 3	components/Toast.tsx:56
newestOnTop?	boolean	When true, newest notification appears at the top of the stack. Default false	components/Toast.tsx:66
pauseOnHover?	boolean	Pause the auto-dismiss timer while the cursor is over a notification. Default true	components/Toast.tsx:62
position?	ToastPosition	Where notifications appear in the viewport. Default 'top-right'	components/Toast.tsx:54
progressBar?	boolean	Show a countdown progress bar at the bottom of each notification. Default false	components/Toast.tsx:68
width?	number	Width of each notification card in pixels. Default 320	components/Toast.tsx:70

---

ToastFunction()

Defined in: components/Toast.tsx:157

Type of the toast singleton. Callable directly or via named shorthand methods. Import this type to annotate variables or props that accept the toast object.

Example

function notify(fn: ToastFunction) { fn.success('Done!'); }

ToastFunction(msg, opts?): string;

Defined in: components/Toast.tsx:159

Show a notification. opts.type defaults to 'info'. Returns the notification ID.

Parameters

Parameter	Type
msg	ReactNode
opts?	ToastOptions

Returns

string

Properties

Property	Type	Description	Defined in
dismiss	(id?) => void	Dismiss a notification by ID, or all active notifications when called with no argument.	components/Toast.tsx:169
error	(msg, opts?) => string	Show an error notification. Returns the notification ID.	components/Toast.tsx:167
info	(msg, opts?) => string	Show an info notification. Returns the notification ID.	components/Toast.tsx:161
promise	<T>(promise, messages, opts?) => Promise<T>	Track a promise through pending → success/error states. Shows a sticky pending notification immediately, then transitions it on settlement.	components/Toast.tsx:175
success	(msg, opts?) => string	Show a success notification. Returns the notification ID.	components/Toast.tsx:163
warning	(msg, opts?) => string	Show a warning notification. Returns the notification ID.	components/Toast.tsx:165

---

ToastOptions

Defined in: components/Toast.tsx:16

Per-notification options passed to toast(), toast.info(), etc. All fields are optional and fall back to <ToastContainer> defaults when unset.

Properties

Property	Type	Description	Defined in
closable?	boolean	Show the × close button on this notification. Default from container	components/Toast.tsx:24
content?	ReactNode	Replace the string message with arbitrary JSX.	components/Toast.tsx:28
duration?	number	Auto-dismiss delay in ms. 0 = sticky (never auto-dismisses). Default from container	components/Toast.tsx:20
icon?	ReactNode	Override the built-in type icon with arbitrary content.	components/Toast.tsx:26
id?	string	Explicit ID for dedup — calling toast.* with the same id updates the existing card in-place.	components/Toast.tsx:22
onClose?	() => void	Called when the notification is dismissed by timer, close button, or toast.dismiss().	components/Toast.tsx:30
type?	ToastType	Visual type. Overridden by the toast.info/success/warning/error shorthands. Default 'info'	components/Toast.tsx:18

---

ToastPromiseMessages

Defined in: components/Toast.tsx:80

Message set for toast.promise(). Each field may be static content or a function that receives the resolved/rejected value and returns renderable content.

Type Parameters

Type Parameter	Description
T	The resolved value type of the tracked promise.

Properties

Property	Type	Description	Defined in
error	ReactNode | ((err) => ReactNode)	Shown on rejection. Pass a function to include the error reason.	components/Toast.tsx:86
pending	ReactNode	Shown while the promise is pending.	components/Toast.tsx:82
success	ReactNode | ((result) => ReactNode)	Shown on fulfillment. Pass a function to include the resolved value.	components/Toast.tsx:84

---

ToolbarActionItem

Defined in: components/Toolbar.tsx:19

A one-shot action button.

Properties

Property	Type	Defined in
disabled?	boolean	components/Toolbar.tsx:25
icon	ReactNode	components/Toolbar.tsx:23
id	string	components/Toolbar.tsx:21
label	string	components/Toolbar.tsx:22
onClick	() => void	components/Toolbar.tsx:24
type	"action"	components/Toolbar.tsx:20

---

ToolbarButtonProps

Defined in: components/PanelOverlay.tsx:389

Props for <ToolbarButton>.

Methods

onClick()

onClick(): void;

Defined in: components/PanelOverlay.tsx:393

Click handler.

Returns

void

Properties

Property	Type	Description	Defined in
disabled?	boolean	-	components/PanelOverlay.tsx:394
icon	ReactNode	Button icon — typically a small SVG component.	components/PanelOverlay.tsx:391
title?	string	Tooltip text and accessible aria-label.	components/PanelOverlay.tsx:396
variant?	ButtonVariant	Visual style override. Falls back to the parent PanelToolbar's buttonVariant.	components/PanelOverlay.tsx:398

---

ToolbarContextValue

Defined in: components/ToolbarContext.tsx:9

Properties

Property	Type	Description	Defined in
getActiveInGroup	(group) => string | null	Returns the active item id in a radio group, or null if none.	components/ToolbarContext.tsx:11
isModifierActive	(id) => boolean	Returns whether a toggle modifier is currently active.	components/ToolbarContext.tsx:15
setActiveInGroup	(group, id) => void	Set the active item in a radio group (pass null to deselect all).	components/ToolbarContext.tsx:13
setModifierActive	(id, active) => void	Explicitly set a toggle modifier's active state.	components/ToolbarContext.tsx:17
toggleModifier	(id) => void	Flip a toggle modifier between active and inactive.	components/ToolbarContext.tsx:19

---

ToolbarGroupItem

Defined in: components/Toolbar.tsx:108

A collapsed tool-family button that opens a flyout panel listing all sub-tools. Only one sub-tool may be active at a time (radio semantics). The parent button's icon morphs to show the currently active sub-tool.

Supports both uncontrolled mode (omit activeItemId — state lives in ToolbarContext) and controlled mode (provide activeItemId — the caller is the single source of truth and must update the prop in response to onActiveItemChange).

Properties

Property	Type	Description	Defined in
activeItemId?	string | null	Controlled active sub-item id. When provided (even as null), the component reads this prop instead of ToolbarContext and fires onActiveItemChange on click instead of updating context. Omit (undefined) for uncontrolled behaviour.	components/Toolbar.tsx:124
defaultIcon	ReactNode	Icon shown when no sub-item is active.	components/Toolbar.tsx:115
disabled?	boolean	-	components/Toolbar.tsx:117
id	string	Serves as both the button ID and the radio group key in ToolbarContext.	components/Toolbar.tsx:111
items	ToolbarGroupEntry[]	-	components/Toolbar.tsx:116
label	string	Tooltip / aria-label shown when no sub-item is active.	components/Toolbar.tsx:113
onActiveItemChange?	(id) => void	Called when the user selects a sub-item in controlled mode. The toolbar does not update itself — the caller must update activeItemId.	components/Toolbar.tsx:129
type	"group"	-	components/Toolbar.tsx:109

---

ToolbarGroupSubItem

Defined in: components/Toolbar.tsx:84

A single selectable sub-tool inside a group flyout. All sub-items in the same ToolbarGroupItem share one radio group keyed by the parent ToolbarGroupItem's id.

Properties

Property	Type	Description	Defined in
disabled?	boolean	-	components/Toolbar.tsx:90
icon	ReactNode	-	components/Toolbar.tsx:87
id	string	-	components/Toolbar.tsx:85
label	string	-	components/Toolbar.tsx:86
onActivate?	(id) => void	Called when this sub-item is selected.	components/Toolbar.tsx:92
shortcut?	string	Keyboard shortcut displayed in the flyout panel.	components/Toolbar.tsx:89

---

ToolbarHandle

Defined in: components/Toolbar.tsx:156

Methods

hide()

hide(): void;

Defined in: components/Toolbar.tsx:158

Returns

void

show()

show(): void;

Defined in: components/Toolbar.tsx:157

Returns

void

toggle()

toggle(): void;

Defined in: components/Toolbar.tsx:159

Returns

void

---

ToolbarProps

Defined in: components/Toolbar.tsx:143

Properties

Property	Type	Description	Defined in
className?	string	-	components/Toolbar.tsx:152
items	ToolbarItem[]	Ordered list of items to render.	components/Toolbar.tsx:147
onVisibilityChange?	(visible) => void	Called when show/hide/toggle is invoked on the imperative handle.	components/Toolbar.tsx:151
position?	"left" | "top" | "right" | "bottom"	Side the strip is attached to. Controls strip orientation. Default: 'left'	components/Toolbar.tsx:145
style?	CSSProperties	-	components/Toolbar.tsx:153
visible?	boolean	Collapse the strip to zero width/height. State is preserved — no unmount.	components/Toolbar.tsx:149

---

ToolbarRadioItem

Defined in: components/Toolbar.tsx:29

A mutually-exclusive radio button within a named group.

Properties

Property	Type	Description	Defined in
disabled?	boolean	-	components/Toolbar.tsx:39
group	string	-	components/Toolbar.tsx:32
icon	ReactNode	-	components/Toolbar.tsx:34
id	string	-	components/Toolbar.tsx:31
label	string	-	components/Toolbar.tsx:33
onActivate?	(id) => void	Called when this item becomes active.	components/Toolbar.tsx:38
shortcut?	string	Keyboard shortcut hint — displayed in the group flyout; reserved for future custom tooltip.	components/Toolbar.tsx:36
type	"radio"	-	components/Toolbar.tsx:30

---

ToolbarSearchInputProps

Defined in: components/PanelOverlay.tsx:498

Props for <ToolbarSearchInput>.

Methods

onSearch()

onSearch(query, signal): 
  | SearchResult[]
| Promise<SearchResult[]>;

Defined in: components/PanelOverlay.tsx:506

Called with the current query and an AbortSignal each time the input changes (debounced). Return SearchResult[] directly for synchronous sources, or Promise<SearchResult[]> for async. Abort in-flight requests when the signal fires to prevent stale result races.

Parameters

Parameter	Type
query	string
signal	AbortSignal

Returns

| SearchResult[] | Promise<SearchResult[]>

onSelect()

onSelect(result): void;

Defined in: components/PanelOverlay.tsx:508

Called when the user selects a result from the dropdown.

Parameters

Parameter	Type
result	SearchResult

Returns

void

Properties

Property	Type	Description	Defined in
placeholder?	string	Placeholder text shown in the expanded input field. Default 'Search…'	components/PanelOverlay.tsx:500

---

ToolbarSeparator

Defined in: components/Toolbar.tsx:71

A visual divider between button groups.

Properties

Property	Type	Defined in
type	"separator"	components/Toolbar.tsx:72

---

ToolbarToggleItem

Defined in: components/Toolbar.tsx:52

An independent on/off toggle modifier (e.g. snap-to-grid).

Supports both uncontrolled mode (omit rdd-active — state lives in ToolbarContext, keyed by id) and controlled mode (provide rdd-active — the caller is the single source of truth and must update the prop in response to onToggle). Controlled mode is what lets independent instances of the same panel type report independent active state instead of colliding on a shared id.

Properties

Property	Type	Description	Defined in
active?	boolean	Controlled active state. When provided (even as false), the component reads this prop instead of ToolbarContext and does not update context on click. Omit (undefined) for uncontrolled behaviour.	components/Toolbar.tsx:64
disabled?	boolean	-	components/Toolbar.tsx:67
icon	ReactNode	-	components/Toolbar.tsx:56
id	string	-	components/Toolbar.tsx:54
label	string	-	components/Toolbar.tsx:55
onToggle?	(active) => void	Called after the toggle flips; receives the new active state.	components/Toolbar.tsx:66
shortcut?	string	Keyboard shortcut hint — reserved for future custom tooltip.	components/Toolbar.tsx:58
type	"toggle"	-	components/Toolbar.tsx:53

---

ToolbarToggleProps

Defined in: components/PanelOverlay.tsx:421

Props for <ToolbarToggle>.

Methods

onToggle()

onToggle(): void;

Defined in: components/PanelOverlay.tsx:427

Called when the button is clicked. Toggle active in response.

Returns

void

Properties

Property	Type	Description	Defined in
active	boolean	Whether the toggle is in the active/pressed state. Sets aria-pressed automatically.	components/PanelOverlay.tsx:425
disabled?	boolean	-	components/PanelOverlay.tsx:428
icon	ReactNode	Button icon — typically a small SVG component.	components/PanelOverlay.tsx:423
title?	string	Tooltip text and accessible aria-label.	components/PanelOverlay.tsx:430
variant?	ButtonVariant	Visual style override. Falls back to the parent PanelToolbar's buttonVariant.	components/PanelOverlay.tsx:432

---

UsePanelFloatingWindowReturn

Defined in: components/PanelOverlay.tsx:978

Return type of usePanelFloatingWindow.

See

usePanelFloatingWindow

Methods

close()

close(): void;

Defined in: components/PanelOverlay.tsx:984

Close the floating window.

Returns

void

open()

open(): void;

Defined in: components/PanelOverlay.tsx:982

Open the floating window.

Returns

void

Properties

Property	Type	Description	Defined in
isOpen	boolean	Whether the floating window is currently open.	components/PanelOverlay.tsx:980

---

WindowManagerProps

Defined in: components/WindowManager.tsx:817

Props for <WindowManager>.

Properties

Property	Type	Description	Defined in
animations?	boolean	Enables the library's own transitions/animations (tab hover, dock preview, etc.). Never affects the consumer's own page. Default true	components/WindowManager.tsx:833
contextMenuAdapter?	ContextMenuAdapter	Custom context menu renderer. Defaults to the built-in DefaultContextMenuAdapter.	components/WindowManager.tsx:831
defaultPanelIcon?	ReactNode	Fallback icon shown in panel tabs when no panel-specific icon is provided.	components/WindowManager.tsx:821
skin?	string	Built-in skin name or a custom skin key registered via CSS. Default 'vscode'	components/WindowManager.tsx:819
taskbarVisibility?	TaskbarVisibility	Controls taskbar visibility. - 'always' — permanent bar at the bottom (default) - 'compact' — only visible when minimized panels exist - 'autohide' — overlay bar with 8 px peek strip Default 'always'	components/WindowManager.tsx:829

---

WindowManagerProviderProps

Defined in: components/WindowManagerContext.tsx:619

Props for <DockableDesktopProvider> and <WindowManagerProvider>. Also exported as DockableDesktopProviderProps for consumers who use the composite provider.

See

DockableDesktopProviderProps

Extended by

• DockableDesktopProviderProps

Properties

Property	Type	Description	Defined in
children	ReactNode	-	components/WindowManagerContext.tsx:620
client?	WorkspaceClient<Record<string, unknown>>	WorkspaceClient instance created outside the React tree. When provided, its panel registry and config take precedence over the individual props below.	components/WindowManagerContext.tsx:623
dir?	"rtl" | "ltr"	Layout direction. 'rtl' mirrors all controls, tab order, and drop zones. Can also be changed at runtime via WorkspaceClient.setDirection(). Default 'ltr'	components/WindowManagerContext.tsx:632
formatMessage?	MessageFormatter	Custom i18n formatter. Receives a { id, defaultMessage } descriptor and returns the translated string. When omitted, defaultMessage is used as-is.	components/WindowManagerContext.tsx:626
modalBodyClass?	string	CSS class applied to the inner content area of every modal overlay.	components/WindowManagerContext.tsx:636
modalClass?	string	CSS class applied to the outer wrapper element of every modal overlay.	components/WindowManagerContext.tsx:634
predefinedMessages?	Record<string, ContextMenuPredefinedMessage>	Override the built-in predefined UI strings (confirm button labels, close tooltips, etc.). Merge with or replace defaultPredefinedMessages to localise system strings.	components/WindowManagerContext.tsx:629
sidePanelBodyClass?	string	CSS class applied to the inner content area of side-panel drawers.	components/WindowManagerContext.tsx:640
sidePanelClass?	string	CSS class applied to the outer wrapper of left/right side-panel drawers.	components/WindowManagerContext.tsx:638
windowBodyClass?	string	CSS class applied to the inner content area of floating panel windows.	components/WindowManagerContext.tsx:644
windowClass?	string	CSS class applied to the outer wrapper of floating panel windows.	components/WindowManagerContext.tsx:642
zIndexBase?	number	Starting z-index for floating windows and the library's own chrome overlays (context menu, toolbar flyout, modal stack, toast, workspace edge zones), all of which shift together via --rdd-z-base. Set this above/below a host app's own modal z-index range to control stacking against it. Default 1000	components/WindowManagerContext.tsx:651

---

WindowState

Defined in: components/WindowManagerContext.tsx:184

Global window manager state tree representing grid nodes, windows, and panels.

Properties

Property	Type	Description	Defined in
activePanelId	string | null	The ID of the active/focused panel.	components/WindowManagerContext.tsx:196
dir	"rtl" | "ltr"	Current layout direction ('ltr' or 'rtl')	components/WindowManagerContext.tsx:198
draggedPanelId	string | null	The ID of the panel tab currently being dragged.	components/WindowManagerContext.tsx:194
edgeSplitRatio	number	Split ratio for workspace outer-edge drops (0.1–0.9). Default 0.2.	components/WindowManagerContext.tsx:204
floating	FloatingWindow[]	Array of active floated windows.	components/WindowManagerContext.tsx:188
gridRoot	LayoutNode	Root branch node representing the grid.	components/WindowManagerContext.tsx:186
isRtl	boolean	Convenient boolean flag indicating RTL direction	components/WindowManagerContext.tsx:200
minimized	{ component: string; id: string; title: | string | ContextMenuPredefinedMessage; }[]	Array of minimized panels waiting in the taskbar dock.	components/WindowManagerContext.tsx:190
panels	Record<string, PanelInfo>	Map indexing panel metadata descriptors.	components/WindowManagerContext.tsx:192
splitRatio	number	Split ratio for panel cross-target drops (0.1–0.9). Default 0.5.	components/WindowManagerContext.tsx:202

---

WorkspaceClientConfig

Defined in: WorkspaceClient.ts:49

Configuration object accepted by the WorkspaceClient constructor.

Properties

Property	Type	Description	Defined in
defaultEdgeSplitRatio?	number	Fraction of the workspace the new panel takes when dropped on the workspace outer edge. Range 0.1–0.9. Default: 0.2.	WorkspaceClient.ts:75
defaultSplitRatio?	number	Fraction of the target panel the new panel takes when dropped on a panel's top/bottom/left/right cross target. Range 0.1–0.9. Default: 0.5.	WorkspaceClient.ts:70
dir?	"rtl" | "ltr"	Initial layout direction.	WorkspaceClient.ts:65
formatMessage?	MessageFormatter	Custom i18n formatter for all internal strings.	WorkspaceClient.ts:61
initialState?	string | null	Serialised layout produced by a previous saveLayout() call. Pass null or omit to start with an empty canvas.	WorkspaceClient.ts:59
panels?	Record<string, PanelDefinition>	Declarative panel catalog. Replaces imperative PanelRegistry.register() calls. Keys are the component identifiers used in openPanel() and serialised layouts.	WorkspaceClient.ts:54
predefinedMessages?	Record<string, ContextMenuPredefinedMessage>	Override any subset of the built-in predefined message catalog.	WorkspaceClient.ts:63
zIndexBase?	number	Starting z-index for floating windows and the library's own chrome overlays (context menu, toolbar flyout, modal stack, toast, workspace edge zones), all of which shift together via --rdd-z-base. Set this above/below a host app's own modal z-index range to control stacking against it. Default: 1000.	WorkspaceClient.ts:82

Type Aliases

ButtonVariant

type ButtonVariant = "ghost" | "soft" | "outlined" | "filled";

Defined in: components/PanelOverlay.tsx:288

Visual style applied to ToolbarButton and ToolbarToggle components.

---

ContextMenuItem

type ContextMenuItem = 
  | ContextMenuSimpleItem
  | ContextMenuSeparator
  | ContextMenuSubMenu;

Defined in: components/ContextMenu.tsx:46

---

ContextMenuLabel

type ContextMenuLabel = string | ContextMenuPredefinedMessage;

Defined in: components/contextMenuTypes.ts:8

---

DropPosition

type DropPosition = SplitDirection | "center";

Defined in: components/WindowManagerContext.tsx:36

All possible drop positions — cardinal directions plus center (same group).

---

FloatAnchor

type FloatAnchor = "top-left" | "top-right" | "bottom-left" | "bottom-right";

Defined in: components/WindowManagerContext.tsx:87

Corner of the workspace a floating window can be pinned to.

When anchor is set on a FloatingWindow, the window is positioned relative to that corner using CSS right/left + top/bottom and stacks with other windows sharing the same anchor (8 px gap, uncapped). Dragging a window away from its corner clears the anchor and returns it to free-float mode. The value is RTL-aware — 'top-left' always means the logical start corner regardless of document direction.

---

LayoutNode

type LayoutNode = LayoutGridNode | LayoutLeafNode;

Defined in: components/WindowManagerContext.tsx:75

Union type representing either a branch or a leaf node in the layout grid.

---

MenuItemAction

type MenuItemAction = () => void;

Defined in: components/contextMenuTypes.ts:9

Returns

void

---

MessageFormatter

type MessageFormatter = (msg) => string;

Defined in: components/WindowManagerContext.tsx:27

Function type interface responsible for resolving localizable messages to flat strings.

Parameters

Parameter	Type
msg	ContextMenuPredefinedMessage

Returns

string

---

PanelInstanceId

type PanelInstanceId = string;

Defined in: components/PanelProviderContext.tsx:7

Unique string identifier for panel/modal instances.

---

PanelTitle

type PanelTitle = string | PanelTitleDescriptor;

Defined in: components/PanelProviderContext.tsx:22

Union type representing either a plain string or a localizable title descriptor.

---

PredefinedMessageKey

type PredefinedMessageKey = keyof typeof defaultPredefinedMessages;

Defined in: components/predefinedMessages.ts:47

Union of every key in defaultPredefinedMessages.

Import this type in your i18n message tables to get a compile-time guarantee that all keys are present and no typos exist:

import type { PredefinedMessageKey } from 'react-dockable-desktop';

const myMessages: Record<PredefinedMessageKey, string> = { ... };

---

ResizeDir

type ResizeDir = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";

Defined in: components/dragResize.ts:62

---

SidebarHeaderAction

type SidebarHeaderAction = 
  | SidebarHeaderActionButton
  | SidebarHeaderActionCustom;

Defined in: components/Sidebar.tsx:88

A single, non-toggling action button shown above the tab strip (e.g. a hamburger menu). Unlike SidebarTab, it never affects activeTabId or the drawer — the library only renders it and forwards the click; what happens next (opening a side panel, a modal, anything else) is entirely up to the consumer.

---

SplitDirection

type SplitDirection = "left" | "right" | "top" | "bottom";

Defined in: components/WindowManagerContext.tsx:33

The four cardinal directions a panel can be docked relative to another.

---

SplitOrientation

type SplitOrientation = "horizontal" | "vertical";

Defined in: components/WindowManagerContext.tsx:30

Orientation modifier indicating split directions.

---

TaskbarVisibility

type TaskbarVisibility = "always" | "compact" | "autohide";

Defined in: components/WindowManager.tsx:814

Controls when the minimized-panel taskbar is visible.

---

ToastPosition

type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

Defined in: components/Toast.tsx:10

Corner position of the <ToastContainer> relative to the viewport.

---

ToastType

type ToastType = "info" | "success" | "warning" | "error";

Defined in: components/Toast.tsx:7

Visual type of a toast notification. Determines the icon and accent color.

---

ToolbarGroupEntry

type ToolbarGroupEntry = 
  | ToolbarGroupSubItem
  | {
  type: "separator";
};

Defined in: components/Toolbar.tsx:96

An entry inside a group flyout — either a sub-item or a separator.

---

ToolbarItem

type ToolbarItem = 
  | ToolbarActionItem
  | ToolbarRadioItem
  | ToolbarToggleItem
  | ToolbarGroupItem
  | ToolbarSeparator;

Defined in: components/Toolbar.tsx:132

---

ToolbarPosition

type ToolbarPosition = "top" | "bottom" | "left" | "right";

Defined in: components/PanelOverlay.tsx:22

Edge of a panel to which a PanelToolbar attaches.

---

ToolbarVariant

type ToolbarVariant = "transparent" | "frosted" | "solid";

Defined in: components/PanelOverlay.tsx:285

Background style of a PanelToolbar.

Variables

ConfirmationForm

const ConfirmationForm: React.FC<ConfirmationFormProps>;

Defined in: forms/ConfirmationForm.tsx:29

ConfirmationForm component renders a standard dialog content layout, allowing users to confirm actions or abort them. Exposes action callbacks.

---

ContextMenu

const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<ContextMenuHandle>>;

Defined in: components/ContextMenu.tsx:208

---

ContextMenuProvider

const ContextMenuProvider: React.FC<{
  adapter?: ContextMenuAdapter;
  children: React.ReactNode;
} & ContextMenuProps>;

Defined in: components/ContextMenu.tsx:466

---

DefaultContextMenuAdapter

const DefaultContextMenuAdapter: ContextMenuAdapter;

Defined in: components/ContextMenu.tsx:450

---

defaultPredefinedMessages

const defaultPredefinedMessages: {
  cancel: {
     defaultMessage: "Cancel";
     id: "dockable-desktop-cancel";
  };
  close: {
     defaultMessage: "Close";
     id: "dockable-desktop-close";
  };
  closeEmptyGroup: {
     defaultMessage: "Close empty split group";
     id: "dockable-desktop-closeEmptyGroup";
  };
  closePanel: {
     defaultMessage: "Close Panel";
     id: "dockable-desktop-closePanel";
  };
  closePanelTooltip: {
     defaultMessage: "Close panel";
     id: "dockable-desktop-closePanelTooltip";
  };
  closeTab: {
     defaultMessage: "Close Tab";
     id: "dockable-desktop-closeTab";
  };
  closeTooltip: {
     defaultMessage: "Close";
     id: "dockable-desktop-closeTooltip";
  };
  discardChanges: {
     defaultMessage: "Discard Changes";
     id: "dockable-desktop-discardChanges";
  };
  dockWindow: {
     defaultMessage: "Dock Window";
     id: "dockable-desktop-dockWindow";
  };
  floatWindow: {
     defaultMessage: "Float Window";
     id: "dockable-desktop-floatWindow";
  };
  maximize: {
     defaultMessage: "Maximize";
     id: "dockable-desktop-maximize";
  };
  maximizePanel: {
     defaultMessage: "Maximize Panel";
     id: "dockable-desktop-maximizePanel";
  };
  minimize: {
     defaultMessage: "Minimize";
     id: "dockable-desktop-minimize";
  };
  minimizePanel: {
     defaultMessage: "Minimize Panel";
     id: "dockable-desktop-minimizePanel";
  };
  no: {
     defaultMessage: "No";
     id: "dockable-desktop-no";
  };
  ok: {
     defaultMessage: "OK";
     id: "dockable-desktop-ok";
  };
  restorePanel: {
     defaultMessage: "Restore Panel";
     id: "dockable-desktop-restorePanel";
  };
  restoreSize: {
     defaultMessage: "Restore Size";
     id: "dockable-desktop-restoreSize";
  };
  unsavedChangesMessage: {
     defaultMessage: "\"{title}\" has unsaved changes. Do you want to discard your changes and close?";
     id: "dockable-desktop-unsavedChangesMessage";
  };
  unsavedChangesTitle: {
     defaultMessage: "Unsaved Changes";
     id: "dockable-desktop-unsavedChangesTitle";
  };
  yes: {
     defaultMessage: "Yes";
     id: "dockable-desktop-yes";
  };
};

Defined in: components/predefinedMessages.ts:13

Type Declaration

Name	Type	Default value	Defined in
cancel	{ defaultMessage: "Cancel"; id: "dockable-desktop-cancel"; }	-	components/predefinedMessages.ts:29
cancel.defaultMessage	"Cancel"	'Cancel'	components/predefinedMessages.ts:29
cancel.id	"dockable-desktop-cancel"	'dockable-desktop-cancel'	components/predefinedMessages.ts:29
close	{ defaultMessage: "Close"; id: "dockable-desktop-close"; }	-	components/predefinedMessages.ts:24
close.defaultMessage	"Close"	'Close'	components/predefinedMessages.ts:24
close.id	"dockable-desktop-close"	'dockable-desktop-close'	components/predefinedMessages.ts:24
closeEmptyGroup	{ defaultMessage: "Close empty split group"; id: "dockable-desktop-closeEmptyGroup"; }	-	components/predefinedMessages.ts:25
closeEmptyGroup.defaultMessage	"Close empty split group"	'Close empty split group'	components/predefinedMessages.ts:25
closeEmptyGroup.id	"dockable-desktop-closeEmptyGroup"	'dockable-desktop-closeEmptyGroup'	components/predefinedMessages.ts:25
closePanel	{ defaultMessage: "Close Panel"; id: "dockable-desktop-closePanel"; }	-	components/predefinedMessages.ts:19
closePanel.defaultMessage	"Close Panel"	'Close Panel'	components/predefinedMessages.ts:19
closePanel.id	"dockable-desktop-closePanel"	'dockable-desktop-closePanel'	components/predefinedMessages.ts:19
closePanelTooltip	{ defaultMessage: "Close panel"; id: "dockable-desktop-closePanelTooltip"; }	-	components/predefinedMessages.ts:33
closePanelTooltip.defaultMessage	"Close panel"	'Close panel'	components/predefinedMessages.ts:33
closePanelTooltip.id	"dockable-desktop-closePanelTooltip"	'dockable-desktop-closePanelTooltip'	components/predefinedMessages.ts:33
closeTab	{ defaultMessage: "Close Tab"; id: "dockable-desktop-closeTab"; }	-	components/predefinedMessages.ts:16
closeTab.defaultMessage	"Close Tab"	'Close Tab'	components/predefinedMessages.ts:16
closeTab.id	"dockable-desktop-closeTab"	'dockable-desktop-closeTab'	components/predefinedMessages.ts:16
closeTooltip	{ defaultMessage: "Close"; id: "dockable-desktop-closeTooltip"; }	-	components/predefinedMessages.ts:34
closeTooltip.defaultMessage	"Close"	'Close'	components/predefinedMessages.ts:34
closeTooltip.id	"dockable-desktop-closeTooltip"	'dockable-desktop-closeTooltip'	components/predefinedMessages.ts:34
discardChanges	{ defaultMessage: "Discard Changes"; id: "dockable-desktop-discardChanges"; }	-	components/predefinedMessages.ts:28
discardChanges.defaultMessage	"Discard Changes"	'Discard Changes'	components/predefinedMessages.ts:28
discardChanges.id	"dockable-desktop-discardChanges"	'dockable-desktop-discardChanges'	components/predefinedMessages.ts:28
dockWindow	{ defaultMessage: "Dock Window"; id: "dockable-desktop-dockWindow"; }	-	components/predefinedMessages.ts:20
dockWindow.defaultMessage	"Dock Window"	'Dock Window'	components/predefinedMessages.ts:20
dockWindow.id	"dockable-desktop-dockWindow"	'dockable-desktop-dockWindow'	components/predefinedMessages.ts:20
floatWindow	{ defaultMessage: "Float Window"; id: "dockable-desktop-floatWindow"; }	-	components/predefinedMessages.ts:14
floatWindow.defaultMessage	"Float Window"	'Float Window'	components/predefinedMessages.ts:14
floatWindow.id	"dockable-desktop-floatWindow"	'dockable-desktop-floatWindow'	components/predefinedMessages.ts:14
maximize	{ defaultMessage: "Maximize"; id: "dockable-desktop-maximize"; }	-	components/predefinedMessages.ts:22
maximize.defaultMessage	"Maximize"	'Maximize'	components/predefinedMessages.ts:22
maximize.id	"dockable-desktop-maximize"	'dockable-desktop-maximize'	components/predefinedMessages.ts:22
maximizePanel	{ defaultMessage: "Maximize Panel"; id: "dockable-desktop-maximizePanel"; }	-	components/predefinedMessages.ts:18
maximizePanel.defaultMessage	"Maximize Panel"	'Maximize Panel'	components/predefinedMessages.ts:18
maximizePanel.id	"dockable-desktop-maximizePanel"	'dockable-desktop-maximizePanel'	components/predefinedMessages.ts:18
minimize	{ defaultMessage: "Minimize"; id: "dockable-desktop-minimize"; }	-	components/predefinedMessages.ts:21
minimize.defaultMessage	"Minimize"	'Minimize'	components/predefinedMessages.ts:21
minimize.id	"dockable-desktop-minimize"	'dockable-desktop-minimize'	components/predefinedMessages.ts:21
minimizePanel	{ defaultMessage: "Minimize Panel"; id: "dockable-desktop-minimizePanel"; }	-	components/predefinedMessages.ts:15
minimizePanel.defaultMessage	"Minimize Panel"	'Minimize Panel'	components/predefinedMessages.ts:15
minimizePanel.id	"dockable-desktop-minimizePanel"	'dockable-desktop-minimizePanel'	components/predefinedMessages.ts:15
no	{ defaultMessage: "No"; id: "dockable-desktop-no"; }	-	components/predefinedMessages.ts:31
no.defaultMessage	"No"	'No'	components/predefinedMessages.ts:31
no.id	"dockable-desktop-no"	'dockable-desktop-no'	components/predefinedMessages.ts:31
ok	{ defaultMessage: "OK"; id: "dockable-desktop-ok"; }	-	components/predefinedMessages.ts:32
ok.defaultMessage	"OK"	'OK'	components/predefinedMessages.ts:32
ok.id	"dockable-desktop-ok"	'dockable-desktop-ok'	components/predefinedMessages.ts:32
restorePanel	{ defaultMessage: "Restore Panel"; id: "dockable-desktop-restorePanel"; }	-	components/predefinedMessages.ts:17
restorePanel.defaultMessage	"Restore Panel"	'Restore Panel'	components/predefinedMessages.ts:17
restorePanel.id	"dockable-desktop-restorePanel"	'dockable-desktop-restorePanel'	components/predefinedMessages.ts:17
restoreSize	{ defaultMessage: "Restore Size"; id: "dockable-desktop-restoreSize"; }	-	components/predefinedMessages.ts:23
restoreSize.defaultMessage	"Restore Size"	'Restore Size'	components/predefinedMessages.ts:23
restoreSize.id	"dockable-desktop-restoreSize"	'dockable-desktop-restoreSize'	components/predefinedMessages.ts:23
unsavedChangesMessage	{ defaultMessage: ""{title}" has unsaved changes. Do you want to discard your changes and close?"; id: "dockable-desktop-unsavedChangesMessage"; }	-	components/predefinedMessages.ts:27
unsavedChangesMessage.defaultMessage	""{title}" has unsaved changes. Do you want to discard your changes and close?"	'"{title}" has unsaved changes. Do you want to discard your changes and close?'	components/predefinedMessages.ts:27
unsavedChangesMessage.id	"dockable-desktop-unsavedChangesMessage"	'dockable-desktop-unsavedChangesMessage'	components/predefinedMessages.ts:27
unsavedChangesTitle	{ defaultMessage: "Unsaved Changes"; id: "dockable-desktop-unsavedChangesTitle"; }	-	components/predefinedMessages.ts:26
unsavedChangesTitle.defaultMessage	"Unsaved Changes"	'Unsaved Changes'	components/predefinedMessages.ts:26
unsavedChangesTitle.id	"dockable-desktop-unsavedChangesTitle"	'dockable-desktop-unsavedChangesTitle'	components/predefinedMessages.ts:26
yes	{ defaultMessage: "Yes"; id: "dockable-desktop-yes"; }	-	components/predefinedMessages.ts:30
yes.defaultMessage	"Yes"	'Yes'	components/predefinedMessages.ts:30
yes.id	"dockable-desktop-yes"	'dockable-desktop-yes'	components/predefinedMessages.ts:30

File

predefinedMessages.ts

Description

Provides the default localizable message catalogs and translation keys utilized by Dockable Desktop's context menus, headers, and tooltips.

Each value's id is the react-intl message ID that the consumer should define in their IntlProvider messages table. The defaultMessage is used as a fallback when no external formatter is provided.

Pass a partial or full override to <WindowManagerProvider predefinedMessages={…} /> to customise labels without replacing the whole table.

---

DockableDesktopProvider

const DockableDesktopProvider: React.FC<DockableDesktopProviderProps>;

Defined in: components/DockableDesktopProvider.tsx:47

Composite provider that wraps WindowManagerProvider, PanelProvider, ToolbarProvider, and PanelContributionProvider in the correct order, and mounts the workspace-level ContextMenuProvider so that showContextMenu() and useShowContextMenu() work from any component in the tree — including siblings of <WindowManager> such as <Sidebar>, <SidePanelRenderer>, and <ModalStackRenderer>.

Drop-in replacement for manually nesting both providers.

WindowManagerProvider and PanelProvider remain independently exported for cases that require custom nesting or separate configuration.

Example

<DockableDesktopProvider client={workspace}>
  <Sidebar>
    <WindowManager />
  </Sidebar>
  <SidePanelRenderer />
  <ModalStackRenderer />
</DockableDesktopProvider>

---

FormContainerContext

const FormContainerContext: Context<FormContainerContract>;

Defined in: components/FormContainerContext.ts:109

Context that supplies the FormContainerContract to panels inside the Window Manager.

---

FormContainerProvider

const FormContainerProvider: Provider<FormContainerContract> = FormContainerContext.Provider;

Defined in: components/FormContainerContext.ts:110

---

LeftPanelRenderer

const LeftPanelRenderer: React.FC<SidePanelRendererProps>;

Defined in: components/SidePanelRenderer.tsx:181

LeftPanelRenderer component renders ONLY the left side drawer if it is currently active.

---

ModalStackRenderer

const ModalStackRenderer: React.FC;

Defined in: components/ModalStackRenderer.tsx:154

ModalStackRenderer component acts as the global container rendering all active stacked modal windows in the workspace.

---

PanelContributionProvider

const PanelContributionProvider: React.FC<{
  children: React.ReactNode;
}>;

Defined in: components/PanelContributionContext.tsx:76

Provider enabling usePanelContribution() / useActivePanelContribution(). Mounted automatically by DockableDesktopProvider — only needed manually when composing WindowManagerProvider directly without it.

---

PanelProvider

const PanelProvider: React.FC<{
  children: ReactNode;
}>;

Defined in: components/PanelProviderContext.tsx:120

PanelProvider component manages the state and action handlers for drawers (left/right) and active stacked modal overlays.

---

PanelRegistry

const PanelRegistry: PanelRegistryClass;

Defined in: components/PanelRegistry.ts:76

Global singleton instance of the Panel Registry.

---

RightPanelRenderer

const RightPanelRenderer: React.FC<SidePanelRendererProps>;

Defined in: components/SidePanelRenderer.tsx:190

RightPanelRenderer component renders ONLY the right side drawer if it is currently active.

---

Sidebar

const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<SidebarHandle>>;

Defined in: components/Sidebar.tsx:415

---

SidePanelRenderer

const SidePanelRenderer: React.FC<SidePanelRendererProps>;

Defined in: components/SidePanelRenderer.tsx:168

SidePanelRenderer component acts as the global container rendering both left and right side drawers if they are currently active.

---

toast

const toast: ToastFunction;

Defined in: components/Toast.tsx:186

Imperative notification singleton. Call from anywhere — inside or outside React. Mount <ToastContainer> once at your app root to activate the renderer.

Example

toast.success('File saved.');
toast.error('Upload failed.', { duration: 0 }); // sticky
toast.promise(saveFile(), { pending: 'Saving…', success: 'Saved!', error: 'Failed.' });

---

Toolbar

const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<ToolbarHandle>>;

Defined in: components/Toolbar.tsx:419

---

ToolbarProvider

const ToolbarProvider: React.FC<{
  children: React.ReactNode;
}>;

Defined in: components/ToolbarContext.tsx:24

---

WindowManager

const WindowManager: React.FC<WindowManagerProps>;

Defined in: components/WindowManager.tsx:836

File

index.ts

Description

Core entry point for react-dockable-desktop. Exports public window manager components, contexts, hooks, type definitions, sidebar layouts, and overlay renderers.

---

WindowManagerProvider

const WindowManagerProvider: React.FC<WindowManagerProviderProps>;

Defined in: components/WindowManagerContext.tsx:654