react-dockable-desktop

---

react-dockable-desktop

Classes

PanelRegistry

Defined in: components/PanelRegistry.ts:41

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

Constructors

Constructor

new PanelRegistry(): PanelRegistry;

Returns

PanelRegistry

Methods

get()

get(id): PanelRegistryEntry | undefined;

Defined in: components/PanelRegistry.ts:64

Retrieve a registered panel configuration by identifier.

Parameters

Parameter	Type
id	string

Returns

PanelRegistryEntry | undefined

getRegisteredIds()

getRegisteredIds(): string[];

Defined in: components/PanelRegistry.ts:71

Returns a list of all registered panel entry identifiers.

Returns

string[]

register()

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

Defined in: components/PanelRegistry.ts:50

Register a new component to the panel catalog registry.

Type Parameters

Type Parameter
P extends object

Parameters

Parameter	Type	Description
id	string	Unique string identifier.
Component	ComponentType<P>	React component instance template.
defaultOptions?	{ canClose?: boolean; canDrag?: boolean; canMinimize?: boolean; defaultAnchor?: FloatAnchor; disableLivePreview?: boolean; favoritePosition?: { height: string | number; width: string | number; x: string | number; y: string | number; }; icon?: ReactNode; initialTarget?: "docked" | "floating" | "tabbed"; renderHeaderActions?: (panelId) => ReactNode; title?: | string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; } | (() => string); }	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>; } | (() => string)	Tab and window headers text — plain string or i18n descriptor.

Returns

void

Functions

computeResizedRect()

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

Defined in: components/dragResize.ts:96

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

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

Parameters

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

Returns

ResizeRect

---

createWorkspace()

function createWorkspace<TEvents>(config?): Workspace<TEvents>;

Defined in: api/index.tsx:49

Creates a workspace. Pass it to <DockableDesktopProvider workspace={…}>.

Type Parameters

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

Parameters

Parameter	Type
config	WorkspaceConfig

Returns

Workspace<TEvents>

Example

interface AppEvents { 'layer:select': { layerId: string } }
export const workspace = createWorkspace<AppEvents>({
  panels: { map: { component: MapPanel } },
  initialState: localStorage.getItem('layout'),
});

---

formatLabel()

function formatLabel(label, formatter): string;

Defined in: core/messages.ts:22

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

Parameters

Parameter	Type
label	| string | MessageDescriptor | (() => string) | undefined
formatter	MessageFormatter

Returns

string

---

isComputedRtl()

function isComputedRtl(el): boolean;

Defined in: utils/rtl.ts:33

Whether el is laid out right-to-left, as the browser computes it — from a dir attribute on any ancestor, the CSS direction property, or the workspace's own setDirection.

Use this, not document.documentElement.dir, wherever a pointer delta (physical) is turned into a size, side or index (logical): RTL is often set on <body> or a wrapper rather than <html>, and the workspace can be RTL on an LTR page.

Parameters

Parameter	Type
el	Element | null | undefined

Returns

boolean

---

isElementRtl()

function isElementRtl(el): boolean;

Defined in: utils/rtl.ts:1

Parameters

Parameter	Type
el	HTMLElement | null

Returns

boolean

---

isSerializable()

function isSerializable(value): boolean;

Defined in: components/serializable.ts:21

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

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

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

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

Parameters

Parameter	Type
value	unknown

Returns

boolean

---

RddFloatingWidget()

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

Defined in: components/panelOverlay/FloatingWidget.tsx:105

A floating widget inside a panel — anchored within an RddPanelOverlay.

Docks to any corner, drags free of it, and drops back onto one. Windows sharing a corner stack along the block axis with animated offsets. An axis can also span the panel instead of carrying a fixed size, so the window tracks the panel as it resizes — see RddFloatingWidgetProps.defaultStretch and Stretch.

Resize handles follow what is actually movable: a free-floating window is pinned by nothing and offers all eight, while a docked one offers only its free edges — plus both ends of any spanning axis, either of which releases it.

Parameters

Parameter	Type
props	RddFloatingWidgetProps

Returns

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

Examples

const [infoOpen, setInfoOpen] = useState(false);
<RddFloatingWidget
  id="layer-info" title="Layer Info"
  open={infoOpen} onClose={() => setInfoOpen(false)}
  defaultAnchor="top-right" defaultWidth={300} defaultHeight={200}
>
  <LayerInfoContent />
</RddFloatingWidget>

// A full-width status strip along the bottom, tracking the panel's width.
// defaultHeight still applies; defaultWidth is what the inline axis returns to if released.
<RddFloatingWidget
  id="timeline" title="Timeline"
  open onClose={close}
  defaultAnchor="bottom-left" defaultStretch="width"
  defaultWidth={240} defaultHeight={120}
>
  <TimelineContent />
</RddFloatingWidget>

---

RddPanelOverlay()

function RddPanelOverlay(__namedParameters): ReactElement;

Defined in: components/panelOverlay/PanelOverlayRoot.tsx:35

Context provider and layout root for the Panel Overlay system. Wrap your panel content with this to enable RddPanelToolbar, RddFloatingWidget, and useFloatingWidgets.

Parameters

Parameter	Type
__namedParameters	RddPanelOverlayProps

Returns

ReactElement

Example

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

---

RddPanelToolbar()

function RddPanelToolbar(__namedParameters): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:42

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

Parameters

Parameter	Type
__namedParameters	RddPanelToolbarProps

Returns

ReactElement

Example

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

---

RddSidePanels()

function RddSidePanels(__namedParameters): ReactElement;

Defined in: api/index.tsx:325

Renders the side drawers opened through useSidePanels.

Parameters

Parameter	Type
__namedParameters	RddSidePanelsProps

Returns

ReactElement

---

RddToasts()

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

Defined in: components/Toast.tsx:443

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	RddToastsProps

Returns

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

Example

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

---

RddToolbarButton()

function RddToolbarButton(__namedParameters): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:129

Icon button for use inside a PanelToolbar.

Parameters

Parameter	Type
__namedParameters	RddToolbarButtonProps

Returns

ReactElement

---

RddToolbarCenter()

function RddToolbarCenter(__namedParameters): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:204

Centers its children within the toolbar using absolute positioning.

Parameters

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

Returns

ReactElement

---

RddToolbarItem()

function RddToolbarItem(__namedParameters): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:197

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

---

RddToolbarSearch()

function RddToolbarSearch(__namedParameters): ReactElement;

Defined in: components/panelOverlay/ToolbarSearch.tsx:50

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	RddToolbarSearchProps

Returns

ReactElement

Example

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

---

RddToolbarSeparator()

function RddToolbarSeparator(): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:183

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

Returns

ReactElement

---

RddToolbarSpacer()

function RddToolbarSpacer(): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:190

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

Returns

ReactElement

---

RddToolbarToggle()

function RddToolbarToggle(__namedParameters): ReactElement;

Defined in: components/panelOverlay/PanelToolbar.tsx:163

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

Parameters

Parameter	Type
__namedParameters	RddToolbarToggleProps

Returns

ReactElement

---

sectionToTab()

function sectionToTab(section, fallbackIcon?): SidebarTab;

Defined in: components/PanelContributionContext.tsx:152

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

Parameters

Parameter	Type	Default value
section	PanelSidebarSection	undefined
fallbackIcon	ReactNode	null

Returns

SidebarTab

---

startPointerDrag()

function startPointerDrag<TStart>(config): void;

Defined in: components/dragResize.ts:36

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

Type Parameters

Type Parameter
TStart

Parameters

Parameter	Type
config	PointerDragConfig<TStart>

Returns

void

---

useActiveContribution()

function useActiveContribution(): PanelContribution | null;

Defined in: components/PanelContributionContext.tsx:130

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

Returns

PanelContribution | null

Throws

Error if used outside of a DockableDesktopProvider.

---

useBeforeClose()

function useBeforeClose(guard): void;

Defined in: api/index.tsx:186

Registers a close guard: resolve false to keep the panel open (ask the user, save first, …). Pass null to register none. Always calls the latest guard passed in.

Parameters

Parameter	Type
guard	(() => boolean | Promise<boolean>) | null

Returns

void

---

useColorScheme()

function useColorScheme(): ColorScheme;

Defined in: hooks/useColorScheme.ts:30

Reactively reads the page's data-color-scheme attribute on <html> — the one the host application sets to switch the library's scheme (the library itself never writes it) — returning 'dark' or 'light' and re-rendering whenever it changes.

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

Returns 'dark' when rendered on the server.

Returns

ColorScheme

---

useContextMenu()

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

Defined in: components/ContextMenu.tsx:652

Returns

(options) => void

---

useFloatingWidgets()

function useFloatingWidgets(): FloatingWidgetsApi;

Defined in: components/panelOverlay/useFloatingWidgets.tsx:71

Imperative hook for spawning N named floating windows at runtime from data or event handlers. All widgets share z-ordering, drag, and corner-docking infrastructure of the RddPanelOverlay, and accept the same placement options — including ManagedWidget.stretch to span an axis of the panel.

Must be called inside a descendant of RddPanelOverlay, not in the component that renders it.

Returns

FloatingWidgetsApi

A stable FloatingWidgetsApi.

Example

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

// A full-width strip along the bottom edge:
manager.open('timeline', { title: 'Timeline', content: <Timeline />, anchor: 'bottom-left', stretch: 'width', height: 120 });

---

useFormatMessage()

function useFormatMessage(): MessageFormatter;

Defined in: components/WindowManagerContext.tsx:257

React hook to retrieve the active i18n formatter.

Returns

MessageFormatter

---

useHostClasses()

function useHostClasses(): HostClasses;

Defined in: components/WindowManagerContext.tsx:40

Custom hook to read configured style class contexts.

Returns

HostClasses

---

useMergedSidebarTabs()

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

Defined in: components/PanelContributionContext.tsx:181

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

Parameters

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

Returns

SidebarTab[]

---

useMergedToolbarItems()

function useMergedToolbarItems(staticItems): ToolbarItem[];

Defined in: components/PanelContributionContext.tsx:168

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

Parameters

Parameter	Type
staticItems	ToolbarItem[]

Returns

ToolbarItem[]

---

useMessages()

function useMessages(): Record<MessageKey, MessageDescriptor>;

Defined in: components/WindowManagerContext.tsx:274

React hook to fetch the localizable predefined message map catalog.

Returns

Record<MessageKey, MessageDescriptor>

---

useModals()

function useModals(): ModalsApi;

Defined in: api/index.tsx:270

Opens and tracks modals.

Returns

ModalsApi

---

usePanel()

function usePanel(): PanelHandle;

Defined in: api/index.tsx:116

The panel's own container: its id, where it is, and what it can do. Works in docked panels, floating windows, modals and side drawers.

The functions on the handle are stable; the handle object is not (see PanelHandle). To keep the tab title in step with a document:

const { setTitle, setDirty } = usePanel();
useEffect(() => { setTitle(doc.title); setDirty(doc.dirty); }, [setTitle, setDirty, doc.title, doc.dirty]);

Returns

PanelHandle

---

usePanelContextMenu()

function usePanelContextMenu(items): void;

Defined in: components/WindowManagerContext.tsx:316

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 knows which panel it is in — no id needed.

Parameters

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

Returns

void

Example

import { usePanelContextMenu } from 'dockable-windows';

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

---

usePanelContribution()

function usePanelContribution(contribution): void;

Defined in: components/PanelContributionContext.tsx:104

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

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

Parameters

Parameter	Type
contribution	PanelContribution

Returns

void

Throws

Error if used outside of a DockableDesktopProvider.

Example

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

---

usePanelEvents()

function usePanelEvents(events): void;

Defined in: api/index.tsx:164

Subscribes to the panel's lifecycle. Call it at the top level of the panel component; it always calls the latest callbacks passed in and cleans up on unmount — no dependency array.

Parameters

Parameter	Type
events	PanelEvents

Returns

void

---

usePanelSize()

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

Defined in: components/FormContainerContext.ts:130

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

Returns

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

---

useSaveState()

function useSaveState(getState): void;

Defined in: api/index.tsx:198

Reports the panel's restorable state, pulled fresh on every saveLayout() and saved as the panel's props. Pass null to report none. Always calls the latest function passed in.

Parameters

Parameter	Type
getState	(() => unknown) | null

