@widgetstools/react-dock-manager 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +174 -5683
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +38 -7
  4. package/dist/index.d.ts +38 -7
  5. package/dist/index.js +36 -5650
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +4 -4
package/dist/index.d.cts CHANGED
@@ -1,17 +1,48 @@
1
- import * as _widgetstools_dock_manager_core from '@widgetstools/dock-manager-core';
2
- import { DockManagerState, PanelConfig, PanelApi, PreventableDockEvent, DockPosition, DockTheme, DockResourceStrings, DockAction, DockviewComponent } from '@widgetstools/dock-manager-core';
3
- export { AddPanelOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, LayoutNode, MovePanelOptions, PanelConfig, PopoutPanel, PreventableDockEvent, SplitDirection, SplitNode, TabGroupNode, UnpinnedPanel, clearLocalStorage, createDefaultState, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight } from '@widgetstools/dock-manager-core';
1
+ import { DockManagerState, PanelConfig, PanelApi, DockviewApi, PreventableDockEvent, DockPosition, DockTheme, DockResourceStrings, DockAction, DockviewComponent } from '@widgetstools/dock-manager-core';
2
+ export { AddPanelOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, LayoutNode, MovePanelOptions, PanelConfig, PopoutPanel, PreventableDockEvent, SplitDirection, SplitNode, TabGroupNode, UnpinnedPanel, clearLocalStorage, createDefaultState, createTheme, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight } from '@widgetstools/dock-manager-core';
4
3
  import React from 'react';
5
4
 
