react-dockable-desktop

react-dockable-desktop

Hooks

WindowActions

Defined in: components/WindowManagerContext.tsx:176

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

tsx

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:325
`closePanel`	(`id`) => `void`	Closes a panel immediately, bypassing dirty-state close guards. For guarded close, use requestClosePanel.	components/WindowManagerContext.tsx:197
`dockPanel`	(`id`, `targetLeafId?`) => `void`	Returns a floating window to a docked grid tab group.	components/WindowManagerContext.tsx:220
`dockPanelToGroup`	(`id`, `targetLeafId`, `position`) => `void`	Splits an existing leaf group and docks a panel to the given side.	components/WindowManagerContext.tsx:313
`dockPanelToWorkspaceEdge`	(`id`, `position`) => `void`	Docks a floating panel to a workspace edge, creating a full-width or full-height column/row.	components/WindowManagerContext.tsx:363
`floatPanel`	(`id`, `rect?`, `anchor?`) => `void`	Detaches a docked panel, converting it to a resizable floating window.	components/WindowManagerContext.tsx:214
`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:249
`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:270
`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:264
`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:287
`maximizePanel`	(`id`) => `void`	Maximizes a floating window to cover the entire workspace viewport.	components/WindowManagerContext.tsx:225
`minimizePanel`	(`id`) => `void`	Minimizes a panel to the bottom taskbar dock, preserving its layout position.	components/WindowManagerContext.tsx:202
`movePanelOrder`	(`panelId`, `targetLeafId`, `targetIndex`) => `void`	Reorders a panel's tab index within a docked leaf group.	components/WindowManagerContext.tsx:320
`openPanel`	(`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. Example `// Open floating and pin to the top-right corner: actions.openPanel('layers', 'layertree', { initialTarget: 'floating', anchor: 'top-right' });`	components/WindowManagerContext.tsx:191
`publish`	(`event`, `data`) => `void`	Publishes an event to the inter-panel pub/sub event bus.	components/WindowManagerContext.tsx:293
`registerCloseGuard`	(`id`, `guard`) => `void`	Registers a close guard that can intercept and cancel panel close requests.	components/WindowManagerContext.tsx:331
`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:357
`restorePanel`	(`id`) => `void`	Restores a minimized panel back to its last docked or floating position.	components/WindowManagerContext.tsx:207
`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:280
`setDirection`	(`dir`) => `void`	Overrides the workspace layout direction.	components/WindowManagerContext.tsx:368
`setDraggedPanelId`	(`id`) => `void`	`Internal` Stores reference to the active tab ID being dragged.	components/WindowManagerContext.tsx:306
`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:344
`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:304
`unregisterCloseGuard`	(`id`) => `void`	Removes a previously registered close guard.	components/WindowManagerContext.tsx:336
`updateFloatingPosition`	(`id`, `updates`) => `void`	Updates the position or size of a floating window.	components/WindowManagerContext.tsx:237
`updatePanelTitle`	(`id`, `title`) => `void`	Updates the display title of an open panel.	components/WindowManagerContext.tsx:350
`updateSplitSizes`	(`path`, `sizes`) => `void`	Resizes the flex split proportions of a branch node's children.	components/WindowManagerContext.tsx:231

usePanelId()

function usePanelId(): string;

Defined in: components/WindowManagerContext.tsx:1667

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

tsx

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

useRegistry()

function useRegistry(): PanelRegistryClass;

Defined in: components/WindowManagerContext.tsx:431

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

tsx

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:1592

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

tsx

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

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:82

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:158

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:111

Parameters

Parameter	Type
`config`	`WorkspaceClientConfig`

Returns

WorkspaceClient<TUserEvents>

Methods

_connect()

_connect(actions): void;

Defined in: WorkspaceClient.ts:132

Internal

Called by WindowManagerProvider after mount.

Parameters

Parameter	Type
`actions`	`WindowActions`

Returns

void

_disconnect()

_disconnect(): void;

Defined in: WorkspaceClient.ts:149

Internal

Called by WindowManagerProvider on unmount.

Returns

void

closePanel()

closePanel(id): void;

Defined in: WorkspaceClient.ts:217

Parameters

Parameter	Type
`id`	`string`

Returns

void

dockPanel()

dockPanel(...args): void;

Defined in: WorkspaceClient.ts:227

Parameters

Parameter	Type
...`args`	[`string`, `string`]

Returns

void

floatPanel()

floatPanel(...args): void;

Defined in: WorkspaceClient.ts:223

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:238

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:244

Returns the IDs of all currently open panels.

Returns

string[]

isOpen()

isOpen(id): boolean;

Defined in: WorkspaceClient.ts:241

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:248

Parameters

Parameter	Type
`json`	`string`

Returns

boolean

maximizePanel()

maximizePanel(id): void;

Defined in: WorkspaceClient.ts:231

Parameters

Parameter	Type
`id`	`string`

Returns

void

minimizePanel()

minimizePanel(id): void;

Defined in: WorkspaceClient.ts:219

Parameters

Parameter	Type
`id`	`string`

Returns

void

onPanelClose()

onPanelClose(callback): () => void;

Defined in: WorkspaceClient.ts:283

Subscribe to panel close events.

Parameters

Parameter	Type
`callback`	(`id`) => `void`

Returns

() => void

onPanelMinimize()

onPanelMinimize(callback): () => void;

Defined in: WorkspaceClient.ts:290

Subscribe to panel minimize events.

Parameters

Parameter	Type
`callback`	(`id`) => `void`

Returns

() => void

onPanelOpen()

onPanelOpen(callback): () => void;

Defined in: WorkspaceClient.ts:275

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:297

Subscribe to panel restore events.

Parameters

Parameter	Type
`callback`	(`id`) => `void`

Returns

() => void

openPanel()

openPanel(...args): void;

Defined in: WorkspaceClient.ts:201

Parameters

Parameter	Type
...`args`	[`string`, `string`, { `anchor?`: `FloatAnchor` \| `null`; `initialTarget?`: `"docked"` \| `"floating"` \| `"tabbed"`; `title?`: \| `string` \| `ContextMenuPredefinedMessage`; }]

Returns

void

publish()

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

Defined in: WorkspaceClient.ts:258

Type Parameters

Type Parameter
`K` extends `string` \| `number` \| `symbol`

Parameters

Parameter	Type
`event`	`K`
`data`	`TUserEvents` & `BuiltInPanelEvents`[`K`]

Returns

void

restorePanel()

restorePanel(id): void;

Defined in: WorkspaceClient.ts:221

Parameters

Parameter	Type
`id`	`string`

Returns

void

saveLayout()

saveLayout(): string;

Defined in: WorkspaceClient.ts:246

Returns

string

setDirection()

setDirection(dir): void;

Defined in: WorkspaceClient.ts:254

Parameters

Parameter	Type
`dir`	`"rtl"` \| `"ltr"`

Returns

void

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

Defined in: WorkspaceClient.ts:265

Type Parameters

Type Parameter
`K` extends `string` \| `number` \| `symbol`

Parameters

Parameter	Type
`event`	`K`
`callback`	(`data`) => `void`

Returns

() => void

Properties

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

Functions

formatLabel()

function formatLabel(label, formatter): string;

Defined in: components/WindowManagerContext.tsx:1627

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

Parameters

Parameter	Type
`label`	\| `string` \| `ContextMenuPredefinedMessage` \| `undefined`
`formatter`	`MessageFormatter`

Returns

string

PanelFloatingWindow()

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

Defined in: components/PanelOverlay.tsx:694

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:124

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:319

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:463

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:449

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

Returns

ReactElement

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:395

Icon button for use inside a PanelToolbar.

Parameters

Parameter	Type
`__namedParameters`	`ToolbarButtonProps`

Returns

ReactElement

ToolbarCenter()

function ToolbarCenter(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:470

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:515

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:456

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

Returns

ReactElement

ToolbarToggle()

function ToolbarToggle(__namedParameters): ReactElement;

Defined in: components/PanelOverlay.tsx:429

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

Parameters

Parameter	Type
`__namedParameters`	`ToolbarToggleProps`

Returns

ReactElement

useFormatMessage()

function useFormatMessage(): MessageFormatter;

Defined in: components/WindowManagerContext.tsx:1611

React hook to retrieve the active i18n formatter.

Returns

MessageFormatter

useFormContainer()

function useFormContainer(): FormContainerContract;

Defined in: components/FormContainerContext.ts:106

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

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:1639

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:1689

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

tsx

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)} />;
}

