@cascivo/mcp 0.2.0 → 0.3.4

package/dist/context/field.md

@@ -0,0 +1,118 @@
+# Field
+
+**Category:** inputs  
+**Description:** Form-field wrapper composing label, control, description, and error
+
+## When to use
+
+- Pairing a single control with its label, helper text, and validation message
+- Wiring aria-describedby / aria-invalid automatically instead of by hand
+
+## When NOT to use
+
+- A standalone control that needs no label, description, or error
+- Grouping multiple related controls — use a <fieldset> with a <legend>
+
+## Anti-patterns
+
+### Field clones exactly one child control to inject its id and aria wiring; multiple children break the association
+
+**Bad:** `<Field label="Email"><Input /><Input /></Field>`  
+**Good:** `<Field label="Email"><Input /></Field>`  
+**Why:** Field clones exactly one child control to inject its id and aria wiring; multiple children break the association
+
+### Hand-wired markup easily drifts: missing ids, no role="alert", mismatched aria-describedby — Field keeps them in sync
+
+**Bad:** `<div><label>Email</label><input aria-invalid /><span>Error</span></div>`  
+**Good:** `<Field label="Email" error="Error"><Input /></Field>`  
+**Why:** Hand-wired markup easily drifts: missing ids, no role="alert", mismatched aria-describedby — Field keeps them in sync
+
+## Related components
+
+- **Label** (contains): Field renders a Label and links it to the control via htmlFor
+- **Input** (contains): The control passed as children receives the generated id and aria attributes
+
+## Accessibility rationale
+
+Generates stable ids with useId and links them through htmlFor and aria-describedby; the error carries role="alert" so it is announced on appearance, and aria-invalid marks the control invalid for assistive tech
+
+## Props
+
+| Name          | Type           | Required | Default | Description                                                        |
+| ------------- | -------------- | -------- | ------- | ------------------------------------------------------------------ |
+| `label`       | `ReactNode`    | No       | —       | Text label for the control.                                        |
+| `description` | `ReactNode`    | No       | —       | Supporting description text.                                       |
+| `error`       | `ReactNode`    | No       | —       | Error message shown when the value is invalid.                     |
+| `required`    | `boolean`      | No       | false   | When true, marks the field as required.                            |
+| `disabled`    | `boolean`      | No       | false   | When true, disables the control and removes it from the tab order. |
+| `id`          | `string`       | No       | —       | Id applied to the root element (auto-generated when omitted).      |
+| `children`    | `ReactElement` | Yes      | —       | Content rendered inside the component.                             |
+
+## Tokens
+
+- `--cascivo-space-2`
+- `--cascivo-font-sans`
+- `--cascivo-text-sm`
+- `--cascivo-leading-snug`
+- `--cascivo-color-text-muted`
+- `--cascivo-color-destructive`
+
+## Examples
+
+### Basic
+
+```jsx
+<Field label="Email">
+  <Input type="email" />
+</Field>
+```
+
+### With description
+
+```jsx
+<Field label="Email" description="We never share it.">
+  <Input />
+</Field>
+```
+
+### With error
+
+Sets aria-invalid on the control and announces the error via role="alert".
+
+```jsx
+<Field label="Email" error="Email is required" required>
+  <Input />
+</Field>
+```
+
+## Boundaries
+
+| Area            | Level    | Note                                                                   |
+| --------------- | -------- | ---------------------------------------------------------------------- |
+| token names     | strict   | Spacing and color must resolve to --cascivo-\* semantic tokens         |
+| control element | flexible | Any single element accepting id/aria-\* props can be the child control |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Field component (inputs). Form-field wrapper composing label, control, description, and error
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+Field is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-space-2, --cascivo-font-sans, --cascivo-text-sm, --cascivo-leading-snug, --cascivo-color-text-muted, --cascivo-color-destructive
+
+Accessibility: role "group", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): token names — Spacing and color must resolve to --cascivo-* semantic tokens
+Flexible: control element.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/file-uploader.md

