@getdom/studio 0.1.0

package/src/pages/lib/vue/index.js

@@ -0,0 +1,218 @@
+export { default as DomButton } from '../../components/button/DomButton.vue';
+export { default as DomIconButton } from '../../components/icon-button/DomIconButton.vue';
+export { default as DomToolbar } from '../../components/toolbar/DomToolbar.vue';
+export { default as DomDropdown } from '../../components/dropdown/DomDropdown.vue';
+export { default as DomProfileMenu } from '../../components/profile-menu/DomProfileMenu.vue';
+export { default as DomThemeSwitcher } from '../../components/theme-switcher/DomThemeSwitcher.vue';
+export { default as DomDialog } from '../../components/dialog/DomDialog.vue';
+export { default as DomDialogStack } from '../../components/dialog/DomDialogStack.vue';
+export { default as DomDialogSchemaForm } from '../../components/dialog/DomDialogSchemaForm.vue';
+export { default as DomLightbox } from '../../components/lightbox/DomLightbox.vue';
+export { default as DomTabs } from '../../components/tabs/DomTabs.vue';
+export { default as DomTooltip } from '../../components/tooltip/DomTooltip.vue';
+export { vDomTooltip } from '../../components/tooltip/vDomTooltip.js';
+export { default as DomAccordion } from '../../components/accordion/DomAccordion.vue';
+export { default as DomMenu } from '../../components/menu/DomMenu.vue';
+export { default as DomMenuItem } from '../../components/menu/DomMenuItem.vue';
+export { default as MenuItem } from '../../components/menu/DomMenuItem.vue';
+export { default as DomMenuSeparator } from '../../components/menu/DomMenuSeparator.vue';
+export { default as MenuSeparator } from '../../components/menu/DomMenuSeparator.vue';
+export { default as DomMenuLabel } from '../../components/menu/DomMenuLabel.vue';
+export { default as MenuLabel } from '../../components/menu/DomMenuLabel.vue';
+export { default as DomScrollMenu } from '../../components/scroll-menu/DomScrollMenu.vue';
+export { default as DomScrollMenuItem } from '../../components/scroll-menu/DomScrollMenuItem.vue';
+export { default as DomTreeView } from '../../components/tree-view/DomTreeView.vue';
+export { default as DomSplitterPanel } from '../../components/splitter-panel/DomSplitterPanel.vue';
+export { default as DomStepper } from '../../components/stepper/DomStepper.vue';
+export { default as DomBreadcrumbs } from '../../components/breadcrumbs/DomBreadcrumbs.vue';
+export {
+	cloneTreeItems,
+	flattenTreeItems,
+	indexTreeItems,
+	isSameOrDescendantPath,
+	moveTreeItem,
+	seedTreeOpenValues,
+	treeItemCanAcceptChildren,
+	treeItemChildren,
+	treeItemHasChildren,
+	treeItemLabel,
+	treeItemValue,
+	visitTreeItems,
+} from '../../components/tree-view/treeUtils.js';
+export { default as DomPopover } from '../../components/popover/DomPopover.vue';
+export { default as DomDrawer } from '../../components/drawer/DomDrawer.vue';
+export { default as DomToastStack } from '../../components/toast/DomToastStack.vue';
+export { default as DomToastItem } from '../../components/toast/DomToastItem.vue';
+export { default as DomCommandPalette } from '../../components/command-palette/DomCommandPalette.vue';
+export { default as DomContextMenu } from '../../components/context-menu/DomContextMenu.vue';
+export { default as DomDataGrid } from '../../data/data-grid/DomDataGrid.vue';
+export { default as DomFilterBar } from '../../data/filter-bar/DomFilterBar.vue';
+export { default as DomActivityTimeline } from '../../data/activity-timeline/DomActivityTimeline.vue';
+export { default as DomKanban } from '../../data/kanban/DomKanban.vue';
+export { default as DomMonthCalendar } from '../../data/month-calendar/DomMonthCalendar.vue';
+export { default as DomWeekPlanner } from '../../data/week-planner/DomWeekPlanner.vue';
+export { default as DomMediaBrowser } from '../../data/media-browser/DomMediaBrowser.vue';
+export { default as DomDocumentEditor } from '../../data/document-editor/DomDocumentEditor.vue';
+export { default as DomJsonViewer } from '../../dev/json-viewer/DomJsonViewer.vue';
+export { default as DomAgentChatShell } from '../../data/agent-chat/DomAgentChatShell.vue';
+export { default as DomAgentConversation } from '../../data/agent-chat/DomAgentConversation.vue';
+export { default as DomAgentConversationList } from '../../data/agent-chat/DomAgentConversationList.vue';
+export { default as DomPagination } from '../../components/pagination/DomPagination.vue';
+export { agentChatShellProps } from '../../data/agent-chat/DomAgentChatShell.vue';
+export { agentConversationProps } from '../../data/agent-chat/DomAgentConversation.vue';
+export { agentConversationListProps } from '../../data/agent-chat/DomAgentConversationList.vue';
+export { documentEditorProps, createDefaultDocumentContent } from '../../data/document-editor/DomDocumentEditor.vue';
+export { mediaBrowserProps } from '../../data/media-browser/DomMediaBrowser.vue';
+export { filterBarProps } from '../../data/filter-bar/DomFilterBar.vue';
+export { createAgentChatRestApi, defineAgentChatStore } from '../../data/agent-chat/examples/useAgentChatDemoStore.js';
+export { createDocumentEditorRestApi, defineDocumentEditorStore } from '../../data/document-editor/examples/useDocumentEditorDemoStore.js';
+export { createMediaBrowserRestApi, defineMediaBrowserStore } from '../../data/media-browser/examples/useMediaBrowserDemoStore.js';
+export { activityTimelineProps } from '../../data/activity-timeline/DomActivityTimeline.vue';
+export { stepperProps } from '../../components/stepper/DomStepper.vue';
+export { breadcrumbsProps } from '../../components/breadcrumbs/DomBreadcrumbs.vue';
+export { kanbanProps } from '../../data/kanban/DomKanban.vue';
+export { applyKanbanCardMove, applyKanbanColumnMove, resolveKanbanRowKey } from '../../data/kanban/kanbanApi.js';
+export { monthCalendarProps } from '../../data/month-calendar/DomMonthCalendar.vue';
+export { weekPlannerProps } from '../../data/week-planner/DomWeekPlanner.vue';
+export { popoverProps } from '../../components/popover/DomPopover.vue';
+export { useToasts } from '../../components/toast/useToasts.js';
+export { useDialogs } from '../../components/dialog/useDialogs.js';
+export {
+	THEME_MODE_STORAGE_KEY,
+	applyThemeMode,
+	cycleThemeMode,
+	initTheme,
+	normalizeThemeMode,
+	readThemeMode,
+	resolveThemeMode,
+	resolvedTheme,
+	setThemeMode,
+	themeModeValues,
+	useTheme,
+} from './useTheme.js';
+
+// Visual primitives
+export { default as DomCard } from '../../visual/card/DomCard.vue';
+export { default as DomCardRail } from '../../visual/card-rail/DomCardRail.vue';
+export { default as DomBadge } from '../../visual/badge/DomBadge.vue';
+export { default as DomStatusPill } from '../../visual/status-pill/DomStatusPill.vue';
+export { default as DomAvatar } from '../../visual/avatar/DomAvatar.vue';
+export { default as DomAvatarStack } from '../../visual/avatar-stack/DomAvatarStack.vue';
+export { default as DomEmptyState } from '../../visual/empty-state/DomEmptyState.vue';
+export { default as DomAlert } from '../../visual/alert/DomAlert.vue';
+export { default as DomSkeleton } from '../../visual/skeleton/DomSkeleton.vue';
+export { default as DomProgress } from '../../visual/progress/DomProgress.vue';
+export { default as DomSegmentedProgress } from '../../visual/progress/DomSegmentedProgress.vue';
+export { default as DomRadialProgress } from '../../visual/progress/DomRadialProgress.vue';
+export { default as DomSpinner } from '../../visual/spinner/DomSpinner.vue';
+export { default as DomTextDiff } from '../../visual/text-diff/DomTextDiff.vue';
+export { default as DomCodeBlock } from '../../dev/code-block/DomCodeBlock.vue';
+
+// Form primitives
+export { default as DomToggle } from '../../forms/toggle/DomToggle.vue';
+export { default as DomToggleButton } from '../../forms/toggle-button/DomToggleButton.vue';
+export { default as DomToggleButtonGroup } from '../../forms/toggle-button-group/DomToggleButtonGroup.vue';
+export { default as DomCheckbox } from '../../forms/checkbox/DomCheckbox.vue';
+export { default as DomRadioGroup } from '../../forms/radio-group/DomRadioGroup.vue';
+export { default as DomListbox } from '../../forms/listbox/DomListbox.vue';
+export { default as DomSelect } from '../../forms/select/DomSelect.vue';
+export { default as DomCombobox } from '../../forms/combobox/DomCombobox.vue';
+export { default as DomAutocomplete } from '../../forms/autocomplete/DomAutocomplete.vue';
+export { default as DomTagCombobox } from '../../forms/tag-combobox/DomTagCombobox.vue';
+export { default as DomIconSelector } from '../../forms/icon-selector/DomIconSelector.vue';
+export { default as DomClassToggleInput } from '../../forms/class-toggle-input/DomClassToggleInput.vue';
+export { default as DomField } from '../../forms/field/DomField.vue';
+export { default as DomGridFieldLayout } from '../../forms/field/layouts/DomGridFieldLayout.vue';
+export { default as DomInputGroup } from '../../forms/input-group/DomInputGroup.vue';
+export { default as DomForm } from '../../forms/form/DomForm.vue';
+export { default as DomTextInput } from '../../forms/text-input/DomTextInput.vue';
+export { default as DomEmailInput } from '../../forms/email-input/DomEmailInput.vue';
+export { default as DomUrlInput } from '../../forms/url-input/DomUrlInput.vue';
+export { default as DomTextareaInput } from '../../forms/textarea-input/DomTextareaInput.vue';
+export { default as DomTextareaComposer } from '../../forms/textarea-composer/DomTextareaComposer.vue';
+export { default as DomWysiwyg } from '../../forms/wysiwyg/DomWysiwyg.vue';
+export { default as DomNumberInput } from '../../forms/number-input/DomNumberInput.vue';
+export { default as DomMoneyInput } from '../../forms/money-input/DomMoneyInput.vue';
+export { default as DomFileUpload } from '../../forms/file-upload/DomFileUpload.vue';
+export { default as DomRangeInput } from '../../forms/range-input/DomRangeInput.vue';
+export { default as DomPositionInput } from '../../forms/position-input/DomPositionInput.vue';
+export { default as DomSelectInput } from '../../forms/select-input/DomSelectInput.vue';
+export { default as DomNativeSelect } from '../../forms/native-select/DomNativeSelect.vue';
+export { default as DomPasswordInput } from '../../forms/password-input/DomPasswordInput.vue';
+export { default as DomPasswordStrength } from '../../forms/password-strength/DomPasswordStrength.vue';
+export { checkCompromisedPassword, sha1PasswordHash } from '../../forms/password-input/pwnedPasswords.js';
+export { default as DomCalendar } from '../../forms/calendar/DomCalendar.vue';
+export { calendarProps } from '../../forms/calendar/DomCalendar.vue';
+export { default as DomDatePicker } from '../../forms/date-picker/DomDatePicker.vue';
+export { default as DomTimeSelector } from '../../forms/time-selector/DomTimeSelector.vue';
+export { timeSelectorProps } from '../../forms/time-selector/DomTimeSelector.vue';
+export { default as DomDateTimePicker } from '../../forms/date-time-picker/DomDateTimePicker.vue';
+export { dateTimePickerProps } from '../../forms/date-time-picker/DomDateTimePicker.vue';
+export { default as DomBooleanInput } from '../../forms/toggle/DomToggle.vue';
+export { default as DomColorInput } from '../../forms/color-input/DomColorInput.vue';
+export { default as DomConfirmationCodeInput } from '../../forms/confirmation-code-input/DomConfirmationCodeInput.vue';
+export { default as DomJsonListInput } from '../../forms/json-list-input/DomJsonListInput.vue';
+export { default as DomCodeInput } from '../../forms/code-input/DomCodeInput.vue';
+export { default as DomJsonInput } from '../../forms/json-input/DomJsonInput.vue';
+export { fieldProps } from '../../forms/field/fieldProps.js';
+export { wysiwygProps } from '../../forms/wysiwyg/DomWysiwyg.vue';
+export { fieldLayoutProviderKey } from '../../forms/field/fieldLayout.js';
+export { fieldDisplayProviderKey, formFieldProviderKey, normalizeErrors, useField } from '../../forms/field/useField.js';
+export {
+	betweenValidator,
+	compileValidator,
+	compileValidators,
+	createValidator,
+	defineValidator,
+	emailValidator,
+	getValidator,
+	integerValidator,
+	lengthValidator,
+	listValidators,
+	maxLengthValidator,
+	maxValidator,
+	minLengthValidator,
+	minValidator,
+	normalizeValidatorResult,
+	numberValidator,
+	oneOfValidator,
+	patternValidator,
+	requiredValidator,
+	urlValidator,
+} from '../../forms/field/validators.js';
+export { createFormRegistry, forms, getPathValue, setPathValue } from '../../forms/form/formApi.js';
+export {
+	FORM_NODE_RESERVED_KEYS,
+	defaultComponentByType,
+	formDefinitionToJsonSchema,
+	formNodeDefaultValue,
+	formNodeToJsonSchema,
+	getFormType,
+	normalizeFormChildren,
+	normalizeFormNode,
+	registerFormType,
+	typeByComponent,
+} from '../../forms/form/formDefinition.js';
+export {
+	builtInSchemaAdapters,
+	isJsonSchema,
+	isZodLikeSchema,
+	jsonSchemaAdapter,
+	jsonSchemaToChildren,
+	schemaToChildren,
+	zodSchemaAdapter,
+	zodSchemaToChildren,
+} from '../../forms/form/schemaAdapter.js';
+
+// Mobile primitives
+export { default as DomAppBottomNav } from '../../mobile/bottom-nav/DomAppBottomNav.vue';
+export { default as DomAppListItem } from '../../mobile/list-item/DomAppListItem.vue';
+export { default as DomAppShell } from '../../mobile/shell/DomAppShell.vue';
+export { default as DomAppTopBar } from '../../mobile/top-bar/DomAppTopBar.vue';
+export { default as DomActionSheet } from '../../mobile/action-sheet/DomActionSheet.vue';
+export { default as DomSafeArea } from '../../mobile/safe-area/DomSafeArea.vue';
+export { default as DomAppStack } from '../../mobile/stack/DomAppStack.vue';
+export { default as DomAppStackScreen } from '../../mobile/stack/AppStackScreen.vue';
+
+// Rehydration
+export { default as DomRenderer } from '../../components/playground/DomRenderer.vue';

