@cascivo/mcp 0.2.0 → 0.3.3

package/dist/context/swap.md

@@ -0,0 +1,100 @@
+# Swap
+
+**Category:** inputs  
+**Description:** Animated toggle between two icon/content states with rotate or flip transition
+
+## When to use
+
+- Theme toggles where an icon animates between two states (sun/moon)
+- Favorite or bookmark toggles that flip between outlined and filled icons
+- Any scenario where exactly two icons swap places with a transition
+
+## When NOT to use
+
+- Form toggles with a visible label — use Toggle
+- Checkbox-style inputs that are part of a submitted form — use Checkbox
+- When a text label must always be visible alongside the control
+
+## Anti-patterns
+
+### Swap is designed for icon transitions; for labeled on/off controls use Toggle
+
+**Bad:** `<Swap on="Enable" off="Disable" /> (text content)`  
+**Good:** `<Toggle label="Enable notifications" />`  
+**Why:** Swap is designed for icon transitions; for labeled on/off controls use Toggle
+
+## Related components
+
+- **Toggle** (alternative): Use when a visible text label is required alongside the switch control
+- **Checkbox** (alternative): Use for form selections that are submitted rather than applied immediately
+
+## Accessibility rationale
+
+Renders a <button role="switch"> with aria-checked reflecting state. Both on/off slots are aria-hidden so screen readers announce the button state, not the icon content.
+
+## Props
+
+| Name         | Type                         | Required | Default | Description                                              |
+| ------------ | ---------------------------- | -------- | ------- | -------------------------------------------------------- |
+| `on`         | `React.ReactNode`            | Yes      | —       | Content shown in the active (on) state.                  |
+| `off`        | `React.ReactNode`            | Yes      | —       | Content shown in the inactive (off) state.               |
+| `checked`    | `boolean`                    | No       | false   | Whether the control is checked (controlled).             |
+| `onChange`   | `(checked: boolean) => void` | No       | —       | Called when the value changes.                           |
+| `mode`       | `'rotate' \| 'flip'`         | No       | rotate  | Transition between states ('rotate' \| 'flip').          |
+| `aria-label` | `string`                     | No       | —       | Accessible label used when no visible label is present.  |
+| `className`  | `string`                     | No       | —       | Additional CSS class names merged onto the root element. |
+
+## Tokens
+
+- `--cascivo-ring-width`
+- `--cascivo-ring-color`
+- `--cascivo-radius-control`
+- `--cascivo-ease-out`
+
+## Examples
+
+### Theme toggle (rotate)
+
+Sun/moon icon that rotates between two states
+
+```jsx
+<Swap on={<SunIcon />} off={<MoonIcon />} mode="rotate" aria-label="Toggle theme" />
+```
+
+### Flip mode
+
+Heart icon that flips to filled on activation
+
+```jsx
+<Swap on={<HeartFilledIcon />} off={<HeartIcon />} mode="flip" aria-label="Favorite" />
+```
+
+## Boundaries
+
+| Area           | Level    | Note                                                                        |
+| -------------- | -------- | --------------------------------------------------------------------------- |
+| content        | flexible | on/off slots accept any ReactNode — icons, text, images                     |
+| animation mode | flexible | rotate (default) or flip — choose based on the visual metaphor of the icons |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Swap component (inputs). Animated toggle between two icon/content states with rotate or flip transition
+
+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).
+
+Swap is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-ring-width, --cascivo-ring-color, --cascivo-radius-control, --cascivo-ease-out
+
+Accessibility: role "switch", WCAG 2.2-AA, keyboard: Space/Enter. Keep it AA.
+Flexible: content, animation mode.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/swipe-item.md