@@ -0,0 +1,121 @@
+# FileUploader
+
+**Category:** inputs  
+**Description:** Drag-and-drop file upload zone with file list and status indicators.
+
+## When to use
+
+- Letting users attach one or more files via click-to-browse or drag-and-drop
+- Showing per-file upload progress and status (uploading, complete, error) in a list
+- Enforcing client-side accept/maxSize constraints with a callback for rejected files
+
+## When NOT to use
+
+- A single short text value — use Input
+- Choosing from a fixed set of options rather than supplying a file — use Select or MultiSelect
+
+## Anti-patterns
+
+### The file list is controlled — without wiring files/onFilesAdded/onRemove nothing renders in the list and status cannot update
+
+**Bad:** `Treating the component as uncontrolled and ignoring onFilesAdded`  
+**Good:** `Track accepted files in state and pass them back via the files prop`  
+**Why:** The file list is controlled — without wiring files/onFilesAdded/onRemove nothing renders in the list and status cannot update
+
+### Client-side accept/maxSize are UX filters, not enforcement; a determined user can bypass them
+
+**Bad:** `Relying only on accept/maxSize for security`  
+**Good:** `Re-validate type and size on the server after upload`  
+**Why:** Client-side accept/maxSize are UX filters, not enforcement; a determined user can bypass them
+
+## Related components
+
+- **Form** (pairs-with): Place the uploader inside a Form when files are part of a larger submission
+- **Input** (alternative): Use a plain text Input when capturing a value rather than a file
+
+## Accessibility rationale
+
+The drop zone is a real <button> so it is keyboard-operable (Enter/Space open the native file picker), the hidden file input is removed from the tab order and labelled via aria-describedby, and the file list uses aria-live="polite" so status changes are announced; each remove control carries an aria-label naming its file.
+
+## Props
+
+| Name           | Type                                                | Required | Default | Description                             |
+| -------------- | --------------------------------------------------- | -------- | ------- | --------------------------------------- |
+| `files`        | `UploaderFile[]`                                    | No       | —       | Controlled file list                    |
+| `onFilesAdded` | `(files: File[]) => void`                           | No       | —       | Called with accepted files              |
+| `onRemove`     | `(id: string) => void`                              | No       | —       | Called when a file is removed           |
+| `multiple`     | `boolean`                                           | No       | —       | Allow multiple files                    |
+| `accept`       | `string`                                            | No       | —       | Accepted file types (MIME or extension) |
+| `maxSize`      | `number`                                            | No       | —       | Maximum file size in bytes              |
+| `onRejected`   | `(files: File[], reason: 'size' \| 'type') => void` | No       | —       | Called with rejected files              |
+| `label`        | `string`                                            | No       | —       | Field label                             |
+| `hint`         | `string`                                            | No       | —       | Hint text below the drop zone           |
+| `labels`       | `FileUploaderLabels`                                | No       | —       | i18n label overrides                    |
+| `disabled`     | `boolean`                                           | No       | —       | Disables the upload zone                |
+
+## Tokens
+
+- `--cascivo-color-accent`
+- `--cascivo-color-accent-subtle`
+- `--cascivo-color-success`
+- `--cascivo-color-danger`
+- `--cascivo-color-danger-subtle`
+
+## Examples
+
+### Basic
+
+Single file upload zone
+
+```jsx
+<FileUploader onFilesAdded={console.log} />
+```
+
+### Multiple
+
+Accept multiple files
+
+```jsx
+<FileUploader multiple onFilesAdded={console.log} />
+```
+
+### With files
+
+Shows file list
+
+```jsx
+<FileUploader files={[{ id: '1', name: 'report.pdf', size: 102400, status: 'complete' }]} />
+```
+
+## Boundaries
+
+| Area                         | Level    | Note                                                                       |
+| ---------------------------- | -------- | -------------------------------------------------------------------------- |
+| token names                  | strict   | Status colors must resolve to --cascivo-color-accent/success/danger tokens |
+| label and hint copy          | flexible | Overridable via label/hint props or the labels object                      |
+| accept / maxSize constraints | flexible | Configure freely; rejected files surface through onRejected                |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo FileUploader component (inputs). Drag-and-drop file upload zone with file list and status indicators.
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+FileUploader is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-accent, --cascivo-color-accent-subtle, --cascivo-color-success, --cascivo-color-danger, --cascivo-color-danger-subtle
+
+Accessibility: role "button", WCAG 2.2-AA, keyboard: Enter/Space. Keep it AA.
+
+Do not change (strict): token names — Status colors must resolve to --cascivo-color-accent/success/danger tokens
+Flexible: label and hint copy, accept / maxSize constraints.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/filter.md