5
+ /**
6
+ * Thin React wrapper around the core DockviewComponent.
7
+ *
8
+ * This component:
9
+ * 1. Creates a container div ref
10
+ * 2. Instantiates DockviewComponent from core in useEffect
11
+ * 3. Bridges React content rendering via portals into core-created DOM slots
12
+ * 4. Forwards state changes back to React
13
+ *
14
+ * All DOM rendering, event handling, and layout logic lives in core.
15
+ * React only provides panel content via portals.
16
+ */
17
+
18
+ /** Props passed to widget components registered via the `widgets` prop */
19
+ interface WidgetProps {
20
+ panelId: string;
21
+ panel: PanelConfig;
22
+ api: PanelApi;
23
+ }
6
24
  interface DockManagerCoreProps {
7
25
  /** Initial state for the dock manager */
8
26
  initialState: DockManagerState;
9
- /** Render panel content. Called when a panel needs content mounted. */
10
- renderPanel: (panelId: string, panel: PanelConfig, api: PanelApi) => React.ReactNode;
27
+ /**
28
+ * Widget registry: maps `panel.widgetType` strings to React components.
29
+ * This is the simplest way to render panel content.
30
+ *
31
+ * Example: `widgets={{ clock: ClockWidget, editor: EditorWidget }}`
32
+ */
33
+ widgets?: Record<string, React.ComponentType<WidgetProps>>;
34
+ /**
35
+ * Render panel content. Called when a panel needs content mounted.
36
+ * If both `widgets` and `renderPanel` are provided, the registry is tried
37
+ * first and `renderPanel` is used as a fallback.
38
+ */
39
+ renderPanel?: (panelId: string, panel: PanelConfig, api: PanelApi) => React.ReactNode;
11
40
  /** Optional custom tab renderer */
12
41
  renderTab?: (panelId: string, panel: PanelConfig, isActive: boolean) => React.ReactNode;
13
42
  /** Optional header action slots */
14
43
  renderHeaderActions?: (slot: 'left' | 'right' | 'prefix', tabGroupId: string) => React.ReactNode;
44
+ /** Called with the DockviewApi when the component is ready. Simplest way to access the API. */
45
+ onReady?: (api: DockviewApi) => void;
15
46
  /** Called when state changes */
16
47
  onStateChange?: (state: DockManagerState) => void;
17
48
  /** Called before a panel is closed (preventable) */
@@ -35,7 +66,7 @@ interface DockManagerCoreHandle {
35
66
  /** Get the underlying DockviewComponent instance */
36
67
  getInstance: () => DockviewComponent | null;
37
68
  /** Get the DockviewApi for high-level programmatic control */
38
- getApi: () => _widgetstools_dock_manager_core.DockviewApi | null;
69
+ getApi: () => DockviewApi | null;
39
70
  }
40
71
  declare const DockManagerCore: React.ForwardRefExoticComponent<DockManagerCoreProps & React.RefAttributes<DockManagerCoreHandle>>;
41
72
 
@@ -47,4 +78,4 @@ declare function useTheme(defaultTheme?: Theme): {
47
78
  toggleTheme: () => void;
48
79
  };
49
80
 
50
- export { DockManagerCore, type DockManagerCoreHandle, type DockManagerCoreProps, useTheme };
81
+ export { DockManagerCore, type DockManagerCoreHandle, type DockManagerCoreProps, type WidgetProps, useTheme };
package/dist/index.d.ts CHANGED
@@ -1,17 +1,48 @@
1
- import * as _widgetstools_dock_manager_core from '@widgetstools/dock-manager-core';
2
- import { DockManagerState, PanelConfig, PanelApi, PreventableDockEvent, DockPosition, DockTheme, DockResourceStrings, DockAction, DockviewComponent } from '@widgetstools/dock-manager-core';
3
- export { AddPanelOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, LayoutNode, MovePanelOptions, PanelConfig, PopoutPanel, PreventableDockEvent, SplitDirection, SplitNode, TabGroupNode, UnpinnedPanel, clearLocalStorage, createDefaultState, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight } from '@widgetstools/dock-manager-core';
1
+ import { DockManagerState, PanelConfig, PanelApi, DockviewApi, PreventableDockEvent, DockPosition, DockTheme, DockResourceStrings, DockAction, DockviewComponent } from '@widgetstools/dock-manager-core';
2
+ export { AddPanelOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, LayoutNode, MovePanelOptions, PanelConfig, PopoutPanel, PreventableDockEvent, SplitDirection, SplitNode, TabGroupNode, UnpinnedPanel, clearLocalStorage, createDefaultState, createTheme, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight } from '@widgetstools/dock-manager-core';
4
3
  import React from 'react';
5
4
 
5
+ /**
6
+ * Thin React wrapper around the core DockviewComponent.
7
+ *
8
+ * This component:
9
+ * 1. Creates a container div ref
10
+ * 2. Instantiates DockviewComponent from core in useEffect
11
+ * 3. Bridges React content rendering via portals into core-created DOM slots
12
+ * 4. Forwards state changes back to React
13
+ *
14
+ * All DOM rendering, event handling, and layout logic lives in core.
15
+ * React only provides panel content via portals.
16
+ */
17
+
18
+ /** Props passed to widget components registered via the `widgets` prop */
19
+ interface WidgetProps {
20
+ panelId: string;
21
+ panel: PanelConfig;
22
+ api: PanelApi;
23
+ }
6
24
  interface DockManagerCoreProps {
7
25
  /** Initial state for the dock manager */
8
26
  initialState: DockManagerState;
9
- /** Render panel content. Called when a panel needs content mounted. */
10
- renderPanel: (panelId: string, panel: PanelConfig, api: PanelApi) => React.ReactNode;
27
+ /**
28
+ * Widget registry: maps `panel.widgetType` strings to React components.
29
+ * This is the simplest way to render panel content.
30
+ *
31
+ * Example: `widgets={{ clock: ClockWidget, editor: EditorWidget }}`
32
+ */
33
+ widgets?: Record<string, React.ComponentType<WidgetProps>>;
34
+ /**
35
+ * Render panel content. Called when a panel needs content mounted.
36
+ * If both `widgets` and `renderPanel` are provided, the registry is tried
37
+ * first and `renderPanel` is used as a fallback.
38
+ */
39
+ renderPanel?: (panelId: string, panel: PanelConfig, api: PanelApi) => React.ReactNode;
11
40
  /** Optional custom tab renderer */
12
41
  renderTab?: (panelId: string, panel: PanelConfig, isActive: boolean) => React.ReactNode;
13
42
  /** Optional header action slots */
14
43
  renderHeaderActions?: (slot: 'left' | 'right' | 'prefix', tabGroupId: string) => React.ReactNode;
44
+ /** Called with the DockviewApi when the component is ready. Simplest way to access the API. */
45
+ onReady?: (api: DockviewApi) => void;
15
46
  /** Called when state changes */
16
47
  onStateChange?: (state: DockManagerState) => void;
17
48
  /** Called before a panel is closed (preventable) */
@@ -35,7 +66,7 @@ interface DockManagerCoreHandle {
35
66
  /** Get the underlying DockviewComponent instance */
36
67
  getInstance: () => DockviewComponent | null;
37
68
  /** Get the DockviewApi for high-level programmatic control */
38
- getApi: () => _widgetstools_dock_manager_core.DockviewApi | null;
69
+ getApi: () => DockviewApi | null;
39
70
  }
40
71
  declare const DockManagerCore: React.ForwardRefExoticComponent<DockManagerCoreProps & React.RefAttributes<DockManagerCoreHandle>>;
41
72
 
@@ -47,4 +78,4 @@ declare function useTheme(defaultTheme?: Theme): {
47
78
  toggleTheme: () => void;
48
79
  };
49
80
 
50
- export { DockManagerCore, type DockManagerCoreHandle, type DockManagerCoreProps, useTheme };
81
+ export { DockManagerCore, type DockManagerCoreHandle, type DockManagerCoreProps, type WidgetProps, useTheme };