Returns

void

---

useSidebar()

function useSidebar(): SidebarContext;

Defined in: components/Sidebar.tsx:818

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

Returns

SidebarContext

Throws

Error if used outside of an RddSidebar.

---

useSidebarTab()

function useSidebarTab(): SidebarTabContext;

Defined in: components/Sidebar.tsx:830

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

Returns

SidebarTabContext

Throws

Error if used outside of an RddSidebar tab's renderContent tree.

---

useSidePanels()

function useSidePanels(): SidePanelsApi;

Defined in: api/index.tsx:295

Opens and tracks the left and right side drawers.

Returns

SidePanelsApi

---

useToolbar()

function useToolbar(): ToolbarContextValue;

Defined in: components/ToolbarContext.tsx:45

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

Returns

ToolbarContextValue

Throws

Error if used outside of a DockableDesktopProvider.

---

useWorkspace()

function useWorkspace<TEvents>(): Workspace<TEvents>;

Defined in: api/index.tsx:58

The workspace of the nearest <DockableDesktopProvider>. A stable object: it never changes, so a component that only calls actions never re-renders because of it.

Type Parameters

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

Returns

Workspace<TEvents>

---

useWorkspaceState()

Call Signature

function useWorkspaceState(): WorkspaceState;

Defined in: components/WindowManagerContext.tsx:196

The live workspace state. The component re-renders whenever it changes — or, given a selector, only when the selected value changes.

For reads without a subscription, call the workspace's isOpen() or getOpenPanelIds().

The selector must return a value that stays the same while the state does — a primitive, or a part of the state as it is (s => s.panels[id]). A selector that builds a new object or array on each call (s => ({ n: s.floating.length }), s => s.floating.map(...)) is a new value every time React asks, and React stops with "Maximum update depth exceeded". Select the parts separately, or derive the object with useMemo from what you selected.

Returns

WorkspaceState

The current workspace state, or the selector's result.

Throws

Error if used outside <DockableDesktopProvider>.

Example

function PanelCount() {
  const count = useWorkspaceState(s => Object.keys(s.panels).length);
  return <span>{count} open</span>;
}

Call Signature

function useWorkspaceState<T>(selector): T;

Defined in: components/WindowManagerContext.tsx:197

The live workspace state. The component re-renders whenever it changes — or, given a selector, only when the selected value changes.

For reads without a subscription, call the workspace's isOpen() or getOpenPanelIds().

The selector must return a value that stays the same while the state does — a primitive, or a part of the state as it is (s => s.panels[id]). A selector that builds a new object or array on each call (s => ({ n: s.floating.length }), s => s.floating.map(...)) is a new value every time React asks, and React stops with "Maximum update depth exceeded". Select the parts separately, or derive the object with useMemo from what you selected.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type
selector	(state) => T

Returns

T

The current workspace state, or the selector's result.

Throws

Error if used outside <DockableDesktopProvider>.

Example

function PanelCount() {
  const count = useWorkspaceState(s => Object.keys(s.panels).length);
  return <span>{count} open</span>;
}

Interfaces

AlertOptions

Defined in: api/index.tsx:245

Options of ModalsApi.alert. The title defaults to the alertTitle message.

Properties

Property	Type	Description	Defined in
alertType?	"info" | "warning" | "success" | "danger"	-	api/index.tsx:248
icon?	ReactNode	-	api/index.tsx:249
message	| string | { defaultMessage?: string; id: string; values?: any; }	-	api/index.tsx:246
okLabel?	| string | { defaultMessage?: string; id: string; values?: any; }	-	api/index.tsx:250
size?	"small" | "auto" | "medium" | "large" | "fullscreen"	Defaults to 'small'.	api/index.tsx:252
title?	PanelTitle	-	api/index.tsx:247

---

BuiltInEvents

Defined in: WorkspaceClient.ts:17

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

Properties

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

---

CloseOptions

Defined in: components/FormContainerContext.ts:8

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

---

ConfirmOptions

Defined in: api/index.tsx:232

Options of ModalsApi.confirm. The title defaults to the modalTitle message.

Properties

Property	Type	Description	Defined in
alert?	string	-	api/index.tsx:235
alertType?	"info" | "warning" | "success" | "danger"	-	api/index.tsx:236
icon?	ReactNode	-	api/index.tsx:237
message	| string | { defaultMessage?: string; id: string; values?: any; }	-	api/index.tsx:233
size?	"small" | "auto" | "medium" | "large" | "fullscreen"	Defaults to 'small'.	api/index.tsx:241
title?	PanelTitle	-	api/index.tsx:234
yesNo?	boolean	Labels the buttons Yes and No instead of OK and Cancel.	api/index.tsx:239

---

ContextMenuAdapter

Defined in: components/ContextMenu.tsx:94

Properties

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

---

ContextMenuCheckbox

Defined in: components/ContextMenu.tsx:20

Properties

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

---

ContextMenuHandle

Defined in: components/ContextMenu.tsx:75

Methods

show()

show(options): void;

Defined in: components/ContextMenu.tsx:76

Parameters

Parameter	Type
options	ShowContextMenuOptions

Returns

void

---

ContextMenuSeparator

Defined in: components/ContextMenu.tsx:39

Properties

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

---

ContextMenuSimpleItem

Defined in: components/ContextMenu.tsx:29

Properties

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

---

ContextMenuSubMenu

Defined in: components/ContextMenu.tsx:43

Properties

Property	Type	Defined in
items?	ContextMenuItem[]	components/ContextMenu.tsx:46
label	ContextMenuLabel	components/ContextMenu.tsx:44
title?	ContextMenuLabel	components/ContextMenu.tsx:45

---

DirtyStateOptions

Defined in: components/dirtyOptions.ts:11

Represents custom configuration options applied to the automatic unsaved changes modal.

Properties

Property	Type	Description	Defined in
alert?	string	Optional custom alert notification banner text. Typically lists missing validation field requirements or backup statuses.	components/dirtyOptions.ts:28
alertType?	"info" | "warning" | "success" | "danger"	Color scheme severity level of the validation banner. Maps to theme highlight alerts. Default: 'info'	components/dirtyOptions.ts:34
message?	string | MessageDescriptor	Custom warning explanation text or localizable message descriptor. Replaces the standard default message body templates.	components/dirtyOptions.ts:22
title?	string | MessageDescriptor | (() => string)	Custom header title text or localizable message descriptor. Replaces the default "Unsaved Changes" title.	components/dirtyOptions.ts:16

---

DockableDesktopProviderProps

Defined in: components/DockableDesktopProvider.tsx:14

Props for <DockableDesktopProvider>.

Properties

Property	Type	Description	Defined in
children	ReactNode	-	components/DockableDesktopProvider.tsx:15
contextMenuAdapter?	ContextMenuAdapter	Context menu implementation. Defaults to the built-in menu.	components/DockableDesktopProvider.tsx:45
dir?	"rtl" | "ltr"	Initial layout direction, when the workspace doesn't set one.	components/DockableDesktopProvider.tsx:26
formatMessage?	MessageFormatter	Translates every built-in label. Overridden by the workspace's own formatMessage.	components/DockableDesktopProvider.tsx:22
messages?	Record<string, MessageDescriptor>	Overrides any subset of the built-in message table. Overridden by the workspace's own messages.	components/DockableDesktopProvider.tsx:24
modalBodyClass?	string	CSS class for the content area of every modal.	components/DockableDesktopProvider.tsx:30
modalClass?	string	CSS class for the outer wrapper of every modal.	components/DockableDesktopProvider.tsx:28
sidePanelBodyClass?	string	CSS class for the content area of the side drawers.	components/DockableDesktopProvider.tsx:34
sidePanelClass?	string	CSS class for the outer wrapper of the side drawers.	components/DockableDesktopProvider.tsx:32
windowBodyClass?	string	CSS class for the content area of floating windows.	components/DockableDesktopProvider.tsx:38
windowClass?	string	CSS class for the outer wrapper of floating windows.	components/DockableDesktopProvider.tsx:36
workspace?	Workspace<object>	The workspace to render, from createWorkspace(). Omit it and the provider creates an empty one of its own (register panels through useWorkspace().registry).	components/DockableDesktopProvider.tsx:20
zIndexBase?	number	Starting z-index for floating windows and all of the library's chrome overlays, which shift together via --rdd-z-base. Default 1000	components/DockableDesktopProvider.tsx:43

---

DropTarget

Defined in: types.ts:39

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

Properties

Property	Type	Defined in
leafId	string	types.ts:40
position	DropPosition	types.ts:41

---

FloatingWidgetsApi

Defined in: components/panelOverlay/useFloatingWidgets.tsx:43

What useFloatingWidgets() returns.

Methods

close()

close(id): void;

Defined in: components/panelOverlay/useFloatingWidgets.tsx:47

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/useFloatingWidgets.tsx:49

Close all managed windows.

Returns

void

isOpen()

isOpen(id): boolean;

Defined in: components/panelOverlay/useFloatingWidgets.tsx:51

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/useFloatingWidgets.tsx:45

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

Parameters

Parameter	Type
id	string
config	ManagedWidget

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/useFloatingWidgets.tsx:53

---

FloatingWindow

Defined in: types.ts:92

Bounds and depth metadata for floated panel windows.

Properties

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

---

HostClasses

Defined in: types.ts:518

Represents custom CSS classes injected into layout parts.

Properties

Property	Type	Defined in
modalBodyClass?	string	types.ts:520
modalClass?	string	types.ts:519
sidePanelBodyClass?	string	types.ts:522
sidePanelClass?	string	types.ts:521
windowBodyClass?	string	types.ts:524
windowClass?	string	types.ts:523

---

LayoutGridNode

Defined in: types.ts:47

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

Properties

Property	Type	Description	Defined in
children	LayoutNode[]	Children branches or leaf panels.	types.ts:52
orientation	SplitOrientation	Split orientation: horizontal places the children side by side, vertical stacks them.	types.ts:50
sizes	number[]	Relative percentage sizes of each child layout block.	types.ts:54
type	"branch"	-	types.ts:48

---

LayoutLeafNode

Defined in: types.ts:60

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

Properties

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

---

ManagedWidget

Defined in: components/panelOverlay/types.ts:45

Configuration for a widget spawned imperatively via useFloatingWidgets().open().

Properties

Property	Type	Description	Defined in
anchor?	FloatAnchor	Corner of the panel to dock to on first render. Default 'top-right'	components/panelOverlay/types.ts:59
content	ReactNode	Window body content.	components/panelOverlay/types.ts:57
height?	number	Initial height in pixels.	components/panelOverlay/types.ts:63
icon?	ReactNode	Optional icon shown to the left of the title in the header.	components/panelOverlay/types.ts:55
stretch?	Stretch	Which axes span the panel instead of carrying a fixed size. width/height above still apply to any axis that isn't spanning, and are what a spanning axis returns to when released. See Stretch	components/panelOverlay/types.ts:69
title	PanelTitle	Text shown in the window's header bar. Accepts a plain string or an i18n message descriptor. A descriptor is re-resolved on every render, so the header follows a language change without the window being closed and reopened — which a plain string cannot do here, because this config is stored by the overlay rather than re-read from your own render.	components/panelOverlay/types.ts:53
width?	number	Initial width in pixels.	components/panelOverlay/types.ts:61

---

MessageDescriptor

Defined in: types.ts:17

Structure representing localizable message descriptors used in context menus.

Properties

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

---

ModalOptions

Defined in: components/PanelProviderContext.tsx:49

Configuration options applied when opening a Modal.

Properties

Property	Type	Description	Defined in
bodyPadding?	string | number	CSS padding for the modal body content — a number (px) or any CSS value/shorthand (e.g. '10px 16px'). Default: 0 (edge-to-edge) — pass 10 to restore the pre-v6.0.0 default, or any value your content needs.	components/PanelProviderContext.tsx:63
closable?	boolean	If false, hides the modal backdrop exit click and header close button.	components/PanelProviderContext.tsx:57
icon?	ReactNode	Icon displayed in the modal title bar.	components/PanelProviderContext.tsx:53
size?	"small" | "auto" | "medium" | "large" | "fullscreen"	Size modifier affecting CSS max-width rules.	components/PanelProviderContext.tsx:55
title?	PanelTitle	Display title for the modal header.	components/PanelProviderContext.tsx:51

