@vjdesigns/vjdesigns-ui 1.5.0 → 2.1.0

package/dist/ai/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@vjdesigns/vjdesigns-ui",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "summary": "Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.",
   "install": "npm install @vjdesigns/vjdesigns-ui",
   "stylesheet": "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
@@ -8,7 +8,7 @@
     "Install: `npm install @vjdesigns/vjdesigns-ui` (peer: react, react-dom 18 or 19).",
     "Import the stylesheet once: `import \"@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\";`",
     "Import components from the package root: `import { Button, Field, Input } from \"@vjdesigns/vjdesigns-ui\";`",
-    "Theme: wrap the app in `<Theme brand=\"blue\" | \"purple\" | ... | \"#hex\" mode=\"light\" | \"dark\" accent=\"brand\" | \"volt\" | \"#hex\">`.",
+    "Theme: wrap the app in `<Theme brand=\"blue\" | \"purple\" | ... | \"#hex\" mode=\"light\" | \"dark\" accent=\"brand\" | \"lime\" | \"#hex\">`.",
     "Language: `<LocaleProvider locale=\"es\" messages={es}>` with `import es from \"@vjdesigns/vjdesigns-ui/locales/es\"`.",
     "Forms: wrap each control in `Field` (label, hint, error, required); validate with `useFormValidation` + `ErrorSummary`.",
     "Style with the props (variant, tone, size) and the --color-*, --space-*, --radius-* CSS variables; don't override internal class names."
