@getdom/studio 0.1.0

package/src/pages/_layout/componentCatalog.generated.js

@@ -0,0 +1,4514 @@
+// Generated by scripts/generate-component-catalog.mjs. Do not edit by hand.
+export const componentCatalog = [
+	{
+		"id": "components/accordion",
+		"path": "../components/accordion/DomAccordion.vue",
+		"section": "components",
+		"slug": "accordion",
+		"exportName": "DomAccordion",
+		"route": "/components/accordion",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "components/breadcrumbs",
+		"path": "../components/breadcrumbs/DomBreadcrumbs.vue",
+		"section": "components",
+		"slug": "breadcrumbs",
+		"exportName": "DomBreadcrumbs",
+		"route": "/components/breadcrumbs",
+		"doc": {
+			"name": "Breadcrumbs",
+			"tag": "<DomBreadcrumbs>",
+			"description": "Accessible route or resource-path navigation with application-owned destinations and optional middle-path collapsing.",
+			"icon": "M4 7h5l3 5-3 5H4m8-10h5l3 5-3 5h-5",
+			"events": [
+				{
+					"name": "navigate",
+					"payload": "BreadcrumbNavigatePayload",
+					"typeRef": "BreadcrumbNavigatePayload",
+					"description": "Fired whenever an interactive breadcrumb is selected. Link navigation continues normally."
+				},
+				{
+					"name": "expand",
+					"payload": "BreadcrumbItem[]",
+					"description": "Fired after a collapsed middle path is revealed."
+				}
+			],
+			"slots": [
+				{
+					"name": "item",
+					"payload": "BreadcrumbSlotPayload",
+					"typeRef": "BreadcrumbSlotPayload",
+					"description": "Replace an item label inside its semantic link, button, or current-location element."
+				},
+				{
+					"name": "separator",
+					"payload": "{ previous, next, index }",
+					"description": "Replace the separator before each item after the first."
+				},
+				{
+					"name": "collapsed",
+					"payload": "{ items, count, expand }",
+					"description": "Replace the control used to reveal a collapsed middle path."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/button",
+		"path": "../components/button/DomButton.vue",
+		"section": "components",
+		"slug": "button",
+		"exportName": "DomButton",
+		"route": "/components/button",
+		"doc": {
+			"name": "Button",
+			"tag": "<DomButton>",
+			"description": "The atomic call to action — variants, sizes, loading state, and any underlying element.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Button label and/or icons."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/command-palette",
+		"path": "../components/command-palette/DomCommandPalette.vue",
+		"section": "components",
+		"slug": "command-palette",
+		"exportName": "DomCommandPalette",
+		"route": "/components/command-palette",
+		"doc": {
+			"name": "Command palette",
+			"tag": "<DomCommandPalette>",
+			"description": "A keyboard-first command launcher composed from dialog and listbox patterns.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(open: boolean)",
+					"description": "Emitted when the palette opens or closes."
+				},
+				{
+					"name": "select",
+					"payload": "({ command, value })",
+					"description": "Emitted when a command is selected."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/context-menu",
+		"path": "../components/context-menu/DomContextMenu.vue",
+		"section": "components",
+		"slug": "context-menu",
+		"exportName": "DomContextMenu",
+		"route": "/components/context-menu",
+		"doc": {
+			"name": "Context menu",
+			"tag": "<DomContextMenu>",
+			"description": "A right-click menu built on DomMenu, with popover top-layer placement and keyboard navigation.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "The area that opens the context menu on right click."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Custom label/body content inside the default menu row."
+				},
+				{
+					"name": "item-row",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Replace the full inner row markup while DomMenu keeps the interactive wrapper."
+				}
+			],
+			"events": [
+				{
+					"name": "open",
+					"payload": "({ event })",
+					"description": "Fired when the menu is opened."
+				},
+				{
+					"name": "select",
+					"payload": "({ value, item })",
+					"description": "Fired when a menu item is selected."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/dialog",
+		"path": "../components/dialog/DomDialog.vue",
+		"section": "components",
+		"slug": "dialog",
+		"exportName": "DomDialog",
+		"route": "/components/dialog",
+		"doc": {
+			"name": "Dialog",
+			"tag": "<DomDialog>",
+			"description": "A modal built on the native HTML <dialog> element — top-layer rendering, native stacking, scroll lock, and backdrop styling without z-index hacks.",
+			"slots": [
+				{
+					"name": "trigger",
+					"description": "Optional. Element that opens the dialog when clicked — omit when using v-model, a template ref, or commandfor on an external button."
+				},
+				{
+					"name": "(default)",
+					"description": "Dialog body — rendered inside the card below the title and description."
+				},
+				{
+					"name": "header",
+					"payload": "{ title, description, titleId, descriptionId }",
+					"description": "Replace the default title and description block. Apply the provided IDs to custom heading and description elements to preserve the dialog accessibility relationships."
+				},
+				{
+					"name": "footer",
+					"description": "Action buttons. Add `data-close` on a control to dismiss the dialog."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(open: boolean)",
+					"description": "Emitted when the dialog opens or closes."
+				},
+				{
+					"name": "before-open",
+					"description": "Emitted immediately before the dialog opens; prepare draft data or item snapshots here."
+				},
+				{
+					"name": "close",
+					"description": "Emitted when the dialog is dismissed."
+				},
+				{
+					"name": "close-complete",
+					"description": "Emitted after the close transition completes; clear retained dialog data here."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Esc",
+					"action": "Closes the topmost open dialog unless `static` is set."
+				},
+				{
+					"keys": "Tab / Shift+Tab",
+					"action": "Focus stays within the dialog while open (native top-layer)."
+				},
+				{
+					"keys": "Click backdrop",
+					"action": "Dismisses the dialog unless `static` is set."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/dialog",
+		"path": "../components/dialog/DomDialogSchemaForm.vue",
+		"section": "components",
+		"slug": "dialog",
+		"exportName": "DomDialogSchemaForm",
+		"route": "/components/dialog",
+		"doc": {
+			"name": "Dialog schema form",
+			"tag": "<DomDialogSchemaForm>",
+			"description": "Internal renderer used by dialogForm(schema) to resolve a DomForm children schema from a programmatic dialog.",
+			"events": [
+				{
+					"name": "resolve",
+					"payload": "Record<string, unknown>",
+					"description": "Emitted with validated form values."
+				},
+				{
+					"name": "dismiss",
+					"description": "Emitted when the form is cancelled."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/dialog",
+		"path": "../components/dialog/DomDialogStack.vue",
+		"section": "components",
+		"slug": "dialog",
+		"exportName": "DomDialogStack",
+		"route": "/components/dialog",
+		"doc": {
+			"name": "Dialog stack",
+			"tag": "<DomDialogStack>",
+			"description": "Renderer for dialogs created with useDialogs(). Mount it once, then call the dialog API from script.",
+			"slots": [
+				{
+					"name": "default",
+					"payload": "{ dialog, resolve, dismiss }",
+					"description": "Custom renderer for a programmatic dialog body."
+				},
+				{
+					"name": "footer",
+					"payload": "{ dialog, resolve, dismiss }",
+					"description": "Custom renderer for programmatic dialog actions."
+				}
+			],
+			"events": [
+				{
+					"name": "resolve",
+					"payload": "({ id, value })",
+					"description": "Emitted when a dialog resolves."
+				},
+				{
+					"name": "dismiss",
+					"payload": "({ id, value })",
+					"description": "Emitted when a dialog is dismissed."
+				},
+				{
+					"name": "action",
+					"payload": "({ id, dialog, ...payload })",
+					"description": "Emitted by custom dialog bodies for app-specific actions."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/drawer",
+		"path": "../components/drawer/DomDrawer.vue",
+		"section": "components",
+		"slug": "drawer",
+		"exportName": "DomDrawer",
+		"route": "/components/drawer",
+		"doc": {
+			"name": "Drawer",
+			"tag": "<DomDrawer>",
+			"description": "A slide-out panel for navigation menus, filters, or secondary app panels with backdrop dismiss, drag dismiss, scroll lock, and focus trap built in.",
+			"slots": [
+				{
+					"name": "trigger",
+					"description": "Element that opens the drawer when clicked (omit when controlling open state yourself)."
+				},
+				{
+					"name": "(default)",
+					"description": "Panel body."
+				},
+				{
+					"name": "header",
+					"description": "Replace the default header row (title + close button)."
+				},
+				{
+					"name": "footer",
+					"description": "Optional footer below the scrollable body."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Esc",
+					"action": "Closes the drawer."
+				},
+				{
+					"keys": "Tab / Shift+Tab",
+					"action": "Focus stays within the panel while open."
+				},
+				{
+					"keys": "Click backdrop",
+					"action": "Dismisses the drawer. Add `static` on the host to disable."
+				},
+				{
+					"keys": "Drag handle",
+					"action": "Bottom drawers can be dragged down from the pill handle to close."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/dropdown",
+		"path": "../components/dropdown/DomDropdown.vue",
+		"section": "components",
+		"slug": "dropdown",
+		"exportName": "DomDropdown",
+		"route": "/components/dropdown",
+		"doc": {
+			"name": "Dropdown",
+			"tag": "<DomDropdown>",
+			"description": "A menu that opens from a button — fully keyboard accessible, with focus return, optional scroll lock, and outside-click handling.",
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ close, open, toggle }",
+					"description": "Custom panel content, usually a DomMenu composed with MenuItem rows."
+				},
+				{
+					"name": "trigger",
+					"description": "Replaces the inner content of the trigger button."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, index }",
+					"description": "Replaces the rendering of each menu item."
+				},
+				{
+					"name": "panel",
+					"payload": "{ close, open, toggle }",
+					"description": "Replaces menu items with custom dropdown content, such as a tree view or form."
+				}
+			],
+			"events": [
+				{
+					"name": "select",
+					"payload": "(value: string)",
+					"description": "Fired when a menu item is chosen."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Enter / Space / ↓",
+					"action": "Open menu (when trigger is focused)."
+				},
+				{
+					"keys": "↑ / ↓",
+					"action": "Move active item."
+				},
+				{
+					"keys": "Home / End",
+					"action": "Jump to first / last item."
+				},
+				{
+					"keys": "Enter",
+					"action": "Select active item."
+				},
+				{
+					"keys": "Esc / Tab",
+					"action": "Close menu and return focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/icon-button",
+		"path": "../components/icon-button/DomIconButton.vue",
+		"section": "components",
+		"slug": "icon-button",
+		"exportName": "DomIconButton",
+		"route": "/components/icon-button",
+		"doc": {
+			"name": "Icon button",
+			"tag": "<DomIconButton>",
+			"description": "A compact accessible button for toolbar, row action, and chrome controls.",
+			"playground": {
+				"initial": {
+					"label": "Add item",
+					"icon": "M12 5v14M5 12h14"
+				}
+			},
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Custom icon content. Use an SVG or icon component sized to 1em or Tailwind size utilities."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/lightbox",
+		"path": "../components/lightbox/DomLightbox.vue",
+		"section": "components",
+		"slug": "lightbox",
+		"exportName": "DomLightbox",
+		"route": "/components/lightbox",
+		"doc": {
+			"name": "Lightbox",
+			"tag": "<DomLightbox>",
+			"description": "A gallery overlay that opens from a thumbnail into a stable preview stage, then flies back to the origin on close.",
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ item, index, close, next, previous, goTo, phase }",
+					"description": "Optional custom stage content. Omit for the built-in image preview."
+				},
+				{
+					"name": "caption",
+					"payload": "{ item, index }",
+					"description": "Optional caption content below the stage."
+				},
+				{
+					"name": "thumbnail",
+					"payload": "{ item, index, active }",
+					"description": "Optional thumbnail strip rendering."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(open: boolean)",
+					"description": "Emitted when the lightbox requests an open-state change."
+				},
+				{
+					"name": "update:index",
+					"payload": "(index: number)",
+					"description": "Emitted when navigation changes the active item."
+				},
+				{
+					"name": "close",
+					"description": "Emitted when the close transition begins."
+				},
+				{
+					"name": "after-enter",
+					"description": "Emitted when the thumbnail-to-stage transition completes."
+				},
+				{
+					"name": "after-leave",
+					"description": "Emitted when the fly-back transition completes and retained data is released."
+				},
+				{
+					"name": "navigate",
+					"payload": "({ index, item, direction })",
+					"description": "Emitted after arrow or thumbnail navigation."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Esc",
+					"action": "Closes the lightbox."
+				},
+				{
+					"keys": "Left / Right",
+					"action": "Moves between gallery items."
+				},
+				{
+					"keys": "Click backdrop",
+					"action": "Closes the lightbox when closeOnBackdrop is true."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/menu",
+		"path": "../components/menu/DomMenu.vue",
+		"section": "components",
+		"slug": "menu",
+		"exportName": "DomMenu",
+		"route": "/components/menu",
+		"doc": {
+			"name": "Menu",
+			"tag": "<DomMenu>",
+			"description": "A roving-focus action menu for command lists, settings menus, and static menu panels.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Custom <MenuItem> rows when you want markup-driven menus instead of the items prop."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Custom label/body content inside the default menu row."
+				},
+				{
+					"name": "item-accessory",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Custom right-side content for rows that expose shortcuts, children, checks, or accessorySlot."
+				},
+				{
+					"name": "item-row",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Replace the full inner row markup while DomMenu keeps the interactive wrapper."
+				},
+				{
+					"name": "item-label",
+					"payload": "{ item, index, value, label }",
+					"description": "Replace the markup for non-selectable label/static rows."
+				},
+				{
+					"name": "item.slot",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Set item.slot to a named slot for per-item row markup."
+				},
+				{
+					"name": "item.accessorySlot",
+					"payload": "{ item, index, value, label, checked, open, hasChildren }",
+					"description": "Set item.accessorySlot to a named slot for per-item right-side accessory content."
+				}
+			],
+			"events": [
+				{
+					"name": "select",
+					"payload": "({ value, item })",
+					"description": "Fired when an item is selected."
+				},
+				{
+					"name": "change",
+					"payload": "({ value, checked, item })",
+					"description": "Fired when a checkbox or radio item changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/menu",
+		"path": "../components/menu/DomMenuItem.vue",
+		"section": "components",
+		"slug": "menu",
+		"exportName": "DomMenuItem",
+		"route": "/components/menu",
+		"doc": {
+			"name": "Menu item",
+			"tag": "<MenuItem>",
+			"description": "Markup-driven menu row for DomMenu, including optional submenu content through the submenu slot.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Custom row markup."
+				},
+				{
+					"name": "accessory",
+					"description": "Right-side content rendered beside the menu item, useful for controls, shortcuts, and status."
+				},
+				{
+					"name": "submenu",
+					"description": "Nested <MenuItem> rows shown as a submenu."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/menu",
+		"path": "../components/menu/DomMenuLabel.vue",
+		"section": "components",
+		"slug": "menu",
+		"exportName": "DomMenuLabel",
+		"route": "/components/menu",
+		"doc": {
+			"name": "Menu label",
+			"tag": "<MenuLabel>",
+			"description": "A non-selectable menu row for labels, account summaries, and other static custom content.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Static content shown inside the menu."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/menu",
+		"path": "../components/menu/DomMenuSeparator.vue",
+		"section": "components",
+		"slug": "menu",
+		"exportName": "DomMenuSeparator",
+		"route": "/components/menu",
+		"doc": {
+			"name": "Menu separator",
+			"tag": "<MenuSeparator>",
+			"description": "A non-focusable divider for separating groups inside DomMenu."
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/pagination",
+		"path": "../components/pagination/DomPagination.vue",
+		"section": "components",
+		"slug": "pagination",
+		"exportName": "DomPagination",
+		"route": "/components/pagination",
+		"doc": {
+			"name": "Pagination",
+			"tag": "<DomPagination>",
+			"description": "A controlled page navigator for data grids, audit logs, search results, and resource lists.",
+			"icon": "M7 8l-4 4 4 4M17 8l4 4-4 4M10 12h4",
+			"events": [
+				{
+					"name": "update:page",
+					"payload": "number",
+					"description": "Fired when the selected page changes."
+				},
+				{
+					"name": "page-change",
+					"payload": "{ page, previousPage, pageCount }",
+					"description": "Fired with page transition metadata."
+				}
+			],
+			"playground": {
+				"initial": {
+					"page": 4,
+					"pageSize": 25,
+					"total": 286
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/popover",
+		"path": "../components/popover/DomPopover.vue",
+		"section": "components",
+		"slug": "popover",
+		"exportName": "DomPopover",
+		"route": "/components/popover",
+		"doc": {
+			"name": "Popover",
+			"tag": "<DomPopover>",
+			"description": "A floating panel anchored to a trigger. Built on the HTML Popover API so it sits in the top layer — no parent overflow, transform, or z-index can clip it.",
+			"slots": [
+				{
+					"name": "trigger",
+					"description": "Replaces the trigger button. Omit when using triggerId."
+				},
+				{
+					"name": "(default)",
+					"payload": "{ open, close, toggle }",
+					"description": "Popover body. Receives helpers so content can close itself without storing a component ref."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Click trigger",
+					"action": "Toggles the popover."
+				},
+				{
+					"keys": "Focus trigger",
+					"action": "Opens the popover when trigger is hover."
+				},
+				{
+					"keys": "Click outside",
+					"action": "Light-dismiss via the native popover API."
+				},
+				{
+					"keys": "Esc",
+					"action": "Closes the popover."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/profile-menu",
+		"path": "../components/profile-menu/DomProfileMenu.vue",
+		"section": "components",
+		"slug": "profile-menu",
+		"exportName": "DomProfileMenu",
+		"route": "/components/profile-menu",
+		"doc": {
+			"name": "Profile menu",
+			"tag": "<DomProfileMenu>",
+			"description": "A signed-in account trigger with avatar, email, and app profile actions.",
+			"playground": {
+				"initial": {
+					"name": "Mina Patel",
+					"email": "mina@northstar.app",
+					"initials": "MP",
+					"showName": false
+				}
+			},
+			"slots": [
+				{
+					"name": "trigger",
+					"payload": "{ name, email, initials }",
+					"description": "Replace the avatar and identity text inside the dropdown trigger."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, label, value }",
+					"description": "Replace the markup for selectable data-driven menu items. Useful for resolving item.component or item.componentName to a custom row component."
+				},
+				{
+					"name": "item-label",
+					"payload": "{ item, label, value }",
+					"description": "Replace the markup for non-selectable data-driven label/static rows."
+				}
+			],
+			"events": [
+				{
+					"name": "select",
+					"payload": "({ value, item })",
+					"description": "Fired when an action item is chosen."
+				},
+				{
+					"name": "change",
+					"payload": "({ value, checked, item })",
+					"description": "Fired when a checkbox or radio menu item changes."
+				},
+				{
+					"name": "update:themeMode",
+					"payload": "(mode: \"dark\" | \"light\" | \"system\")",
+					"description": "Fired when the embedded theme switcher changes."
+				},
+				{
+					"name": "profile",
+					"payload": "({ value, item })",
+					"description": "Fired when the profile action is chosen."
+				},
+				{
+					"name": "onboarding",
+					"payload": "({ value, item })",
+					"description": "Fired when the onboarding action is chosen."
+				},
+				{
+					"name": "theme",
+					"payload": "({ value, item, mode })",
+					"description": "Fired when the theme mode changes, or when a plain theme item is chosen."
+				},
+				{
+					"name": "logout",
+					"payload": "({ value, item })",
+					"description": "Fired when the logout action is chosen."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/profile-menu",
+		"path": "../components/profile-menu/DomProfileMenuItemContent.vue",
+		"section": "components",
+		"slug": "profile-menu",
+		"exportName": "DomProfileMenuItemContent",
+		"route": "/components/profile-menu",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "components/scroll-menu",
+		"path": "../components/scroll-menu/DomScrollMenu.vue",
+		"section": "components",
+		"slug": "scroll-menu",
+		"exportName": "DomScrollMenu",
+		"route": "/components/scroll-menu",
+		"doc": {
+			"name": "Scroll menu",
+			"tag": "<DomScrollMenu>",
+			"description": "A smooth-scrolling table of contents that keeps real fragment links highlighted as their target headings move through a page or scroll container.",
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ activeHref }",
+					"description": "DomScrollMenuItem rows or equivalent custom content."
+				},
+				{
+					"name": "label",
+					"payload": "{ label }",
+					"description": "Custom visible navigation label."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "href",
+					"description": "Emitted when scrolling or navigation changes the active fragment link."
+				},
+				{
+					"name": "change",
+					"payload": "{ href, target }",
+					"description": "Emitted with the active fragment and its target element."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/scroll-menu",
+		"path": "../components/scroll-menu/DomScrollMenuItem.vue",
+		"section": "components",
+		"slug": "scroll-menu",
+		"exportName": "DomScrollMenuItem",
+		"route": "/components/scroll-menu",
+		"doc": {
+			"name": "Scroll menu item",
+			"tag": "<DomScrollMenuItem>",
+			"description": "A fragment-link wrapper that registers either its href prop or a slotted anchor with the parent DomScrollMenu scrollspy.",
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ active, href }",
+					"description": "Link contents when href is set, or one custom fragment anchor when href is omitted."
+				}
+			],
+			"events": [
+				{
+					"name": "navigate",
+					"payload": "{ href, active }",
+					"description": "Emitted when the fragment link is activated with an unmodified primary click."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/splitter-panel",
+		"path": "../components/splitter-panel/DomSplitterPanel.vue",
+		"section": "components",
+		"slug": "splitter-panel",
+		"exportName": "DomSplitterPanel",
+		"route": "/components/splitter-panel",
+		"doc": {
+			"name": "Splitter panel",
+			"tag": "<DomSplitterPanel>",
+			"description": "A resizable multi-pane shell for editors, inspectors, file browsers, and app-builder workspaces.",
+			"icon": "M5 4v16M19 4v16M8 6h8M8 12h8M8 18h8",
+			"slots": [
+				{
+					"name": "start",
+					"description": "The leading resizable pane."
+				},
+				{
+					"name": "default",
+					"description": "The flexible central pane."
+				},
+				{
+					"name": "end",
+					"description": "Optional trailing resizable pane."
+				},
+				{
+					"name": "start-handle",
+					"description": "Optional content inside the leading resize handle."
+				},
+				{
+					"name": "end-handle",
+					"description": "Optional content inside the trailing resize handle."
+				}
+			],
+			"events": [
+				{
+					"name": "update:startSize",
+					"payload": "(pixels)",
+					"description": "Emitted when the leading pane is resized."
+				},
+				{
+					"name": "update:endSize",
+					"payload": "(pixels)",
+					"description": "Emitted when the trailing pane is resized."
+				},
+				{
+					"name": "resize",
+					"payload": "({ startSize, endSize })",
+					"description": "Emitted after either splitter handle moves."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/stepper",
+		"path": "../components/stepper/DomStepper.vue",
+		"section": "components",
+		"slug": "stepper",
+		"exportName": "DomStepper",
+		"route": "/components/stepper",
+		"doc": {
+			"name": "Stepper",
+			"tag": "<DomStepper>",
+			"description": "Controlled horizontal or vertical progress navigation for multi-step application workflows.",
+			"icon": "M5 12h14M6 12a2 2 0 1 0 0 .01M12 12a2 2 0 1 0 0 .01M18 12a2 2 0 1 0 0 .01",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string | number",
+					"description": "Fired when an enabled step is selected."
+				},
+				{
+					"name": "change",
+					"payload": "StepperChangePayload",
+					"typeRef": "StepperChangePayload",
+					"description": "Fired with the selected step, key, index, and previous key."
+				}
+			],
+			"slots": [
+				{
+					"name": "step",
+					"payload": "StepperSlotPayload",
+					"typeRef": "StepperSlotPayload",
+					"description": "Replace the label and description while retaining navigation and progress structure."
+				},
+				{
+					"name": "indicator",
+					"payload": "StepperSlotPayload",
+					"typeRef": "StepperSlotPayload",
+					"description": "Replace the numbered, completed, or error indicator."
+				},
+				{
+					"name": "separator",
+					"payload": "{ index, previous, next }",
+					"description": "Replace the connector between adjacent steps."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "← / →",
+					"action": "Move between enabled horizontal steps."
+				},
+				{
+					"keys": "↑ / ↓",
+					"action": "Move between enabled vertical steps."
+				},
+				{
+					"keys": "Home / End",
+					"action": "Move to the first or last enabled step."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/tabs",
+		"path": "../components/tabs/DomTabs.vue",
+		"section": "components",
+		"slug": "tabs",
+		"exportName": "DomTabs",
+		"route": "/components/tabs",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "components/theme-switcher",
+		"path": "../components/theme-switcher/DomThemeSwitcher.vue",
+		"section": "components",
+		"slug": "theme-switcher",
+		"exportName": "DomThemeSwitcher",
+		"route": "/components/theme-switcher",
+		"doc": {
+			"name": "Theme switcher",
+			"tag": "<DomThemeSwitcher>",
+			"description": "A DOM Studio light, dark, and system theme preference control.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(mode: \"light\" | \"dark\" | \"system\")",
+					"description": "Emitted when the stored theme mode changes."
+				},
+				{
+					"name": "change",
+					"payload": "({ mode, theme })",
+					"description": "Emitted with the selected preference mode and resolved light or dark theme."
+				}
+			],
+			"playground": {
+				"initial": {
+					"showLabel": true,
+					"size": "icon-sm"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/toast",
+		"path": "../components/toast/DomToastStack.vue",
+		"section": "components",
+		"slug": "toast",
+		"exportName": "DomToastStack",
+		"route": "/components/toast",
+		"doc": {
+			"name": "Toast stack",
+			"tag": "<DomToastStack>",
+			"description": "A polite live-region stack for transient notifications.",
+			"slots": [
+				{
+					"name": "default",
+					"payload": "{ toast, dismiss }",
+					"description": "Custom toast content rendered inside the card. Use this for avatars, actions, or richer markup."
+				}
+			],
+			"events": [
+				{
+					"name": "dismiss",
+					"payload": "(id: string)",
+					"description": "Emitted when a toast is dismissed."
+				},
+				{
+					"name": "action",
+					"payload": "({ id, toast, ...payload })",
+					"description": "Emitted by toast template content, useful for buttons and menus inside a toast."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/toolbar",
+		"path": "../components/toolbar/DomToolbar.vue",
+		"section": "components",
+		"slug": "toolbar",
+		"exportName": "DomToolbar",
+		"route": "/components/toolbar",
+		"doc": {
+			"name": "Toolbar",
+			"tag": "<DomToolbar>",
+			"description": "A compact action surface for icon buttons, segmented controls, filters, and overflow menus.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Toolbar controls."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/tooltip",
+		"path": "../components/tooltip/DomTooltip.vue",
+		"section": "components",
+		"slug": "tooltip",
+		"exportName": "DomTooltip",
+		"route": "/components/tooltip",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "components/tree-view",
+		"path": "../components/tree-view/DomTreeView.vue",
+		"section": "components",
+		"slug": "tree-view",
+		"exportName": "DomTreeView",
+		"route": "/components/tree-view",
+		"doc": {
+			"name": "Tree view",
+			"tag": "<DomTreeView>",
+			"description": "A keyboard navigable hierarchical tree with selection, custom item rendering, lazy loading, and drag/drop reordering.",
+			"icon": "M6 5h5v5H6V5Zm7 2h5M8.5 10v3M6 13h5v5H6v-5Zm7 2h5M8.5 18v1M6 21h5",
+			"slots": [
+				{
+					"name": "item",
+					"payload": "{ item, node, depth, open, selected, loading }",
+					"description": "Custom content inside the default tree row."
+				},
+				{
+					"name": "row",
+					"payload": "{ item, node, depth, open, selected, loading, toggle, select }",
+					"description": "Replace the full tree row while keeping tree structure, focus, and drag/drop wrapper."
+				},
+				{
+					"name": "item.slot",
+					"payload": "{ item, node, depth, open, selected, loading }",
+					"description": "Set item.slot to a named slot for special node rendering."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(value: string | number)",
+					"description": "Emitted when the selected node changes."
+				},
+				{
+					"name": "select",
+					"payload": "({ item, value, node })",
+					"typeRef": "TreeSelectionPayload",
+					"description": "Fired when a tree item is selected."
+				},
+				{
+					"name": "hover",
+					"payload": "({ item, value, node })",
+					"typeRef": "TreeSelectionPayload",
+					"description": "Fired when a pointer enters a tree row."
+				},
+				{
+					"name": "hover-end",
+					"payload": "({ item, value, node })",
+					"typeRef": "TreeSelectionPayload",
+					"description": "Fired when a pointer leaves a tree row."
+				},
+				{
+					"name": "action",
+					"payload": "({ action, item, value, node })",
+					"typeRef": "TreeActionPayload",
+					"description": "Fired when a right-side item action is clicked."
+				},
+				{
+					"name": "context-menu",
+					"payload": "(payload: TreeContextMenuPayload)",
+					"typeRef": "TreeContextMenuPayload",
+					"description": "Fired when a tree row or empty tree space is right-clicked. Use kind to distinguish item from empty context."
+				},
+				{
+					"name": "toggle",
+					"payload": "({ item, value, open })",
+					"typeRef": "TreeTogglePayload",
+					"description": "Fired when a branch is opened or closed."
+				},
+				{
+					"name": "load-children",
+					"payload": "({ item, value })",
+					"typeRef": "TreeLoadChildrenPayload",
+					"description": "Fired when a lazy node is opened and needs children."
+				},
+				{
+					"name": "drag-preview",
+					"payload": "({ item, value, node, position, kind })",
+					"typeRef": "TreeDragPreviewPayload",
+					"description": "Fired while a valid drag target is being previewed."
+				},
+				{
+					"name": "drag-preview-end",
+					"payload": "({ value, position, kind })",
+					"typeRef": "TreeDragPreviewEndPayload",
+					"description": "Fired when the current drag preview is cleared."
+				},
+				{
+					"name": "reorder",
+					"payload": "({ items, item, sourceValue, sourceNode, target, targetValue, targetNode, position })",
+					"typeRef": "TreeReorderPayload",
+					"description": "Fired after drag/drop with a reordered items array."
+				},
+				{
+					"name": "external-drop",
+					"payload": "({ event, dataTransfer, types, getData, item, value, node, position })",
+					"typeRef": "TreeExternalDropPayload",
+					"description": "Fired when accepted data from outside the tree is dropped onto a row."
+				},
+				{
+					"name": "update:items",
+					"payload": "(items: TreeItems)",
+					"description": "Emitted with the reordered tree so callers can sync v-model:items."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "↑ / ↓",
+					"action": "Move focus through visible items."
+				},
+				{
+					"keys": "→",
+					"action": "Open a closed branch, otherwise move to the first child."
+				},
+				{
+					"keys": "←",
+					"action": "Close an open branch, otherwise move to the parent."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Select the focused item."
+				},
+				{
+					"keys": "Home / End",
+					"action": "Move to the first or last visible item."
+				},
+				{
+					"keys": "Alt + ↑ / ↓",
+					"action": "Move the focused item before or after a sibling when draggable is enabled."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/activity-timeline",
+		"path": "../data/activity-timeline/DomActivityTimeline.vue",
+		"section": "data",
+		"slug": "activity-timeline",
+		"exportName": "DomActivityTimeline",
+		"route": "/data/activity-timeline",
+		"doc": {
+			"name": "Activity timeline",
+			"tag": "<DomActivityTimeline>",
+			"description": "Projects application-owned resource rows into an accessible ordered activity trail without owning loading, ordering, querying, or persistence.",
+			"icon": "M6 5h.01M6 12h.01M6 19h.01M10 5h8M10 12h8M10 19h8M6 6v5M6 13v5",
+			"events": [],
+			"slots": [
+				{
+					"name": "item",
+					"payload": "ActivityTimelineSlotPayload",
+					"typeRef": "ActivityTimelineSlotPayload",
+					"description": "Replace the default title, description, status, and metadata content while retaining timeline structure."
+				},
+				{
+					"name": "marker",
+					"payload": "ActivityTimelineSlotPayload",
+					"typeRef": "ActivityTimelineSlotPayload",
+					"description": "Replace the semantic-tone marker for one activity row."
+				},
+				{
+					"name": "opposite",
+					"payload": "ActivityTimelineSlotPayload",
+					"typeRef": "ActivityTimelineSlotPayload",
+					"description": "Replace timestamp and secondary metadata, including the separate column used by split layout."
+				},
+				{
+					"name": "actions",
+					"payload": "ActivityTimelineSlotPayload",
+					"typeRef": "ActivityTimelineSlotPayload",
+					"description": "Append application-owned controls to the default activity content."
+				},
+				{
+					"name": "loading",
+					"payload": "{ count }",
+					"description": "Replace the initial loading placeholders."
+				},
+				{
+					"name": "empty",
+					"description": "Replace the empty collection state."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/agent-chat",
+		"path": "../data/agent-chat/DomAgentChatShell.vue",
+		"section": "data",
+		"slug": "agent-chat",
+		"exportName": "DomAgentChatShell",
+		"route": "/data/agent-chat",
+		"doc": {
+			"name": "Agent chat shell",
+			"tag": "<DomAgentChatShell>",
+			"description": "A three-pane AI chat application shell with a resizable conversation sidebar, scroll-contained conversation window, closable context aside, streaming tool calls, and audio/text handoff controls.",
+			"icon": "M4 5h5v14H4V5Zm7 0h9v14h-9V5Zm2 3h5M13 12h5M13 16h3",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Passes composer updates from the conversation component."
+				},
+				{
+					"name": "update:mode",
+					"payload": "'text' | 'audio'",
+					"description": "Passes audio/text mode changes from the conversation component."
+				},
+				{
+					"name": "update:search",
+					"payload": "string",
+					"description": "Passes sidebar search updates."
+				},
+				{
+					"name": "update:sidebarOpen",
+					"payload": "boolean",
+					"description": "Fired when the sidebar is opened or closed."
+				},
+				{
+					"name": "update:asideOpen",
+					"payload": "boolean",
+					"description": "Fired when the aside is opened or closed."
+				},
+				{
+					"name": "update:sidebarSize",
+					"payload": "number",
+					"description": "Fired when the sidebar splitter changes width."
+				},
+				{
+					"name": "update:asideSize",
+					"payload": "number",
+					"description": "Fired when the aside splitter changes width."
+				},
+				{
+					"name": "select-conversation",
+					"payload": "conversation",
+					"description": "Fired when a sidebar row is selected."
+				},
+				{
+					"name": "new-conversation",
+					"payload": "undefined",
+					"description": "Fired when the sidebar new button is activated."
+				},
+				{
+					"name": "submit",
+					"payload": "({ content, mode, conversation })",
+					"description": "Fired when the composer submits."
+				},
+				{
+					"name": "stop",
+					"payload": "({ conversation })",
+					"description": "Fired when streaming is stopped."
+				},
+				{
+					"name": "tool-action",
+					"payload": "({ action, tool, message })",
+					"description": "Fired by generic or custom tool renderers."
+				}
+			],
+			"slots": [
+				{
+					"name": "sidebar",
+					"payload": "{ conversations, activeConversationId }",
+					"description": "Replace the conversation sidebar."
+				},
+				{
+					"name": "conversation",
+					"payload": "{ conversation, messages, activeAgent }",
+					"description": "Replace the main conversation component."
+				},
+				{
+					"name": "aside",
+					"payload": "{ conversation, activeAgent, toolParts }",
+					"description": "Replace the contextual aside."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/agent-chat",
+		"path": "../data/agent-chat/DomAgentConversation.vue",
+		"section": "data",
+		"slug": "agent-chat",
+		"exportName": "DomAgentConversation",
+		"route": "/data/agent-chat",
+		"doc": {
+			"name": "Agent conversation",
+			"tag": "<DomAgentConversation>",
+			"description": "A scroll-contained AI conversation surface with a fixed header, streaming messages, reasoning summaries, audio/text mode switching, tool-call rendering, and a composer footer.",
+			"icon": "M5 7h14M5 12h10M5 17h6M18 15l3 3-3 3",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the composer text changes."
+				},
+				{
+					"name": "update:mode",
+					"payload": "'text' | 'audio'",
+					"description": "Fired when the composer switches between text and audio mode."
+				},
+				{
+					"name": "submit",
+					"payload": "({ content, mode, conversation })",
+					"description": "Fired when the user submits the composer."
+				},
+				{
+					"name": "stop",
+					"payload": "({ conversation })",
+					"description": "Fired when the user stops an active stream."
+				},
+				{
+					"name": "tool-action",
+					"payload": "({ action, tool, message })",
+					"description": "Fired by generic and custom tool renderers for approvals, retries, and inspection."
+				},
+				{
+					"name": "scroll-bottom",
+					"payload": "({ conversation })",
+					"description": "Fired when the built-in jump-to-bottom control is used."
+				}
+			],
+			"slots": [
+				{
+					"name": "header-leading",
+					"payload": "{ conversation, activeAgent }",
+					"description": "Controls shown before the title, useful for opening an app sidebar."
+				},
+				{
+					"name": "header-actions",
+					"payload": "{ conversation, activeAgent, streaming }",
+					"description": "Controls shown at the end of the header."
+				},
+				{
+					"name": "message",
+					"payload": "{ message, activeAgent, parts }",
+					"description": "Replace the full message renderer."
+				},
+				{
+					"name": "tool",
+					"payload": "{ tool, message, component, action }",
+					"description": "Replace generic tool rendering without supplying toolComponents."
+				},
+				{
+					"name": "composer-attachments",
+					"payload": "{ mode, disabled, streaming }",
+					"description": "Application-owned file, image, or context previews above the composer text."
+				},
+				{
+					"name": "composer-leading",
+					"payload": "{ mode, setMode, disabled, streaming }",
+					"description": "Controls at the start of the composer action row."
+				},
+				{
+					"name": "composer-actions",
+					"payload": "{ mode, setMode, disabled, streaming }",
+					"description": "Controls before the built-in submit or stop action."
+				},
+				{
+					"name": "footer",
+					"payload": "{ value, mode, submit, setMode }",
+					"description": "Replace the built-in composer footer."
+				},
+				{
+					"name": "empty",
+					"description": "Custom empty conversation state."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Enter",
+					"action": "Submit the composer."
+				},
+				{
+					"keys": "Shift + Enter",
+					"action": "Insert a new line."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/agent-chat",
+		"path": "../data/agent-chat/DomAgentConversationList.vue",
+		"section": "data",
+		"slug": "agent-chat",
+		"exportName": "DomAgentConversationList",
+		"route": "/data/agent-chat",
+		"doc": {
+			"name": "Agent conversation list",
+			"tag": "<DomAgentConversationList>",
+			"description": "A reusable AI conversation navigation list with search, agent labels, unread counts, status pills, and active-thread selection.",
+			"icon": "M5 6h14M5 12h14M5 18h8",
+			"events": [
+				{
+					"name": "update:search",
+					"payload": "string",
+					"description": "Fired when the sidebar search changes."
+				},
+				{
+					"name": "select",
+					"payload": "conversation",
+					"description": "Fired when a conversation row is selected."
+				},
+				{
+					"name": "new",
+					"payload": "undefined",
+					"description": "Fired when the new conversation action is activated."
+				}
+			],
+			"slots": [
+				{
+					"name": "actions",
+					"payload": "{ conversations }",
+					"description": "Extra controls beside the heading."
+				},
+				{
+					"name": "conversation",
+					"payload": "{ conversation, active, agent }",
+					"description": "Replace a conversation row."
+				},
+				{
+					"name": "empty",
+					"description": "Custom empty state."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/data-grid",
+		"path": "../data/data-grid/DomDataGrid.vue",
+		"section": "data",
+		"slug": "data-grid",
+		"exportName": "DomDataGrid",
+		"route": "/data/data-grid",
+		"doc": {
+			"name": "Data grid",
+			"tag": "<DomDataGrid>",
+			"description": "A dense spreadsheet-like grid for database records, with typed column filters, sorting, row selection, and a server-query friendly API.\n\t\tWe talk about databases, rendering pipelines, virtual DOMs, and scalable app architecture. But really, they just want Excel.",
+			"icon": "M4 5h16v14H4V5Zm0 4h16M4 13h16M9 5v14M15 5v14",
+			"events": [
+				{
+					"name": "update:filters",
+					"payload": "Record<string, DataGridFilter>",
+					"description": "Fired when a column filter is applied or cleared."
+				},
+				{
+					"name": "update:sort",
+					"payload": "DataGridSort",
+					"description": "Fired when column sorting changes. Complex sort values may include an ordered rules array."
+				},
+				{
+					"name": "update:search",
+					"payload": "string",
+					"description": "Fired when the toolbar search changes."
+				},
+				{
+					"name": "update:selectedKeys",
+					"payload": "Array<string | number>",
+					"description": "Fired when row selection changes."
+				},
+				{
+					"name": "query-change",
+					"payload": "DataGridQuery",
+					"description": "Fired with the normalized search, filters, and sort state. Use this to call a resource API."
+				},
+				{
+					"name": "viewport-scroll",
+					"payload": "{ scrollTop, scrollHeight, clientHeight, remaining, atEnd }",
+					"description": "Fired when the scrollable row viewport scrolls."
+				},
+				{
+					"name": "viewport-end",
+					"payload": "{ scrollTop, scrollHeight, clientHeight, remaining, atEnd }",
+					"description": "Fired when the scrollable row viewport reaches the bottom threshold. Useful for cursor pagination and infinite loading."
+				},
+				{
+					"name": "cell-update",
+					"payload": "({ row, column, rowIndex, rowKey, value, previousValue })",
+					"description": "Re-emitted when a column component emits update:value."
+				},
+				{
+					"name": "cell-action",
+					"payload": "({ row, column, rowIndex, rowKey, value, formatted, action, payload })",
+					"description": "Re-emitted when a column component emits action."
+				},
+				{
+					"name": "column-resize",
+					"payload": "({ column, key, width, previousWidth, startWidth })",
+					"description": "Fired while a header divider is dragged and a column width changes."
+				},
+				{
+					"name": "column-resize-end",
+					"payload": "({ column, key, width, previousWidth, startWidth })",
+					"description": "Fired when the user finishes resizing a column."
+				},
+				{
+					"name": "render-window-change",
+					"payload": "({ startIndex, endIndex, renderedRows, totalRows, firstVisibleIndex, lastVisibleIndex })",
+					"description": "Fired by the virtual row renderer when the mounted row window changes."
+				},
+				{
+					"name": "row-click",
+					"payload": "({ row, index })",
+					"description": "Fired when a data row is clicked."
+				}
+			],
+			"slots": [
+				{
+					"name": "cell",
+					"payload": "{ row, column, value, formatted, rowIndex, rowKey }",
+					"description": "Custom cell renderer."
+				},
+				{
+					"name": "toolbar-actions",
+					"payload": "{ query, clearFilters }",
+					"description": "Extra controls rendered next to search and Clear filters."
+				},
+				{
+					"name": "empty",
+					"description": "Custom empty state."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Enter / Space on a header",
+					"action": "Toggle sort when the column is sortable."
+				},
+				{
+					"keys": "Enter / Space on a filter button",
+					"action": "Open the typed filter popover."
+				},
+				{
+					"keys": "Esc",
+					"action": "Close an open filter popover."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/document-editor",
+		"path": "../data/document-editor/DomDocumentEditor.vue",
+		"section": "data",
+		"slug": "document-editor",
+		"exportName": "DomDocumentEditor",
+		"route": "/data/document-editor",
+		"doc": {
+			"name": "Document editor",
+			"tag": "<DomDocumentEditor>",
+			"description": "A client-only WYSIWYG document editor shell for structured writing, tables, language-aware highlighted code blocks, AI rewrite suggestions, media insertion, video embeds, and optional Yjs collaboration adapters.",
+			"icon": "M5 4h14v16H5V4Zm4 5h6M9 13h6M9 17h3",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "Record<string, unknown> | string",
+					"description": "Fired with JSON or HTML content depending on the output prop."
+				},
+				{
+					"name": "change",
+					"payload": "DocumentEditorChangePayload",
+					"description": "Fired with JSON, HTML, and plain text whenever the editor changes."
+				},
+				{
+					"name": "selection-change",
+					"payload": "DocumentEditorSelectionPayload",
+					"description": "Fired when the editor selection changes."
+				},
+				{
+					"name": "rewrite-request",
+					"payload": "DocumentEditorRewriteRequest",
+					"description": "Fired when the user asks AI to rewrite the selected range."
+				},
+				{
+					"name": "suggestion-create",
+					"payload": "DocumentEditorSuggestion",
+					"description": "Fired after a rewrite suggestion is added to the review rail."
+				},
+				{
+					"name": "suggestion-accept",
+					"payload": "DocumentEditorSuggestion",
+					"description": "Fired after a suggestion is accepted."
+				},
+				{
+					"name": "suggestion-reject",
+					"payload": "DocumentEditorSuggestion",
+					"description": "Fired after a suggestion is rejected."
+				},
+				{
+					"name": "media-request",
+					"payload": "DocumentEditorMediaRequestPayload",
+					"description": "Fired when the image tool or an existing image requests an app-owned media picker."
+				},
+				{
+					"name": "media-insert",
+					"payload": "DocumentEditorMediaPayload",
+					"description": "Fired after insertImage inserts a media-backed image node."
+				},
+				{
+					"name": "media-update",
+					"payload": "DocumentEditorMediaPayload",
+					"description": "Fired after an existing media-backed image node is replaced."
+				},
+				{
+					"name": "video-insert",
+					"payload": "DocumentEditorVideoPayload",
+					"description": "Fired after a video embed node is inserted."
+				},
+				{
+					"name": "tool-action",
+					"payload": "({ tool, editor })",
+					"description": "Fired when a custom toolbar tool is activated."
+				},
+				{
+					"name": "ready",
+					"payload": "({ editor })",
+					"description": "Fired after the browser-only editor runtime mounts."
+				},
+				{
+					"name": "runtime-error",
+					"payload": "Error",
+					"description": "Fired when the editor runtime cannot mount."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the editable document receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the editable document loses focus."
+				}
+			],
+			"slots": [
+				{
+					"name": "toolbar-start",
+					"payload": "{ editor, active }",
+					"description": "Add controls before the built-in toolbar groups."
+				},
+				{
+					"name": "toolbar-end",
+					"payload": "{ editor, active }",
+					"description": "Add controls after the built-in toolbar groups."
+				},
+				{
+					"name": "suggestion",
+					"payload": "{ suggestion, accept, reject }",
+					"description": "Replace a suggestion review card."
+				},
+				{
+					"name": "empty-suggestions",
+					"description": "Replace the empty suggestion rail state."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/filter-bar",
+		"path": "../data/filter-bar/DomFilterBar.vue",
+		"section": "data",
+		"slug": "filter-bar",
+		"exportName": "DomFilterBar",
+		"route": "/data/filter-bar",
+		"doc": {
+			"name": "Filter bar",
+			"tag": "<DomFilterBar>",
+			"description": "A controlled, transport-free query bar for application-owned search and logical filter values.",
+			"icon": "M4 6h16M7 12h10M10 18h4M8 6v3M15 12v3M12 18v2",
+			"events": [
+				{
+					"name": "update:filters",
+					"payload": "Record<string, unknown>",
+					"description": "Fired when one logical filter value changes or is cleared."
+				},
+				{
+					"name": "update:search",
+					"payload": "string",
+					"description": "Fired when the free-text search value changes."
+				},
+				{
+					"name": "query-change",
+					"payload": "FilterBarQuery",
+					"typeRef": "FilterBarQuery",
+					"description": "Fired with the complete normalized query after any control changes."
+				},
+				{
+					"name": "clear",
+					"payload": "FilterBarQuery",
+					"typeRef": "FilterBarQuery",
+					"description": "Fired after the complete query is cleared."
+				}
+			],
+			"slots": [
+				{
+					"name": "leading",
+					"payload": "{ query }",
+					"description": "Content before the built-in search and filters."
+				},
+				{
+					"name": "filter",
+					"payload": "{ definition, value, setValue, clear }",
+					"description": "Replace the control for each filter definition."
+				},
+				{
+					"name": "trailing",
+					"payload": "{ query, clear }",
+					"description": "Application actions after the built-in controls."
+				},
+				{
+					"name": "active-filter",
+					"payload": "{ definition, value, label, clear }",
+					"description": "Replace an active filter chip."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/kanban",
+		"path": "../data/kanban/DomKanban.vue",
+		"section": "data",
+		"slug": "kanban",
+		"exportName": "DomKanban",
+		"route": "/data/kanban",
+		"doc": {
+			"name": "Kanban",
+			"tag": "<DomKanban>",
+			"description": "A controlled, API-shaped Kanban for shared resource rows, custom Vue card renderers, async creation, and precise card or column ordering.",
+			"icon": "M4 5h5v14H4V5Zm7 0h5v9h-5V5Zm7 0h2v11h-2V5Z",
+			"events": [
+				{
+					"name": "update:rows",
+					"payload": "Array<Record<string, unknown>>",
+					"description": "Immutable local projection after a completed card move or creation. Use v-model:rows for local boards."
+				},
+				{
+					"name": "update:columns",
+					"payload": "Array<KanbanColumn>",
+					"description": "Immutable ordered columns after a completed reorder or creation."
+				},
+				{
+					"name": "card-move",
+					"payload": "KanbanCardMove",
+					"typeRef": "KanbanCardMove",
+					"description": "Fired after a valid pointer or keyboard move. Persist changes and orders to a resource API."
+				},
+				{
+					"name": "card-drop",
+					"payload": "KanbanCardMove",
+					"typeRef": "KanbanCardMove",
+					"description": "Alias emitted with card-move for applications that model drag/drop events."
+				},
+				{
+					"name": "card-create-request",
+					"payload": "({ column, columnKey, index, draft, suggestedRow })",
+					"description": "Fired before the optional createCard hook runs."
+				},
+				{
+					"name": "card-create",
+					"payload": "({ column, columnKey, index, draft, result, row, nextRows })",
+					"description": "Fired when the creation hook succeeds or a local suggested row is accepted."
+				},
+				{
+					"name": "card-create-error",
+					"payload": "({ column, columnKey, draft, error })",
+					"description": "Fired when createCard rejects."
+				},
+				{
+					"name": "column-move",
+					"payload": "({ column, columnKey, sourceIndex, targetIndex, columnKeys, nextColumns, input })",
+					"description": "Fired after a valid pointer or keyboard column reorder."
+				},
+				{
+					"name": "column-create-request",
+					"payload": "({ label, suggestedColumn })",
+					"description": "Fired before the optional createColumn hook runs."
+				},
+				{
+					"name": "column-create",
+					"payload": "({ label, result, column, nextColumns })",
+					"description": "Fired when the column creation hook succeeds or a local suggestion is accepted."
+				},
+				{
+					"name": "column-create-error",
+					"payload": "({ label, error })",
+					"description": "Fired when createColumn rejects."
+				},
+				{
+					"name": "card-click",
+					"payload": "({ row, rowKey, column, columnKey, index, event })",
+					"description": "Fired when a card shell is activated without using an inner interactive control."
+				},
+				{
+					"name": "card-action",
+					"payload": "({ row, rowKey, column, columnKey, index, action, payload })",
+					"description": "Re-emitted when a custom card component emits action."
+				},
+				{
+					"name": "card-drag-start",
+					"payload": "({ row, rowKey, source, event })",
+					"description": "Fired when native card dragging begins."
+				},
+				{
+					"name": "card-drag-end",
+					"payload": "({ row, rowKey, source, event })",
+					"description": "Fired when native card dragging ends."
+				}
+			],
+			"slots": [
+				{
+					"name": "card",
+					"payload": "{ row, rowKey, column, columnKey, index, drag }",
+					"description": "Custom card renderer. The component retains the accessible focus and drag shell."
+				},
+				{
+					"name": "column-header",
+					"payload": "{ column, columnKey, index, rows, count, limit }",
+					"description": "Custom content for a column header."
+				},
+				{
+					"name": "empty",
+					"payload": "{ column, columnKey }",
+					"description": "Custom empty-column state."
+				},
+				{
+					"name": "card-composer",
+					"payload": "{ column, columnKey, draft, setDraft, submit, cancel, creating }",
+					"description": "Custom card creation form."
+				},
+				{
+					"name": "column-composer",
+					"payload": "{ draft, setDraft, submit, cancel, creating }",
+					"description": "Custom column creation form."
+				},
+				{
+					"name": "column-footer",
+					"payload": "{ column, columnKey, rows, count }",
+					"description": "Extra content below a column card list."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Alt + Up / Down",
+					"action": "Move the focused card within its current column."
+				},
+				{
+					"keys": "Alt + Left / Right",
+					"action": "Move the focused card into the adjacent column."
+				},
+				{
+					"keys": "Alt + Left / Right on column grip",
+					"action": "Reorder the current column."
+				},
+				{
+					"keys": "Enter",
+					"action": "Submit the built-in card or column composer."
+				},
+				{
+					"keys": "Escape",
+					"action": "Close the active composer."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/media-browser",
+		"path": "../data/media-browser/DomMediaBrowser.vue",
+		"section": "data",
+		"slug": "media-browser",
+		"exportName": "DomMediaBrowser",
+		"route": "/data/media-browser",
+		"doc": {
+			"name": "Media browser",
+			"tag": "<DomMediaBrowser>",
+			"description": "A folder-aware media library surface for server-backed files, optimistic Pinia stores, custom file renderers, drag and drop, upload progress, and picker workflows.",
+			"icon": "M4 7h6l2 2h8v9H4V7Zm3 6h10M8 16h4",
+			"events": [
+				{
+					"name": "update:selectedKeys",
+					"payload": "Array<string>",
+					"description": "Fired when the user changes the selected media rows."
+				},
+				{
+					"name": "update:mode",
+					"payload": "'grid' | 'list'",
+					"description": "Fired when the user switches between grid and list layout."
+				},
+				{
+					"name": "selection-change",
+					"payload": "MediaBrowserSelectionPayload",
+					"typeRef": "MediaBrowserSelectionPayload",
+					"description": "Fired with selected keys and resolved rows."
+				},
+				{
+					"name": "navigate",
+					"payload": "({ path, item, breadcrumb, event })",
+					"description": "Fired when the user opens a folder or breadcrumb."
+				},
+				{
+					"name": "create-folder",
+					"payload": "({ path })",
+					"description": "Fired when the built-in new-folder action is activated."
+				},
+				{
+					"name": "rename",
+					"payload": "({ item, name })",
+					"description": "Fired after inline rename is committed."
+				},
+				{
+					"name": "move",
+					"payload": "MediaBrowserMovePayload",
+					"typeRef": "MediaBrowserMovePayload",
+					"description": "Fired when one or more selected rows are dropped onto a folder."
+				},
+				{
+					"name": "upload",
+					"payload": "MediaBrowserUploadPayload",
+					"typeRef": "MediaBrowserUploadPayload",
+					"description": "Fired when files are selected through the upload button or files and folders are dropped onto the current browser or a folder."
+				},
+				{
+					"name": "metadata-update",
+					"payload": "({ item, meta })",
+					"description": "Fired when the default inspector commits editable metadata such as image alt text."
+				},
+				{
+					"name": "make-folder-with-items",
+					"payload": "({ items, path })",
+					"description": "Fired from the context menu when the selection should be grouped into a new folder."
+				},
+				{
+					"name": "context-action",
+					"payload": "({ action, items, path })",
+					"description": "Fired for context menu actions after built-in handling."
+				},
+				{
+					"name": "detail-open",
+					"payload": "MediaBrowserDetailPayload",
+					"typeRef": "MediaBrowserDetailPayload",
+					"description": "Fired when a row with a detail component opens in dialog or inline mode."
+				},
+				{
+					"name": "detail-close",
+					"payload": "MediaBrowserDetailPayload",
+					"typeRef": "MediaBrowserDetailPayload",
+					"description": "Fired when the current detail component closes."
+				},
+				{
+					"name": "open",
+					"payload": "MediaBrowserItemPayload",
+					"typeRef": "MediaBrowserItemPayload",
+					"description": "Fired when a non-folder row is opened."
+				},
+				{
+					"name": "item-click",
+					"payload": "MediaBrowserItemPayload",
+					"typeRef": "MediaBrowserItemPayload",
+					"description": "Fired before selection handling when a visible row is clicked."
+				}
+			],
+			"slots": [
+				{
+					"name": "toolbar",
+					"payload": "{ selectedItems, selectedKeys, mode, currentPath, setMode, viewModeOptions }",
+					"description": "Replace or extend the toolbar for detached picker controls."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, kind, selected, disabled, mode, rename }",
+					"description": "Replace the full item body."
+				},
+				{
+					"name": "inspector",
+					"payload": "{ item, kind, file, selectedItems }",
+					"description": "Replace the inspector panel body."
+				},
+				{
+					"name": "detail",
+					"payload": "{ item, kind, file, mode, close }",
+					"description": "Replace a detail component body for dialog or inline rendering."
+				},
+				{
+					"name": "empty",
+					"description": "Custom empty-folder state."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Enter on folder",
+					"action": "Navigate into the folder."
+				},
+				{
+					"keys": "Enter / Space on file",
+					"action": "Select the file."
+				},
+				{
+					"keys": "F2 on selected row",
+					"action": "Start inline rename."
+				},
+				{
+					"keys": "Enter in rename input",
+					"action": "Commit the rename."
+				},
+				{
+					"keys": "Esc in rename input",
+					"action": "Cancel the rename."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/month-calendar",
+		"path": "../data/month-calendar/DomMonthCalendar.vue",
+		"section": "data",
+		"slug": "month-calendar",
+		"exportName": "DomMonthCalendar",
+		"route": "/data/month-calendar",
+		"doc": {
+			"name": "Month calendar",
+			"tag": "<DomMonthCalendar>",
+			"description": "A large scrolling month calendar that keeps weekday grids aligned, supports continuous date streams, and lets each day render custom UI.",
+			"icon": "M7 4v3M17 4v3M5 8h14M6 6h12v13H6V6Zm3 6h2M13 12h2M9 16h2M13 16h2",
+			"events": [
+				{
+					"name": "day-click",
+					"payload": "({ cell, event })",
+					"typeRef": "MonthCalendarDayClickPayload",
+					"description": "Fired when a clickable day is activated."
+				},
+				{
+					"name": "day-drag-start",
+					"payload": "({ cell, sourceCell, sourceValue, data, event })",
+					"typeRef": "MonthCalendarDayDragPayload",
+					"description": "Fired when an item using dragAttrs starts dragging from a day."
+				},
+				{
+					"name": "day-drag-enter",
+					"payload": "({ cell, sourceCell, targetCell, sourceValue, targetValue, data, event })",
+					"typeRef": "MonthCalendarDayDragPayload",
+					"description": "Fired when a dragged item previews a day as the drop target."
+				},
+				{
+					"name": "day-drag-leave",
+					"payload": "({ cell, sourceCell, targetCell, sourceValue, targetValue, data, event })",
+					"typeRef": "MonthCalendarDayDragPayload",
+					"description": "Fired when a dragged item leaves a previewed day."
+				},
+				{
+					"name": "day-drop",
+					"payload": "({ cell, sourceCell, targetCell, sourceValue, targetValue, data, event })",
+					"typeRef": "MonthCalendarDayDragPayload",
+					"description": "Fired when a draggable item is dropped onto a day. The calendar does not mutate records."
+				},
+				{
+					"name": "day-drag-end",
+					"payload": "({ cell, sourceCell, targetCell, sourceValue, targetValue, data, event })",
+					"typeRef": "MonthCalendarDayDragPayload",
+					"description": "Fired when a drag started with dragAttrs ends."
+				}
+			],
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ cell, month, drag, dragAttrs }",
+					"typeRef": "MonthCalendarDaySlotPayload",
+					"description": "Custom content inside each visible calendar day. Use dragAttrs(data) on items that should be draggable."
+				},
+				{
+					"name": "month-header",
+					"payload": "{ month }",
+					"description": "Custom content rendered opposite separated month titles or above a continuous range."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Tab",
+					"action": "Move through clickable days when clickable is enabled."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Activate the focused day."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "data/week-planner",
+		"path": "../data/week-planner/DomWeekPlanner.vue",
+		"section": "data",
+		"slug": "week-planner",
+		"exportName": "DomWeekPlanner",
+		"route": "/data/week-planner",
+		"doc": {
+			"name": "Week planner",
+			"tag": "<DomWeekPlanner>",
+			"description": "A fixed-width week scheduler with days as horizontally scrolling swim lanes and time chunks as rows.",
+			"icon": "M7 4v3M17 4v3M5 8h14M6 6h12v13H6V6Zm4 5h6M9 16h4",
+			"events": [
+				{
+					"name": "day-click",
+					"payload": "({ cell, targetTime, targetMinutes, event })",
+					"typeRef": "WeekPlannerDayClickPayload",
+					"description": "Fired when a clickable day header, all-day cell, or timed row is activated."
+				},
+				{
+					"name": "time-range-select",
+					"payload": "({ cell, value, startTime, endTime, startMinutes, endMinutes, event })",
+					"typeRef": "WeekPlannerTimeRangePayload",
+					"description": "Fired after a mouse or pen drag selects a snapped time range. The planner does not create or persist records."
+				},
+				{
+					"name": "day-drag-start",
+					"payload": "({ cell, sourceValue, sourceTime, data, event })",
+					"typeRef": "WeekPlannerDayDragPayload",
+					"description": "Fired when an item using dragAttrs starts dragging."
+				},
+				{
+					"name": "day-drag-enter",
+					"payload": "({ sourceCell, targetCell, targetValue, targetTime, data, event })",
+					"typeRef": "WeekPlannerDayDragPayload",
+					"description": "Fired when a draggable item previews a day and time."
+				},
+				{
+					"name": "day-drag-leave",
+					"payload": "({ sourceCell, targetCell, targetValue, targetTime, data, event })",
+					"typeRef": "WeekPlannerDayDragPayload",
+					"description": "Fired when a draggable item leaves a day lane."
+				},
+				{
+					"name": "day-drop",
+					"payload": "({ sourceCell, targetCell, sourceValue, targetValue, sourceTime, targetTime, data, event })",
+					"typeRef": "WeekPlannerDayDragPayload",
+					"description": "Fired when an item is dropped. The planner does not mutate records."
+				},
+				{
+					"name": "day-drag-end",
+					"payload": "({ sourceCell, targetCell, sourceValue, targetValue, sourceTime, targetTime, data, event })",
+					"typeRef": "WeekPlannerDayDragPayload",
+					"description": "Fired when a drag started with dragAttrs ends."
+				},
+				{
+					"name": "viewport-scroll",
+					"payload": "({ scrollLeft, scrollWidth, clientWidth, remaining, atStart, atEnd })",
+					"typeRef": "WeekPlannerViewportPayload",
+					"description": "Fired while the internal two-axis viewport scrolls horizontally."
+				},
+				{
+					"name": "viewport-end",
+					"payload": "({ scrollLeft, scrollWidth, clientWidth, remaining, atStart, atEnd })",
+					"typeRef": "WeekPlannerViewportPayload",
+					"description": "Fired when horizontal scrolling reaches the end threshold. Apps can append another date range."
+				},
+				{
+					"name": "render-window-change",
+					"payload": "({ startIndex, endIndex, renderedWeeks, totalWeeks, start, end })",
+					"typeRef": "WeekPlannerRenderWindowPayload",
+					"description": "Fired when the mounted virtual week window changes so apps can fetch its record range."
+				}
+			],
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ cell, month, week, timeSlots, drag, dragAttrs, rangeStyle }",
+					"typeRef": "WeekPlannerDaySlotPayload",
+					"description": "Timed content layer for each day. Use rangeStyle(record) with records containing startTime and endTime."
+				},
+				{
+					"name": "day-header",
+					"payload": "{ cell, month, week }",
+					"description": "Custom day-column header content."
+				},
+				{
+					"name": "all-day",
+					"payload": "{ cell, month, week, drag, dragAttrs }",
+					"description": "All-day content rendered above the timed rows."
+				},
+				{
+					"name": "time-label",
+					"payload": "{ slot }",
+					"description": "Custom sticky time-rail label."
+				},
+				{
+					"name": "corner",
+					"payload": "{ range }",
+					"description": "Content above the sticky time rail."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Tab",
+					"action": "Move through day headers, all-day cells, and time rows when clickable is enabled."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Activate the focused day or time row."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "dev/code-block",
+		"path": "../dev/code-block/DomCodeBlock.vue",
+		"section": "dev",
+		"slug": "code-block",
+		"exportName": "DomCodeBlock",
+		"route": "/dev/code-block",
+		"doc": {
+			"name": "Code block",
+			"tag": "<DomCodeBlock>",
+			"description": "A syntax-highlighted code block for examples, API snippets, and generated source previews.",
+			"icon": "M8 9l-4 3 4 3M16 9l4 3-4 3M14 5l-4 14",
+			"playground": {
+				"initial": {
+					"code": "import { DomCodeBlock } from '@getdom/studio/vue';\n\nconst source = '<DomButton>Save</DomButton>';",
+					"lang": "js",
+					"framed": true,
+					"previewLines": 0
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "dev/json-viewer",
+		"path": "../dev/json-viewer/DomJsonViewer.vue",
+		"section": "dev",
+		"slug": "json-viewer",
+		"exportName": "DomJsonViewer",
+		"route": "/dev/json-viewer",
+		"doc": {
+			"name": "JSON viewer",
+			"tag": "<DomJsonViewer>",
+			"description": "A read-only JSON viewer with a collapsible tree, formatted source view, syntax highlighting, and copy support.",
+			"icon": "M5 5h5v5H5V5Zm9 0h5v5h-5V5ZM5 14h5v5H5v-5Zm9 0h5v5h-5v-5Z",
+			"events": [
+				{
+					"name": "update:mode",
+					"payload": "'tree' | 'code'",
+					"description": "Fired when the built-in mode toggle changes the active view."
+				},
+				{
+					"name": "copy",
+					"payload": "string",
+					"description": "Fired after formatted JSON is copied to the clipboard."
+				}
+			],
+			"playground": {
+				"initial": {
+					"title": "API response",
+					"filename": "response.json",
+					"value": {
+						"ok": true,
+						"data": {
+							"id": "project_dom_studio",
+							"status": "active",
+							"features": [
+								"components",
+								"blocks",
+								"theme"
+							]
+						}
+					}
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/autocomplete",
+		"path": "../forms/autocomplete/DomAutocomplete.vue",
+		"section": "forms",
+		"slug": "autocomplete",
+		"exportName": "DomAutocomplete",
+		"route": "/forms/autocomplete",
+		"doc": {
+			"name": "Autocomplete",
+			"tag": "<DomAutocomplete>",
+			"description": "Free-text autocomplete with optional suggestions, floating positioning, keyboard navigation, and query events for async lookups.",
+			"slots": [
+				{
+					"name": "item",
+					"payload": "{ item, index }",
+					"description": "Replaces the rendering of each suggestion."
+				}
+			],
+			"events": [
+				{
+					"name": "query",
+					"payload": "(query: string)",
+					"description": "Fired as the user types. Use it to fetch or replace suggestions."
+				},
+				{
+					"name": "select",
+					"payload": "({ item, value, label, text, query })",
+					"description": "Fired when a suggestion is chosen. item is the original option object."
+				},
+				{
+					"name": "commit",
+					"payload": "({ value, label, custom })",
+					"description": "Fired when the current text is committed with Enter."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/calendar",
+		"path": "../forms/calendar/DomCalendar.vue",
+		"section": "forms",
+		"slug": "calendar",
+		"exportName": "DomCalendar",
+		"route": "/forms/calendar",
+		"doc": {
+			"name": "Calendar",
+			"tag": "<DomCalendar>",
+			"description": "A compact month calendar for choosing a date, with month and year navigation.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "YYYY-MM-DD",
+					"description": "Fired when a date is selected."
+				},
+				{
+					"name": "change",
+					"payload": "YYYY-MM-DD",
+					"description": "Fired when a date is selected."
+				},
+				{
+					"name": "view-change",
+					"payload": "({ month, year })",
+					"description": "Fired when the visible month or year changes."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "ArrowLeft / ArrowRight",
+					"action": "Move focus one day backward or forward."
+				},
+				{
+					"keys": "ArrowUp / ArrowDown",
+					"action": "Move focus one week backward or forward."
+				},
+				{
+					"keys": "Home / End",
+					"action": "Move focus to the first or last day of the current week."
+				},
+				{
+					"keys": "PageUp / PageDown",
+					"action": "Move focus to the same day in the previous or next month."
+				},
+				{
+					"keys": "Shift + PageUp / PageDown",
+					"action": "Move focus to the same day in the previous or next year."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Select the focused date."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/checkbox",
+		"path": "../forms/checkbox/DomCheckbox.vue",
+		"section": "forms",
+		"slug": "checkbox",
+		"exportName": "DomCheckbox",
+		"route": "/forms/checkbox",
+		"doc": {
+			"name": "Checkbox",
+			"tag": "<DomCheckbox>",
+			"description": "A single accessible checkbox with a visible label and keyboard support.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(checked: boolean)",
+					"description": "Emitted when checked changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/class-toggle-input",
+		"path": "../forms/class-toggle-input/DomClassToggleInput.vue",
+		"section": "forms",
+		"slug": "class-toggle-input",
+		"exportName": "DomClassToggleInput",
+		"route": "/forms/class-toggle-input",
+		"doc": {
+			"name": "Class toggle input",
+			"tag": "<DomClassToggleInput>",
+			"description": "A class-name autocomplete that keeps every class as a checkbox so utilities can be toggled without being forgotten.",
+			"icon": "M4 7h4l2 2 4-5 2 2-6 7-4-4H4V7Zm0 10h4l2 2 4-5 2 2-6 7-4-4H4v-2Z",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Emitted with the enabled class string."
+				},
+				{
+					"name": "update:inactiveValues",
+					"payload": "string[]",
+					"description": "Emitted with known classes that are currently toggled off."
+				},
+				{
+					"name": "query",
+					"payload": "string",
+					"description": "Fired as the user types."
+				},
+				{
+					"name": "toggle",
+					"payload": "({ value, enabled, classes, inactiveValues })",
+					"description": "Fired when a class checkbox is toggled."
+				},
+				{
+					"name": "add",
+					"payload": "({ value, classes, inactiveValues })",
+					"description": "Fired when a typed or suggested class is added."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/code-input",
+		"path": "../forms/code-input/DomCodeInput.vue",
+		"section": "forms",
+		"slug": "code-input",
+		"exportName": "DomCodeInput",
+		"route": "/forms/code-input",
+		"doc": {
+			"name": "Code input",
+			"tag": "<DomCodeInput>",
+			"description": "A form input for code or structured text. It progressively enhances to CodeMirror from a CDN and falls back to a textarea if loading fails.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the code changes."
+				},
+				{
+					"name": "focus",
+					"description": "Fired when the input receives focus."
+				},
+				{
+					"name": "blur",
+					"description": "Fired when the input loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/color-input",
+		"path": "../forms/color-input/DomColorInput.vue",
+		"section": "forms",
+		"slug": "color-input",
+		"exportName": "DomColorInput",
+		"route": "/forms/color-input",
+		"doc": {
+			"name": "Color input",
+			"tag": "<DomColorInput>",
+			"description": "A compact colour swatch that opens the native colour picker while preserving CSS colour values.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the colour changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when either control receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when either control loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/combobox",
+		"path": "../forms/combobox/DomCombobox.vue",
+		"section": "forms",
+		"slug": "combobox",
+		"exportName": "DomCombobox",
+		"route": "/forms/combobox",
+		"doc": {
+			"name": "Combobox",
+			"tag": "<DomCombobox>",
+			"description": "Select-like combobox with a styled input, floating list, keyboard navigation, and query events for async lookups.",
+			"slots": [
+				{
+					"name": "item",
+					"payload": "{ item, index }",
+					"description": "Replaces the rendering of each option."
+				}
+			],
+			"events": [
+				{
+					"name": "query",
+					"payload": "(query: string)",
+					"description": "Fired as the user types. Use it to fetch or replace options."
+				},
+				{
+					"name": "select",
+					"payload": "({ item, value, label })",
+					"description": "Fired when an option is selected. item is the original option object."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/confirmation-code-input",
+		"path": "../forms/confirmation-code-input/DomConfirmationCodeInput.vue",
+		"section": "forms",
+		"slug": "confirmation-code-input",
+		"exportName": "DomConfirmationCodeInput",
+		"route": "/forms/confirmation-code-input",
+		"doc": {
+			"name": "Confirmation code input",
+			"tag": "<DomConfirmationCodeInput>",
+			"description": "A segmented confirmation-code field with one character per box, automatic focus movement, and full-code paste support.",
+			"icon": "M4 8h3v3H4V8Zm6 0h3v3h-3V8Zm6 0h3v3h-3V8ZM4 14h3v3H4v-3Zm6 0h3v3h-3v-3Zm6 0h3v3h-3v-3Z",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired whenever the entered code changes."
+				},
+				{
+					"name": "complete",
+					"payload": "string",
+					"description": "Fired when every character box contains a value."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when focus enters the segmented control."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when focus leaves the segmented control."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Character",
+					"action": "Enter one character and move focus to the next box."
+				},
+				{
+					"keys": "Backspace",
+					"action": "Clear the current box, or move back and clear the previous box when empty."
+				},
+				{
+					"keys": "Delete",
+					"action": "Clear the current box."
+				},
+				{
+					"keys": "Left / Right",
+					"action": "Move between character boxes."
+				},
+				{
+					"keys": "Home / End",
+					"action": "Move to the first or last character box."
+				},
+				{
+					"keys": "Paste",
+					"action": "Distribute a complete or partial code across the boxes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/date-picker",
+		"path": "../forms/date-picker/DomDatePicker.vue",
+		"section": "forms",
+		"slug": "date-picker",
+		"exportName": "DomDatePicker",
+		"route": "/forms/date-picker",
+		"doc": {
+			"name": "Date picker",
+			"tag": "<DomDatePicker>",
+			"description": "A text date input with a popover calendar picker. Stores YYYY-MM-DD while letting people type dd/mm/yyyy or mm/dd/yyyy.",
+			"icon": "M7 4v3M17 4v3M5 8h14M6 6h12v13H6V6Zm3 6h2M13 12h2M9 16h2M13 16h2",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "YYYY-MM-DD",
+					"description": "Fired when a valid date is typed or selected."
+				},
+				{
+					"name": "change",
+					"payload": "YYYY-MM-DD",
+					"description": "Fired when a valid date is committed."
+				},
+				{
+					"name": "invalid-date",
+					"payload": "string",
+					"description": "Fired when typed text cannot be parsed or is outside the allowed range."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the text input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the text input loses focus."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Alt + ArrowDown",
+					"action": "Open the calendar popover."
+				},
+				{
+					"keys": "Enter",
+					"action": "Commit the typed date when it is valid."
+				},
+				{
+					"keys": "Esc",
+					"action": "Close the popover."
+				},
+				{
+					"keys": "Arrow keys in calendar",
+					"action": "Move focus by day or week once the calendar is open."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/date-time-picker",
+		"path": "../forms/date-time-picker/DomDateTimePicker.vue",
+		"section": "forms",
+		"slug": "date-time-picker",
+		"exportName": "DomDateTimePicker",
+		"route": "/forms/date-time-picker",
+		"doc": {
+			"name": "Date time picker",
+			"tag": "<DomDateTimePicker>",
+			"description": "A typed date and time input with a popover calendar and time selector. Stores a local YYYY-MM-DDTHH:mm value.",
+			"icon": "M7 4v3M17 4v3M5 8h14M6 6h12v13H6V6Zm7 7v3l2 1",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "YYYY-MM-DDTHH:mm",
+					"description": "Fired when a valid date-time is typed or selected."
+				},
+				{
+					"name": "change",
+					"payload": "YYYY-MM-DDTHH:mm",
+					"description": "Fired when a valid date-time is committed."
+				},
+				{
+					"name": "invalid-date-time",
+					"payload": "string",
+					"description": "Fired when typed text cannot be parsed or is outside the allowed range."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the text input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the text input loses focus."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Alt + ArrowDown",
+					"action": "Open the calendar and time popover."
+				},
+				{
+					"keys": "Enter",
+					"action": "Commit the typed date-time when it is valid."
+				},
+				{
+					"keys": "Esc",
+					"action": "Close the popover."
+				},
+				{
+					"keys": "Arrow keys in calendar",
+					"action": "Move focus by day or week once the calendar is open."
+				},
+				{
+					"keys": "Tab",
+					"action": "Move through generated time options."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/email-input",
+		"path": "../forms/email-input/DomEmailInput.vue",
+		"section": "forms",
+		"slug": "email-input",
+		"exportName": "DomEmailInput",
+		"route": "/forms/email-input",
+		"doc": {
+			"name": "Email input",
+			"tag": "<DomEmailInput>",
+			"description": "A convention text field for email addresses with email type, autocomplete, and an email validator.",
+			"icon": "M4.75 6.75h14.5v10.5H4.75V6.75Zm0 0 7.25 5.5 7.25-5.5",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the email address changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the input loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/field",
+		"path": "../forms/field/DomField.vue",
+		"section": "forms",
+		"slug": "field",
+		"exportName": "DomField",
+		"route": "/forms/field",
+		"doc": {
+			"name": "Field",
+			"tag": "<DomField>",
+			"description": "Shared form chrome for labels, required markers, descriptions, errors, and custom controls.",
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ invalid, errors, htmlFor, errorId, fields, fieldAttrs }",
+					"description": "The form control or custom interactive content."
+				},
+				{
+					"name": "label",
+					"payload": "{ label, required, htmlFor, invalid, errors, fields, fieldAttrs }",
+					"description": "Replace the default label while keeping field layout."
+				},
+				{
+					"name": "errors",
+					"payload": "{ errors, errorId, invalid, fields, fieldAttrs }",
+					"description": "Replace the default error list."
+				},
+				{
+					"name": "description",
+					"payload": "{ description, descriptionId, fields, fieldAttrs }",
+					"description": "Replace the default helper text."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/file-upload",
+		"path": "../forms/file-upload/DomFileUpload.vue",
+		"section": "forms",
+		"slug": "file-upload",
+		"exportName": "DomFileUpload",
+		"route": "/forms/file-upload",
+		"doc": {
+			"name": "File upload",
+			"tag": "<DomFileUpload>",
+			"description": "A generic local file picker and dropzone for forms. Uploading, persistence, and media APIs stay parent-owned.",
+			"icon": "M12 16V4M8 8l4-4 4 4M5 16v3h14v-3",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "Array<File | DomUploadedFile>",
+					"description": "Fired when the local file list changes."
+				},
+				{
+					"name": "add",
+					"payload": "Array<File>",
+					"description": "Fired with accepted local File objects."
+				},
+				{
+					"name": "remove",
+					"payload": "{ file, index }",
+					"description": "Fired when a file row is removed."
+				},
+				{
+					"name": "reject",
+					"payload": "Array<DomFileUploadRejection>",
+					"description": "Fired when files fail accept, size, or count checks."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the native file input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the native file input loses focus."
+				}
+			],
+			"playground": {
+				"initial": {
+					"label": "Receipt",
+					"description": "Attach images or PDFs. Uploading is handled by the parent.",
+					"accept": "image/*,.pdf",
+					"maxFiles": 3
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/form",
+		"path": "../forms/form/DomForm.vue",
+		"section": "forms",
+		"slug": "form",
+		"exportName": "DomForm",
+		"route": "/forms/form",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "forms/icon-selector",
+		"path": "../forms/icon-selector/DomIconSelector.vue",
+		"section": "forms",
+		"slug": "icon-selector",
+		"exportName": "DomIconSelector",
+		"route": "/forms/icon-selector",
+		"doc": {
+			"name": "Icon selector",
+			"tag": "<DomIconSelector>",
+			"description": "A searchable select-style field for choosing SVG path icons, emoji, or app-defined symbol rows.",
+			"icon": "M5 5h5v5H5V5Zm9 0h5v5h-5V5ZM5 14h5v5H5v-5Zm9 0h5v5h-5v-5Z",
+			"playground": {
+				"initial": {
+					"label": "Icon",
+					"modelValue": "M12 5v14M5 12h14",
+					"kind": "icons",
+					"placeholder": "Search icons"
+				}
+			},
+			"slots": [
+				{
+					"name": "preview",
+					"payload": "{ item }",
+					"description": "Replace the selected-value preview inside the input."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, selected }",
+					"description": "Replace each icon, emoji, or custom row in the picker panel."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string | number | boolean | Component",
+					"description": "Fired with the selected icon path, emoji, component, or custom item value."
+				},
+				{
+					"name": "select",
+					"payload": "{ item, value, label }",
+					"description": "Fired when a picker item is selected."
+				},
+				{
+					"name": "query",
+					"payload": "string",
+					"description": "Fired as the user searches the picker."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/input-group",
+		"path": "../forms/input-group/DomInputGroup.vue",
+		"section": "forms",
+		"slug": "input-group",
+		"exportName": "DomInputGroup",
+		"route": "/forms/input-group",
+		"doc": {
+			"name": "Input group",
+			"tag": "<DomInputGroup>",
+			"description": "A display-only frame that presents several independent form controls as one grouped input, followed by optional feedback and their errors.",
+			"icon": "M5 5h14v14H5V5Zm0 7h14",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Form controls using chrome=\"false\". Each control keeps its own model, name, validation, and form registration."
+				},
+				{
+					"name": "feedback",
+					"description": "Supporting content shown outside the shared frame and before validation errors."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/json-input",
+		"path": "../forms/json-input/DomJsonInput.vue",
+		"section": "forms",
+		"slug": "json-input",
+		"exportName": "DomJsonInput",
+		"route": "/forms/json-input",
+		"doc": {
+			"name": "JSON input",
+			"tag": "<DomJsonInput>",
+			"description": "A JSON form input backed by DomCodeInput. Valid JSON emits parsed data; invalid JSON stays local and shows an error.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "object | array | string | number | boolean | null",
+					"description": "Fired with parsed JSON when the editor contains valid JSON."
+				},
+				{
+					"name": "valid",
+					"payload": "parsed value",
+					"description": "Fired when JSON parses successfully."
+				},
+				{
+					"name": "invalid",
+					"payload": "Error",
+					"description": "Fired when JSON cannot be parsed."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/json-list-input",
+		"path": "../forms/json-list-input/DomJsonListInput.vue",
+		"section": "forms",
+		"slug": "json-list-input",
+		"exportName": "DomJsonListInput",
+		"route": "/forms/json-list-input",
+		"doc": {
+			"name": "JSON list input",
+			"tag": "<DomJsonListInput>",
+			"description": "A schema-aware editor for arrays of objects. Edit rows through form controls, or toggle to raw JSON for bulk changes.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "Array<object>",
+					"description": "Fired when rows are added, removed, reordered, edited, or replaced from valid raw JSON."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/listbox",
+		"path": "../forms/listbox/DomListbox.vue",
+		"section": "forms",
+		"slug": "listbox",
+		"exportName": "DomListbox",
+		"route": "/forms/listbox",
+		"doc": {
+			"name": "Listbox",
+			"tag": "<DomListbox>",
+			"description": "A styled select-like list without free-text entry.",
+			"slots": [
+				{
+					"name": "option",
+					"payload": "{ option, index }",
+					"description": "Custom option markup."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(value: string)",
+					"description": "Emitted when selection changes."
+				},
+				{
+					"name": "select",
+					"payload": "({ option, value })",
+					"description": "Emitted with the full selected option."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/money-input",
+		"path": "../forms/money-input/DomMoneyInput.vue",
+		"section": "forms",
+		"slug": "money-input",
+		"exportName": "DomMoneyInput",
+		"route": "/forms/money-input",
+		"doc": {
+			"name": "Money input",
+			"tag": "<DomMoneyInput>",
+			"description": "A field-compatible decimal input with currency chrome for prices, budgets, invoices, and payouts.",
+			"icon": "M12 5v14M7 8h7a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h8",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string | number",
+					"description": "Fired when the amount changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the input loses focus."
+				}
+			],
+			"playground": {
+				"initial": {
+					"label": "Price",
+					"modelValue": "149.00",
+					"currency": "GBP",
+					"description": "Stored as a decimal string; upload and billing logic stay parent-owned."
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/native-select",
+		"path": "../forms/native-select/DomNativeSelect.vue",
+		"section": "forms",
+		"slug": "native-select",
+		"exportName": "DomNativeSelect",
+		"route": "/forms/native-select",
+		"doc": {
+			"name": "Native select",
+			"tag": "<DomNativeSelect>",
+			"description": "A styled native select for cases where browser-native picker behaviour is intentionally preferred.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the selected option changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/number-input",
+		"path": "../forms/number-input/DomNumberInput.vue",
+		"section": "forms",
+		"slug": "number-input",
+		"exportName": "DomNumberInput",
+		"route": "/forms/number-input",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "forms/password-input",
+		"path": "../forms/password-input/DomPasswordInput.vue",
+		"section": "forms",
+		"slug": "password-input",
+		"exportName": "DomPasswordInput",
+		"route": "/forms/password-input",
+		"doc": {
+			"name": "Password input",
+			"tag": "<DomPasswordInput>",
+			"description": "A styled password field with show/hide control, strength feedback, and an optional compromised-password warning.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the password text changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/password-strength",
+		"path": "../forms/password-strength/DomPasswordStrength.vue",
+		"section": "forms",
+		"slug": "password-strength",
+		"exportName": "DomPasswordStrength",
+		"route": "/forms/password-strength",
+		"doc": {
+			"name": "Password strength",
+			"tag": "<DomPasswordStrength>",
+			"description": "A display-only password strength meter that can read a named DomForm field or a direct model value.",
+			"icon": "M4 18h3V9H4v9Zm6 0h3V6h-3v12Zm6 0h3V3h-3v15Z",
+			"playground": {
+				"initial": {
+					"modelValue": "violet-orbit-lantern-47!"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/position-input",
+		"path": "../forms/position-input/DomPositionInput.vue",
+		"section": "forms",
+		"slug": "position-input",
+		"exportName": "DomPositionInput",
+		"route": "/forms/position-input",
+		"doc": {
+			"name": "Position input",
+			"tag": "<DomPositionInput>",
+			"description": "A compact visual picker for popover and floating element positions.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the selected position changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/radio-group",
+		"path": "../forms/radio-group/DomRadioGroup.vue",
+		"section": "forms",
+		"slug": "radio-group",
+		"exportName": "DomRadioGroup",
+		"route": "/forms/radio-group",
+		"doc": {
+			"name": "Radio group",
+			"tag": "<DomRadioGroup>",
+			"description": "A single-select radio group with roving focus and full styling control.",
+			"slots": [
+				{
+					"name": "option",
+					"payload": "{ option, index }",
+					"description": "Custom option markup."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(value: string)",
+					"description": "Emitted when selection changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/range-input",
+		"path": "../forms/range-input/DomRangeInput.vue",
+		"section": "forms",
+		"slug": "range-input",
+		"exportName": "DomRangeInput",
+		"route": "/forms/range-input",
+		"doc": {
+			"name": "Range input",
+			"tag": "<DomRangeInput>",
+			"description": "A compact slider input for numeric values with a stylable track and handle.",
+			"icon": "M5 12h14M8 12a2 2 0 1 0 0.01 0M16 12a2 2 0 1 0 0.01 0",
+			"slots": [],
+			"playground": {
+				"initial": {
+					"label": "Confidence",
+					"modelValue": 64,
+					"suffix": "%",
+					"handleClass": "size-5 border-2 border-canvas shadow-md group-hover:scale-110",
+					"activeHandleClass": "scale-125 ring-4 ring-primary/20"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/select",
+		"path": "../forms/select/DomSelect.vue",
+		"section": "forms",
+		"slug": "select",
+		"exportName": "DomSelect",
+		"route": "/forms/select",
+		"doc": {
+			"name": "Select",
+			"tag": "<DomSelect>",
+			"description": "A styled select control with a closed trigger, floating listbox, keyboard navigation, and rich option slots.",
+			"slots": [
+				{
+					"name": "value",
+					"payload": "{ option, value, label, placeholder }",
+					"description": "Custom selected-value markup inside the trigger."
+				},
+				{
+					"name": "option",
+					"payload": "{ option, index, selected, optionId }",
+					"description": "Custom option markup inside the floating list. optionId identifies the focusable option button for external floating UI."
+				},
+				{
+					"name": "group",
+					"payload": "{ group, options, index }",
+					"description": "Custom heading markup for options that share a group."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(value: string)",
+					"description": "Emitted when the selected option changes."
+				},
+				{
+					"name": "select",
+					"payload": "({ option, value, label })",
+					"description": "Emitted with the selected option record."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Enter / Space / ↓",
+					"action": "Open the listbox."
+				},
+				{
+					"keys": "↑ / ↓",
+					"action": "Move active option."
+				},
+				{
+					"keys": "Type in search",
+					"action": "Filter visible options when searchable is enabled."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Select active option."
+				},
+				{
+					"keys": "Esc / Tab",
+					"action": "Close and return focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/select-input",
+		"path": "../forms/select-input/DomSelectInput.vue",
+		"section": "forms",
+		"slug": "select-input",
+		"exportName": "DomSelectInput",
+		"route": "/forms/select-input",
+		"doc": {},
+		"studio": {}
+	},
+	{
+		"id": "forms/tag-combobox",
+		"path": "../forms/tag-combobox/DomTagCombobox.vue",
+		"section": "forms",
+		"slug": "tag-combobox",
+		"exportName": "DomTagCombobox",
+		"route": "/forms/tag-combobox",
+		"doc": {
+			"name": "Tag combobox",
+			"tag": "<DomTagCombobox>",
+			"description": "A tokenizing multi-select combobox for class lists, recipients, labels, and other values that need autocomplete plus optional custom entries.",
+			"icon": "M7 5h5l5 5-7 7-5-5 7-7Zm1.5 4.5h.01M15 15h4M17 13v4",
+			"slots": [
+				{
+					"name": "item",
+					"payload": "{ item, index, active, custom }",
+					"description": "Replaces each suggestion row."
+				},
+				{
+					"name": "tag",
+					"payload": "{ item, value, label, remove }",
+					"description": "Replaces each selected token."
+				}
+			],
+			"events": [
+				{
+					"name": "query",
+					"payload": "string",
+					"description": "Fired as the user types."
+				},
+				{
+					"name": "add",
+					"payload": "({ item, value, label, custom })",
+					"description": "Fired when a tag is added."
+				},
+				{
+					"name": "remove",
+					"payload": "({ item, value, label })",
+					"description": "Fired when a tag is removed."
+				},
+				{
+					"name": "select",
+					"payload": "({ item, value, label, custom })",
+					"description": "Fired when a suggestion or custom value is committed."
+				},
+				{
+					"name": "change",
+					"payload": "Array",
+					"description": "Fired after the selected values array changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/text-input",
+		"path": "../forms/text-input/DomTextInput.vue",
+		"section": "forms",
+		"slug": "text-input",
+		"exportName": "DomTextInput",
+		"route": "/forms/text-input",
+		"doc": {
+			"name": "Text input",
+			"tag": "<DomTextInput>",
+			"description": "A styled text field that uses the shared field contract for labels, validation state, and optional form-provider integration.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the text changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the input loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/textarea-composer",
+		"path": "../forms/textarea-composer/DomTextareaComposer.vue",
+		"section": "forms",
+		"slug": "textarea-composer",
+		"exportName": "DomTextareaComposer",
+		"route": "/forms/textarea-composer",
+		"doc": {
+			"name": "Textarea composer",
+			"tag": "<DomTextareaComposer>",
+			"description": "An autosizing multiline field with attachment content, leading controls, trailing actions, and submit behavior inside one visual input.",
+			"icon": "M5 6h14v10H9l-4 3V6Zm3 4h8M8 13h5",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the composer text changes."
+				},
+				{
+					"name": "submit",
+					"payload": "string",
+					"description": "Fired with the current text when the built-in submit action is used."
+				},
+				{
+					"name": "keydown",
+					"payload": "KeyboardEvent",
+					"description": "Fired before the built-in Enter key behavior runs."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the textarea receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the textarea loses focus."
+				}
+			],
+			"slots": [
+				{
+					"name": "attachments",
+					"payload": "{ value, disabled, readOnly }",
+					"description": "File, image, reference, or context previews shown above the text."
+				},
+				{
+					"name": "leading",
+					"payload": "{ value, submit, disabled }",
+					"description": "Controls at the start of the bottom action row, such as add or tool buttons."
+				},
+				{
+					"name": "actions",
+					"payload": "{ value, submit, disabled }",
+					"description": "Additional controls before the built-in submit action."
+				},
+				{
+					"name": "submit",
+					"payload": "{ submit, disabled, submitting, label }",
+					"description": "Replace the built-in circular submit button."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Enter",
+					"action": "Submit when submitOnEnter is enabled."
+				},
+				{
+					"keys": "Shift + Enter",
+					"action": "Insert a new line."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/textarea-input",
+		"path": "../forms/textarea-input/DomTextareaInput.vue",
+		"section": "forms",
+		"slug": "textarea-input",
+		"exportName": "DomTextareaInput",
+		"route": "/forms/textarea-input",
+		"doc": {
+			"name": "Textarea input",
+			"tag": "<DomTextareaInput>",
+			"description": "A multi-line field with shared form state and optional content-driven growth, including an optional maximum row limit.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the text changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the textarea receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the textarea loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/time-selector",
+		"path": "../forms/time-selector/DomTimeSelector.vue",
+		"section": "forms",
+		"slug": "time-selector",
+		"exportName": "DomTimeSelector",
+		"route": "/forms/time-selector",
+		"doc": {
+			"name": "Time selector",
+			"tag": "<DomTimeSelector>",
+			"description": "A typed time field with a popover list of selectable times. Stores HH:mm by default and can display 12-hour or 24-hour labels.",
+			"icon": "M12 6v6l4 2M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "HH:mm",
+					"description": "Fired when a valid time is committed or selected."
+				},
+				{
+					"name": "change",
+					"payload": "HH:mm",
+					"description": "Fired when a valid time is committed."
+				},
+				{
+					"name": "invalid-time",
+					"payload": "string",
+					"description": "Fired when typed text cannot be parsed or is outside the allowed range."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the text input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the text input loses focus."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Alt + ArrowDown",
+					"action": "Open the time list."
+				},
+				{
+					"keys": "Enter",
+					"action": "Commit the typed time when it is valid."
+				},
+				{
+					"keys": "Esc",
+					"action": "Close the popover."
+				},
+				{
+					"keys": "Tab",
+					"action": "Move through generated time options when the list is open."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/toggle",
+		"path": "../forms/toggle/DomToggle.vue",
+		"section": "forms",
+		"slug": "toggle",
+		"exportName": "DomToggle",
+		"route": "/forms/toggle",
+		"doc": {
+			"name": "Toggle",
+			"tag": "<DomToggle>",
+			"description": "Accessible switch for boolean values. Works standalone with v-model or inside DomForm through useField.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(checked: boolean)",
+					"description": "Emitted when checked changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the switch receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the switch loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/toggle-button",
+		"path": "../forms/toggle-button/DomToggleButton.vue",
+		"section": "forms",
+		"slug": "toggle-button",
+		"exportName": "DomToggleButton",
+		"route": "/forms/toggle-button",
+		"doc": {
+			"name": "Toggle button",
+			"tag": "<DomToggleButton>",
+			"description": "A pressable form button for boolean choices, using aria-pressed and v-model.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Button label or custom inline content."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(pressed: boolean)",
+					"description": "Emitted when pressed changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/toggle-button-group",
+		"path": "../forms/toggle-button-group/DomToggleButtonGroup.vue",
+		"section": "forms",
+		"slug": "toggle-button-group",
+		"exportName": "DomToggleButtonGroup",
+		"route": "/forms/toggle-button-group",
+		"doc": {
+			"name": "Toggle button group",
+			"tag": "<DomToggleButtonGroup>",
+			"description": "A single or multiple selection button group for compact form choices.",
+			"slots": [
+				{
+					"name": "option",
+					"payload": "{ option, index, selected }",
+					"description": "Custom option markup."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "(value: string | string[])",
+					"description": "Emitted when selection changes."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/url-input",
+		"path": "../forms/url-input/DomUrlInput.vue",
+		"section": "forms",
+		"slug": "url-input",
+		"exportName": "DomUrlInput",
+		"route": "/forms/url-input",
+		"doc": {
+			"name": "URL input",
+			"tag": "<DomUrlInput>",
+			"description": "A convention text field for web addresses with URL type, autocomplete, and a URL validator.",
+			"icon": "M10.25 13.75 13.75 10.25M8.9 10.9 7.8 12a3 3 0 0 0 4.2 4.2l1.1-1.1M15.1 13.1l1.1-1.1A3 3 0 0 0 12 7.8l-1.1 1.1",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when the URL changes."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the input loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "forms/wysiwyg",
+		"path": "../forms/wysiwyg/DomWysiwyg.vue",
+		"section": "forms",
+		"slug": "wysiwyg",
+		"exportName": "DomWysiwyg",
+		"route": "/forms/wysiwyg",
+		"doc": {
+			"name": "WYSIWYG field",
+			"tag": "<DomWysiwyg>",
+			"description": "A textarea-shaped rich text field powered by DomDocumentEditor, with headings, language-aware highlighted code blocks, tables, simple v-model wiring, and no collaboration or AI review rail by default.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "Record<string, unknown> | string",
+					"description": "Fired with JSON or HTML content depending on the output prop."
+				},
+				{
+					"name": "change",
+					"payload": "DocumentEditorChangePayload",
+					"description": "Fired with JSON, HTML, and plain text whenever the editor changes."
+				},
+				{
+					"name": "selection-change",
+					"payload": "DocumentEditorSelectionPayload",
+					"description": "Fired when the editor selection changes."
+				},
+				{
+					"name": "tool-action",
+					"payload": "({ tool, editor })",
+					"description": "Fired when a custom toolbar tool is activated."
+				},
+				{
+					"name": "ready",
+					"payload": "({ editor })",
+					"description": "Fired after the browser-only editor runtime mounts."
+				},
+				{
+					"name": "runtime-error",
+					"payload": "Error",
+					"description": "Fired when the editor runtime cannot mount."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the editable document receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the editable document loses focus."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/action-sheet",
+		"path": "../mobile/action-sheet/DomActionSheet.vue",
+		"section": "mobile",
+		"slug": "action-sheet",
+		"exportName": "DomActionSheet",
+		"route": "/mobile/action-sheet",
+		"doc": {
+			"name": "Action sheet",
+			"tag": "<DomActionSheet>",
+			"description": "A bottom action sheet for app choices, destructive actions, and quick commands.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "boolean",
+					"description": "Fired when the sheet opens or closes."
+				},
+				{
+					"name": "select",
+					"payload": "object",
+					"description": "Fired with the selected action."
+				}
+			],
+			"playground": {
+				"mobileSlot": "overlay",
+				"initial": {
+					"modelValue": true,
+					"title": "Project actions",
+					"description": "Use for app commands that should stay near the thumb.",
+					"actions": [
+						{
+							"label": "Share project",
+							"description": "Open the native share sheet",
+							"value": "share"
+						},
+						{
+							"label": "Duplicate screen",
+							"value": "duplicate"
+						},
+						{
+							"label": "Delete draft",
+							"value": "delete",
+							"variant": "danger"
+						}
+					]
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/bottom-nav",
+		"path": "../mobile/bottom-nav/DomAppBottomNav.vue",
+		"section": "mobile",
+		"slug": "bottom-nav",
+		"exportName": "DomAppBottomNav",
+		"route": "/mobile/bottom-nav",
+		"doc": {
+			"name": "App bottom nav",
+			"tag": "<DomAppBottomNav>",
+			"description": "A thumb-friendly bottom navigation bar for primary app destinations.",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "string",
+					"description": "Fired when a tab is selected."
+				},
+				{
+					"name": "change",
+					"payload": "object",
+					"description": "Fired with the selected tab item."
+				}
+			],
+			"playground": {
+				"mobileSlot": "bottom",
+				"initial": {
+					"modelValue": "home",
+					"items": [
+						{
+							"value": "home",
+							"label": "Home"
+						},
+						{
+							"value": "inbox",
+							"label": "Inbox",
+							"badge": "3"
+						},
+						{
+							"value": "settings",
+							"label": "Settings"
+						}
+					]
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/list-item",
+		"path": "../mobile/list-item/DomAppListItem.vue",
+		"section": "mobile",
+		"slug": "list-item",
+		"exportName": "DomAppListItem",
+		"route": "/mobile/list-item",
+		"doc": {
+			"name": "App list item",
+			"tag": "<DomAppListItem>",
+			"description": "A touch-sized app row for settings, inboxes, menus, and navigation.",
+			"slots": [
+				{
+					"name": "icon",
+					"description": "Leading icon or avatar."
+				},
+				{
+					"name": "trailing",
+					"description": "Trailing value, switch, badge, or custom action."
+				}
+			],
+			"playground": {
+				"mobileSlot": "content",
+				"initial": {
+					"label": "Sync Capacitor status bar",
+					"description": "Match native chrome to the DOM Studio theme.",
+					"meta": "Now",
+					"chevron": true
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/safe-area",
+		"path": "../mobile/safe-area/DomSafeArea.vue",
+		"section": "mobile",
+		"slug": "safe-area",
+		"exportName": "DomSafeArea",
+		"route": "/mobile/safe-area",
+		"doc": {
+			"name": "Safe area",
+			"tag": "<DomSafeArea>",
+			"description": "Applies safe-area inset padding around app chrome for devices with cutouts, home indicators, or inset system UI.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Content that should avoid device cutouts and home indicators."
+				}
+			],
+			"playground": {
+				"mobileSlot": "content"
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/shell",
+		"path": "../mobile/shell/DomAppShell.vue",
+		"section": "mobile",
+		"slug": "shell",
+		"exportName": "DomAppShell",
+		"route": "/mobile/shell",
+		"doc": {
+			"name": "App shell",
+			"tag": "<DomAppShell>",
+			"description": "A web app surface with safe-area padding, scrollable content, and fixed app chrome slots for mobile or desktop app layouts.",
+			"slots": [
+				{
+					"name": "top",
+					"description": "Top navigation, status, or toolbar content."
+				},
+				{
+					"name": "(default)",
+					"description": "Scrollable app content."
+				},
+				{
+					"name": "bottom",
+					"description": "Bottom navigation, tab bar, or persistent controls."
+				},
+				{
+					"name": "overlay",
+					"description": "Absolute overlay layer for drawers, action sheets, and app-level panels."
+				}
+			],
+			"playground": {
+				"mobileSlot": "shell"
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/stack",
+		"path": "../mobile/stack/DomAppStack.vue",
+		"section": "mobile",
+		"slug": "stack",
+		"exportName": "DomAppStack",
+		"route": "/mobile/stack",
+		"doc": {
+			"name": "App stack",
+			"tag": "<DomAppStack>",
+			"description": "A settings-style screen stack that handles slide navigation, breadcrumbs, lazy screens, and responsive panel styling.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Optional DomAppStackScreen children used to register slot-driven screens."
+				},
+				{
+					"name": "breadcrumb",
+					"payload": "{ crumbs, canGoBack, back, goTo, push, path }",
+					"description": "Replace the breadcrumb and back control while keeping the stack state."
+				}
+			],
+			"events": [
+				{
+					"name": "update:path",
+					"payload": "(path: Array<string>)",
+					"description": "Fired when the active stack path changes."
+				},
+				{
+					"name": "navigate",
+					"payload": "(payload: { path, previousPath, direction, screen, reason })",
+					"description": "Fired after push, back, replace, reset, or breadcrumb navigation."
+				},
+				{
+					"name": "load",
+					"payload": "(payload: { screen, component })",
+					"description": "Fired when a lazy screen component resolves."
+				},
+				{
+					"name": "error",
+					"payload": "(payload: { screen, error })",
+					"description": "Fired when a lazy screen component rejects."
+				}
+			],
+			"playground": {
+				"mobileSlot": "content",
+				"initial": {
+					"root": "settings",
+					"screens": [
+						{
+							"id": "settings",
+							"title": "Settings",
+							"children": [
+								"account",
+								"notifications"
+							]
+						},
+						{
+							"id": "account",
+							"title": "Account",
+							"description": "Profile, password, and sign-in settings."
+						},
+						{
+							"id": "notifications",
+							"title": "Notifications",
+							"description": "Push, email, and quiet hours."
+						}
+					]
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "mobile/top-bar",
+		"path": "../mobile/top-bar/DomAppTopBar.vue",
+		"section": "mobile",
+		"slug": "top-bar",
+		"exportName": "DomAppTopBar",
+		"route": "/mobile/top-bar",
+		"doc": {
+			"name": "App top bar",
+			"tag": "<DomAppTopBar>",
+			"description": "A compact app navigation bar with optional leading and trailing actions.",
+			"slots": [
+				{
+					"name": "leading",
+					"description": "Leading icon button or back control."
+				},
+				{
+					"name": "trailing",
+					"description": "Trailing actions."
+				}
+			],
+			"playground": {
+				"mobileSlot": "top",
+				"initial": {
+					"title": "Workspace",
+					"subtitle": "Capacitor app"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/alert",
+		"path": "../visual/alert/DomAlert.vue",
+		"section": "visual",
+		"slug": "alert",
+		"exportName": "DomAlert",
+		"route": "/visual/alert",
+		"doc": {
+			"name": "Alert",
+			"tag": "<DomAlert>",
+			"description": "A persistent inline notice for status messages, policy warnings, empty-flow guidance, and recoverable errors.",
+			"icon": "M12 17v-5M12 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
+			"playground": {
+				"initial": {
+					"tone": "info",
+					"variant": "soft",
+					"title": "Information available",
+					"description": "Review the latest status details before continuing."
+				}
+			},
+			"slots": [
+				{
+					"name": "icon",
+					"description": "Replace the leading status icon. Prefer the icon prop for SVG path data or imported Vue icon components."
+				},
+				{
+					"name": "title",
+					"description": "Replace the title content."
+				},
+				{
+					"name": "(default)",
+					"description": "Alert body. Falls back to the description prop."
+				},
+				{
+					"name": "actions",
+					"description": "Action buttons or links aligned below the message."
+				}
+			],
+			"events": [
+				{
+					"name": "dismiss",
+					"payload": "MouseEvent",
+					"description": "Emitted after a dismissible alert has finished fading away."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/avatar",
+		"path": "../visual/avatar/DomAvatar.vue",
+		"section": "visual",
+		"slug": "avatar",
+		"exportName": "DomAvatar",
+		"route": "/visual/avatar",
+		"doc": {
+			"name": "Avatar",
+			"tag": "<DomAvatar>",
+			"description": "A compact identity primitive for people, teams, workspaces, and accounts.",
+			"playground": {
+				"initial": {
+					"name": "Mina Patel",
+					"initials": "MP",
+					"src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&crop=faces&w=96&h=96&q=80",
+					"size": "md"
+				}
+			},
+			"slots": [
+				{
+					"name": "fallback",
+					"description": "Custom fallback content when no image is available."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/avatar-stack",
+		"path": "../visual/avatar-stack/DomAvatarStack.vue",
+		"section": "visual",
+		"slug": "avatar-stack",
+		"exportName": "DomAvatarStack",
+		"route": "/visual/avatar-stack",
+		"doc": {
+			"name": "Avatar stack",
+			"tag": "<DomAvatarStack>",
+			"description": "A grouped identity primitive for collaborators, assignees, reviewers, and participants.",
+			"playground": {
+				"initial": {
+					"items": [
+						{
+							"name": "Mina Patel",
+							"initials": "MP",
+							"src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
+						},
+						{
+							"name": "Ari Chen",
+							"initials": "AC",
+							"src": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
+						},
+						{
+							"name": "Noah Kim",
+							"initials": "NK",
+							"src": "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
+						},
+						{
+							"name": "Leah Stone",
+							"initials": "LS",
+							"src": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
+						},
+						{
+							"name": "Theo Grant",
+							"initials": "TG",
+							"src": "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&crop=faces&w=96&h=96&q=80"
+						}
+					],
+					"max": 4
+				}
+			},
+			"slots": [
+				{
+					"name": "avatar",
+					"payload": "{ item, index }",
+					"description": "Custom avatar rendering for each visible item."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/badge",
+		"path": "../visual/badge/DomBadge.vue",
+		"section": "visual",
+		"slug": "badge",
+		"exportName": "DomBadge",
+		"route": "/visual/badge",
+		"doc": {
+			"name": "Badge",
+			"tag": "<DomBadge>",
+			"description": "A compact visual label for counts, roles, plans, tags, and metadata.",
+			"playground": {
+				"initial": {
+					"label": "Scale",
+					"tone": "success",
+					"variant": "soft",
+					"size": "md"
+				}
+			},
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Badge text or compact inline content."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/card",
+		"path": "../visual/card/DomCard.vue",
+		"section": "visual",
+		"slug": "card",
+		"exportName": "DomCard",
+		"route": "/visual/card",
+		"doc": {
+			"name": "Card",
+			"tag": "<DomCard>",
+			"description": "A visual-only frame for grouped content, styled by the skin-card theme recipe.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Card content."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/card-rail",
+		"path": "../visual/card-rail/DomCardRail.vue",
+		"section": "visual",
+		"slug": "card-rail",
+		"exportName": "DomCardRail",
+		"route": "/visual/card-rail",
+		"doc": {
+			"name": "Card rail",
+			"tag": "<DomCardRail>",
+			"description": "A horizontal rail for composed card groups with native overflow, snap points, and flexible item widths.",
+			"icon": "M4 8h5v8H4V8Zm7 0h5v8h-5V8Zm7 0h2v8h-2V8Z",
+			"slots": [
+				{
+					"name": "header",
+					"description": "Section heading, copy, filters, or controls above the rail."
+				},
+				{
+					"name": "actions",
+					"description": "Optional controls aligned with the header."
+				},
+				{
+					"name": "(default)",
+					"description": "Rail items. Each direct child becomes fixed-width, snap-aligned content."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/empty-state",
+		"path": "../visual/empty-state/DomEmptyState.vue",
+		"section": "visual",
+		"slug": "empty-state",
+		"exportName": "DomEmptyState",
+		"route": "/visual/empty-state",
+		"doc": {
+			"name": "Empty state",
+			"tag": "<DomEmptyState>",
+			"description": "A reusable empty, zero-data, or setup state with icon, copy, and actions.",
+			"slots": [
+				{
+					"name": "icon",
+					"description": "Custom icon or illustration."
+				},
+				{
+					"name": "title",
+					"description": "Custom title markup."
+				},
+				{
+					"name": "description",
+					"description": "Custom helper text."
+				},
+				{
+					"name": "actions",
+					"description": "Primary and secondary actions."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/progress",
+		"path": "../visual/progress/DomProgress.vue",
+		"section": "visual",
+		"slug": "progress",
+		"exportName": "DomProgress",
+		"route": "/visual/progress",
+		"doc": {
+			"name": "Progress",
+			"tag": "<DomProgress>",
+			"description": "An accessible progress bar for uploads, imports, background jobs, and completion meters.",
+			"icon": "M5 12h14M5 12a3 3 0 0 1 3-3h8a3 3 0 0 1 0 6H8a3 3 0 0 1-3-3Z",
+			"playground": {
+				"initial": {
+					"value": 68,
+					"showValue": true
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/progress",
+		"path": "../visual/progress/DomRadialProgress.vue",
+		"section": "visual",
+		"slug": "progress",
+		"exportName": "DomRadialProgress",
+		"route": "/visual/progress",
+		"doc": {
+			"name": "Radial progress",
+			"tag": "<DomRadialProgress>",
+			"description": "A compact circular progress meter for uploads, media processing, sync status, and inline background jobs.",
+			"icon": "M12 3a9 9 0 1 1-6.36 2.64M12 3v5m0-5a9 9 0 0 1 9 9",
+			"playground": {
+				"initial": {
+					"value": 64,
+					"showValue": true,
+					"tone": "success"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/progress",
+		"path": "../visual/progress/DomSegmentedProgress.vue",
+		"section": "visual",
+		"slug": "progress",
+		"exportName": "DomSegmentedProgress",
+		"route": "/visual/progress",
+		"doc": {
+			"name": "Segmented progress",
+			"tag": "<DomSegmentedProgress>",
+			"description": "An accessible stacked progress bar for workflows that divide a changing total across multiple states.",
+			"icon": "M4 7h16M4 12h16M4 17h16",
+			"playground": {
+				"initial": {
+					"value": 2,
+					"label": "pages processed",
+					"tone": "warning",
+					"size": "lg",
+					"segments": [
+						{
+							"key": "complete",
+							"label": "completed",
+							"value": 2,
+							"tone": "success",
+							"color": ""
+						},
+						{
+							"key": "processing",
+							"label": "processing",
+							"value": 1,
+							"tone": "warning",
+							"color": "var(--warning)"
+						},
+						{
+							"key": "queued",
+							"label": "queued",
+							"value": 1,
+							"tone": "neutral",
+							"color": ""
+						}
+					]
+				}
+			},
+			"slots": [
+				{
+					"name": "summary",
+					"payload": "{ value, max, percent, label }",
+					"description": "Custom summary content shown above the track."
+				},
+				{
+					"name": "legend-label",
+					"payload": "{ segment }",
+					"description": "Custom label content for each legend entry."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/skeleton",
+		"path": "../visual/skeleton/DomSkeleton.vue",
+		"section": "visual",
+		"slug": "skeleton",
+		"exportName": "DomSkeleton",
+		"route": "/visual/skeleton",
+		"doc": {
+			"name": "Skeleton",
+			"tag": "<DomSkeleton>",
+			"description": "A token-driven loading placeholder for cards, rows, text blocks, and avatars.",
+			"icon": "M5 7h14M5 12h10M5 17h7",
+			"playground": {
+				"initial": {
+					"variant": "text",
+					"lines": 3,
+					"width": "100%"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/spinner",
+		"path": "../visual/spinner/DomSpinner.vue",
+		"section": "visual",
+		"slug": "spinner",
+		"exportName": "DomSpinner",
+		"route": "/visual/spinner",
+		"doc": {
+			"name": "Spinner",
+			"tag": "<DomSpinner>",
+			"description": "A compact loading indicator for buttons, toolbars, inline rows, and pending states.",
+			"icon": "M12 4a8 8 0 1 1-8 8",
+			"playground": {
+				"initial": {
+					"label": "Saving",
+					"size": "md",
+					"background": "color-mix(in oklab, var(--warning) 20%, transparent)",
+					"foreground": "var(--warning)"
+				}
+			}
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/status-pill",
+		"path": "../visual/status-pill/DomStatusPill.vue",
+		"section": "visual",
+		"slug": "status-pill",
+		"exportName": "DomStatusPill",
+		"route": "/visual/status-pill",
+		"doc": {
+			"name": "Status pill",
+			"tag": "<DomStatusPill>",
+			"description": "A badge with an optional status dot for live state, severity, and workflow labels.",
+			"playground": {
+				"initial": {
+					"label": "Live",
+					"tone": "success",
+					"dot": true
+				}
+			},
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Status label."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "visual/text-diff",
+		"path": "../visual/text-diff/DomTextDiff.vue",
+		"section": "visual",
+		"slug": "text-diff",
+		"exportName": "DomTextDiff",
+		"route": "/visual/text-diff",
+		"doc": {
+			"name": "Text diff",
+			"tag": "<DomTextDiff>",
+			"description": "A standalone text comparison for AI rewrites, code patches, editorial review, and before-and-after copy changes.",
+			"icon": "M8 7H4m4 0L6 5m2 2L6 9m10 8h4m-2-2v4M11 5h3a3 3 0 0 1 3 3v1m-6 10H8a3 3 0 0 1-3-3v-1",
+			"playground": {
+				"initial": {
+					"original": "Write better pages with a flexible visual editor.",
+					"proposed": "Create clearer pages with an editor built for focused teams.",
+					"mode": "diff",
+					"view": "inline",
+					"format": "text",
+					"originalLabel": "Current",
+					"proposedLabel": "Suggested",
+					"showHeader": true,
+					"showModeSwitcher": true,
+					"framed": true
+				}
+			},
+			"slots": [
+				{
+					"name": "header",
+					"payload": "{ additions, removals, mode, setMode, originalLabel, proposedLabel }",
+					"description": "Replace the comparison header and optionally control the active content mode."
+				}
+			],
+			"events": [
+				{
+					"name": "update:mode",
+					"payload": "'diff' | 'original' | 'replacement'",
+					"description": "Fired when the active content mode changes."
+				},
+				{
+					"name": "mode-change",
+					"payload": "'diff' | 'original' | 'replacement'",
+					"description": "Fired after the viewer switches between the diff, current text, and replacement text."
+				}
+			]
+		},
+		"studio": {}
+	}
+];