@@ -0,0 +1,110 @@
+# SwipeItem
+
+**Category:** display  
+**Description:** List row whose leading/trailing actions are revealed by a horizontal swipe, with keyboard parity
+
+## When to use
+
+- List rows on touch surfaces where secondary actions (archive, delete) should hide until swiped
+- Mail/inbox-style rows that reveal contextual actions behind the content
+- Compact lists where always-visible action buttons would crowd each row
+
+## When NOT to use
+
+- A single primary action per row — render it inline as a Button
+- Destructive actions that need confirmation — pair with an AlertDialog instead of swipe-only
+- Non-list, free-form content — swipe-to-reveal is a list-row affordance
+
+## Anti-patterns
+
+### Gesture-only actions are unreachable by keyboard and screen-reader users
+
+**Bad:** `Relying on the swipe gesture as the only way to reach Delete`  
+**Good:** `Action buttons stay in the DOM and a11y tree; focusing one reveals its side`  
+**Why:** Gesture-only actions are unreachable by keyboard and screen-reader users
+
+## Related components
+
+- **ActionSheet** (alternative): Use an ActionSheet when a row tap should present a fuller list of actions
+- **List** (contained-by): SwipeItem wraps individual rows within a list
+
+## Accessibility rationale
+
+The action buttons are always rendered in the DOM and the accessibility tree, never gesture-only. Focusing an action (via keyboard) reveals its side so it is visible, Enter/Space activate it, and Escape closes the row — giving full keyboard and screen-reader parity with the swipe gesture. The drag uses touch-action: pan-y so vertical scrolling is unaffected.
+
+## Props
+
+| Name              | Type              | Required | Default | Description                                                                |
+| ----------------- | ----------------- | -------- | ------- | -------------------------------------------------------------------------- |
+| `children`        | `React.ReactNode` | Yes      | —       | The row content                                                            |
+| `leadingActions`  | `SwipeAction[]`   | No       | —       | Actions revealed by dragging toward the end edge (shown on the start edge) |
+| `trailingActions` | `SwipeAction[]`   | No       | —       | Actions revealed by dragging toward the start edge (shown on the end edge) |
+| `className`       | `string`          | No       | —       | Additional CSS class names merged onto the root element.                   |
+
+## Tokens
+
+- `--cascivo-color-surface`
+- `--cascivo-color-accent`
+- `--cascivo-color-accent-content`
+- `--cascivo-color-destructive`
+- `--cascivo-color-text-on-destructive`
+- `--cascivo-target-min-coarse`
+- `--cascivo-motion-enter`
+
+## Examples
+
+### Trailing actions
+
+```jsx
+<SwipeItem
+  trailingActions={[
+    { label: 'Archive', onSelect: archive },
+    { label: 'Delete', onSelect: remove, destructive: true },
+  ]}
+>
+  <MessageRow message={message} />
+</SwipeItem>
+```
+
+### Leading and trailing
+
+```jsx
+<SwipeItem
+  leadingActions={[{ label: 'Pin', icon: <PinIcon />, onSelect: pin }]}
+  trailingActions={[{ label: 'Delete', onSelect: remove, destructive: true }]}
+>
+  <TaskRow task={task} />
+</SwipeItem>
+```
+
+## Boundaries
+
+| Area             | Level    | Note                                                                             |
+| ---------------- | -------- | -------------------------------------------------------------------------------- |
+| actions          | flexible | Any number of leading and/or trailing actions; each may be destructive           |
+| reveal direction | strict   | Leading reveals on the start edge, trailing on the end edge (physical-axis drag) |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo SwipeItem component (display). List row whose leading/trailing actions are revealed by a horizontal swipe, with keyboard parity
+
+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).
+
+SwipeItem is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-surface, --cascivo-color-accent, --cascivo-color-accent-content, --cascivo-color-destructive, --cascivo-color-text-on-destructive, --cascivo-target-min-coarse, --cascivo-motion-enter
+
+Accessibility: role "group", WCAG 2.2-AA, keyboard: Tab/Enter/Space/Escape. Keep it AA.
+
+Do not change (strict): reveal direction — Leading reveals on the start edge, trailing on the end edge (physical-axis drag)
+Flexible: actions.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/switcher.md

