@getdom/studio 0.1.0

package/src/pages/components/tabs/DomTabs.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+const props = defineProps({
+	modelValue: { type: String, default: '' },
+	tabs: { type: Array, required: true }, // [{ key, label }]
+	variant: {
+		type: String,
+		default: 'pill',
+		_edit: { options: ['pill', 'flat', 'page'], description: 'Visual treatment for the tab list.' },
+	},
+	/** Stretch tabs + active panel to fill a flex parent (studio / inspector shell). */
+	fill: { type: Boolean, default: false },
+});
+const emit = defineEmits(['update:modelValue']);
+
+const root = ref(null);
+const activeValue = computed(() => props.modelValue || props.tabs[0]?.key || '');
+const tablistClass = computed(() => {
+	if (props.variant === 'page') {
+		return [
+			'relative flex min-w-0 shrink-0 overflow-x-auto bg-secondary/55 px-2 pt-1',
+			'before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border before:content-[\'\']',
+		].join(' ');
+	}
+	if (props.variant === 'flat') return 'flex min-w-0 shrink-0 gap-6 overflow-x-auto border-b border-border';
+	return 'inline-flex shrink-0 gap-1 rounded-full border border-border bg-secondary p-1';
+});
+const tabButtonClass = computed(() => {
+	if (props.variant === 'page') {
+		return [
+			'relative -mb-px flex h-9 min-w-0 max-w-56 items-center gap-2 rounded-t-md border border-transparent border-b-border px-3 text-left text-sm font-medium text-muted-fg transition',
+			'hover:border-x-border hover:border-t-border hover:bg-secondary hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60',
+			'data-[active]:z-10 data-[active]:border-x-border data-[active]:border-t-border data-[active]:border-b-canvas data-[active]:bg-canvas data-[active]:text-canvas-fg',
+			'data-[active]:after:pointer-events-none data-[active]:after:absolute data-[active]:after:inset-x-px data-[active]:after:-bottom-px data-[active]:after:h-1 data-[active]:after:bg-canvas data-[active]:after:content-[\'\']',
+		].join(' ');
+	}
+	if (props.variant === 'flat') {
+		return [
+			'relative -mb-px flex h-10 shrink-0 items-center border-b-2 border-transparent px-1 text-sm font-medium text-muted-fg transition',
+			'hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60',
+			'data-[active]:border-primary data-[active]:text-canvas-fg',
+		].join(' ');
+	}
+	return 'rounded-full px-4 py-1.5 text-sm font-medium text-muted-fg transition focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 data-[active]:bg-canvas data-[active]:text-canvas-fg data-[active]:shadow-sm';
+});
+const panelClass = computed(() => {
+	if (props.fill) return props.variant === 'page'
+		? 'flex min-h-0 flex-1 flex-col overflow-hidden bg-canvas'
+		: 'mt-3 flex min-h-0 flex-1 flex-col overflow-hidden';
+	return props.variant === 'page' ? 'mt-0 bg-canvas' : 'mt-6';
+});
+
+onMounted(mountTabs);
+onUnmounted(removeTabsListeners);
+watch(getModelValue, syncModelValue);
+
+/**
+ * Load the headless tabs behavior and subscribe to changes from this tab host.
+ *
+ * @returns {Promise<void>} Resolves after the headless element is registered.
+ */
+async function mountTabs() {
+	await import('../../lib/headless/tabs.js');
+	root.value?.addEventListener('dom:change', onTabChange);
+}
+
+/**
+ * Remove the host-level change listener when the Vue component unmounts.
+ *
+ * @returns {void}
+ */
+function removeTabsListeners() {
+	root.value?.removeEventListener('dom:change', onTabChange);
+}
+
+/**
+ * Return the externally controlled tab value for Vue's watcher.
+ *
+ * @returns {string} Controlled active tab value.
+ */
+function getModelValue() {
+	return props.modelValue;
+}
+
+/**
+ * Commit only changes dispatched by the tab host itself.
+ *
+ * Nested DOM Studio controls can also emit bubbling `dom:change` events. Those
+ * events must not reset the active tab.
+ *
+ * @param {CustomEvent<{ value?: string }>} event Headless change event.
+ * @returns {void}
+ */
+function onTabChange(event) {
+	if (event.target !== root.value) return;
+	const value = event.detail?.value;
+	let isKnownTab = false;
+	for (const tab of props.tabs) {
+		if (tab.key === value) {
+			isKnownTab = true;
+			break;
+		}
+	}
+	if (!isKnownTab) return;
+	emit('update:modelValue', value);
+}
+
+/**
+ * Keep the headless tab host aligned with the controlled Vue model.
+ *
+ * @param {string} value Active tab value.
+ * @returns {void}
+ */
+function syncModelValue(value) {
+	if (root.value && value && root.value.value !== value) root.value.value = value;
+}
+</script>
+
+<template>
+	<dom-tabs
+		ref="root"
+		:value="modelValue || tabs[0]?.key"
+		:class="fill ? 'flex min-h-0 flex-1 flex-col' : 'block'"
+	>
+		<div role="tablist" :class="tablistClass">
+			<button
+				v-for="t in tabs"
+				:key="t.key"
+				:data-tab="t.key"
+				:class="tabButtonClass"
+			>
+				<slot name="tab" :tab="t" :active="activeValue === t.key">
+					<span class="truncate">{{ t.label }}</span>
+				</slot>
+			</button>
+		</div>
+		<div :class="panelClass">
+			<div
+				v-for="t in tabs"
+				:key="t.key"
+				:data-panel="t.key"
+				:class="fill && 'flex min-h-0 flex-1 flex-col overflow-hidden'"
+			>
+				<slot :name="t.key" />
+			</div>
+		</div>
+	</dom-tabs>
+</template>