usePanelFloatingWindow()

function usePanelFloatingWindow(): UsePanelFloatingWindowReturn;

Defined in: components/PanelOverlay.tsx:989

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:1027

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' });

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:1647

React hook to fetch the localizable predefined message map catalog.

Returns

Record<PredefinedMessageKey, ContextMenuPredefinedMessage>

useSidebar()

function useSidebar(): SidebarContextValue;

Defined in: components/Sidebar.tsx:537

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

Returns a no-op object with a console warning when called outside a Sidebar.

Returns

SidebarContextValue

useSidebarTab()

function useSidebarTab(): SidebarTabContextValue;

Defined in: components/Sidebar.tsx:552

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

Returns a no-op object with a console warning when called outside tab content.

Returns

SidebarTabContextValue

useStyleClasses()

function useStyleClasses(): StyleClasses;

Defined in: components/WindowManagerContext.tsx:411

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 a no-op object with a console warning when called outside the provider.

Returns

ToolbarContextValue

useWindowManagerState()

Call Signature

function useWindowManagerState(): WindowState;

Defined in: components/WindowManagerContext.tsx:1550

Returns

WindowState

Call Signature

function useWindowManagerState<T>(selector): T;

Defined in: components/WindowManagerContext.tsx:1551

Type Parameters

Type Parameter
`T`