@@ -0,0 +1,97 @@
+# Switcher
+
+**Category:** navigation  
+**Description:** App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers
+
+## When to use
+
+- Listing sibling apps/products the user can switch between
+- Rendering switch destinations inside a HeaderPanel opened from the shell header
+- Grouping switch targets with dividers and marking the active one
+
+## When NOT to use
+
+- Primary in-app navigation — use SideNav
+- A small action menu attached to a control — use Dropdown
+
+## Anti-patterns
+
+### Switcher models cross-app jumps, not navigation within the current app
+
+**Bad:** `Using Switcher as the main page navigation`  
+**Good:** `<SideNav> for primary navigation; Switcher only for app/product switching`  
+**Why:** Switcher models cross-app jumps, not navigation within the current app
+
+## Related components
+
+- **HeaderPanel** (contained-by): Switcher is placed inside a HeaderPanel opened by a ShellHeader action
+
+## Accessibility rationale
+
+role="list" structures the entries; each switch target is a real link with the active destination marked, so keyboard and screen-reader users can identify and reach the current app
+
+## Props
+
+| Name        | Type              | Required | Default            | Description                                                                   |
+| ----------- | ----------------- | -------- | ------------------ | ----------------------------------------------------------------------------- |
+| `items`     | `SwitcherEntry[]` | Yes      | —                  | SwitcherLink ({ label, href, active?, icon? }) or divider ({ divider: true }) |
+| `label`     | `string`          | No       | Switch application | Text label for the control.                                                   |
+| `className` | `string`          | No       | —                  | Additional CSS class names merged onto the root element.                      |
+
+## Tokens
+
+- `--cascivo-color-text`
+- `--cascivo-color-bg-subtle`
+- `--cascivo-color-accent`
+- `--cascivo-color-accent-subtle`
+- `--cascivo-color-border`
+- `--cascivo-focus-ring`
+
+## Examples
+
+### App switcher
+
+Place inside a HeaderPanel opened by a Grid action in ShellHeader
+
+```jsx
+<Switcher
+  items={[
+    { label: 'Console', href: '/console', active: true },
+    { label: 'Billing', href: '/billing' },
+    { divider: true },
+    { label: 'Docs', href: 'https://docs.example.com' },
+  ]}
+/>
+```
+
+## Boundaries
+
+| Area        | Level    | Note                                                          |
+| ----------- | -------- | ------------------------------------------------------------- |
+| dividers    | flexible | Dividers group entries as needed                              |
+| token names | strict   | Accent and surface colors must resolve to --cascivo-\* tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Switcher component (navigation). App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers
+
+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).
+
+Switcher is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-text, --cascivo-color-bg-subtle, --cascivo-color-accent, --cascivo-color-accent-subtle, --cascivo-color-border, --cascivo-focus-ring
+
+Accessibility: role "list", WCAG 2.2-AA, keyboard: Tab/Enter. Keep it AA.
+
+Do not change (strict): token names — Accent and surface colors must resolve to --cascivo-* tokens
+Flexible: dividers.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/tabs.md

@@ -0,0 +1,93 @@
+# Tabs
+
+**Category:** navigation  
+**Description:** Switch between related panels of content
+
+## When to use
+
+- Switching between peer panels of related content in the same context
+- Showing one section at a time when all sections are equally important
+
+## When NOT to use
+
+- Stacked sequential content the user reads top to bottom — use Accordion
+- Changing a setting or view parameter — use a SegmentedControl
+- Navigating between pages — use links
+
+## Anti-patterns
+
+### Tabs imply switching content panels; toggling a parameter is a control, not navigation
+
+**Bad:** `Using Tabs to toggle a single display option (e.g. grid/list view)`  
+**Good:** `<SegmentedControl> for view/setting toggles`  
+**Why:** Tabs imply switching content panels; toggling a parameter is a control, not navigation
+
+## Related components
+
+- **Accordion** (alternative): Accordion stacks sequential sections; Tabs switch between peers
+- **SegmentedControl** (alternative): SegmentedControl changes a setting/parameter rather than swapping panels
+
+## Accessibility rationale
+
+Implements the WAI-ARIA tabs pattern: tablist/tab/tabpanel roles with arrow-key navigation and Home/End, so the active tab and its panel are correctly associated for assistive tech
+
+## Props
+
+| Name            | Type                      | Required | Default | Description                                |
+| --------------- | ------------------------- | -------- | ------- | ------------------------------------------ |
+| `defaultValue`  | `string`                  | No       | —       | The initial value when uncontrolled.       |
+| `value`         | `string`                  | No       | —       | The controlled value.                      |
+| `onValueChange` | `(value: string) => void` | No       | —       | Called with the new value when it changes. |
+
+## Tokens
+
+- `--cascivo-color-accent`
+- `--cascivo-color-text`
+- `--cascivo-color-text-subtle`
+- `--cascivo-color-border`
+- `--cascivo-focus-ring`
+
+## Examples
+
+### Basic
+
+```jsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">…</TabsContent>
+</Tabs>
+```
+
+## Boundaries
+
+| Area                       | Level    | Note                                                                |
+| -------------------------- | -------- | ------------------------------------------------------------------- |
+| controlled vs uncontrolled | flexible | Use value or defaultValue depending on control needs                |
+| token names                | strict   | Accent, borders, and focus ring must resolve to --cascivo-\* tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Tabs component (navigation). Switch between related panels of content
+
+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).
+
+Tabs is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-accent, --cascivo-color-text, --cascivo-color-text-subtle, --cascivo-color-border, --cascivo-focus-ring
+
+Accessibility: role "tablist", WCAG 2.2-AA, keyboard: ArrowLeft/ArrowRight/Home/End. Keep it AA.
+
+Do not change (strict): token names — Accent, borders, and focus ring must resolve to --cascivo-* tokens
+Flexible: controlled vs uncontrolled.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/tag.md

