# CollectionViewSwitcher

A controlled view selector with adaptive commands, separate from the active filter query.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, CollectionViewSwitcher } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <CollectionViewSwitcher label="Project view" views={[{id:"all",name:"All projects"},{id:"active",name:"Active projects"}]} value="all" onValueChange={(id) => console.log(id)} actions={[{id:"create",label:"Save as new view"}]} onAction={(id) => console.log(id)} />
    </FloodRoot>
  );
}
```

## Design notes

- Compose Field, Select, Button, IconSlot, Inline and OverflowActions. controlSize defaults to sm; no extra surface surrounds the selector and commands.
- value and onValueChange represent the accepted view ID. Commands request onAction(id); the component does not create, rename, delete, persist or execute queries. Keep application errors and confirmation in their existing host owners.
- The host supplies only applicable actions: save a new definition, update an editable changed definition, reset a dirty query, rename or delete an editable definition. A dirty working query does not silently modify the selected definition.
- One action uses Button directly. Multiple actions use priority-based OverflowActions with View actions disclosure at constrained widths. Source order remains meaningful; destructive actions belong last.
- label names the hidden Field label. actionsLabel and moreLabel localize command names; views supply localized names. selectRef exposes the Select focus target for host-owned dialogs. disabled blocks selection and commands; per-view and per-action disabled flags remain supported.
- Keep this row outside CollectionToolbar. Changing the selected view may reset the host query and selection, but saving or renaming a definition must not reset unrelated result selection.
- The command rail uses the shared plain Toolbar variant so its outer height matches the adjacent Select, without a second container around the actions.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `views` | `readonly CollectionViewOption[]` | `Required` |
| `value` | `string` | `Required` |
| `onValueChange` | `(id:string)=>void` | `Required` |
| `actions` | `readonly OverflowAction[]` | `—` |
| `onAction` | `(id:string)=>void` | `—` |
| `actionsLabel` | `string` | `—` |
| `moreLabel` | `string` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `disabled` | `boolean` | `—` |
| `selectRef` | `Ref<HTMLSelectElement>` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "onChange">` | `Forwarded` |