Parameters

Parameter	Type
`selector`	(`state`) => `T`

Returns

T

Interfaces

BuiltInPanelEvents

Defined in: WorkspaceClient.ts:7

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

Properties

Property	Type	Defined in
`panel:closed`	{ `id`: `string`; }	WorkspaceClient.ts:9
`panel:closed.id`	`string`	WorkspaceClient.ts:9
`panel:minimized`	{ `id`: `string`; }	WorkspaceClient.ts:10
`panel:minimized.id`	`string`	WorkspaceClient.ts:10
`panel:opened`	{ `component`: `string`; `id`: `string`; }	WorkspaceClient.ts:8
`panel:opened.component`	`string`	WorkspaceClient.ts:8
`panel:opened.id`	`string`	WorkspaceClient.ts:8
`panel:restored`	{ `id`: `string`; }	WorkspaceClient.ts:11
`panel:restored.id`	`string`	WorkspaceClient.ts:11

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:16

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:20
`id`	`string`	Translation dictionary key.	components/WindowManagerContext.tsx:18
`values?`	`Record`<`string`, `string` \| `number`>	Values injected into the translated text placeholder.	components/WindowManagerContext.tsx:22

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

DropTarget

Defined in: components/WindowManagerContext.tsx:38

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

Properties

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

FloatingWindow

Defined in: components/WindowManagerContext.tsx:91

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:107
`height`	`string` \| `number`	CSS height value.	components/WindowManagerContext.tsx:101
`id`	`string`	Unique ID of the floating window.	components/WindowManagerContext.tsx:93
`maximized?`	`boolean`	True if the window is currently maximized to full workspace bounds.	components/WindowManagerContext.tsx:105
`width`	`string` \| `number`	CSS width value.	components/WindowManagerContext.tsx:99
`x`	`string` \| `number`	CSS left position offset (supports number/px or percentage strings).	components/WindowManagerContext.tsx:95
`y`	`string` \| `number`	CSS top position offset.	components/WindowManagerContext.tsx:97
`z`	`number`	Rendering depth stack index layer.	components/WindowManagerContext.tsx:103

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:37
`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:51
`instanceId`	`string`	Unique identifier of the panel or window instance.	components/FormContainerContext.ts:39
`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:57
`onClose?`	(`handler`) => () => `void`	Subscribe to the container's close event. Returns an unsubscribe function.	components/FormContainerContext.ts:41
`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:70
`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:64
`onMinimize?`	(`handler`) => () => `void`	Subscribe to the container's minimize event. Returns an unsubscribe function.	components/FormContainerContext.ts:43
`onResize?`	(`handler`) => () => `void`	Subscribe to the container's window resize event, returning width and height. Returns an unsubscribe function.	components/FormContainerContext.ts:47
`onRestore?`	(`handler`) => () => `void`	Subscribe to the container's restore event. Returns an unsubscribe function.	components/FormContainerContext.ts:45
`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:49
`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:35
`setTitle`	(`title`) => `void`	Change the display title of the containing tab or window dynamically.	components/FormContainerContext.ts:33

LayoutGridNode

Defined in: components/WindowManagerContext.tsx:46

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:51
`orientation`	`SplitOrientation`	Split orientation orientation indicator.	components/WindowManagerContext.tsx:49
`sizes`	`number`[]	Relative percentage sizes of each child layout block.	components/WindowManagerContext.tsx:53
`type`	`"branch"`	-	components/WindowManagerContext.tsx:47

LayoutLeafNode