@@ -0,0 +1,110 @@
+# Tag
+
+**Category:** display  
+**Description:** Compact chip for labeling, categorizing, or filtering content
+
+## When to use
+
+- Labeling, categorizing, or filtering content with a compact chip
+- Representing a removable selection or active filter (onDismiss)
+- Showing a set of keywords or attributes on an item
+
+## When NOT to use
+
+- A static, non-interactive status label — use Badge
+- A live system state with a dot — use Status
+
+## Anti-patterns
+
+### Tag provides accessible dismiss semantics; bolting interactivity onto Badge skips that
+
+**Bad:** `Using Badge with a custom close button to make it removable`  
+**Good:** `<Tag onDismiss={remove}> which renders a proper labeled remove button`  
+**Why:** Tag provides accessible dismiss semantics; bolting interactivity onto Badge skips that
+
+## Related components
+
+- **Badge** (alternative): Badge is the static, non-interactive counterpart
+- **TagsInput** (contained-by): TagsInput renders Tags for each entered value
+
+## Accessibility rationale
+
+When dismissible, the remove control is a real button with a label (dismissLabel) so keyboard users can remove it via Enter/Space; color variants are reinforced by text, not hue alone
+
+## Props
+
+| Name           | Type                                                       | Required | Default | Description                                                     |
+| -------------- | ---------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------- |
+| `variant`      | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | No       | default | Selects the visual style variant.                               |
+| `size`         | `'sm' \| 'md'`                                             | No       | md      | Visual size of the component (e.g. 'sm', 'md', 'lg').           |
+| `onDismiss`    | `() => void`                                               | No       | —       | When provided, renders a trailing remove button inside the chip |
+| `dismissLabel` | `string`                                                   | No       | Remove  | Accessible label for the dismiss button.                        |
+
+## Tokens
+
+- `--cascivo-color-bg-subtle`
+- `--cascivo-color-text-subtle`
+- `--cascivo-color-info`
+- `--cascivo-color-info-subtle`
+- `--cascivo-color-success`
+- `--cascivo-color-success-subtle`
+- `--cascivo-color-warning`
+- `--cascivo-color-warning-subtle`
+- `--cascivo-color-destructive`
+- `--cascivo-color-destructive-subtle`
+- `--cascivo-radius-badge`
+- `--cascivo-focus-ring`
+
+## Examples
+
+### Default
+
+```jsx
+<Tag>Design</Tag>
+```
+
+### Success
+
+```jsx
+<Tag variant="success">Approved</Tag>
+```
+
+### Dismissible
+
+Renders a trailing remove button labeled by dismissLabel
+
+```jsx
+<Tag onDismiss={() => removeFilter()}>Filter: Active</Tag>
+```
+
+## Boundaries
+
+| Area                       | Level    | Note                                                            |
+| -------------------------- | -------- | --------------------------------------------------------------- |
+| variant and dismissibility | flexible | onDismiss is optional; variant matches semantic meaning         |
+| token names                | strict   | Variant colors must resolve to --cascivo-color-\*-subtle tokens |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Tag component (display). Compact chip for labeling, categorizing, or filtering content
+
+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).
+
+Tag is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-bg-subtle, --cascivo-color-text-subtle, --cascivo-color-info, --cascivo-color-info-subtle, --cascivo-color-success, --cascivo-color-success-subtle, --cascivo-color-warning, --cascivo-color-warning-subtle, --cascivo-color-destructive, --cascivo-color-destructive-subtle, --cascivo-radius-badge, --cascivo-focus-ring
+
+Accessibility: role "none", WCAG 2.2-AA, keyboard: Enter/Space. Keep it AA.
+
+Do not change (strict): token names — Variant colors must resolve to --cascivo-color-*-subtle tokens
+Flexible: variant and dismissibility.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/tags-input.md

