@cascivo/mcp 0.2.0 → 0.3.3

package/dist/context/pull-to-refresh.md

@@ -0,0 +1,101 @@
+# PullToRefresh
+
+**Category:** feedback  
+**Description:** Wraps a scrollable region and triggers a refresh when pulled down past a threshold at the top
+
+## When to use
+
+- A scrollable list or feed on touch devices that the user refreshes by pulling down from the top
+- Mobile screens where a dedicated refresh button would be redundant or out of reach
+- Content that updates on demand and benefits from a familiar pull gesture
+
+## When NOT to use
+
+- Desktop, pointer-first surfaces — provide an explicit Refresh button
+- Content that auto-refreshes or paginates on scroll — use infinite scroll instead
+- Regions that are not the primary scroll container of the screen
+
+## Anti-patterns
+
+### Pull-to-refresh is touch-only; keyboard and pointer users need an explicit control
+
+**Bad:** `Wrapping a non-scrolling element and relying on pull as the only refresh path`  
+**Good:** `Wrap the scroll container and also expose a Refresh control for non-touch users`  
+**Why:** Pull-to-refresh is touch-only; keyboard and pointer users need an explicit control
+
+## Related components
+
+- **Spinner** (contains): Shows the Spinner while the refresh promise settles
+- **ScrollArea** (pairs-with): Wraps a scrollable region; pair with the app’s scroll container
+
+## Accessibility rationale
+
+The gesture is a touch-only enhancement: it arms only at scrollTop 0 and uses touch-action/overscroll containment so normal scrolling and keyboard use are unaffected. A polite aria-live status region announces the pull, release, and refreshing states (strings from the i18n catalog), and the Spinner exposes role="status" while loading. Because pull-to-refresh cannot be performed without a pointer, apps should also offer an explicit refresh control for keyboard users.
+
+## Props
+
+| Name        | Type                                                       | Required | Default | Description                                                                   |
+| ----------- | ---------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------- |
+| `onRefresh` | `() => Promise<unknown> \| unknown`                        | Yes      | —       | Called when the pull passes the threshold; the spinner shows until it settles |
+| `children`  | `React.ReactNode`                                          | Yes      | —       | Content rendered inside the component.                                        |
+| `threshold` | `number`                                                   | No       | 64      | Pull distance (px) required to trigger a refresh.                             |
+| `disabled`  | `boolean`                                                  | No       | —       | When true, disables the control and removes it from the tab order.            |
+| `labels`    | `{ pull?: string; release?: string; refreshing?: string }` | 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-text-muted`
+- `--cascivo-motion-enter`
+
+## Examples
+
+### Basic
+
+The spinner shows until the returned promise settles.
+
+```jsx
+<PullToRefresh onRefresh={() => refetch()}>
+  <FeedList items={items} />
+</PullToRefresh>
+```
+
+### Custom threshold
+
+Requires a longer pull before a refresh is triggered.
+
+```jsx
+<PullToRefresh onRefresh={loadLatest} threshold={96}>
+  <MessageList />
+</PullToRefresh>
+```
+
+## Boundaries
+
+| Area      | Level    | Note                                                             |
+| --------- | -------- | ---------------------------------------------------------------- |
+| threshold | flexible | Pull distance required to trigger is configurable (default 64px) |
+| onRefresh | flexible | May return a promise; the spinner persists until it settles      |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo PullToRefresh component (feedback). Wraps a scrollable region and triggers a refresh when pulled down past a threshold at the top
+
+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).
+
+PullToRefresh is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-text-muted, --cascivo-motion-enter
+
+Accessibility: role "status", WCAG 2.2-AA. Keep it AA.
+Flexible: threshold, onRefresh.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/qr-code.md

@@ -0,0 +1,101 @@
+# QrCode
+
+**Category:** display  
+**Description:** Encodes a URL or short text into a scannable SVG QR code
+
+## When to use
+
+- Letting users scan a URL, contact, or short token with a phone camera
+- Bridging print or screen to a digital destination
+- Sharing a link where typing it would be error-prone
+
+## When NOT to use
+
+- Encoding long or sensitive payloads — QR codes are public and capacity-limited
+- Where a plain, copyable link or button is more accessible
+
+## Anti-patterns
+
+### Long payloads force a dense, hard-to-scan code; encode a short URL that redirects instead
+
+**Bad:** `<QrCode value={veryLongString} />`  
+**Good:** `<QrCode value="https://cascivo.dev/s/abc" />`  
+**Why:** Long payloads force a dense, hard-to-scan code; encode a short URL that redirects instead
+
+## Related components
+
+- **CopyButton** (pairs-with): Offer a copyable link alongside the QR code for non-camera contexts
+
+## Accessibility rationale
+
+Rendered as role="img" with an accessible label so screen-reader users know a QR code is present; the underlying link should also be available as text since a QR code is not operable by assistive tech
+
+## Props
+
+| Name              | Type                       | Required | Default      | Description                                           |
+| ----------------- | -------------------------- | -------- | ------------ | ----------------------------------------------------- |
+| `value`           | `string`                   | Yes      | —            | Text or URL to encode                                 |
+| `size`            | `number`                   | No       | 128          | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
+| `errorCorrection` | `'L' \| 'M' \| 'Q' \| 'H'` | No       | M            | Higher levels tolerate more damage but hold less data |
+| `radius`          | `string`                   | No       | —            | CSS length rounding the corners                       |
+| `fill`            | `string`                   | No       | currentColor | Foreground color of the QR modules.                   |
+| `background`      | `string`                   | No       | transparent  | Background color behind the QR code.                  |
+| `label`           | `string`                   | No       | —            | Text label for the control.                           |
+
+## Tokens
+
+- `--cascivo-color-text`
+
+## Examples
+
+### URL
+
+```jsx
+<QrCode value="https://cascivo.dev" />
+```
+
+### High error correction
+
+```jsx
+<QrCode value="https://cascivo.dev" errorCorrection="H" size={200} />
+```
+
+### Custom colors
+
+```jsx
+<QrCode
+  value="cascivo"
+  fill="var(--cascivo-color-accent)"
+  background="var(--cascivo-color-surface)"
+/>
+```
+
+## Boundaries
+
+| Area            | Level    | Note                                                                                             |
+| --------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| errorCorrection | flexible | Raise to Q/H when the code may be printed small or partially obscured                            |
+| colors          | flexible | Defaults to currentColor; keep sufficient contrast between fill and background to stay scannable |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo QrCode component (display). Encodes a URL or short text into a scannable SVG QR code
+
+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).
+
+QrCode is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-text
+
+Accessibility: role "img", WCAG 2.2-AA. Keep it AA.
+Flexible: errorCorrection, colors.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/radial-progress.md

@@ -0,0 +1,117 @@
+# RadialProgress
+
+**Category:** feedback  
+**Description:** Circular progress indicator using conic-gradient, with percentage label and variant colors
+
+## When to use
+
+- Dashboard KPI metrics showing completion percentage
+- Skill or profile completion meters
+- Storage or quota usage displays
+
+## When NOT to use
+
+- Unknown-length operations where completion is not measurable — use Spinner
+- Linear progress where a bar is more readable — use Progress or ProgressBar
+- Comparing multiple values against each other — use a chart component
+
+## Anti-patterns
+
+### RadialProgress implies a known completion percentage; fake cycling breaks the semantic contract
+
+**Bad:** `<RadialProgress value={indeterminate} /> with a fake cycling value`  
+**Good:** `<Spinner /> for indeterminate loading states`  
+**Why:** RadialProgress implies a known completion percentage; fake cycling breaks the semantic contract
+
+## Related components
+
+- **Spinner** (alternative): Use for indeterminate loading where total duration is unknown
+- **Progress** (alternative): Use when a horizontal bar is more appropriate for the layout
+- **ProgressCircle** (alternative): Similar shape but ProgressCircle uses SVG stroke; RadialProgress uses CSS conic-gradient
+
+## Accessibility rationale
+
+Renders a div with role="progressbar", aria-valuenow (clamped 0–100), aria-valuemin=0, aria-valuemax=100. Provide aria-label when no visible label describes the metric being measured.
+
+## Props
+
+| Name         | Type                                                       | Required | Default | Description                                              |
+| ------------ | ---------------------------------------------------------- | -------- | ------- | -------------------------------------------------------- |
+| `value`      | `number`                                                   | Yes      | —       | The controlled value.                                    |
+| `size`       | `'sm' \| 'md' \| 'lg'`                                     | No       | md      | Visual size of the component (e.g. 'sm', 'md', 'lg').    |
+| `variant`    | `'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | No       | primary | Selects the visual style variant.                        |
+| `children`   | `React.ReactNode`                                          | No       | —       | Content rendered inside the component.                   |
+| `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-color-primary`
+- `--cascivo-color-info`
+- `--cascivo-color-success`
+- `--cascivo-color-warning`
+- `--cascivo-color-error`
+- `--cascivo-color-surface`
+- `--cascivo-color-surface-2`
+- `--cascivo-color-text`
+- `--cascivo-radius-full`
+
+## Examples
+
+### Default
+
+Primary color, md size, auto percentage label
+
+```jsx
+<RadialProgress value={72} />
+```
+
+### Success large
+
+Completed state with success color at large size
+
+```jsx
+<RadialProgress value={100} size="lg" variant="success" />
+```
+
+### Custom label
+
+Override the default percentage label with custom content
+
+```jsx
+<RadialProgress value={45} variant="warning">
+  45 GB
+</RadialProgress>
+```
+
+## Boundaries
+
+| Area  | Level    | Note                                                                         |
+| ----- | -------- | ---------------------------------------------------------------------------- |
+| label | flexible | Default is the percentage string; pass children to override with any content |
+| color | strict   | Color resolves through --cascivo-color-\* semantic tokens via data-variant   |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo RadialProgress component (feedback). Circular progress indicator using conic-gradient, with percentage label and variant colors
+
+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).
+
+RadialProgress is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-primary, --cascivo-color-info, --cascivo-color-success, --cascivo-color-warning, --cascivo-color-error, --cascivo-color-surface, --cascivo-color-surface-2, --cascivo-color-text, --cascivo-radius-full
+
+Accessibility: role "progressbar", WCAG 2.2-AA. Keep it AA.
+
+Do not change (strict): color — Color resolves through --cascivo-color-* semantic tokens via data-variant
+Flexible: label.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/radio-card.md