@@ -17,27 +17,27 @@
     {
       "id": "setup",
       "title": "Installation",
-      "markdown": "Install the package along with React and React DOM (version 18 or 19), which the components need in order to render:\r\n\r\n```bash\r\nnpm install @vjdesigns/vjdesigns-ui react react-dom\r\n```\r\n\r\nIf your project already uses React, you only need the first package:\r\n\r\n```bash\r\nnpm install @vjdesigns/vjdesigns-ui\r\n```\r\n\r\n### Import the styles\r\n\r\nThe component styles and shared design tokens ship as a separate stylesheet. Import it **once** at your app's entry point, or the components will render unstyled.\r\n\r\n**React:** in `main.tsx` (or `App.tsx`)\r\n\r\n```ts\r\nimport \"@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\";\r\n```\r\n\r\n**Angular:** add it to the `styles` array in `angular.json`\r\n\r\n```json\r\n\"styles\": [\r\n  \"node_modules/@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\",\r\n  \"src/styles.css\"\r\n]\r\n```\r\n\r\n**Vue:** in `main.ts`\r\n\r\n```ts\r\nimport \"@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\";\r\n```"
+      "markdown": "Install the package along with React and React DOM (version 18 or 19), which the components need in order to render:\n\n```bash\nnpm install @vjdesigns/vjdesigns-ui react react-dom\n```\n\nIf your project already uses React, you only need the first package:\n\n```bash\nnpm install @vjdesigns/vjdesigns-ui\n```\n\n### Import the styles\n\nThe component styles and shared design tokens ship as a separate stylesheet. Import it **once** at your app's entry point, or the components will render unstyled.\n\n**React:** in `main.tsx` (or `App.tsx`)\n\n```ts\nimport \"@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\";\n```\n\n**Angular:** add it to the `styles` array in `angular.json`\n\n```json\n\"styles\": [\n  \"node_modules/@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\",\n  \"src/styles.css\"\n]\n```\n\n**Vue:** in `main.ts`\n\n```ts\nimport \"@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css\";\n```"
     },
     {
       "id": "usage",
       "title": "Usage",
-      "markdown": "The components are built with React. You can use them directly in a React project. In Angular or Vue, you mount them inside a small wrapper component, as shown below.\r\n\r\n### React\r\n\r\n```tsx\r\nimport { useState } from \"react\";\r\nimport { Button, CheckBox } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\nexport function SignupForm() {\r\n  const [accepted, setAccepted] = useState(false);\r\n\r\n  return (\r\n    <form>\r\n      <CheckBox\r\n        label=\"Accept terms\"\r\n        checked={accepted}\r\n        onCheckedChange={setAccepted}\r\n      />\r\n      <Button\r\n        variant=\"solid\"\r\n        tone=\"primary\"\r\n        size=\"md\"\r\n        disabled={!accepted}\r\n        onClick={() => console.log(\"Submitted\")}\r\n      >\r\n        Submit\r\n      </Button>\r\n    </form>\r\n  );\r\n}\r\n```\r\n\r\n### Angular\r\n\r\nMake a standalone wrapper that renders the React component into its host element. The wrapper uses `createElement`, so you don't need to change your JSX or TSX settings.\r\n\r\n```ts\r\n// vj-button.component.ts\r\nimport {\r\n  AfterViewInit,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  Output,\r\n  ViewChild,\r\n} from \"@angular/core\";\r\nimport { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from \"react\";\r\nimport { createRoot, Root } from \"react-dom/client\";\r\nimport {\r\n  Button,\r\n  type ButtonProps,\r\n  type ButtonVariant,\r\n  type Size,\r\n  type Tone,\r\n} from \"@vjdesigns/vjdesigns-ui\";\r\n\r\n// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.\r\nconst ReactButton = Button as (props: ButtonProps) => ReactElement;\r\n\r\n@Component({\r\n  selector: \"vj-button\",\r\n  standalone: true,\r\n  template: `<span #host></span>`,\r\n})\r\nexport class VjButtonComponent implements AfterViewInit, OnChanges, OnDestroy {\r\n  @ViewChild(\"host\", { static: true }) host!: ElementRef<HTMLElement>;\r\n\r\n  @Input() label = \"\";\r\n  @Input() variant: ButtonVariant = \"solid\";\r\n  @Input() tone: Tone = \"primary\";\r\n  @Input() size: Size = \"md\";\r\n  @Input() disabled = false;\r\n  @Output() clicked = new EventEmitter<MouseEvent>();\r\n\r\n  private root?: Root;\r\n\r\n  ngAfterViewInit() {\r\n    this.root = createRoot(this.host.nativeElement);\r\n    this.render();\r\n  }\r\n\r\n  ngOnChanges() {\r\n    this.render();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.root?.unmount();\r\n  }\r\n\r\n  private render() {\r\n    this.root?.render(\r\n      createElement(\r\n        ReactButton,\r\n        {\r\n          variant: this.variant,\r\n          tone: this.tone,\r\n          size: this.size,\r\n          disabled: this.disabled,\r\n          onClick: (event: ReactMouseEvent) => this.clicked.emit(event.nativeEvent),\r\n        },\r\n        this.label // the button's text is passed as children\r\n      )\r\n    );\r\n  }\r\n}\r\n```\r\n\r\nImport the wrapper wherever you need it:\r\n\r\n```ts\r\n// app.component.ts\r\nimport { Component } from \"@angular/core\";\r\nimport { VjButtonComponent } from \"./vj-button.component\";\r\n\r\n@Component({\r\n  selector: \"app-root\",\r\n  standalone: true,\r\n  imports: [VjButtonComponent],\r\n  template: `<vj-button label=\"Submit\" tone=\"primary\" (clicked)=\"onSubmit()\" />`,\r\n})\r\nexport class AppComponent {\r\n  onSubmit() {\r\n    console.log(\"Submitted\");\r\n  }\r\n}\r\n```\r\n\r\n### Vue 3\r\n\r\nMake a wrapper component that mounts the React component when it loads and re-renders it whenever its props change.\r\n\r\n```vue\r\n<!-- VjButton.vue -->\r\n<script setup lang=\"ts\">\r\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\r\nimport { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from \"react\";\r\nimport { createRoot, type Root } from \"react-dom/client\";\r\nimport {\r\n  Button,\r\n  type ButtonProps,\r\n  type ButtonVariant,\r\n  type Size,\r\n  type Tone,\r\n} from \"@vjdesigns/vjdesigns-ui\";\r\n\r\n// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.\r\nconst ReactButton = Button as (props: ButtonProps) => ReactElement;\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    label: string;\r\n    variant?: ButtonVariant;\r\n    tone?: Tone;\r\n    size?: Size;\r\n    disabled?: boolean;\r\n  }>(),\r\n  { variant: \"solid\", tone: \"primary\", size: \"md\", disabled: false }\r\n);\r\n\r\nconst emit = defineEmits<{ click: [event: MouseEvent] }>();\r\n\r\nconst host = ref<HTMLElement | null>(null);\r\nlet root: Root | undefined;\r\n\r\nfunction render() {\r\n  root?.render(\r\n    createElement(\r\n      ReactButton,\r\n      {\r\n        variant: props.variant,\r\n        tone: props.tone,\r\n        size: props.size,\r\n        disabled: props.disabled,\r\n        onClick: (event: ReactMouseEvent) => emit(\"click\", event.nativeEvent),\r\n      },\r\n      props.label // the button's text is passed as children\r\n    )\r\n  );\r\n}\r\n\r\nonMounted(() => {\r\n  root = createRoot(host.value!);\r\n  render();\r\n});\r\n\r\nwatch(() => ({ ...props }), render);\r\n\r\nonBeforeUnmount(() => root?.unmount());\r\n</script>\r\n\r\n<template>\r\n  <span ref=\"host\" />\r\n</template>\r\n```\r\n\r\nUse it like any other Vue component:\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport VjButton from \"./VjButton.vue\";\r\n\r\nconst onSubmit = () => console.log(\"Submitted\");\r\n</script>\r\n\r\n<template>\r\n  <VjButton label=\"Submit\" tone=\"primary\" @click=\"onSubmit\" />\r\n</template>\r\n```\r\n\r\n> **Tip:** Wrap `CheckBox` and any other component the same way. Pass its props into `createElement`, and send its callbacks back out as Angular outputs or Vue emits. For `CheckBox`, that means sending `onCheckedChange` back out."
+      "markdown": "The components are built with React. You can use them directly in a React project. In Angular or Vue, you mount them inside a small wrapper component, as shown below.\n\n### React\n\n```tsx\nimport { useState } from \"react\";\nimport { Button, CheckBox } from \"@vjdesigns/vjdesigns-ui\";\n\nexport function SignupForm() {\n  const [accepted, setAccepted] = useState(false);\n\n  return (\n    <form>\n      <CheckBox\n        label=\"Accept terms\"\n        checked={accepted}\n        onCheckedChange={setAccepted}\n      />\n      <Button\n        variant=\"solid\"\n        tone=\"primary\"\n        size=\"md\"\n        disabled={!accepted}\n        onClick={() => console.log(\"Submitted\")}\n      >\n        Submit\n      </Button>\n    </form>\n  );\n}\n```\n\n### Angular\n\nMake a standalone wrapper that renders the React component into its host element. The wrapper uses `createElement`, so you don't need to change your JSX or TSX settings.\n\n```ts\n// vj-button.component.ts\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  ViewChild,\n} from \"@angular/core\";\nimport { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from \"react\";\nimport { createRoot, Root } from \"react-dom/client\";\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonVariant,\n  type Size,\n  type Tone,\n} from \"@vjdesigns/vjdesigns-ui\";\n\n// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.\nconst ReactButton = Button as (props: ButtonProps) => ReactElement;\n\n@Component({\n  selector: \"vj-button\",\n  standalone: true,\n  template: `<span #host></span>`,\n})\nexport class VjButtonComponent implements AfterViewInit, OnChanges, OnDestroy {\n  @ViewChild(\"host\", { static: true }) host!: ElementRef<HTMLElement>;\n\n  @Input() label = \"\";\n  @Input() variant: ButtonVariant = \"solid\";\n  @Input() tone: Tone = \"primary\";\n  @Input() size: Size = \"md\";\n  @Input() disabled = false;\n  @Output() clicked = new EventEmitter<MouseEvent>();\n\n  private root?: Root;\n\n  ngAfterViewInit() {\n    this.root = createRoot(this.host.nativeElement);\n    this.render();\n  }\n\n  ngOnChanges() {\n    this.render();\n  }\n\n  ngOnDestroy() {\n    this.root?.unmount();\n  }\n\n  private render() {\n    this.root?.render(\n      createElement(\n        ReactButton,\n        {\n          variant: this.variant,\n          tone: this.tone,\n          size: this.size,\n          disabled: this.disabled,\n          onClick: (event: ReactMouseEvent) => this.clicked.emit(event.nativeEvent),\n        },\n        this.label // the button's text is passed as children\n      )\n    );\n  }\n}\n```\n\nImport the wrapper wherever you need it:\n\n```ts\n// app.component.ts\nimport { Component } from \"@angular/core\";\nimport { VjButtonComponent } from \"./vj-button.component\";\n\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n  imports: [VjButtonComponent],\n  template: `<vj-button label=\"Submit\" tone=\"primary\" (clicked)=\"onSubmit()\" />`,\n})\nexport class AppComponent {\n  onSubmit() {\n    console.log(\"Submitted\");\n  }\n}\n```\n\n### Vue 3\n\nMake a wrapper component that mounts the React component when it loads and re-renders it whenever its props change.\n\n```vue\n<!-- VjButton.vue -->\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonVariant,\n  type Size,\n  type Tone,\n} from \"@vjdesigns/vjdesigns-ui\";\n\n// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.\nconst ReactButton = Button as (props: ButtonProps) => ReactElement;\n\nconst props = withDefaults(\n  defineProps<{\n    label: string;\n    variant?: ButtonVariant;\n    tone?: Tone;\n    size?: Size;\n    disabled?: boolean;\n  }>(),\n  { variant: \"solid\", tone: \"primary\", size: \"md\", disabled: false }\n);\n\nconst emit = defineEmits<{ click: [event: MouseEvent] }>();\n\nconst host = ref<HTMLElement | null>(null);\nlet root: Root | undefined;\n\nfunction render() {\n  root?.render(\n    createElement(\n      ReactButton,\n      {\n        variant: props.variant,\n        tone: props.tone,\n        size: props.size,\n        disabled: props.disabled,\n        onClick: (event: ReactMouseEvent) => emit(\"click\", event.nativeEvent),\n      },\n      props.label // the button's text is passed as children\n    )\n  );\n}\n\nonMounted(() => {\n  root = createRoot(host.value!);\n  render();\n});\n\nwatch(() => ({ ...props }), render);\n\nonBeforeUnmount(() => root?.unmount());\n</script>\n\n<template>\n  <span ref=\"host\" />\n</template>\n```\n\nUse it like any other Vue component:\n\n```vue\n<script setup lang=\"ts\">\nimport VjButton from \"./VjButton.vue\";\n\nconst onSubmit = () => console.log(\"Submitted\");\n</script>\n\n<template>\n  <VjButton label=\"Submit\" tone=\"primary\" @click=\"onSubmit\" />\n</template>\n```\n\n> **Tip:** Wrap `CheckBox` and any other component the same way. Pass its props into `createElement`, and send its callbacks back out as Angular outputs or Vue emits. For `CheckBox`, that means sending `onCheckedChange` back out."
     },
     {
       "id": "theming",
       "title": "Theming",
-      "markdown": "Wrap any part of your app in `Theme` to set the color mode, brand palette, and accent for everything inside it:\r\n\r\n```tsx\r\nimport { Theme, Button } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\n<Theme mode=\"dark\" brand=\"purple\" fill>\r\n  <Button>Dark, purple button</Button>\r\n</Theme>\r\n```\r\n\r\n| Prop | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| `mode` | `\"light\" \\| \"dark\"` | inherited | Color mode for everything inside. |\r\n| `brand` | `\"black\" \\| \"blue\" \\| \"gold\" \\| \"green\" \\| \"purple\"`, a hex color, or `{ light, dark }` | inherited | Brand palette for buttons, links, focus rings and indicators. |\r\n| `accent` | `\"brand\" | \"volt\"`, a hex color, or `{ light, dark }` | inherited (the brand's own) | The bright highlight on badges, switches, progress bars, sliders, steppers, and active navigation. |\r\n| `fill` | `boolean` | `false` | Paints the theme's background and text color on the wrapper. |\r\n\r\nOutside React (or to theme the whole page), set the attributes on `<html>` instead:\r\n\r\n```html\r\n<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"volt\">\r\n```\r\n\r\n### Accent color\r\n\r\nThe accent is the energetic highlight: badges, switches, progress bars, sliders, steppers, and the active link in the Navbar. By default it follows the brand, as a bright shade of the brand's own color, so it always fits:\r\n\r\n| Brand | Default accent |\r\n| --- | --- |\r\n| `blue` (default) | sky blue `#76c7ff` |\r\n| `purple` | lavender `#c0b0ff` |\r\n| `gold` | amber `#f5ad5f` |\r\n| `green` | mint `#72d4ad` |\r\n| `black` | volt `#c8f031` (black has no hue to build on) |\r\n| a custom hex | generated from that color |\r\n\r\nTo choose a different one:\r\n\r\n```tsx\r\n<Theme accent=\"volt\">…</Theme>      // the original bright yellow-green\r\n<Theme accent=\"#ff6b00\">…</Theme>   // any color\r\n<Theme accent=\"brand\">…</Theme>     // back to the brand's own, inside an area with another accent\r\n```\r\n\r\nAccents always carry dark text. A color too dark for that is lightened (same hue) just enough to meet WCAG AA, with a warning in development. An accent you set also holds inside nested brands. In CSS, `accentCss(\"name\", \"#ff6b00\")` generates a `[data-accent=\"name\"]` rule, like `brandCss` below.\r\n\r\n### Custom brand colors\r\n\r\nPass any hex color as `brand` and a full palette is generated for both modes:\r\n\r\n```tsx\r\n<Theme brand=\"#e11d48\">…</Theme>\r\n<Theme brand={{ light: \"#4338ca\", dark: \"#f472b6\" }}>…</Theme>\r\n```\r\n\r\nEvery generated palette meets WCAG 2.2 AA. A single color is used exactly as given in the mode where it has enough contrast (dark colors in light mode, light colors in dark mode), and the other mode gets a matching shade of the same hue. If a color doesn't have enough contrast (for example, a mid-tone that fails in both modes), its lightness is shifted just enough to pass, and a warning is logged in development.\r\n\r\nTo define a brand in CSS instead (for the whole page, applied before any JavaScript runs), generate a stylesheet rule with `brandCss`:\r\n\r\n```ts\r\nimport { brandCss } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\nbrandCss(\"acme\", \"#e11d48\"); // '[data-brand=\"acme\"] { --brand-light-primary: … }'\r\n```\r\n\r\nAdd the rule to your stylesheet and use `<html data-brand=\"acme\">`. `createBrandPalette(color)` returns the generated colors as an object, if you need them directly."
+      "markdown": "Wrap any part of your app in `Theme` to set the color mode, brand palette, and accent for everything inside it:\n\n```tsx\nimport { Theme, Button } from \"@vjdesigns/vjdesigns-ui\";\n\n<Theme mode=\"dark\" brand=\"purple\" fill>\n  <Button>Dark, purple button</Button>\n</Theme>\n```\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `mode` | `\"light\" \\| \"dark\"` | inherited | Color mode for everything inside. |\n| `brand` | `\"black\" \\| \"blue\" \\| \"gold\" \\| \"green\" \\| \"purple\"`, a hex color, or `{ light, dark }` | inherited | Brand palette for buttons, links, focus rings and indicators. |\n| `accent` | `\"brand\" | \"lime\"`, a hex color, or `{ light, dark }` | inherited (the brand's own) | The bright highlight on badges, switches, progress bars, sliders, steppers, and active navigation. |\n| `fill` | `boolean` | `false` | Paints the theme's background and text color on the wrapper. |\n\nOutside React (or to theme the whole page), set the attributes on `<html>` instead:\n\n```html\n<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"lime\">\n```\n\n### Accent color\n\nThe accent is the energetic highlight: badges, switches, progress bars, sliders, steppers, and the active link in the Navbar. By default it follows the brand, as a bright shade of the brand's own color, so it always fits:\n\n| Brand | Default accent |\n| --- | --- |\n| `blue` (default) | sky blue `#76c7ff` |\n| `purple` | lavender `#c0b0ff` |\n| `gold` | amber `#f5ad5f` |\n| `green` | mint `#72d4ad` |\n| `black` | lime `#c8f031` (black has no hue to build on) |\n| a custom hex | generated from that color |\n\nTo choose a different one:\n\n```tsx\n<Theme accent=\"lime\">…</Theme>      // the original bright yellow-green (\"volt\", its former name, still works)\n<Theme accent=\"#ff6b00\">…</Theme>   // any color\n<Theme accent=\"brand\">…</Theme>     // back to the brand's own, inside an area with another accent\n```\n\nAccents always carry dark text. A color too dark for that is lightened (same hue) just enough to meet WCAG AA, with a warning in development. An accent you set also holds inside nested brands. In CSS, `accentCss(\"name\", \"#ff6b00\")` generates a `[data-accent=\"name\"]` rule, like `brandCss` below.\n\n### Custom brand colors\n\nPass any hex color as `brand` and a full palette is generated for both modes:\n\n```tsx\n<Theme brand=\"#e11d48\">…</Theme>\n<Theme brand={{ light: \"#4338ca\", dark: \"#f472b6\" }}>…</Theme>\n```\n\nEvery generated palette meets WCAG 2.2 AA. A single color is used exactly as given in the mode where it has enough contrast (dark colors in light mode, light colors in dark mode), and the other mode gets a matching shade of the same hue. If a color doesn't have enough contrast (for example, a mid-tone that fails in both modes), its lightness is shifted just enough to pass, and a warning is logged in development.\n\nTo define a brand in CSS instead (for the whole page, applied before any JavaScript runs), generate a stylesheet rule with `brandCss`:\n\n```ts\nimport { brandCss } from \"@vjdesigns/vjdesigns-ui\";\n\nbrandCss(\"acme\", \"#e11d48\"); // '[data-brand=\"acme\"] { --brand-light-primary: … }'\n```\n\nAdd the rule to your stylesheet and use `<html data-brand=\"acme\">`. `createBrandPalette(color)` returns the generated colors as an object, if you need them directly."
     },
     {
       "id": "languages",
       "title": "Languages",
-      "markdown": "Components have built-in text: button names like \"Close\" and \"Next page\", screen-reader announcements like \"3 results available\", validation messages, and date formats. Wrap your app in `LocaleProvider` to show all of it in another language:\r\n\r\n```tsx\r\nimport { LocaleProvider } from \"@vjdesigns/vjdesigns-ui\";\r\nimport es from \"@vjdesigns/vjdesigns-ui/locales/es\";\r\n\r\n<LocaleProvider locale=\"es\" messages={es}>\r\n  <App />\r\n</LocaleProvider>\r\n```\r\n\r\n`LocaleProvider` sets:\r\n\r\n- **Built-in text** for every component, from `messages`.\r\n- **Dates and numbers** in the locale's format (`23/10/2026`, `1.234,5`), and plurals that follow the language's rules.\r\n- **Writing direction**: Arabic, Hebrew, Persian, and Urdu get `dir=\"rtl\"`, and layouts and arrow keys mirror.\r\n- **`lang`** on its wrapper, so screen readers pronounce the text correctly. Popups (menus, dialogs, tooltips) keep the language of the area that opened them.\r\n\r\nEach locale is a separate import, so your app only downloads the languages it uses. Without a `LocaleProvider`, components use English text and the browser's date and number format.\r\n\r\nThis library only translates its own built-in text. Text your app passes in, like `<Button>Save</Button>`, is your app's content: translate it with your app's i18n library (react-i18next, FormatJS, and so on).\r\n\r\n### What gets translated\r\n\r\nThe language is never picked automatically from where the user lives or their browser settings. Your app chooses it by rendering a `LocaleProvider`. For example, with `<LocaleProvider locale=\"de\" messages={de}>`:\r\n\r\n| | Translated? |\r\n| --- | --- |\r\n| Text your app passes in, like `<Button>Save</Button>` | No: your app translates it |\r\n| Built-in names, like \"Close\", \"Next page\", \"Clear search\" | Yes: \"Schließen\", \"Nächste Seite\", \"Suche löschen\" |\r\n| Screen-reader announcements, like \"3 results available\" | Yes: \"3 Ergebnisse verfügbar\" |\r\n| Validation messages, empty states, file-upload prompts | Yes |\r\n| Dates and numbers | Yes: \"23.10.2026\", \"4,5\" |\r\n\r\nTo follow the user's browser language, pass it yourself: `locale={navigator.language}` together with the matching `messages` (see [Switching language at runtime](#switching-language-at-runtime)).\r\n\r\n### Bundled languages\r\n\r\n`ar` Arabic · `bn` Bengali · `cs` Czech · `da` Danish · `de` German · `el` Greek · `es` Spanish · `fa` Persian · `fi` Finnish · `fr` French · `he` Hebrew · `hi` Hindi · `hu` Hungarian · `id` Indonesian · `it` Italian · `ja` Japanese · `ko` Korean · `nb` Norwegian Bokmål · `nl` Dutch · `pl` Polish · `pt-BR` Portuguese (Brazil) · `ro` Romanian · `ru` Russian · `sv` Swedish · `th` Thai · `tr` Turkish · `uk` Ukrainian · `ur` Urdu · `vi` Vietnamese · `zh-Hans` Chinese (Simplified) · `zh-Hant` Chinese (Traditional), plus English (the default).\r\n\r\nThe translations are machine-generated and haven't been reviewed by native speakers yet. If you find a wrong or awkward phrase, override it (below) and report it so the bundled locale can be fixed.\r\n\r\n### Changing a few strings\r\n\r\nPass only the strings you want to change. Everything else falls back to the outer provider's language (English at the top):\r\n\r\n```tsx\r\n<LocaleProvider locale=\"en-GB\" messages={{ pagination: { next: \"Onwards\" } }}>\r\n```\r\n\r\nProviders nest, so an inner provider can switch the language for one part of the page. Per-component props such as `clearLabel` or `labels` still win over the provider.\r\n\r\n### Other languages\r\n\r\nFor a language that isn't bundled, write a complete messages object. TypeScript flags any missing string. Use English as the template:\r\n\r\n```ts\r\nimport { en, plural, type Messages } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\nconst p = plural(\"sw\");\r\nexport const sw: Messages = {\r\n  ...en,\r\n  pagination: { ...en.pagination, next: \"Ukurasa unaofuata\", previous: \"Ukurasa uliopita\" },\r\n  searchInput: {\r\n    ...en.searchInput,\r\n    results: (count) => p(count, { \"=0\": \"Hakuna matokeo\", one: \"Tokeo #\", other: \"Matokeo #\" }),\r\n  },\r\n  // ...\r\n};\r\n```\r\n\r\n`plural(locale)` picks the right plural form for any language (`#` is the formatted number).\r\n\r\n### Switching language at runtime\r\n\r\nList the languages your app offers as loaders, so each one is downloaded only when picked:\r\n\r\n```tsx\r\nimport { LocaleProvider, type Messages } from \"@vjdesigns/vjdesigns-ui\";\r\n\r\nconst loaders: Record<string, () => Promise<{ default: Messages }>> = {\r\n  es: () => import(\"@vjdesigns/vjdesigns-ui/locales/es\"),\r\n  fr: () => import(\"@vjdesigns/vjdesigns-ui/locales/fr\"),\r\n  ar: () => import(\"@vjdesigns/vjdesigns-ui/locales/ar\"),\r\n};\r\n\r\nfunction App({ lang }: { lang: string }) {\r\n  const [messages, setMessages] = useState<Messages>();\r\n  useEffect(() => {\r\n    const load = loaders[lang];\r\n    if (load) load().then((mod) => setMessages(mod.default));\r\n    else setMessages(undefined); // English\r\n  }, [lang]);\r\n  // Until a language loads, the previous one (or English) shows.\r\n  return <LocaleProvider locale={lang} messages={messages}>…</LocaleProvider>;\r\n}\r\n```\r\n\r\nFor server rendering, also set `<html lang=\"…\" dir=\"…\">` on the page. `getLocaleDirection(locale)` returns `\"ltr\"` or `\"rtl\"`."
+      "markdown": "Components have built-in text: button names like \"Close\" and \"Next page\", screen-reader announcements like \"3 results available\", validation messages, and date formats. Wrap your app in `LocaleProvider` to show all of it in another language:\n\n```tsx\nimport { LocaleProvider } from \"@vjdesigns/vjdesigns-ui\";\nimport es from \"@vjdesigns/vjdesigns-ui/locales/es\";\n\n<LocaleProvider locale=\"es\" messages={es}>\n  <App />\n</LocaleProvider>\n```\n\n`LocaleProvider` sets:\n\n- **Built-in text** for every component, from `messages`.\n- **Dates and numbers** in the locale's format (`23/10/2026`, `1.234,5`), and plurals that follow the language's rules.\n- **Writing direction**: Arabic, Hebrew, Persian, and Urdu get `dir=\"rtl\"`, and layouts and arrow keys mirror.\n- **`lang`** on its wrapper, so screen readers pronounce the text correctly. Popups (menus, dialogs, tooltips) keep the language of the area that opened them.\n\nEach locale is a separate import, so your app only downloads the languages it uses. Without a `LocaleProvider`, components use English text and the browser's date and number format.\n\nThis library only translates its own built-in text. Text your app passes in, like `<Button>Save</Button>`, is your app's content: translate it with your app's i18n library (react-i18next, FormatJS, and so on).\n\n### What gets translated\n\nThe language is never picked automatically from where the user lives or their browser settings. Your app chooses it by rendering a `LocaleProvider`. For example, with `<LocaleProvider locale=\"de\" messages={de}>`:\n\n| | Translated? |\n| --- | --- |\n| Text your app passes in, like `<Button>Save</Button>` | No: your app translates it |\n| Built-in names, like \"Close\", \"Next page\", \"Clear search\" | Yes: \"Schließen\", \"Nächste Seite\", \"Suche löschen\" |\n| Screen-reader announcements, like \"3 results available\" | Yes: \"3 Ergebnisse verfügbar\" |\n| Validation messages, empty states, file-upload prompts | Yes |\n| Dates and numbers | Yes: \"23.10.2026\", \"4,5\" |\n\nTo follow the user's browser language, pass it yourself: `locale={navigator.language}` together with the matching `messages` (see [Switching language at runtime](#switching-language-at-runtime)).\n\n### Bundled languages\n\n`ar` Arabic · `bn` Bengali · `cs` Czech · `da` Danish · `de` German · `el` Greek · `es` Spanish · `fa` Persian · `fi` Finnish · `fr` French · `he` Hebrew · `hi` Hindi · `hu` Hungarian · `id` Indonesian · `it` Italian · `ja` Japanese · `ko` Korean · `nb` Norwegian Bokmål · `nl` Dutch · `pl` Polish · `pt-BR` Portuguese (Brazil) · `ro` Romanian · `ru` Russian · `sv` Swedish · `th` Thai · `tr` Turkish · `uk` Ukrainian · `ur` Urdu · `vi` Vietnamese · `zh-Hans` Chinese (Simplified) · `zh-Hant` Chinese (Traditional), plus English (the default).\n\nThe translations are machine-generated and haven't been reviewed by native speakers yet. If you find a wrong or awkward phrase, override it (below) and report it so the bundled locale can be fixed. (Working on the library itself? See [Translating built-in text](#translating-built-in-text).)\n\n### Changing a few strings\n\nPass only the strings you want to change. Everything else falls back to the outer provider's language (English at the top):\n\n```tsx\n<LocaleProvider locale=\"en-GB\" messages={{ pagination: { next: \"Onwards\" } }}>\n```\n\nProviders nest, so an inner provider can switch the language for one part of the page. Per-component props such as `clearLabel` or `labels` still win over the provider.\n\n### Other languages\n\nFor a language that isn't bundled, write a complete messages object. TypeScript flags any missing string. Use English as the template:\n\n```ts\nimport { en, plural, type Messages } from \"@vjdesigns/vjdesigns-ui\";\n\nconst p = plural(\"sw\");\nexport const sw: Messages = {\n  ...en,\n  pagination: { ...en.pagination, next: \"Ukurasa unaofuata\", previous: \"Ukurasa uliopita\" },\n  searchInput: {\n    ...en.searchInput,\n    results: (count) => p(count, { \"=0\": \"Hakuna matokeo\", one: \"Tokeo #\", other: \"Matokeo #\" }),\n  },\n  // ...\n};\n```\n\n`plural(locale)` picks the right plural form for any language (`#` is the formatted number).\n\n### Switching language at runtime\n\nList the languages your app offers as loaders, so each one is downloaded only when picked:\n\n```tsx\nimport { LocaleProvider, type Messages } from \"@vjdesigns/vjdesigns-ui\";\n\nconst loaders: Record<string, () => Promise<{ default: Messages }>> = {\n  es: () => import(\"@vjdesigns/vjdesigns-ui/locales/es\"),\n  fr: () => import(\"@vjdesigns/vjdesigns-ui/locales/fr\"),\n  ar: () => import(\"@vjdesigns/vjdesigns-ui/locales/ar\"),\n};\n\nfunction App({ lang }: { lang: string }) {\n  const [messages, setMessages] = useState<Messages>();\n  useEffect(() => {\n    const load = loaders[lang];\n    if (load) load().then((mod) => setMessages(mod.default));\n    else setMessages(undefined); // English\n  }, [lang]);\n  // Until a language loads, the previous one (or English) shows.\n  return <LocaleProvider locale={lang} messages={messages}>…</LocaleProvider>;\n}\n```\n\nFor server rendering, also set `<html lang=\"…\" dir=\"…\">` on the page. `getLocaleDirection(locale)` returns `\"ltr\"` or `\"rtl\"`."
     },
     {
       "id": "validation",
       "title": "Form validation",
-      "markdown": "> **Front-end validation is not security.** It helps people fill in a form correctly, but anyone can turn off JavaScript or send requests straight to your server. Always validate again on the server. The format checks below (`isEmail`, `isIP`, …) are plain functions you can reuse there.\r\n\r\n`useFormValidation` checks a form when it's submitted, using the browser's own rules on each input (`required`, `type=\"email\"`, `minLength`, `pattern`, `min` / `max`) plus any rules you add. Messages follow the current language.\r\n\r\n```tsx\r\nimport {\r\n  useFormValidation, rules, ErrorSummary, Field, Input, PasswordInput, Button,\r\n} from \"@vjdesigns/vjdesigns-ui\";\r\n\r\nfunction SignUp() {\r\n  const form = useFormValidation({\r\n    rules: {\r\n      confirm: rules.matches(\"password\", \"The passwords don't match.\"),\r\n      serverIp: rules.ip(),                       // IPv4 or IPv6\r\n    },\r\n    // Runs only when everything is valid. Return the server's errors to show them on their fields.\r\n    onValid: async (values) => {\r\n      const response = await api.signUp(values);\r\n      return response.errors;                     // e.g. { username: \"That username is taken.\" }\r\n    },\r\n  });\r\n\r\n  return (\r\n    <form {...form.formProps}>\r\n      <ErrorSummary ref={form.summaryRef} errors={form.errorList} />\r\n      <Field label=\"Email\" required error={form.errors.email}>\r\n        <Input name=\"email\" type=\"email\" />\r\n      </Field>\r\n      <Field label=\"Password\" required error={form.errors.password}>\r\n        <PasswordInput name=\"password\" minLength={12} />\r\n      </Field>\r\n      <Field label=\"Confirm password\" required error={form.errors.confirm}>\r\n        <PasswordInput name=\"confirm\" />\r\n      </Field>\r\n      <Field label=\"Server IP\" error={form.errors.serverIp}>\r\n        <Input name=\"serverIp\" />\r\n      </Field>\r\n      <Button type=\"submit\" loading={form.isSubmitting}>Create account</Button>\r\n    </form>\r\n  );\r\n}\r\n```\r\n\r\nHow it behaves:\r\n\r\n- **On submit**, every field is checked. If anything is wrong, the `ErrorSummary` at the top lists the problems and takes focus, so screen readers announce it. Each item links to its field. Without a summary, focus goes to the first invalid field.\r\n- **Errors are keyed by the field's `name`.** Pass `form.errors.<name>` to each `Field`'s `error`.\r\n- **After a failed submit**, an error disappears as soon as the field is fixed (while typing), and a field is fully re-checked when you leave it. It doesn't nag while you're still typing.\r\n- **Server errors** (returned from `onValid`, or set with `form.setErrors({...})`) show on their fields and stay until that field is edited.\r\n- **Emails** must have a real domain (`name@example.com`). The browser's own check also accepts `name@localhost`.\r\n\r\n### Rules and format checks\r\n\r\n| Rule | Checks |\r\n| --- | --- |\r\n| `rules.required()` | Not empty (for controls without a native `required`) |\r\n| `rules.email()` | An email address in the usual format, with a top-level domain |\r\n| `rules.ip()` / `rules.ip({ version: 4 })` / `rules.ip({ version: 6 })` | An IPv4 or IPv6 address |\r\n| `rules.minLength(n)` / `rules.maxLength(n)` | Length in characters |\r\n| `rules.pattern(/regex/, \"message\")` | The whole value matches |\r\n| `rules.matches(\"otherField\")` | Equals another field (confirm password) |\r\n| your own `(value, { values }) => message` | Anything else |\r\n\r\nEach rule takes an optional custom message. The checks behind them are exported for use anywhere, including your server:\r\n\r\n- `isEmail(value)`\r\n- `isIPv4(value)`: four numbers 0–255, no leading zeros\r\n- `isIPv6(value)`: including `::` shorthand and IPv4 tails like `::ffff:192.168.0.1`\r\n- `isIP(value, version?)`"
+      "markdown": "> **Front-end validation is not security.** It helps people fill in a form correctly, but anyone can turn off JavaScript or send requests straight to your server. Always validate again on the server. The format checks below (`isEmail`, `isIP`, …) are plain functions you can reuse there.\n\n`useFormValidation` checks a form when it's submitted, using the browser's own rules on each input (`required`, `type=\"email\"`, `minLength`, `pattern`, `min` / `max`) plus any rules you add. Messages follow the current language.\n\n```tsx\nimport {\n  useFormValidation, rules, ErrorSummary, Field, Input, PasswordInput, Button,\n} from \"@vjdesigns/vjdesigns-ui\";\n\nfunction SignUp() {\n  const form = useFormValidation({\n    rules: {\n      confirm: rules.matches(\"password\", \"The passwords don't match.\"),\n      serverIp: rules.ip(),                       // IPv4 or IPv6\n    },\n    // Runs only when everything is valid. Return the server's errors to show them on their fields.\n    onValid: async (values) => {\n      const response = await api.signUp(values);\n      return response.errors;                     // e.g. { username: \"That username is taken.\" }\n    },\n  });\n\n  return (\n    <form {...form.formProps}>\n      <ErrorSummary ref={form.summaryRef} errors={form.errorList} />\n      <Field label=\"Email\" required error={form.errors.email}>\n        <Input name=\"email\" type=\"email\" />\n      </Field>\n      <Field label=\"Password\" required error={form.errors.password}>\n        <PasswordInput name=\"password\" minLength={12} />\n      </Field>\n      <Field label=\"Confirm password\" required error={form.errors.confirm}>\n        <PasswordInput name=\"confirm\" />\n      </Field>\n      <Field label=\"Server IP\" error={form.errors.serverIp}>\n        <Input name=\"serverIp\" />\n      </Field>\n      <Button type=\"submit\" loading={form.isSubmitting}>Create account</Button>\n    </form>\n  );\n}\n```\n\nHow it behaves:\n\n- **On submit**, every field is checked. If anything is wrong, the `ErrorSummary` at the top lists the problems and takes focus, so screen readers announce it. Each item links to its field. Without a summary, focus goes to the first invalid field.\n- **Errors are keyed by the field's `name`.** Pass `form.errors.<name>` to each `Field`'s `error`.\n- **After a failed submit**, an error disappears as soon as the field is fixed (while typing), and a field is fully re-checked when you leave it. It doesn't nag while you're still typing.\n- **Server errors** (returned from `onValid`, or set with `form.setErrors({...})`) show on their fields and stay until that field is edited.\n- **Emails** must have a real domain (`name@example.com`). The browser's own check also accepts `name@localhost`.\n\n### Rules and format checks\n\n| Rule | Checks |\n| --- | --- |\n| `rules.required()` | Not empty (for controls without a native `required`) |\n| `rules.email()` | An email address in the usual format, with a top-level domain |\n| `rules.ip()` / `rules.ip({ version: 4 })` / `rules.ip({ version: 6 })` | An IPv4 or IPv6 address |\n| `rules.minLength(n)` / `rules.maxLength(n)` | Length in characters |\n| `rules.pattern(/regex/, \"message\")` | The whole value matches |\n| `rules.matches(\"otherField\")` | Equals another field (confirm password) |\n| your own `(value, { values }) => message` | Anything else |\n\nEach rule takes an optional custom message. The checks behind them are exported for use anywhere, including your server:\n\n- `isEmail(value)`\n- `isIPv4(value)`: four numbers 0–255, no leading zeros\n- `isIPv6(value)`: including `::` shorthand and IPv4 tails like `::ffff:192.168.0.1`\n- `isIP(value, version?)`"
     }
   ],
   "components": [
@@ -1264,6 +1264,215 @@
         }
       ]
     },
