@dashfoo/react 0.1.0 → 0.3.0

package/README.md

@@ -59,24 +59,27 @@ a sized parent and add your CSS (see the [attribute reference](#data-dashfoo-att
 
 ## `DashfooLayout` props
 
-| Prop                      | Type                                               | Default | Description                                                                            |
-| ------------------------- | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------- |
-| `model`                   | `Dashfoo`                                          | —       | Controlled document. When set, the prop is the source of truth.                        |
-| `defaultModel`            | `Dashfoo`                                          | —       | Uncontrolled initial document. The component owns it from there.                       |
-| `onModelChange`           | `(model: Dashfoo, action?: Action) => void`        | —       | Called after every change with the next model and the action that caused it.           |
-| `components`              | `Record<string, ComponentType<{ node: TabNode }>>` | —       | Registry mapping `tab.component` keys to components.                                   |
-| `factory`                 | `(tab: TabNode) => ReactNode`                      | —       | Render override. When provided, it resolves every tab and `components` is ignored.     |
-| `persist`                 | `string \| { key; storage?; debounceMs? }`         | —       | Auto-save the model (uncontrolled mode only). A bare string is a localStorage key.     |
-| `onAction`                | `(action: Action) => Action \| null`               | —       | Intercept each action before it commits — return it, a replacement, or `null` to veto. |
-| `onActiveTabsetChange`    | `(id: string \| undefined) => void`                | —       | Fires when the active tabset changes.                                                  |
-| `onMaximizedTabsetChange` | `(id: string \| undefined) => void`                | —       | Fires when a tabset is maximized or restored.                                          |
-| `renderTabLabel`          | `(tab: TabNode) => ReactNode`                      | —       | Override the tab label (the accessible name stays `tab.name`).                         |
-| `renderTabsetToolbar`     | `(tabset: TabsetNode) => ReactNode`                | —       | Inject custom controls into a tabset's toolbar.                                        |
-| `closableTabs`            | `boolean`                                          | `true`  | Show the per-tab close control.                                                        |
-| `renamableTabs`           | `boolean`                                          | `true`  | Allow double-click inline rename.                                                      |
-| `maximizable`             | `boolean`                                          | `true`  | Show the tabset maximize/restore control.                                              |
-| `draggableTabsets`        | `boolean`                                          | `true`  | Show the grip that drags a whole tabset.                                               |
-| `keepMounted`             | `boolean`                                          | `false` | Keep inactive tab panels mounted (hidden) so their state survives a tab switch.        |
+| Prop                      | Type                                               | Default | Description                                                                                                                         |
+| ------------------------- | -------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `model`                   | `Dashfoo`                                          | —       | Controlled document. When set, the prop is the source of truth.                                                                     |
+| `defaultModel`            | `Dashfoo`                                          | —       | Uncontrolled initial document. The component owns it from there.                                                                    |
+| `onModelChange`           | `(model: Dashfoo, action?: Action) => void`        | —       | Called after every change with the next model and the action that caused it.                                                        |
+| `components`              | `Record<string, ComponentType<{ node: TabNode }>>` | —       | Registry mapping `tab.component` keys to components.                                                                                |
+| `factory`                 | `(tab: TabNode) => ReactNode`                      | —       | Render override. When provided, it resolves every tab and `components` is ignored.                                                  |
+| `persist`                 | `string \| { key; storage?; debounceMs? }`         | —       | Auto-save the model (uncontrolled mode only). A bare string is a localStorage key.                                                  |
+| `onAction`                | `(action: Action) => Action \| null`               | —       | Intercept each action before it commits — return it, a replacement, or `null` to veto.                                              |
+| `onActiveTabsetChange`    | `(id: string \| undefined) => void`                | —       | Fires when the active tabset changes.                                                                                               |
+| `onMaximizedTabsetChange` | `(id: string \| undefined) => void`                | —       | Fires when a tabset is maximized or restored.                                                                                       |
+| `renderTabLabel`          | `(tab: TabNode) => ReactNode`                      | —       | Override the tab label (the accessible name stays `tab.name`).                                                                      |
+| `renderTabsetToolbar`     | `(tabset: TabsetNode) => ReactNode`                | —       | Inject custom controls into a tabset's toolbar.                                                                                     |
+| `editable`                | `boolean`                                          | `true`  | `false` renders a static layout: no drag, close, rename, or splitter resize. Tab selection, maximize, and the ref API keep working. |
+| `closableTabs`            | `boolean`                                          | `true`  | Show the per-tab close control.                                                                                                     |
+| `renamableTabs`           | `boolean`                                          | `true`  | Allow double-click inline rename.                                                                                                   |
+| `maximizable`             | `boolean`                                          | `true`  | Show the tabset maximize/restore control.                                                                                           |
+| `draggableTabs`           | `boolean`                                          | `true`  | Allow individual tabs to be dragged between tabsets.                                                                                |
+| `draggableTabsets`        | `boolean`                                          | `true`  | Show the grip that drags a whole tabset.                                                                                            |
+| `resizableSplits`         | `boolean`                                          | `true`  | Allow dragging the splitters; `false` disables them in place (gutters keep their size).                                             |
+| `keepMounted`             | `boolean`                                          | `false` | Keep inactive tab panels mounted (hidden) so their state survives a tab switch.                                                     |
 
 You must pass either `model` or `defaultModel`. Passing neither throws.
 
@@ -175,19 +178,22 @@ with the right role and ARIA wiring, ready for you to style.
 
 ### Per-node enable flags
 
-The three top-level chrome props are global gates. Individual nodes can opt out
+The top-level chrome props are layout-wide gates. Individual nodes can opt out
 through optional boolean fields in the model (a flag defaults to enabled unless
-explicitly `false`). A control shows only when both the global prop and the
-node's flag allow it.
-
-| Field             | On node | Disables                                         |
-| ----------------- | ------- | ------------------------------------------------ |
-| `enableClose`     | tab     | the close control for that tab                   |
-| `enableClose`     | tabset  | closing for every tab in the tabset              |
-| `enableRename`    | tab     | double-click rename for that tab                 |
-| `enableDrag`      | tab     | dragging that tab                                |
-| `enableMaximize`  | tabset  | the maximize control for that tabset             |
-| `enableSplitDock` | global  | splitting a tabset on drop (drops stack instead) |
+explicitly `false`). A control shows only when the `editable` umbrella, the
+chrome prop, the model global, and the node's flag all allow it (`maximizable`
+ignores `editable` — maximize is view state, not a structural edit).
+
+| Field               | On node | Disables                                         |
+| ------------------- | ------- | ------------------------------------------------ |
+| `enableClose`       | tab     | the close control for that tab                   |
+| `enableClose`       | tabset  | closing for every tab in the tabset              |
+| `enableRename`      | tab     | double-click rename for that tab                 |
+| `enableDrag`        | tab     | dragging that tab                                |
+| `enableMaximize`    | tabset  | the maximize control for that tabset             |
+| `tabEnableDrag`     | global  | tree-wide default behind `tab.enableDrag`        |
+| `enableSplitDock`   | global  | splitting a tabset on drop (drops stack instead) |
+| `enableSplitResize` | global  | dragging the splitters (gutters keep their size) |
 
 ```ts
 { id: "logs", type: "tab", name: "Logs", component: "logs", enableClose: false }
@@ -200,6 +206,50 @@ Rows and tabsets can carry `min` and `max` dimensions from `@dashfoo/core`.
 tabset has no node-level `min`, it uses `global.tabSetMinSize`; when that global
 is omitted, the React adapter falls back to `320px`.
 
+## External drag sources
+
+Tabs normally move within a layout. To drag new content in from outside it — a
+widget list, a palette, a marketplace — wrap both sides in `DashfooDragProvider`
+and register each source with `useExternalTabSource`. Dropping a source on the
+layout inserts the tab it creates (stacking on a strip or body, splitting on an
+edge), exactly like an internal tab drop. A drop outside any tabset is a no-op.
+
+```tsx
+import { createTabId, tab } from "@dashfoo/core";
+import { DashfooDragProvider, DashfooLayout, useExternalTabSource } from "@dashfoo/react";
+
+const WidgetCard = ({ component, name }: { component: string; name: string }) => {
+  const { ref } = useExternalTabSource({
+    createTab: () => tab(component, name, { id: createTabId() }),
+    label: name,
+  });
+  return <div ref={ref}>{name}</div>;
+};
+
+const App = () => (
+  <DashfooDragProvider>
+    <WidgetCard component="metrics" name="Metrics" />
+    <DashfooLayout defaultModel={model} components={registry} />
+  </DashfooDragProvider>
+);
+```
+
+`createTab` runs at drag start and must return a fresh `TabNode` with a unique
+id per call (`createNodeId` / `createTabId` from `@dashfoo/core` mint one). The
+returned node is validated against the model schema; an invalid tab warns and
+cancels the drag. `DashfooDragProvider` is optional everywhere else — a
+standalone layout needs no provider. Pointer drag is the only drag input, so
+offer a click-to-add path (e.g. `ref.addTab(...)`) alongside the drag for
+keyboard access.
+
+`useExternalTabSource` options:
+
+| Option      | Type            | Default      | Description                                |
+| ----------- | --------------- | ------------ | ------------------------------------------ |
+| `createTab` | `() => TabNode` | — (required) | Builds the tab to insert; called per drag. |
+| `label`     | `string`        | `""`         | The drag preview chip text.                |
+| `disabled`  | `boolean`       | `false`      | Unregisters the source while true.         |
+
 ## Persistence
 
 The `persist` prop saves an uncontrolled layout and restores it on load. It loads
@@ -228,8 +278,10 @@ const Layout = () => {
 
 `persist` accepts a bare localStorage key or `{ key, storage?, debounceMs? }` for
 a custom store (sessionStorage, in-memory, your own). A pending save flushes on
-unmount, so the last change is never lost. It applies to uncontrolled mode only;
-in controlled mode, save the model yourself in `onModelChange`.
+unmount and on page hide (reload, tab close, navigation, the page going to the
+background), so the last change is never lost — even inside the debounce window.
+It applies to uncontrolled mode only; in controlled mode, save the model yourself
+in `onModelChange`.
 
 The lower-level `usePersistence` load/save primitive (that `persist` is built on)
 is also exported, for hosts that drive the store directly. See the
@@ -299,7 +351,7 @@ you.
 | `tabset-grip`        | `button`        | Drags the whole tabset. `aria-label="Move tabset"`; shown when `draggableTabsets` is on and the tabset is not maximized.           |
 | `tabset-maximize`    | `button`        | Maximize/restore toggle. `aria-pressed` reflects state.                                                                            |
 | `tabcontent`         | `div`           | `role="tabpanel"`, the active tab's content (or empty when none).                                                                  |
-| `dock-indicator`     | `div`           | The drag preview overlay (insertion line or zone). `pointer-events: none`.                                                         |
+| `dock-indicator`     | `div`           | The drag preview overlay (insertion line or zone pane). `pointer-events: none`.                                                    |
 | `drag-preview`       | `div`           | The chip that follows the pointer during a drag, showing the dragged label.                                                        |
 | `separator`          | rrp `Separator` | rrp emits `data-separator` with `aria-orientation`; style splitters here.                                                          |
 
@@ -314,15 +366,14 @@ The `[data-dashfoo="dock-indicator"]` overlay positions itself inline, but every
 visual property reads from a CSS variable with a neutral fallback. Override them
 to theme the drag preview without touching layout.
 
-| Variable                      | Used for                     | Fallback                                       |
-| ----------------------------- | ---------------------------- | ---------------------------------------------- |
-| `--dashfoo-dock-fill`         | zone fill (split preview)    | `oklch(0.556 0 0 / 0.18)`                      |
-| `--dashfoo-dock-border`       | zone border color            | `oklch(0.708 0 0 / 0.75)`                      |
-| `--dashfoo-dock-border-width` | zone border width            | `1px`                                          |
-| `--dashfoo-dock-radius`       | zone corner radius           | `6px`                                          |
-| `--dashfoo-dock-line`         | tab insertion line color     | `oklch(0.556 0 0)`                             |
-| `--dashfoo-dock-line-radius`  | insertion line corner radius | `2px`                                          |
-| `--dashfoo-dock-transition`   | indicator move animation     | `left 60ms, top 60ms, width 60ms, height 60ms` |
+| Variable                      | Used for                 | Fallback                                       |
+| ----------------------------- | ------------------------ | ---------------------------------------------- |
+| `--dashfoo-dock-fill`         | indicator fill           | `oklch(0.556 0 0 / 0.18)`                      |
+| `--dashfoo-dock-border`       | indicator border color   | `oklch(0.708 0 0 / 0.75)`                      |
+| `--dashfoo-dock-border-width` | indicator border width   | `1px`                                          |
+| `--dashfoo-dock-radius`       | indicator corner radius  | `6px`                                          |
+| `--dashfoo-dock-line-radius`  | insertion-line radius    | `2px`                                          |
+| `--dashfoo-dock-transition`   | indicator move animation | `left 60ms, top 60ms, width 60ms, height 60ms` |
 
 Set `--dashfoo-dock-transition: none` to disable the indicator animation.
 
@@ -330,7 +381,6 @@ Set `--dashfoo-dock-transition: none` to disable the indicator animation.
 :root {
   --dashfoo-dock-fill: rgba(255, 255, 255, 0.1);
   --dashfoo-dock-border: rgba(255, 255, 255, 0.4);
-  --dashfoo-dock-line: rgba(255, 255, 255, 0.85);
 }
 ```
 
