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

package/dist/doc/VJoyTemplate/guideline.md

@@ -0,0 +1,366 @@
+---
+component: VJoyTemplate
+status: draft
+language: en
+dsds: JoyTemplate.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Template
+
+Use **`VJoyTemplate`** when you need a consistent **page-level layout** — header (title, subtitle, actions, optional back control), a main content column, and an optional sidebar.
+
+It handles responsive stacking, optional full-width mode, a loading overlay via `VJoyScreenLoader`, and decorative background shapes. Compose page sections inside the slots with `VJoyPanel`, forms with `VJoyWrapper`, and navigation menus in the sidebar when needed.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyTemplate` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyTemplate docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-layout-vjoytemplate--docs) |
+| **DSDS (machine)** | [`JoyTemplate.dsds.json`](./JoyTemplate.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyTemplate")` |
+
+---
+
+## When to use this component
+
+Use the template when building a **new product screen** that needs a predictable page chrome: page title, optional subtitle, top-right actions, primary content, and sometimes a secondary column (filters, navigation, summary card).
+
+It is the default wrapper for most in-app pages. Stack `VJoyPanel` components in `template-main` (and optionally `template-sidebar`) to create sections with consistent spacing.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Multi-step guided flow / onboarding funnel | `VJoyFunnel` |
+| Card or section inside an existing page (not the page shell) | `VJoyPanel` |
+| Modal overlay interrupting the current task | `VJoyDialog` |
+| Slide-in panel from the edge | `VJoyDrawer` |
+| Flexbox utility layout inside a form or toolbar | `VJoyWrapper` |
+| Custom page markup with ad-hoc layout CSS | Still use `VJoyTemplate` + Joy tokens — don’t reinvent page chrome |
+
+> **Internal:** `VJoyTemplateShape` / `TemplateShape` is not public API. Use the `shapes` prop on `VJoyTemplate` — do not import the shape component directly.
+
+---
+
+## How it works
+
+The root is a `<div class="joy-template">` (not `<main>`) so apps can own the document landmark and avoid duplicate `<main>` regions. Content is organized through **named slots**; the header row renders only when at least one header slot is provided.
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root container | Yes | `.joy-template` — padding, max width, optional `--full` / `--loading` modifiers |
+| Decorative shapes | No | Fixed bottom-right shapes when `shapes` is true (primary palette; not customizable) |
+| Header row | No* | `.joy-template__heading` — back, title block, actions (*shown when any header slot is used) |
+| Back slot | No | `#template-back` — typically a `VJoyIconButton` left of the title |
+| Title slot | Yes (product rule) | `#template-title` — page heading; ESLint requires an `h1`–`h6` (prefer `h1`) |
+| Subtitle slot | No | `#template-subtitle` — supporting description below the title |
+| Actions slot | No | `#template-actions` — top-right area, usually primary/secondary CTAs |
+| Content row | No* | `.joy-template__content` — flex row for main + sidebar (*when those slots are used) |
+| Main slot | No | `#template-main` — primary page body (panels, forms, lists) |
+| Sidebar slot | No | `#template-sidebar` — secondary column (e.g. `VJoyMenu`, summary, filters) |
+| Loading overlay | No | `VJoyScreenLoader` with blur on content when `loading` is true |
+| Loader content slot | No | `#template-loader-content` — message beside the spinner |
+
+### Default values
+
+- `full` defaults to **`false`** (`true` → content wrapper spans 100% width)
+- `sidebar` defaults to **`right`** (`left` reverses the flex order)
+- `loading` defaults to **`false`**
+- `loadingColor` defaults to **`light`** (`dark` for darker backgrounds)
+- `shapes` defaults to **`false`**
+
+Layout tokens (CSS custom properties on `.joy-template`):
+
+- `--template-layout-width` — **`1024px`** (overridden to `100%` when `full` is true)
+- `--template-sidebar-width` — **`320px`**
+- `--template-inner-spacing` — **`var(--joy-core-spacing-8)`** (spacing-6 ≤ 991px, spacing-4 ≤ 760px)
+
+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.
+
+### Responsive behavior
+
+- **≤ 1024px:** main and sidebar stack vertically (sidebar below main by default; order follows `sidebar` prop).
+- **≤ 767px:** header actions wrap to a full-width row below the title block.
+
+---
+
+## Layout options
+
+`VJoyTemplate` has no color variant prop. Choose **layout behavior** by props and slots.
+
+### Default (centered column)
+
+Content wrapper is capped at `--template-layout-width` (1024px) and centered. Use for standard product pages.
+
+### Full width (`full`)
+
+Sets `--template-layout-width` to `100%`. Use when the page must use the full viewport width (dashboards, wide tables) while keeping inner padding from `--template-inner-spacing`.
+
+Avoid `full` when a readable line length matters and the design expects the default 1024px column.
+
+### Sidebar right (`sidebar="right"`)
+
+Default. Main content on the left, sidebar on the right — typical for detail pages with a nav or summary column.
+
+### Sidebar left (`sidebar="left"`)
+
+Reverses the flex row. Use when design places the secondary column on the left (uncommon; confirm with layout specs).
+
+### Decorative shapes (`shapes`)
+
+Fixed primary-colored shapes in the bottom-right corner. Disabled by default; no palette or position customization.
+
+Use only when design approves decorative branding on that screen. Avoid on dense or data-heavy pages where shapes compete with content.
+
+---
+
+## States
+
+| State | What the user sees / can do |
+| --- | --- |
+| Default | Page content visible; header and columns per provided slots |
+| Loading (`loading`) | `VJoyScreenLoader` overlay; main wrapper blurred; optional message in `#template-loader-content` |
+| Loading color `light` / `dark` | Spinner/contrast tuned for light vs dark page backgrounds |
+
+Prefer `loading` during initial page fetch or route transitions instead of empty shells with no feedback.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (same idea as DSDS `guidelines.level`).
+
+### Page structure
+
+- **MUST** provide `#template-title` on every `VJoyTemplate` (enforced by ESLint `require-vjoytemplate-template-title`).
+- **MUST** put an **`h1`–`h6` inside `#template-title`**, preferably **`h1`** (ESLint `require-vjoytemplate-template-title-heading`).
+- **SHOULD** place `VJoyMenu` in `#template-sidebar` when used as page nav (ESLint `require-vjoymenu-template-sidebar`).
+- **SHOULD** stack sections with `VJoyPanel` inside `#template-main` rather than ad-hoc margin on every block.
+- **SHOULD** use `#template-back` with `VJoyIconButton` (e.g. `arrow-left`, `variant="ghost"`) for upward navigation.
+- **SHOULD** reserve `#template-actions` for page-level CTAs (one principal action + companions).
+
+### Implementation
+
+- **MUST** use only documented props: `full`, `sidebar`, `loading`, `loadingColor`, `shapes`.
+- **MUST** use Joy tokens and documented CSS variables — no custom page-shell chrome.
+- **MUST NOT** import or render `VJoyTemplateShape` / `TemplateShape` directly — use `shapes`.
+- **MUST NOT** override `--template-layout-width` unless unavoidable; design treats 1024px as a strict rule.
+- **MAY** override `--template-sidebar-width` when the sidebar needs a different fixed width.
+- **MUST NOT** wrap the template root in another `<main>` if the app already exposes a single page `<main>`.
+
+### Interaction
+
+- **MUST** set `loading` while async page data is not ready (with a short message in `#template-loader-content` when helpful).
+- **SHOULD** keep sidebar content supplementary — primary tasks stay in `#template-main`.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `#template-title` with `<h1>` | Plain `<div>` or missing title slot |
+| `VJoyPanel` for sections | Random margin utilities on every block |
+| `shapes` prop for decoration | Import internal shape component |
+| `full` for intentional wide layouts | `full` on every page by default |
+| `VJoyMenu` in `#template-sidebar` | `VJoyMenu` floating outside the template sidebar slot |
+
+---
+
+## Content
+
+The template does not own copy — it structures where **page title**, **subtitle**, and **actions** appear. Follow product voice in those slots.
+
+### Title (`#template-title`)
+
+- **MUST** use a real heading element (`h1` preferred) — one primary page title per view.
+- **SHOULD** match the browser tab / route purpose; keep it scannable (short noun phrase or task name).
+- **MAY** use `VJoyTitleBrand` inside the slot for marketing-style highlighted titles (also valid in `VJoyDialog`).
+
+### Subtitle (`#template-subtitle`)
+
+- **SHOULD** clarify scope or context in one line — not duplicate the title.
+- **SHOULD NOT** hold long paragraphs; move body copy to `#template-main`.
+
+### Actions (`#template-actions`)
+
+- **SHOULD** use `VJoyButton` with clear verb + noun labels (see Button guidelines).
+- **SHOULD** limit to a small set of actions (typically one `main`/`primary` + secondary/ghost companions).
+- **SHOULD NOT** crowd the header with many equal-weight CTAs.
+
+### Loading message (`#template-loader-content`)
+
+- **SHOULD** use short, present-tense text (`Loading projects…`) — not marketing copy.
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Document landmark | Template root is a `<div>` — the **app** provides `<main>` (or equivalent) around or above this component; avoid nested `<main>` |
+| Page title | `#template-title` contains a heading (`h1` preferred) so assistive tech can find the page name |
+| Heading order | Don’t skip levels inside the page; template title is typically the page `h1` |
+| Back control | `#template-back` should expose an accessible name (`label` on `VJoyIconButton`) |
+| Loading | Overlay blocks interaction on blurred content; provide meaningful loader text when the wait is non-trivial |
+| Shapes | Decorative only — no information conveyed by shapes alone |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  VJoyTemplate,
+  VJoyIconButton,
+  VJoyButton,
+  VJoyPanel,
+} from '@maltjoy/core-vue'
+
+const loading = ref(false)
+</script>
+
+<template>
+  <!-- Standard page with sidebar -->
+  <VJoyTemplate>
+    <template #template-title>
+      <h1>Project settings</h1>
+    </template>
+    <template #template-subtitle>
+      Manage visibility, team, and billing for this project.
+    </template>
+    <template #template-actions>
+      <VJoyButton variant="main" label="Save changes" />
+    </template>
+    <template #template-main>
+      <VJoyPanel title="General">…</VJoyPanel>
+      <VJoyPanel title="Team">…</VJoyPanel>
+    </template>
+    <template #template-sidebar>
+      <!-- e.g. VJoyMenu for section nav -->
+      …
+    </template>
+  </VJoyTemplate>
+
+  <!-- Back navigation + loading -->
+  <VJoyTemplate :loading="loading" loading-color="light">
+    <template #template-back>
+      <VJoyIconButton
+        icon="arrow-left"
+        variant="ghost"
+        label="Back to projects"
+      />
+    </template>
+    <template #template-title>
+      <h1>Acme brief</h1>
+    </template>
+    <template #template-main>
+      …
+    </template>
+    <template #template-loader-content>
+      Loading project…
+    </template>
+  </VJoyTemplate>
+
+  <!-- Full width + decorative shapes (design-approved) -->
+  <VJoyTemplate full shapes sidebar="left">
+    <template #template-title>
+      <h1>Analytics</h1>
+    </template>
+    <template #template-main>
+      …
+    </template>
+  </VJoyTemplate>
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyTemplate` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyPanel` | Sections inside `template-main` or `template-sidebar` |
+| `VJoyFunnel` | Multi-step flows instead of a standard page shell |
+| `VJoyWrapper` | Form field spacing and flex layout inside a panel |
+| `VJoyMenu` | Sidebar navigation (place in `#template-sidebar`) |
+| `VJoyIconButton` | Back control in `#template-back` |
+| `VJoyButton` | Page-level actions in `#template-actions` |
+| `VJoyTitleBrand` | Branded / highlighted page titles |
+| `VJoyScreenLoader` | Standalone full-screen loading (template embeds it when `loading`) |
+| `VJoyDialog` / `VJoyDrawer` | Overlays on top of the page — not replacements for the template |
+
+---
+
+## For agents
+
+Optional for readers; **required** for vibe-coding quality. Maps to `agentDocumentBlocks` in [`JoyTemplate.dsds.json`](./JoyTemplate.dsds.json).
+
+### Pick the right component
+
+| If the intent is… | Emit… | Do not emit… |
+| --- | --- | --- |
+| Standard app page layout | `VJoyTemplate` + slots | Custom page grid CSS |
+| Section/card inside a page | `VJoyPanel` inside `#template-main` | Nested `VJoyTemplate` |
+| Onboarding / step funnel | `VJoyFunnel` | `VJoyTemplate` with fake stepper chrome |
+| Decorative corner shapes | `VJoyTemplate` + `shapes` | `VJoyTemplateShape` / `TemplateShape` import |
+| Page nav menu | `VJoyMenu` in `#template-sidebar` | `VJoyMenu` outside the sidebar slot |
+| Modal task | `VJoyDialog` | `VJoyTemplate` pretending to be a dialog |
+
+### Hard rules
+
+1. **MUST** call `joy_get_component_info("VJoyTemplate")` and/or read `JoyTemplate.types.ts` before generating props.
+2. **MUST** include `#template-title` with an **`h1`–`h6`** element (prefer **`h1`**).
+3. **MUST** use only documented props: `full`, `sidebar`, `loading`, `loadingColor`, `shapes`.
+4. **MUST** use slot names exactly: `template-back`, `template-title`, `template-subtitle`, `template-actions`, `template-main`, `template-sidebar`, `template-loader-content`.
+5. **MUST NOT** import `VJoyTemplateShape` or `TemplateShape`.
+6. **MUST NOT** override `--template-layout-width` except via `full` or documented emergency override.
+7. **MUST NOT** add a `<main>` wrapper inside the template — root is already a `<div>`.
+8. **SHOULD** default `sidebar="right"`, `loading={false}`, `shapes={false}`, `full={false}`.
+9. **SHOULD** set `loading` during async page load and optional `#template-loader-content` text.
+
+### Valid enums (from `JoyTemplate.types.ts` + MCP)
+
+| Prop | Values |
+| --- | --- |
+| `sidebar` | `left`, `right` |
+| `loadingColor` | `light`, `dark` |
+| `full`, `loading`, `shapes` | `boolean` |
+
+### Checklist
+
+- [ ] Correct component (`VJoyTemplate` or named alternative)
+- [ ] `#template-title` present with heading (`h1` preferred)
+- [ ] Props / enums from MCP or types only
+- [ ] No invented props / no custom template chrome CSS
+- [ ] `VJoyMenu` in `#template-sidebar` when used as page nav
+- [ ] `loading` + loader slot for async page states
+- [ ] `shapes` only when decorative branding is intended
+- [ ] Sections composed with `VJoyPanel`, not one-off layout hacks
+
+---
+
+## DSDS mapping
+
+This Markdown mirrors [`JoyTemplate.dsds.json`](./JoyTemplate.dsds.json) (DSDS **0.15.2**).
+
+| Section here | DSDS block |
+| --- | --- |
+| When to use / not | `use-cases` |
+| Anatomy / layout options | `anatomy` |
+| States | `states` |
+| Best practices / content rules | `guidelines` (+ `content`) |
+| Accessibility | `accessibility` |
+| Examples | `sections` |
+| For agents | `agentDocumentBlocks` |
+| Props detail | `api` in JSON + Joy MCP |
+| Layout tokens | `design-specifications` in JSON (token names, not raw px dumps) |