Defined in: components/WindowManagerContext.tsx:59

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:66
`canClose?`	`boolean`	If false, close menu buttons are disabled for this group's tabs.	components/WindowManagerContext.tsx:68
`id`	`string`	Unique leaf identifier.	components/WindowManagerContext.tsx:62
`keepOnEmpty?`	`boolean`	When true, the group persists in the layout even after its last panel is closed.	components/WindowManagerContext.tsx:70
`panels`	`string`[]	Array of panel IDs mounted inside this group.	components/WindowManagerContext.tsx:64
`type`	`"leaf"`	-	components/WindowManagerContext.tsx:60

ManagedWindowConfig

Defined in: components/PanelOverlay.tsx:29

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:37
`content`	`ReactNode`	Window body content.	components/PanelOverlay.tsx:35
`height?`	`number`	Initial height in pixels.	components/PanelOverlay.tsx:41
`icon?`	`ReactNode`	Optional icon shown to the left of the title in the header.	components/PanelOverlay.tsx:33
`title`	`string`	Text shown in the window's header bar.	components/PanelOverlay.tsx:31
`width?`	`number`	Initial width in pixels.	components/PanelOverlay.tsx:39

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

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

PanelDefinition

Defined in: WorkspaceClient.ts:15

Per-panel definition supplied to WorkspaceClient constructor.

Properties

Property	Type	Description	Defined in
`component`	`ComponentType`<`any`>	-	WorkspaceClient.ts:16
`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:17
`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:1004

Imperative handle returned by usePanelFloatingWindowManager.

See

usePanelFloatingWindowManager

Methods

close()

close(id): void;

Defined in: components/PanelOverlay.tsx:1008

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:1010

Close all managed windows.

Returns

void

isOpen()

isOpen(id): boolean;

Defined in: components/PanelOverlay.tsx:1012

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:1006

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:1014

PanelFloatingWindowProps

Defined in: components/PanelOverlay.tsx:660

Props for <PanelFloatingWindow>.

Methods

onClose()

onClose(): void;

Defined in: components/PanelOverlay.tsx:670

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:677
`defaultAnchor`	`FloatAnchor`	Corner of the panel to dock to on first render. See FloatAnchor	components/PanelOverlay.tsx:672
`defaultHeight`	`number`	Initial height in pixels.	components/PanelOverlay.tsx:676
`defaultWidth`	`number`	Initial width in pixels.	components/PanelOverlay.tsx:674
`icon?`	`ReactNode`	Optional icon shown to the left of the title in the header.	components/PanelOverlay.tsx:666
`id`	`string`	Unique identifier within the panel overlay. Used for z-order and stack tracking.	components/PanelOverlay.tsx:662
`open`	`boolean`	Whether the window is mounted and visible. Set to `false` to close/unmount it.	components/PanelOverlay.tsx:668
`title`	`string`	Text shown in the window's header bar.	components/PanelOverlay.tsx:664

PanelInfo