@@ -0,0 +1,95 @@
+# RadioCard
+
+**Category:** inputs  
+**Description:** Selectable card backed by a native radio input. Use RadioCardGroup for single-select groups.
+
+## When to use
+
+- Single-select from a few options where each choice needs a title plus supporting description (plans, tiers, shipping methods)
+- Selection UIs where a larger, more prominent click target improves clarity over a plain radio
+
+## When NOT to use
+
+- Plain text options with no description — use Radio for a lighter footprint
+- A compact inline switch between a few modes — use SegmentedControl
+- Too many options to render as cards — use Select
+
+## Anti-patterns
+
+### RadioCard reads its name, selected value, and change handler from RadioCardGroup context; outside a group it has no shared name and cannot enforce single-selection
+
+**Bad:** `<RadioCard ... /> rendered standalone without RadioCardGroup`  
+**Good:** `<RadioCardGroup name="plan" label="Plan"><RadioCard value="pro" title="Pro" /></RadioCardGroup>`  
+**Why:** RadioCard reads its name, selected value, and change handler from RadioCardGroup context; outside a group it has no shared name and cannot enforce single-selection
+
+## Related components
+
+- **Radio** (alternative): Use for plain text options without descriptions
+- **CheckboxCard** (alternative): Use the card pattern when multiple selections are allowed
+- **SegmentedControl** (alternative): Use for a compact inline single choice
+
+## Accessibility rationale
+
+Each card is a <label> wrapping a native <input type="radio"> and RadioCardGroup applies role="radiogroup" with an aria-label, so selection, arrow-key navigation, and label association come from the platform rather than custom click handling.
+
+## Props
+
+| Name          | Type        | Required | Default | Description          |
+| ------------- | ----------- | -------- | ------- | -------------------- |
+| `value`       | `string`    | Yes      | —       | Radio value          |
+| `title`       | `ReactNode` | Yes      | —       | Card title           |
+| `description` | `ReactNode` | No       | —       | Optional description |
+| `disabled`    | `boolean`   | No       | —       | Disables the card    |
+
+## Tokens
+
+- `--cascivo-color-accent`
+- `--cascivo-color-border`
+- `--cascivo-radius-surface`
+- `--cascivo-color-active-bg`
+
+## Examples
+
+### Plan selector
+
+Single-select plan picker
+
+```jsx
+<RadioCardGroup name="plan" defaultValue="pro" label="Plan">
+  <RadioCard value="free" title="Free" description="For hobbyists" />
+  <RadioCard value="pro" title="Pro" description="For professionals" />
+  <RadioCard value="team" title="Team" description="For teams" />
+</RadioCardGroup>
+```
+
+## Boundaries
+
+| Area                  | Level    | Note                                                                      |
+| --------------------- | -------- | ------------------------------------------------------------------------- |
+| token names           | strict   | Card and indicator styling must resolve to the listed --cascivo-\* tokens |
+| title and description | flexible | title and description accept arbitrary ReactNode content                  |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo RadioCard component (inputs). Selectable card backed by a native radio input. Use RadioCardGroup for single-select groups.
+
+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).
+
+RadioCard is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-accent, --cascivo-color-border, --cascivo-radius-surface, --cascivo-color-active-bg
+
+Accessibility: role "radiogroup", WCAG 2.2-AA, keyboard: ArrowDown/ArrowUp/Space. Keep it AA.
+
+Do not change (strict): token names — Card and indicator styling must resolve to the listed --cascivo-* tokens
+Flexible: title and description.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/radio.md

