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

package/dist/doc/VJoyFunnel/guideline.md

@@ -0,0 +1,349 @@
+---
+component: VJoyFunnel
+status: draft
+language: en
+dsds: JoyFunnel.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Funnel
+
+Use **`VJoyFunnel`** when the user must complete a **multi-step, full-page guided flow** — onboarding, registration, checkout, or any linear workflow that takes over the viewport.
+
+It provides a fixed full-screen shell with a sticky header, optional progress stepper, scrollable main area, and decorative background shapes. Compose page content with **`VJoyTemplate`** in the default slot, navigation chrome with **`VJoyFunnelHeader`** and **`VJoyFunnelFooter`**, and progress with **`VJoyStepper`**.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyFunnel` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyFunnel docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-layout-vjoyfunnel--docs) |
+| **DSDS (machine)** | [`JoyFunnel.dsds.json`](./JoyFunnel.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyFunnel")` |
+
+---
+
+## When to use this component
+
+Use a funnel when the product needs a **dedicated, distraction-free surface** for a sequence of steps the user completes before returning to the main app. Typical jobs: signup, project creation wizards, strategy onboarding, or any flow where each step has a title, body content, and Previous / Next actions.
+
+The layout is optimized for **mobile and desktop**: content scrolls inside the funnel while the header (and stepper, when present) stays visible. Pair it with `VJoyStepper` when users need progress feedback across main steps and sub-steps.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| A modal interrupt on the current page | `VJoyDialog` |
+| A slide-in panel for filters or details | `VJoyDrawer` |
+| A standard app page with global navigation | `VJoyTemplate` alone (no full-screen takeover) |
+| A single form on a regular page | `VJoyTemplate` + `VJoyPanel` inside the app shell |
+| Custom full-screen layout with ad-hoc CSS | Still use `VJoyFunnel` + Joy tokens — don’t reinvent the shell |
+
+> **Deprecated:** do not use the `funnel-footer` slot on new work. Place **`VJoyFunnelFooter`** inside the default slot (typically in `VJoyTemplate`’s `template-main`), not in a dedicated funnel footer slot.
+
+> **Renamed:** `VJoyHeader` inside funnels is now **`VJoyFunnelHeader`**. MCP slot docs may still mention `VJoyHeader`; emit `VJoyFunnelHeader` in the `funnel-header` slot.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root shell (`joy-funnel`) | Yes | Fixed full-viewport container (`position: fixed`, funnel z-index, neutral background) |
+| Header area (`funnel-header` slot) | No | Sticky top bar — typically `VJoyFunnelHeader` (logo left, close / help right) |
+| Stepper area (`funnel-stepper` slot) | No | Progress row — typically `VJoyStepper` + `VJoyStep` children; hidden when slot is empty |
+| Scrollable region | Yes | Main scroll container; drives stepper label visibility |
+| Content area (default slot) | Yes | Page body — typically `VJoyTemplate` with title, subtitle, main, optional sidebar |
+| Decorative shapes | No* | Bottom-right brand shapes (*shown unless `hideShapes` is true; hidden below 1420px viewport width) |
+| Footer actions | No | Not a funnel slot — use `VJoyFunnelFooter` inside `template-main` |
+
+### Composition pattern
+
+```text
+VJoyFunnel
+├── #funnel-header     → VJoyFunnelHeader (logo, close)
+├── #funnel-stepper    → VJoyStepper (optional)
+└── default            → VJoyTemplate
+    ├── #template-title / #template-subtitle
+    └── #template-main → VJoyPanel + VJoyFunnelFooter (Previous / Next)
+```
+
+`VJoyFunnel` resets `--template-inner-spacing` on nested `.joy-template` to `0` so funnel content aligns with funnel padding tokens.
+
+### Default values
+
+- `layoutWidth` defaults to **`large`** (max content width ~1024px + lateral padding)
+- `profile` defaults to **`default`** (primary-tinted decorative shapes)
+- `hideShapes` defaults to **`false`**
+
+Props and slots: use Joy MCP (`joy_get_component_info`, `joy_get_component_types`) or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Scroll and stepper labels
+
+`VJoyFunnel` provides `VJoyStepperShowLabels` to child `VJoyStepper` instances. When a stepper is present and the user scrolls the content **away from the top**, step labels collapse to save vertical space; scrolling back to the top restores labels. This is automatic — do not reimplement it in product code.
+
+### Exposed members
+
+- `scrollOnTop` — whether the scrollable region is at the top
+- `hasStepperSlot` — whether `funnel-stepper` is filled
+- `hasFooterSlot` — whether the deprecated `funnel-footer` slot has content (affects shape vertical offset)
+
+---
+
+## Variants
+
+Funnels don’t have button-style color variants. Choose **`profile`** by product context — it only affects decorative shape colors.
+
+### Default (`profile="default"`)
+
+Primary palette shapes (`--joy-color-primary-10` through `-70`). Use for standard product onboarding and general multi-step flows.
+
+Avoid when design has explicitly approved the strategy palette for this surface.
+
+### Strategy (`profile="strategy"`)
+
+Tertiary palette shapes (`--joy-color-tertiary-10` through `-70`). Use for strategy-specific onboarding or flows approved by design for that brand moment.
+
+Avoid on generic product funnels without design sign-off.
+
+---
+
+## Sizes
+
+Choose **`layoutWidth`** for content density — widths come from funnel CSS variables, not hardcoded pixel max-widths in apps.
+
+| `layoutWidth` | Use when |
+| --- | --- |
+| `large` (default) | Standard funnels with panels, forms, or optional sidebar (`~1024px` content + lateral padding) |
+| `medium` | Narrower copy-heavy or single-column steps (`~672px` content + lateral padding) |
+
+The stepper row follows the same width constraint as the content (`joy-funnel__stepper--medium` when `layoutWidth="medium"`).
+
+**MUST NOT** override `--funnel-content-width-large`, `--funnel-content-width-medium`, or `--funnel-content-lateral-padding` in product CSS unless design approves a new layout token.
+
+---
+
+## States
+
+| State | What the user sees / can do |
+| --- | --- |
+| Default (scroll at top) | Full stepper labels (when stepper present); header visible with elevation |
+| Scrolled | Content scrolls inside the funnel; stepper labels hide when stepper is present |
+| No stepper | `joy-funnel--no-stepper` — stepper region not rendered |
+| Shapes hidden (`hideShapes`) | No decorative shapes (e.g. dense mobile, admin previews, Storybook demos) |
+| Shapes visible | Decorative shapes bottom-right; auto-hidden on viewports ≤ 1420px |
+| With footer in main | `VJoyFunnelFooter` at bottom of scrollable content; stacks vertically on narrow screens (≤ 479px) |
+
+`VJoyFunnel` is a layout shell — loading, validation, and disabled states belong on child components (`VJoyTemplate` `loading`, form fields, `VJoyButton` `loading`, etc.).
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Structure
+
+- **MUST** put step content in the **default slot** via `VJoyTemplate` — don’t bypass the template for arbitrary div layouts.
+- **MUST** place **`VJoyFunnelFooter`** inside `template-main` (after main panels), not in the deprecated `funnel-footer` slot.
+- **SHOULD** use **`VJoyFunnelHeader`** in `funnel-header` for logo and dismiss / help actions.
+- **SHOULD** add **`VJoyStepper`** in `funnel-stepper` when the flow has three or more named steps users must track.
+- **SHOULD** use `layoutWidth="medium"` for short copy-only steps; `large` when forms, panels, or sidebars need room.
+
+### Implementation
+
+- **MUST** use only `profile` and `layoutWidth` values from MCP or `JoyFunnel.types.ts` (`default` | `strategy`; `medium` | `large`).
+- **MUST** style with Joy tokens — no custom `.joy-funnel` chrome (background, z-index, fixed positioning).
+- **MUST NOT** invent props (`variant`, `size`, custom width props, etc.).
+- **MUST NOT** nest another full-screen fixed layout inside the funnel content.
+- **SHOULD** set `hideShapes` when decorative shapes would clash with dense illustrations or brand-specific art direction.
+
+### Navigation
+
+- **SHOULD** wire Previous / Next in `VJoyFunnelFooter` with `VJoyButton` (`secondary` + `main`, `size="small"` per Storybook).
+- **SHOULD** provide a labeled close control in the header (`VJoyIconButton` with `label`, e.g. `"Close funnel"`) when users can exit without finishing.
+- **MUST** follow `VJoyButton` content rules for footer labels — see Button guidelines for funnel-specific `Next` / `Previous` vs destination naming.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `VJoyTemplate` + `VJoyFunnelFooter` in `template-main` | Deprecated `funnel-footer` slot |
+| `VJoyFunnelHeader` in `funnel-header` | Legacy `VJoyHeader` in new funnels |
+| `hideShapes` for shape-free surfaces | Custom shape markup in app code |
+| `layoutWidth` for density | Hardcoded `max-width: 1024px` on wrappers |
+| Let funnel handle stepper label collapse on scroll | Manual show/hide of step labels |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Landmark structure | Header content in `funnel-header` should use semantic `<header>` (`VJoyFunnelHeader` provides this); main content in `VJoyTemplate` should use proper headings (`h1` for step title) |
+| Focus order | Tab order follows visual order: header actions → stepper (if interactive) → main content → footer buttons |
+| Page takeover | Funnel covers the viewport — ensure route change or close action returns focus sensibly (e.g. to the element that opened the funnel) |
+| Close / exit | Icon-only close **MUST** have an accessible name (`label` on `VJoyIconButton`) |
+| Stepper | Progress is visual; pair with clear step titles and don’t rely on color alone for current step — `VJoyStepper` manages step states |
+| Scrolling | Main content scrolls inside the funnel; don’t trap keyboard users — interactive elements in the scroll region remain reachable |
+| Decorative shapes | Purely decorative — no information conveyed by shapes alone |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import {
+  VJoyFunnel,
+  VJoyFunnelHeader,
+  VJoyFunnelFooter,
+  VJoyTemplate,
+  VJoyPanel,
+  VJoyStepper,
+  VJoyStep,
+  VJoyButton,
+  VJoyIconButton,
+} from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <VJoyFunnel layout-width="large" profile="default">
+    <template #funnel-header>
+      <VJoyFunnelHeader>
+        <template #funnel-header-left>
+          <img src="/logo.svg" alt="Malt" height="36" />
+        </template>
+        <template #funnel-header-right>
+          <VJoyIconButton label="Close funnel" icon="cross" size="small" variant="ghost" />
+        </template>
+      </VJoyFunnelHeader>
+    </template>
+
+    <template #funnel-stepper>
+      <VJoyStepper :step="2" :sub-step="1">
+        <VJoyStep>Account</VJoyStep>
+        <VJoyStep>Profile</VJoyStep>
+        <VJoyStep>Review</VJoyStep>
+      </VJoyStepper>
+    </template>
+
+    <VJoyTemplate>
+      <template #template-title>
+        <h1>Complete your profile</h1>
+      </template>
+      <template #template-subtitle>
+        Tell clients who you are and what you do.
+      </template>
+      <template #template-main>
+        <VJoyPanel>
+          <template #panel-body>
+            <!-- Step form fields -->
+          </template>
+        </VJoyPanel>
+
+        <VJoyFunnelFooter>
+          <template #footer-left>
+            <VJoyButton label="Previous" size="small" variant="secondary" />
+          </template>
+          <template #footer-right>
+            <VJoyButton label="Next" size="small" variant="main" />
+          </template>
+        </VJoyFunnelFooter>
+      </template>
+    </VJoyTemplate>
+  </VJoyFunnel>
+</template>
+```
+
+Narrower step without stepper:
+
+```vue
+<VJoyFunnel layout-width="medium" hide-shapes>
+  <VJoyTemplate>
+    <template #template-title><h1>Welcome</h1></template>
+    <template #template-main>
+      <!-- … -->
+    </template>
+  </VJoyTemplate>
+</VJoyFunnel>
+```
+
+In Nuxt (or apps with auto-import), omit the import if components are already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyFunnelHeader` | Branded bar in `funnel-header` (logo, close, help) |
+| `VJoyFunnelFooter` | Previous / Next (or other) actions at the bottom of a step |
+| `VJoyTemplate` | Structured title, subtitle, main, optional sidebar inside the funnel |
+| `VJoyStepper` / `VJoyStep` | Progress across steps in `funnel-stepper` |
+| `VJoyPanel` | Card-style body content for a step |
+| `VJoyButton` | Footer navigation and header actions |
+| `VJoyDialog` | Confirm exit or destructive actions without leaving the funnel shell |
+
+---
+
+## For agents
+
+Optional for readers; **required** for vibe-coding quality. Maps to `agentDocumentBlocks` in [`JoyFunnel.dsds.json`](./JoyFunnel.dsds.json).
+
+### Pick the right component
+
+| If the intent is… | Emit… | Do not emit… |
+| --- | --- | --- |
+| Full-page multi-step flow | `VJoyFunnel` + `VJoyTemplate` | `VJoyTemplate` alone with custom `position: fixed` |
+| Modal confirm on current page | `VJoyDialog` | `VJoyFunnel` for a single question |
+| Progress across steps | `VJoyStepper` in `#funnel-stepper` | Custom progress dots |
+| Step footer actions | `VJoyFunnelFooter` in `template-main` | `#funnel-footer` slot |
+| Funnel top bar | `VJoyFunnelHeader` in `#funnel-header` | `VJoyHeader` or raw `<header>` |
+| Strategy-branded onboarding | `profile="strategy"` | Custom tertiary shape CSS |
+
+### Hard rules
+
+1. **MUST** call `joy_get_component_info("VJoyFunnel")` or read `JoyFunnel.types.ts` before generating props.  
+2. **MUST** compose default slot with `VJoyTemplate`; put `VJoyFunnelFooter` inside `template-main`.  
+3. **MUST** use `profile` values `default` | `strategy` and `layoutWidth` values `medium` | `large` only.  
+4. **MUST NOT** use the `funnel-footer` slot — deprecated.  
+5. **MUST NOT** emit `VJoyHeader` — use `VJoyFunnelHeader`.  
+6. **MUST NOT** override `.joy-funnel` positioning, z-index, background, or content width tokens.  
+7. **SHOULD** set `hideShapes` when shapes are not wanted; don’t delete shape markup in apps.  
+8. **SHOULD** use `VJoyButton` `size="small"` in funnel footers (Storybook convention).
+
+### Checklist
+
+- [ ] Correct shell (`VJoyFunnel` vs dialog / drawer / plain template)
+- [ ] `VJoyTemplate` in default slot
+- [ ] `VJoyFunnelFooter` in `template-main` (not `funnel-footer` slot)
+- [ ] `VJoyFunnelHeader` in `funnel-header` when a header is needed
+- [ ] Props / enums from MCP or types only
+- [ ] No invented props / no custom funnel chrome CSS
+- [ ] Close control has accessible `label`
+- [ ] Stepper in `funnel-stepper` when flow has multiple tracked steps
+
+---
+
+## DSDS mapping
+
+This Markdown mirrors [`JoyFunnel.dsds.json`](./JoyFunnel.dsds.json) (DSDS **0.15.2**).
+
+| Section here | DSDS block |
+| --- | --- |
+| When to use / not | `use-cases` |
+| Anatomy / composition | `anatomy` |
+| Profiles / layout widths | `variants` |
+| Scroll / layout states | `states` |
+| Best practices | `guidelines` |
+| Accessibility | `accessibility` |
+| Examples | `sections` |
+| For agents | `agentDocumentBlocks` |
+| Props detail | `api` in JSON + Joy MCP |
+| Content widths / tokens | `design-specifications` in JSON (`--funnel-content-width-*`, `--funnel-content-lateral-padding`) |