---

ModalsApi

Defined in: api/index.tsx:211

Returned by useModals.

Properties

Property	Type	Description	Defined in
alert	(options) => Promise<void>	Opens an RddAlert and resolves once it is acknowledged or dismissed.	api/index.tsx:228
close	(id) => void	-	api/index.tsx:217
closeAll	() => void	-	api/index.tsx:218
confirm	(options) => Promise<boolean>	Opens an RddConfirm and resolves true when it is confirmed, false when it is cancelled or dismissed (Escape, the backdrop, the ×, or a close by code).	api/index.tsx:226
get	(id) => OverlayInstance | undefined	-	api/index.tsx:219
open	<P>(component, props, options?) => string	-	api/index.tsx:216
setDirty	(id, dirty, options?) => void	-	api/index.tsx:221
stack	OverlayInstance[]	Open modals, bottom to top.	api/index.tsx:213
topmost	OverlayInstance | null	The top modal, or null.	api/index.tsx:215
update	(id, updates) => void	-	api/index.tsx:220

---

OpenPanelOptions

Defined in: types.ts:156

Options accepted by WorkspaceActions.openPanel.

Type Parameters

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

Properties

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

---

OverlayInstance

Defined in: components/PanelProviderContext.tsx:69

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:74
containerType	"modal" | "left-panel" | "right-panel"	The target rendering layout zone.	components/PanelProviderContext.tsx:79
dirty?	boolean	True if the form container has unsaved user edits.	components/PanelProviderContext.tsx:83
dirtyOptions?	DirtyStateOptions	Custom warning options applied to the automatic unsaved changes modal.	components/PanelProviderContext.tsx:85
id	string	Unique ID generated for this instance.	components/PanelProviderContext.tsx:71
options	SidePanelOptions | ModalOptions	Configuration metadata settings.	components/PanelProviderContext.tsx:81
props	Record<string, any>	Property props passed to the Component.	components/PanelProviderContext.tsx:77

---

OverlayState

Defined in: components/PanelProviderContext.tsx:89

Stores the active layout structures for floating overlays.

Properties

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

---

PanelContribution

Defined in: components/PanelContributionContext.tsx:29

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

Properties

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

---

PanelDefinition

Defined in: WorkspaceClient.ts:45

Per-panel definition supplied to createWorkspace({ panels }).

Properties

Property	Type	Description	Defined in
component	ComponentType<any>	-	WorkspaceClient.ts:47
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>; } | (() => string); }	-	WorkspaceClient.ts:48
defaultOptions.canClose?	boolean	Enables/disables closing actions for the tab/window.	components/PanelRegistry.ts:26
defaultOptions.canDrag?	boolean	Enables/disables window drag interactions.	components/PanelRegistry.ts:22
defaultOptions.canMinimize?	boolean	Enables/disables minimizing of the panel instance.	components/PanelRegistry.ts:24
defaultOptions.defaultAnchor?	FloatAnchor	Corner of the workspace to anchor newly-opened floating windows to.	components/PanelRegistry.ts:28
defaultOptions.disableLivePreview?	boolean	Disables live WebGL rendering canvas thumbnails inside the taskbar hover popup previews.	components/PanelRegistry.ts:30
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:20
defaultOptions.favoritePosition.height	string | number	-	components/PanelRegistry.ts:20
defaultOptions.favoritePosition.width	string | number	-	components/PanelRegistry.ts:20
defaultOptions.favoritePosition.x	string | number	-	components/PanelRegistry.ts:20
defaultOptions.favoritePosition.y	string | number	-	components/PanelRegistry.ts:20
defaultOptions.icon?	ReactNode	Icon placed next to title tags.	components/PanelRegistry.ts:16
defaultOptions.initialTarget?	"docked" | "floating" | "tabbed"	Initial mounting state inside the desktop layout grid.	components/PanelRegistry.ts:18
defaultOptions.renderHeaderActions?	(panelId) => ReactNode	Custom header actions renderer, placing custom components in the window/tab titlebar.	components/PanelRegistry.ts:32
defaultOptions.title?	| string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; } | (() => string)	Tab and window headers text — plain string or i18n descriptor.	components/PanelRegistry.ts:14

---

PanelEvents

Defined in: api/index.tsx:150

Lifecycle callbacks for usePanelEvents. Each is called at the moment it describes.

Properties

Property	Type	Defined in
onActivate?	() => void	api/index.tsx:151
onClose?	() => void	api/index.tsx:155
onContainerTypeChange?	(type) => void	api/index.tsx:157
onDeactivate?	() => void	api/index.tsx:152
onMinimize?	() => void	api/index.tsx:153
onResize?	(width, height) => void	api/index.tsx:156
onRestore?	() => void	api/index.tsx:154

---

PanelFloatPlacement

Defined in: components/panelOverlay/types.ts:35

Where a docked widget sits: which corner it is anchored to, plus which axes (if any) span the panel. Reported as a unit because a single gesture can change both at once — dropping a full-width bottom strip onto the left edge flips the anchor and the stretched axis together, and reporting those separately would expose a state that is never actually valid.

Properties

Property	Type	Defined in
anchor	FloatAnchor	components/panelOverlay/types.ts:36
stretch	Stretch | null	components/panelOverlay/types.ts:37

---

PanelHandle

Defined in: api/index.tsx:77

What a panel component knows about, and can do to, its own container. See usePanel.

Identity. id and the five functions (close, minimize, setDirty, setTitle, setIcon) never change identity for the panel's lifetime. The handle object itself changes when containerType, isActive, isMinimized or isFloating does. So don't list the handle in a dependency array: depend on the function you call, or on the values you write.

Properties

Property	Type	Description	Defined in
close	(options?) => void	Asks the container to close, honouring close guards and the dirty flag.	api/index.tsx:89
containerType	ContainerType	Where it is rendered. Updates live (a docked panel that is floated re-renders as 'floating-window').	api/index.tsx:81
id	string	This panel's instance id.	api/index.tsx:79
isActive	boolean	A workspace panel that is the globally active one. Always false in a modal or drawer.	api/index.tsx:83
isFloating	boolean	A workspace panel shown as a floating window.	api/index.tsx:87
isMinimized	boolean	A workspace panel that is minimized to the taskbar.	api/index.tsx:85
minimize	() => void	Minimizes a workspace panel. No effect in a modal or drawer.	api/index.tsx:91
setDirty	(dirty, options?) => void	Marks the panel as having unsaved changes.	api/index.tsx:93
setIcon	(icon) => void	Changes the icon on the panel's tab, floating title bar and taskbar button, or in a modal's or drawer's header. In a workspace panel, null goes back to the registration's defaultOptions.icon. The icon is not saved by saveLayout().	api/index.tsx:101
setTitle	(title) => void	Changes the title shown on the tab, window or modal.	api/index.tsx:95

---

PanelInfo

Defined in: types.ts:114

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

Properties

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

---

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:10
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>; } | (() => string); }	Default metadata settings configuration applied on instantiation.	components/PanelRegistry.ts:12
defaultOptions.canClose?	boolean	Enables/disables closing actions for the tab/window.	components/PanelRegistry.ts:26
defaultOptions.canDrag?	boolean	Enables/disables window drag interactions.	components/PanelRegistry.ts:22
defaultOptions.canMinimize?	boolean	Enables/disables minimizing of the panel instance.	components/PanelRegistry.ts:24
defaultOptions.defaultAnchor?	FloatAnchor	Corner of the workspace to anchor newly-opened floating windows to.	components/PanelRegistry.ts:28
defaultOptions.disableLivePreview?	boolean	Disables live WebGL rendering canvas thumbnails inside the taskbar hover popup previews.	components/PanelRegistry.ts:30
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:20
defaultOptions.favoritePosition.height	string | number	-	components/PanelRegistry.ts:20
defaultOptions.favoritePosition.width	string | number	-	components/PanelRegistry.ts:20
defaultOptions.favoritePosition.x	string | number	-	components/PanelRegistry.ts:20
defaultOptions.favoritePosition.y	string | number	-	components/PanelRegistry.ts:20
defaultOptions.icon?	ReactNode	Icon placed next to title tags.	components/PanelRegistry.ts:16
defaultOptions.initialTarget?	"docked" | "floating" | "tabbed"	Initial mounting state inside the desktop layout grid.	components/PanelRegistry.ts:18
defaultOptions.renderHeaderActions?	(panelId) => ReactNode	Custom header actions renderer, placing custom components in the window/tab titlebar.	components/PanelRegistry.ts:32
defaultOptions.title?	| string | { defaultMessage?: string; id: string; values?: Record<string, string | number>; } | (() => string)	Tab and window headers text — plain string or i18n descriptor.	components/PanelRegistry.ts:14

---

PanelSidebarSection

Defined in: components/PanelContributionContext.tsx:16

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

Properties

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

---

PanelTitleDescriptor

Defined in: components/PanelProviderContext.tsx:15

Descriptor object for localizable panel titles, supporting context translation systems.

Properties

Property	Type	Description	Defined in
defaultMessage?	string	Fallback string if translation key is missing.	components/PanelProviderContext.tsx:19
id	string	The translation dictionary key.	components/PanelProviderContext.tsx:17
values?	Record<string, string | number>	Parameters to inject into the translated text string.	components/PanelProviderContext.tsx:21

---

PointerDragConfig

Defined in: components/dragResize.ts:14

Shared pointer-drag-resize primitives.

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

Type Parameters

Type Parameter
TStart

Properties

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

---

RddAlertProps

Defined in: forms/AlertForm.tsx:10

Props for the RddAlert component.

Properties

Property	Type	Description	Defined in
alertType?	"info" | "warning" | "success" | "danger"	Picks the built-in icon and its colour. Defaults to 'info'.	forms/AlertForm.tsx:18
icon?	ReactNode	The icon left of the message. Omit it for the built-in icon of alertType, pass null for none, or pass your own node. It is coloured by alertType.	forms/AlertForm.tsx:23
message	| string | { defaultMessage?: string; id: string; values?: any; }	Main message text or localizable descriptor to display.	forms/AlertForm.tsx:16
okLabel?	| string | { defaultMessage?: string; id: string; values?: any; }	Label of the button. Defaults to the ok predefined message.	forms/AlertForm.tsx:26
onSettled?	() => void	Fired exactly once, however the dialog ends: the OK button, Enter, Escape, the backdrop, the × or the modal being closed by code.	forms/AlertForm.tsx:31
title?	| string | { defaultMessage?: string; id: string; values?: any; } | (() => string)	Optional custom title text or localizable descriptor for the dialog container.	forms/AlertForm.tsx:13

---

RddConfirmProps

Defined in: forms/ConfirmationForm.tsx:10

Props for the RddConfirm component.

Properties

Property	Type	Description	Defined in
alert?	string	Optional auxiliary top alert notification text.	forms/ConfirmationForm.tsx:18
alertType?	"info" | "warning" | "success" | "danger"	Type style classification for the alert notice banner.	forms/ConfirmationForm.tsx:20
icon?	ReactNode	The icon left of the message. Omit it for the built-in question icon, pass null for none, or pass your own node. It is coloured by alertType.	forms/ConfirmationForm.tsx:36
message	| string | { defaultMessage?: string; id: string; values?: any; }	Main message text or localizable descriptor to display.	forms/ConfirmationForm.tsx:16
onCancel?	() => void	Callback fired when the user selects the cancel button.	forms/ConfirmationForm.tsx:26
onOK?	() => void	Callback fired when the user selects the confirm button.	forms/ConfirmationForm.tsx:24
onSettled?	(ok) => void	Fired exactly once, however the dialog ends: true for the confirm button (or Enter), false for the cancel button, Escape, the backdrop, the × or the modal being closed by code.	forms/ConfirmationForm.tsx:31
title?	| string | { defaultMessage?: string; id: string; values?: any; } | (() => string)	Optional custom title text or localizable descriptor for the dialog container.	forms/ConfirmationForm.tsx:13
useYesNoTitles?	boolean	If true, changes action button labels to 'Yes' and 'No' instead of 'OK' and 'Cancel'.	forms/ConfirmationForm.tsx:22

---

RddDesktopProps

Defined in: components/WindowManager.tsx:41

Props for <RddDesktop>.