package/src/pages/lib/vue/useTheme.js

@@ -0,0 +1,116 @@
+import { computed, ref } from 'vue';
+
+export const THEME_MODE_STORAGE_KEY = 'theme-mode';
+export const themeModeValues = ['light', 'dark', 'system'];
+
+const mode = ref('system');
+const systemDark = ref(false);
+let mediaQueryList = null;
+let mediaListener = null;
+
+export const resolvedTheme = computed(() => resolveThemeMode(mode.value, systemDark.value));
+
+export function normalizeThemeMode(value) {
+	return themeModeValues.includes(value) ? value : 'system';
+}
+
+export function resolveThemeMode(value = mode.value, prefersDark = systemDark.value) {
+	const normalized = normalizeThemeMode(value);
+	if (normalized === 'system') return prefersDark ? 'dark' : 'light';
+	return normalized;
+}
+
+export function readThemeMode() {
+	try {
+		return normalizeThemeMode(storage()?.getItem(THEME_MODE_STORAGE_KEY));
+	} catch {
+		return 'system';
+	}
+}
+
+export function initTheme() {
+	if (typeof window !== 'undefined') {
+		mode.value = readThemeMode();
+		installSystemThemeListener();
+	}
+	return applyThemeMode();
+}
+
+export function setThemeMode(value) {
+	const next = normalizeThemeMode(value);
+	mode.value = next;
+	writeThemeMode(next);
+	if (typeof window !== 'undefined' && !mediaQueryList) installSystemThemeListener();
+	return applyThemeMode();
+}
+
+export function cycleThemeMode() {
+	const next = ({ light: 'dark', dark: 'system', system: 'light' })[mode.value] || 'light';
+	return setThemeMode(next);
+}
+
+export function applyThemeMode(value = mode.value) {
+	const next = resolveThemeMode(value, systemDark.value);
+	if (typeof document !== 'undefined') document.documentElement.dataset.theme = next;
+	return next;
+}
+
+export function useTheme() {
+	return {
+		mode,
+		resolvedTheme,
+		setMode: setThemeMode,
+		cycleMode: cycleThemeMode,
+		initTheme,
+		currentTheme: resolvedTheme,
+		toggleTheme: cycleThemeMode,
+	};
+}
+
+function installSystemThemeListener() {
+	if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+
+	const nextMediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+	systemDark.value = nextMediaQueryList.matches;
+	if (mediaQueryList && mediaListener) removeMediaListener(mediaQueryList, mediaListener);
+
+	mediaQueryList = nextMediaQueryList;
+	mediaListener = (event) => {
+		systemDark.value = event.matches;
+		applyThemeMode();
+	};
+	addMediaListener(mediaQueryList, mediaListener);
+}
+
+function storage() {
+	if (typeof window === 'undefined') return null;
+	try {
+		return window.localStorage;
+	} catch {
+		return null;
+	}
+}
+
+function writeThemeMode(value) {
+	try {
+		storage()?.setItem(THEME_MODE_STORAGE_KEY, value);
+	} catch {
+		// Ignore storage failures; the active document theme still updates.
+	}
+}
+
+function addMediaListener(queryList, listener) {
+	if (typeof queryList.addEventListener === 'function') {
+		queryList.addEventListener('change', listener);
+		return;
+	}
+	queryList.addListener?.(listener);
+}
+
+function removeMediaListener(queryList, listener) {
+	if (typeof queryList.removeEventListener === 'function') {
+		queryList.removeEventListener('change', listener);
+		return;
+	}
+	queryList.removeListener?.(listener);
+}