@@ -0,0 +1,129 @@
+# Filter
+
+**Category:** inputs  
+**Description:** A group of toggleable pill or outline buttons for filtering content by category
+
+## When to use
+
+- Tag or category filtering on listing pages where the active filters must remain visible
+- Facet chips that toggle content visibility (e.g. product categories, team labels)
+
+## When NOT to use
+
+- Navigation between distinct views — use Tabs
+- A binary on/off switch — use Toggle
+- Form field for selecting a value — use Select or Checkbox
+
+## Anti-patterns
+
+### Filter is for narrowing visible content, not routing between views
+
+**Bad:** `<Filter options={statusOptions} onChange={navigate} />`  
+**Good:** `<Tabs items={statusTabs} />`  
+**Why:** Filter is for narrowing visible content, not routing between views
+
+## Related components
+
+- **Tabs** (alternative): Tabs navigate between views; Filter narrows displayed content
+- **Toggle** (alternative): Toggle is the binary on/off primitive; Filter handles multi-option sets
+- **Tag** (pairs-with): Tag displays the currently active filters as dismissible chips
+
+## Accessibility rationale
+
+Wraps buttons in a role="group" so screen readers announce the group label; each button uses aria-pressed to communicate selected state without relying on color alone
+
+## Props
+
+| Name           | Type                           | Required | Default | Description                                                   |
+| -------------- | ------------------------------ | -------- | ------- | ------------------------------------------------------------- |
+| `options`      | `FilterOption[]`               | Yes      | —       | Array of { label, value } objects to render as filter buttons |
+| `value`        | `string[]`                     | No       | —       | Controlled selected values                                    |
+| `defaultValue` | `string[]`                     | No       | []      | Initial selected values for uncontrolled use                  |
+| `onChange`     | `(selected: string[]) => void` | No       | —       | Called when the value changes.                                |
+| `multi`        | `boolean`                      | No       | false   | Allow multiple items to be selected simultaneously            |
+| `variant`      | `'pill' \| 'outline'`          | No       | pill    | Selects the visual style variant.                             |
+
+## Tokens
+
+- `--cascivo-radius-full`
+- `--cascivo-border-default`
+- `--cascivo-color-text-subtle`
+- `--cascivo-color-text`
+- `--cascivo-color-active-bg`
+- `--cascivo-color-accent`
+- `--cascivo-color-accent-content`
+- `--cascivo-ring-width`
+- `--cascivo-ring-color`
+- `--cascivo-ease-out`
+
+## Examples
+
+### Single-select
+
+```jsx
+<Filter
+  options={[
+    { label: 'All', value: 'all' },
+    { label: 'Active', value: 'active' },
+    { label: 'Archived', value: 'archived' },
+  ]}
+  aria-label="Filter by status"
+/>
+```
+
+### Multi-select
+
+```jsx
+<Filter
+  multi
+  options={[
+    { label: 'Design', value: 'design' },
+    { label: 'Engineering', value: 'engineering' },
+    { label: 'Marketing', value: 'marketing' },
+  ]}
+  aria-label="Filter by team"
+/>
+```
+
+### Outline variant
+
+```jsx
+<Filter
+  variant="outline"
+  options={[
+    { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
+  ]}
+  aria-label="Filter by framework"
+/>
+```
+
+## Boundaries
+
+| Area    | Level    | Note                                                                                            |
+| ------- | -------- | ----------------------------------------------------------------------------------------------- |
+| variant | flexible | pill suits floating filter bars; outline suits embedded filter rows within a bordered container |
+| multi   | flexible | single-select for mutually exclusive categories; multi for additive facets                      |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Filter component (inputs). A group of toggleable pill or outline buttons for filtering content by category
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+Filter is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-radius-full, --cascivo-border-default, --cascivo-color-text-subtle, --cascivo-color-text, --cascivo-color-active-bg, --cascivo-color-accent, --cascivo-color-accent-content, --cascivo-ring-width, --cascivo-ring-color, --cascivo-ease-out
+
+Accessibility: role "group", WCAG 2.2-AA, keyboard: Tab/Enter/Space. Keep it AA.
+Flexible: variant, multi.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/flow/flow-background.md