@@ -348,8 +398,106 @@ It binds an XState actor to React, normalizes the incoming model, and exposes
 `dispatch` plus undo/redo. Uncontrolled mode gives full history; controlled mode
 routes changes through `onModelChange` and keeps the actor in sync.
 
-`useDashfooContext` returns the live context (`dispatch`, `renderTab`, the chrome
-flags) and throws outside a `<DashfooLayout>`. Use it from a custom view.
+Three selector hooks read the scoped stores the primitives coordinate through.
+Each takes a selector and re-renders only when the selected slice changes:
+
+```ts
+const dispatch = useLayout((state) => state.dispatch); // layout-wide config + dispatch; throws outside <DashfooLayout>/<Layout.Root>
+const node = useTabset((state) => state.node); // per-tabset state; throws outside <Tabset.Root>
+const { index, tab } = useTab(); // which tab a part belongs to; throws outside <Tabset.Tab>
+```
+
+`useDragSubject()` returns the live drag subject (`{ kind, id }` for a tab or
+tabset being dragged) or `null` — including outside a drag layer — for
+drag-aware styling in custom parts.
+
+`useDropIntent()` returns the live drop intent (`{ targetId, location, index? }`
+— where the drag would land if dropped right now) or `null` when nothing is
+dragging or the pointer is over no valid target (empty space, a non-editable
+layout, or a no-op drop the library suppresses). Together with
+`dockZonePolygons` from `@dashfoo/core` it supports consumer-rendered drop
+indicators and drop-zone visualizations alongside the built-in indicator. Both
+hooks work anywhere under a layout; under a `DashfooDragProvider` they work
+anywhere under the provider (the provider hosts the drag store, so widget lists
+and overlays outside the layout observe the same drag).
+
+## Build your own layout
+
+`DashfooLayout` is a thin assembly of exported primitives — you can compose the
+same parts yourself when you need custom chrome. Two compound namespaces, same
+pattern as `Panel`:
+
+| Part                    | Element                                  | Role                                                                                                            |
+| ----------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `Layout.Root`           | `div[data-dashfoo="layout"]`             | Creates the layout store. Takes `model`, `dispatch`, `renderTab`, and the chrome flags `DashfooLayout` accepts. |
+| `Layout.DragLayer`      | none (overlays)                          | Opts the tree into drag-dock. Omit it and everything else still works, just without dragging.                   |
+| `Layout.Rows`           | rrp split tree                           | Renders a `RowNode` recursively. `renderTabset` swaps in a custom tabset composition at every leaf.             |
+| `Layout.Tabset`         | —                                        | The stock tabset composition, for leaves that don't need custom chrome.                                         |
+| `Tabset.Root`           | `div[data-dashfoo="tabset"]`             | Creates the per-tabset store; owns drop registration, overflow measurement, and focus restore after close.      |
+| `Tabset.TabStrip`       | `div[data-dashfoo="tabstrip"]`           | The strip row (drag hit-testing targets this attribute).                                                        |
+| `Tabset.Tablist`        | `div[data-dashfoo="tablist"]`            | `role="tablist"` + roving-tabindex arrow/Home/End navigation.                                                   |
+| `Tabset.Tab`            | `span[data-dashfoo="tab-item"]`          | Per-tab wrapper; provides identity to the parts inside.                                                         |
+| `Tabset.Trigger`        | `button[data-dashfoo="tab"]`             | The tab button: select on click, rename on double-click, draggable. Children override the label.                |
+| `Tabset.RenameInput`    | `input[data-dashfoo="tab-rename"]`       | Inline rename editor; renders only while its tab is being renamed.                                              |
+| `Tabset.CloseButton`    | `button[data-dashfoo="tab-close"]`       | Closes the tab with focus restore; hides when the tab isn't closable.                                           |
+| `Tabset.Content`        | `div[data-dashfoo="tabcontent"]`         | The `role="tabpanel"` pane(s); honors `keepMounted`. Children render-prop overrides `renderTab`.                |
+| `Tabset.Toolbar`        | `div[data-dashfoo="tabset-toolbar"]`     | Trailing toolbar container.                                                                                     |
+| `Tabset.OverflowMenu`   | menu button                              | Lists clipped tabs; hides when nothing overflows.                                                               |
+| `Tabset.Grip`           | `button[data-dashfoo="tabset-grip"]`     | Drag handle for the whole tabset; hides when tabset dragging is off.                                            |
+| `Tabset.MaximizeButton` | `button[data-dashfoo="tabset-maximize"]` | Maximize/restore toggle; hides when maximize is off.                                                            |
+
+All parts spread native props (`className`, `style`, handlers) like `Panel`;
+the structural attributes (`role`, ids, `data-dashfoo`) are applied after the
+spread because drag hit-testing and overflow measurement query them.
+
+```tsx
+import { Layout, Tabset, useDashfooStore, useTab } from "@dashfoo/react";
+
+const MyTabset = ({ node }: { node: TabsetNode }) => (
+  <Tabset.Root node={node}>
+    <Tabset.TabStrip>
+      <Tabset.Tablist>
+        {node.children.map((tab) => (
+          <Tabset.Tab key={tab.id} tab={tab}>
+            <Tabset.Trigger>
+              <MyLabel /> {/* reads useTab()/useTabset() */}
+            </Tabset.Trigger>
+            <Tabset.RenameInput />
+            <Tabset.CloseButton />
+          </Tabset.Tab>
+        ))}
+      </Tabset.Tablist>
+      <Tabset.Toolbar>
+        <Tabset.OverflowMenu />
+        <Tabset.MaximizeButton />
+        <Tabset.Grip />
+      </Tabset.Toolbar>
+    </Tabset.TabStrip>
+    <Tabset.Content />
+  </Tabset.Root>
+);
+
+const MyLayout = () => {
+  const store = useDashfooStore({ defaultModel });
+  return (
+    <Layout.Root dispatch={store.dispatch} model={store.model} renderTab={renderTab}>
+      <Layout.DragLayer>
+        <Layout.Rows node={store.model.layout} renderTabset={(node) => <MyTabset node={node} />} />
+      </Layout.DragLayer>
+    </Layout.Root>
+  );
+};
+```
+
+Maximize is the host's concern in a hand-built layout: when
+`model.maximizedTabsetId` is set, render that tabset alone (via `findTabset`
+from `@dashfoo/core`) instead of `Layout.Rows` — that's all `DashfooLayout`
+does. The demo's "Raw primitives" page (`apps/demo-vite/src/pages/raw.tsx`) is
+a complete working reference.
+
+Misuse is never silent: parts outside their provider throw, and soft mistakes
+(two `Tablist`s, a `Tab` whose node isn't in the tabset, renaming without a
+`RenameInput`) warn with `[dashfoo]` and degrade gracefully.
 
 ## Exports
 