Properties

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

---

RddFloatingWidgetProps

Defined in: components/panelOverlay/FloatingWidget.tsx:22

Props for <RddFloatingWidget>.

Methods

onClose()

onClose(): void;

Defined in: components/panelOverlay/FloatingWidget.tsx:32

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/FloatingWidget.tsx:68
defaultAnchor	FloatAnchor	Corner of the panel to dock to on first render. See FloatAnchor	components/panelOverlay/FloatingWidget.tsx:34
defaultHeight	number	Initial height in pixels. Ignored on an axis that starts stretched, and restored to when that axis is later released.	components/panelOverlay/FloatingWidget.tsx:40
defaultStretch?	Stretch	Which axes span the panel on first render. Uncontrolled: gestures update it from here. See Stretch	components/panelOverlay/FloatingWidget.tsx:45
defaultWidth	number	Initial width in pixels. Ignored on an axis that starts stretched, and restored to when that axis is later released.	components/panelOverlay/FloatingWidget.tsx:37
icon?	ReactNode	Optional icon shown to the left of the title in the header.	components/panelOverlay/FloatingWidget.tsx:28
id	string	Unique identifier within the panel overlay. Used for z-order and stack tracking.	components/panelOverlay/FloatingWidget.tsx:24
onPlacementChange?	(placement) => void	Called whenever a gesture changes where the widget sits — a stretched axis released, a re-dock, or a detach. Reports anchor and stretch together, because one gesture can change both at once and reporting them separately would surface a state that is never valid. This is also the only way to persist placement: the library serialises nothing about inner widgets, so store what you receive here and feed it back via defaultAnchor/stretch.	components/panelOverlay/FloatingWidget.tsx:62
open	boolean	Whether the window is mounted and visible. Set to false to close/unmount it.	components/panelOverlay/FloatingWidget.tsx:30
stretch?	Stretch | null	Controlled stretch state. When provided — including as null — the caller is the single source of truth: gestures report through RddFloatingWidgetProps.onPlacementChange instead of updating internally, and the caller must echo the new value back. Omit entirely (undefined) for uncontrolled behaviour, matching ToolbarToggleItem.active and Sidebar.activeTabId.	components/panelOverlay/FloatingWidget.tsx:53
stretchable?	boolean	Whether this widget may span the panel at all. false disables resize-to-stretch snapping, for content that only makes sense at a bounded size. Default true.	components/panelOverlay/FloatingWidget.tsx:67
title	PanelTitle	Text shown in the window's header bar. Accepts a plain string or an i18n message descriptor.	components/panelOverlay/FloatingWidget.tsx:26

---

RddPanelOverlayProps

Defined in: components/panelOverlay/PanelOverlayRoot.tsx:16

Props for <RddPanelOverlay>.

Properties

Property	Type	Defined in
children	ReactNode	components/panelOverlay/PanelOverlayRoot.tsx:17
className?	string	components/panelOverlay/PanelOverlayRoot.tsx:18
style?	CSSProperties	components/panelOverlay/PanelOverlayRoot.tsx:19

---

RddPanelToolbarProps

Defined in: components/panelOverlay/PanelToolbar.tsx:18

Props for <RddPanelToolbar>.

Properties

Property	Type	Description	Defined in
buttonSize?	number	Button size in pixels for all buttons in this toolbar (sets --rdd-panel-toolbar-btn-size). The icon inside follows --rdd-panel-toolbar-icon-size. Falls back to the stylesheet when unset.	components/panelOverlay/PanelToolbar.tsx:26
buttonVariant?	ButtonVariant	Default button style inherited by ToolbarButton and ToolbarToggle children. Default 'ghost'	components/panelOverlay/PanelToolbar.tsx:24
children?	ReactNode	-	components/panelOverlay/PanelToolbar.tsx:29
className?	string	-	components/panelOverlay/PanelToolbar.tsx:28
position	ToolbarPosition	Edge of the panel overlay to attach to. See ToolbarPosition	components/panelOverlay/PanelToolbar.tsx:20
style?	CSSProperties	-	components/panelOverlay/PanelToolbar.tsx:27
variant?	ToolbarVariant	Background style of the toolbar strip. Default 'transparent'	components/panelOverlay/PanelToolbar.tsx:22

---

RddSidebarProps

Defined in: components/Sidebar.tsx:122

Properties

Property	Type	Description	Defined in
activeTabId?	string | null	Controlled active tab id. Omit to use internal state.	components/Sidebar.tsx:152
children?	ReactNode	Main workspace content rendered alongside the sidebar.	components/Sidebar.tsx:206
defaultWidth?	number	Initial drawer width in pixels. Default: 280	components/Sidebar.tsx:144
footerAction?	| SidebarRailEntry | SidebarRailEntry[]	Mirror of headerAction, pinned to the bottom of the tab strip via its own .rdd-sidebar-footer-area — e.g. a "Settings" tab that should always sit at the bottom regardless of tab count. Override --rdd-sidebar-footer-area-padding-top/ --rdd-sidebar-footer-area-padding-bottom (both default 8px) to control its spacing.	components/Sidebar.tsx:142
headerAction?	| SidebarRailEntry | SidebarRailEntry[]	One or more non-toggling action buttons and/or real tabs shown above the tabs, in their own .rdd-sidebar-header-area — independent of the tabs' own inter-item gap. Pass a single { icon, label, onClick }/{ render } object (the common case), or an array mixing action buttons, custom renders, and SidebarTab entries — a tab entry here behaves exactly like a main-list tab (mounts, activates, closes through the same lifecycle). Override --rdd-sidebar-header-area-padding-top/--rdd-sidebar-header-area-padding-bottom (both default 8px) to control its spacing/effective height.	components/Sidebar.tsx:135
hideDefaultHeader?	boolean	Suppress the library's own drawer header (title + showCloseButton's close button) for every tab, so renderHeader (or each tab's own renderContent) can supply a header, border, and styling instead. Applies uniformly across all tabs — there's no per-tab override. Passing renderHeader by itself has the same suppressing effect even if this is left unset — the two conditions are combined with OR, precisely so that supplying renderHeader alone is never a silent no-op. The close mechanism is unaffected either way: the onClose parameter passed to renderContent/renderHeader, or useSidebarTab().onClose from anywhere in a tab's content tree. Default: false	components/Sidebar.tsx:183
maxWidth?	number	Maximum drawer width in pixels during drag-resize. Default: 600	components/Sidebar.tsx:148
minWidth?	number	Minimum drawer width in pixels during drag-resize. Default: 150	components/Sidebar.tsx:146
onActiveTabChange?	(tabId) => void	Called when the active tab changes.	components/Sidebar.tsx:154
onStripVisibilityChange?	(visible) => void	Called when showStrip/hideStrip is invoked on the imperative handle.	components/Sidebar.tsx:162
onVisibilityChange?	(visible) => void	Called when show/hide/toggle is invoked on the imperative handle.	components/Sidebar.tsx:158
onWidthChange?	(px) => void	Called during drag resize and on setWidth() with the new pixel width.	components/Sidebar.tsx:150
position?	"left" | "right"	Which side the activity bar and drawer appear on. Default: 'right'	components/Sidebar.tsx:124
renderHeader?	(tab, onClose, onOpen) => ReactNode	Custom header renderer used in place of the library's own drawer header. Passing renderHeader is by itself sufficient to suppress the default header, whether or not hideDefaultHeader is also set — the two props are combined with OR. Called once for whichever tab is currently active, so the same header markup (e.g. a hamburger icon, a search field, a close button) is shared uniformly across every tab instead of being repeated inside each tab's own renderContent. Omit renderHeader and set hideDefaultHeader: true to render no header at all and let each tab's renderContent supply its own instead.	components/Sidebar.tsx:198
showCloseButton?	boolean	Show an "X" close button in the expanded drawer's header, as an additional way to collapse the sidebar (equivalent to clicking the active tab's own icon again). Opt-in. Default: false. Has no effect once the default header is suppressed — via hideDefaultHeader, or simply by passing renderHeader (either one is sufficient) — since the entire default header, this button included, is skipped for every tab in that case.	components/Sidebar.tsx:170
stripVisible?	boolean	Collapse only the activity bar strip, leaving the drawer unaffected. Default: true	components/Sidebar.tsx:160
tabs	SidebarTab[]	-	components/Sidebar.tsx:125
visible?	boolean	Collapse the entire sidebar (strip + drawer). Default: true	components/Sidebar.tsx:156

---

RddSidePanelsProps

Defined in: api/index.tsx:317

Props for RddSidePanels.

Properties

Property	Type	Description	Defined in
defaultWidth?	string | number	Width used when an openLeft/openRight call doesn't give one. Number = px. Default 400	api/index.tsx:321
side?	"left" | "right"	Render only one side's drawer. Omit to render both.	api/index.tsx:319

---

RddToastsProps

Defined in: components/Toast.tsx:55

Props for <RddToasts>. Mount one instance at your app root, alongside <RddModals>.

Example

<RddToasts 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:75
animation?	"none" | "slide" | "fade"	Entry/exit animation style. Default 'slide'	components/Toast.tsx:67
defaultClosable?	boolean	Show the × close button on all notifications unless overridden per-toast. Default true	components/Toast.tsx:63
defaultDuration?	number	Default auto-dismiss delay in ms. 0 = all notifications sticky. Default 5000	components/Toast.tsx:61
maxVisible?	number	Maximum number of notifications shown simultaneously. Extras are queued. Default 3	components/Toast.tsx:59
newestOnTop?	boolean	When true, newest notification appears at the top of the stack. Default false	components/Toast.tsx:69
pauseOnHover?	boolean	Pause the auto-dismiss timer while the cursor is over a notification. Default true	components/Toast.tsx:65
position?	ToastPosition	Where notifications appear in the viewport. Default 'top-right'	components/Toast.tsx:57
progressBar?	boolean	Show a countdown progress bar at the bottom of each notification. Default false	components/Toast.tsx:71
width?	number	Width of each notification card in pixels. Default 320	components/Toast.tsx:73

---

RddToolbarButtonProps

Defined in: components/panelOverlay/PanelToolbar.tsx:116

Props for <RddToolbarButton>.

Methods

onClick()

onClick(): void;

Defined in: components/panelOverlay/PanelToolbar.tsx:120

Click handler.

Returns

void

Properties

Property	Type	Description	Defined in
disabled?	boolean	-	components/panelOverlay/PanelToolbar.tsx:121
icon	ReactNode	Button icon: an SVG, an icon component or an icon-font glyph. Pass no size: the library sizes it with --rdd-panel-toolbar-icon-size.	components/panelOverlay/PanelToolbar.tsx:118
title?	string	Tooltip text and accessible aria-label.	components/panelOverlay/PanelToolbar.tsx:123
variant?	ButtonVariant	Visual style override. Falls back to the parent PanelToolbar's buttonVariant.	components/panelOverlay/PanelToolbar.tsx:125

---

RddToolbarProps

Defined in: components/Toolbar.tsx:146

Properties

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

---

RddToolbarSearchProps

Defined in: components/panelOverlay/ToolbarSearch.tsx:26

Props for <RddToolbarSearch>.

Methods

onSearch()

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

Defined in: components/panelOverlay/ToolbarSearch.tsx:34

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/ToolbarSearch.tsx:36

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 the searchPlaceholder message ('Search…')	components/panelOverlay/ToolbarSearch.tsx:28

---

RddToolbarToggleProps

Defined in: components/panelOverlay/PanelToolbar.tsx:148

Props for <RddToolbarToggle>.

Methods

onToggle()

onToggle(): void;

Defined in: components/panelOverlay/PanelToolbar.tsx:154

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/PanelToolbar.tsx:152
disabled?	boolean	-	components/panelOverlay/PanelToolbar.tsx:155
icon	ReactNode	Button icon: an SVG, an icon component or an icon-font glyph. Pass no size: the library sizes it with --rdd-panel-toolbar-icon-size.	components/panelOverlay/PanelToolbar.tsx:150
title?	string	Tooltip text and accessible aria-label.	components/panelOverlay/PanelToolbar.tsx:157
variant?	ButtonVariant	Visual style override. Falls back to the parent PanelToolbar's buttonVariant.	components/panelOverlay/PanelToolbar.tsx:159

---