package/dist/doc/VJoyText/guideline.md

@@ -0,0 +1,175 @@
+---
+component: VJoyText
+status: draft
+language: en
+dsds: JoyText.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Text
+
+Use **`VJoyText`** when you need body copy or headings with Joy typography tokens — font family, size, line height, and weight — without hand-picking CSS classes.
+
+It renders a semantic HTML tag (`p`, `span`, `h1`–`h6`, or `strong`) and applies a `joy-font-*` preset from `@maltjoy/themes`. Text color uses `--joy-color-text-body`.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyText` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyText docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-view-vjoytext--docs) |
+| **Fonts reference** | [CSS framework — Advanced fonts](https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts) |
+| **DSDS (machine)** | [`JoyText.dsds.json`](./JoyText.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyText")` |
+
+---
+
+## When to use this component
+
+Use `VJoyText` for readable paragraphs, supporting descriptions, and headings that should follow Joy typography scales — especially when the same preset should stay consistent across the product.
+
+Typical jobs: page or panel body copy, helper text under a title, list item descriptions, and semantic headings (`tagName="h2"`, etc.) with a chosen preset.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Branded marketing title with highlighted spans | `VJoyTitleBrand` |
+| A clickable text link inside a sentence | `VJoyLink` |
+| Form field label, required mark, or legend | `VJoyLabel` |
+| Button or icon-only control | `VJoyButton` / `VJoyIconButton` |
+| Raw `joy-font-*` on arbitrary markup | Still prefer `VJoyText` — don’t duplicate typography rules in app CSS |
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root element | Yes | Dynamic tag from `tagName` (default `p`) |
+| Typography class | Yes | `joy-font-{preset}` utility from `@maltjoy/themes` |
+| Base text styles | Yes | `.joy-text` — body color, zero margin/padding, `display: block` |
+| Default slot | Yes | Text and inline markup (e.g. `<strong>`) |
+
+### Default values
+
+- `tagName` defaults to **`p`**
+- `preset` defaults to **`primary-400`**
+
+Props and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Typography presets
+
+`preset` maps to a bundled font-family, font-size, line-height, and font-weight. Allowed values come from `TJoyTextFontPreset` (MCP / `JoyText.types.ts`).
+
+| Family | Presets | Use when |
+| --- | --- | --- |
+| **Primary** | `primary-100` … `primary-800` (steps: 100, 200, 300, 400, 600, 800) | Default UI copy — body, labels, most headings |
+| **Primary bold** | `primary-150`, `primary-250`, `primary-350`, `primary-450`, `primary-650`, `primary-850` | Same size as the matching `primary-*` step but **bold** (values ending in `50`) |
+| **Secondary** | `secondary-200`, `secondary-400`, `secondary-600`, `secondary-800` | Supporting or de-emphasized copy |
+
+**Bold reminder:** `*50` presets match the size of the corresponding `primary-*` step and only apply to the **primary** family. For example, `primary-450` is bold `primary-400`.
+
+Pick preset by **hierarchy and emphasis**, not arbitrary pixel sizes. See the [Advanced fonts](https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts) docs for the full scale.
+
+### Semantic tags
+
+Set `tagName` to match document structure — `h1`–`h6` for headings, `p` for paragraphs, `span` for inline runs, `strong` when the root itself should be emphasized. Lowercase only.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Typography
+
+- **MUST** use only documented `preset` values from MCP or `JoyText.types.ts`.
+- **MUST** use Joy tokens — no custom `font-size`, `line-height`, or `font-weight` on `.joy-text` in product CSS.
+- **SHOULD** use **`primary-400`** (default) for standard body text.
+- **SHOULD** use **`secondary-*`** for captions, metadata, or lower-emphasis copy.
+- **SHOULD** use **`primary-*50`** when you need bold at a given primary step — not manual `<strong>` plus a mismatched preset.
+- **MUST NOT** invent presets (e.g. `primary-500`, `tertiary-400`).
+
+### Structure and layout
+
+- **MUST** set `tagName` to reflect real heading hierarchy — don’t style an `h4` as a page title.
+- **MUST NOT** nest interactive controls inside `VJoyText` — wrap buttons and links as siblings or use `VJoyLink`.
+- **SHOULD** set a **`max-width`** on long copy inside `VJoyWrapper` (or other flex rows) so text wraps instead of stretching the layout.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `preset="primary-600"` + `tagName="h2"` for a section title | `tagName="p"` + oversized custom CSS for headings |
+| `secondary-400` for helper text | `primary-800` for every line on the page |
+| `primary-450` for bold body emphasis | Random `font-weight: 700` overrides |
+| `VJoyTitleBrand` for marketing hero titles | `VJoyText` + custom highlight backgrounds |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Semantics | `tagName` should match the role of the content — real `h1`–`h6` for headings, `p` for paragraphs |
+| Heading order | Don’t skip levels (e.g. `h1` then `h3`) for visual styling alone — pick the right `tagName` and `preset` |
+| Emphasis | Use `<strong>` in the default slot or `tagName="strong"` when emphasis is meaningful, not only for bold styling |
+| Color | Body text uses `--joy-color-text-body`; don’t rely on preset weight alone for critical distinctions |
+| Links | Use `VJoyLink` for navigation — not unstyled `<a>` inside copy without accessible styling |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyText } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Default body -->
+  <VJoyText>
+    Standard body copy uses preset primary-400 by default.
+  </VJoyText>
+
+  <!-- Section heading -->
+  <VJoyText tagName="h2" preset="primary-600">
+    Account settings
+  </VJoyText>
+
+  <!-- Supporting caption -->
+  <VJoyText preset="secondary-400">
+  Last updated 3 days ago
+  </VJoyText>
+
+  <!-- Bold at same scale as primary-400 -->
+  <VJoyText preset="primary-450">
+    This line is bold primary body text.
+  </VJoyText>
+
+  <!-- Inline emphasis inside a paragraph -->
+  <VJoyText>
+    Your plan renews on <strong>15 March 2026</strong>.
+  </VJoyText>
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyText` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyTitleBrand` | Marketing or dialog titles with highlighted span treatment |
+| `VJoyLink` | Inline or standalone text links |
+| `VJoyLabel` | Form labels, required/optional indicators, legends |
+| `VJoyWrapper` | Flex layout around text — remember `max-width` for long copy |
+| `VJoyHighlight` | Callout blocks with severity styling, not plain paragraphs |

package/dist/doc/VJoyText/metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "JoyText",
   "displayName": "VJoyText",
-  "description": "This component is directly dependant from `@maltjoy/css` package, a CSS class utils package built on top of `@maltjoy/themes` that contains our design tokens.\n\n**Reminder**: values ending with 50 have same size but are bold.\n\nSee \"Fonts\" section here https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts\n\n**Warning** If you use long text within a VJoyWrapper, you'll have to set a max-width to prevent the text from breaking the layout.",
+  "description": "This component uses CSS utility classes from `@maltjoy/themes` (`dist/default.css`).\n\n**Reminder**: values ending with 50 have same size but are bold.\n\nSee \"Fonts\" section here https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts\n\n**Warning** If you use long text within a VJoyWrapper, you'll have to set a max-width to prevent the text from breaking the layout.",
   "category": "View",
   "props": [
     {