Defined in: components/WindowManagerContext.tsx:113

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:119
`dirty?`	`boolean`	True if the panel contains unsaved user edits.	components/WindowManagerContext.tsx:129
`dirtyOptions?`	`DirtyStateOptions`	Custom options applied to the automatic unsaved changes modal.	components/WindowManagerContext.tsx:131
`id`	`string`	Unique panel identifier.	components/WindowManagerContext.tsx:115
`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:125
`lastFloatingRect.anchor?`	`FloatAnchor` \| `null`	-	components/WindowManagerContext.tsx:125
`lastFloatingRect.height`	`number`	-	components/WindowManagerContext.tsx:125
`lastFloatingRect.width`	`number`	-	components/WindowManagerContext.tsx:125
`lastFloatingRect.x`	`number`	-	components/WindowManagerContext.tsx:125
`lastFloatingRect.y`	`number`	-	components/WindowManagerContext.tsx:125
`lastLeafId?`	`string`	The leaf group ID this panel was docked in prior to being floated.	components/WindowManagerContext.tsx:127
`previousState?`	`"docked"` \| `"floating"`	Last state held before panel was minimized.	components/WindowManagerContext.tsx:123
`state`	`"docked"` \| `"floating"` \| `"minimized"`	Current workspace placement mode.	components/WindowManagerContext.tsx:121
`title`	\| `string` \| `ContextMenuPredefinedMessage`	Plain text label or localizable message descriptor.	components/WindowManagerContext.tsx:117

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:105

Props for <PanelOverlayRoot>.

Properties

Property	Type	Defined in
`children`	`ReactNode`	components/PanelOverlay.tsx:106
`className?`	`string`	components/PanelOverlay.tsx:107
`style?`	`CSSProperties`	components/PanelOverlay.tsx:108

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

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:295

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:303
`buttonVariant?`	`ButtonVariant`	Default button style inherited by `ToolbarButton` and `ToolbarToggle` children. Default `'ghost'`	components/PanelOverlay.tsx:301
`children?`	`ReactNode`	-	components/PanelOverlay.tsx:306
`className?`	`string`	-	components/PanelOverlay.tsx:305
`position`	`ToolbarPosition`	Edge of the panel overlay to attach to. See ToolbarPosition	components/PanelOverlay.tsx:297
`style?`	`CSSProperties`	-	components/PanelOverlay.tsx:304
`variant?`	`ToolbarVariant`	Background style of the toolbar strip. Default `'transparent'`	components/PanelOverlay.tsx:299

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:477

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:483
`group?`	`string`	Optional group header used to bucket results visually.	components/PanelOverlay.tsx:485
`icon?`	`ReactNode`	Optional icon shown to the left of the label.	components/PanelOverlay.tsx:487
`id`	`string`	Unique identifier for this result — passed to `onSelect`.	components/PanelOverlay.tsx:479
`label`	`string`	Primary display text.	components/PanelOverlay.tsx:481

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:104

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:106
`getActiveTab`	() => `string` \| `null`	components/Sidebar.tsx:107
`openTab`	(`tabId`) => `void`	components/Sidebar.tsx:105

SidebarHandle

Defined in: components/Sidebar.tsx:87

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

Properties

Property	Type	Defined in
`closeDrawer`	() => `void`	components/Sidebar.tsx:89
`getActiveTab`	() => `string` \| `null`	components/Sidebar.tsx:90
`getWidth`	() => `number`	components/Sidebar.tsx:97
`hide`	() => `void`	components/Sidebar.tsx:92
`hideStrip`	() => `void`	components/Sidebar.tsx:95
`openTab`	(`tabId`) => `void`	components/Sidebar.tsx:88
`setWidth`	(`px`) => `void`	components/Sidebar.tsx:96
`show`	() => `void`	components/Sidebar.tsx:91
`showStrip`	() => `void`	components/Sidebar.tsx:94
`toggle`	() => `void`	components/Sidebar.tsx:93

SidebarProps

Defined in: components/Sidebar.tsx:54

Properties

Property	Type	Description	Defined in
`activeTabId?`	`string` \| `null`	Controlled active tab id. Omit to use internal state.	components/Sidebar.tsx:67
`children?`	`ReactNode`	Main workspace content rendered alongside the sidebar.	components/Sidebar.tsx:79
`defaultWidth?`	`number`	Initial drawer width in pixels. Default: 220	components/Sidebar.tsx:59
~~`drawerWidth?`~~	`string`	Deprecated Use defaultWidth (number, pixels) instead.	components/Sidebar.tsx:81
`maxWidth?`	`number`	Maximum drawer width in pixels during drag-resize. Default: 600	components/Sidebar.tsx:63
`minWidth?`	`number`	Minimum drawer width in pixels during drag-resize. Default: 150	components/Sidebar.tsx:61
`onActiveTabChange?`	(`tabId`) => `void`	Called when the active tab changes.	components/Sidebar.tsx:69
`onStripVisibilityChange?`	(`visible`) => `void`	Called when showStrip/hideStrip is invoked on the imperative handle.	components/Sidebar.tsx:77
`onVisibilityChange?`	(`visible`) => `void`	Called when show/hide/toggle is invoked on the imperative handle.	components/Sidebar.tsx:73
`onWidthChange?`	(`px`) => `void`	Called during drag resize and on setWidth() with the new pixel width.	components/Sidebar.tsx:65
`position?`	`"left"` \| `"right"`	Which side the activity bar and drawer appear on. Default: 'right'	components/Sidebar.tsx:56
`stripVisible?`	`boolean`	Collapse only the activity bar strip, leaving the drawer unaffected. Default: true	components/Sidebar.tsx:75
`tabs`	`SidebarTab`[]	-	components/Sidebar.tsx:57
`visible?`	`boolean`	Collapse the entire sidebar (strip + drawer). Default: true	components/Sidebar.tsx:71

SidebarTab

Defined in: components/Sidebar.tsx:29

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:38
`icon`	`ReactNode`	-	components/Sidebar.tsx:32
`id`	`string`	-	components/Sidebar.tsx:30
`label`	`string`	-	components/Sidebar.tsx:31
`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:44
`renderContent`	(`tabId`, `onClose`, `onOpen`) => `ReactNode`	Called to obtain the drawer content for this tab.	components/Sidebar.tsx:51