ResizeConstraints

Defined in: components/dragResize.ts:71

Properties

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

---

ResizeRect

Defined in: components/dragResize.ts:64

Properties

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

---

ResolvedToastOptions

Defined in: components/Toast.tsx:40

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:44
content?	ReactNode	components/Toast.tsx:46
duration	number	components/Toast.tsx:43
icon?	ReactNode	components/Toast.tsx:45
id	string	components/Toast.tsx:41
onClose?	() => void	components/Toast.tsx:47
type	ToastType	components/Toast.tsx:42

---

SearchResult

Defined in: components/panelOverlay/ToolbarSearch.tsx:12

A single result item returned by RddToolbarSearchProps.onSearch.

Properties

Property	Type	Description	Defined in
description?	string	Optional secondary text shown below the label in the dropdown.	components/panelOverlay/ToolbarSearch.tsx:18
group?	string	Optional group header used to bucket results visually.	components/panelOverlay/ToolbarSearch.tsx:20
icon?	ReactNode	Optional icon shown to the left of the label.	components/panelOverlay/ToolbarSearch.tsx:22
id	string	Unique identifier for this result — passed to onSelect.	components/panelOverlay/ToolbarSearch.tsx:14
label	string	Primary display text.	components/panelOverlay/ToolbarSearch.tsx:16

---

SerializedLayout

Defined in: types.ts:528

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

Properties

Property	Type	Description	Defined in
activePanelId?	string | null	The globally active panel at save time — the one the user was actually looking at. Omitted when nothing was active, and when the active panel didn't survive this snapshot's serializability pruning (see WorkspaceActions.saveLayout) — so it never names a panel absent from this payload's own panels. Absent on every layout saved before this field existed, in which case the restore derives it from gridRoot's own per-leaf selection instead; a present-but-no-longer-valid value falls back to the same derivation. version is deliberately not bumped for this: the field is optional and its absence is a supported, fully-handled case rather than a schema a migration has to branch on.	types.ts:542
floating	FloatingWindow[]	-	types.ts:544
gridRoot	LayoutNode	-	types.ts:543
minimized	{ component: string; id: string; title: string | MessageDescriptor | (() => string); }[]	-	types.ts:545
panels	Record<string, PanelInfo>	-	types.ts:546
version?	number	Schema version — absent on layouts saved before this field was introduced (treated as 0).	types.ts:530

---

ShowContextMenuOptions

Defined in: components/ContextMenu.tsx:53

Properties

Property	Type	Description	Defined in
dir?	"rtl" | "ltr"	The menu's direction. By default it is the direction of the element the menu was opened from (the event's target); a workspace's showContextMenu passes its own direction for a menu opened without an event. The menu is portaled to <body>, so it can't inherit either.	components/ContextMenu.tsx:63
event?	| MouseEvent | TouchEvent | MouseEvent<Element, MouseEvent> | TouchEvent<Element>	-	components/ContextMenu.tsx:54
initialFocus?	"menu" | "first-item"	Where focus goes when the menu opens. 'menu' (the default) focuses the menu itself, with no item highlighted: ArrowDown then reaches the first item and ArrowUp the last. 'first-item' focuses the first enabled item, for a menu opened from the keyboard. When this is left out, a keyboard contextmenu event (the ContextMenu key or Shift+F10, which report no pointer position) opens on the first item and everything else, including a call with no event, on the menu: the same view every time, whatever the user did before.	components/ContextMenu.tsx:72
items	ContextMenuItem[]	-	components/ContextMenu.tsx:57
x?	number	-	components/ContextMenu.tsx:55
y?	number	-	components/ContextMenu.tsx:56

---

SidebarActionButton

Defined in: components/Sidebar.tsx:71

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

Properties

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

---

SidebarContext

Defined in: components/Sidebar.tsx:229

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

Properties

Property	Type	Description	Defined in
closeDrawer	() => void	-	components/Sidebar.tsx:231
getActiveTab	() => string | null	-	components/Sidebar.tsx:232
isSecondary	boolean	True if this instance is a <RddSecondarySidebar>, false for a primary <RddSidebar>.	components/Sidebar.tsx:236
openTab	(tabId) => void	-	components/Sidebar.tsx:230
position	"left" | "right"	Which side this Sidebar instance is rendering on.	components/Sidebar.tsx:234

---

SidebarCustomEntry

Defined in: components/Sidebar.tsx:87

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

Properties

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

---

SidebarHandle

Defined in: components/Sidebar.tsx:212

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

Properties

Property	Type	Defined in
closeDrawer	() => void	components/Sidebar.tsx:214
getActiveTab	() => string | null	components/Sidebar.tsx:215
getWidth	() => number	components/Sidebar.tsx:222
hide	() => void	components/Sidebar.tsx:217
hideStrip	() => void	components/Sidebar.tsx:220
openTab	(tabId) => void	components/Sidebar.tsx:213
setWidth	(px) => void	components/Sidebar.tsx:221
show	() => void	components/Sidebar.tsx:216
showStrip	() => void	components/Sidebar.tsx:219
toggle	() => void	components/Sidebar.tsx:218

---

SidebarTab

Defined in: components/Sidebar.tsx:32

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:50
hidden?	boolean	Omit this tab's rail button entirely — no icon, no click target — while it remains fully openable via openTab() / useSidebar().openTab() / a controlled activeTabId. Use for menu-driven panels with no persistent icon (e.g. a Google-Maps-style hamburger that opens content not otherwise pinned to the rail). Default: false	components/Sidebar.tsx:44
icon?	ReactNode	Required unless hidden is true — a hidden tab never renders a rail button, so it has no icon to show.	components/Sidebar.tsx:36
id	string	-	components/Sidebar.tsx:33
label	string	-	components/Sidebar.tsx:34
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:56
renderContent	(tabId, onClose, onOpen) => ReactNode	Called to obtain the drawer content for this tab.	components/Sidebar.tsx:63

---

SidebarTabContext

Defined in: components/Sidebar.tsx:243

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:246
onOpen	() => void	components/Sidebar.tsx:245
openTab	(tabId) => void	components/Sidebar.tsx:247
tabId	string	components/Sidebar.tsx:244

---

SidePanelOptions

Defined in: components/PanelProviderContext.tsx:33

Configuration options applied when opening a SidePanel.

Properties

Property	Type	Description	Defined in
bodyPadding?	string | number	CSS padding for the panel body content — a number (px) or any CSS value/shorthand (e.g. '10px 16px'). Default: 0 (edge-to-edge) — pass 10 to restore the pre-v6.0.0 default, or any value your content needs.	components/PanelProviderContext.tsx:45
icon?	ReactNode	Icon displayed next to the panel title.	components/PanelProviderContext.tsx:37
title?	PanelTitle	Display title for the side-panel header.	components/PanelProviderContext.tsx:35
width?	string | number	Specific CSS width (e.g. 300, '40%') for the panel container.	components/PanelProviderContext.tsx:39

---

SidePanelsApi

Defined in: api/index.tsx:256

Returned by useSidePanels.

Properties

Property	Type	Description	Defined in
close	(id) => void	-	api/index.tsx:261
closeAll	() => void	Closes both drawers.	api/index.tsx:263
get	(id) => OverlayInstance | undefined	-	api/index.tsx:264
left	OverlayInstance | null	-	api/index.tsx:257
openLeft	<P>(component, props, options?) => Promise<string | null>	-	api/index.tsx:259
openRight	<P>(component, props, options?) => Promise<string | null>	-	api/index.tsx:260
right	OverlayInstance | null	-	api/index.tsx:258
setDirty	(id, dirty, options?) => void	-	api/index.tsx:266
update	(id, updates) => void	-	api/index.tsx:265

---

ToastAdapter

Defined in: components/Toast.tsx:98

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

See

RddToastsProps.adapter

Methods

dismiss()

dismiss(id?): void;

Defined in: components/Toast.tsx:104

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

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

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 <RddToasts> renders nothing. A component causes <RddToasts> to portal-render it with a position prop.	components/Toast.tsx:109

---

ToastFunction()

Defined in: components/Toast.tsx:160

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

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:172
error	(msg, opts?) => string	Show an error notification. Returns the notification ID.	components/Toast.tsx:170
info	(msg, opts?) => string	Show an info notification. Returns the notification ID.	components/Toast.tsx:164
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:178
success	(msg, opts?) => string	Show a success notification. Returns the notification ID.	components/Toast.tsx:166
warning	(msg, opts?) => string	Show a warning notification. Returns the notification ID.	components/Toast.tsx:168

---

ToastOptions

Defined in: components/Toast.tsx:19

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

Properties

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

---

ToastPromiseMessages

Defined in: components/Toast.tsx:83

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:89
pending	ReactNode	Shown while the promise is pending.	components/Toast.tsx:85
success	ReactNode | ((result) => ReactNode)	Shown on fulfillment. Pass a function to include the resolved value.	components/Toast.tsx:87

---

ToolbarActionItem

Defined in: components/Toolbar.tsx:22

A one-shot action button.

Properties

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

---

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

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:127
defaultIcon	ReactNode	Icon shown when no sub-item is active.	components/Toolbar.tsx:118
disabled?	boolean	-	components/Toolbar.tsx:120
id	string	Serves as both the button ID and the radio group key in ToolbarContext.	components/Toolbar.tsx:114
items	ToolbarGroupEntry[]	-	components/Toolbar.tsx:119
label	string	Tooltip / aria-label shown when no sub-item is active.	components/Toolbar.tsx:116
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:132
type	"group"	-	components/Toolbar.tsx:112

---

ToolbarGroupSubItem

Defined in: components/Toolbar.tsx:87

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:93
icon	ReactNode	-	components/Toolbar.tsx:90
id	string	-	components/Toolbar.tsx:88
label	string	-	components/Toolbar.tsx:89
onActivate?	(id) => void	Called when this sub-item is selected.	components/Toolbar.tsx:95
shortcut?	string	Keyboard shortcut displayed in the flyout panel.	components/Toolbar.tsx:92

---

ToolbarHandle

Defined in: components/Toolbar.tsx:159

Methods

hide()

hide(): void;

Defined in: components/Toolbar.tsx:161

Returns

void

show()

show(): void;

Defined in: components/Toolbar.tsx:160

Returns

void

toggle()

toggle(): void;

Defined in: components/Toolbar.tsx:162

Returns

void

---

ToolbarRadioItem

Defined in: components/Toolbar.tsx:32

A mutually-exclusive radio button within a named group.

Properties

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

---

ToolbarSeparator

Defined in: components/Toolbar.tsx:74

A visual divider between button groups.

Properties

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

---

ToolbarToggleItem

Defined in: components/Toolbar.tsx:55

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

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

Properties

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

---

Workspace

Defined in: api/index.tsx:35

A workspace: the layout, every action on it, the panel registry and the event bus. It is live from the moment it is created — calls made before any <DockableDesktopProvider> mounts apply immediately.

Extends

• WorkspaceClient<TEvents>

Type Parameters

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

Methods

closeLeafGroup()

closeLeafGroup(leafId, options?): Promise<void>;

Defined in: WorkspaceClient.ts:260

Closes a leaf group: each of its tabs is closed through the guarded close path, then the group is removed once empty. A tab whose close guard refuses — or a dirty tab that onConfirm doesn't approve — stays open, and so does its group. Resolves once every close request has been settled.

Parameters

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

Returns

Promise<void>

Inherited from

WorkspaceClient.closeLeafGroup

closePanel()

closePanel(id): void;

Defined in: WorkspaceClient.ts:188

Parameters

Parameter	Type
id	string

Returns

void

Inherited from

WorkspaceClient.closePanel

dockPanel()

dockPanel(...args): void;

Defined in: WorkspaceClient.ts:200

Parameters

Parameter	Type
...args	[string, string]

Returns

void

Inherited from

WorkspaceClient.dockPanel

dockPanelToGroup()

dockPanelToGroup(
   id, 
   targetLeafId, 
   position): void;

Defined in: WorkspaceClient.ts:245

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

Parameters

Parameter	Type
id	string
targetLeafId	string
position	DropPosition

Returns

void

Inherited from

WorkspaceClient.dockPanelToGroup

dockPanelToWorkspaceEdge()

dockPanelToWorkspaceEdge(id, position): void;