package/src/pages/components/theme-switcher/DomThemeSwitcher.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import DomToggleButtonGroup from '../../forms/toggle-button-group/DomToggleButtonGroup.vue';
+import { normalizeThemeMode, useTheme } from '../../lib/vue/useTheme.js';
+
+defineOptions({
+	__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',
+			},
+		},
+	},
+});
+
+const compactThemeModeOptions = [
+	{
+		value: 'dark',
+		label: 'Dark',
+		tooltip: 'dark mode theme',
+		paths: ['M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'],
+	},
+	{
+		value: 'light',
+		label: 'Light',
+		tooltip: 'light mode theme',
+		paths: [
+			'M12 2v2',
+			'M12 20v2',
+			'M4.93 4.93l1.41 1.41',
+			'M17.66 17.66l1.41 1.41',
+			'M2 12h2',
+			'M20 12h2',
+			'M4.93 19.07l1.41-1.41',
+			'M17.66 6.34l1.41-1.41',
+			'M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+		],
+	},
+	{
+		value: 'system',
+		label: 'System',
+		tooltip: 'Auto: use the theme of the system',
+		paths: [
+			'M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z',
+			'M8 21h8',
+			'M12 17v4',
+		],
+	},
+];
+const appearanceThemeModeOptions = [
+	compactThemeModeOptions[1],
+	compactThemeModeOptions[0],
+	compactThemeModeOptions[2],
+];
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: null,
+		_edit: { options: ['light', 'dark', 'system'], description: 'Optional controlled theme mode. Omit this to use the stored DOM Studio preference.' },
+	},
+	label: {
+		type: String,
+		default: 'Theme mode',
+		_edit: { description: 'Accessible label for the segmented control.' },
+	},
+	showLabel: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the current preference label beside the segmented control.' },
+	},
+	size: {
+		type: String,
+		default: 'icon-sm',
+		_edit: { options: ['icon-sm', 'icon-md', 'sm', 'md', 'lg'], description: 'Button size for the segmented control.' },
+	},
+	variant: {
+		type: String,
+		default: 'default',
+		_edit: { options: ['default', 'appearance'], description: 'Use appearance for a larger account-settings presentation.' },
+	},
+	title: {
+		type: String,
+		default: 'Appearance settings',
+		_edit: { description: 'Heading shown by the appearance variant. Pass an empty string to hide it.' },
+	},
+	description: {
+		type: String,
+		default: 'Update the appearance settings for your account',
+		_edit: { description: 'Supporting text shown by the appearance variant. Pass an empty string to hide it.' },
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const { mode, resolvedTheme, setMode, initTheme } = useTheme();
+const mounted = ref(false);
+
+const isAppearanceVariant = computed(() => props.variant === 'appearance');
+const hasControlledMode = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '');
+const themeModeOptions = computed(() => isAppearanceVariant.value ? appearanceThemeModeOptions : compactThemeModeOptions);
+const selectedMode = computed({
+	get() {
+		return mode.value;
+	},
+	set(value) {
+		commitMode(value);
+	},
+});
+const currentLabel = computed(() => {
+	return compactThemeModeOptions.find((option) => option.value === mode.value)?.label || 'System';
+});
+const displayLabel = computed(() => mounted.value ? currentLabel.value : 'System');
+const controlSize = computed(() => isAppearanceVariant.value && props.size === 'icon-sm' ? 'md' : props.size);
+const placeholderSizeClass = computed(() => ({
+	sm: 'min-h-8 px-3 py-1.5 text-xs',
+	md: 'min-h-10 px-4 py-2 text-sm',
+	lg: 'min-h-11 px-5 py-2.5 text-base',
+	'icon-sm': 'size-8 p-0 text-xs',
+	'icon-md': 'size-10 p-0 text-sm',
+}[controlSize.value] || 'size-8 p-0 text-xs'));
+
+onMounted(() => {
+	initTheme();
+	if (hasControlledMode.value) setMode(props.modelValue);
+	mounted.value = true;
+});
+
+watch(() => props.modelValue, (value) => {
+	if (!mounted.value || !hasControlledMode.value) return;
+	setMode(value);
+});
+
+/**
+ * Persists the selected theme mode and emits the public change events.
+ *
+ * @param {unknown} value Requested theme mode.
+ */
+function commitMode(value) {
+	const next = normalizeThemeMode(value);
+	const theme = setMode(next);
+	emit('update:modelValue', next);
+	emit('change', { mode: next, theme });
+}
+</script>
+
+<template>
+	<div
+		:class="isAppearanceVariant ? 'grid w-full max-w-lg gap-4' : (showLabel ? 'flex w-full items-center justify-between gap-3' : 'flex w-fit items-center gap-3')"
+	>
+		<div v-if="isAppearanceVariant && (title || description)" class="grid gap-1">
+			<h2 v-if="title" class="text-2xl font-semibold leading-tight text-canvas-fg">
+				{{ title }}
+			</h2>
+			<p v-if="description" class="text-sm leading-6 text-muted-fg">
+				{{ description }}
+			</p>
+		</div>
+
+		<span v-if="!isAppearanceVariant && showLabel" class="min-w-0 truncate text-sm font-medium text-canvas-fg">
+			{{ displayLabel }} theme
+		</span>
+
+		<DomToggleButtonGroup
+			v-if="mounted"
+			:key="selectedMode"
+			v-model="selectedMode"
+			:options="themeModeOptions"
+			:label="label"
+			:size="controlSize"
+			:variant="isAppearanceVariant ? 'switch' : 'default'"
+			:chrome="false"
+		>
+			<template #option="{ option }">
+				<svg
+					viewBox="0 0 24 24"
+					class="size-4"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.8"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path v-for="path in option.paths" :key="path" :d="path" />
+				</svg>
+				<span v-if="isAppearanceVariant">{{ option.label }}</span>
+				<span v-else class="sr-only">{{ option.label }}</span>
+			</template>
+		</DomToggleButtonGroup>
+
+		<div
+			v-else
+			class="inline-flex w-fit overflow-hidden rounded-xl"
+			:class="isAppearanceVariant ? 'items-center gap-0.5 bg-secondary/80 p-0.5 shadow-inner ring-1 ring-border/30' : 'skin-control p-0'"
+			aria-hidden="true"
+		>
+			<span
+				v-for="option in themeModeOptions"
+				:key="option.value"
+				class="relative inline-flex items-center justify-center gap-2 text-muted-fg first:border-l-0 first:rounded-l-xl last:rounded-r-xl"
+				:class="[isAppearanceVariant ? 'rounded-lg' : 'border-l border-border/80', placeholderSizeClass]"
+			>
+				<svg
+					viewBox="0 0 24 24"
+					class="size-4"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.8"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path v-for="path in option.paths" :key="path" :d="path" />
+				</svg>
+				<span v-if="isAppearanceVariant">{{ option.label }}</span>
+			</span>
+		</div>
+	</div>
+</template>

