@alexgorbatchev/shadcn 0.0.30 → 0.0.32

package/llms/components/data-display/JsonRender.md

@@ -0,0 +1,476 @@
+# JsonRender
+
+Story: @alexgorbatchev/shadcn/components/data-display/JsonRender
+Source: src/components/stories/data-display/JsonRender.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/JsonRender.stories.tsx)
+
+## Public imports
+
+```tsx
+import { components, componentDefinitions } from "@alexgorbatchev/shadcn/json-render";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+import { createStateStore, defineCatalog, type Spec } from "@json-render/core";
+import { JSONUIProvider, Renderer, defineRegistry } from "@json-render/react";
+import { schema } from "@json-render/react/schema";
+```
+
+## Default component
+
+```tsx
+JsonExample
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Form
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "form",
+            elements: {
+                form: {
+                    type: "Stack",
+                    props: {},
+                    children: [
+                        "input",
+                        "textarea",
+                        "select",
+                        "checkbox",
+                        "radio",
+                        "switch",
+                        "slider",
+                        "toggle",
+                        "toggles",
+                        "buttons",
+                    ],
+                },
+                input: { type: "Input", props: { label: "Name", value: "Ada" } },
+                textarea: { type: "Textarea", props: { label: "Notes", value: "Initial notes" } },
+                select: { type: "Select", props: { label: "Plan", options: ["Free", "Pro"], value: "Free" } },
+                checkbox: { type: "Checkbox", props: { label: "Agree" } },
+                radio: { type: "Radio", props: { label: "Frequency", options: ["Daily", "Weekly"] } },
+                switch: { type: "Switch", props: { label: "Notifications" } },
+                slider: { type: "Slider", props: { label: "Volume", min: 0, max: 10 } },
+                toggle: { type: "Toggle", props: { label: "Bold" } },
+                toggles: {
+                    type: "ToggleGroup",
+                    props: {
+                        type: "multiple",
+                        items: [
+                            { label: "Left", value: "left" },
+                            { label: "Right", value: "right" },
+                        ],
+                    },
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        buttons: [
+                            { label: "Day", value: "day" },
+                            { label: "Month", value: "month" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### Overlays
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: {},
+                    children: ["tabs", "accordion", "collapse", "tooltip", "popover", "dropdown"],
+                },
+                tabs: {
+                    type: "Tabs",
+                    props: {
+                        tabs: [
+                            { value: "one", label: "First tab" },
+                            { value: "two", label: "Second tab" },
+                        ],
+                    },
+                },
+                accordion: {
+                    type: "Accordion",
+                    props: {
+                        type: "multiple",
+                        items: [
+                            { title: "Details", content: "Expanded details" },
+                            { title: "More", content: "More details" },
+                        ],
+                    },
+                },
+                collapse: { type: "Collapsible", props: { title: "Expand section", defaultOpen: false }, children: ["text"] },
+                text: { type: "Text", props: { text: "Collapsed content" } },
+                tooltip: { type: "Tooltip", props: { content: "Keyboard help", text: "Help trigger" } },
+                popover: { type: "Popover", props: { trigger: "Show popover", content: "Popover content" } },
+                dropdown: {
+                    type: "DropdownMenu",
+                    props: { label: "Open menu", items: [{ label: "Choose item", value: "item" }] },
+                },
+            },
+        },
+    }
+}
+```
+
+### Display
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "card",
+            elements: {
+                card: {
+                    type: "Card",
+                    props: { title: "Archive", description: "Rendered from JSON", maxWidth: "full" },
+                    children: ["grid", "table", "progress", "spinner", "skeleton", "separator", "carousel"],
+                },
+                grid: {
+                    type: "Grid",
+                    props: { columns: 2 },
+                    children: ["heading", "text", "badge", "alert", "avatar", "image", "link", "button"],
+                },
+                heading: { type: "Heading", props: { text: "Measurements", level: "h2" } },
+                text: { type: "Text", props: { text: "Last updated today", variant: "muted" } },
+                badge: { type: "Badge", props: { text: "Ready", variant: "secondary" } },
+                alert: { type: "Alert", props: { title: "Synced", message: "All records imported", type: "success" } },
+                avatar: { type: "Avatar", props: { name: "Ada Lovelace" } },
+                image: {
+                    type: "Image",
+                    props: {
+                        src: new URL("../fixtures/avatar.svg", import.meta.url).href,
+                        alt: "Profile",
+                        width: 40,
+                        height: 40,
+                    },
+                },
+                link: { type: "Link", props: { label: "Read documentation", href: "#docs" } },
+                button: { type: "Button", props: { label: "Sync records", variant: "secondary" } },
+                table: {
+                    type: "Table",
+                    props: { caption: "Measurements", columns: ["Day", "Score"], rows: [["Monday", "80"]] },
+                },
+                progress: { type: "Progress", props: { value: 50, max: 100, label: "Import progress" } },
+                spinner: { type: "Spinner", props: { size: "md", label: "Loading records" } },
+                skeleton: { type: "Skeleton", props: { width: "100%", height: "20px" } },
+                separator: { type: "Separator", props: {} },
+                carousel: {
+                    type: "Carousel",
+                    props: {
+                        items: [
+                            { title: "First slide", description: "First record" },
+                            { title: "Second slide", description: "Second record" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### BoundForm
+
+```tsx
+{
+    args: {
+        state: {
+            name: "Ada",
+            notes: "Initial notes",
+            plan: "Free",
+            agree: false,
+            frequency: "Daily",
+            notifications: false,
+            volume: 0,
+            bold: false,
+            position: "left",
+            period: "day",
+        },
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: {},
+                    children: [
+                        "input",
+                        "textarea",
+                        "select",
+                        "checkbox",
+                        "radio",
+                        "switch",
+                        "slider",
+                        "toggle",
+                        "toggles",
+                        "buttons",
+                    ],
+                },
+                input: {
+                    type: "Input",
+                    props: {
+                        label: "Name",
+                        value: { $bindState: "/name" },
+                        checks: [{ type: "required", message: "Name required" }],
+                        validateOn: "change",
+                    },
+                },
+                textarea: {
+                    type: "Textarea",
+                    props: {
+                        label: "Notes",
+                        value: { $bindState: "/notes" },
+                        checks: [{ type: "required", message: "Notes required" }],
+                        validateOn: "blur",
+                    },
+                },
+                select: {
+                    type: "Select",
+                    props: {
+                        label: "Plan",
+                        options: ["Free", "Pro"],
+                        value: { $bindState: "/plan" },
+                        checks: [{ type: "required", message: "Plan required" }],
+                    },
+                },
+                checkbox: {
+                    type: "Checkbox",
+                    props: {
+                        label: "Agree",
+                        checked: { $bindState: "/agree" },
+                        checks: [{ type: "matches", args: { other: true }, message: "Agreement required" }],
+                    },
+                },
+                radio: {
+                    type: "Radio",
+                    props: {
+                        label: "Frequency",
+                        options: ["Daily", "Weekly"],
+                        value: { $bindState: "/frequency" },
+                        checks: [{ type: "required", message: "Frequency required" }],
+                    },
+                },
+                switch: {
+                    type: "Switch",
+                    props: {
+                        label: "Notifications",
+                        checked: { $bindState: "/notifications" },
+                        checks: [{ type: "matches", args: { other: true }, message: "Notification preference required" }],
+                    },
+                },
+                slider: { type: "Slider", props: { label: "Volume", min: 0, max: 10, value: { $bindState: "/volume" } } },
+                toggle: { type: "Toggle", props: { label: "Bold", pressed: { $bindState: "/bold" } } },
+                toggles: {
+                    type: "ToggleGroup",
+                    props: {
+                        type: "multiple",
+                        value: { $bindState: "/position" },
+                        items: [
+                            { label: "Left", value: "left" },
+                            { label: "Right", value: "right" },
+                        ],
+                    },
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        selected: { $bindState: "/period" },
+                        buttons: [
+                            { label: "Day", value: "day" },
+                            { label: "Month", value: "month" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### MissingBoundValues
+
+```tsx
+{
+    args: { ...BoundForm.args, state: {} }
+}
+```
+
+### PaginationAndDialog
+
+```tsx
+{
+    args: {
+        state: { page: 1, show: false, drawer: false },
+        spec: {
+            root: "root",
+            elements: {
+                root: { type: "Stack", props: {}, children: ["pagination", "open", "dialog", "openDrawer", "drawer"] },
+                pagination: { type: "Pagination", props: { page: { $bindState: "/page" }, totalPages: 20 } },
+                open: {
+                    type: "Button",
+                    props: { label: "Open dialog" },
+                    on: { press: { action: "setState", params: { statePath: "/show", value: true } } },
+                },
+                dialog: {
+                    type: "Dialog",
+                    props: { title: "Confirm import", description: "Import your records", openPath: "/show" },
+                },
+                openDrawer: {
+                    type: "Button",
+                    props: { label: "Open drawer" },
+                    on: { press: { action: "setState", params: { statePath: "/drawer", value: true } } },
+                },
+                drawer: {
+                    type: "Drawer",
+                    props: { title: "Archive details", description: "Stored records", openPath: "/drawer" },
+                },
+            },
+        },
+    }
+}
+```
+
+### TypographyAndPlaceholders
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: { direction: "horizontal", gap: "lg", align: "center", justify: "between" },
+                    children: [
+                        "small",
+                        "medium",
+                        "large",
+                        "empty",
+                        "placeholder",
+                        "avatar",
+                        "spinner",
+                        "skeleton",
+                        "progress",
+                        "separator",
+                        "table",
+                    ],
+                },
+                small: {
+                    type: "Card",
+                    props: { maxWidth: "sm", centered: true, title: "Small card" },
+                    children: ["h1", "caption", "alert"],
+                },
+                medium: {
+                    type: "Card",
+                    props: { maxWidth: "md", description: "Medium card" },
+                    children: ["h3", "lead", "warning"],
+                },
+                large: { type: "Card", props: { maxWidth: "lg" }, children: ["h4", "code", "info"] },
+                empty: { type: "Card", props: {}, children: ["body", "badge"] },
+                h1: { type: "Heading", props: { text: "Page heading", level: "h1" } },
+                h3: { type: "Heading", props: { text: "Section heading", level: "h3" } },
+                h4: { type: "Heading", props: { text: "Detail heading", level: "h4" } },
+                caption: { type: "Text", props: { text: "Caption", variant: "caption" } },
+                lead: { type: "Text", props: { text: "Lead paragraph", variant: "lead" } },
+                code: { type: "Text", props: { text: "const ready = true", variant: "code" } },
+                body: { type: "Text", props: { text: "Body paragraph" } },
+                badge: { type: "Badge", props: { text: "Default badge" } },
+                alert: { type: "Alert", props: { title: "Import failed", type: "error" } },
+                warning: { type: "Alert", props: { title: "Warning", type: "warning" } },
+                info: { type: "Alert", props: { title: "Default notice" } },
+                placeholder: { type: "Image", props: { src: null, alt: "Missing photograph" } },
+                avatar: { type: "Avatar", props: { name: "", size: "lg" } },
+                spinner: { type: "Spinner", props: { size: "sm" } },
+                skeleton: { type: "Skeleton", props: { rounded: true } },
+                progress: { type: "Progress", props: { value: 20 } },
+                separator: { type: "Separator", props: { orientation: "vertical" } },
+                table: { type: "Table", props: { columns: ["Name"], rows: [["Ada"]] } },
+            },
+        },
+    }
+}
+```
+
+### InitialSelections
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Grid",
+                    props: { columns: 1, gap: "sm" },
+                    children: [
+                        "buttons",
+                        "tabs",
+                        "toggles",
+                        "pagination",
+                        "slider",
+                        "accordion",
+                        "image",
+                        "avatar",
+                        "spinner",
+                        "button",
+                    ],
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        selected: "month",
+                        buttons: [
+                            { label: "Day view", value: "day" },
+                            { label: "Month view", value: "month" },
+                        ],
+                    },
+                },
+                tabs: {
+                    type: "Tabs",
+                    props: {
+                        value: "second",
+                        tabs: [
+                            { label: "One", value: "first" },
+                            { label: "Two", value: "second" },
+                        ],
+                    },
+                },
+                toggles: { type: "ToggleGroup", props: { value: "", items: [{ label: "Pin", value: "pin" }] } },
+                pagination: { type: "Pagination", props: { totalPages: 3 } },
+                slider: { type: "Slider", props: { value: 20 } },
+                accordion: { type: "Accordion", props: { items: [{ title: "Single details", content: "Single expanded" }] } },
+                image: {
+                    type: "Image",
+                    props: { src: new URL("../fixtures/avatar.svg", import.meta.url).href, alt: "Small profile" },
+                },
+                avatar: {
+                    type: "Avatar",
+                    props: { name: "Ada", size: "sm", src: new URL("../fixtures/avatar.svg", import.meta.url).href },
+                },
+                spinner: { type: "Spinner", props: { size: "lg", label: "Large loader" } },
+                button: { type: "Button", props: { label: "Delete", variant: "danger", disabled: true } },
+            },
+        },
+    }
+}
+```

package/llms/components/data-display/VirtualDataGrid.md

@@ -0,0 +1,71 @@
+# VirtualDataGrid
+
+Story: @alexgorbatchev/shadcn/components/data-display/VirtualDataGrid
+Source: src/components/stories/data-display/VirtualDataGrid.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/VirtualDataGrid.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DataGridCells } from "@alexgorbatchev/shadcn/data-grid";
+import { TableRow } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+```
+
+## Default render
+
+```tsx
+() => <VirtualDataGridExample files={fixture_gridFiles}/>
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### LargeCollection
+
+```tsx
+{}
+```
+
+### SelectedRow
+
+```tsx
+{}
+```
+
+### KeyboardResizing
+
+```tsx
+{}
+```
+
+### CustomRows
+
+```tsx
+{
+    render: () => <CustomRowsExample />
+}
+```
+
+### RetainedRow
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} retainedRowIds={["file-500"]}/>
+}
+```
+
+### NarrowContainer
+
+```tsx
+{
+    render: () => <VirtualDataGridExample files={fixture_gridFiles} width={360}/>
+}
+```

