chore: docs

packages/docs/docs/components/dockview.mdx

@@ -656,8 +656,26 @@ const GroupControlComponent = (props: IDockviewGroupControlProps) => {
     <DockviewGroupControl />
 </Container>
 
+### Constraints
+
+You may wish to specify a minimum or maximum height or width for a group which can be done through the group api.
+
+```tsx
+api.group.api.setConstraints(...)
+```
+
+> Constraints are currently only supported for groups and not individual panels.
+> If you specific a constraint on a group and move a panel within that group to another group it will no
+> longer be subject to those constraints since those constraints were on the group and not on the individual panel.
+
+<Container>
+    <DockviewConstraints />
+</Container>
+
 ## Events
 
+A simple example showing events fired by `dockviewz that can be interacted with.
+
 <Container height={600}>
     <EventsDockview />
 </Container>
@@ -684,9 +702,3 @@ hello 2
 <div style={{ height: '400px', width: '100%' }}>
     <App />
 </div>
-
-## Contraints
-
-<Container>
-    <DockviewConstraints />
-</Container>

packages/docs/sandboxes/constraints-dockview/src/app.tsx

@@ -71,7 +71,7 @@ const App = () => {
     const [api, setApi] = React.useState<DockviewApi>();
 
     const onReady = (event: DockviewReadyEvent) => {
-        event.api.addPanel({
+        const panel = event.api.addPanel({
             id: 'panel_1',
             component: 'default',
         });

packages/docs/sandboxes/events-dockview/src/app.tsx

@@ -182,49 +182,49 @@ const EventsDockview = () => {
                 panels: {
                     panel_1: {
                         id: 'panel_1',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 1' },
                         title: 'panel_1',
                     },
                     panel_2: {
                         id: 'panel_2',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 2' },
                         title: 'panel_2',
                     },
                     panel_3: {
                         id: 'panel_3',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 3' },
                         title: 'panel_3',
                     },
                     panel_4: {
                         id: 'panel_4',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 4' },
                         title: 'panel_4',
                     },
                     panel_5: {
                         id: 'panel_5',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 5' },
                         title: 'panel_5',
                     },
                     panel_6: {
                         id: 'panel_6',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 6' },
                         title: 'panel_6',
                     },
                     panel_8: {
                         id: 'panel_8',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 8' },
                         title: 'panel_8',
                     },
                     panel_7: {
                         id: 'panel_7',
-                        view: { content: { id: 'default' } },
+                        contentComponent: 'default',
                         params: { title: 'Panel 7' },
                         title: 'panel_7',
                     },
@@ -334,7 +334,7 @@ const EventsDockview = () => {
                     className="dockview-theme-abyss"
                 />
             </div>
-            <div style={{ flexGrow: 1 }}>
+            <div style={{ flexGrow: 1, paddingTop: '5px' }}>
                 <Console lines={lines} />
             </div>
         </div>