SidebarTabContextValue

Defined in: components/Sidebar.tsx:114

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:117
`onOpen`	() => `void`	components/Sidebar.tsx:116
`openTab`	(`tabId`) => `void`	components/Sidebar.tsx:118
`tabId`	`string`	components/Sidebar.tsx:115

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:154

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:160

StyleClasses

Defined in: components/WindowManagerContext.tsx:399

Represents custom CSS classes injected into layout parts.

Properties

Property	Type	Defined in
`modalBodyClass?`	`string`	components/WindowManagerContext.tsx:401
`modalClass?`	`string`	components/WindowManagerContext.tsx:400
`sidePanelBodyClass?`	`string`	components/WindowManagerContext.tsx:403
`sidePanelClass?`	`string`	components/WindowManagerContext.tsx:402
`windowBodyClass?`	`string`	components/WindowManagerContext.tsx:405
`windowClass?`	`string`	components/WindowManagerContext.tsx:404

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:382

Props for <ToolbarButton>.

Methods

onClick()

onClick(): void;

Defined in: components/PanelOverlay.tsx:386

Click handler.

Returns

void

Properties

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

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:93

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:109
`defaultIcon`	`ReactNode`	Icon shown when no sub-item is active.	components/Toolbar.tsx:100
`disabled?`	`boolean`	-	components/Toolbar.tsx:102
`id`	`string`	Serves as both the button ID and the radio group key in ToolbarContext.	components/Toolbar.tsx:96
`items`	`ToolbarGroupEntry`[]	-	components/Toolbar.tsx:101
`label`	`string`	Tooltip / aria-label shown when no sub-item is active.	components/Toolbar.tsx:98
`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:114
`type`	`"group"`	-	components/Toolbar.tsx:94

ToolbarGroupSubItem

Defined in: components/Toolbar.tsx:69

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:75
`icon`	`ReactNode`	-	components/Toolbar.tsx:72
`id`	`string`	-	components/Toolbar.tsx:70
`label`	`string`	-	components/Toolbar.tsx:71
`onActivate?`	(`id`) => `void`	Called when this sub-item is selected.	components/Toolbar.tsx:77
`shortcut?`	`string`	Keyboard shortcut displayed in the flyout panel.	components/Toolbar.tsx:74

ToolbarHandle

Defined in: components/Toolbar.tsx:141

Methods

hide()

hide(): void;

Defined in: components/Toolbar.tsx:143

Returns

void

show()

show(): void;

Defined in: components/Toolbar.tsx:142

Returns

void

toggle()

toggle(): void;

Defined in: components/Toolbar.tsx:144

Returns

void

ToolbarProps

Defined in: components/Toolbar.tsx:128

Properties

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

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:491

Props for <ToolbarSearchInput>.

Methods

onSearch()

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

Defined in: components/PanelOverlay.tsx:499

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:501

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:493

ToolbarSeparator

Defined in: components/Toolbar.tsx:56

A visual divider between button groups.

Properties

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

ToolbarToggleItem

Defined in: components/Toolbar.tsx:43

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

Properties

Property	Type	Description	Defined in
`disabled?`	`boolean`	-	components/Toolbar.tsx:52
`icon`	`ReactNode`	-	components/Toolbar.tsx:47
`id`	`string`	-	components/Toolbar.tsx:45
`label`	`string`	-	components/Toolbar.tsx:46
`onToggle?`	(`active`) => `void`	Called after the toggle flips; receives the new active state.	components/Toolbar.tsx:51
`shortcut?`	`string`	Keyboard shortcut hint — reserved for future custom tooltip.	components/Toolbar.tsx:49
`type`	`"toggle"`	-	components/Toolbar.tsx:44

ToolbarToggleProps

Defined in: components/PanelOverlay.tsx:414

Props for <ToolbarToggle>.

Methods

onToggle()

onToggle(): void;

Defined in: components/PanelOverlay.tsx:420

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:418
`disabled?`	`boolean`	-	components/PanelOverlay.tsx:421
`icon`	`ReactNode`	Button icon — typically a small SVG component.	components/PanelOverlay.tsx:416
`title?`	`string`	Tooltip text and accessible `aria-label`.	components/PanelOverlay.tsx:423
`variant?`	`ButtonVariant`	Visual style override. Falls back to the parent `PanelToolbar`'s `buttonVariant`.	components/PanelOverlay.tsx:425

UsePanelFloatingWindowReturn

Defined in: components/PanelOverlay.tsx:972

Return type of usePanelFloatingWindow.

See

usePanelFloatingWindow

Methods

close()

close(): void;

Defined in: components/PanelOverlay.tsx:978

Close the floating window.

Returns

void

open()

open(): void;

Defined in: components/PanelOverlay.tsx:976

Open the floating window.

Returns

void

Properties

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

WindowManagerProps

Defined in: components/WindowManager.tsx:810

Props for <WindowManager>.

Properties

Property	Type	Description	Defined in
`contextMenuAdapter?`	`ContextMenuAdapter`	Custom context menu renderer. Defaults to the built-in `DefaultContextMenuAdapter`.	components/WindowManager.tsx:824
`defaultPanelIcon?`	`ReactNode`	Fallback icon shown in panel tabs when no panel-specific icon is provided.	components/WindowManager.tsx:814
`skin?`	`string`	Built-in skin name or a custom skin key registered via CSS. Default `'vscode'`	components/WindowManager.tsx:812
`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:822