Defined in: WorkspaceClient.ts:307

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

Parameters

Parameter	Type
id	string
position	SplitDirection

Returns

void

Inherited from

WorkspaceClient.dockPanelToWorkspaceEdge

findPanelId()

findPanelId(component, dedupeKey): string | null;

Defined in: WorkspaceClient.ts:221

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

Parameters

Parameter	Type
component	string
dedupeKey	string

Returns

string | null

Inherited from

WorkspaceClient.findPanelId

floatPanel()

floatPanel(...args): void;

Defined in: WorkspaceClient.ts:196

Parameters

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

Returns

void

Inherited from

WorkspaceClient.floatPanel

focusPanel()

focusPanel(id): void;

Defined in: WorkspaceClient.ts:211

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

Inherited from

WorkspaceClient.focusPanel

getOpenPanelIds()

getOpenPanelIds(): string[];

Defined in: WorkspaceClient.ts:217

Returns the IDs of all currently open panels.

Returns

string[]

Inherited from

WorkspaceClient.getOpenPanelIds

isOpen()

isOpen(id): boolean;

Defined in: WorkspaceClient.ts:214

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

Parameters

Parameter	Type
id	string

Returns

boolean

Inherited from

WorkspaceClient.isOpen

loadLayout()

loadLayout(json): boolean;

Defined in: WorkspaceClient.ts:227

Parameters

Parameter	Type
json	string

Returns

boolean

Inherited from

WorkspaceClient.loadLayout

maximizePanel()

maximizePanel(id): void;

Defined in: WorkspaceClient.ts:204

Parameters

Parameter	Type
id	string

Returns

void

Inherited from

WorkspaceClient.maximizePanel

minimizePanel()

minimizePanel(id): void;

Defined in: WorkspaceClient.ts:190

Parameters

Parameter	Type
id	string

Returns

void

Inherited from

WorkspaceClient.minimizePanel

movePanelOrder()

movePanelOrder(
   panelId, 
   targetLeafId, 
   targetIndex): void;

Defined in: WorkspaceClient.ts:250

Reorders a panel's tab within its leaf group.

Parameters

Parameter	Type
panelId	string
targetLeafId	string
targetIndex	number

Returns

void

Inherited from

WorkspaceClient.movePanelOrder

onLayoutChanged()

onLayoutChanged(callback): () => void;

Defined in: WorkspaceClient.ts:363

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

Parameters

Parameter	Type
callback	() => void

Returns

() => void

Inherited from

WorkspaceClient.onLayoutChanged

onPanelClose()

onPanelClose(callback): () => void;

Defined in: WorkspaceClient.ts:341

Subscribe to panel close events.

Parameters

Parameter	Type
callback	(id) => void

Returns

() => void

Inherited from

WorkspaceClient.onPanelClose

onPanelMinimize()

onPanelMinimize(callback): () => void;

Defined in: WorkspaceClient.ts:348

Subscribe to panel minimize events.

Parameters

Parameter	Type
callback	(id) => void

Returns

() => void

Inherited from

WorkspaceClient.onPanelMinimize

onPanelOpen()

onPanelOpen(callback): () => void;

Defined in: WorkspaceClient.ts:333

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

Parameters

Parameter	Type
callback	(id, component) => void

Returns

() => void

Inherited from

WorkspaceClient.onPanelOpen

onPanelRestore()

onPanelRestore(callback): () => void;

Defined in: WorkspaceClient.ts:355

Subscribe to panel restore events.

Parameters

Parameter	Type
callback	(id) => void

Returns

() => void

Inherited from

WorkspaceClient.onPanelRestore

onPanelsExcluded()

onPanelsExcluded(callback): () => void;

Defined in: WorkspaceClient.ts:370

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

Parameters

Parameter	Type
callback	(panels) => void

Returns

() => void

Inherited from

WorkspaceClient.onPanelsExcluded

openPanel()

openPanel(...args): void;

Defined in: WorkspaceClient.ts:186

Parameters

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

Returns

void

Inherited from

WorkspaceClient.openPanel

publish()

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

Defined in: WorkspaceClient.ts:316

Type Parameters

Type Parameter
K extends string | number | symbol

Parameters

Parameter	Type
event	K
data	TEvents & BuiltInEvents[K]

Returns

void

Inherited from

WorkspaceClient.publish

registerCloseGuard()

registerCloseGuard(id, guard): void;

Defined in: WorkspaceClient.ts:265

Registers a guard that can veto closing the given panel.

Parameters

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

Returns

void

Inherited from

WorkspaceClient.registerCloseGuard

registerStateProvider()

registerStateProvider(id, provider): void;

Defined in: WorkspaceClient.ts:275

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

Parameters

Parameter	Type
id	string
provider	() => unknown

Returns

void

Inherited from

WorkspaceClient.registerStateProvider

requestClosePanel()

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

Defined in: WorkspaceClient.ts:302

Requests that a panel close, honoring any registered close guard and its dirty flag: a dirty panel closes only if onConfirm resolves true (without onConfirm it stays open). force: true skips both. Resolves once the close (or the refusal) has been decided.

Parameters

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

Returns

Promise<void>

Inherited from

WorkspaceClient.requestClosePanel

restorePanel()

restorePanel(...args): void;

Defined in: WorkspaceClient.ts:192

Parameters

Parameter	Type
...args	[string, { focus?: boolean; }]

Returns

void

Inherited from

WorkspaceClient.restorePanel

saveLayout()

saveLayout(): string;

Defined in: WorkspaceClient.ts:225

Returns

string

Inherited from

WorkspaceClient.saveLayout

setDirection()

setDirection(dir): void;

Defined in: WorkspaceClient.ts:229

Parameters

Parameter	Type
dir	"rtl" | "ltr"

Returns

void

Inherited from

WorkspaceClient.setDirection

setPanelDirty()

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

Defined in: WorkspaceClient.ts:283

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

Parameters

Parameter	Type
id	string
dirty	boolean
options?	DirtyStateOptions

Returns

void

Inherited from

WorkspaceClient.setPanelDirty

setPanelIcon()

setPanelIcon(id, icon): void;

Defined in: WorkspaceClient.ts:293

Sets an open panel's tab/window/taskbar icon; null restores its registration's icon. Not saved by saveLayout().

Parameters

Parameter	Type
id	string
icon	ReactNode

Returns

void

Inherited from

WorkspaceClient.setPanelIcon

showContextMenu()

showContextMenu(options): void;

Defined in: WorkspaceClient.ts:312

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

Parameters

Parameter	Type
options	ShowContextMenuOptions

Returns

void

Inherited from

WorkspaceClient.showContextMenu

subscribe()

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

Defined in: WorkspaceClient.ts:323

Type Parameters

Type Parameter
K extends string | number | symbol

Parameters

Parameter	Type
event	K
callback	(data) => void

Returns

() => void

Inherited from

WorkspaceClient.subscribe

unregisterCloseGuard()

unregisterCloseGuard(id): void;

Defined in: WorkspaceClient.ts:270

Removes a previously registered close guard.

Parameters

Parameter	Type
id	string

Returns

void

Inherited from

WorkspaceClient.unregisterCloseGuard

unregisterStateProvider()

unregisterStateProvider(id): void;

Defined in: WorkspaceClient.ts:280

Removes a previously registered state provider.

Parameters

Parameter	Type
id	string

Returns

void

Inherited from

WorkspaceClient.unregisterStateProvider

updateFloatingPosition()

updateFloatingPosition(id, updates): void;

Defined in: WorkspaceClient.ts:237

Updates position/size/anchor of a floating panel.

Parameters

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

Returns

void

Inherited from

WorkspaceClient.updateFloatingPosition

updatePanelTitle()

updatePanelTitle(id, title): void;

Defined in: WorkspaceClient.ts:288

Updates a panel's displayed title.

Parameters

Parameter	Type
id	string
title	string | MessageDescriptor | (() => string)

Returns

void

Inherited from

WorkspaceClient.updatePanelTitle

updateSplitSizes()

updateSplitSizes(path, sizes): void;

Defined in: WorkspaceClient.ts:232

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

Parameters

Parameter	Type
path	number[]
sizes	number[]

Returns

void

Inherited from

WorkspaceClient.updateSplitSizes

Properties

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

---

WorkspaceActions

Defined in: types.ts:233

Every layout action, the event bus, and layout serialization — the methods of a workspace.

Call them on the workspace from useWorkspace() inside a component, or on the object createWorkspace() returned, from anywhere.

Example

function OpenMapButton() {
  const { openPanel } = useWorkspace();
  return <button onClick={() => openPanel('map-1', 'map')}>Open Map</button>;
}

Properties

Property	Type	Description	Defined in
closeLeafGroup	(leafId, options?) => Promise<void>	Closes a leaf group: each of its panels is closed through the guarded close path (as if by its own tab ×), then the group is removed once empty. A close guard that refuses, or a dirty panel that onConfirm doesn't approve, keeps that panel — and therefore the group. A group with canClose: false is left alone.	types.ts:420
closePanel	(id) => void	Closes a panel immediately, bypassing dirty-state close guards. For guarded close, use WorkspaceActions.requestClosePanel.	types.ts:268
dockPanel	(id, targetLeafId?) => void	Returns a floating window to a docked grid tab group.	types.ts:292
dockPanelToGroup	(id, targetLeafId, position) => void	Splits an existing leaf group and docks a panel to the given side.	types.ts:403
dockPanelToWorkspaceEdge	(id, position) => void	Docks a floating panel to a workspace edge, creating a full-width or full-height column/row.	types.ts:486
findPanelId	(component, dedupeKey) => string | null	Finds the ID of an already-open panel of the given component with a matching dedupeKey (set via openPanel's dedupeKey option). Uses a synchronous stateRef read — safe to call outside of render.	types.ts:351
floatPanel	(id, rect?, anchor?) => void	Detaches a docked panel, converting it to a resizable floating window.	types.ts:286
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');	types.ts:321
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.	types.ts:342
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'); }	types.ts:336
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. state.activePanelId is resolved from the snapshot's own activePanelId when that panel is still visible in it, and otherwise from the first leaf's selected tab (which is also the path layouts saved before that field existed take). It is never seeded from an arbitrary entry in panels.	types.ts:375
maximizePanel	(id) => void	Maximizes a floating window to cover the entire workspace viewport.	types.ts:297
minimizePanel	(id) => void	Minimizes a panel to the bottom taskbar dock, preserving its layout position.	types.ts:273
movePanelOrder	(panelId, targetLeafId, targetIndex) => void	Reorders a panel's tab index within a docked leaf group.	types.ts:410
openPanel	<P>(id, component, options?) => void	Opens a registered panel into the workspace. If the panel ID is already open, the panel is focused instead of duplicated. Becomes state.activePanelId by default — pass options.focus: false to open without stealing focus from whatever is currently active. Default true Example // Open floating and pin to the top-right corner: actions.openPanel('layers', 'layertree', { initialTarget: 'floating', anchor: 'top-right' }); // Open in the background without stealing focus: actions.openPanel('prefetch', 'report', { focus: false }); // Open with per-instance data, deduped by document path: actions.openPanel(crypto.randomUUID(), 'document', { props: { path: '/notes/todo.md' }, dedupeKey: '/notes/todo.md', });	types.ts:262
publish	(event, data) => void	Publishes an event to the inter-panel pub/sub event bus.	types.ts:382
registerCloseGuard	(id, guard) => void	Registers a close guard that can intercept and cancel panel close requests.	types.ts:426
registerStateProvider	(id, provider) => void	Registers a callback reporting a docked/floating panel's current restorable state, pulled fresh every saveLayout() call — for panels whose props alone can't capture state they accumulate after opening (scroll position, an in-progress edit, a view-mode toggle). A panel that registers nothing keeps its static open-time props (or none). The returned value goes through the same isSerializable check as static props, re-evaluated on every save — a provider-backed panel's serializability can flip over its lifetime.	types.ts:443
requestClosePanel	(id, options?) => Promise<void>	Closes a panel the way its tab's × does: registered close guards run first, and a dirty panel closes only if onConfirm resolves true — without onConfirm, a dirty panel stays open. (The tab's own ×, which passes an onConfirm, is what shows the built-in unsaved-changes dialog.)	types.ts:480
restorePanel	(id, options?) => void	Restores a minimized panel back to its last docked or floating position. Default true	types.ts:279
saveLayout	() => string	Serializes the entire workspace state to a JSON string. Includes grid layout, floating window positions, minimized panels, panel metadata, and the globally active panel (see SerializedLayout.activePanelId). Example localStorage.setItem('layout', actions.saveLayout());	types.ts:362
setDirection	(dir) => void	Overrides the workspace layout direction.	types.ts:491
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.	types.ts:456
setPanelIcon	(id, icon) => void	Sets the icon shown on an open panel's tab, floating title bar and taskbar button, in place of its registration's defaultOptions.icon. null restores the registration's icon. The icon lives only in memory: saveLayout() never writes it.	types.ts:470
showContextMenu	(options) => void	Imperatively shows the workspace context menu at the given position. Uses the workspace's context menu (the contextMenuAdapter given to <DockableDesktopProvider>, or an enclosing <RddContextMenu>).	types.ts:497
subscribe	(event, callback) => () => void	Subscribes a callback to the inter-panel pub/sub event bus. Example useEffect(() => actions.subscribe('map:zoom', ({ level }) => setZoom(level)), []);	types.ts:394
unregisterCloseGuard	(id) => void	Removes a previously registered close guard.	types.ts:431
unregisterStateProvider	(id) => void	Removes a previously registered state provider.	types.ts:448
updateFloatingPosition	(id, updates) => void	Updates the position or size of a floating window.	types.ts:309
updatePanelTitle	(id, title) => void	Updates the display title of an open panel.	types.ts:462
updateSplitSizes	(path, sizes) => void	Resizes the flex split proportions of a branch node's children.	types.ts:303