@@ -0,0 +1,94 @@
+# TagsInput
+
+**Category:** inputs  
+**Description:** Free-form multi-value chip input
+
+## When to use
+
+- Collecting an open-ended set of free-text values the user types themselves (keywords, emails, labels)
+- Each entry should appear as a removable chip and there is no fixed list to pick from
+- You need per-tag validation or a cap on how many entries are allowed
+
+## When NOT to use
+
+- Values come from a fixed, known list — use MultiSelect
+- Only a single line of free text is needed — use Input
+
+## Anti-patterns
+
+### Free-text entry invites typos and inconsistent values when the set is actually constrained; pick from options instead
+
+**Bad:** `<TagsInput value={selectedRoles} ... /> // roles are a fixed enum`  
+**Good:** `<MultiSelect options={roleOptions} />`  
+**Why:** Free-text entry invites typos and inconsistent values when the set is actually constrained; pick from options instead
+
+## Related components
+
+- **MultiSelect** (alternative): Use when values come from a fixed list rather than free text
+- **Input** (alternative): Use for a single free-text value with no chips
+
+## Accessibility rationale
+
+The typing surface is a real <input> and each tag exposes a dedicated remove button with an aria-label naming the tag, so screen-reader users can both add (Enter/comma) and delete (Backspace or the button) without ambiguity.
+
+## Props
+
+| Name            | Type                       | Required | Default | Description                                                        |
+| --------------- | -------------------------- | -------- | ------- | ------------------------------------------------------------------ |
+| `value`         | `string[]`                 | Yes      | —       | The controlled value.                                              |
+| `onValueChange` | `(v: string[]) => void`    | Yes      | —       | Called with the new value when it changes.                         |
+| `placeholder`   | `string`                   | No       | —       | Placeholder text shown when the field is empty.                    |
+| `validate`      | `(tag: string) => boolean` | No       | —       | Returns whether a candidate tag is allowed.                        |
+| `max`           | `number`                   | No       | —       | Maximum allowed value.                                             |
+| `disabled`      | `boolean`                  | No       | false   | When true, disables the control and removes it from the tab order. |
+
+## Tokens
+
+- `--cascivo-color-surface`
+- `--cascivo-color-border`
+- `--cascivo-color-accent`
+- `--cascivo-color-destructive`
+- `--cascivo-color-bg-subtle`
+- `--cascivo-radius-input`
+- `--cascivo-radius-full`
+- `--cascivo-focus-ring`
+
+## Examples
+
+### Basic
+
+```jsx
+<TagsInput value={['react', 'vue']} onValueChange={() => {}} placeholder="Add tag…" />
+```
+
+## Boundaries
+
+| Area        | Level    | Note                                                                                           |
+| ----------- | -------- | ---------------------------------------------------------------------------------------------- |
+| tag values  | flexible | Free text, optionally constrained by the validate predicate and max count                      |
+| commit keys | strict   | Enter and comma commit a tag; Backspace on empty removes the last — fixed interaction contract |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo TagsInput component (inputs). Free-form multi-value chip input
+
+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).
+
+TagsInput is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-surface, --cascivo-color-border, --cascivo-color-accent, --cascivo-color-destructive, --cascivo-color-bg-subtle, --cascivo-radius-input, --cascivo-radius-full, --cascivo-focus-ring
+
+Accessibility: role "textbox", WCAG 2.2-AA, keyboard: Enter/,/Backspace. Keep it AA.
+
+Do not change (strict): commit keys — Enter and comma commit a tag; Backspace on empty removes the last — fixed interaction contract
+Flexible: tag values.
+
+Do not invent props, tokens, or global viewport media queries.
+```