@maltjoy/mcp-server 0.4.0 → 0.6.0-beta.0

package/dist/doc/VJoySelectableItemGroup/guideline.md

@@ -0,0 +1,370 @@
+---
+component: VJoySelectableItemGroup
+status: draft
+language: en
+dsds: JoySelectableItemGroup.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Selectable item group
+
+Use **`VJoySelectableItemGroup`** when the user must pick one or more options from a short list that should read as **selectable tiles** — each option is a bordered card with a primary label and optional supporting line.
+
+Pass an `options` array and bind with `v-model:value`. Single selection uses hidden radios (`string` model); multiple selection embeds `VJoyCheckbox` in each tile (`array` model). Optional group label, validation, and per-option `subLabel` or custom `#item` slot content are supported.
+
+| | |
+| --- | --- |
+| **Code** | `VJoySelectableItemGroup` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoySelectableItemGroup docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-forms-vjoyselectableitemgroup--docs) |
+| **DSDS (machine)** | [`JoySelectableItemGroup.dsds.json`](./JoySelectableItemGroup.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoySelectableItemGroup")` |
+
+---
+
+## When to use this component
+
+Use a selectable item group when every option should stay visible as a compact tile — for example picking a delivery window, a billing cadence, or a small set of feature toggles where card-style affordance helps scanning.
+
+The component works best with **2–5** options. It manages selection state for you from an `options` array, so you avoid hand-wiring multiple `VJoySelectableItem` instances.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Exactly one choice with rich card layout (outline, expandable fields) | `VJoyRadio` `theme="outline"` inside `VJoyRadioGroup` |
+| Multiple boolean choices with card chrome (current recommendation) | `VJoyCheckboxCard` inside `VJoyCheckboxGroup` |
+| A call to action or navigation tile | `VJoyButtonCard` |
+| Compact inline radios without tile chrome | `VJoyRadio` inside `VJoyRadioGroup` |
+| Standard checkbox list (no tile styling) | `VJoyCheckbox` inside `VJoyCheckboxGroup` |
+| Long or searchable lists (roughly 8+ options) | `VJoySelect` |
+| Custom-styled clickable card divs | Still use Joy selection components + tokens — don’t reinvent chrome |
+
+> **Deprecated:** `VJoySelectableItemGroup` and `VJoySelectableItem` remain deprecated for new work (Joy v6+). Prefer `VJoyRadio` / `VJoyRadioGroup` for single choice, `VJoyCheckboxCard` / `VJoyCheckboxGroup` for multi-select cards, and `VJoyButtonCard` for CTA-style tiles. Keep using this component only while migrating legacy screens.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Fieldset wrapper | Yes | Root `<fieldset>` (`.joy-selectable-item-group__wrapper`) |
+| Group label | No | `VJoyLabel` rendered as `<legend>` when `label` is set |
+| Options container | Yes | Flex row/wrap (`.joy-selectable-item-group`) spacing tiles |
+| `VJoySelectableItem` | Yes | One tile per `options` entry (radio or checkbox mode) |
+| Option label | Yes* | From `option.label`, `labelKey`, default `#item` slot, or slot fallback |
+| Option sublabel | No | `option.subLabel` or `selectable-item-sublabel` on the child item |
+| Error message | No | `VJoyFormError` when both `invalid` and `errorMessage` are set |
+| Focus ring | Yes | On the native control inside each tile — don’t remove in product CSS |
+
+Each option object extends `VJoySelectableItem` props. Spread extra attributes with `option.attrs` (e.g. `data-testid`). Use the `#item` slot to replace the default label markup per option.
+
+### Selection modes
+
+| Mode | Prop | Model type | Control inside each tile |
+| --- | --- | --- | --- |
+| Single (default) | `multiple={false}` | `string` | Hidden `<input type="radio">` |
+| Multiple | `multiple={true}` | `string[]` | `VJoyCheckbox` |
+| Full width (single only) | `fullWidth={true}` | `string` | Tiles grow to fill horizontal space |
+
+`fullWidth` applies flex growth so tiles share the row evenly. Storybook documents it for **single selection only**.
+
+### Default values
+
+- `value` defaults to **`null`**
+- `multiple` defaults to **`false`**
+- `fullWidth` defaults to **`false`**
+- `required` defaults to **`false`**
+- `labelSize` defaults to **`medium`**
+- `requiredMark` defaults to **`false`**
+- `options` is **required**
+
+Props, events, and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Options and model
+
+- **MUST** bind with `v-model:value` (`value` / `update:value`).
+- **MUST** give each option a stable **`value`** (or map via `valueKey`) and a unique **`id`** for label/input association.
+- **SHOULD** set `name` on options when using an external `VJoyLabel` with `for` (see Storybook **With label**).
+- Use `valueKey` / `labelKey` when backend objects use different property names; type options as `TJoySelectableItemOption` (e.g. `satisfies (TJoySelectableItemOption & Record<string, unknown>)[]`).
+- Single selection: `value` is a **string** (or empty string when cleared). Multiple: `value` is a **string array** (may be empty).
+
+### Visual treatment
+
+There is **no `variant` or `size` prop**. Tile width, min-height, border, and colors come from Joy tokens inside `VJoySelectableItem` (e.g. `--selectable-item-flex-rule`, `--selectable-item-min-height`, `--joy-core-spacing-5` gap) — **don’t hardcode tile dimensions** in product CSS.
+
+---
+
+## States
+
+| State | What the user sees / can do |
+| --- | --- |
+| Default (unchecked) | Neutral border; option label in normal weight; tile is clickable |
+| Checked | Secondary border and text color; label weight increases |
+| Hover | Border shifts to secondary hover token (pointer devices, not disabled) |
+| Focus | Visible outline on the focused radio/checkbox inside the tile |
+| Disabled (per option) | Muted background and text; `not-allowed` cursor on that tile |
+| Invalid | Error border on all tiles when `invalid` is true; pair with `errorMessage` |
+| Full width | Tiles expand horizontally (`fullWidth` + single selection) |
+
+When validation fails, set `invalid` and pass `errorMessage` so `VJoyFormError` renders below the group. `errorMessage` alone does **not** show an error — `invalid` must also be true.
+
+In single-selection mode, clicking an already selected tile clears the selection (emits empty string).
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Selection and hierarchy
+
+- **SHOULD** offer **2–5** visible tiles; beyond that, prefer `VJoySelect` or a different pattern.
+- **SHOULD** keep option labels **parallel** (same grammar and similar length).
+- **MUST NOT** use this component for new features when a non-deprecated alternative fits (see deprecation note).
+- **MUST** use `multiple` only when the user may select more than one tile; use default single mode for exclusive choice.
+
+### Implementation
+
+- **MUST** use only documented props from MCP or `VJoySelectableItemGroup.vue` / `TJoySelectableItemOption`.
+- **MUST** bind `v-model:value` with the correct type (`string` vs `string[]`).
+- **MUST** style with Joy tokens — no custom `.joy-selectable-item` or `.joy-selectable-item-group` chrome overrides.
+- **MUST NOT** invent props (`size`, `variant`, `direction`, …).
+- **MUST** set `invalid` and `errorMessage` together when showing a validation error.
+- **SHOULD** use `fullWidth` only for single-selection rows that must span the container.
+- **SHOULD** pass `disabled: true` on individual options the user cannot pick — not only visual dimming.
+
+### Labels and forms
+
+- **SHOULD** provide a group label via `label` or an external `VJoyLabel` linked with matching `for` / `name` / `id`.
+- **SHOULD** use `requiredMark` with `required` when the form uses asterisks.
+- **SHOULD** use `optionalLabel` on non-required groups when mixed with required fields.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `v-model:value` with correct string vs array type | `v-model` (wrong binding name) |
+| Unique `id` + `value` on every option | Duplicate ids across tiles |
+| `invalid` + `errorMessage` for validation | `errorMessage` without `invalid` |
+| `VJoyCheckboxCard` / `VJoyRadio` for new card pickers | New screens on deprecated tiles |
+| `subLabel` for one-line detail | Long paragraphs as the primary label |
+| `#item` slot for icons or custom markup | Custom clickable divs mimicking tiles |
+
+---
+
+## Content
+
+Tile copy should make each option distinct at a glance and read consistently as a set.
+
+### Label formula
+
+**Short noun phrase** naming the option:
+
+- ✅ Standard delivery  
+- ✅ Monthly billing  
+- ✅ Option A  
+
+Use the **same part of speech** across siblings.
+
+### Sublabel formula
+
+**One line of supporting detail** under the primary label:
+
+- ✅ 3–5 business days  
+- ✅ Billed every month  
+- ✅ Includes basic support  
+
+Keep sublabels shorter than the main label; avoid duplicating the group legend.
+
+### Writing rules
+
+| Strength | Rule |
+| --- | --- |
+| **MUST** | Label the **option**, not the action — ✅ `Express delivery` · ❌ `Select express delivery` |
+| **MUST** | Provide a group label (`label` or external `VJoyLabel`) in forms — not only tile text |
+| **MUST** | Error messages state what to fix — ✅ `Select a delivery method` · ❌ `Invalid` |
+| **MUST NOT** | Repeat the group legend in every tile label |
+| **MUST NOT** | Use Yes / No as two tile labels when the question isn’t literally binary |
+| **SHOULD** | Keep primary labels ≤ ~30 characters; move detail to `subLabel` |
+| **SHOULD** | Use sentence case for labels and sublabels |
+| **SHOULD** | Keep `value` as a stable programmatic key; localize display via `label` / `labelKey` |
+
+### Patterns
+
+**Segmented single choice** — `fullWidth` + 2–4 tiles (e.g. billing period). One sublabel per tile if timing or price differs.
+
+**Multi-select filters** — `multiple` + short parallel labels; parent handles the selected array.
+
+**Custom tile body** — `#item` slot for an icon + label when the default text slot is too plain; keep accessible name in the slot content.
+
+**Validation** — Group label + `errorMessage` below: ✅ `Delivery method` + `Select one option to continue`.
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | `<fieldset>` group; single mode uses `radiogroup` semantics via native radios; multiple mode uses checkboxes |
+| Name | Group name from `label` / `<legend>` or external `VJoyLabel`; each option named by label text or `#item` slot |
+| Keyboard | **Tab** to focus options; **Space** toggles checkboxes; arrow keys move between radios in single mode (browser default) |
+| Focus | Visible focus outline on the control inside the tile — don’t remove with product CSS |
+| Disabled | `disabled` on the underlying input per option; explain when the reason isn’t obvious |
+| Invalid | Error styling plus `VJoyFormError` text — not color alone |
+| Custom content | `#item` slot must still expose a readable option name (text or `aria-label` on meaningful content) |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  VJoySelectableItemGroup,
+  VJoyLabel,
+  type TJoySelectableItemOption,
+} from '@maltjoy/core-vue'
+
+const delivery = ref('standard')
+const features = ref<string[]>(['analytics'])
+
+const deliveryOptions: TJoySelectableItemOption[] = [
+  { id: 'delivery-standard', value: 'standard', label: 'Standard', subLabel: '3–5 business days' },
+  { id: 'delivery-express', value: 'express', label: 'Express', subLabel: 'Next business day' },
+]
+
+const featureOptions = [
+  { id: 'feat-analytics', value: 'analytics', label: 'Analytics' },
+  { id: 'feat-sso', value: 'sso', label: 'SSO', disabled: true },
+  { id: 'feat-api', value: 'api', label: 'API access' },
+]
+</script>
+
+<template>
+  <!-- Single selection (string model) -->
+  <VJoySelectableItemGroup
+    v-model:value="delivery"
+    label="Delivery method"
+    required
+    required-mark
+    :options="deliveryOptions"
+  />
+
+  <!-- Full-width segmented row -->
+  <VJoySelectableItemGroup
+    v-model:value="delivery"
+    full-width
+    :options="deliveryOptions"
+  />
+
+  <!-- Multiple selection (array model) -->
+  <VJoySelectableItemGroup
+    v-model:value="features"
+    multiple
+    label="Add-ons"
+    :options="featureOptions"
+  />
+
+  <!-- Validation -->
+  <VJoySelectableItemGroup
+    v-model:value="delivery"
+    label="Delivery method"
+    :options="deliveryOptions"
+    invalid
+    error-message="Select a delivery method"
+  />
+
+  <!-- External label -->
+  <VJoyLabel for="billing-period">Billing period</VJoyLabel>
+  <VJoySelectableItemGroup
+    v-model:value="delivery"
+    :options="deliveryOptions.map((o) => ({ ...o, name: 'billing-period' }))"
+  />
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoySelectableItemGroup` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoySelectableItem` | Low-level tile (usually composed by the group — avoid standalone in new work) |
+| `VJoyRadio` / `VJoyRadioGroup` | Single choice; preferred replacement for exclusive tile lists |
+| `VJoyCheckboxCard` / `VJoyCheckboxGroup` | Multi-select card tiles; preferred replacement for `multiple` mode |
+| `VJoyButtonCard` | CTA or navigation tile, not a form selection |
+| `VJoyLabel` | External group legend with `for` / `name` binding |
+| `VJoyFormError` | Also rendered automatically when `invalid` + `errorMessage` are set on the group |
+| `VJoySelect` | Long dropdown lists |
+| `VJoyCheckbox` | Plain multi-select without tile chrome |
+
+---
+
+## For agents
+
+Optional for readers; **required** for vibe-coding quality. Maps to `agentDocumentBlocks` in [`JoySelectableItemGroup.dsds.json`](./JoySelectableItemGroup.dsds.json).
+
+### Pick the right component
+
+| If the intent is… | Emit… | Do not emit… |
+| --- | --- | --- |
+| New single-choice card picker | `VJoyRadio` `theme="outline"` in `VJoyRadioGroup` | `VJoySelectableItemGroup` |
+| New multi-choice card picker | `VJoyCheckboxCard` in `VJoyCheckboxGroup` | `VJoySelectableItemGroup` `multiple` |
+| Legacy tile group (maintain only) | `VJoySelectableItemGroup` | Raw `VJoySelectableItem` loops without the group |
+| Dropdown / many options | `VJoySelect` | Many selectable tiles |
+| CTA tile | `VJoyButtonCard` | Selectable item with fake selection state |
+| Plain checkbox list | `VJoyCheckboxGroup` | `multiple` selectable item group |
+
+### Hard rules
+
+1. **MUST** call `joy_get_component_info("VJoySelectableItemGroup")` (or read source types) before generating props.  
+2. **MUST** bind `v-model:value` — not `v-model` / `modelValue`.  
+3. **MUST** use `string` model for single selection and `string[]` for `multiple`.  
+4. **MUST** include `value` and unique `id` on every option object.  
+5. **MUST** set both `invalid` and `errorMessage` to show validation text.  
+6. **MUST NOT** invent props (`size`, `variant`, `direction`, …).  
+7. **MUST NOT** use `fullWidth` with `multiple` (unsupported pattern in Storybook).  
+8. **MUST NOT** override `.joy-selectable-item` / `.joy-selectable-item-group` border, size, or padding.  
+9. **SHOULD NOT** emit this component for greenfield UI — prefer `VJoyRadio`, `VJoyCheckboxCard`, or `VJoyButtonCard`.  
+10. **SHOULD** use `valueKey` / `labelKey` when option objects use non-standard keys.
+
+### Checklist
+
+- [ ] Correct component (or named non-deprecated alternative for new work)
+- [ ] Props from MCP / source only — no invented API
+- [ ] `v-model:value` with matching `string` vs `string[]` type
+- [ ] Every option has `value` + unique `id`
+- [ ] `multiple` aligned with selection semantics
+- [ ] Group label present in forms (`label` or external `VJoyLabel`)
+- [ ] `invalid` + `errorMessage` when validation fails
+- [ ] No custom selectable-tile chrome CSS
+- [ ] `fullWidth` only on single-selection groups
+
+---
+
+## DSDS mapping
+
+This Markdown mirrors [`JoySelectableItemGroup.dsds.json`](./JoySelectableItemGroup.dsds.json) (DSDS **0.15.2**).
+
+| Section here | DSDS block |
+| --- | --- |
+| When to use / not | `use-cases` |
+| Anatomy / selection modes | `anatomy` |
+| States | `states` |
+| Best practices / content rules | `guidelines` (+ `content`) |
+| Accessibility | `accessibility` |
+| Examples | `sections` |
+| For agents | `agentDocumentBlocks` |
+| Props detail | `api` in JSON + Joy MCP |
+| Imports | `imports` in JSON |
+| Token sizing | `design-specifications` in JSON (`--selectable-item-flex-rule`, `--selectable-item-min-height`, `--joy-core-spacing-5`) |