---

WorkspaceConfig

Defined in: api/index.tsx:24

Configuration for createWorkspace.

Extends

• Omit<WorkspaceClientConfig, "predefinedMessages">

Properties

Property	Type	Description	Inherited from	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.	Omit.defaultEdgeSplitRatio	WorkspaceClient.ts:82
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.	Omit.defaultSplitRatio	WorkspaceClient.ts:77
dir?	"rtl" | "ltr"	Initial layout direction.	Omit.dir	WorkspaceClient.ts:72
formatMessage?	MessageFormatter	Custom i18n formatter for all internal strings.	Omit.formatMessage	WorkspaceClient.ts:68
initialState?	string | null	Serialised layout produced by a previous saveLayout() call. Pass null or omit to start with an empty canvas. Parsed synchronously before the first render. The restored activePanelId is the one the snapshot recorded, or — for layouts saved before that was persisted — the selected tab of the first leaf in the grid.	Omit.initialState	WorkspaceClient.ts:66
messages?	Record<string, MessageDescriptor>	Overrides any subset of the built-in message table.	-	api/index.tsx:26
panels?	Record<string, PanelDefinition>	Declarative panel catalog. Replaces imperative globalPanelRegistry.register() calls. Keys are the component identifiers used in openPanel() and serialised layouts.	Omit.panels	WorkspaceClient.ts:57
zIndexBase?	number	Starting z-index for floating windows and the library's own chrome overlays (context menu, toolbar flyout, modal stack, toast, workspace edge zones), all of which shift together via --rdd-z-base. Set this above/below a host app's own modal z-index range to control stacking against it. Default: 1000.	Omit.zIndexBase	WorkspaceClient.ts:89

---

WorkspaceState

Defined in: types.ts:188

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 — the one contributions are read from (see useActiveContribution) and the one drawn with focused chrome. Always a panel the user can actually see: the selected tab of its leaf, or a floating window. Never a minimized panel, except when an app explicitly calls focusPanel() on one. Restored layouts resolve it from the saved snapshot's own activePanelId, falling back to the first leaf's selected tab — never to an arbitrary entry in panels.	types.ts:208
dir	"rtl" | "ltr"	Current layout direction ('ltr' or 'rtl')	types.ts:210
draggedPanelId	string | null	The ID of the panel tab currently being dragged.	types.ts:198
edgeSplitRatio	number	Split ratio for workspace outer-edge drops (0.1–0.9). Default 0.2.	types.ts:216
floating	FloatingWindow[]	Array of active floated windows.	types.ts:192
gridRoot	LayoutNode	Root branch node representing the grid.	types.ts:190
isRtl	boolean	Convenient boolean flag indicating RTL direction	types.ts:212
minimized	{ component: string; id: string; title: string | MessageDescriptor | (() => string); }[]	Array of minimized panels waiting in the taskbar dock.	types.ts:194
panels	Record<string, PanelInfo>	Map indexing panel metadata descriptors.	types.ts:196
splitRatio	number	Split ratio for panel cross-target drops (0.1–0.9). Default 0.5.	types.ts:214

Type Aliases

ButtonVariant

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

Defined in: components/panelOverlay/PanelToolbar.tsx:15

Visual style applied to ToolbarButton and ToolbarToggle components.

---

ContainerType

type ContainerType = 
  | "left-panel"
  | "right-panel"
  | "modal"
  | "dockable-panel"
  | "floating-window"
  | "standalone";

Defined in: components/FormContainerContext.ts:14

Represents the type of container context a panel/form is currently rendered inside.

---

ContextMenuItem

type ContextMenuItem = 
  | ContextMenuSimpleItem
  | ContextMenuSeparator
  | ContextMenuSubMenu;

Defined in: components/ContextMenu.tsx:49

---

ContextMenuLabel

type ContextMenuLabel = string | MessageDescriptor;

Defined in: components/contextMenuTypes.ts:8

---

DropPosition

type DropPosition = SplitDirection | "center";

Defined in: types.ts:36

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

---

FloatAnchor

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

Defined in: types.ts:87

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

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

---

LayoutNode

type LayoutNode = LayoutGridNode | LayoutLeafNode;

Defined in: types.ts:75

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

---

MenuItemAction

type MenuItemAction = () => void;

Defined in: components/contextMenuTypes.ts:9

Returns

void

---

MessageFormatter

type MessageFormatter = (msg) => string;

Defined in: types.ts:27

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

Parameters

Parameter	Type
msg	MessageDescriptor

Returns

string

---

MessageKey

type MessageKey = keyof typeof defaultMessages;

Defined in: components/predefinedMessages.ts:66

Union of every key in defaultMessages.

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 { MessageKey } from 'react-dockable-desktop';

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

---

OverlayId

type OverlayId = string;

Defined in: components/PanelProviderContext.tsx:10

Unique string identifier for panel/modal instances.

---

PanelState

type PanelState = PanelInfo["state"];

Defined in: api/index.tsx:67

The state of a workspace panel: where it is.

---

PanelTitle

type PanelTitle = 
  | string
  | PanelTitleDescriptor
  | (() => string);

Defined in: components/PanelProviderContext.tsx:30

A panel, window, drawer or modal title: a plain string, a localizable descriptor, or (7.4.0) a function returning the text — called each time the title is rendered, so a title built with the app's own translation function follows a language change. A function title is not saved in a layout: a restored panel takes its registered default title.

---

RddContextMenuProps

type RddContextMenuProps = ContextMenuProps & {
  adapter?: ContextMenuAdapter;
  children?: React.ReactNode;
};

Defined in: api/index.tsx:332

Props for RddContextMenu.

Type Declaration

Name	Type	Description	Defined in
adapter?	ContextMenuAdapter	With children: the context-menu implementation for them. Default the built-in menu	api/index.tsx:334
children?	React.ReactNode	With children, RddContextMenu provides a context menu to them (useContextMenu() inside shows it) — for a surface outside <DockableDesktopProvider>, or to override the menu for a subtree. Without children, it is a single menu you drive through its ref.	api/index.tsx:340

---

RddSecondarySidebarProps

type RddSecondarySidebarProps = Omit<RddSidebarProps, "position" | "isSecondary">;

Defined in: components/Sidebar.tsx:783

Props for RddSecondarySidebar — identical to RddSidebarProps except position (always the opposite of whatever primary Sidebar it's nested inside) and isSecondary (always true) are not settable.

---

ResizeDir

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

Defined in: components/dragResize.ts:62

---

SidebarHeaderAction

type SidebarHeaderAction = 
  | SidebarActionButton
  | SidebarCustomEntry;

Defined in: components/Sidebar.tsx:99

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

---

SidebarRailEntry

type SidebarRailEntry = 
  | SidebarTab
  | SidebarActionButton
  | SidebarCustomEntry;

Defined in: components/Sidebar.tsx:107

A single entry inside RddSidebarProps.headerAction/footerAction when used as an array: either a non-toggling action button/custom render (see SidebarHeaderAction), or a real SidebarTab that behaves exactly like a main-list tab — it mounts, activates, and closes through the same lifecycle, so e.g. a "Settings" entry pinned to the footer can expand like any other tab.

---

SplitDirection

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

Defined in: types.ts:33

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

---

SplitOrientation

type SplitOrientation = "horizontal" | "vertical";

Defined in: types.ts:30

Orientation modifier indicating split directions.

---

Stretch

type Stretch = "width" | "height" | "both";

Defined in: components/panelOverlay/types.ts:27

Which of a docked widget's axes span the host panel instead of carrying a fixed size.

A docked widget normally pins one end of each axis and carries an explicit size. A stretched axis pins both ends and carries no size at all, so the widget tracks the panel as it resizes — with no ResizeObserver and no JS, because CSS already does exactly this.

• 'width' — spans the panel's inline axis; height still fixed. A status or timeline strip.
• 'height' — spans the block axis; width still fixed. A full-height side column.
• 'both' — fills the panel, the inner-widget equivalent of maximizing a floating window.

---

TaskbarVisibility

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

Defined in: components/WindowManager.tsx:38

Controls when the minimized-panel taskbar is visible.

---

ToastPosition

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

Defined in: components/Toast.tsx:13

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

---

ToastType

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

Defined in: components/Toast.tsx:10

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

---

ToolbarGroupEntry

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

Defined in: components/Toolbar.tsx:99

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

---

ToolbarPosition

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

Defined in: components/panelOverlay/types.ts:14

Edge of a panel to which a PanelToolbar attaches.

---

ToolbarVariant

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

Defined in: components/panelOverlay/PanelToolbar.tsx:12

Background style of a PanelToolbar.

Variables

defaultMessages

const defaultMessages: {
  alertTitle: {
     defaultMessage: "Information";
     id: "dockable-desktop-alertTitle";
  };
  cancel: {
     defaultMessage: "Cancel";
     id: "dockable-desktop-cancel";
  };
  close: {
     defaultMessage: "Close";
     id: "dockable-desktop-close";
  };
  closeEmptyGroup: {
     defaultMessage: "Close empty split group";
     id: "dockable-desktop-closeEmptyGroup";
  };
  closeNotification: {
     defaultMessage: "Close notification";
     id: "dockable-desktop-closeNotification";
  };
  closePanel: {
     defaultMessage: "Close Panel";
     id: "dockable-desktop-closePanel";
  };
  closePanelTooltip: {
     defaultMessage: "Close panel";
     id: "dockable-desktop-closePanelTooltip";
  };
  closeSearch: {
     defaultMessage: "Close search";
     id: "dockable-desktop-closeSearch";
  };
  closeTab: {
     defaultMessage: "Close Tab";
     id: "dockable-desktop-closeTab";
  };
  closeTooltip: {
     defaultMessage: "Close";
     id: "dockable-desktop-closeTooltip";
  };
  componentKey: {
     defaultMessage: "Key: {key}";
     id: "dockable-desktop-componentKey";
  };
  componentUnregistered: {
     defaultMessage: "Component Unregistered";
     id: "dockable-desktop-componentUnregistered";
  };
  discardChanges: {
     defaultMessage: "Discard Changes";
     id: "dockable-desktop-discardChanges";
  };
  dockWindow: {
     defaultMessage: "Dock Window";
     id: "dockable-desktop-dockWindow";
  };
  emptyGrid: {
     defaultMessage: "Grid Empty";
     id: "dockable-desktop-emptyGrid";
  };
  emptyGroup: {
     defaultMessage: "Empty Workspace Section";
     id: "dockable-desktop-emptyGroup";
  };
  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";
  };
  modalTitle: {
     defaultMessage: "Confirmation";
     id: "dockable-desktop-modalTitle";
  };
  moreActions: {
     defaultMessage: "More actions";
     id: "dockable-desktop-moreActions";
  };
  no: {
     defaultMessage: "No";
     id: "dockable-desktop-no";
  };
  notifications: {
     defaultMessage: "Notifications";
     id: "dockable-desktop-notifications";
  };
  ok: {
     defaultMessage: "OK";
     id: "dockable-desktop-ok";
  };
  restorePanel: {
     defaultMessage: "Restore Panel";
     id: "dockable-desktop-restorePanel";
  };
  restoreSize: {
     defaultMessage: "Restore Size";
     id: "dockable-desktop-restoreSize";
  };
  scrollTabsLeft: {
     defaultMessage: "Scroll tabs left";
     id: "dockable-desktop-scrollTabsLeft";
  };
  scrollTabsRight: {
     defaultMessage: "Scroll tabs right";
     id: "dockable-desktop-scrollTabsRight";
  };
  scrollTaskbarLeft: {
     defaultMessage: "Scroll taskbar left";
     id: "dockable-desktop-scrollTaskbarLeft";
  };
  scrollTaskbarRight: {
     defaultMessage: "Scroll taskbar right";
     id: "dockable-desktop-scrollTaskbarRight";
  };
  search: {
     defaultMessage: "Search";
     id: "dockable-desktop-search";
  };
  searchPlaceholder: {
     defaultMessage: "Search…";
     id: "dockable-desktop-searchPlaceholder";
  };
  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";
  };
  untitledPanel: {
     defaultMessage: "Panel";
     id: "dockable-desktop-untitledPanel";
  };
  yes: {
     defaultMessage: "Yes";
     id: "dockable-desktop-yes";
  };
};