@@ -0,0 +1,103 @@
+# FlowBackground
+
+**Category:** display  
+**Description:** Decorative dots / grid / cross canvas background, drawn purely in CSS gradients.
+
+## When to use
+
+- Giving a flow canvas a sense of space and scale with a dotted or grid backdrop
+- Reinforcing pan/zoom by letting the pattern move and scale with the viewport
+
+## When NOT to use
+
+- As a page background — this is a flow-canvas decoration, not a general surface
+
+## Anti-patterns
+
+### Per-cell DOM is needlessly expensive; one repeating gradient costs nothing.
+
+**Bad:** `Rendering a DOM node per grid cell`  
+**Good:** `A single CSS gradient layer`  
+**Why:** Per-cell DOM is needlessly expensive; one repeating gradient costs nothing.
+
+## Related components
+
+- **FlowCanvas** (contained-by): Lives inside the canvas pane.
+
+## Accessibility rationale
+
+Purely decorative — marked aria-hidden and presentation, never in the a11y tree.
+
+## Props
+
+| Name        | Type                          | Required | Default | Description                                              |
+| ----------- | ----------------------------- | -------- | ------- | -------------------------------------------------------- |
+| `variant`   | `'dots' \| 'grid' \| 'cross'` | No       | dots    | Pattern style.                                           |
+| `gap`       | `number`                      | No       | 20      | Cell spacing (px).                                       |
+| `size`      | `number`                      | No       | 1       | Dot radius / line thickness (px).                        |
+| `color`     | `string`                      | No       | —       | Pattern color (defaults to the border token).            |
+| `className` | `string`                      | No       | —       | Additional CSS class names merged onto the root element. |
+
+## Tokens
+
+- `--cascivo-color-border`
+
+## Examples
+
+### Dotted background
+
+A dotted grid behind a flow canvas.
+
+```jsx
+;() => (
+  <div style={{ position: 'relative', height: 220, overflow: 'hidden' }}>
+    <FlowBackground variant="dots" gap={24} />
+  </div>
+)
+```
+
+### Grid and cross
+
+The grid and cross variants.
+
+```jsx
+;() => (
+  <div style={{ display: 'grid', gap: 16, gridTemplateColumns: '1fr 1fr' }}>
+    <div style={{ position: 'relative', height: 180, overflow: 'hidden' }}>
+      <FlowBackground variant="grid" gap={28} />
+    </div>
+    <div style={{ position: 'relative', height: 180, overflow: 'hidden' }}>
+      <FlowBackground variant="cross" gap={28} size={4} />
+    </div>
+  </div>
+)
+```
+
+## Boundaries
+
+| Area    | Level    | Note                                              |
+| ------- | -------- | ------------------------------------------------- |
+| pattern | flexible | dots \| grid \| cross with configurable gap/size. |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo FlowBackground component (display). Decorative dots / grid / cross canvas background, drawn purely in CSS gradients.
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+FlowBackground is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-border
+
+Accessibility: role "presentation", WCAG 2.1-AA. Keep it AA.
+Flexible: pattern.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/flow/flow-canvas.md

@@ -0,0 +1,82 @@
+# FlowCanvas
+
+**Category:** display  
+**Description:** The pan/zoom canvas pane — a single CSS-transformed layer driven by the viewport signal.
+
+## When to use
+
+- Hosting a hand-composed flow from low-level FlowNode/FlowEdge primitives
+- When you need direct control of the viewport, pan, and zoom
+
+## When NOT to use
+
+- For the common case — prefer the declarative <Flow nodes edges /> instead
+
+## Related components
+
+- **Flow** (alternative): The declarative data-driven wrapper.
+- **FlowBackground** (contains): A common child.
+
+## Accessibility rationale
+
+role="application" — the pane is an interactive canvas with pointer gestures.
+
+## Props
+
+| Name               | Type                                     | Required | Default | Description                                              |
+| ------------------ | ---------------------------------------- | -------- | ------- | -------------------------------------------------------- |
+| `children`         | `ReactNode`                              | No       | —       | Background, nodes, edges.                                |
+| `viewport`         | `{ x: number; y: number; zoom: number }` | No       | —       | Controlled viewport.                                     |
+| `onViewportChange` | `(viewport: Viewport) => void`           | No       | —       | Viewport change callback.                                |
+| `minZoom`          | `number`                                 | No       | 0.2     | Lower bound for the viewport zoom level.                 |
+| `maxZoom`          | `number`                                 | No       | 2       | Upper bound for the viewport zoom level.                 |
+| `panOnDrag`        | `boolean`                                | No       | true    | Drag the empty pane to pan the viewport.                 |
+| `zoomOnScroll`     | `boolean`                                | No       | true    | Wheel or pinch to zoom the viewport.                     |
+| `fitView`          | `boolean`                                | No       | false   | Frame the whole graph once on mount.                     |
+| `className`        | `string`                                 | No       | —       | Additional CSS class names merged onto the root element. |
+
+## Tokens
+
+- `--cascivo-color-bg`
+- `--cascivo-radius-surface`
+
+## Examples
+
+### Empty canvas with a background
+
+```jsx
+;() => (
+  <FlowCanvas style={{ height: 240 }}>
+    <FlowBackground />
+  </FlowCanvas>
+)
+```
+
+## Boundaries
+
+| Area     | Level    | Note                               |
+| -------- | -------- | ---------------------------------- |
+| viewport | flexible | Controllable; pan/zoom toggleable. |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo FlowCanvas component (display). The pan/zoom canvas pane — a single CSS-transformed layer driven by the viewport signal.
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+FlowCanvas is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-bg, --cascivo-radius-surface
+
+Accessibility: role "application", WCAG 2.1-AA, keyboard: Tab (focus)/Drag (pan)/Wheel (zoom). Keep it AA.
+Flexible: viewport.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/flow/flow-controls.md