package/src/pages/components/toast/DomToastItem.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineOptions({
+	__doc: {
+		hidden: true,
+		studio: { hidden: true },
+	},
+});
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: '',
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	tone: {
+		type: String,
+		default: 'default',
+	},
+	dismissible: {
+		type: Boolean,
+		default: true,
+	},
+});
+const emit = defineEmits(['dismiss']);
+
+const accentClass = (tone) => ({
+	default: 'bg-primary',
+	success: 'bg-success',
+	danger: 'bg-destructive',
+	warning: 'bg-warning',
+}[tone] || 'bg-primary');
+</script>
+
+<template>
+	<div class="flex items-start gap-3">
+		<span class="mt-1 size-2.5 shrink-0 rounded-full" :class="accentClass(tone)"></span>
+		<div class="min-w-0 flex-1">
+			<p v-if="title" class="text-sm font-semibold">{{ title }}</p>
+			<p v-if="description" class="mt-1 text-sm text-muted-fg">{{ description }}</p>
+		</div>
+		<button
+			v-if="props.dismissible"
+			type="button"
+			aria-label="Dismiss notification"
+			class="-mr-1 -mt-1 rounded-full px-2 text-lg leading-none text-muted-fg hover:bg-accent hover:text-accent-fg"
+			@click="emit('dismiss')"
+		>×</button>
+	</div>
+</template>