package/llms/components/feedback/Alert.md

@@ -26,7 +26,7 @@ Alert
 ## Story controls
 
 ```tsx
-{ variant: { control: "select", options: ["default", "destructive"] } }
+{ variant: { control: "select", options: ["default", "destructive", "success", "warning", "info"] } }
 ```
 
 ## Default render
@@ -57,6 +57,22 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Success
+
+```tsx
+{
+    args: { variant: "success" }
+}
+```
+
+### Info
+
+```tsx
+{
+    args: { variant: "info" }
+}
+```
+
 ### Compact
 
 ```tsx
@@ -80,14 +96,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
-### CustomColors
+### Warning
 
 ```tsx
 {
-    render: (args) => (<Alert {...args} className="border-warning/30 bg-warning/10 text-warning">
+    render: (args) => (<Alert {...args} variant="warning">
       <TriangleAlertIcon aria-hidden="true"/>
       <AlertTitle>Subscription expires soon</AlertTitle>
-      <AlertDescription className="text-warning">Renew your subscription to keep access.</AlertDescription>
+      <AlertDescription>Renew your subscription to keep access.</AlertDescription>
     </Alert>)
 }
 ```

package/llms/setup.md

@@ -50,28 +50,30 @@ Package preparation and contributor commands are documented in [AGENTS.md](https
 
 Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the following features from their dedicated entry points and install only the peers you use. These features, their hooks, and their types are not exported from the package root.
 
-| Import path suffix  | Components                                               | Install alongside the package                                                                       |
-| ------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `/chart`            | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
-| `/calendar`         | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
-| `/persian-calendar` | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
-| `/carousel`         | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
-| `/command`          | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
-| `/resizable`        | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
-| `/fonts.css`        | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
-| `/sonner`           | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
-| `/input-otp`        | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
-| `/virtual-table`    | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
-| `/message-scroller` | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
-| `/questionnaire`    | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
-| `/data-grid`        | DataGrid and native table helpers                        | `bun add @tanstack/react-table@9.2.8`                                                               |
-| `/file-upload`      | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
-| `/color-picker`     | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
-| `/image-crop`       | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
-| `/tree`             | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
-| `/editor`           | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
-| `/event-calendar`   | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
-| `/gantt`            | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
+| Import path suffix   | Components                                               | Install alongside the package                                                                       |
+| -------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `/json-render`       | JSON Render component registry and catalog               | `bun add @json-render/core@0.21.1 @json-render/react@0.21.1 embla-carousel-react@^8.6.0`            |
+| `/chart`             | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
+| `/calendar`          | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
+| `/persian-calendar`  | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
+| `/carousel`          | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
+| `/command`           | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
+| `/resizable`         | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
+| `/fonts.css`         | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
+| `/sonner`            | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
+| `/input-otp`         | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
+| `/virtual-table`     | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
+| `/message-scroller`  | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
+| `/questionnaire`     | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
+| `/data-grid`         | DataGrid, column picker, and native table helpers        | `bun add @tanstack/react-table@9.2.8`                                                               |
+| `/virtual-data-grid` | VirtualDataGrid and row measurement props                | `bun add @tanstack/react-table@9.2.8 @tanstack/react-virtual@3.14.13`                               |
+| `/file-upload`       | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
+| `/color-picker`      | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
+| `/image-crop`        | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
+| `/tree`              | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
+| `/editor`            | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
+| `/event-calendar`    | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
+| `/gantt`             | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
 
 Import `@alexgorbatchev/shadcn/event-calendar.css` for EventCalendar, and `react-image-crop/dist/ReactCrop.css` for ImageCrop. The root also provides application shells, dashboard and billing layouts, authentication/settings forms, account/workspace controls, Kanban, facets, tags, number fields, toolbars, meters, stat cards and status displays. See the [component catalog reference](https://github.com/alexgorbatchev/shadcn/blob/main/docs/internal/component-catalog.md) for source groups, native APIs, dependency costs and consumer responsibilities.
 
@@ -302,6 +304,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
+`VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, and `fill`; a `fill` column takes the width the sized columns leave. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.