@getdom/studio 0.1.1 → 0.2.1

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

@@ -10,6 +10,110 @@ export const componentCatalog = [
 		"doc": {},
 		"studio": {}
 	},
+	{
+		"id": "components/audio-controls",
+		"path": "../components/audio-controls/DomAudioControls.vue",
+		"section": "components",
+		"slug": "audio-controls",
+		"exportName": "DomAudioControls",
+		"route": "/components/audio-controls",
+		"doc": {
+			"nav": {
+				"section": "ai"
+			},
+			"name": "Audio controls",
+			"tag": "<DomAudioControls>",
+			"description": "Click to talk becomes a compact microphone control: stop, live waveform, mute, and input selection. Ready for voice AI, calls, and collaboration.",
+			"icon": "M4 9v6M8 5v14M12 8v8M16 3v18M20 9v6",
+			"events": [
+				{
+					"name": "stream",
+					"payload": "(stream: MediaStream | null)",
+					"description": "Initial/replacement microphone stream, or null on stop. This component releases its owned tracks."
+				},
+				{
+					"name": "update:deviceId",
+					"payload": "(deviceId: string)",
+					"description": "Committed input selection, with v-model:deviceId support."
+				},
+				{
+					"name": "update:muted",
+					"payload": "(muted: boolean)",
+					"description": "Microphone mute state, with v-model:muted support."
+				},
+				{
+					"name": "state",
+					"payload": "(state: 'idle' | 'requesting' | 'active' | 'error')",
+					"description": "Local capture lifecycle, independent of your remote connection."
+				},
+				{
+					"name": "error",
+					"payload": "({ name, message })",
+					"description": "Permission, missing device, or capture failure."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Tab",
+					"action": "Move between stop, mute, and microphone settings."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Activate the focused control."
+				},
+				{
+					"keys": "Escape",
+					"action": "Dismiss microphone settings and return to the trigger."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "components/audio-input",
+		"path": "../components/audio-input/DomAudioInput.vue",
+		"section": "components",
+		"slug": "audio-input",
+		"exportName": "DomAudioInput",
+		"route": "/components/audio-input",
+		"doc": {
+			"nav": {
+				"section": "ai"
+			},
+			"name": "Audio input",
+			"tag": "<DomAudioInput>",
+			"description": "Microphone setup with device selection, a live input meter, mute, and explicit start/stop. Emits a local MediaStream for your meeting or AI application.",
+			"icon": "M12 15a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v7a3 3 0 0 0 3 3ZM5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8",
+			"events": [
+				{
+					"name": "stream",
+					"payload": "(stream: MediaStream | null)",
+					"description": "Emits the initial or replacement stream; null means capture stopped. This component owns and releases its tracks."
+				},
+				{
+					"name": "update:deviceId",
+					"payload": "(deviceId: string)",
+					"description": "Committed microphone selection. Supports v-model:deviceId."
+				},
+				{
+					"name": "update:muted",
+					"payload": "(muted: boolean)",
+					"description": "Track enabled state changed. Supports v-model:muted."
+				},
+				{
+					"name": "state",
+					"payload": "(state: 'idle' | 'requesting' | 'active' | 'error')",
+					"description": "Local device lifecycle. Active does not imply a network connection."
+				},
+				{
+					"name": "error",
+					"payload": "({ name, message })",
+					"description": "Actionable capture failure. A failed microphone switch keeps the previous stream."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "components/breadcrumbs",
 		"path": "../components/breadcrumbs/DomBreadcrumbs.vue",
@@ -76,6 +180,46 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "components/camera-input",
+		"path": "../components/camera-input/DomCameraInput.vue",
+		"section": "components",
+		"slug": "camera-input",
+		"exportName": "DomCameraInput",
+		"route": "/components/camera-input",
+		"doc": {
+			"nav": {
+				"section": "ai"
+			},
+			"name": "Camera input",
+			"tag": "<DomCameraInput>",
+			"description": "Select a webcam and check a private local preview before joining a call. Emits a video-only MediaStream and releases the camera when stopped.",
+			"icon": "M3 5h12v14H3zM15 10l6-4v12l-6-4",
+			"events": [
+				{
+					"name": "stream",
+					"payload": "(stream: MediaStream | null)",
+					"description": "Video-only local stream or null when released. Cameras are released before switching for mobile compatibility."
+				},
+				{
+					"name": "update:deviceId",
+					"payload": "(deviceId: string)",
+					"description": "Committed camera selection. Supports v-model:deviceId."
+				},
+				{
+					"name": "state",
+					"payload": "(state: 'idle' | 'requesting' | 'active' | 'error')",
+					"description": "Local camera capture state."
+				},
+				{
+					"name": "error",
+					"payload": "({ name, message })",
+					"description": "Camera access or device failure."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "components/command-palette",
 		"path": "../components/command-palette/DomCommandPalette.vue",
@@ -166,12 +310,17 @@ export const componentCatalog = [
 				},
 				{
 					"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."
+					"payload": "{ title, description, titleId, descriptionId, companionOpen, companionMode, companionTriggerProps, toggleCompanion }",
+					"description": "Replace the default title and description block. Apply the provided IDs to custom heading and description elements to preserve the dialog accessibility relationships. Companion helpers wire an in-dialog toggle when the companion slot is present."
 				},
 				{
 					"name": "footer",
 					"description": "Action buttons. Add `data-close` on a control to dismiss the dialog."
+				},
+				{
+					"name": "companion",
+					"payload": "{ open, mode, closeCompanion, toggleCompanion }",
+					"description": "Optional contextual surface shown beside the dialog on wide screens and over it below companionBreakpoint."
 				}
 			],
 			"events": [
@@ -184,6 +333,11 @@ export const componentCatalog = [
 					"name": "before-open",
 					"description": "Emitted immediately before the dialog opens; prepare draft data or item snapshots here."
 				},
+				{
+					"name": "update:companionOpen",
+					"payload": "(open: boolean)",
+					"description": "Emitted when the companion surface opens or closes."
+				},
 				{
 					"name": "close",
 					"description": "Emitted when the dialog is dismissed."
@@ -196,7 +350,7 @@ export const componentCatalog = [
 			"keyboard": [
 				{
 					"keys": "Esc",
-					"action": "Closes the topmost open dialog unless `static` is set."
+					"action": "Closes an open companion first, then closes the dialog unless `static` is set."
 				},
 				{
 					"keys": "Tab / Shift+Tab",
@@ -616,6 +770,86 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "components/menu-stack",
+		"path": "../components/menu-stack/DomMenuStack.vue",
+		"section": "components",
+		"slug": "menu-stack",
+		"exportName": "DomMenuStack",
+		"route": "/components/menu-stack",
+		"doc": {
+			"name": "Menu stack",
+			"tag": "<DomMenuStack>",
+			"description": "Nested navigation that slides inside its container on mobile and desktop. Reuses App stack transitions, retained page state, scrolling, and focus. Each item has a unique id and label, plus children, a component and props, or a named slot for richer pages. Leaf items accept to or href, or emit select for application actions.",
+			"slots": [
+				{
+					"name": "root",
+					"payload": "{ screen, stack }",
+					"description": "Content above the root menu rows."
+				},
+				{
+					"name": "(item.slot)",
+					"payload": "{ screen, stack }",
+					"description": "Page content above child rows. Set an item’s slot to this slot name; components receive screen and stack props too."
+				}
+			],
+			"events": [
+				{
+					"name": "select",
+					"payload": "(item)",
+					"description": "A leaf was selected. Close the containing popover here if desired."
+				},
+				{
+					"name": "update:path",
+					"payload": "(path: string[])",
+					"description": "Two-way stack path, starting with root."
+				},
+				{
+					"name": "navigate",
+					"payload": "({ path, previousPath, direction, screen, reason })",
+					"description": "A contained page opened or returned."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Tab / Shift+Tab",
+					"action": "Move between visible links, rows, Back, and custom page controls."
+				},
+				{
+					"keys": "Enter / Space",
+					"action": "Activate a focused button. Enter follows links."
+				}
+			],
+			"playground": {
+				"initial": {
+					"title": "Workspace",
+					"items": [
+						{
+							"id": "account",
+							"label": "Account",
+							"children": [
+								{
+									"id": "preferences",
+									"label": "Preferences",
+									"children": [
+										{
+											"id": "language",
+											"label": "English (UK)"
+										}
+									]
+								}
+							]
+						},
+						{
+							"id": "help",
+							"label": "Help"
+						}
+					]
+				}
+			}
+		},
+		"studio": {}
+	},
 	{
 		"id": "components/pagination",
 		"path": "../components/pagination/DomPagination.vue",
@@ -1201,6 +1435,81 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "components/video-feed",
+		"path": "../components/video-feed/DomVideoFeed.vue",
+		"section": "components",
+		"slug": "video-feed",
+		"exportName": "DomVideoFeed",
+		"route": "/components/video-feed",
+		"doc": {
+			"name": "Video feed",
+			"tag": "<DomVideoFeed>",
+			"description": "A vertical video feed with touch scrolling, snap navigation, and one active player. Built for desktop and mobile.",
+			"icon": "M8 3h8v18H8zM11 9l4 3-4 3M3 9l2-2 2 2M3 15l2 2 2-2",
+			"slots": [
+				{
+					"name": "caption",
+					"payload": "{ item, index }",
+					"description": "Replaces the title, creator, and description overlay. Include media attribution here when required."
+				},
+				{
+					"name": "actions",
+					"payload": "{ item, index }",
+					"description": "Application-owned actions beside the caption, such as save or like."
+				},
+				{
+					"name": "empty",
+					"description": "Content shown when the feed has no items."
+				}
+			],
+			"events": [
+				{
+					"name": "update:index",
+					"payload": "(index: number)",
+					"description": "The active item changed through scrolling, keyboard, or navigation."
+				},
+				{
+					"name": "update:muted",
+					"payload": "(muted: boolean)",
+					"description": "The viewer changed the sound preference."
+				},
+				{
+					"name": "change",
+					"payload": "({ item, index })",
+					"description": "Active item changed; use this to request another page near the end."
+				},
+				{
+					"name": "error",
+					"payload": "({ item, index, error })",
+					"description": "A video failed to load or play. Autoplay policy blocks show a play button instead."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "↑ / ↓",
+					"action": "Previous or next video when the feed is focused."
+				},
+				{
+					"keys": "Home / End",
+					"action": "First or last video."
+				},
+				{
+					"keys": "Space / K",
+					"action": "Play or pause."
+				},
+				{
+					"keys": "M",
+					"action": "Toggle sound."
+				},
+				{
+					"keys": "Tab",
+					"action": "Move through playback, seek, caption, and application controls."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "data/activity-timeline",
 		"path": "../data/activity-timeline/DomActivityTimeline.vue",
@@ -1260,6 +1569,10 @@ export const componentCatalog = [
 		"exportName": "DomAgentChatShell",
 		"route": "/data/agent-chat",
 		"doc": {
+			"nav": {
+				"section": "ai",
+				"primary": true
+			},
 			"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.",
@@ -1354,6 +1667,9 @@ export const componentCatalog = [
 		"exportName": "DomAgentConversation",
 		"route": "/data/agent-chat",
 		"doc": {
+			"nav": {
+				"section": "ai"
+			},
 			"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.",
@@ -1457,6 +1773,9 @@ export const componentCatalog = [
 		"exportName": "DomAgentConversationList",
 		"route": "/data/agent-chat",
 		"doc": {
+			"nav": {
+				"section": "ai"
+			},
 			"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.",
@@ -1788,6 +2107,123 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "data/gantt",
+		"path": "../data/gantt/DomGantt.vue",
+		"section": "data",
+		"slug": "gantt",
+		"exportName": "DomGantt",
+		"route": "/data/gantt",
+		"doc": {
+			"name": "Gantt",
+			"tag": "<DomGantt>",
+			"description": "One horizontal timeline for team resources, project schedules, and roadmaps, with time zoom, working hours, and drag-to-plan ranges.",
+			"icon": "M4 4v16h16M7 7h6M10 11h8M8 15h7",
+			"events": [
+				{
+					"name": "time-range-select",
+					"payload": "GanttRangePayload",
+					"description": "A requested span with source row, rowKey, Date start/end, elapsed durationMinutes, and original event. End is exclusive; the application creates the item."
+				},
+				{
+					"name": "row-create",
+					"payload": "{ name: string }",
+					"description": "Validated row name. The application assigns an id and adds its row."
+				},
+				{
+					"name": "item-click",
+					"payload": "GanttItemPayload",
+					"description": "Source item and row, resolved dates, and original event for an application-owned editor."
+				},
+				{
+					"name": "item-move",
+					"payload": "GanttItemChangePayload",
+					"description": "Proposed dates and source/target rows after a drag or keyboard move. Source records remain unchanged until the application accepts the event."
+				},
+				{
+					"name": "item-resize",
+					"payload": "GanttItemChangePayload",
+					"description": "Proposed exclusive end after right-edge resizing. The start and row are preserved."
+				},
+				{
+					"name": "update:zoom",
+					"payload": "'months' | 'weeks' | 'days'",
+					"description": "Toolbar zoom changed, preserving the date at the left of the viewport."
+				},
+				{
+					"name": "update:planMode",
+					"payload": "boolean",
+					"description": "Plan mode changed."
+				},
+				{
+					"name": "update:hideNonWorkingHours",
+					"payload": "boolean",
+					"description": "Out-of-hours visibility changed."
+				},
+				{
+					"name": "update:hideWeekends",
+					"payload": "boolean",
+					"description": "Non-working day visibility changed."
+				},
+				{
+					"name": "visible-range-change",
+					"payload": "{ startDate: Date, endDate: Date }",
+					"description": "Visible date window after scrolling or zooming, for application-owned data loading."
+				}
+			],
+			"slots": [
+				{
+					"name": "row",
+					"payload": "{ row, rowKey, label }",
+					"description": "Replace a row label, for example with a member avatar and role."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, row, startDate, endDate }",
+					"description": "Replace bar content inside its focusable item button. Avoid nested interactive controls."
+				},
+				{
+					"name": "toolbar",
+					"description": "Append application filters or actions."
+				},
+				{
+					"name": "empty",
+					"description": "Replace the empty collection message."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "← / →",
+					"action": "Move the focused row’s time cursor one selection step."
+				},
+				{
+					"keys": "Shift + ← / →",
+					"action": "Extend a time selection."
+				},
+				{
+					"keys": "Enter",
+					"action": "Request the selected time span."
+				},
+				{
+					"keys": "Escape",
+					"action": "Cancel a pointer or keyboard selection."
+				},
+				{
+					"keys": "Alt + ← / →",
+					"action": "Move a focused draggable item one time increment."
+				},
+				{
+					"keys": "Alt + ↑ / ↓",
+					"action": "Move a focused item to the previous/next resource row when row changes are enabled."
+				},
+				{
+					"keys": "← / → on resize grip",
+					"action": "Shorten or extend an item by one time increment."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "data/kanban",
 		"path": "../data/kanban/DomKanban.vue",
@@ -2159,6 +2595,80 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "data/notification-inbox",
+		"path": "../data/notification-inbox/DomNotificationInbox.vue",
+		"section": "data",
+		"slug": "notification-inbox",
+		"exportName": "DomNotificationInbox",
+		"route": "/data/notification-inbox",
+		"doc": {
+			"name": "Notification inbox",
+			"tag": "<DomNotificationInbox>",
+			"description": "A polished notification bell and durable inbox panel for application-owned in-app records, including unread, action, archive, pagination, loading, and failure-ready states.",
+			"icon": "M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4",
+			"slots": [
+				{
+					"name": "trigger",
+					"payload": "{ unreadCount, open }",
+					"description": "Replace the default bell trigger while retaining the inbox popover."
+				},
+				{
+					"name": "header",
+					"payload": "{ unreadCount, refresh }",
+					"description": "Replace the panel heading and refresh control."
+				},
+				{
+					"name": "item",
+					"payload": "{ item, unread, transition, action }",
+					"description": "Replace one notification row while retaining the panel list and state helpers."
+				},
+				{
+					"name": "item-icon",
+					"payload": "{ item, tone }",
+					"description": "Replace the semantic icon shown for one default notification row."
+				},
+				{
+					"name": "empty",
+					"description": "Replace the caught-up empty state."
+				},
+				{
+					"name": "footer",
+					"payload": "{ hasMore, loadingMore, loadMore }",
+					"description": "Replace the optional pagination footer."
+				}
+			],
+			"events": [
+				{
+					"name": "transition",
+					"payload": "({ item, transition: \"read\" | \"unread\" | \"archive\" })",
+					"description": "Requests an application-owned durable state transition."
+				},
+				{
+					"name": "action",
+					"payload": "({ item, action })",
+					"description": "Fired when the recipient follows a notification action."
+				},
+				{
+					"name": "refresh",
+					"description": "Requests a fresh first page without marking any item read."
+				},
+				{
+					"name": "load-more",
+					"description": "Requests the next application-owned inbox page."
+				},
+				{
+					"name": "open",
+					"description": "Fired when the inbox popover opens."
+				},
+				{
+					"name": "close",
+					"description": "Fired when the inbox popover closes."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "data/week-planner",
 		"path": "../data/week-planner/DomWeekPlanner.vue",
@@ -2235,40 +2745,264 @@ export const componentCatalog = [
 			],
 			"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": "(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": "charts/area-chart",
+		"path": "../charts/area-chart/DomAreaChart.vue",
+		"section": "charts",
+		"slug": "area-chart",
+		"exportName": "DomAreaChart",
+		"route": "/charts/area-chart",
+		"doc": {
+			"name": "Area chart",
+			"tag": "<DomAreaChart>",
+			"description": "Show volume over time as overlapping or stacked areas.",
+			"icon": "M4 4v16h16M7 14l4-5 4 3 5-7",
+			"events": [
+				{
+					"name": "select",
+					"payload": "{ row, index }",
+					"description": "Original application record selected by click or Enter."
+				},
+				{
+					"name": "retry",
+					"description": "Requests another attempt to load application data."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Arrow keys / Home / End",
+					"action": "Inspect data points."
+				},
+				{
+					"keys": "Enter",
+					"action": "Select the inspected record."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "charts/bar-chart",
+		"path": "../charts/bar-chart/DomBarChart.vue",
+		"section": "charts",
+		"slug": "bar-chart",
+		"exportName": "DomBarChart",
+		"route": "/charts/bar-chart",
+		"doc": {
+			"name": "Bar chart",
+			"tag": "<DomBarChart>",
+			"description": "Compare categories with vertical or horizontal bars, grouped series, and percentage stacks.",
+			"icon": "M4 4v16h16M7 14l4-5 4 3 5-7",
+			"events": [
+				{
+					"name": "select",
+					"payload": "{ row, index }",
+					"description": "Original application record selected by click or Enter."
+				},
+				{
+					"name": "retry",
+					"description": "Requests another attempt to load application data."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Arrow keys / Home / End",
+					"action": "Inspect data points."
+				},
+				{
+					"keys": "Enter",
+					"action": "Select the inspected record."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "charts/date-range-picker",
+		"path": "../charts/date-range-picker/DomDateRangePicker.vue",
+		"section": "charts",
+		"slug": "date-range-picker",
+		"exportName": "DomDateRangePicker",
+		"route": "/charts/date-range-picker",
+		"doc": {
+			"name": "Date range picker",
+			"tag": "<DomDateRangePicker>",
+			"description": "Inclusive reporting dates with useful presets, explicit Apply and Cancel actions, and optional period comparisons.",
+			"icon": "M5 4v3M19 4v3M4 9h16M4 6h16v14H4zM8 13h8M8 16h5",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "{ start, end }",
+					"description": "Committed inclusive YYYY-MM-DD dates."
+				},
+				{
+					"name": "update:comparison",
+					"payload": "string",
+					"description": "Committed comparison mode."
+				},
+				{
+					"name": "change",
+					"payload": "{ range, comparison, comparisonRange }",
+					"description": "Atomic reporting query change; fetching remains application-owned."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "charts/donut-chart",
+		"path": "../charts/donut-chart/DomDonutChart.vue",
+		"section": "charts",
+		"slug": "donut-chart",
+		"exportName": "DomDonutChart",
+		"route": "/charts/donut-chart",
+		"doc": {
+			"name": "Donut chart",
+			"tag": "<DomDonutChart>",
+			"description": "Compare non-negative category shares with a centre total, selectable legend, and accessible data table.",
+			"icon": "M12 3v9h9A9 9 0 1 1 12 3ZM15 3.5A9 9 0 0 1 20.5 9H15z",
+			"slots": [
+				{
+					"name": "center",
+					"payload": "{ total, formattedTotal }",
+					"description": "Replaces the centre labels with custom content, such as an audit score out of 100. Keep content small enough to fit inside the ring."
+				}
+			],
+			"events": [
+				{
+					"name": "select",
+					"payload": "{ row, index }",
+					"description": "Original record for the selected category."
+				},
+				{
+					"name": "retry",
+					"description": "Requests application data recovery."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "charts/line-chart",
+		"path": "../charts/line-chart/DomLineChart.vue",
+		"section": "charts",
+		"slug": "line-chart",
+		"exportName": "DomLineChart",
+		"route": "/charts/line-chart",
+		"doc": {
+			"name": "Line chart",
+			"tag": "<DomLineChart>",
+			"description": "Compare trends, reporting periods, and targets with proportional time or ordered category axes.",
+			"icon": "M4 4v16h16M7 14l4-5 4 3 5-7",
+			"events": [
+				{
+					"name": "select",
+					"payload": "{ row, index }",
+					"description": "Original application record selected by click or Enter."
 				},
 				{
-					"name": "day-header",
-					"payload": "{ cell, month, week }",
-					"description": "Custom day-column header content."
-				},
+					"name": "retry",
+					"description": "Requests another attempt to load application data."
+				}
+			],
+			"keyboard": [
 				{
-					"name": "all-day",
-					"payload": "{ cell, month, week, drag, dragAttrs }",
-					"description": "All-day content rendered above the timed rows."
+					"keys": "Arrow keys / Home / End",
+					"action": "Inspect data points."
 				},
 				{
-					"name": "time-label",
-					"payload": "{ slot }",
-					"description": "Custom sticky time-rail label."
+					"keys": "Enter",
+					"action": "Select the inspected record."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "charts/metric-card",
+		"path": "../charts/metric-card/DomMetricCard.vue",
+		"section": "charts",
+		"slug": "metric-card",
+		"exportName": "DomMetricCard",
+		"route": "/charts/metric-card",
+		"doc": {
+			"name": "Metric card",
+			"tag": "<DomMetricCard>",
+			"description": "A formatted measurement, explicit comparison, and optional sparkline for reporting dashboards.",
+			"icon": "M4 5h16v14H4zM7 15l3-3 3 1 4-5"
+		},
+		"studio": {}
+	},
+	{
+		"id": "charts/sparkline",
+		"path": "../charts/sparkline/DomSparkline.vue",
+		"section": "charts",
+		"slug": "sparkline",
+		"exportName": "DomSparkline",
+		"route": "/charts/sparkline",
+		"doc": {
+			"name": "Sparkline",
+			"tag": "<DomSparkline>",
+			"description": "Compact trends for metric cards, table cells, and resource lists.",
+			"icon": "M4 4v16h16M7 14l4-5 4 3 5-7",
+			"events": [
+				{
+					"name": "select",
+					"payload": "{ row, index }",
+					"description": "Original application record selected by click or Enter."
 				},
 				{
-					"name": "corner",
-					"payload": "{ range }",
-					"description": "Content above the sticky time rail."
+					"name": "retry",
+					"description": "Requests another attempt to load application data."
 				}
 			],
 			"keyboard": [
 				{
-					"keys": "Tab",
-					"action": "Move through day headers, all-day cells, and time rows when clickable is enabled."
+					"keys": "Arrow keys / Home / End",
+					"action": "Inspect data points."
 				},
 				{
-					"keys": "Enter / Space",
-					"action": "Activate the focused day or time row."
+					"keys": "Enter",
+					"action": "Select the inspected record."
 				}
 			]
 		},
@@ -3143,7 +3877,39 @@ export const componentCatalog = [
 		"slug": "number-input",
 		"exportName": "DomNumberInput",
 		"route": "/forms/number-input",
-		"doc": {},
+		"doc": {
+			"name": "Vue number input",
+			"tag": "<DomNumberInput>",
+			"description": "An accessible Vue 3 number input with v-model, labels, validation, and native min, max, and step constraints.",
+			"icon": "M8 7h8M8 12h8M8 17h8",
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "number | string",
+					"description": "Fired with a number as the user types, or an empty string when cleared."
+				},
+				{
+					"name": "focus",
+					"payload": "FocusEvent",
+					"description": "Fired when the number input receives focus."
+				},
+				{
+					"name": "blur",
+					"payload": "FocusEvent",
+					"description": "Fired when the number input loses focus."
+				}
+			],
+			"playground": {
+				"initial": {
+					"label": "Quantity",
+					"description": "Choose between 1 and 99 items.",
+					"modelValue": 3,
+					"min": 1,
+					"max": 99,
+					"step": 1
+				}
+			}
+		},
 		"studio": {}
 	},
 	{
@@ -3249,6 +4015,18 @@ export const componentCatalog = [
 			"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": [],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "number",
+					"description": "The value changed through pointer or keyboard input."
+				},
+				{
+					"name": "update:dragging",
+					"payload": "boolean",
+					"description": "Pointer scrubbing started or finished, including cancellation."
+				}
+			],
 			"playground": {
 				"initial": {
 					"label": "Confidence",
@@ -3478,18 +4256,18 @@ export const componentCatalog = [
 				},
 				{
 					"name": "submit",
-					"payload": "{ submit, disabled, submitting, label }",
-					"description": "Replace the built-in circular submit button."
+					"payload": "{ submit, disabled, submitting, label, pressed }",
+					"description": "Replace the built-in circular submit button. Bind pressed to DomButton or DomIconButton to retain keyboard submit feedback."
 				}
 			],
 			"keyboard": [
 				{
 					"keys": "Enter",
-					"action": "Submit when submitOnEnter is enabled."
+					"action": "Submit with button press feedback when submitOnEnter is enabled; otherwise insert a new line."
 				},
 				{
 					"keys": "Shift + Enter",
-					"action": "Insert a new line."
+					"action": "Insert a new line when submitOnEnter is enabled; otherwise submit with button press feedback."
 				}
 			]
 		},
@@ -3770,7 +4548,7 @@ export const componentCatalog = [
 		"doc": {
 			"name": "Action sheet",
 			"tag": "<DomActionSheet>",
-			"description": "A bottom action sheet for app choices, destructive actions, and quick commands.",
+			"description": "A bottom action sheet for mobile and desktop, with bounded scrolling, keyboard dismissal, focus return, and drag dismissal. Works standalone as a viewport overlay. In DomAppShell, place it in the overlay slot and it stays inside that app.",
 			"events": [
 				{
 					"name": "update:modelValue",
@@ -3793,16 +4571,23 @@ export const componentCatalog = [
 						{
 							"label": "Share project",
 							"description": "Open the native share sheet",
-							"value": "share"
+							"value": "share",
+							"variant": "",
+							"disabled": false
 						},
 						{
 							"label": "Duplicate screen",
-							"value": "duplicate"
+							"description": "",
+							"value": "duplicate",
+							"variant": "",
+							"disabled": false
 						},
 						{
 							"label": "Delete draft",
+							"description": "",
 							"value": "delete",
-							"variant": "danger"
+							"variant": "danger",
+							"disabled": false
 						}
 					]
 				}
@@ -3857,6 +4642,66 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "mobile/bottom-sheet",
+		"path": "../mobile/bottom-sheet/DomBottomSheet.vue",
+		"section": "mobile",
+		"slug": "bottom-sheet",
+		"exportName": "DomBottomSheet",
+		"route": "/mobile/bottom-sheet",
+		"doc": {
+			"name": "Bottom sheet",
+			"tag": "<DomBottomSheet>",
+			"description": "A modal content sheet with configurable snap heights, a draggable and keyboard-operable handle, scrolling body, and pinned footer. Uses the shared drawer for focus, dismissal, and scroll locking. Works standalone or in the DomAppShell overlay slot.",
+			"slots": [
+				{
+					"name": "(default)",
+					"payload": "{ close, expand }",
+					"description": "Scrollable sheet content."
+				},
+				{
+					"name": "header",
+					"description": "Custom heading content beside the close button."
+				},
+				{
+					"name": "footer",
+					"payload": "{ close, expand }",
+					"description": "Pinned controls, such as a reply composer."
+				}
+			],
+			"events": [
+				{
+					"name": "update:modelValue",
+					"payload": "boolean",
+					"description": "Open or dismiss the sheet."
+				},
+				{
+					"name": "update:snapPoint",
+					"payload": "number",
+					"description": "The selected fraction of the available sheet viewport."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Handle: Arrow Up / Down",
+					"action": "Expand or collapse to the next visible stop."
+				},
+				{
+					"keys": "Handle: Home / End",
+					"action": "Choose the smallest or largest visible stop."
+				},
+				{
+					"keys": "Handle: Enter / Space",
+					"action": "Cycle through visible snap heights."
+				},
+				{
+					"keys": "Escape",
+					"action": "Dismiss and return focus to the opener."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "mobile/list-item",
 		"path": "../mobile/list-item/DomAppListItem.vue",
@@ -3867,7 +4712,7 @@ export const componentCatalog = [
 		"doc": {
 			"name": "App list item",
 			"tag": "<DomAppListItem>",
-			"description": "A touch-sized app row for settings, inboxes, menus, and navigation.",
+			"description": "A touch-sized row that works in any layout. Use as=\"div\" for rows containing switches, inputs, or other controls so interactive elements are never nested inside a button.",
 			"slots": [
 				{
 					"name": "icon",
@@ -3890,6 +4735,41 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "mobile/profile",
+		"path": "../mobile/profile/DomAppProfile.vue",
+		"section": "mobile",
+		"slug": "profile",
+		"exportName": "DomAppProfile",
+		"route": "/mobile/profile",
+		"doc": {
+			"name": "App profile",
+			"tag": "<DomAppProfile>",
+			"description": "An iOS-style account header with a circular profile image, name, email, and an optional action. Place it above settings rows or inside any app stack screen.",
+			"slots": [
+				{
+					"name": "actions",
+					"description": "Replace the default profile action with account controls."
+				}
+			],
+			"events": [
+				{
+					"name": "action",
+					"payload": "()",
+					"description": "Fired when the profile action is selected. The application owns navigation or editing."
+				}
+			],
+			"playground": {
+				"mobileSlot": "content",
+				"initial": {
+					"name": "Alex Morgan",
+					"email": "alex@example.com",
+					"src": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=192&h=192&q=80"
+				}
+			}
+		},
+		"studio": {}
+	},
 	{
 		"id": "mobile/safe-area",
 		"path": "../mobile/safe-area/DomSafeArea.vue",
@@ -3900,7 +4780,7 @@ export const componentCatalog = [
 		"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.",
+			"description": "Applies selected device safe-area insets in any layout. App shell and app stack already reserve their own insets, so no extra wrapper is needed there. Enable viewport-fit=cover in the app viewport meta tag for edge-to-edge iOS layouts.",
 			"slots": [
 				{
 					"name": "(default)",
@@ -3908,7 +4788,7 @@ export const componentCatalog = [
 				}
 			],
 			"playground": {
-				"mobileSlot": "content"
+				"mobileSlot": "safe-area"
 			}
 		},
 		"studio": {}
@@ -3923,7 +4803,7 @@ export const componentCatalog = [
 		"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.",
+			"description": "A bounded app viewport with safe areas, pinned top and bottom slots, and one scrolling content region. Fills the viewport by default; use height=\"100%\" only inside an explicitly sized parent. Set content-scroll to false when a nested DomAppStack owns scrolling.",
 			"slots": [
 				{
 					"name": "top",
@@ -3935,15 +4815,26 @@ export const componentCatalog = [
 				},
 				{
 					"name": "bottom",
-					"description": "Bottom navigation, tab bar, or persistent controls."
+					"payload": "{ keyboardOpen }",
+					"description": "Bottom navigation or persistent controls. Receives the detected keyboard state."
 				},
 				{
 					"name": "overlay",
 					"description": "Absolute overlay layer for drawers, action sheets, and app-level panels."
 				}
 			],
+			"events": [
+				{
+					"name": "keyboard-change",
+					"payload": "{ open, height }",
+					"description": "Estimated keyboard state or the app-supplied native keyboard inset."
+				}
+			],
 			"playground": {
-				"mobileSlot": "shell"
+				"mobileSlot": "shell",
+				"initial": {
+					"height": "100%"
+				}
 			}
 		},
 		"studio": {}
@@ -3958,16 +4849,21 @@ export const componentCatalog = [
 		"doc": {
 			"name": "App stack",
 			"tag": "<DomAppStack>",
-			"description": "A settings-style screen stack that handles slide navigation, breadcrumbs, lazy screens, and responsive panel styling.",
+			"description": "A bounded screen stack with an iOS-style back button and sliding title on mobile, desktop breadcrumbs, and lazy screens. Fills the viewport by default. Inside DomAppShell, set height=\"100%\" and disable the shell content-scroll so each screen owns scrolling.",
 			"slots": [
 				{
 					"name": "(default)",
 					"description": "Optional DomAppStackScreen children used to register slot-driven screens."
 				},
+				{
+					"name": "header",
+					"payload": "{ activeScreen, canGoBack, back, path }",
+					"description": "Replace the mobile header; the header transitions with its screen."
+				},
 				{
 					"name": "breadcrumb",
 					"payload": "{ crumbs, canGoBack, back, goTo, push, path }",
-					"description": "Replace the breadcrumb and back control while keeping the stack state."
+					"description": "Replace the desktop breadcrumb and back control while keeping the stack state."
 				}
 			],
 			"events": [
@@ -3993,8 +4889,9 @@ export const componentCatalog = [
 				}
 			],
 			"playground": {
-				"mobileSlot": "content",
+				"mobileSlot": "stack",
 				"initial": {
+					"height": "100%",
 					"root": "settings",
 					"screens": [
 						{
@@ -4003,12 +4900,51 @@ export const componentCatalog = [
 							"children": [
 								"account",
 								"notifications"
-							]
+							],
+							"description": ""
 						},
 						{
 							"id": "account",
 							"title": "Account",
-							"description": "Profile, password, and sign-in settings."
+							"description": "Profile and preferences.",
+							"children": [
+								"general",
+								"apps"
+							]
+						},
+						{
+							"id": "general",
+							"title": "General",
+							"children": [
+								"language"
+							],
+							"description": ""
+						},
+						{
+							"id": "language",
+							"title": "Language & Region",
+							"description": "English (UK), United Kingdom."
+						},
+						{
+							"id": "apps",
+							"title": "Apps",
+							"children": [
+								"calendar"
+							],
+							"description": ""
+						},
+						{
+							"id": "calendar",
+							"title": "Calendar",
+							"children": [
+								"calendar-notifications"
+							],
+							"description": ""
+						},
+						{
+							"id": "calendar-notifications",
+							"title": "Notifications",
+							"description": "Event reminders, invitations, and shared calendars."
 						},
 						{
 							"id": "notifications",
@@ -4021,6 +4957,58 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "mobile/swipe-actions",
+		"path": "../mobile/swipe-actions/DomSwipeActions.vue",
+		"section": "mobile",
+		"slug": "swipe-actions",
+		"exportName": "DomSwipeActions",
+		"route": "/mobile/swipe-actions",
+		"doc": {
+			"name": "Swipe actions",
+			"tag": "<DomSwipeActions>",
+			"description": "Reveal row actions with a horizontal swipe while preserving vertical scrolling. Includes an Actions button, keyboard access, coordinated open rows, and opt-in full-swipe shortcuts. Applications own mutations and undo.",
+			"slots": [
+				{
+					"name": "(default)",
+					"description": "Row content, including an ordinary button or link."
+				},
+				{
+					"name": "action",
+					"payload": "{ action, side }",
+					"description": "Optional visual content inside each action button."
+				}
+			],
+			"events": [
+				{
+					"name": "action",
+					"payload": "SwipeActionPayload",
+					"typeRef": "SwipeActionPayload",
+					"description": "An enabled action selected by button or full swipe. source is button or swipe."
+				},
+				{
+					"name": "open",
+					"payload": "string",
+					"description": "The revealed side: start, end, or menu."
+				},
+				{
+					"name": "close",
+					"description": "All action controls have closed."
+				}
+			],
+			"keyboard": [
+				{
+					"keys": "Actions button",
+					"action": "Shows every action without requiring a gesture."
+				},
+				{
+					"keys": "Escape",
+					"action": "Closes revealed actions and returns focus to Actions."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "mobile/top-bar",
 		"path": "../mobile/top-bar/DomAppTopBar.vue",
@@ -4100,6 +5088,36 @@ export const componentCatalog = [
 		},
 		"studio": {}
 	},
+	{
+		"id": "visual/audio-visualizer",
+		"path": "../visual/audio-visualizer/DomAudioVisualizer.vue",
+		"section": "visual",
+		"slug": "audio-visualizer",
+		"exportName": "DomAudioVisualizer",
+		"route": "/visual/audio-visualizer",
+		"doc": {
+			"nav": {
+				"section": "ai"
+			},
+			"name": "Audio visualizer",
+			"tag": "<DomAudioVisualizer>",
+			"description": "A live waveform of input levels from a MediaStream. Shows real audio activity without recording, playing, or transmitting the stream.",
+			"icon": "M4 10v4M8 6v12M12 3v18M16 7v10M20 10v4",
+			"events": [
+				{
+					"name": "level",
+					"payload": "(level: number)",
+					"description": "Measured RMS amplitude from 0 to 1, emitted at most ten times per second. This is input activity, not speech detection."
+				},
+				{
+					"name": "error",
+					"payload": "({ name, message })",
+					"description": "Web Audio could not analyse the stream. Capture remains owned by the caller."
+				}
+			]
+		},
+		"studio": {}
+	},
 	{
 		"id": "visual/avatar",
 		"path": "../visual/avatar/DomAvatar.vue",
@@ -4510,5 +5528,128 @@ export const componentCatalog = [
 			]
 		},
 		"studio": {}
+	},
+	{
+		"id": "designer/backdrop-editor",
+		"path": "../designer/backdrop-editor/DomBackdropEditor.vue",
+		"section": "designer",
+		"slug": "backdrop-editor",
+		"exportName": "DomBackdropEditor",
+		"route": "/designer/backdrop-editor",
+		"doc": {
+			"name": "Backdrop editor",
+			"description": "Beta controlled CSS backdrop editor shared with the theme designer."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/background-editor",
+		"path": "../designer/background-editor/DomBackgroundEditor.vue",
+		"section": "designer",
+		"slug": "background-editor",
+		"exportName": "DomBackgroundEditor",
+		"route": "/designer/background-editor",
+		"doc": {
+			"name": "Background editor",
+			"description": "Beta controlled CSS background editor shared with the theme designer."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/border-editor",
+		"path": "../designer/border-editor/DomBorderEditor.vue",
+		"section": "designer",
+		"slug": "border-editor",
+		"exportName": "DomBorderEditor",
+		"route": "/designer/border-editor",
+		"doc": {
+			"name": "Border editor",
+			"description": "Beta controlled CSS border width, style and colour, shared with the CSS button creator."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/color-swatch",
+		"path": "../designer/color-swatch/DomColorSwatch.vue",
+		"section": "designer",
+		"slug": "color-swatch",
+		"exportName": "DomColorSwatch",
+		"route": "/designer/color-swatch",
+		"doc": {
+			"name": "Color swatch",
+			"description": "Beta CSS colour swatch with an editable expression and native picker."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/frame",
+		"path": "../designer/frame/DomDesignerFrame.vue",
+		"section": "designer",
+		"slug": "frame",
+		"exportName": "DomDesignerFrame",
+		"route": "/designer/frame",
+		"doc": {
+			"name": "Designer frame",
+			"description": "An ordinary container with independent flow, flex, grid or absolute child layout.",
+			"slots": [
+				{
+					"name": "default",
+					"description": "Frame content. Applications own child placement."
+				}
+			]
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/frame",
+		"path": "../designer/frame/DomFrameLayoutEditor.vue",
+		"section": "designer",
+		"slug": "frame",
+		"exportName": "DomFrameLayoutEditor",
+		"route": "/designer/frame",
+		"doc": {
+			"name": "Frame layout editor",
+			"description": "Controlled layout settings for flow, flex, grid and absolute frames."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/layers",
+		"path": "../designer/layers/DomDesignerLayers.vue",
+		"section": "designer",
+		"slug": "layers",
+		"exportName": "DomDesignerLayers",
+		"route": "/designer/layers",
+		"doc": {
+			"name": "Designer layers",
+			"description": "Beta layer tree shared with Studio. Accepts the full DomTreeView props, slots and events."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/shadow-editor",
+		"path": "../designer/shadow-editor/DomShadowEditor.vue",
+		"section": "designer",
+		"slug": "shadow-editor",
+		"exportName": "DomShadowEditor",
+		"route": "/designer/shadow-editor",
+		"doc": {
+			"name": "Shadow editor",
+			"description": "Beta controlled CSS box-shadow layers: drop, inner and ring."
+		},
+		"studio": {}
+	},
+	{
+		"id": "designer/stage",
+		"path": "../designer/stage/DomDesignerStage.vue",
+		"section": "designer",
+		"slug": "stage",
+		"exportName": "DomDesignerStage",
+		"route": "/designer/stage",
+		"doc": {
+			"name": "Designer stage",
+			"description": "Beta HTML stage with controlled selection and opt-in absolute movement and resizing."
+		},
+		"studio": {}
 	}
 ];