WindowManagerProviderProps

Defined in: components/WindowManagerContext.tsx:487

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

See

DockableDesktopProviderProps

Properties

Property	Type	Description	Defined in
`children`	`ReactNode`	-	components/WindowManagerContext.tsx:488
`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:491
`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:500
`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:494
`modalBodyClass?`	`string`	CSS class applied to the inner content area of every modal overlay.	components/WindowManagerContext.tsx:504
`modalClass?`	`string`	CSS class applied to the outer wrapper element of every modal overlay.	components/WindowManagerContext.tsx:502
`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:497
`sidePanelBodyClass?`	`string`	CSS class applied to the inner content area of side-panel drawers.	components/WindowManagerContext.tsx:508
`sidePanelClass?`	`string`	CSS class applied to the outer wrapper of left/right side-panel drawers.	components/WindowManagerContext.tsx:506
`windowBodyClass?`	`string`	CSS class applied to the inner content area of floating panel windows.	components/WindowManagerContext.tsx:512
`windowClass?`	`string`	CSS class applied to the outer wrapper of floating panel windows.	components/WindowManagerContext.tsx:510

WindowState

Defined in: components/WindowManagerContext.tsx:137

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:149
`dir`	`"rtl"` \| `"ltr"`	Current layout direction ('ltr' or 'rtl')	components/WindowManagerContext.tsx:151
`draggedPanelId`	`string` \| `null`	The ID of the panel tab currently being dragged.	components/WindowManagerContext.tsx:147
`edgeSplitRatio`	`number`	Split ratio for workspace outer-edge drops (0.1–0.9). Default 0.2.	components/WindowManagerContext.tsx:157
`floating`	`FloatingWindow`[]	Array of active floated windows.	components/WindowManagerContext.tsx:141
`gridRoot`	`LayoutNode`	Root branch node representing the grid.	components/WindowManagerContext.tsx:139
`isRtl`	`boolean`	Convenient boolean flag indicating RTL direction	components/WindowManagerContext.tsx:153
`minimized`	{ `component`: `string`; `id`: `string`; `title`: \| `string` \| `ContextMenuPredefinedMessage`; }[]	Array of minimized panels waiting in the taskbar dock.	components/WindowManagerContext.tsx:143
`panels`	`Record`<`string`, `PanelInfo`>	Map indexing panel metadata descriptors.	components/WindowManagerContext.tsx:145
`splitRatio`	`number`	Split ratio for panel cross-target drops (0.1–0.9). Default 0.5.	components/WindowManagerContext.tsx:155

WorkspaceClientConfig

Defined in: WorkspaceClient.ts:21

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:47
`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:42
`dir?`	`"rtl"` \| `"ltr"`	Initial layout direction.	WorkspaceClient.ts:37
`formatMessage?`	`MessageFormatter`	Custom i18n formatter for all internal strings.	WorkspaceClient.ts:33
`initialState?`	`string` \| `null`	Serialised layout produced by a previous saveLayout() call. Pass null or omit to start with an empty canvas.	WorkspaceClient.ts:31
`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:26
`predefinedMessages?`	`Record`<`string`, `ContextMenuPredefinedMessage`>	Override any subset of the built-in predefined message catalog.	WorkspaceClient.ts:35

Type Aliases

ButtonVariant

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

Defined in: components/PanelOverlay.tsx:292

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

DockableDesktopProviderProps

type DockableDesktopProviderProps = WindowManagerProviderProps;

Defined in: components/DockableDesktopProvider.tsx:11

Props for <DockableDesktopProvider>. Alias of WindowManagerProviderProps.

See