package/dist/doc/VJoyFunnelFooter/guideline.md

@@ -0,0 +1,178 @@
+---
+component: VJoyFunnelFooter
+status: draft
+language: en
+dsds: JoyFunnelFooter.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Funnel footer
+
+Use **`VJoyFunnelFooter`** at the bottom of a funnel step to lay out **back / secondary actions on the left** and **forward / primary actions on the right** — typically Previous and Next buttons in a multi-step onboarding or wizard flow.
+
+It is a presentational layout shell: no props, two named slots, responsive stacking on narrow viewports, and a semantic `<footer>` landmark. Place it inside `VJoyTemplate`’s `#template-main`, after step content (for example a `VJoyPanel`).
+
+| | |
+| --- | --- |
+| **Code** | `VJoyFunnelFooter` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyFunnel docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-layout-vjoyfunnel--docs) (footer shown in funnel examples) |
+| **DSDS (machine)** | [`JoyFunnelFooter.dsds.json`](./JoyFunnelFooter.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyFunnelFooter")` |
+
+---
+
+## When to use this component
+
+Use a funnel footer when a **`VJoyFunnel`** step needs persistent navigation actions at the bottom of the main content area — for example **Previous** / **Next** in an onboarding flow, or a secondary escape action paired with a primary continue button.
+
+The component handles horizontal alignment on desktop (left vs right groups) and stacks actions full-width on mobile (`≤ 479px`). Put step body content above it in the same `#template-main` block.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Actions tied to a single card or panel only | `VJoyPanel` `#panel-action` footer slot |
+| Sticky actions visible while scrolling any long page | `VJoyFloatingActionsBar` |
+| Full funnel page chrome (header, stepper, shapes) | `VJoyFunnel` + `VJoyFunnelHeader` — not this component alone |
+| A generic page footer outside a funnel | App shell / page layout patterns |
+| Custom flex footer with ad-hoc CSS | Still use `VJoyFunnelFooter` + Joy tokens |
+
+> **Deprecated:** do not use the `#funnel-footer` slot on `VJoyFunnel` or the legacy `VJoyFooter` sub-component. Render `VJoyFunnelFooter` directly in `#template-main` (Joy v4+).
+
+---
+
+## How it works
+
+`VJoyFunnelFooter` renders a `<footer>` with two flex regions. Slot content is entirely yours — usually `VJoyButton` instances. Spacing and responsive layout are built in; there are **no props or events**.
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root `<footer>` | Yes | `.joy-funnel-footer` — full-width flex row with top margin |
+| Left region | No | `#footer-left` — start-aligned group (often back / secondary) |
+| Right region | No | `#footer-right` — end-aligned flex row with gap between children (often primary / next) |
+
+### Default values
+
+- **No props** — layout is fixed; customize only via slot content.
+- **Slots:** `footer-left`, `footer-right` (both optional, but at least one should carry the step actions).
+- **Top margin:** `var(--joy-core-spacing-8)` — may collapse with bottom margin on a preceding `VJoyPanel`.
+- **Right group gap:** `var(--joy-core-spacing-8)` between direct children.
+- **Mobile (`≤ 479px`):** column layout, `row-gap: var(--joy-core-spacing-2)`, children stretched to **100% width**.
+
+Props, events, and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Placement / composition
+
+- **MUST** place `VJoyFunnelFooter` inside **`VJoyTemplate` `#template-main`**, at the **bottom** of the step content, within a `VJoyFunnel` flow.
+- **MUST NOT** use the deprecated **`#funnel-footer`** slot on `VJoyFunnel`.
+- **SHOULD** put **back / secondary** actions in `#footer-left` and **forward / primary** actions in `#footer-right` (matches Storybook and product funnels).
+- **SHOULD** use **`VJoyButton`** with `size="small"` for funnel navigation unless design specifies otherwise.
+- **MAY** put multiple buttons in `#footer-right`; the built-in gap handles spacing.
+- **SHOULD** leave `#footer-left` empty when there is no back action on the first step — do not add a disabled placeholder button.
+
+### Implementation
+
+- **MUST NOT** invent props — the component exposes **none**.
+- **MUST** use Joy tokens — **no** custom `.joy-funnel-footer` layout overrides in product CSS.
+- **MUST NOT** rely on this component for sticky viewport positioning; it flows with page content inside the funnel.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| Previous in `footer-left`, Next in `footer-right` | Both primary actions crammed into one slot without reason |
+| Place after `VJoyPanel` (or step body) in `#template-main` | Use `#funnel-footer` on `VJoyFunnel` |
+| Empty `footer-left` on the first step | Disabled “Previous” as filler |
+| `VJoyButton` with clear labels | Icon-only buttons without accessible names |
+| Let mobile full-width stacking handle narrow screens | Custom media queries duplicating the footer layout |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Landmark | Renders a native **`<footer>`** — useful for structure inside the funnel main area |
+| Interactive controls | **No built-in buttons** — every control in slots **must** have an accessible name (`label` on `VJoyButton`, etc.) |
+| Order | On mobile, **`footer-left` renders above `footer-right`** — keep logical tab order (e.g. Previous before Next) |
+| Keyboard | Focus order follows DOM order in the slots; use real buttons/links, not `div` click handlers |
+| Disabled steps | Disable or omit the control — don’t rely on color alone to show unavailable actions |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import {
+  VJoyFunnel,
+  VJoyTemplate,
+  VJoyPanel,
+  VJoyFunnelFooter,
+  VJoyButton,
+} from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <VJoyFunnel>
+  <VJoyTemplate>
+    <template #template-main>
+      <VJoyPanel>
+        <template #panel-body>
+          <!-- Step content -->
+        </template>
+      </VJoyPanel>
+
+      <VJoyFunnelFooter>
+        <template #footer-left>
+          <VJoyButton label="Previous" size="small" variant="secondary" />
+        </template>
+        <template #footer-right>
+          <VJoyButton label="Next" size="small" variant="main" />
+        </template>
+      </VJoyFunnelFooter>
+    </template>
+  </VJoyTemplate>
+  </VJoyFunnel>
+</template>
+```
+
+First step (no back action):
+
+```vue
+<VJoyFunnelFooter>
+  <template #footer-right>
+    <VJoyButton label="Get started" size="small" variant="main" />
+  </template>
+</VJoyFunnelFooter>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyFunnelFooter` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyFunnel` | Full-page funnel layout (header, stepper, main area) |
+| `VJoyFunnelHeader` | Funnel top bar (logo, close, etc.) |
+| `VJoyTemplate` | Title, subtitle, and `#template-main` where the footer lives |
+| `VJoyPanel` | Card-style body content above the footer |
+| `VJoyButton` | Typical Previous / Next / Submit actions in footer slots |
+| `VJoyStepper` | Multi-step progress in `#funnel-stepper` |
+| `VJoyPanel` `#panel-action` | Footer actions scoped to one panel, not the whole funnel step |
+| `VJoyFloatingActionsBar` | Viewport-sticky bulk or primary actions on long scrollable pages |