+    {
+      "name": "Chat",
+      "category": "data-display",
+      "folder": "Chat",
+      "import": "import { Chat } from \"@vjdesigns/vjdesigns-ui\";",
+      "description": "A chat interface for an AI assistant (or a person), with no backend of its\nown: `onSend` connects it to any API and can stream the reply. Includes a\nscrolling conversation that follows new messages, an auto-growing message\nbox (Enter sends, Shift+Enter adds a line), Stop and Retry, copy buttons,\nsuggested prompts, and screen reader announcements of each reply.\n\n```tsx\n<Chat\n  style={{ blockSize: 560 }}\n  onSend={async function* (text, { messages, signal }) {\n    const res = await fetch(\"/api/chat\", {\n      method: \"POST\",\n      body: JSON.stringify({ messages }),\n      signal,\n    });\n    yield* readTextStream(res);\n  }}\n/>\n```",
+      "nativeElement": "section",
+      "props": [
+        {
+          "name": "messages",
+          "type": "ChatMessage[]",
+          "required": false,
+          "description": "Controlled conversation."
+        },
+        {
+          "name": "defaultMessages",
+          "type": "ChatMessage[]",
+          "required": false,
+          "description": "Initial conversation when uncontrolled."
+        },
+        {
+          "name": "onMessagesChange",
+          "type": "(messages: ChatMessage[]) => void",
+          "required": false,
+          "description": "Called with the whole conversation whenever it changes (new messages, every streamed chunk, status changes)."
+        },
+        {
+          "name": "onSend",
+          "type": "( text: string, context: ChatSendContext, ) => ChatSendResult | Promise<ChatSendResult>",
+          "required": false,
+          "description": "Connects the Chat to your backend. Called with the user's text when they\nsend a message (or retry). Return the reply as a string, stream it as an\n`AsyncIterable<string>`, or return nothing and add it yourself through\ncontrolled `messages`. Throwing (or rejecting) turns the reply into an\nerror with a Retry button."
+        },
+        {
+          "name": "onStop",
+          "type": "() => void",
+          "required": false,
+          "description": "Called when the user stops a reply, after its `signal` is aborted."
+        },
+        {
+          "name": "onError",
+          "type": "(error: unknown) => void",
+          "required": false,
+          "description": "Called with whatever `onSend` threw, for logging. The user sees `labels.error` (or the message's `error`)."
+        },
+        {
+          "name": "draft",
+          "type": "string",
+          "required": false,
+          "description": "Controlled text of the message box."
+        },
+        {
+          "name": "defaultDraft",
+          "type": "string",
+          "required": false,
+          "description": "Initial text of the message box when uncontrolled."
+        },
+        {
+          "name": "onDraftChange",
+          "type": "(draft: string) => void",
+          "required": false,
+          "description": "Called with the message box text on every edit."
+        },
+        {
+          "name": "suggestions",
+          "type": "string[]",
+          "required": false,
+          "description": "Prompts offered as buttons while the conversation is empty. Pressing one sends it."
+        },
+        {
+          "name": "emptyState",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown while the conversation is empty, above the suggestions. Defaults to a short greeting (`labels.emptyTitle`)."
+        },
+        {
+          "name": "renderContent",
+          "type": "(message: ChatMessage) => ReactNode",
+          "required": false,
+          "description": "Renders a message's content, e.g. through your Markdown renderer.\nDefaults to plain text with line breaks kept. Never render\nunsanitized HTML from a model or a user."
+        },
+        {
+          "name": "assistantName",
+          "type": "string",
+          "required": false,
+          "description": "Name of the assistant, read to screen readers (\"Coach said:\"). Defaults to `labels.assistant`."
+        },
+        {
+          "name": "assistantAvatar",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown beside assistant messages (e.g. an `Avatar` or `Icon`). Decorative: hidden from assistive technology."
+        },
+        {
+          "name": "userAvatar",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Shown beside user messages. Decorative: hidden from assistive technology."
+        },
+        {
+          "name": "copyable",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Show a Copy button under finished assistant messages."
+        },
+        {
+          "name": "disclaimer",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Small print under the message box, e.g. \"AI can make mistakes.\""
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "Placeholder of the message box. Defaults to `labels.placeholder`."
+        },
+        {
+          "name": "maxLength",
+          "type": "number",
+          "required": false,
+          "description": "Maximum length of a message, in characters. Shows a counter near the limit."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables the message box and the suggestions."
+        },
+        {
+          "name": "labels",
+          "type": "Partial<ChatLabels>",
+          "required": false,
+          "description": "Overrides for the built-in text."
+        }
+      ],
+      "subcomponents": [],
+      "storybook": "Data Display/Chat",
+      "stories": [
+        {
+          "name": "Playground",
+          "description": ""
+        },
+        {
+          "name": "Send And Stream",
+          "description": "Type a message and press Enter: it is sent, and the streamed reply is announced when done."
+        },
+        {
+          "name": "Shift Enter Adds Line",
+          "description": "Shift+Enter adds a line instead of sending."
+        },
+        {
+          "name": "String Reply",
+          "description": "`onSend` can return the whole reply as a string (or a promise of one)."
+        },
+        {
+          "name": "With Suggestions",
+          "description": "While the conversation is empty, `emptyState` and `suggestions` show. Pressing a suggestion sends it."
+        },
+        {
+          "name": "With Avatars",
+          "description": "Avatars beside each speaker. They're decorative; the speaker is read from hidden text."
+        },
+        {
+          "name": "Long Conversation",
+          "description": "A long conversation. Scroll up, and a button jumps back to the latest message."
+        },
+        {
+          "name": "Long Content",
+          "description": "A long unbroken string (a URL, say) wraps instead of overflowing the bubble."
+        },
+        {
+          "name": "Error And Retry",
+          "description": "When `onSend` throws, the reply shows an error with a Retry button. This backend fails the first time."
+        },
+        {
+          "name": "Stop Streaming",
+          "description": "While a reply streams, the send button becomes Stop (Escape in the message box works too)."
+        },
+        {
+          "name": "Disabled",
+          "description": ""
+        },
+        {
+          "name": "With Max Length",
+          "description": "`maxLength` limits a message and shows a counter near the limit."
+        },
+        {
+          "name": "System Messages",
+          "description": "System messages (joins, handoffs, context notes) are centered notes."
+        },
+        {
+          "name": "Custom Rendering",
+          "description": "`renderContent` renders messages your way, e.g. through a Markdown\nrenderer. This one turns `**bold**` into `<strong>` and keeps paragraphs.\nNever render unsanitized HTML from a model."
+        },
+        {
+          "name": "Controlled",
+          "description": "Controlled: the parent owns the messages, so it can save, clear, or seed\nthem. Here, `onSend` returns nothing and the parent adds the reply itself\n(the way a WebSocket or a human agent would)."
+        },
+        {
+          "name": "Connecting ABackend",
+          "description": "How to connect a real backend: stream server-sent events from your API\nroute with `readEventStream`, passing `signal` so Stop cancels the request.\n\n```tsx\nimport { Chat, readEventStream } from \"@vjdesigns/vjdesigns-ui\";\n\n<Chat\n  onSend={async function* (_text, { messages, signal }) {\n    const res = await fetch(\"/api/chat\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({\n        messages: messages.map(({ role, content }) => ({ role, content })),\n      }),\n      signal,\n    });\n    if (!res.ok) throw new Error(`Chat request failed: ${res.status}`);\n    for await (const data of readEventStream(res)) {\n      if (data === \"[DONE]\") break;\n      yield JSON.parse(data).text ?? \"\";\n    }\n  }}\n/>\n```\n\nKeep API keys on your server: the browser should call your own route,\nwhich calls the model provider. This story fakes the server with an\nin-memory event stream."
+        },
+        {
+          "name": "Right To Left",
+          "description": "Right-to-left: user messages sit on the inline end, which is the left in RTL."
+        }
+      ]
+    },
     {
       "name": "Chip",
       "category": "data-display",
@@ -1841,7 +2050,7 @@
       "category": "data-display",
       "folder": "DataGrid",
       "import": "import { DataGrid } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "An interactive data table (WAI-ARIA APG \"Data Grid\"): sortable columns\r\n(with Shift for multi-column sorts), search filtering, single or\r\nmultiple row selection, pagination, and a full keyboard model. Works with\r\nclient-side data, or server-side data with `manual`.\r\n\r\nKeyboard: the grid is one Tab stop. Arrow keys move between cells\r\n(mirrored in RTL), Home / End go to the row's first or last cell, Ctrl+Home\r\n/ Ctrl+End to the first or last cell of the grid, Page Up / Page Down move\r\nten rows. On a header, Enter sorts (Shift+Enter adds a secondary sort).\r\nSpace selects the row, Shift+click or Shift+Space selects a range, and\r\nCtrl/⌘+A selects every row. A cell with a single button, link, or\r\ncheckbox focuses it directly; for cells with several controls or a text\r\nfield, Enter or F2 moves into the cell, Tab cycles inside it, and Escape\r\nreturns to the grid.\r\n\r\nScreen readers hear sort changes and filter result counts; the grid is a\r\nreal `<table role=\"grid\">` with `aria-sort`, `aria-selected`,\r\n`aria-rowcount`, and `aria-rowindex`.\r\n\r\n```tsx\r\n<DataGrid\r\n  aria-label=\"Roster\"\r\n  rows={players}\r\n  columns={[\r\n    { key: \"name\", header: \"Player\", sortable: true, rowHeader: true },\r\n    { key: \"ppg\", header: \"PPG\", sortable: true, numeric: true },\r\n  ]}\r\n  selectionMode=\"multiple\"\r\n  pageSize={10}\r\n/>\r\n```",
+      "description": "An interactive data table (WAI-ARIA APG \"Data Grid\"): sortable columns\n(with Shift for multi-column sorts), search filtering, single or\nmultiple row selection, pagination, and a full keyboard model. Works with\nclient-side data, or server-side data with `manual`.\n\nKeyboard: the grid is one Tab stop. Arrow keys move between cells\n(mirrored in RTL), Home / End go to the row's first or last cell, Ctrl+Home\n/ Ctrl+End to the first or last cell of the grid, Page Up / Page Down move\nten rows. On a header, Enter sorts (Shift+Enter adds a secondary sort).\nSpace selects the row, Shift+click or Shift+Space selects a range, and\nCtrl/⌘+A selects every row. A cell with a single button, link, or\ncheckbox focuses it directly; for cells with several controls or a text\nfield, Enter or F2 moves into the cell, Tab cycles inside it, and Escape\nreturns to the grid.\n\nScreen readers hear sort changes and filter result counts; the grid is a\nreal `<table role=\"grid\">` with `aria-sort`, `aria-selected`,\n`aria-rowcount`, and `aria-rowindex`.\n\n```tsx\n<DataGrid\n  aria-label=\"Roster\"\n  rows={players}\n  columns={[\n    { key: \"name\", header: \"Player\", sortable: true, rowHeader: true },\n    { key: \"ppg\", header: \"PPG\", sortable: true, numeric: true },\n  ]}\n  selectionMode=\"multiple\"\n  pageSize={10}\n/>\n```",
       "props": [
         {
           "name": "rows",
@@ -1916,7 +2125,7 @@
           "name": "filter",
           "type": "string",
           "required": false,
-          "description": "Search text: rows are kept when their filterable columns contain every\r\nword (case- and diacritic-insensitive). Render your own search field\r\n(e.g. `SearchInput`) and pass its text here."
+          "description": "Search text: rows are kept when their filterable columns contain every\nword (case- and diacritic-insensitive). Render your own search field\n(e.g. `SearchInput`) and pass its text here."
         },
         {
           "name": "selectionMode",
@@ -1980,7 +2189,7 @@
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "Server-side data: the grid doesn't sort, filter, or page `rows` itself.\r\nIt shows them as given and reports `sort`, `filter`, and `page` changes\r\nfor you to fetch. Pass `rowCount` for the total."
+          "description": "Server-side data: the grid doesn't sort, filter, or page `rows` itself.\nIt shows them as given and reports `sort`, `filter`, and `page` changes\nfor you to fetch. Pass `rowCount` for the total."
         },
         {
           "name": "rowCount",
@@ -2047,7 +2256,7 @@
           "type": "\"auto\" | \"fixed\"",
           "required": false,
           "default": "\"auto\"",
-          "description": "Table layout. `fixed` makes column widths exact (content wraps or clips\r\ninstead of widening a column)."
+          "description": "Table layout. `fixed` makes column widths exact (content wraps or clips\ninstead of widening a column)."
         },
         {
           "name": "tableStyle",
@@ -2083,7 +2292,7 @@
         },
         {
           "name": "Keyboard",
-          "description": "Keyboard: the grid is one Tab stop. Arrows move between cells, Home/End\r\nto the row's ends, Ctrl+Home/End to the grid's corners. Enter on a\r\nheader sorts; Space selects the row."
+          "description": "Keyboard: the grid is one Tab stop. Arrows move between cells, Home/End\nto the row's ends, Ctrl+Home/End to the grid's corners. Enter on a\nheader sorts; Space selects the row."
         },
         {
           "name": "Range Selection",
@@ -2091,7 +2300,7 @@
         },
         {
           "name": "Interactive Cells",
-          "description": "Cells with several controls: Enter (or F2) steps into the cell, Tab\r\ncycles its controls, Escape steps back out. A cell with one button\r\nfocuses it directly."
+          "description": "Cells with several controls: Enter (or F2) steps into the cell, Tab\ncycles its controls, Escape steps back out. A cell with one button\nfocuses it directly."
         },
         {
           "name": "Single Selection",
@@ -2099,7 +2308,7 @@
         },
         {
           "name": "Server Side",
-          "description": "Server-side data: with `manual`, the grid reports sort and page changes\r\nand shows the rows you fetch. `rowCount` gives the total."
+          "description": "Server-side data: with `manual`, the grid reports sort and page changes\nand shows the rows you fetch. `rowCount` gives the total."
         },
         {
           "name": "Empty And Loading",
@@ -2119,7 +2328,7 @@
         },
         {
           "name": "Extending Columns",
-          "description": "Extending columns: `headerEnd` adds content after a header's label,\r\noutside its sort button (here a column menu button), and `className` /\r\n`style` reach every cell of a column. Controls marked\r\n`data-grid-secondary` don't steal the header's focus: the sort button\r\nstays its target, and F2 then Tab reaches them."
+          "description": "Extending columns: `headerEnd` adds content after a header's label,\noutside its sort button (here a column menu button), and `className` /\n`style` reach every cell of a column. Controls marked\n`data-grid-secondary` don't steal the header's focus: the sort button\nstays its target, and F2 then Tab reaches them."
         }
       ]
     },
@@ -4002,7 +4211,7 @@
       "category": "data-display",
       "folder": "VirtualList",
       "import": "import { VirtualList } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A list that renders only the items in view, so tens of thousands of rows\r\nscroll smoothly. Items may have any height (they're measured as they\r\nrender). Built on `useVirtualizer` and `ScrollArea`.\r\n\r\nAccessibility: a real `role=\"list\"` whose items carry `aria-setsize` and\r\n`aria-posinset`, so screen readers announce \"item 4,812 of 10,000\" even\r\nthough only a few dozen exist in the page. The scroll area is keyboard\r\nscrollable, and Tab through items' links and buttons keeps working (new\r\nitems render as focus scrolls them into view). Browser find-in-page only\r\nsees rendered items, so offer search for long lists.\r\n\r\n```tsx\r\n<VirtualList\r\n  aria-label=\"All players\"\r\n  items={players}\r\n  height=\"24rem\"\r\n  getKey={(p) => p.id}\r\n  renderItem={(p) => <PlayerRow player={p} />}\r\n/>\r\n```",
+      "description": "A list that renders only the items in view, so tens of thousands of rows\nscroll smoothly. Items may have any height (they're measured as they\nrender). Built on `useVirtualizer` and `ScrollArea`.\n\nAccessibility: a real `role=\"list\"` whose items carry `aria-setsize` and\n`aria-posinset`, so screen readers announce \"item 4,812 of 10,000\" even\nthough only a few dozen exist in the page. The scroll area is keyboard\nscrollable, and Tab through items' links and buttons keeps working (new\nitems render as focus scrolls them into view). Browser find-in-page only\nsees rendered items, so offer search for long lists.\n\n```tsx\n<VirtualList\n  aria-label=\"All players\"\n  items={players}\n  height=\"24rem\"\n  getKey={(p) => p.id}\n  renderItem={(p) => <PlayerRow player={p} />}\n/>\n```",
       "props": [
         {
           "name": "items",
@@ -4450,7 +4659,7 @@
           "description": "Every tone, solid. `accent` is the promo strip, always with dark text."
         },
         {
-          "name": "Volt Promo",
+          "name": "Accent Promo",
           "description": "The accent promo strip: bold, dark text on accent, with a strong call to action."
         },
         {
@@ -4585,7 +4794,7 @@
       "category": "feedback",
       "folder": "ErrorSummary",
       "import": "import { ErrorSummary } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "The list of a form's errors, shown above it after a failed submit: a danger\r\n`Alert` whose items link to their fields (activating one moves focus to the\r\nfield). It's focusable (`tabIndex={-1}`): give `useFormValidation`'s\r\n`summaryRef` as `ref` and a failed submit moves focus here, so screen\r\nreaders announce the heading and the list. The title is a real heading\r\n(`h2` by default; set `headingLevel` to fit the page outline).\r\n\r\n```tsx\r\n<ErrorSummary ref={form.summaryRef} errors={form.errorList} />\r\n```",
+      "description": "The list of a form's errors, shown above it after a failed submit: a danger\n`Alert` whose items link to their fields (activating one moves focus to the\nfield). It's focusable (`tabIndex={-1}`): give `useFormValidation`'s\n`summaryRef` as `ref` and a failed submit moves focus here, so screen\nreaders announce the heading and the list. The title is a real heading\n(`h2` by default; set `headingLevel` to fit the page outline).\n\n```tsx\n<ErrorSummary ref={form.summaryRef} errors={form.errorList} />\n```",
       "nativeElement": "div",
       "props": [
         {
@@ -6048,7 +6257,7 @@
       "category": "forms",
       "folder": "ColorPicker",
       "import": "import { ColorInput } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A pill field showing a swatch and the color value; pressing it opens a\r\n`ColorPicker` in a `Popover` (a non-modal dialog on the shared overlay\r\nlayer stack: Escape and outside presses close it, focus returns to the\r\nfield). Takes the same value, format, alpha, swatch, and state props as\r\n`ColorPicker`.\r\n\r\nThe trigger is a native `<button>` with `aria-haspopup=\"dialog\"` and\r\n`aria-expanded`. Its name is the label plus the current value and a plain\r\ndescription (\"Jersey color, #1d4ed8, dark blue\"). Inside a `Field`, the\r\nlabel, hint, error, invalid, disabled, and read-only state are wired to\r\nit. A read-only field still opens, so the values can be inspected.",
+      "description": "A pill field showing a swatch and the color value; pressing it opens a\n`ColorPicker` in a `Popover` (a non-modal dialog on the shared overlay\nlayer stack: Escape and outside presses close it, focus returns to the\nfield). Takes the same value, format, alpha, swatch, and state props as\n`ColorPicker`.\n\nThe trigger is a native `<button>` with `aria-haspopup=\"dialog\"` and\n`aria-expanded`. Its name is the label plus the current value and a plain\ndescription (\"Jersey color, #1d4ed8, dark blue\"). Inside a `Field`, the\nlabel, hint, error, invalid, disabled, and read-only state are wired to\nit. A read-only field still opens, so the values can be inspected.",
       "nativeElement": "button",
       "props": [
         {
@@ -6777,7 +6986,7 @@
       "category": "forms",
       "folder": "DatePicker",
       "import": "import { DatePicker } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A date field: type a date in the locale's short format (or ISO), or press\r\nthe calendar button to pick one from a `Calendar` in a popup dialog.\r\n\r\nThe value is an ISO date string (\"YYYY-MM-DD\"), so it never shifts with\r\ntime zones. The text field shows it in the locale's numeric format; on\r\nblur (or Enter), typed text is parsed and normalized, or rejected with an\r\ninline error. Inside a `Field`, label, hint, error, required, disabled,\r\nand invalid state are wired to the text input.\r\n\r\nThe popup is a modal `Popover` on the shared overlay layer stack, so\r\nEscape closes only the calendar, also inside a `Modal` or `Drawer`.\r\n\r\n```tsx\r\n<Field label=\"Game day\">\r\n  <DatePicker name=\"gameDay\" min=\"2026-10-01\" onValueChange={setDay} />\r\n</Field>\r\n```",
+      "description": "A date field: type a date in the locale's short format (or ISO), or press\nthe calendar button to pick one from a `Calendar` in a popup dialog.\n\nThe value is an ISO date string (\"YYYY-MM-DD\"), so it never shifts with\ntime zones. The text field shows it in the locale's numeric format; on\nblur (or Enter), typed text is parsed and normalized, or rejected with an\ninline error. Inside a `Field`, label, hint, error, required, disabled,\nand invalid state are wired to the text input.\n\nThe popup is a modal `Popover` on the shared overlay layer stack, so\nEscape closes only the calendar, also inside a `Modal` or `Drawer`.\n\n```tsx\n<Field label=\"Game day\">\n  <DatePicker name=\"gameDay\" min=\"2026-10-01\" onValueChange={setDay} />\n</Field>\n```",
       "nativeElement": "input",
       "props": [
         {
@@ -6979,13 +7188,13 @@
           "name": "onInvalidInput",
           "type": "(error: DateInputError) => void",
           "required": false,
-          "description": "Called when the user leaves the field with text that isn't a valid,\r\nallowed date. Use it to set your own `Field` error."
+          "description": "Called when the user leaves the field with text that isn't a valid,\nallowed date. Use it to set your own `Field` error."
         },
         {
           "name": "invalidMessage",
           "type": "ReactNode | ((error: DateInputError) => ReactNode)",
           "required": false,
-          "description": "Message shown under the field when typed text is rejected. Pass a\r\nfunction to word it per reason, or `null` to show none (for example\r\nwhen you show a `Field` error from `onInvalidInput` instead).\r\nDefaults to \"Enter a date as MM/DD/YYYY.\" and range/availability messages."
+          "description": "Message shown under the field when typed text is rejected. Pass a\nfunction to word it per reason, or `null` to show none (for example\nwhen you show a `Field` error from `onInvalidInput` instead).\nDefaults to \"Enter a date as MM/DD/YYYY.\" and range/availability messages."
         },
         {
           "name": "chooseDateLabel",
@@ -7109,7 +7318,7 @@
       "category": "forms",
       "folder": "DatePicker",
       "import": "import { DateRangePicker } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A date range field: two text fields (start and end) typed in the locale's\r\nshort format, plus a calendar button that opens a range `Calendar` (two\r\nmonths by default) in a modal popup.\r\n\r\nThe value is `{ start, end }` with ISO dates (\"YYYY-MM-DD\"). In the\r\ncalendar, the first pick sets the start and the second the end; the range\r\nis committed (and the popup closes) only when both are picked, so Escape\r\nafter one pick changes nothing. Typed dates are validated like\r\n`DatePicker`'s, plus an end before the start is rejected.\r\n\r\nAccessibility: the pair is a `role=\"group\"` named by the `Field` label\r\n(or `aria-label`); each field is named by that label plus its own\r\nvisible label (\"Season dates, Start date\"). Field hint, error, required, disabled, and\r\ninvalid state reach both fields. Errors are announced politely.\r\n\r\n```tsx\r\n<Field label=\"Season dates\">\r\n  <DateRangePicker startName=\"from\" endName=\"to\" onValueChange={setRange} />\r\n</Field>\r\n```",
+      "description": "A date range field: two text fields (start and end) typed in the locale's\nshort format, plus a calendar button that opens a range `Calendar` (two\nmonths by default) in a modal popup.\n\nThe value is `{ start, end }` with ISO dates (\"YYYY-MM-DD\"). In the\ncalendar, the first pick sets the start and the second the end; the range\nis committed (and the popup closes) only when both are picked, so Escape\nafter one pick changes nothing. Typed dates are validated like\n`DatePicker`'s, plus an end before the start is rejected.\n\nAccessibility: the pair is a `role=\"group\"` named by the `Field` label\n(or `aria-label`); each field is named by that label plus its own\nvisible label (\"Season dates, Start date\"). Field hint, error, required, disabled, and\ninvalid state reach both fields. Errors are announced politely.\n\n```tsx\n<Field label=\"Season dates\">\n  <DateRangePicker startName=\"from\" endName=\"to\" onValueChange={setRange} />\n</Field>\n```",
       "props": [
         {
           "name": "value",
@@ -7127,7 +7336,7 @@
           "name": "onValueChange",
           "type": "(value: DateRange) => void",
           "required": false,
-          "description": "Called with the new range when the user completes a pick in the\r\ncalendar, or types a date in either field and leaves it. Typed text that\r\nisn't a valid, allowed date clears that end."
+          "description": "Called with the new range when the user completes a pick in the\ncalendar, or types a date in either field and leaves it. Typed text that\nisn't a valid, allowed date clears that end."
         },
         {
           "name": "min",
@@ -7214,7 +7423,7 @@
           "name": "invalidMessage",
           "type": "ReactNode | ((error: DateRangeInputError) => ReactNode)",
           "required": false,
-          "description": "Message shown under the fields when typed text is rejected. Pass a\r\nfunction to word it per reason, or `null` to show none."
+          "description": "Message shown under the fields when typed text is rejected. Pass a\nfunction to word it per reason, or `null` to show none."
         },
         {
           "name": "startLabel",
@@ -7342,7 +7551,7 @@
       "category": "forms",
       "folder": "DateTimePicker",
       "import": "import { DateTimePicker } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A date and a time together: a `DatePicker` and a `TimePicker` side by\r\nside, with one value, \"YYYY-MM-DDTHH:mm\" (the format of a native\r\n`datetime-local` input, with no time zone). Each half keeps its full\r\nbehavior: typed dates in the locale's format or the calendar popup, typed\r\ntimes in any common form or the list of times.\r\n\r\n`min` and `max` limit the calendar by their dates, and the time list by\r\ntheir times on those boundary dates. `defaultTime` fills the time when a\r\ndate is picked first.\r\n\r\nAccessibility: the pair is a `role=\"group\"` named by the `Field` label\r\n(or `aria-label`); each field is named by that label plus its own\r\nvisible label (\"Tip-off, Date\", \"Tip-off, Time\"). Field hint, error,\r\nrequired, disabled, and invalid state reach both.\r\n\r\n```tsx\r\n<Field label=\"Tip-off\">\r\n  <DateTimePicker name=\"tipoff\" defaultTime=\"19:00\" step={15} />\r\n</Field>\r\n```",
+      "description": "A date and a time together: a `DatePicker` and a `TimePicker` side by\nside, with one value, \"YYYY-MM-DDTHH:mm\" (the format of a native\n`datetime-local` input, with no time zone). Each half keeps its full\nbehavior: typed dates in the locale's format or the calendar popup, typed\ntimes in any common form or the list of times.\n\n`min` and `max` limit the calendar by their dates, and the time list by\ntheir times on those boundary dates. `defaultTime` fills the time when a\ndate is picked first.\n\nAccessibility: the pair is a `role=\"group\"` named by the `Field` label\n(or `aria-label`); each field is named by that label plus its own\nvisible label (\"Tip-off, Date\", \"Tip-off, Time\"). Field hint, error,\nrequired, disabled, and invalid state reach both.\n\n```tsx\n<Field label=\"Tip-off\">\n  <DateTimePicker name=\"tipoff\" defaultTime=\"19:00\" step={15} />\n</Field>\n```",
       "props": [
         {
           "name": "value",
@@ -7360,7 +7569,7 @@
           "name": "onValueChange",
           "type": "(value: ISODateTime | null) => void",
           "required": false,
-          "description": "Called with \"YYYY-MM-DDTHH:mm\" once both a date and a time are set, and\r\nwith null when either is cleared or invalid."
+          "description": "Called with \"YYYY-MM-DDTHH:mm\" once both a date and a time are set, and\nwith null when either is cleared or invalid."
         },
         {
           "name": "min",
@@ -7397,7 +7606,7 @@
           "name": "defaultTime",
           "type": "ISOTime",
           "required": false,
-          "description": "Time filled in when a date is picked while the time is empty (e.g.\r\n\"09:00\"), so one pick gives a complete value. Without it, the value\r\nstays null until a time is set."
+          "description": "Time filled in when a date is picked while the time is empty (e.g.\n\"09:00\"), so one pick gives a complete value. Without it, the value\nstays null until a time is set."
         },
         {
           "name": "locale",
@@ -7545,7 +7754,7 @@
         },
         {
           "name": "Min And Max",
-          "description": "`min` and `max` limit the calendar by date, and the time list on the\r\nboundary dates only: on Oct 22 the list starts at 6:00 PM; on other days\r\nit's the whole day."
+          "description": "`min` and `max` limit the calendar by date, and the time list on the\nboundary dates only: on Oct 22 the list starts at 6:00 PM; on other days\nit's the whole day."
         },
         {
           "name": "Controlled",
@@ -9580,7 +9789,7 @@
       "category": "forms",
       "folder": "Rating",
       "import": "import { Rating } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "An editable star (or custom icon) rating, built on real native radios\r\n(visually hidden but focusable, sharing one `name`) inside\r\n`role=\"radiogroup\"`. Tab lands on the selected value (or the first option),\r\narrow keys move and select, and the value submits with a form. Supports\r\nhalf values, clearing, hover preview, and Field/Fieldset wiring.",
+      "description": "An editable star (or custom icon) rating, built on real native radios\n(visually hidden but focusable, sharing one `name`) inside\n`role=\"radiogroup\"`. Tab lands on the selected value (or the first option),\narrow keys move and select, and the value submits with a form. Supports\nhalf values, clearing, hover preview, and Field/Fieldset wiring.",
       "nativeElement": "div",
       "props": [
         {
@@ -9595,21 +9804,21 @@
           "type": "Size",
           "required": false,
           "default": "\"md\"",
-          "description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\r\nis still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.\r\nFalls back to a surrounding Field's size."
+          "description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\nis still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.\nFalls back to a surrounding Field's size."
         },
         {
           "name": "tone",
           "type": "Tone",
           "required": false,
           "default": "\"warning\"",
-          "description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\r\n(3:1 on bg, surface, and raised surfaces in both themes). Empty icons are\r\noutlines in `--color-border-strong`, so filled vs empty differs by shape too."
+          "description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\n(3:1 on bg, surface, and raised surfaces in both themes). Empty icons are\noutlines in `--color-border-strong`, so filled vs empty differs by shape too."
         },
         {
           "name": "icon",
           "type": "ReactNode",
           "required": false,
           "default": "<StarFilledIcon />",
-          "description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\r\nicon box. Keep it visibly different in *shape* from `emptyIcon`\r\n(filled vs outline), not only in color."
+          "description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\nicon box. Keep it visibly different in *shape* from `emptyIcon`\n(filled vs outline), not only in color."
         },
         {
           "name": "emptyIcon",
@@ -9648,20 +9857,20 @@
           "type": "RatingPrecision",
           "required": false,
           "default": "1",
-          "description": "Step between values. `0.5` renders two radios per icon (left and right\r\nhalves). Each half hit area is kept at least 24px wide, so half-precision\r\nicons sit in 48px-wide cells at every size."
+          "description": "Step between values. `0.5` renders two radios per icon (left and right\nhalves). Each half hit area is kept at least 24px wide, so half-precision\nicons sit in 48px-wide cells at every size."
         },
         {
           "name": "allowZero",
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "Adds a \"0\" option before the first icon, so zero is a real rating\r\n(\"0 out of 5\"), distinct from no rating (`null`). It is the first radio,\r\nso ArrowLeft from the lowest icon reaches it."
+          "description": "Adds a \"0\" option before the first icon, so zero is a real rating\n(\"0 out of 5\"), distinct from no rating (`null`). It is the first radio,\nso ArrowLeft from the lowest icon reaches it."
         },
         {
           "name": "allowClear",
           "type": "boolean",
           "required": false,
-          "description": "Let the user remove their rating: clicking (or pressing Space on) the\r\nselected value again, or pressing Delete / Backspace, resets it to `null`."
+          "description": "Let the user remove their rating: clicking (or pressing Space on) the\nselected value again, or pressing Delete / Backspace, resets it to `null`."
         },
         {
           "name": "clearHint",
@@ -9687,7 +9896,7 @@
           "name": "readOnly",
           "type": "boolean",
           "required": false,
-          "description": "Show the value without allowing changes. Renders the `RatingDisplay`\r\nlook (a single `role=\"img\"`, not focusable) plus a hidden input so the\r\nvalue still submits with a form when `name` is set."
+          "description": "Show the value without allowing changes. Renders the `RatingDisplay`\nlook (a single `role=\"img\"`, not focusable) plus a hidden input so the\nvalue still submits with a form when `name` is set."
         },
         {
           "name": "invalid",
@@ -9732,7 +9941,7 @@
           "name": "label",
           "type": "ReactNode",
           "required": false,
-          "description": "Visible label, used when the rating stands alone. Ignored inside a\r\n`Field`/`Fieldset`, whose label or legend names it. Without a label,\r\npass `aria-label` or `aria-labelledby`."
+          "description": "Visible label, used when the rating stands alone. Ignored inside a\n`Field`/`Fieldset`, whose label or legend names it. Without a label,\npass `aria-label` or `aria-labelledby`."
         },
         {
           "name": "description",
@@ -9754,7 +9963,7 @@
         },
         {
           "name": "Zero to five, in halves",
-          "description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\r\n(not the same as no rating, `null`). With `precision={0.5}`, every value\r\nfrom 0 to 5 in halves can be picked by pointer or keyboard."
+          "description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\n(not the same as no rating, `null`). With `precision={0.5}`, every value\nfrom 0 to 5 in halves can be picked by pointer or keyboard."
         },
         {
           "name": "Zero (read-only)",
@@ -9815,7 +10024,7 @@
       "category": "forms",
       "folder": "Rating",
       "import": "import { RatingDisplay } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A read-only rating: a row of icons with fractional fill, exposed to\r\nassistive tech as a single `role=\"img\"` named \"Rated 4.5 out of 5\",\r\noptionally followed by the value (\"4.5 / 5\") and a review count.\r\nNot focusable. For an editable rating use `Rating`.",
+      "description": "A read-only rating: a row of icons with fractional fill, exposed to\nassistive tech as a single `role=\"img\"` named \"Rated 4.5 out of 5\",\noptionally followed by the value (\"4.5 / 5\") and a review count.\nNot focusable. For an editable rating use `Rating`.",
       "nativeElement": "span",
       "props": [
         {
@@ -9830,21 +10039,21 @@
           "type": "Size",
           "required": false,
           "default": "\"md\"",
-          "description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\r\nis still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.\r\nFalls back to a surrounding Field's size."
+          "description": "Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target\nis still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.\nFalls back to a surrounding Field's size."
         },
         {
           "name": "tone",
           "type": "Tone",
           "required": false,
           "default": "\"warning\"",
-          "description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\r\n(3:1 on bg, surface, and raised surfaces in both themes). Empty icons are\r\noutlines in `--color-border-strong`, so filled vs empty differs by shape too."
+          "description": "Color of the filled icons. Uses each tone's verified `--color-{tone}-border`\n(3:1 on bg, surface, and raised surfaces in both themes). Empty icons are\noutlines in `--color-border-strong`, so filled vs empty differs by shape too."
         },
         {
           "name": "icon",
           "type": "ReactNode",
           "required": false,
           "default": "<StarFilledIcon />",
-          "description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\r\nicon box. Keep it visibly different in *shape* from `emptyIcon`\r\n(filled vs outline), not only in color."
+          "description": "Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the\nicon box. Keep it visibly different in *shape* from `emptyIcon`\n(filled vs outline), not only in color."
         },
         {
           "name": "emptyIcon",
@@ -9883,7 +10092,7 @@
           "type": "(value: number, max: number) => string",
           "required": false,
           "default": "\"Rated 4.5 out of 5\"",
-          "description": "Accessible name of the icon row (`role=\"img\"`). Localize it here.\r\nAn explicit `aria-label` prop wins."
+          "description": "Accessible name of the icon row (`role=\"img\"`). Localize it here.\nAn explicit `aria-label` prop wins."
         }
       ],
       "subcomponents": [],
@@ -9899,7 +10108,7 @@
         },
         {
           "name": "Zero to five, in halves",
-          "description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\r\n(not the same as no rating, `null`). With `precision={0.5}`, every value\r\nfrom 0 to 5 in halves can be picked by pointer or keyboard."
+          "description": "`allowZero` adds a \"0\" option before the stars, so 0/5 is a real rating\n(not the same as no rating, `null`). With `precision={0.5}`, every value\nfrom 0 to 5 in halves can be picked by pointer or keyboard."
         },
         {
           "name": "Zero (read-only)",
@@ -10989,7 +11198,7 @@
       "category": "forms",
       "folder": "TagInput",
       "import": "import { TagInput } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A text field that turns entries into removable tags (chips). Type and\r\npress Enter (or a delimiter such as a comma) to add; paste \"a, b, c\" to\r\nadd several at once.\r\n\r\nKeyboard:\r\n- Enter / delimiters (and Tab with `addOnTab`): add the typed text.\r\n- Backspace in an empty input, or Left Arrow with the caret at the\r\n  start: move focus to the last tag's remove button. A second Backspace\r\n  (or Delete) removes that tag and focus returns to the next tag, or the\r\n  input. This two-step pattern avoids deleting a tag by accident and\r\n  lets screen readers announce which tag is about to be removed.\r\n- On a tag: Left / Right Arrow move between tags and back to the input;\r\n  Home / End jump to the first tag / the input; Backspace or Delete removes.\r\n\r\nInside a `Field`, the label, hint, error, required, disabled, read-only,\r\nand size are wired automatically. `ref` points at the `<input>`;\r\nnative input props are spread onto it, while `className` and `style` go\r\nto the outer wrapper.\r\n\r\n```tsx\r\n<Field label=\"Skills\">\r\n  <TagInput defaultValue={[\"Defense\"]} placeholder=\"Add a skill\" />\r\n</Field>\r\n```",
+      "description": "A text field that turns entries into removable tags (chips). Type and\npress Enter (or a delimiter such as a comma) to add; paste \"a, b, c\" to\nadd several at once.\n\nKeyboard:\n- Enter / delimiters (and Tab with `addOnTab`): add the typed text.\n- Backspace in an empty input, or Left Arrow with the caret at the\n  start: move focus to the last tag's remove button. A second Backspace\n  (or Delete) removes that tag and focus returns to the next tag, or the\n  input. This two-step pattern avoids deleting a tag by accident and\n  lets screen readers announce which tag is about to be removed.\n- On a tag: Left / Right Arrow move between tags and back to the input;\n  Home / End jump to the first tag / the input; Backspace or Delete removes.\n\nInside a `Field`, the label, hint, error, required, disabled, read-only,\nand size are wired automatically. `ref` points at the `<input>`;\nnative input props are spread onto it, while `className` and `style` go\nto the outer wrapper.\n\n```tsx\n<Field label=\"Skills\">\n  <TagInput defaultValue={[\"Defense\"]} placeholder=\"Add a skill\" />\n</Field>\n```",
       "nativeElement": "input",
       "props": [
         {
@@ -11035,14 +11244,14 @@
           "type": "string[]",
           "required": false,
           "default": "[\",\"]",
-          "description": "Strings that end a tag as they are typed, in addition to Enter. Pasted\r\ntext is also split on them (and on line breaks)."
+          "description": "Strings that end a tag as they are typed, in addition to Enter. Pasted\ntext is also split on them (and on line breaks)."
         },
         {
           "name": "addOnTab",
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "Tab adds the typed text as a tag (focus stays in the input). Tab still\r\nmoves focus normally when the input is empty or the text is rejected,\r\nso it never traps the keyboard."
+          "description": "Tab adds the typed text as a tag (focus stays in the input). Tab still\nmoves focus normally when the input is empty or the text is rejected,\nso it never traps the keyboard."
         },
         {
           "name": "addOnBlur",
@@ -11056,19 +11265,19 @@
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "Allow the same tag more than once. When `false`, entering an existing\r\ntag highlights it briefly and announces \"{tag} is already added\".\r\nComparison is exact after `transform` (use `transform` to lowercase for\r\ncase-insensitive tags)."
+          "description": "Allow the same tag more than once. When `false`, entering an existing\ntag highlights it briefly and announces \"{tag} is already added\".\nComparison is exact after `transform` (use `transform` to lowercase for\ncase-insensitive tags)."
         },
         {
           "name": "maxTags",
           "type": "number",
           "required": false,
-          "description": "Maximum number of tags. When reached, the input becomes read-only, the\r\nplaceholder hides, and \"Maximum of N tags reached\" is announced and\r\nadded to the input's description."
+          "description": "Maximum number of tags. When reached, the input becomes read-only, the\nplaceholder hides, and \"Maximum of N tags reached\" is announced and\nadded to the input's description."
         },
         {
           "name": "validate",
           "type": "(tag: string) => boolean | string",
           "required": false,
-          "description": "Checks a tag before it is added (after trimming and `transform`).\r\nReturn `true` to accept, `false` to reject with a generic message, or a\r\nstring to reject with that message. The message is shown under the\r\nfield, linked with `aria-describedby`, and announced; the rejected text\r\nstays in the input so it can be fixed."
+          "description": "Checks a tag before it is added (after trimming and `transform`).\nReturn `true` to accept, `false` to reject with a generic message, or a\nstring to reject with that message. The message is shown under the\nfield, linked with `aria-describedby`, and announced; the rejected text\nstays in the input so it can be fixed."
         },
         {
           "name": "transform",
@@ -11109,7 +11318,7 @@
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "Requires at least one tag. Sets `aria-required` on the input and a\r\nnative validation message (`messages.required`) while there are no\r\ntags, so form submission is blocked. Inherits from a surrounding `Field`."
+          "description": "Requires at least one tag. Sets `aria-required` on the input and a\nnative validation message (`messages.required`) while there are no\ntags, so form submission is blocked. Inherits from a surrounding `Field`."
         },
         {
           "name": "placeholder",
@@ -11121,7 +11330,7 @@
           "name": "name",
           "type": "string",
           "required": false,
-          "description": "Form field name. Renders one `<input type=\"hidden\" name={name}>` per\r\ntag, so `formData.getAll(name)` returns the tags as an array."
+          "description": "Form field name. Renders one `<input type=\"hidden\" name={name}>` per\ntag, so `formData.getAll(name)` returns the tags as an array."
         },
         {
           "name": "chipVariant",
@@ -11148,13 +11357,13 @@
           "name": "tagListLabel",
           "type": "string",
           "required": false,
-          "description": "Accessible name of the tag list. Defaults to the surrounding `Field`'s\r\nlabel (or the input's `aria-labelledby`), else \"Tags\"."
+          "description": "Accessible name of the tag list. Defaults to the surrounding `Field`'s\nlabel (or the input's `aria-labelledby`), else \"Tags\"."
         },
         {
           "name": "instructions",
           "type": "string",
           "required": false,
-          "description": "Visually hidden keyboard instructions, linked to the input with\r\n`aria-describedby`. Generated from `delimiters` and `addOnTab` by default."
+          "description": "Visually hidden keyboard instructions, linked to the input with\n`aria-describedby`. Generated from `delimiters` and `addOnTab` by default."
         },
         {
           "name": "messages",
@@ -11409,7 +11618,7 @@
       "category": "forms",
       "folder": "TimePicker",
       "import": "import { TimePicker } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A time field: type a time in almost any form (\"2:30 pm\", \"1430\", \"230p\",\r\n\"14h30\", the locale's own format), or pick one from a list of times\r\n`step` minutes apart. Built on `Combobox`, so the list follows the\r\nWAI-ARIA combobox pattern: ArrowDown opens it on the selected time,\r\narrows move, Enter picks, Escape closes, and typing filters it.\r\n\r\nThe value is a 24-hour \"HH:mm\" string, the same as a native\r\n`<input type=\"time\">`, so it never shifts with time zones. The field\r\nshows it in the locale's clock (12- or 24-hour, override with\r\n`hourCycle`). On blur (or Enter), typed text is parsed and normalized, or\r\nrejected with an inline, announced error. Inside a `Field`, label, hint,\r\nerror, required, disabled, and invalid state are wired to the input.\r\n\r\n```tsx\r\n<Field label=\"Tip-off\">\r\n  <TimePicker name=\"tipoff\" min=\"08:00\" max=\"22:00\" step={15} />\r\n</Field>\r\n```",
+      "description": "A time field: type a time in almost any form (\"2:30 pm\", \"1430\", \"230p\",\n\"14h30\", the locale's own format), or pick one from a list of times\n`step` minutes apart. Built on `Combobox`, so the list follows the\nWAI-ARIA combobox pattern: ArrowDown opens it on the selected time,\narrows move, Enter picks, Escape closes, and typing filters it.\n\nThe value is a 24-hour \"HH:mm\" string, the same as a native\n`<input type=\"time\">`, so it never shifts with time zones. The field\nshows it in the locale's clock (12- or 24-hour, override with\n`hourCycle`). On blur (or Enter), typed text is parsed and normalized, or\nrejected with an inline, announced error. Inside a `Field`, label, hint,\nerror, required, disabled, and invalid state are wired to the input.\n\n```tsx\n<Field label=\"Tip-off\">\n  <TimePicker name=\"tipoff\" min=\"08:00\" max=\"22:00\" step={15} />\n</Field>\n```",
       "props": [
         {
           "name": "value",
@@ -11427,7 +11636,7 @@
           "name": "onValueChange",
           "type": "(value: ISOTime | null) => void",
           "required": false,
-          "description": "Called with the new time (\"HH:mm\") or null when the user picks one from\r\nthe list, types one and leaves the field, or clears it. Typed text that\r\nisn't a valid, allowed time sets the value to null."
+          "description": "Called with the new time (\"HH:mm\") or null when the user picks one from\nthe list, types one and leaves the field, or clears it. Typed text that\nisn't a valid, allowed time sets the value to null."
         },
         {
           "name": "min",
@@ -11535,13 +11744,13 @@
           "name": "onInvalidInput",
           "type": "(error: TimeInputError) => void",
           "required": false,
-          "description": "Called when the user leaves the field with text that isn't a valid,\r\nallowed time. Use it to set your own `Field` error."
+          "description": "Called when the user leaves the field with text that isn't a valid,\nallowed time. Use it to set your own `Field` error."
         },
         {
           "name": "invalidMessage",
           "type": "ReactNode | ((error: TimeInputError) => ReactNode)",
           "required": false,
-          "description": "Message shown under the field when typed text is rejected. Pass a\r\nfunction to word it per reason, or `null` to show none (when you show a\r\n`Field` error from `onInvalidInput` instead)."
+          "description": "Message shown under the field when typed text is rejected. Pass a\nfunction to word it per reason, or `null` to show none (when you show a\n`Field` error from `onInvalidInput` instead)."
         },
         {
           "name": "formatDescription",
@@ -11622,7 +11831,7 @@
         },
         {
           "name": "Validation",
-          "description": "Text it can't read, or a time outside `min` / `max`, is flagged inline\r\nand announced politely; the value becomes null. `onInvalidInput` lets you\r\nshow your own `Field` error instead (with `invalidMessage={null}`)."
+          "description": "Text it can't read, or a time outside `min` / `max`, is flagged inline\nand announced politely; the value becomes null. `onInvalidInput` lets you\nshow your own `Field` error instead (with `invalidMessage={null}`)."
         },
         {
           "name": "Typed Formats",
@@ -13146,7 +13355,7 @@
       "stories": [
         {
           "name": "Playground",
-          "description": "A collapsible playbook beside the court. Keyboard: Tab to the handle;\r\n←/→ resize, Home/End jump to the limits, Enter collapses and restores."
+          "description": "A collapsible playbook beside the court. Keyboard: Tab to the handle;\n←/→ resize, Home/End jump to the limits, Enter collapses and restores."
         },
         {
           "name": "Pointer Resize",
@@ -13175,7 +13384,7 @@
       "category": "layout",
       "folder": "ScrollArea",
       "import": "import { ScrollArea } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A scrolling region with slim, on-brand scrollbars that work the same in\r\nevery browser. Scrolling itself stays native (wheel, touch, trackpad\r\nmomentum, keyboard, find-in-page, scroll anchoring); only the look of the\r\nbars is custom. The thumbs can be dragged, and pressing the track pages\r\ntoward the press.\r\n\r\nAccessibility: while the content overflows, the viewport is focusable\r\n(`tabIndex=0`) so keyboard users can scroll it with the arrow keys, Page\r\nUp / Page Down, and Home / End. Give it a name with `aria-label` or\r\n`aria-labelledby`, which also makes it a `region` landmark. The custom\r\nbars are hidden from assistive technology (they duplicate native\r\nscrolling). Edge shadows show there is more to see. In Windows High\r\nContrast mode the native scrollbars come back.\r\n\r\n```tsx\r\n<ScrollArea maxHeight=\"20rem\" aria-label=\"Roster\">\r\n  <List>…</List>\r\n</ScrollArea>\r\n```",
+      "description": "A scrolling region with slim, on-brand scrollbars that work the same in\nevery browser. Scrolling itself stays native (wheel, touch, trackpad\nmomentum, keyboard, find-in-page, scroll anchoring); only the look of the\nbars is custom. The thumbs can be dragged, and pressing the track pages\ntoward the press.\n\nAccessibility: while the content overflows, the viewport is focusable\n(`tabIndex=0`) so keyboard users can scroll it with the arrow keys, Page\nUp / Page Down, and Home / End. Give it a name with `aria-label` or\n`aria-labelledby`, which also makes it a `region` landmark. The custom\nbars are hidden from assistive technology (they duplicate native\nscrolling). Edge shadows show there is more to see. In Windows High\nContrast mode the native scrollbars come back.\n\n```tsx\n<ScrollArea maxHeight=\"20rem\" aria-label=\"Roster\">\n  <List>…</List>\n</ScrollArea>\n```",
       "nativeElement": "div",
       "props": [
         {
@@ -13216,7 +13425,7 @@
           "type": "boolean",
           "required": false,
           "default": "true",
-          "description": "Fade the edges where more content is hidden, so it's clear the area\r\nscrolls even before the scrollbar is noticed."
+          "description": "Fade the edges where more content is hidden, so it's clear the area\nscrolls even before the scrollbar is noticed."
         },
         {
           "name": "hideDelay",
@@ -13229,7 +13438,7 @@
           "name": "viewportRef",
           "type": "Ref<HTMLDivElement>",
           "required": false,
-          "description": "Ref to the scrolling viewport element (to read or set `scrollTop`, or\r\ncall `scrollTo`). `ref` goes to the outer root."
+          "description": "Ref to the scrolling viewport element (to read or set `scrollTop`, or\ncall `scrollTo`). `ref` goes to the outer root."
         },
         {
           "name": "viewportClassName",
@@ -13273,7 +13482,7 @@
         },
         {
           "name": "All Types",
-          "description": "When the bars show, side by side. `auto` (default) shows them whenever\r\ncontent overflows; `hover` while the pointer is over the area, it's\r\nscrolling, or focus is inside; `scroll` only while scrolling; `always`\r\nkeeps the track even when nothing overflows."
+          "description": "When the bars show, side by side. `auto` (default) shows them whenever\ncontent overflows; `hover` while the pointer is over the area, it's\nscrolling, or focus is inside; `scroll` only while scrolling; `always`\nkeeps the track even when nothing overflows."
         },
         {
           "name": "Sizes",
@@ -13678,7 +13887,7 @@
       "category": "navigation",
       "folder": "ContextMenu",
       "import": "import { ContextMenu } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A menu that opens at the pointer on right-click (or a long press on touch\r\nscreens), for actions on the thing under the pointer. It is a `Menu` in\r\nevery other way: compose it from the same items (`ContextMenu.Item`,\r\n`.CheckboxItem`, `.RadioGroup` / `.RadioItem`, `.Group` / `.Label`,\r\n`.Separator`, and submenus), with the same keyboard model (arrows, Home /\r\nEnd, typeahead, Escape, Tab) and RTL support.\r\n\r\nKeyboard: with focus inside the trigger area, Shift+F10 or the Menu key\r\nopens the menu next to the focused element and focuses its first item.\r\nOn close, focus goes back to where it was.\r\n\r\nRight-click menus are hard to discover, and many touch screens and\r\nassistive technologies never open them, so offer the same actions\r\nsomewhere visible too (a `Menu` button, a toolbar). Treat the context\r\nmenu as a shortcut, never the only way.\r\n\r\n```tsx\r\n<ContextMenu>\r\n  <ContextMenu.Trigger>\r\n    <Card tabIndex={0}>Game film</Card>\r\n  </ContextMenu.Trigger>\r\n  <ContextMenu.Content>\r\n    <ContextMenu.Item onSelect={rename}>Rename</ContextMenu.Item>\r\n    <ContextMenu.Item tone=\"danger\" onSelect={remove}>Delete</ContextMenu.Item>\r\n  </ContextMenu.Content>\r\n</ContextMenu>\r\n```",
+      "description": "A menu that opens at the pointer on right-click (or a long press on touch\nscreens), for actions on the thing under the pointer. It is a `Menu` in\nevery other way: compose it from the same items (`ContextMenu.Item`,\n`.CheckboxItem`, `.RadioGroup` / `.RadioItem`, `.Group` / `.Label`,\n`.Separator`, and submenus), with the same keyboard model (arrows, Home /\nEnd, typeahead, Escape, Tab) and RTL support.\n\nKeyboard: with focus inside the trigger area, Shift+F10 or the Menu key\nopens the menu next to the focused element and focuses its first item.\nOn close, focus goes back to where it was.\n\nRight-click menus are hard to discover, and many touch screens and\nassistive technologies never open them, so offer the same actions\nsomewhere visible too (a `Menu` button, a toolbar). Treat the context\nmenu as a shortcut, never the only way.\n\n```tsx\n<ContextMenu>\n  <ContextMenu.Trigger>\n    <Card tabIndex={0}>Game film</Card>\n  </ContextMenu.Trigger>\n  <ContextMenu.Content>\n    <ContextMenu.Item onSelect={rename}>Rename</ContextMenu.Item>\n    <ContextMenu.Item tone=\"danger\" onSelect={remove}>Delete</ContextMenu.Item>\n  </ContextMenu.Content>\n</ContextMenu>\n```",
       "props": [
         {
           "name": "children",
@@ -13716,7 +13925,7 @@
           "name": "closeOnSelect",
           "type": "boolean",
           "required": false,
-          "description": "Default for every item's `closeOnSelect`. When unset, plain items close\r\nthe menu on selection; checkbox and radio items keep it open."
+          "description": "Default for every item's `closeOnSelect`. When unset, plain items close\nthe menu on selection; checkbox and radio items keep it open."
         },
         {
           "name": "disabled",
@@ -13737,7 +13946,7 @@
         {
           "name": "ContextMenu.Trigger",
           "exportedAs": "ContextMenuTrigger",
-          "description": "The area that opens the menu: right-click, a touch long press, or\r\nShift+F10 / the Menu key while focus is inside it. Make the area (or the\r\nitems in it) focusable so keyboard users can reach the menu.",
+          "description": "The area that opens the menu: right-click, a touch long press, or\nShift+F10 / the Menu key while focus is inside it. Make the area (or the\nitems in it) focusable so keyboard users can reach the menu.",
           "nativeElement": "div",
           "props": [
             {
@@ -13751,14 +13960,14 @@
               "type": "boolean",
               "required": false,
               "default": "false",
-              "description": "Clone the single child instead of wrapping it in a `div`. The child must\r\naccept `ref`, `className`, and the pointer, context menu, and key handlers."
+              "description": "Clone the single child instead of wrapping it in a `div`. The child must\naccept `ref`, `className`, and the pointer, context menu, and key handlers."
             }
           ]
         },
         {
           "name": "ContextMenu.Content",
           "exportedAs": "ContextMenuContent",
-          "description": "The floating menu (`role=\"menu\"`), opened at the pointer. Takes the same\r\nprops as `Menu.Content`; `placement` is relative to the pointer, and\r\nflips and clamps to stay on screen. @see MenuContent",
+          "description": "The floating menu (`role=\"menu\"`), opened at the pointer. Takes the same\nprops as `Menu.Content`; `placement` is relative to the pointer, and\nflips and clamps to stay on screen. @see MenuContent",
           "nativeElement": "div",
           "props": [
             {
@@ -13799,7 +14008,7 @@
               "name": "aria-label",
               "type": "string",
               "required": false,
-              "description": "Accessible name of the menu. Defaults to \"Context menu\" (translated);\r\nname it after what it acts on when you can (\"Game film actions\")."
+              "description": "Accessible name of the menu. Defaults to \"Context menu\" (translated);\nname it after what it acts on when you can (\"Game film actions\")."
             }
           ]
         },
@@ -14219,11 +14428,11 @@
       "stories": [
         {
           "name": "Playground",
-          "description": "Right-click the area (or long-press it on a touch screen). With the area\r\nfocused, Shift+F10 or the Menu key opens the menu on the first item."
+          "description": "Right-click the area (or long-press it on a touch screen). With the area\nfocused, Shift+F10 or the Menu key opens the menu on the first item."
         },
         {
           "name": "Keyboard",
-          "description": "Keyboard: Shift+F10 (or the Menu key) opens the menu next to the focused\r\nelement and focuses the first item. Escape closes it and focus goes back."
+          "description": "Keyboard: Shift+F10 (or the Menu key) opens the menu next to the focused\nelement and focuses the first item. Escape closes it and focus goes back."
         },
         {
           "name": "Long Press",
@@ -14407,7 +14616,7 @@
       "category": "navigation",
       "folder": "Menu",
       "import": "import { Menu } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A dropdown menu of actions or options, opened from a button (WAI-ARIA APG\r\n\"Menu Button\" and \"Menu\" patterns). Compose it from `Menu.Trigger`,\r\n`Menu.Content`, `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup` /\r\n`Menu.RadioItem`, `Menu.Group` / `Menu.Label`, `Menu.Separator`, and\r\nsubmenus (`Menu.Sub`, `Menu.SubTrigger`, `Menu.SubContent`).\r\n\r\nKeyboard: Enter, Space, or ArrowDown on the trigger opens the menu and\r\nfocuses the first item (ArrowUp: the last). Inside, ArrowUp/ArrowDown move\r\n(wrapping), Home/End jump, typing a character jumps to the next matching\r\nitem, Enter/Space activates, ArrowRight opens a submenu and ArrowLeft\r\ncloses it (mirrored in RTL), Escape closes the current level and returns\r\nfocus to its trigger, and Tab closes the whole menu.\r\n\r\nDisabled items stay focusable (`aria-disabled=\"true\"`) so keyboard and\r\nscreen reader users can still discover them, but can't be activated.\r\n\r\n```tsx\r\n<Menu>\r\n  <Menu.Trigger>Actions</Menu.Trigger>\r\n  <Menu.Content>\r\n    <Menu.Item onSelect={edit}>Edit</Menu.Item>\r\n    <Menu.Item tone=\"danger\" onSelect={remove}>Delete</Menu.Item>\r\n  </Menu.Content>\r\n</Menu>\r\n```",
+      "description": "A dropdown menu of actions or options, opened from a button (WAI-ARIA APG\n\"Menu Button\" and \"Menu\" patterns). Compose it from `Menu.Trigger`,\n`Menu.Content`, `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup` /\n`Menu.RadioItem`, `Menu.Group` / `Menu.Label`, `Menu.Separator`, and\nsubmenus (`Menu.Sub`, `Menu.SubTrigger`, `Menu.SubContent`).\n\nKeyboard: Enter, Space, or ArrowDown on the trigger opens the menu and\nfocuses the first item (ArrowUp: the last). Inside, ArrowUp/ArrowDown move\n(wrapping), Home/End jump, typing a character jumps to the next matching\nitem, Enter/Space activates, ArrowRight opens a submenu and ArrowLeft\ncloses it (mirrored in RTL), Escape closes the current level and returns\nfocus to its trigger, and Tab closes the whole menu.\n\nDisabled items stay focusable (`aria-disabled=\"true\"`) so keyboard and\nscreen reader users can still discover them, but can't be activated.\n\n```tsx\n<Menu>\n  <Menu.Trigger>Actions</Menu.Trigger>\n  <Menu.Content>\n    <Menu.Item onSelect={edit}>Edit</Menu.Item>\n    <Menu.Item tone=\"danger\" onSelect={remove}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>\n```",
       "props": [
         {
           "name": "children",
@@ -14445,14 +14654,14 @@
           "name": "closeOnSelect",
           "type": "boolean",
           "required": false,
-          "description": "Default for every item's `closeOnSelect`. When unset, plain items\r\n(`Menu.Item`) close the menu on selection, while checkbox and radio\r\nitems keep it open so several can be toggled. An item's own\r\n`closeOnSelect` always wins."
+          "description": "Default for every item's `closeOnSelect`. When unset, plain items\n(`Menu.Item`) close the menu on selection, while checkbox and radio\nitems keep it open so several can be toggled. An item's own\n`closeOnSelect` always wins."
         }
       ],
       "subcomponents": [
         {
           "name": "Menu.Trigger",
           "exportedAs": "MenuTrigger",
-          "description": "The button that opens the menu. Adds `aria-haspopup=\"menu\"`,\r\n`aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`\r\nto use it as-is, or plain content to get a default `Button`.",
+          "description": "The button that opens the menu. Adds `aria-haspopup=\"menu\"`,\n`aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`\nto use it as-is, or plain content to get a default `Button`.",
           "nativeElement": "button",
           "props": [
             {
@@ -14546,7 +14755,7 @@
               "name": "asChild",
               "type": "boolean",
               "required": false,
-              "description": "Clone the single child instead of wrapping it in a `Button`. Defaults to\r\n`true` when `children` is a single element. The child must be a\r\nfocusable button that accepts `ref`, `id`, `onClick`, `onKeyDown`, and `aria-*`."
+              "description": "Clone the single child instead of wrapping it in a `Button`. Defaults to\n`true` when `children` is a single element. The child must be a\nfocusable button that accepts `ref`, `id`, `onClick`, `onKeyDown`, and `aria-*`."
             }
           ]
         },
@@ -17514,7 +17723,7 @@
       "category": "overlays",
       "folder": "HoverCard",
       "import": "import { HoverCard } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A preview card that opens while the pointer rests on a link or button, or\r\nwhile it has keyboard focus: a player's profile behind their name, a page\r\npreview behind a link. Unlike `Tooltip`, the card can hold rich and\r\ninteractive content (links, buttons).\r\n\r\nMeets WCAG 1.4.13: the pointer can move onto the card, it stays open\r\nwhile hovered or focused, and Escape closes it. Keyboard users get it\r\ntoo: focusing the trigger opens it, Tab moves into the card's links, and\r\nTab past the last one continues to whatever follows the trigger.\r\n\r\nTouch screens have no hover, so the card never opens from a tap (the tap\r\nfollows the link). Treat it as a preview: everything in it must also be\r\nreachable from the page the trigger leads to.\r\n\r\n```tsx\r\n<HoverCard>\r\n  <HoverCard.Trigger>\r\n    <Link href=\"/players/23\">Jordan Reyes</Link>\r\n  </HoverCard.Trigger>\r\n  <HoverCard.Content>…profile…</HoverCard.Content>\r\n</HoverCard>\r\n```",
+      "description": "A preview card that opens while the pointer rests on a link or button, or\nwhile it has keyboard focus: a player's profile behind their name, a page\npreview behind a link. Unlike `Tooltip`, the card can hold rich and\ninteractive content (links, buttons).\n\nMeets WCAG 1.4.13: the pointer can move onto the card, it stays open\nwhile hovered or focused, and Escape closes it. Keyboard users get it\ntoo: focusing the trigger opens it, Tab moves into the card's links, and\nTab past the last one continues to whatever follows the trigger.\n\nTouch screens have no hover, so the card never opens from a tap (the tap\nfollows the link). Treat it as a preview: everything in it must also be\nreachable from the page the trigger leads to.\n\n```tsx\n<HoverCard>\n  <HoverCard.Trigger>\n    <Link href=\"/players/23\">Jordan Reyes</Link>\n  </HoverCard.Trigger>\n  <HoverCard.Content>…profile…</HoverCard.Content>\n</HoverCard>\n```",
       "props": [
         {
           "name": "children",
@@ -17553,7 +17762,7 @@
           "type": "number",
           "required": false,
           "default": "300",
-          "description": "Delay before closing after the pointer leaves the trigger or the card,\r\nin ms. Gives the pointer time to cross the gap onto the card."
+          "description": "Delay before closing after the pointer leaves the trigger or the card,\nin ms. Gives the pointer time to cross the gap onto the card."
         }
       ],
       "subcomponents": [
@@ -17566,14 +17775,14 @@
               "name": "children",
               "type": "ReactElement",
               "required": true,
-              "description": "Exactly one focusable element, usually a `Link` (or a button) that\r\naccepts `ref`, event handlers, and `data-*` props. Its own handlers and\r\nref are kept."
+              "description": "Exactly one focusable element, usually a `Link` (or a button) that\naccepts `ref`, event handlers, and `data-*` props. Its own handlers and\nref are kept."
             }
           ]
         },
         {
           "name": "HoverCard.Content",
           "exportedAs": "HoverCardContent",
-          "description": "The floating card. Rendered in a portal, positioned against the trigger\r\nwith flip and viewport clamping, and mounted only while open.",
+          "description": "The floating card. Rendered in a portal, positioned against the trigger\nwith flip and viewport clamping, and mounted only while open.",
           "nativeElement": "div",
           "props": [
             {
@@ -17618,11 +17827,11 @@
       "stories": [
         {
           "name": "Playground",
-          "description": "Rest the pointer on the name. The card opens after `openDelay`, stays\r\nopen while the pointer is on the link or the card, and closes\r\n`closeDelay` after it leaves both."
+          "description": "Rest the pointer on the name. The card opens after `openDelay`, stays\nopen while the pointer is on the link or the card, and closes\n`closeDelay` after it leaves both."
         },
         {
           "name": "Keyboard",
-          "description": "Keyboard: Tab to the link opens the card. Tab again moves into its links;\r\nTab past the last one continues to what follows the trigger and closes\r\nthe card. Escape closes it and returns focus to the link."
+          "description": "Keyboard: Tab to the link opens the card. Tab again moves into its links;\nTab past the last one continues to what follows the trigger and closes\nthe card. Escape closes it and returns focus to the link."
         },
         {
           "name": "Click Closes",
@@ -18786,6 +18995,10 @@
           "name": "Disabled",
           "description": ""
         },
+        {
+          "name": "Disabled but focusable",
+          "description": "`aria-disabled=\"true\"` instead of `disabled`: the button looks and acts\r\nunavailable (clicks are ignored) but stays focusable, so a tooltip or a\r\ncountdown (\"Resend code in 0:24\") can still be reached and read."
+        },
         {
           "name": "As Router Link",
           "description": "`as` renders your router's link with the button's styling, and its props\r\n(here `to`) are typed. While disabled or loading it becomes a plain\r\n`<a aria-disabled=\"true\">`, since a router link can't render without a\r\ndestination."
@@ -19718,7 +19931,7 @@
       "category": "utilities",
       "folder": "Theme",
       "import": "import { Theme } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "Applies a brand palette, accent, and/or color mode to everything inside\r\nit, through `data-brand`, `data-accent`, and `data-theme` (and, for hex\r\ncolors, the generated custom properties inline). Wrap the whole app, or\r\nany part of it; themes nest (a blue area inside a purple app, a dark panel\r\non a light page). Overlays opened inside (Popover, Menu, Modal, Tooltip,\r\nToast, ...) render elsewhere in the page but keep this theme. For the whole\r\npage you can instead set the attributes on `<html>`:\r\n`<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"volt\">`.",
+      "description": "Applies a brand palette, accent, and/or color mode to everything inside\r\nit, through `data-brand`, `data-accent`, and `data-theme` (and, for hex\r\ncolors, the generated custom properties inline). Wrap the whole app, or\r\nany part of it; themes nest (a blue area inside a purple app, a dark panel\r\non a light page). Overlays opened inside (Popover, Menu, Modal, Tooltip,\r\nToast, ...) render elsewhere in the page but keep this theme. For the whole\r\npage you can instead set the attributes on `<html>`:\r\n`<html data-theme=\"dark\" data-brand=\"purple\" data-accent=\"lime\">`.",
       "nativeElement": "div",
       "props": [
         {
@@ -19731,7 +19944,7 @@
           "name": "accent",
           "type": "ThemeAccent | BrandColor",
           "required": false,
-          "description": "The accent: the energetic highlight on badges, switches, progress bars,\r\nsliders, steppers, and active navigation. Leave unset to inherit; with no\r\naccent set anywhere, each brand uses its own (a bright shade of its hue).\r\n\r\n`\"volt\"` for the original yellow-green, `\"brand\"` to go back to the\r\nbrand's own inside an area with another accent, or any hex color for a\r\ncustom accent. Accents always carry dark text, so a color too dark for\r\nthat is lightened (same hue), with a console warning in development. An\r\naccent set here also holds inside nested brands."
+          "description": "The accent: the energetic highlight on badges, switches, progress bars,\r\nsliders, steppers, and active navigation. Leave unset to inherit; with no\r\naccent set anywhere, each brand uses its own (a bright shade of its hue).\r\n\r\n`\"lime\"` for the original bright yellow-green, `\"brand\"` to go back to the\r\nbrand's own inside an area with another accent, or any hex color for a\r\ncustom accent. Accents always carry dark text, so a color too dark for\r\nthat is lightened (same hue), with a console warning in development. An\r\naccent set here also holds inside nested brands."
         },
         {
           "name": "mode",
@@ -19784,7 +19997,7 @@
         },
         {
           "name": "Accents",
-          "description": "The accent (badges, switches, progress, sliders, active navigation) follows\r\nthe brand by default: a bright shade of its hue, always with dark text.\r\n`accent=\"volt\"` restores the original yellow-green, and any hex makes a\r\ncustom accent (kept accessible: too-dark colors are lightened)."
+          "description": "The accent (badges, switches, progress, sliders, active navigation) follows\r\nthe brand by default: a bright shade of its hue, always with dark text.\r\n`accent=\"lime\"` restores the original bright yellow-green, and any hex makes a\r\ncustom accent (kept accessible: too-dark colors are lightened)."
         },
         {
           "name": "Accent nesting",
@@ -19955,55 +20168,55 @@
     {
       "name": "useDisclosure",
       "signature": "useDisclosure(initial = false, options: UseDisclosureOptions = {}): [opened: boolean, handlers: DisclosureHandlers]",
-      "description": "Open/closed state for anything that shows and hides (a Modal, Drawer,\r\nPopover, a collapsible section), with stable handlers.\r\n\r\n```tsx\r\nconst [opened, { open, close }] = useDisclosure();\r\n<Button onClick={open}>Edit</Button>\r\n<Modal open={opened} onOpenChange={(next) => (next ? open() : close())}>…</Modal>\r\n```",
+      "description": "Open/closed state for anything that shows and hides (a Modal, Drawer,\nPopover, a collapsible section), with stable handlers.\n\n```tsx\nconst [opened, { open, close }] = useDisclosure();\n<Button onClick={open}>Edit</Button>\n<Modal open={opened} onOpenChange={(next) => (next ? open() : close())}>…</Modal>\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useToggle",
       "signature": "useToggle(values: readonly T[] = [false, true] as unknown as readonly T[]): [value: T, toggle: (value?: T) => void]",
-      "description": "Cycles through values: `[false, true]` by default (a boolean toggle), or\r\nany list (`[\"list\", \"grid\"]`). `toggle()` moves to the next value (wrapping);\r\n`toggle(value)` jumps to one.\r\n\r\n```tsx\r\nconst [view, toggleView] = useToggle([\"list\", \"grid\"] as const);\r\n<Button onClick={() => toggleView()}>Show {view === \"list\" ? \"grid\" : \"list\"}</Button>\r\n```",
+      "description": "Cycles through values: `[false, true]` by default (a boolean toggle), or\nany list (`[\"list\", \"grid\"]`). `toggle()` moves to the next value (wrapping);\n`toggle(value)` jumps to one.\n\n```tsx\nconst [view, toggleView] = useToggle([\"list\", \"grid\"] as const);\n<Button onClick={() => toggleView()}>Show {view === \"list\" ? \"grid\" : \"list\"}</Button>\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useDebouncedCallback",
       "signature": "useDebouncedCallback(callback: (...args: A) => void, wait: number, { leading = false, maxWait }: { leading?: boolean; maxWait?: number } = {}): ControlledCallback<A>",
-      "description": "A function that waits until calls stop for `wait` ms, then runs once with\r\nthe last arguments. Always calls the latest `callback`; a pending call is\r\ndropped on unmount. Use it to save, search, or validate after typing pauses.\r\n\r\n```tsx\r\nconst save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);\r\n<Textarea onChange={(e) => save(e.target.value)} />\r\n```",
+      "description": "A function that waits until calls stop for `wait` ms, then runs once with\nthe last arguments. Always calls the latest `callback`; a pending call is\ndropped on unmount. Use it to save, search, or validate after typing pauses.\n\n```tsx\nconst save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);\n<Textarea onChange={(e) => save(e.target.value)} />\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useThrottledCallback",
       "signature": "useThrottledCallback(callback: (...args: A) => void, wait: number): ControlledCallback<A>",
-      "description": "A function that runs at most once every `wait` ms: the first call runs\r\nright away, and the last call made during the wait runs when it ends.\r\nUse it for scroll, resize, or pointer-move handlers.\r\n\r\n```tsx\r\nconst track = useThrottledCallback((x: number) => setPosition(x), 100);\r\n```",
+      "description": "A function that runs at most once every `wait` ms: the first call runs\nright away, and the last call made during the wait runs when it ends.\nUse it for scroll, resize, or pointer-move handlers.\n\n```tsx\nconst track = useThrottledCallback((x: number) => setPosition(x), 100);\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useDebouncedValue",
       "signature": "useDebouncedValue(value: T, wait: number): [debounced: T, controls: { cancel: () => void; flush: () => void }]",
-      "description": "The value, updated only after it stops changing for `wait` ms. Use it to\r\nsearch or fetch as someone types, without a request per keystroke.\r\n\r\n```tsx\r\nconst [query, setQuery] = useState(\"\");\r\nconst [debouncedQuery] = useDebouncedValue(query, 300);\r\nuseEffect(() => { search(debouncedQuery); }, [debouncedQuery]);\r\n```",
+      "description": "The value, updated only after it stops changing for `wait` ms. Use it to\nsearch or fetch as someone types, without a request per keystroke.\n\n```tsx\nconst [query, setQuery] = useState(\"\");\nconst [debouncedQuery] = useDebouncedValue(query, 300);\nuseEffect(() => { search(debouncedQuery); }, [debouncedQuery]);\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useInterval",
       "signature": "useInterval(callback: () => void, delay: number | null): void",
-      "description": "Calls `callback` every `delay` ms while `delay` is a number; pass `null`\r\nto pause. Always calls the latest `callback`, and stops on unmount.\r\n\r\n```tsx\r\nconst [running, setRunning] = useState(true);\r\nuseInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);\r\n```",
+      "description": "Calls `callback` every `delay` ms while `delay` is a number; pass `null`\nto pause. Always calls the latest `callback`, and stops on unmount.\n\n```tsx\nconst [running, setRunning] = useState(true);\nuseInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useTimeout",
       "signature": "useTimeout(callback: () => void, delay: number | null): { clear: () => void; reset: () => void }",
-      "description": "Calls `callback` once, `delay` ms after mount (or after `delay` changes);\r\npass `null` to not schedule it. Returns `clear` and `reset` (restart the\r\nwait).\r\n\r\n```tsx\r\nconst { reset } = useTimeout(() => setSaved(false), 2000);\r\n```",
+      "description": "Calls `callback` once, `delay` ms after mount (or after `delay` changes);\npass `null` to not schedule it. Returns `clear` and `reset` (restart the\nwait).\n\n```tsx\nconst { reset } = useTimeout(() => setSaved(false), 2000);\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "usePrevious",
       "signature": "usePrevious(value: T): T | undefined",
-      "description": "The value from before its last change (undefined until it first changes).\r\n\r\n```tsx\r\nconst previousCount = usePrevious(count);\r\n```",
+      "description": "The value from before its last change (undefined until it first changes).\n\n```tsx\nconst previousCount = usePrevious(count);\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useLocalStorage",
       "signature": "useLocalStorage(key: string, defaultValue: T, options?: UseStorageOptions<T>)",
-      "description": "State saved in `localStorage` under `key`: it survives reloads and stays in\r\nsync across every component using the key and across browser tabs. Values\r\nare JSON by default. Returns `defaultValue` during server rendering, when\r\nnothing is stored, or when storage is blocked (it never throws).\r\n\r\n```tsx\r\nconst [density, setDensity] = useLocalStorage(\"table-density\", \"comfortable\");\r\n```",
+      "description": "State saved in `localStorage` under `key`: it survives reloads and stays in\nsync across every component using the key and across browser tabs. Values\nare JSON by default. Returns `defaultValue` during server rendering, when\nnothing is stored, or when storage is blocked (it never throws).\n\n```tsx\nconst [density, setDensity] = useLocalStorage(\"table-density\", \"comfortable\");\n```",
       "module": "hooks/index.ts"
     },
     {
@@ -20015,79 +20228,79 @@
     {
       "name": "useClipboard",
       "signature": "useClipboard({ timeout = 2000 }: { timeout?: number } = {}): UseClipboardResult",
-      "description": "Copies text to the clipboard, with a `copied` flag that resets after\r\n`timeout` ms. Uses the Clipboard API, with a fallback for browsers or\r\ncontexts that block it. Pair a visible \"Copied\" change with an\r\nannouncement (`announce`) so screen readers hear it too.\r\n\r\n```tsx\r\nconst { copy, copied } = useClipboard();\r\n<Button onClick={() => copy(inviteLink)}>{copied ? \"Copied\" : \"Copy link\"}</Button>\r\n```",
+      "description": "Copies text to the clipboard, with a `copied` flag that resets after\n`timeout` ms. Uses the Clipboard API, with a fallback for browsers or\ncontexts that block it. Pair a visible \"Copied\" change with an\nannouncement (`announce`) so screen readers hear it too.\n\n```tsx\nconst { copy, copied } = useClipboard();\n<Button onClick={() => copy(inviteLink)}>{copied ? \"Copied\" : \"Copy link\"}</Button>\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useHotkeys",
       "signature": "useHotkeys(hotkeys: HotkeyItem[], { enabled = true, target }: UseHotkeysOptions = {}): void",
-      "description": "Keyboard shortcuts for the whole page (or one element). `mod` is ⌘ on Mac\r\nand Ctrl elsewhere; separate alternatives with commas (`\"mod+k, /\"`).\r\nShortcuts with ⌘, Ctrl, or Alt work everywhere; plain keys don't fire while\r\ntyping in a text field. Show each shortcut to users (`Kbd`,\r\n`aria-keyshortcuts`) so it can be found, and avoid single-key shortcuts that\r\nscreen readers or browsers use, or let users turn them off (WCAG 2.1.4).\r\n\r\n```tsx\r\nuseHotkeys([\r\n  [\"mod+k\", () => setPaletteOpen(true)],\r\n  [\"/\", () => searchRef.current?.focus()],\r\n  [\"shift+?\", () => setHelpOpen(true)],\r\n]);\r\n```",
+      "description": "Keyboard shortcuts for the whole page (or one element). `mod` is ⌘ on Mac\nand Ctrl elsewhere; separate alternatives with commas (`\"mod+k, /\"`).\nShortcuts with ⌘, Ctrl, or Alt work everywhere; plain keys don't fire while\ntyping in a text field. Show each shortcut to users (`Kbd`,\n`aria-keyshortcuts`) so it can be found, and avoid single-key shortcuts that\nscreen readers or browsers use, or let users turn them off (WCAG 2.1.4).\n\n```tsx\nuseHotkeys([\n  [\"mod+k\", () => setPaletteOpen(true)],\n  [\"/\", () => searchRef.current?.focus()],\n  [\"shift+?\", () => setHelpOpen(true)],\n]);\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useEventListener",
       "signature": "useEventListener(type: K, handler: (event: WindowEventMap[K]) => void, target?: ListenerTarget | RefObject<HTMLElement | null>, options?: boolean | AddEventListenerOptions): void",
-      "description": "Adds an event listener and removes it on unmount. Always calls the latest\r\n`handler` (no re-subscribing when it changes). `target` defaults to\r\n`window`; pass an element, `document`, or a ref.\r\n\r\n```tsx\r\nuseEventListener(\"beforeunload\", (e) => { if (dirty) e.preventDefault(); });\r\nuseEventListener(\"scroll\", onScroll, panelRef, { passive: true });\r\n```",
+      "description": "Adds an event listener and removes it on unmount. Always calls the latest\n`handler` (no re-subscribing when it changes). `target` defaults to\n`window`; pass an element, `document`, or a ref.\n\n```tsx\nuseEventListener(\"beforeunload\", (e) => { if (dirty) e.preventDefault(); });\nuseEventListener(\"scroll\", onScroll, panelRef, { passive: true });\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useClickOutside",
       "signature": "useClickOutside(handler: (event: Event) => void, { enabled = true, ignore = [] }: { enabled?: boolean; ignore?: Array<RefObject<HTMLElement | null> | HTMLElement | null> } = {}): RefObject<T | null>",
-      "description": "Calls `handler` when a pointer press or a focus move lands outside the\r\nreturned ref's element (and outside any `ignore` elements). Use it for\r\ncustom popups; the library's own overlays already close on outside\r\npresses, through the shared layer stack.\r\n\r\n```tsx\r\nconst ref = useClickOutside<HTMLDivElement>(() => setOpen(false));\r\n<div ref={ref}>…</div>\r\n```",
+      "description": "Calls `handler` when a pointer press or a focus move lands outside the\nreturned ref's element (and outside any `ignore` elements). Use it for\ncustom popups; the library's own overlays already close on outside\npresses, through the shared layer stack.\n\n```tsx\nconst ref = useClickOutside<HTMLDivElement>(() => setOpen(false));\n<div ref={ref}>…</div>\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useIntersection",
       "signature": "useIntersection({ root, rootMargin, threshold = 0, once = false, }: UseIntersectionOptions = {}): { ref: (node: T | null) => void; entry: IntersectionObserverEntry | null; isIntersecting: boolean }",
-      "description": "Whether an element is in view (IntersectionObserver). Attach the returned\r\n`ref`; read `isIntersecting` or the full `entry`. Returns false during\r\nserver rendering.\r\n\r\n```tsx\r\nconst { ref, isIntersecting } = useIntersection<HTMLDivElement>({ rootMargin: \"200px\", once: true });\r\n<div ref={ref}>{isIntersecting && <HeavyChart />}</div>\r\n```",
+      "description": "Whether an element is in view (IntersectionObserver). Attach the returned\n`ref`; read `isIntersecting` or the full `entry`. Returns false during\nserver rendering.\n\n```tsx\nconst { ref, isIntersecting } = useIntersection<HTMLDivElement>({ rootMargin: \"200px\", once: true });\n<div ref={ref}>{isIntersecting && <HeavyChart />}</div>\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useElementSize",
       "signature": "useElementSize(): { ref: (node: T | null) => void; width: number; height: number; }",
-      "description": "An element's content-box size, kept current as it resizes\r\n(ResizeObserver). Attach the returned `ref`. Both are 0 until measured\r\n(and during server rendering).\r\n\r\n```tsx\r\nconst { ref, width } = useElementSize<HTMLDivElement>();\r\n<div ref={ref}>{width > 600 ? <WideLayout /> : <NarrowLayout />}</div>\r\n```",
+      "description": "An element's content-box size, kept current as it resizes\n(ResizeObserver). Attach the returned `ref`. Both are 0 until measured\n(and during server rendering).\n\n```tsx\nconst { ref, width } = useElementSize<HTMLDivElement>();\n<div ref={ref}>{width > 600 ? <WideLayout /> : <NarrowLayout />}</div>\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useHydrated",
       "signature": "useHydrated(): boolean",
-      "description": "False during server rendering and hydration, true after. Use it to render\r\nbrowser-only content (dates in the user's time zone, `window` values)\r\nwithout a hydration mismatch.\r\n\r\n```tsx\r\nconst hydrated = useHydrated();\r\nreturn <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;\r\n```",
+      "description": "False during server rendering and hydration, true after. Use it to render\nbrowser-only content (dates in the user's time zone, `window` values)\nwithout a hydration mismatch.\n\n```tsx\nconst hydrated = useHydrated();\nreturn <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;\n```",
       "module": "hooks/index.ts"
     },
     {
       "name": "useReducedMotion",
       "signature": "useReducedMotion(): boolean",
-      "description": "True when the user asked the system to reduce motion. The library's own\r\ntransitions already respect it (through the duration tokens); use this for\r\nmotion you drive from JavaScript (autoplay, scroll animations).",
+      "description": "True when the user asked the system to reduce motion. The library's own\ntransitions already respect it (through the duration tokens); use this for\nmotion you drive from JavaScript (autoplay, scroll animations).",
       "module": "hooks/index.ts"
     },
     {
       "name": "useColorScheme",
       "signature": "useColorScheme(): \"light\" | \"dark\"",
-      "description": "The system color scheme, `\"light\"` or `\"dark\"`, kept in sync (`\"light\"`\r\nduring server rendering). To follow it, pass it to `Theme mode`.",
+      "description": "The system color scheme, `\"light\"` or `\"dark\"`, kept in sync (`\"light\"`\nduring server rendering). To follow it, pass it to `Theme mode`.",
       "module": "hooks/index.ts"
     },
     {
       "name": "useOnline",
       "signature": "useOnline(): boolean",
-      "description": "Whether the browser has a network connection, kept in sync (true during\r\nserver rendering). Pair a visible change (a Banner) with a polite\r\nannouncement when it goes offline.",
+      "description": "Whether the browser has a network connection, kept in sync (true during\nserver rendering). Pair a visible change (a Banner) with a polite\nannouncement when it goes offline.",
       "module": "hooks/index.ts"
     },
     {
       "name": "useDocumentVisibility",
       "signature": "useDocumentVisibility(): DocumentVisibilityState",
-      "description": "`\"visible\"` or `\"hidden\"` (another tab, minimized window), kept in sync.\r\nUse it to pause polling, video, or animations in the background.",
+      "description": "`\"visible\"` or `\"hidden\"` (another tab, minimized window), kept in sync.\nUse it to pause polling, video, or animations in the background.",
       "module": "hooks/index.ts"
     },
     {
       "name": "useViewportSize",
       "signature": "useViewportSize(): { width: number; height: number }",
-      "description": "The viewport's width and height in CSS pixels, kept in sync (0 × 0 during\r\nserver rendering). For layout decisions, prefer CSS or `useMediaQuery`;\r\nuse this when you need the numbers.",
+      "description": "The viewport's width and height in CSS pixels, kept in sync (0 × 0 during\nserver rendering). For layout decisions, prefer CSS or `useMediaQuery`;\nuse this when you need the numbers.",
       "module": "hooks/index.ts"
     },
     {
       "name": "useVirtualizer",
       "signature": "useVirtualizer({ count, scrollElement, estimateSize, overscan = 6, gap = 0, paddingStart = 0, paddingEnd = 0, initialCount = 10, }: UseVirtualizerOptions): Virtualizer",
-      "description": "Headless list virtualization: renders only the items in view (plus\r\n`overscan`), so lists of 100,000 rows stay fast. Works with variable\r\nheights by measuring rendered items, and is SSR-safe (the server renders\r\nthe first `initialCount` items). `VirtualList` is built on it; use the\r\nhook directly for custom layouts.\r\n\r\n```tsx\r\nconst scrollRef = useRef<HTMLDivElement>(null);\r\nconst { virtualItems, totalSize, measureElement } = useVirtualizer({\r\n  count: rows.length, scrollElement: scrollRef, estimateSize: 48,\r\n});\r\n<div ref={scrollRef} style={{ overflow: \"auto\", height: 400 }}>\r\n  <div style={{ position: \"relative\", height: totalSize }}>\r\n    {virtualItems.map((item) => (\r\n      <div key={item.index} data-index={item.index} ref={measureElement}\r\n        style={{ position: \"absolute\", top: 0, width: \"100%\", transform: `translateY(${item.start}px)` }}>\r\n        {rows[item.index].name}\r\n      </div>\r\n    ))}\r\n  </div>\r\n</div>\r\n```",
+      "description": "Headless list virtualization: renders only the items in view (plus\n`overscan`), so lists of 100,000 rows stay fast. Works with variable\nheights by measuring rendered items, and is SSR-safe (the server renders\nthe first `initialCount` items). `VirtualList` is built on it; use the\nhook directly for custom layouts.\n\n```tsx\nconst scrollRef = useRef<HTMLDivElement>(null);\nconst { virtualItems, totalSize, measureElement } = useVirtualizer({\n  count: rows.length, scrollElement: scrollRef, estimateSize: 48,\n});\n<div ref={scrollRef} style={{ overflow: \"auto\", height: 400 }}>\n  <div style={{ position: \"relative\", height: totalSize }}>\n    {virtualItems.map((item) => (\n      <div key={item.index} data-index={item.index} ref={measureElement}\n        style={{ position: \"absolute\", top: 0, width: \"100%\", transform: `translateY(${item.start}px)` }}>\n        {rows[item.index].name}\n      </div>\n    ))}\n  </div>\n</div>\n```",
       "module": "hooks/index.ts"
     },
     {
@@ -20107,13 +20320,13 @@
     {
       "name": "getLocaleDirection",
       "signature": "getLocaleDirection(locale: string): \"ltr\" | \"rtl\"",
-      "description": "The writing direction of a BCP 47 locale: `\"rtl\"` for Arabic, Hebrew,\r\nPersian, Urdu, and other right-to-left languages and scripts, else `\"ltr\"`.",
+      "description": "The writing direction of a BCP 47 locale: `\"rtl\"` for Arabic, Hebrew,\nPersian, Urdu, and other right-to-left languages and scripts, else `\"ltr\"`.",
       "module": "i18n/index.ts"
     },
     {
       "name": "plural",
       "signature": "plural(locale: string): PluralFn",
-      "description": "Plural selector bound to a locale:\r\n\r\n```ts\r\nconst p = plural(\"ru\");\r\np(3, { one: \"# файл\", few: \"# файла\", many: \"# файлов\", other: \"# файла\" }); // \"3 файла\"\r\n```",
+      "description": "Plural selector bound to a locale:\n\n```ts\nconst p = plural(\"ru\");\np(3, { one: \"# файл\", few: \"# файла\", many: \"# файлов\", other: \"# файла\" }); // \"3 файла\"\n```",
       "module": "i18n/index.ts"
     },
     {
@@ -20125,7 +20338,7 @@
     {
       "name": "mergeMessages",
       "signature": "mergeMessages(base: Messages, override: PartialMessages | undefined): Messages",
-      "description": "Overlays partial messages on a complete set: missing strings keep the\r\nbase value. Functions and arrays replace whole.",
+      "description": "Overlays partial messages on a complete set: missing strings keep the\nbase value. Functions and arrays replace whole.",
       "module": "i18n/index.ts"
     },
     {
@@ -20221,7 +20434,7 @@
     {
       "name": "getHotkeyHandler",
       "signature": "getHotkeyHandler(hotkeys: HotkeyItem[])",
-      "description": "A `keydown` handler for one element (an editor, a list): pass it to\r\n`onKeyDown`. Same shortcut format as `useHotkeys`; shortcuts fire while\r\ntyping in that element.\r\n\r\n```tsx\r\n<Textarea onKeyDown={getHotkeyHandler([[\"mod+enter\", send]])} />\r\n```",
+      "description": "A `keydown` handler for one element (an editor, a list): pass it to\n`onKeyDown`. Same shortcut format as `useHotkeys`; shortcuts fire while\ntyping in that element.\n\n```tsx\n<Textarea onKeyDown={getHotkeyHandler([[\"mod+enter\", send]])} />\n```",
       "module": "hooks/index.ts"
     },
     {
@@ -20356,10 +20569,16 @@
       "description": "Builds an accessible brand palette, for both modes, from any hex color.\r\nThrows a TypeError for anything that isn't `#rgb` or `#rrggbb`.",
       "module": "utils/index.ts"
     },
+    {
+      "name": "LIME_ACCENT",
+      "signature": "LIME_ACCENT: AccentPalette",
+      "description": "The lime accent (`accent=\"lime\"`, and the black brand's accent): the original bright yellow-green.",
+      "module": "utils/index.ts"
+    },
     {
       "name": "VOLT_ACCENT",
-      "signature": "VOLT_ACCENT: AccentPalette",
-      "description": "The original volt accent (`accent=\"volt\"`, and the black brand's accent).",
+      "signature": "VOLT_ACCENT",
+      "description": "@deprecated Renamed to `LIME_ACCENT`.",
       "module": "utils/index.ts"
     },
     {
@@ -20371,7 +20590,7 @@
     {
       "name": "brandAccent",
       "signature": "brandAccent(primary: string): AccentPalette",
-      "description": "The default accent of a brand: a bright, lighter shade of its primary\r\nhue (blue gets a sky blue, purple a lavender, gold an amber, green a\r\nmint). Colorless brands (black) keep the volt.",
+      "description": "The default accent of a brand: a bright, lighter shade of its primary\r\nhue (blue gets a sky blue, purple a lavender, gold an amber, green a\r\nmint). Colorless brands (black) keep the lime.",
       "module": "utils/index.ts"
     },
     {
@@ -20401,19 +20620,19 @@
     {
       "name": "isEmail",
       "signature": "isEmail(value: string, { requireTld = true }: EmailOptions = {}): boolean",
-      "description": "True for an email address in the usual format: the HTML spec's rules\r\n(what browsers check for `type=\"email\"`), plus no leading, trailing, or\r\ndoubled dots before the `@`, length limits (64 before the `@`, 254 in all),\r\nand, by default, a top-level domain.",
+      "description": "True for an email address in the usual format: the HTML spec's rules\n(what browsers check for `type=\"email\"`), plus no leading, trailing, or\ndoubled dots before the `@`, length limits (64 before the `@`, 254 in all),\nand, by default, a top-level domain.",
       "module": "utils/index.ts"
     },
     {
       "name": "isIPv4",
       "signature": "isIPv4(value: string): boolean",
-      "description": "True for a dotted IPv4 address: four numbers 0-255 (`192.168.0.1`), no\r\nleading zeros (`010.0.0.1` is ambiguous, so it's rejected).",
+      "description": "True for a dotted IPv4 address: four numbers 0-255 (`192.168.0.1`), no\nleading zeros (`010.0.0.1` is ambiguous, so it's rejected).",
       "module": "utils/index.ts"
     },
     {
       "name": "isIPv6",
       "signature": "isIPv6(value: string): boolean",
-      "description": "True for an IPv6 address: eight groups of 1-4 hex digits, with `::`\r\nstanding for one or more zero groups (once at most), and an optional\r\nIPv4 tail (`::ffff:192.168.0.1`). Zone ids (`%eth0`) and brackets aren't\r\naccepted.",
+      "description": "True for an IPv6 address: eight groups of 1-4 hex digits, with `::`\nstanding for one or more zero groups (once at most), and an optional\nIPv4 tail (`::ffff:192.168.0.1`). Zone ids (`%eth0`) and brackets aren't\naccepted.",
       "module": "utils/index.ts"
     },
     {
@@ -20437,7 +20656,7 @@
     {
       "name": "rules",
       "signature": "rules",
-      "description": "Rule helpers for `useFormValidation`, with messages from the locale:\r\n\r\n```ts\r\nuseFormValidation({ rules: { email: rules.email(), server: rules.ip({ version: 4 }) } });\r\n```",
+      "description": "Rule helpers for `useFormValidation`, with messages from the locale:\n\n```ts\nuseFormValidation({ rules: { email: rules.email(), server: rules.ip({ version: 4 }) } });\n```",
       "module": "utils/index.ts"
     },
     {
@@ -20449,7 +20668,7 @@
     {
       "name": "parseHotkey",
       "signature": "parseHotkey(hotkey: string, platform: HotkeyPlatform = detectPlatform()): ParsedHotkey | null",
-      "description": "Parses a shortcut like `\"mod+k\"`, `\"shift+mod+p\"`, `\"ctrl+/\"`, or\r\n`\"escape\"` into modifiers and a key. `mod` is ⌘ on Mac and Ctrl\r\nelsewhere. Returns null when there is no key.",
+      "description": "Parses a shortcut like `\"mod+k\"`, `\"shift+mod+p\"`, `\"ctrl+/\"`, or\n`\"escape\"` into modifiers and a key. `mod` is ⌘ on Mac and Ctrl\nelsewhere. Returns null when there is no key.",
       "module": "utils/index.ts"
     },
     {
@@ -20473,7 +20692,7 @@
     {
       "name": "copyToClipboard",
       "signature": "copyToClipboard(text: string): Promise<void>",
-      "description": "Copies text to the clipboard: the async Clipboard API when it's allowed,\r\nelse a hidden-textarea fallback (insecure contexts, denied permission,\r\nolder browsers). Focus returns to where it was. Rejects when both fail.",
+      "description": "Copies text to the clipboard: the async Clipboard API when it's allowed,\nelse a hidden-textarea fallback (insecure contexts, denied permission,\nolder browsers). Focus returns to where it was. Rejects when both fail.",
       "module": "utils/index.ts"
     }
   ]