@@ -0,0 +1,94 @@
+# Radio
+
+**Category:** inputs  
+**Description:** Single choice from a set, grouped with RadioGroup
+
+## When to use
+
+- Choosing exactly one option from a small, mutually exclusive set (roughly 2–6) where all options should stay visible
+- Form fields where the choices need plain text labels and a familiar radio affordance
+
+## When NOT to use
+
+- Selecting one of many options where showing them all is impractical — use Select
+- Each option needs a title plus description or richer layout — use RadioCard
+- A compact inline switch between a few views or modes — use SegmentedControl
+
+## Anti-patterns
+
+### Checkboxes imply multi-select; a radio group communicates and enforces single-choice semantics to assistive tech
+
+**Bad:** `Multiple <Checkbox> where only one may be selected`  
+**Good:** `<RadioGroup name="plan"><Radio value="pro" label="Pro" /><Radio value="team" label="Team" /></RadioGroup>`  
+**Why:** Checkboxes imply multi-select; a radio group communicates and enforces single-choice semantics to assistive tech
+
+## Related components
+
+- **RadioCard** (alternative): Use when each option needs a title, description, or card layout
+- **SegmentedControl** (alternative): Use for a compact inline single choice among a few options
+- **Select** (alternative): Use when there are too many options to show inline
+
+## Accessibility rationale
+
+Each Radio is a native <input type="radio"> wrapped in a <label>, and RadioGroup applies role="radiogroup" with a shared name so the browser provides roving arrow-key navigation, single-selection, and label association for free.
+
+## Props
+
+| Name       | Type      | Required | Default | Description                                                        |
+| ---------- | --------- | -------- | ------- | ------------------------------------------------------------------ |
+| `label`    | `string`  | No       | —       | Text label for the control.                                        |
+| `value`    | `string`  | Yes      | —       | The controlled value.                                              |
+| `disabled` | `boolean` | No       | false   | When true, disables the control and removes it from the tab order. |
+| `name`     | `string`  | No       | —       | Form field name shared by the radio group.                         |
+
+## Tokens
+
+- `--cascivo-color-surface`
+- `--cascivo-color-accent`
+- `--cascivo-color-border-strong`
+- `--cascivo-color-text-on-accent`
+- `--cascivo-radius-full`
+- `--cascivo-focus-ring`
+
+## Examples
+
+### Group
+
+```jsx
+<RadioGroup name="plan" defaultValue="pro">
+  <Radio value="pro" label="Pro" />
+  <Radio value="team" label="Team" />
+</RadioGroup>
+```
+
+## Boundaries
+
+| Area                          | Level    | Note                                                                           |
+| ----------------------------- | -------- | ------------------------------------------------------------------------------ |
+| token names                   | strict   | Control and label styling must resolve to the listed --cascivo-\* tokens       |
+| option labels and orientation | flexible | Labels are free text and the group supports horizontal or vertical orientation |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo Radio component (inputs). Single choice from a set, grouped with RadioGroup
+
+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).
+
+Radio is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-surface, --cascivo-color-accent, --cascivo-color-border-strong, --cascivo-color-text-on-accent, --cascivo-radius-full, --cascivo-focus-ring
+
+Accessibility: role "radio", WCAG 2.2-AA, keyboard: ArrowUp/ArrowDown/ArrowLeft/ArrowRight/Space. Keep it AA.
+
+Do not change (strict): token names — Control and label styling must resolve to the listed --cascivo-* tokens
+Flexible: option labels and orientation.
+
+Do not invent props, tokens, or global viewport media queries.
+```

package/dist/context/rating-group.md

@@ -0,0 +1,97 @@
+# RatingGroup
+
+**Category:** inputs  
+**Description:** Star rating input with accessible radio group pattern
+
+## When to use
+
+- Capturing a discrete subjective rating on a small fixed scale (e.g. 1–5 stars)
+- Displaying an existing rating read-only as a compact star summary
+
+## When NOT to use
+
+- Choosing along a continuous or large numeric range — use Slider
+- Entering an exact bounded number with steppers — use NumberInput
+- A non-rating single choice among labeled options — use Radio or SegmentedControl
+
+## Anti-patterns
+
+### A slider communicates a continuous magnitude; RatingGroup uses radio semantics so each star is an exclusive discrete choice announced as "N of M stars"
+
+**Bad:** `<Slider min={1} max={5} step={1} /> labeled as a star rating`  
+**Good:** `<RatingGroup value={rating} onValueChange={setRating} />`  
+**Why:** A slider communicates a continuous magnitude; RatingGroup uses radio semantics so each star is an exclusive discrete choice announced as "N of M stars"
+
+## Related components
+
+- **Slider** (alternative): Use for continuous or larger numeric ranges
+- **NumberInput** (alternative): Use when an exact typed number is needed rather than a rating
+
+## Accessibility rationale
+
+Each star is a <button role="radio"> inside a role="radiogroup" with aria-checked on the selected value and an aria-label like "3 of 5 stars"; when readOnly or disabled the stars drop out of the tab order so a non-interactive rating is not announced as actionable.
+
+## Props
+
+| Name            | Type                   | Required | Default | Description                                                        |
+| --------------- | ---------------------- | -------- | ------- | ------------------------------------------------------------------ |
+| `value`         | `number`               | Yes      | —       | The controlled value.                                              |
+| `onValueChange` | `(v: number) => void`  | No       | —       | Called with the new value when it changes.                         |
+| `max`           | `number`               | No       | 5       | Maximum allowed value.                                             |
+| `size`          | `'sm' \| 'md' \| 'lg'` | No       | md      | Visual size of the component (e.g. 'sm', 'md', 'lg').              |
+| `disabled`      | `boolean`              | No       | false   | When true, disables the control and removes it from the tab order. |
+| `readOnly`      | `boolean`              | No       | false   | When true, the value is shown but cannot be edited.                |
+| `labels`        | `RatingGroupLabels`    | No       | —       | Overrides for the component’s user-visible strings (i18n).         |
+
+## Tokens
+
+- `--cascivo-color-warning`
+- `--cascivo-color-border-strong`
+- `--cascivo-color-accent`
+- `--cascivo-radius-sm`
+
+## Examples
+
+### Basic
+
+```jsx
+<RatingGroup value={3} onValueChange={() => {}} />
+```
+
+### Read only
+
+```jsx
+<RatingGroup value={4} readOnly />
+```
+
+## Boundaries
+
+| Area             | Level    | Note                                                                      |
+| ---------------- | -------- | ------------------------------------------------------------------------- |
+| token names      | strict   | Star styling must resolve to the listed --cascivo-\* tokens               |
+| scale and labels | flexible | max sets the scale and labels.rating customizes the per-star announcement |
+
+## AI context prompt
+
+Copy this into an LLM context bar before editing this component:
+
+```text
+I am modifying the cascivo RatingGroup component (inputs). Star rating input with accessible radio group pattern
+
+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).
+
+RatingGroup is strictly bound to these tokens — use only these, do not invent token names:
+  --cascivo-color-warning, --cascivo-color-border-strong, --cascivo-color-accent, --cascivo-radius-sm
+
+Accessibility: role "radiogroup", WCAG 2.2-AA, keyboard: Tab/Space/Enter. Keep it AA.
+
+Do not change (strict): token names — Star styling must resolve to the listed --cascivo-* tokens
+Flexible: scale and labels.
+
+Do not invent props, tokens, or global viewport media queries.
+```