Defined in: components/predefinedMessages.ts:13

Type Declaration

Name	Type	Default value	Defined in
alertTitle	{ defaultMessage: "Information"; id: "dockable-desktop-alertTitle"; }	-	components/predefinedMessages.ts:48
alertTitle.defaultMessage	"Information"	'Information'	components/predefinedMessages.ts:48
alertTitle.id	"dockable-desktop-alertTitle"	'dockable-desktop-alertTitle'	components/predefinedMessages.ts:48
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
closeNotification	{ defaultMessage: "Close notification"; id: "dockable-desktop-closeNotification"; }	-	components/predefinedMessages.ts:37
closeNotification.defaultMessage	"Close notification"	'Close notification'	components/predefinedMessages.ts:37
closeNotification.id	"dockable-desktop-closeNotification"	'dockable-desktop-closeNotification'	components/predefinedMessages.ts:37
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
closeSearch	{ defaultMessage: "Close search"; id: "dockable-desktop-closeSearch"; }	-	components/predefinedMessages.ts:44
closeSearch.defaultMessage	"Close search"	'Close search'	components/predefinedMessages.ts:44
closeSearch.id	"dockable-desktop-closeSearch"	'dockable-desktop-closeSearch'	components/predefinedMessages.ts:44
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
componentKey	{ defaultMessage: "Key: {key}"; id: "dockable-desktop-componentKey"; }	-	components/predefinedMessages.ts:52
componentKey.defaultMessage	"Key: {key}"	'Key: {key}'	components/predefinedMessages.ts:52
componentKey.id	"dockable-desktop-componentKey"	'dockable-desktop-componentKey'	components/predefinedMessages.ts:52
componentUnregistered	{ defaultMessage: "Component Unregistered"; id: "dockable-desktop-componentUnregistered"; }	-	components/predefinedMessages.ts:51
componentUnregistered.defaultMessage	"Component Unregistered"	'Component Unregistered'	components/predefinedMessages.ts:51
componentUnregistered.id	"dockable-desktop-componentUnregistered"	'dockable-desktop-componentUnregistered'	components/predefinedMessages.ts:51
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
emptyGrid	{ defaultMessage: "Grid Empty"; id: "dockable-desktop-emptyGrid"; }	-	components/predefinedMessages.ts:50
emptyGrid.defaultMessage	"Grid Empty"	'Grid Empty'	components/predefinedMessages.ts:50
emptyGrid.id	"dockable-desktop-emptyGrid"	'dockable-desktop-emptyGrid'	components/predefinedMessages.ts:50
emptyGroup	{ defaultMessage: "Empty Workspace Section"; id: "dockable-desktop-emptyGroup"; }	-	components/predefinedMessages.ts:49
emptyGroup.defaultMessage	"Empty Workspace Section"	'Empty Workspace Section'	components/predefinedMessages.ts:49
emptyGroup.id	"dockable-desktop-emptyGroup"	'dockable-desktop-emptyGroup'	components/predefinedMessages.ts:49
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
modalTitle	{ defaultMessage: "Confirmation"; id: "dockable-desktop-modalTitle"; }	-	components/predefinedMessages.ts:46
modalTitle.defaultMessage	"Confirmation"	'Confirmation'	components/predefinedMessages.ts:46
modalTitle.id	"dockable-desktop-modalTitle"	'dockable-desktop-modalTitle'	components/predefinedMessages.ts:46
moreActions	{ defaultMessage: "More actions"; id: "dockable-desktop-moreActions"; }	-	components/predefinedMessages.ts:42
moreActions.defaultMessage	"More actions"	'More actions'	components/predefinedMessages.ts:42
moreActions.id	"dockable-desktop-moreActions"	'dockable-desktop-moreActions'	components/predefinedMessages.ts:42
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
notifications	{ defaultMessage: "Notifications"; id: "dockable-desktop-notifications"; }	-	components/predefinedMessages.ts:36
notifications.defaultMessage	"Notifications"	'Notifications'	components/predefinedMessages.ts:36
notifications.id	"dockable-desktop-notifications"	'dockable-desktop-notifications'	components/predefinedMessages.ts:36
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
scrollTabsLeft	{ defaultMessage: "Scroll tabs left"; id: "dockable-desktop-scrollTabsLeft"; }	-	components/predefinedMessages.ts:38
scrollTabsLeft.defaultMessage	"Scroll tabs left"	'Scroll tabs left'	components/predefinedMessages.ts:38
scrollTabsLeft.id	"dockable-desktop-scrollTabsLeft"	'dockable-desktop-scrollTabsLeft'	components/predefinedMessages.ts:38
scrollTabsRight	{ defaultMessage: "Scroll tabs right"; id: "dockable-desktop-scrollTabsRight"; }	-	components/predefinedMessages.ts:39
scrollTabsRight.defaultMessage	"Scroll tabs right"	'Scroll tabs right'	components/predefinedMessages.ts:39
scrollTabsRight.id	"dockable-desktop-scrollTabsRight"	'dockable-desktop-scrollTabsRight'	components/predefinedMessages.ts:39
scrollTaskbarLeft	{ defaultMessage: "Scroll taskbar left"; id: "dockable-desktop-scrollTaskbarLeft"; }	-	components/predefinedMessages.ts:40
scrollTaskbarLeft.defaultMessage	"Scroll taskbar left"	'Scroll taskbar left'	components/predefinedMessages.ts:40
scrollTaskbarLeft.id	"dockable-desktop-scrollTaskbarLeft"	'dockable-desktop-scrollTaskbarLeft'	components/predefinedMessages.ts:40
scrollTaskbarRight	{ defaultMessage: "Scroll taskbar right"; id: "dockable-desktop-scrollTaskbarRight"; }	-	components/predefinedMessages.ts:41
scrollTaskbarRight.defaultMessage	"Scroll taskbar right"	'Scroll taskbar right'	components/predefinedMessages.ts:41
scrollTaskbarRight.id	"dockable-desktop-scrollTaskbarRight"	'dockable-desktop-scrollTaskbarRight'	components/predefinedMessages.ts:41
search	{ defaultMessage: "Search"; id: "dockable-desktop-search"; }	-	components/predefinedMessages.ts:43
search.defaultMessage	"Search"	'Search'	components/predefinedMessages.ts:43
search.id	"dockable-desktop-search"	'dockable-desktop-search'	components/predefinedMessages.ts:43
searchPlaceholder	{ defaultMessage: "Search…"; id: "dockable-desktop-searchPlaceholder"; }	-	components/predefinedMessages.ts:45
searchPlaceholder.defaultMessage	"Search…"	'Search…'	components/predefinedMessages.ts:45
searchPlaceholder.id	"dockable-desktop-searchPlaceholder"	'dockable-desktop-searchPlaceholder'	components/predefinedMessages.ts:45
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
untitledPanel	{ defaultMessage: "Panel"; id: "dockable-desktop-untitledPanel"; }	-	components/predefinedMessages.ts:53
untitledPanel.defaultMessage	"Panel"	'Panel'	components/predefinedMessages.ts:53
untitledPanel.id	"dockable-desktop-untitledPanel"	'dockable-desktop-untitledPanel'	components/predefinedMessages.ts:53
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 as createWorkspace({ messages }) or <DockableDesktopProvider messages={…}> to customise labels without replacing the whole table.

---

DockableDesktopProvider

const DockableDesktopProvider: React.FC<DockableDesktopProviderProps>;

Defined in: components/DockableDesktopProvider.tsx:65

The one provider. Place it above everything from this library: <RddDesktop>, <RddSidebar>, <RddToolbar>, <RddSidePanels>, <RddModals>.

Example

const workspace = createWorkspace({ panels: { map: { component: MapPanel } } });

<DockableDesktopProvider workspace={workspace}>
  <RddSidebar tabs={tabs}>
    <RddDesktop />
  </RddSidebar>
  <RddSidePanels />
  <RddModals />
</DockableDesktopProvider>

---

RddAlert

const RddAlert: React.FC<RddAlertProps>;

Defined in: forms/AlertForm.tsx:38

RddAlert shows a message with a single OK button. Open it with useModals().open or useModals().alert().

---

RddConfirm

const RddConfirm: React.FC<RddConfirmProps>;

Defined in: forms/ConfirmationForm.tsx:43

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

---

RddContextMenu

const RddContextMenu: React.ForwardRefExoticComponent<RddContextMenuProps & React.RefAttributes<ContextMenuHandle>>;

Defined in: api/index.tsx:347

A context menu. Inside <DockableDesktopProvider> one is already provided — use useContextMenu() or showContextMenu() and you need no RddContextMenu at all.

---

RddDesktop

const RddDesktop: React.FC<RddDesktopProps>;

Defined in: components/WindowManager.tsx:76

The desktop itself: the docked grid of tab groups, the floating windows, the taskbar of minimized panels, and the drop targets while a panel is dragged. Render it inside <DockableDesktopProvider>, in a container that gives it a size (rdd-fill-viewport fills the page), and import react-dockable-desktop/styles.css once.

Exported as RddDesktop.

Example

<DockableDesktopProvider workspace={workspace}>
  <div className="rdd-fill-viewport">
    <RddDesktop skin="vscode" taskbarVisibility="autohide" />
  </div>
  <RddModals />
</DockableDesktopProvider>

---

RddModals

const RddModals: React.FC;

Defined in: components/ModalStackRenderer.tsx:159

Renders the modals opened through useModals(), stacked, topmost last. Mount one, inside <DockableDesktopProvider>.

---

RddSecondarySidebar

const RddSecondarySidebar: React.ForwardRefExoticComponent<RddSecondarySidebarProps & React.RefAttributes<SidebarHandle>>;

Defined in: components/Sidebar.tsx:795

A second, independent Sidebar instance for the opposite edge of the screen — same component, same behavior, zero forked code. Must be rendered inside a primary Sidebar's children; automatically takes whichever side that primary isn't using, so the side is never specified directly.

Throws

Error if rendered without an ancestor Sidebar, or nested inside another RddSecondarySidebar — this library supports exactly one primary and one secondary, nothing deeper.

---

RddSidebar

const RddSidebar: React.ForwardRefExoticComponent<RddSidebarProps & React.RefAttributes<SidebarHandle>>;

Defined in: components/Sidebar.tsx:465

---

RddToolbar

const RddToolbar: React.ForwardRefExoticComponent<RddToolbarProps & React.RefAttributes<ToolbarHandle>>;

Defined in: components/Toolbar.tsx:445

---

toast

const toast: ToastFunction;

Defined in: components/Toast.tsx:189

Imperative notification singleton. Call from anywhere — inside or outside React. Mount <RddToasts> 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.' });