@@ -0,0 +1,84 @@
+# FlowControls
+
+**Category:** display  
+**Description:** Zoom in / out / fit-view controls for a flow canvas — real, i18n-labeled buttons.
+
+## When to use
+
+- Giving users explicit zoom/fit controls on a flow canvas
+
+## When NOT to use
+
+- When the canvas is static/non-interactive
+
+## Related components
+
+- **FlowCanvas** (pairs-with): Calls its viewport actions.
+- **FlowMiniMap** (pairs-with): Complementary navigation chrome.
+
+## Accessibility rationale
+
+Real <button>s with i18n-defaulted aria-labels; ≥44px coarse targets.
+
+## Props
+
+| Name          | Type                                                           | Required | Default     | Description                                                |
+| ------------- | -------------------------------------------------------------- | -------- | ----------- | ---------------------------------------------------------- |
+| `position`    | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | No       | bottom-left | Position of the component.                                 |
+| `showZoom`    | `boolean`                                                      | No       | true        | When true, shows the zoom-in/zoom-out buttons.             |
+| `showFitView` | `boolean`                                                      | No       | true        | When true, shows the fit-to-view button.                   |
+| `onZoomIn`    | `() => void`                                                   | No       | —           | Called when the zoom-in control is activated.              |
+| `onZoomOut`   | `() => void`                                                   | No       | —           | Called when the zoom-out control is activated.             |
+| `onFitView`   | `() => void`                                                   | No       | —           | Called when the fit-to-view control is activated.          |
+| `labels`      | `FlowControlsLabels`                                           | No       | —           | Overrides for the component’s user-visible strings (i18n). |
+| `className`   | `string`                                                       | No       | —           | Additional CSS class names merged onto the root element.   |
+
+## Tokens
+
+- `--cascivo-color-surface`
+- `--cascivo-color-border`
+- `--cascivo-target-min-coarse`
+
+## Examples
+
+### Canvas controls
+
+```jsx
+;() => (
+  <div
+    style={{ position: 'relative', height: 200, border: '1px solid var(--cascivo-color-border)' }}
+  >
+    <FlowControls onZoomIn={() => {}} onZoomOut={() => {}} onFitView={() => {}} />
+  </div>
+)
+```
+
+## Boundaries
+
+| Area     | Level    | Note                   |
+| -------- | -------- | ---------------------- |
+| position | flexible | Four corners.          |
+| buttons  | flexible | Zoom / fit toggleable. |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo FlowControls component (display). Zoom in / out / fit-view controls for a flow canvas — real, i18n-labeled buttons.
+
+Architecture constraints — follow exactly:
+- Signals only (useSignal/useComputed/useSignalEffect from @cascivo/core). Never useState/useEffect/useContext/useReducer.
+- Style only through --cascivo-* custom properties. No Tailwind, no inline styles, no CSS-in-JS.
+- Responsive via @container queries on the canonical scale (30rem/40rem/64rem/80rem). Do not use global viewport @media breakpoints.
+- Visual states (hover/focus/active/disabled) via CSS pseudo-classes, not JS.
+- CSS logical properties only (RTL-safe).
+
+FlowControls is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-surface, --cascivo-color-border, --cascivo-target-min-coarse
+
+Accessibility: role "group", WCAG 2.1-AA, keyboard: Tab (focus)/Enter/Space (activate). Keep it AA.
+Flexible: position, buttons.
+
+Do not invent props, tokens, or global viewport media queries.
+```