@@ -371,15 +519,34 @@ type PanelIconProps;
 type PanelRootProps;
 type PanelTitleProps;
 
-// Store
+// Layout primitives (build your own layout)
+Layout; // Layout.Root / Layout.DragLayer / Layout.Rows / Layout.Tabset
+type LayoutRootProps;
+type LayoutDragLayerProps;
+type LayoutRowsProps;
+type LayoutTabsetProps;
+
+// Tabset primitives
+Tabset; // Tabset.Root / .TabStrip / .Tablist / .Tab / .Trigger / .RenameInput / .CloseButton / .Content / .Toolbar / .OverflowMenu / .Grip / .MaximizeButton
+type TabsetRootProps; // …and a Props type per part
+
+// Store + selector hooks
 useDashfooStore;
 type DashfooStore;
 type UseDashfooStoreOptions;
-
-// Context
-DashfooContext;
-useDashfooContext;
-type DashfooContextValue;
+useLayout; // select from the layout store (throws outside Layout.Root/DashfooLayout)
+type LayoutState;
+useTabset; // select from the enclosing tabset store (throws outside Tabset.Root)
+type TabsetState;
+useTab; // { tab, index } identity (throws outside Tabset.Tab)
+type TabContextValue;
+useDragSubject; // the live drag subject, or null
+useDropIntent; // where the drag would land if dropped right now, or null
+
+// External drag sources
+DashfooDragProvider; // shares one drag manager + drag store between a layout and outside sources
+useExternalTabSource;
+type ExternalTabSourceOptions;
 
 // Persistence
 usePersistence; // load/save primitive (the `persist` prop builds on this)