WindowManagerProviderProps

DropPosition

type DropPosition = SplitDirection | "center";

Defined in: components/WindowManagerContext.tsx:35

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:86

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:74

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:26

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> = { ... };

SplitDirection

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

Defined in: components/WindowManagerContext.tsx:32

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

SplitOrientation

type SplitOrientation = "horizontal" | "vertical";

Defined in: components/WindowManagerContext.tsx:29

Orientation modifier indicating split directions.

TaskbarVisibility

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

Defined in: components/WindowManager.tsx:807

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:81

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:117

ToolbarPosition

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

Defined in: components/PanelOverlay.tsx:19

Edge of a panel to which a PanelToolbar attaches.

ToolbarVariant

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

Defined in: components/PanelOverlay.tsx:289

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

DefaultContextMenuAdapter

const DefaultContextMenuAdapter: ContextMenuAdapter;

Defined in: components/ContextMenu.tsx:442

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<WindowManagerProviderProps>;

Defined in: components/DockableDesktopProvider.tsx:28

Composite provider that wraps both WindowManagerProvider and PanelProvider in the correct order. Drop-in replacement for manually nesting both providers.

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

Example

tsx

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

FormContainerContext

const FormContainerContext: Context<FormContainerContract>;

Defined in: components/FormContainerContext.ts:97

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

FormContainerProvider

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

Defined in: components/FormContainerContext.ts:98

LeftPanelRenderer

const LeftPanelRenderer: React.FC<SidePanelRendererProps>;

Defined in: components/SidePanelRenderer.tsx:180

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

ModalStackRenderer

const ModalStackRenderer: React.FC;

Defined in: components/ModalStackRenderer.tsx:151

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

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:189

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

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

Defined in: components/Sidebar.tsx:282

SidePanelRenderer

const SidePanelRenderer: React.FC<SidePanelRendererProps>;

Defined in: components/SidePanelRenderer.tsx:167

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.' });

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

Defined in: components/Toolbar.tsx:403

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:827

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:515

react-dockable-desktop ​

Hooks ​

WindowActions ​

Example ​

Properties ​

usePanelId() ​

Returns ​

Example ​

useRegistry() ​

Returns ​

Example ​

useWindowManagerActions() ​

Returns ​

Throws ​

Example ​

Classes ​

PanelRegistryClass ​

Constructors ​

Constructor ​

Returns ​

Methods ​

get() ​

Parameters ​

Returns ​

getRegisteredIds() ​

Returns ​

register() ​

Type Parameters ​

Parameters ​

Returns ​

WorkspaceClient ​

Remarks ​

Example ​

Type Parameters ​

Accessors ​

isConnected ​

Get Signature ​

Returns ​

Constructors ​

Constructor ​

Parameters ​

Returns ​

Methods ​

_connect() ​

Parameters ​

Returns ​

_disconnect() ​

Returns ​

closePanel() ​

Parameters ​

Returns ​

dockPanel() ​

Parameters ​

Returns ​

floatPanel() ​

Parameters ​

Returns ​

focusPanel() ​

Parameters ​

Returns ​

getOpenPanelIds() ​

Returns ​

isOpen() ​

Parameters ​

Returns ​

loadLayout() ​

Parameters ​

Returns ​

maximizePanel() ​

Parameters ​

Returns ​

minimizePanel() ​

Parameters ​

Returns ​

onPanelClose() ​

Parameters ​

Returns ​

onPanelMinimize() ​

Parameters ​

Returns ​

react-dockable-desktop

Hooks

WindowActions

Example

Properties

usePanelId()

Returns

Example

useRegistry()

Returns

Example

useWindowManagerActions()

Returns

Throws

Example

Classes

PanelRegistryClass

Constructors

Constructor

Returns

Methods

get()

Parameters

Returns

getRegisteredIds()

Returns

register()

Type Parameters

Parameters

Returns

WorkspaceClient

Remarks

Example

Type Parameters

Accessors

isConnected

Get Signature

Returns

Constructors

Constructor

Parameters

Returns

Methods

_connect()

Parameters

Returns

_disconnect()

Returns

closePanel()

Parameters

Returns

dockPanel()

Parameters

Returns

floatPanel()

Parameters

Returns

focusPanel()

Parameters

Returns

getOpenPanelIds()

Returns

isOpen()

Parameters

Returns

loadLayout()

Parameters

Returns

maximizePanel()

Parameters

Returns

minimizePanel()

Parameters

Returns

onPanelClose()

Parameters

Returns

onPanelMinimize()

Parameters

Returns