package/dist/doc/VJoySeparator/guideline.md

@@ -0,0 +1,161 @@
+---
+component: VJoySeparator
+status: draft
+language: en
+dsds: JoySeparator.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Separator
+
+Use **`VJoySeparator`** when you need a horizontal rule with optional centered label text to break up content — for example an “or” divider between sign-in options, a date stamp between timeline blocks, or a named section boundary inside a form or list.
+
+It renders a full-width line pair flanking the label, uses Joy secondary color and `primary-400` typography, and supports a compact **`small`** layout for narrow columns.
+
+| | |
+| --- | --- |
+| **Code** | `VJoySeparator` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoySeparator docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-view-vjoyseparator--docs) |
+| **DSDS (machine)** | [`JoySeparator.dsds.json`](./JoySeparator.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoySeparator")` |
+
+---
+
+## When to use this component
+
+Use a separator when two blocks of content should read as distinct sections but stay on the same page or panel — especially when a short label clarifies the break (`or`, `and`, a date, or a section name).
+
+Typical jobs: alternate auth paths (“or continue with email”), grouped settings with a named divider, or visual breathing room between stacked list sections.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Structured card or panel with header, body, footer | `VJoyPanel` / `VJoyPanelSection` |
+| Spacing only — no line | `VJoyWrapper` gap / margin tokens |
+| Divider between menu or dropdown items | Built-in list separators in `VJoyMenu` / `VJoyDropdownList` |
+| A semantic document break for assistive tech alone | Proper heading hierarchy (`h2`–`h6`) — this component is **not** an `<hr>` |
+| Custom `<hr>` or border-top CSS | Still use `VJoySeparator` + Joy tokens |
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root container | Yes | `.joy-separator` block wrapper (`display: block`, full width) |
+| Label (`text` prop) | No | Centered copy inside `<span>`; omit or leave empty for a line-only divider |
+| Line segments | Yes | `::before` and `::after` pseudo-elements on the label span — 1px rules using `--separator-color` |
+| Vertical spacing | Yes | `margin: var(--joy-core-spacing-4) 0` on the root — don’t add duplicate margins in apps |
+
+### Default values
+
+- `size` defaults to **`default`**
+- `text` is **optional** — when omitted, the center span is empty and only the horizontal rules show
+
+Props: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Size behavior
+
+`size` controls layout width, not typography scale:
+
+| `size` | Behavior |
+| --- | --- |
+| `default` | Full width; line segments grow with `flex: 1` on each side of the label |
+| `small` | Label row capped at **320px**, centered; each line segment capped at **60px** — use in narrow columns (auth panels, sidebars) |
+
+There is no `medium` or `large` value. Color and font come from Joy tokens (`--joy-color-secondary-50`, `primary-400`) — **do not hardcode** line color, font size, or the 320px / 60px caps in product CSS.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Layout and hierarchy
+
+- **SHOULD** use a separator **between** two related blocks — not as the only visual structure on an empty page.
+- **SHOULD** use `size="small"` in narrow layouts; keep `default` for full-width sections.
+- **MUST NOT** stack multiple separators back-to-back without content between them.
+- **MUST NOT** rely on the separator alone to convey page structure — pair with headings or landmarks when sections need names for all users.
+
+### Implementation
+
+- **MUST** use only documented `size` values from MCP or `JoySeparator.types.ts` (`default`, `small`).
+- **MUST** style with Joy tokens — no custom `.joy-separator` line color, font, or margin overrides.
+- **MUST NOT** invent props (`variant`, `color`, `orientation`, `vertical`, …).
+- **MUST NOT** wrap the separator in a clickable element or attach click handlers for navigation — use `VJoyButton` or `VJoyLink` instead.
+
+### Text copy
+
+- **SHOULD** keep `text` **short** — one to three words (`or`, `and`, `Today`, `Billing`).
+- **MUST** use sentence case for labels.
+- **MUST NOT** put long instructions or links in `text` — use body copy or `VJoyHighlight` above/below the break.
+- **SHOULD** (FR) follow French typography rules (non-breaking spaces before `;`, `?`, `!`, `:`) when localized.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `text="or"` between two auth options | Paragraph of help text in `text` |
+| `size="small"` in a 320px-wide panel | `default` forcing oversized lines in a sidebar |
+| Headings + separator for named sections | Separator as the only section title |
+| Joy spacing tokens around content blocks | Extra `margin-top` on `.joy-separator` in app CSS |
+| `VJoyPanelSection` for major page structure | Separators instead of panel headers |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | Presentational `<div>` — **not** a native `<hr>` and not a landmark |
+| Name | No interactive name; optional `text` is visible copy, not an accessible section heading |
+| Structure | If `text` names a section (e.g. “Billing”), also provide a real heading (`h2`–`h6`) or `aria-labelledby` on the section — don’t rely on the separator label alone |
+| Keyboard | Not focusable; no keyboard interaction |
+| Color | Line and label use `--joy-color-secondary-50` — decorative; section meaning must not depend on color alone |
+| Motion | Static — no animation API |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoySeparator } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Labeled break between sign-in options -->
+  <VJoyButton variant="main" label="Continue with Google" />
+  <VJoySeparator text="or" />
+  <VJoyInput v-model="email" name="email" label="Email address" />
+
+  <!-- Compact divider in a narrow column -->
+  <VJoySeparator size="small" text="Today" />
+
+  <!-- Line only (no label) -->
+  <VJoySeparator />
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoySeparator` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyWrapper` | Flex layout and gap between blocks without a visible rule |
+| `VJoyPanel` / `VJoyPanelSection` | Card-like sections with title, body, and actions |
+| `VJoyText` | Body copy or section titles without a horizontal rule |
+| `VJoyButton` / `VJoyLink` | Actions placed above or below a separator (e.g. auth flows) |
+| `VJoyInput` | Form fields often separated by an “or” divider in combined flows |