package/src/pages/mobile/action-sheet/DomActionSheet.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, onMounted, ref, useId, watch } from 'vue';
+
+defineOptions({
+	__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' },
+				],
+			},
+		},
+	},
+});
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Whether the action sheet is open.' },
+	},
+	title: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional action sheet title.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional supporting text below the title.' },
+	},
+	actions: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			props: {
+				addLabel: '+ Add action',
+				compact: true,
+				schema: {
+					type: 'array',
+					items: {
+						type: 'DomForm',
+						properties: {
+							label: {
+								type: 'string',
+								label: 'Label',
+								placeholder: 'Share project',
+							},
+							description: {
+								type: 'string',
+								label: 'Description',
+								placeholder: 'Open the native share sheet',
+							},
+							value: {
+								type: 'string',
+								label: 'Value',
+								placeholder: 'share',
+							},
+							variant: {
+								type: 'string',
+								component: 'DomSelectInput',
+								label: 'Variant',
+								options: [
+									{ label: 'Default', value: '' },
+									{ label: 'Danger', value: 'danger' },
+								],
+							},
+						},
+					},
+				},
+			},
+			description: 'Action rows: { label, description, value, variant }.',
+		},
+	},
+	cancelLabel: {
+		type: String,
+		default: 'Cancel',
+		_edit: { description: 'Dismiss button label.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'select']);
+
+const drawer = ref(null);
+const uniqueId = useId();
+const titleId = computed(() => (props.title ? `dom-action-sheet-${uniqueId}-title` : ''));
+
+function close() {
+	emit('update:modelValue', false);
+}
+
+function selectAction(action) {
+	emit('select', action);
+	close();
+}
+
+function setOpen(value) {
+	if (drawer.value) drawer.value.open = value;
+}
+
+onMounted(async () => {
+	await import('../../lib/headless/drawer.js');
+	drawer.value?.addEventListener('dom:open', () => {
+		emit('update:modelValue', true);
+	});
+	drawer.value?.addEventListener('dom:close', () => {
+		emit('update:modelValue', false);
+	});
+	if (props.modelValue) setOpen(true);
+});
+
+watch(() => props.modelValue, setOpen);
+</script>
+
+<template>
+	<dom-drawer
+		ref="drawer"
+		side="bottom"
+		class="absolute inset-0 z-30 block pointer-events-none data-[state=open]:pointer-events-auto"
+		:aria-labelledby="titleId || null"
+	>
+		<div
+			data-overlay
+			data-no-defaults
+			class="absolute inset-0 pointer-events-none data-[state=open]:pointer-events-auto"
+		>
+			<div
+				data-backdrop
+				data-no-defaults
+				class="absolute inset-0 bg-black/40 opacity-0 backdrop-blur-sm transition-opacity duration-300 data-[state=open]:opacity-100"
+			></div>
+			<section
+				data-panel
+				data-no-defaults
+				class="absolute inset-x-3 bottom-3 translate-y-full outline-none transition-transform duration-300 ease-out data-[state=open]:translate-y-0"
+				:class="'pb-[env(safe-area-inset-bottom,0px)]'"
+			>
+				<button
+					data-drag-handle
+					type="button"
+					class="group mx-auto mb-1 flex h-8 w-full items-center justify-center"
+					aria-label="Drag to close action sheet"
+				>
+					<span class="block h-1.5 w-12 rounded-full bg-white/70 shadow-sm transition group-hover:bg-white"></span>
+				</button>
+				<div class="skin-overlay overflow-hidden rounded-[1.75rem]">
+					<div v-if="title || description" class="border-b border-border px-5 py-4 text-center">
+						<h2 v-if="title" :id="titleId" class="text-sm font-semibold text-canvas-fg">{{ title }}</h2>
+						<p v-if="description" class="mt-1 text-xs leading-5 text-muted-fg">{{ description }}</p>
+					</div>
+					<div>
+						<button
+							v-for="action in actions"
+							:key="action.value || action.label"
+							type="button"
+							class="block min-h-14 w-full border-b border-border px-5 py-3 text-center transition last:border-b-0 hover:bg-secondary/70 active:bg-secondary"
+							:class="action.variant === 'danger' ? 'text-destructive' : 'text-canvas-fg'"
+							@click="selectAction(action)"
+						>
+							<span class="block text-sm font-medium">{{ action.label }}</span>
+							<span v-if="action.description" class="mt-0.5 block text-xs text-muted-fg">{{ action.description }}</span>
+						</button>
+					</div>
+				</div>
+				<button
+					data-close
+					type="button"
+					class="skin-control mt-2 min-h-14 w-full rounded-[1.5rem] px-5 text-sm font-semibold transition hover:brightness-[0.98] active:brightness-[0.96]"
+				>{{ cancelLabel }}</button>
+			</section>
+		</div>
+	</dom-drawer>
+</template>

package/src/pages/mobile/bottom-nav/DomAppBottomNav.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__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' },
+				],
+			},
+		},
+	},
+});
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: '',
+		_edit: { description: 'Currently selected navigation item value.' },
+	},
+	items: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Navigation items: { value, label, icon, iconPath, badge }.',
+		},
+	},
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activeValue = computed(() => props.modelValue || props.items[0]?.value || '');
+
+/**
+ * Selects a primary app destination and reports the full item to consumers.
+ *
+ * @param {{ value: string }} item Navigation destination selected by the user.
+ * @returns {void}
+ */
+function selectItem(item) {
+	emit('update:modelValue', item.value);
+	emit('change', item);
+}
+</script>
+
+<template>
+	<nav class="skin-card px-2 py-2" aria-label="Primary">
+		<div class="grid auto-cols-fr grid-flow-col gap-1">
+			<button
+				v-for="item in items"
+				:key="item.value"
+				type="button"
+				class="relative flex min-h-14 min-w-0 flex-col items-center justify-center gap-1 rounded-2xl px-2 text-xs font-medium text-muted-fg transition active:scale-95"
+				:class="item.value === activeValue && 'bg-secondary text-canvas-fg'"
+				:aria-current="item.value === activeValue ? 'page' : undefined"
+				@click="selectItem(item)"
+			>
+				<svg
+					v-if="item.iconPath"
+					class="size-5"
+					viewBox="0 0 24 24"
+					fill="none"
+					aria-hidden="true"
+				>
+					<path
+						:d="item.iconPath"
+						stroke="currentColor"
+						stroke-width="1.8"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span v-else-if="item.icon" class="grid size-5 place-items-center" v-html="item.icon"></span>
+				<span class="max-w-full truncate">{{ item.label }}</span>
+				<span
+					v-if="item.badge"
+					class="absolute right-4 top-2 min-w-4 rounded-full bg-primary px-1 text-[10px] leading-4 text-primary-fg"
+				>{{ item.badge }}</span>
+			</button>
+		</div>
+	</nav>
+</template>