chore: docs

Author: mathuo

packages/docs/docs/core/panels/add.mdx

@@ -59,7 +59,11 @@ const panel: IDockviewPanel = api.addPanel({
 
 ## Rendering
 
-Rendering is worthy of it's own page which can be found [here](/docs/core/panels/rendering).
+See [Panel Rendering](/docs/core/panels/rendering).
+
+## Tab Title
+
+See [Tab Title](/docs/core/tabs/title).
 
 ## Positioning the Panel
 

packages/docs/docs/core/tabs/rendering.mdx

@@ -6,52 +6,88 @@ sidebar_position: 2
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
 
-## Custom Tab Renderer
+This section describes how to implement custom tab renderers
+
+## Register a Tab Component
+
+<FrameworkSpecific framework='React'>
+```jsx
+<DockviewReact tabComponents={{
+  tab_1: (props: IDockviewPanelHeaderProps) => {
+    const api: DockviewPanelApi  = props.api;
+    const containerApi: DockviewApi  = props.containerApi;
+
+    return <div>{/** logic */}</div>
+  },
+  tab_2: (props: IDockviewPanelHeaderProps) => {
+    return <div>{/** logic */}</div>
+  }
+}}/>
+```
+</FrameworkSpecific>
 
-You can provide custom renderers for your tab headers for maximum customization.
-A default implementation of `DockviewDefaultTab` is provided should you only wish to attach minor
-changes and events that do not alter the default behaviour, for example to add a custom context menu event
-handler or to hide the close button.
+<FrameworkSpecific framework='JavaScript'>
+not implemented
+</FrameworkSpecific>
 
-The `DockviewDefaultTab` component accepts a `hideClose` prop if you wish only to hide the close button.
 
-```tsx title="Attaching a custom context menu event handlers to a custom header"
-import { IDockviewPanelHeaderProps, DockviewDefaultTab } from 'dockview';
+## Default Tab Renderer
 
-const MyCustomheader = (props: IDockviewPanelHeaderProps) => {
-    const onContextMenu = (event: React.MouseEvent) => {
-        event.preventDefault();
-        alert('context menu');
-    };
-    return <DockviewDefaultTab onContextMenu={onContextMenu} hideClose={true} {...props} />;
-};
+<FrameworkSpecific framework='React'>
+```jsx
+const MyTab = (props: IDockviewPanelHeaderProps) => {
+  const api: DockviewPanelApi  = props.api;
+  const containerApi: DockviewApi  = props.containerApi;
+
+  return <div>{/** logic */}</div>
+}
+
+return <DockviewReact defaultTabRenderer={MyTab}/>
 ```
+</FrameworkSpecific>
 
-You are also free to define a custom renderer entirely from scratch and not make use of the `DockviewDefaultTab` component.
-To use a custom renderer you can must register a collection of tab components.
+<FrameworkSpecific framework='JavaScript'>
+not implemented
+</FrameworkSpecific>
 
-```tsx
-const tabComponents = {
-    myCustomHeader: MyCustomHeader,
-};
+## Accessing Custom Panel Parameters
 
-return <DockviewReact tabComponents={tabComponents}  ... />;
-```
+You can provide a generic type that matches the structure of the epxected custom panels parameters
+to provide type-hints for the panel parameters which can be accessed via the `params` option.
 
-```tsx
-api.addPanel({
-    id: 'panel_1',
-    component: 'default',
-    tabComponent: 'myCustomHeader', // <-- your registered renderers
-    title: 'Panel 1',
-});
+<FrameworkSpecific framework='React'>
+```jsx
+type MyParameters = { my_value: number };
+
+const MyTab = (props: IDockviewPanelHeaderProps<MyParameters>) => {
+  const value: number = props.params.my_value;
+  return <div>{/** logic */}</div>
+}
 ```
+</FrameworkSpecific>
+
+
+## Extend the Default Tab Implementation
 
-You can also override the default tab renderer which will be used when no `tabComponent` is provided to the `addPanel` function.
+If you only want to make minor changes to the tab rendering you may be able to use the
+default implementation as a base. This could include:
+- Hiding the close button
+- Attaching additional event listeners
 
+
+<FrameworkSpecific framework='React'>
 ```tsx
-<DockviewReact defaultTabComponent={MyCustomHeader}  ... />;
+import { IDockviewPanelHeaderProps, DockviewDefaultTab } from 'dockview';
+
+const MyCustomTab = (props: IDockviewPanelHeaderProps) => {
+    const onContextMenu = (event: React.MouseEvent) => {
+        event.preventDefault();
+        alert('context menu');
+    };
+    return <DockviewDefaultTab onContextMenu={onContextMenu} hideClose={true} {...props} />;
+};
 ```
+</FrameworkSpecific>
 
 As a simple example the below attaches a custom event handler for the context menu on all tabs as a default tab renderer
 
@@ -62,28 +98,3 @@ This still makes use of the `DockviewDefaultTab` since it's only a minor change.
     sandboxId="customheader-dockview"
     react={CustomHeadersDockview}
 />
-
-## Custom Tab Title
-
-If you are using a custom tab implementation you should pass variables through as a parameter and render them
-through your tab components implementation.
-
-```tsx title="Add a panel with custom parameters"
-api.addPanel({
-    id: 'panel_2',
-    component: 'my_component',
-    tabComponent: 'my_tab',
-    params: {
-        myTitle: 'Window 2', // <-- passing a variable to use as a title
-    },
-});
-```
-
-```tsx title="Accessing custom parameters from a custom tab renderer"
-const tabComponents = {
-    default: (props: IDockviewPanelHeaderProps<{ myTitle: string }>) => {
-        const title = props.params.myTitle; // <-- accessing my custom varaible
-        return <div>{/** tab implementation as chosen by developer */}</div>;
-    },
-};
-```

packages/docs/docs/core/tabs/title.mdx

@@ -6,27 +6,32 @@ sidebar_position: 0
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app';
 
-## Default Tab Title
 
-If you are using the default tab renderer you can set the title of a tab when creating it
+:::warning
+Registering and updating the title using these built-in variables only works for the default tab renderer.
+If you use a custom tab render you can optionally access these variables to render the title, or you can take
+your own approach to rendering a tab title.
+:::
+
+This section describes how to set the panel title
+
+The value of `title` will be shown in the panels associated tab.
+If no panel id is provided then the `id` will be shown in the tab.
 
 ```tsx
 api.addPanel({
     id: 'panel_1',
     component: 'my_component',
-    title: 'my_custom_title', // <-- special param for title
+    title: 'my_custom_title',
 });
 ```
 
-You can update the title through the panel api which can be accessed via `props.api` if you are inside the panel
-component or via `api.getPanel('panel1').api` if you are accessing from outside of the panel component.
+## Update Tab Title
 
 ```tsx
 api.setTitle('my_new_custom_title');
 ```
 
-> Note this only works when using the default tab implementation.
-
 <MultiFrameworkContainer
     sandboxId="updatetitle-dockview"
     react={DockviewSetTitle}