# Dock

A two-pane workspace that keeps your drafts intact as tabs move, panels collapse and the working space changes.

- Family: Layout, imported from `mizu-ui` or `mizu-ui/layout`
- Docs: https://mizu.user64bit.world/components/dock
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/layout/Dock.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { Dock, type DockLayout, TextArea, Button } from "mizu-ui";

export function Example() {
  const initial: DockLayout = {
    panes: [["draft", "notes"], ["preview"]],
    active: ["draft", "preview"],
    split: 52,
    collapsed: null,
  };
  const [layout, setLayout] = useState(initial);
  return (
    <div style={{ display: "grid", gap: 16 }}>
      <Dock
        label="Release workspace"
        value={layout}
        onValueChange={setLayout}
        tabs={[
          {
            id: "draft",
            label: "Draft",
            content: (
              <TextArea
                label="Release draft"
                rows={7}
                defaultValue={
                  "A quieter way to work.\n\nEvery panel keeps its place, and every draft stays yours."
                }
                hint="Edit this, then move the tab. Your draft travels with it."
              />
            ),
          },
          {
            id: "notes",
            label: "Notes",
            content: (
              <section>
                <h3>Before publishing</h3>
                <ul className="mizu-field-hint">
                  <li>Check the keyboard path.</li>
                  <li>Read the empty and error states.</li>
                  <li>Keep the motion purposeful.</li>
                </ul>
              </section>
            ),
          },
          {
            id: "preview",
            label: "Preview",
            content: (
              <article>
                <h3>A quieter way to work.</h3>
                <p className="mizu-field-hint">
                  A focused workspace for the source, its context and the
                  result. Tabs keep their content mounted when you switch,
                  collapse or move them; on narrow screens the panes stack.
                </p>
              </article>
            ),
          },
        ]}
      />
      <Button
        variant="ghost"
        arrow={false}
        size="sm"
        style={{ justifySelf: "start" }}
        onClick={() => setLayout(initial)}
      >
        Reset layout
      </Button>
    </div>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/dock 0xuser64bit/mizu/text-area 0xuser64bit/mizu/button
```

## Props

- `label`: `string`. Accessible workspace name, also shown in the toolbar.
- `tabs`: `DockTab[]`. Unique id, label and content for every panel. Content stays mounted when hidden or moved.
- `value / defaultValue / onValueChange`: `DockLayout / DockLayout / function`. Controlled layout or an initial layout: panes contains two ordered ID lists, active contains each pane's selected ID, split is the first pane's percentage, and collapsed is 0, 1 or null.
- `readOnly`: `boolean` (default `false`). Lock resizing, collapsing, moving and reordering. Tab selection stays available.

## Keyboard

- ← → / Home End: Select a tab within its pane
- Alt + ← →: Reorder the focused tab
- Alt + Shift + ← →: Move the focused tab to the first or second pane
- ← → / Shift + ← →: Resize the focused divider by 1% / 10%

## Accessibility

Named workspace with two roving-tabindex tablists and labelled tabpanels. Arrow keys select, Home/End reach the first/last tab. Every structural action has a labelled button. The separator supports pointer capture, arrows, Shift for 10%, and Home/End for the 20–80% bounds. On small screens panes stack and the separator is removed. Unknown or repeated IDs are removed, newly supplied tabs join the first pane, and missing selections fall back to the first available tab.

## Motion

Resizing tracks the hand directly; tabs and collapse update without travel. Hidden panels remain mounted so form values and component state survive layout changes.