package/dist/index.d.ts

@@ -1,25 +1,6 @@
+import { Action, Dashfoo, DockLocation, DragSubject, DropIntent, RowNode, TabNode, TabsetNode } from "@dashfoo/core";
 import { ComponentProps, ComponentType, ReactNode } from "react";
-import { Action, Dashfoo, DockLocation, TabNode, TabsetNode } from "@dashfoo/core";
-
-//#region src/hooks/context.d.ts
-type DashfooContextValue = {
-  closableTabs: boolean;
-  dispatch: (action: Action) => void;
-  draggableTabsets: boolean;
-  keepMounted: boolean;
-  maximizable: boolean;
-  maximizedTabsetId?: string;
-  renamableTabs: boolean;
-  renderTab: (tab: TabNode) => ReactNode;
-  renderTabLabel?: (tab: TabNode) => ReactNode;
-  renderTabsetToolbar?: (tabset: TabsetNode) => ReactNode;
-  tabLocation: "bottom" | "top";
-  tabsetMinSize: number;
-  tabStripEnabled: boolean;
-};
-declare const DashfooContext: import("react").Context<DashfooContextValue | null>;
-declare const useDashfooContext: () => DashfooContextValue;
-//#endregion
+import { DragDropManager } from "@dnd-kit/dom";
 //#region src/hooks/persistence.d.ts
 type StorageAdapter = {
   getItem: (key: string) => string | null;
@@ -71,7 +52,9 @@ type DashfooLayoutProps = {
   closableTabs?: boolean;
   components?: Record<string, TabComponent>;
   defaultModel?: Dashfoo;
+  draggableTabs?: boolean;
   draggableTabsets?: boolean;
+  editable?: boolean;
   factory?: (tab: TabNode) => ReactNode;
   keepMounted?: boolean;
   maximizable?: boolean;
@@ -84,9 +67,103 @@ type DashfooLayoutProps = {
   renamableTabs?: boolean;
   renderTabLabel?: (tab: TabNode) => ReactNode;
   renderTabsetToolbar?: (tabset: TabsetNode) => ReactNode;
+  resizableSplits?: boolean;
 };
 declare const DashfooLayout: import("react").ForwardRefExoticComponent<DashfooLayoutProps & import("react").RefAttributes<DashfooHandle>>;
 //#endregion
+//#region src/components/drag-root.d.ts
+declare const DashfooDragProvider: ({
+  children
+}: {
+  children: ReactNode;
+}) => ReactNode;
+//#endregion
+//#region src/hooks/drag-hooks.d.ts
+type ExternalTabSourceOptions = {
+  createTab: () => TabNode;
+  disabled?: boolean;
+  label?: string;
+};
+declare const useExternalTabSource: ({
+  createTab,
+  disabled,
+  label
+}: ExternalTabSourceOptions) => {
+  ref: (element: Element | null) => void;
+};
+declare const useDragSubject: () => DragSubject | null;
+declare const useDropIntent: () => DropIntent | null;
+//#endregion
+//#region src/components/drag-adapter.d.ts
+type DragProviderProps = {
+  children: ReactNode;
+  onCommit?: (action: Action) => void;
+  splitDock?: boolean;
+};
+//#endregion
+//#region src/components/layout-root.d.ts
+type LayoutRootProps = Omit<ComponentProps<"div">, "children"> & {
+  children: ReactNode;
+  closableTabs?: boolean;
+  dispatch: (action: Action) => void;
+  draggableTabs?: boolean;
+  draggableTabsets?: boolean;
+  editable?: boolean;
+  keepMounted?: boolean;
+  maximizable?: boolean;
+  model: Dashfoo;
+  renamableTabs?: boolean;
+  renderTab: (tab: TabNode) => ReactNode;
+  renderTabLabel?: (tab: TabNode) => ReactNode;
+  renderTabsetToolbar?: (tabset: TabsetNode) => ReactNode;
+  resizableSplits?: boolean;
+};
+//#endregion
+//#region src/components/row-view.d.ts
+type RowViewProps = {
+  node: RowNode;
+  renderTabset?: (node: TabsetNode) => ReactNode;
+};
+//#endregion
+//#region src/components/tabset/tabset-view.d.ts
+type TabsetViewProps = {
+  node: TabsetNode;
+};
+//#endregion
+//#region src/components/layout.d.ts
+declare const Layout: {
+  readonly DragLayer: ({
+    children,
+    onCommit,
+    splitDock
+  }: DragProviderProps) => import("react").ReactNode;
+  readonly Root: ({
+    children,
+    closableTabs,
+    dispatch,
+    draggableTabs,
+    draggableTabsets,
+    editable,
+    keepMounted,
+    maximizable,
+    model,
+    renamableTabs,
+    renderTab,
+    renderTabLabel,
+    renderTabsetToolbar,
+    resizableSplits,
+    style,
+    ...props
+  }: LayoutRootProps) => import("react").ReactNode;
+  readonly Rows: ({
+    node,
+    renderTabset
+  }: RowViewProps) => import("react").ReactNode;
+  readonly Tabset: ({
+    node
+  }: TabsetViewProps) => import("react").ReactNode;
+};
+//#endregion
 //#region src/components/panel.d.ts
 type PanelRootProps = ComponentProps<"div">;
 type PanelHeaderProps = ComponentProps<"div">;
@@ -103,6 +180,158 @@ declare const Panel: {
   readonly Title: (props: PanelTitleProps) => ReactNode;
 };
 //#endregion
+//#region src/components/tabset/tabset-tab-controls.d.ts
+type TabsetRenameInputProps = ComponentProps<"input">;
+type TabsetCloseButtonProps = ComponentProps<"button">;
+//#endregion
+//#region src/components/tabset/tabset-content.d.ts
+type TabsetContentProps = Omit<ComponentProps<"div">, "children"> & {
+  children?: (tab: TabNode) => ReactNode;
+};
+//#endregion
+//#region src/components/tabset/tabset-toolbar.d.ts
+type TabsetToolbarProps = ComponentProps<"div">;
+type TabsetGripProps = ComponentProps<"button">;
+type TabsetMaximizeButtonProps = ComponentProps<"button">;
+//#endregion
+//#region src/components/tabset/tabset-root.d.ts
+type TabsetRootProps = ComponentProps<"div"> & {
+  node: TabsetNode;
+};
+//#endregion
+//#region src/components/tabset/tabset-tab.d.ts
+type TabsetTabProps = ComponentProps<"span"> & {
+  tab: TabNode;
+};
+type TabsetTriggerProps = ComponentProps<"button">;
+//#endregion
+//#region src/components/tabset/tabset-tablist.d.ts
+type TabsetTabStripProps = ComponentProps<"div">;
+type TabsetTablistProps = ComponentProps<"div">;
+//#endregion
+//#region src/components/tabset/tabset.d.ts
+declare const Tabset: {
+  readonly CloseButton: ({
+    children,
+    onClick,
+    ...props
+  }: TabsetCloseButtonProps) => import("react").ReactNode;
+  readonly Content: ({
+    children,
+    style,
+    ...props
+  }: TabsetContentProps) => import("react").ReactNode;
+  readonly Grip: ({
+    children,
+    ref: userRef,
+    ...props
+  }: TabsetGripProps) => import("react").ReactNode;
+  readonly MaximizeButton: ({
+    children,
+    onClick,
+    ...props
+  }: TabsetMaximizeButtonProps) => import("react").ReactNode;
+  readonly OverflowMenu: () => import("react").ReactNode;
+  readonly RenameInput: (props: TabsetRenameInputProps) => import("react").ReactNode;
+  readonly Root: ({
+    children,
+    node,
+    ref: userRef,
+    style,
+    ...props
+  }: TabsetRootProps) => import("react").ReactNode;
+  readonly Tab: ({
+    children,
+    ref: userRef,
+    tab,
+    ...props
+  }: TabsetTabProps) => import("react").ReactNode;
+  readonly Tablist: ({
+    onKeyDown,
+    ref: userRef,
+    style,
+    ...props
+  }: TabsetTablistProps) => import("react").ReactNode;
+  readonly TabStrip: ({
+    style,
+    ...props
+  }: TabsetTabStripProps) => import("react").ReactNode;
+  readonly Toolbar: ({
+    style,
+    ...props
+  }: TabsetToolbarProps) => import("react").ReactNode;
+  readonly Trigger: ({
+    children,
+    onClick,
+    onDoubleClick,
+    ref: userRef,
+    ...props
+  }: TabsetTriggerProps) => import("react").ReactNode;
+};
+//#endregion
+//#region src/components/tab-overflow.d.ts
+type OverflowItem = {
+  id: string;
+  name: string;
+};
+//#endregion
+//#region src/components/tabset/tabset-store.d.ts
+type TabsetState = {
+  activeTab: TabNode | undefined;
+  cancelRename: () => void;
+  closeTab: (tabId: string) => void;
+  commitRename: (tabId: string, value: string) => void;
+  dispatch: (action: Action) => void;
+  editingTabId: string | null;
+  isMaximized: boolean;
+  node: TabsetNode;
+  overflowItems: Array<OverflowItem>;
+  registerRenameInput: () => () => void;
+  registerTablist: (element: HTMLDivElement | null) => void;
+  renameInputCount: number;
+  renameTab: (tabId: string, name: string) => void;
+  restoreFocus: boolean;
+  selectOverflowTab: (tabId: string) => void;
+  selectTab: (index: number, options?: {
+    focus?: boolean;
+  }) => void;
+  showMaximize: boolean;
+  startEditing: (tabId: string) => void;
+  tablistElement: HTMLDivElement | null;
+  tabsClosable: boolean;
+  tabsRenamable: boolean;
+  toggleMaximize: () => void;
+  visualSelected: number;
+};
+declare const useTabset: <T>(selector: (state: TabsetState) => T) => T;
+type TabContextValue = {
+  index: number;
+  tab: TabNode;
+};
+declare const useTab: () => TabContextValue;
+//#endregion
+//#region src/hooks/layout-store.d.ts
+type LayoutState = {
+  closableTabs: boolean;
+  dispatch: (action: Action) => void;
+  draggableTabs: boolean;
+  draggableTabsets: boolean;
+  editable: boolean;
+  keepMounted: boolean;
+  maximizable: boolean;
+  maximizedTabsetId: string | undefined;
+  renamableTabs: boolean;
+  renderTab: (tab: TabNode) => ReactNode;
+  renderTabLabel: ((tab: TabNode) => ReactNode) | undefined;
+  renderTabsetToolbar: ((tabset: TabsetNode) => ReactNode) | undefined;
+  resizableSplits: boolean;
+  splitDock: boolean;
+  tabLocation: "bottom" | "top";
+  tabsetMinSize: number;
+  tabStripEnabled: boolean;
+};
+declare const useLayout: <T>(selector: (state: LayoutState) => T) => T;
+//#endregion
 //#region src/hooks/responsive.d.ts
 type Breakpoint = {
   id: string;
@@ -148,5 +377,5 @@ type UseDashfooStoreOptions = {
 };
 declare const useDashfooStore: (options: UseDashfooStoreOptions) => DashfooStore;
 //#endregion
-export { type Breakpoint, DashfooContext, type DashfooContextValue, type DashfooHandle, DashfooLayout, type DashfooLayoutProps, type DashfooStore, Panel, type PanelBadgeProps, type PanelBodyProps, type PanelHeaderProps, type PanelIconProps, type PanelRootProps, type PanelTitleProps, type PersistConfig, type Persistence, type ResponsiveModel, type StorageAdapter, type TabComponent, type UseDashfooStoreOptions, type UseResponsiveModelOptions, activeBreakpoint, localStorageAdapter, matchBreakpoint, memoryStorageAdapter, useDashfooContext, useDashfooStore, usePersistence, useResponsiveModel };
+export { type Breakpoint, DashfooDragProvider, type DashfooHandle, DashfooLayout, type DashfooLayoutProps, type DashfooStore, type ExternalTabSourceOptions, Layout, type DragProviderProps as LayoutDragLayerProps, type LayoutRootProps, type RowViewProps as LayoutRowsProps, type LayoutState, type TabsetViewProps as LayoutTabsetProps, Panel, type PanelBadgeProps, type PanelBodyProps, type PanelHeaderProps, type PanelIconProps, type PanelRootProps, type PanelTitleProps, type PersistConfig, type Persistence, type ResponsiveModel, type StorageAdapter, type TabComponent, type TabContextValue, Tabset, type TabsetCloseButtonProps, type TabsetContentProps, type TabsetGripProps, type TabsetMaximizeButtonProps, type TabsetRenameInputProps, type TabsetRootProps, type TabsetState, type TabsetTabProps, type TabsetTabStripProps, type TabsetTablistProps, type TabsetToolbarProps, type TabsetTriggerProps, type UseDashfooStoreOptions, type UseResponsiveModelOptions, activeBreakpoint, localStorageAdapter, matchBreakpoint, memoryStorageAdapter, useDashfooStore, useDragSubject, useDropIntent, useExternalTabSource, useLayout, usePersistence, useResponsiveModel, useTab, useTabset };
 //# sourceMappingURL=index.d.ts.map