@getdom/studio 0.1.0

package/src/pages/mobile/top-bar/DomAppTopBar.vue

@@ -0,0 +1,67 @@
+<script setup>
+defineOptions({
+	__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',
+			},
+		},
+	},
+});
+
+defineProps({
+	title: {
+		type: String,
+		default: '',
+		_edit: { description: 'Primary title shown in the app bar.' },
+	},
+	subtitle: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional supporting text below the title.' },
+	},
+	border: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show a bottom divider.' },
+	},
+	large: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Use larger title sizing and padding.' },
+	},
+});
+</script>
+
+<template>
+	<header
+		class="skin-card px-4"
+		:class="[!border && 'border-0', large ? 'py-4' : 'py-3']"
+	>
+		<div class="flex min-h-11 items-center gap-3">
+			<div v-if="$slots.leading" class="flex shrink-0 items-center">
+				<slot name="leading" />
+			</div>
+			<div class="min-w-0 flex-1">
+				<h1
+					v-if="title"
+					class="truncate font-semibold tracking-tight text-canvas-fg"
+					:class="large ? 'text-2xl' : 'text-base'"
+				>{{ title }}</h1>
+				<p v-if="subtitle" class="truncate text-xs text-muted-fg">{{ subtitle }}</p>
+			</div>
+			<div v-if="$slots.trailing" class="flex shrink-0 items-center gap-1">
+				<slot name="trailing" />
+			</div>
+		</div>
+	</header>
+</template>

package/src/pages/visual/alert/DomAlert.vue

@@ -0,0 +1,363 @@
+<script setup>
+import { computed, ref, useAttrs } from 'vue';
+import DomIconButton from '../../components/icon-button/DomIconButton.vue';
+
+defineOptions({
+	inheritAttrs: false,
+	__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.' },
+		],
+	},
+});
+
+const props = defineProps({
+	as: {
+		type: String,
+		default: 'div',
+		_edit: { description: 'Element to render.' },
+	},
+	tone: {
+		type: String,
+		default: 'info',
+		_edit: {
+			options: ['default', 'info', 'neutral', 'primary', 'success', 'warning', 'danger'],
+			description: 'Semantic alert tone.',
+		},
+	},
+	variant: {
+		type: String,
+		default: 'soft',
+		_edit: {
+			options: ['soft', 'outline', 'solid', 'toast'],
+			description: 'Visual weight.',
+		},
+	},
+	title: {
+		type: String,
+		default: 'Notice',
+		_edit: { description: 'Fallback title when the title slot is empty.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Fallback body copy when the default slot is empty.' },
+	},
+	icon: {
+		type: [Boolean, String, Object, Function],
+		default: true,
+		_edit: {
+			component: 'DomIconSelector',
+			typeRef: 'boolean | string | Component',
+			description: 'Show a tone icon, hide it with false, pass SVG path data, or pass an imported Vue icon component.',
+			props: {
+				kind: 'icons',
+				placeholder: 'Search icons',
+			},
+		},
+	},
+	dismissible: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show a close button that fades the alert away when activated.' },
+	},
+	dismissLabel: {
+		type: String,
+		default: 'Dismiss alert',
+		_edit: { description: 'Accessible label for the optional dismiss button.' },
+	},
+	role: {
+		type: String,
+		default: '',
+		_edit: { description: 'ARIA role override. Danger and warning default to alert; other tones default to status.' },
+	},
+});
+const emit = defineEmits(['dismiss']);
+const attrs = useAttrs();
+const visible = ref(true);
+let dismissEvent = null;
+
+const toneIconPaths = {
+	default: 'M12 17v-5M12 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
+	info: 'M12 17v-5M12 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
+	neutral: 'M12 17v-5M12 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
+	primary: 'M13 3 4 14h7l-1 7 9-11h-7l1-7Z',
+	success: 'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM8.5 12.5l2.5 2.5 4.5-5',
+	warning: 'M12 4l9 16H3L12 4ZM12 9v4M12 17h.01',
+	danger: 'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM15 9l-6 6M9 9l6 6',
+};
+
+const toneClasses = {
+	default: {
+		soft: 'border-border bg-secondary/70 text-canvas-fg',
+		outline: 'border-border bg-canvas text-canvas-fg',
+		solid: 'border-border bg-secondary text-secondary-fg',
+		toast: 'skin-popover border-l-4 border-border text-canvas-fg shadow-md',
+		icon: 'text-muted-fg',
+		solidIcon: 'text-secondary-fg',
+		solidDescription: 'text-secondary-fg/80',
+	},
+	neutral: {
+		soft: 'border-border bg-secondary/70 text-canvas-fg',
+		outline: 'border-border bg-canvas text-canvas-fg',
+		solid: 'border-border bg-secondary text-secondary-fg',
+		toast: 'skin-popover border-l-4 border-border text-canvas-fg shadow-md',
+		icon: 'text-muted-fg',
+		solidIcon: 'text-secondary-fg',
+		solidDescription: 'text-secondary-fg/80',
+	},
+	primary: {
+		soft: 'border-primary/20 bg-primary/10 text-canvas-fg',
+		outline: 'border-primary/35 bg-canvas text-canvas-fg',
+		solid: 'border-primary bg-primary text-primary-fg',
+		toast: 'skin-popover border-l-4 border-primary/35 text-canvas-fg shadow-md',
+		icon: 'text-primary',
+		solidIcon: 'text-primary-fg',
+		solidDescription: 'text-primary-fg/80',
+	},
+	success: {
+		soft: 'border-success/25 bg-success/10 text-canvas-fg',
+		outline: 'border-success/35 bg-canvas text-canvas-fg',
+		solid: 'border-success bg-success text-success-fg',
+		toast: 'skin-popover border-l-4 border-success/35 text-canvas-fg shadow-md',
+		icon: 'text-success',
+		solidIcon: 'text-success-fg',
+		solidDescription: 'text-success-fg/85',
+	},
+	warning: {
+		soft: 'border-warning/30 bg-warning/15 text-canvas-fg',
+		outline: 'border-warning/40 bg-canvas text-canvas-fg',
+		solid: 'border-warning bg-warning text-warning-fg',
+		toast: 'skin-popover border-l-4 border-warning/40 text-canvas-fg shadow-md',
+		icon: 'text-warning-fg',
+		solidIcon: 'text-warning-fg',
+		solidDescription: 'text-warning-fg/75',
+	},
+	danger: {
+		soft: 'border-destructive/25 bg-destructive/10 text-canvas-fg',
+		outline: 'border-destructive/40 bg-canvas text-canvas-fg',
+		solid: 'border-destructive bg-destructive text-destructive-fg',
+		toast: 'skin-popover border-l-4 border-destructive/40 text-canvas-fg shadow-md',
+		icon: 'text-destructive',
+		solidIcon: 'text-destructive-fg',
+		solidDescription: 'text-destructive-fg/85',
+	},
+	info: {
+		soft: 'border-primary/20 bg-primary/10 text-canvas-fg',
+		outline: 'border-primary/30 bg-canvas text-canvas-fg',
+		solid: 'border-primary bg-primary text-primary-fg',
+		toast: 'skin-popover border-l-4 border-primary/30 text-canvas-fg shadow-md',
+		icon: 'text-primary',
+		solidIcon: 'text-primary-fg',
+		solidDescription: 'text-primary-fg/80',
+	},
+};
+
+const resolvedTone = computed(getResolvedTone);
+const resolvedVariant = computed(getResolvedVariant);
+const classes = computed(getClasses);
+const iconClass = computed(getIconClass);
+const descriptionClass = computed(getDescriptionClass);
+const showIcon = computed(getShowIcon);
+const iconPath = computed(getIconPath);
+const iconComponent = computed(getIconComponent);
+const resolvedRole = computed(getResolvedRole);
+
+/**
+ * Resolves unknown tones to the general information treatment.
+ *
+ * @returns {string}
+ */
+function getResolvedTone() {
+	return toneClasses[props.tone] ? props.tone : 'info';
+}
+
+/**
+ * Resolves unknown variants to the soft alert treatment.
+ *
+ * @returns {string}
+ */
+function getResolvedVariant() {
+	return toneClasses[resolvedTone.value][props.variant] ? props.variant : 'soft';
+}
+
+/**
+ * Builds the outer alert class list for the active tone and variant.
+ *
+ * @returns {Array<string>}
+ */
+function getClasses() {
+	return [
+		'rounded-lg border px-4 py-3 text-sm shadow-sm',
+		toneClasses[resolvedTone.value][resolvedVariant.value],
+	];
+}
+
+/**
+ * Builds the icon class list while preserving solid alert contrast.
+ *
+ * @returns {Array<string>}
+ */
+function getIconClass() {
+	const tone = toneClasses[resolvedTone.value];
+	return [
+		'mt-0.5 size-5 shrink-0',
+		resolvedVariant.value === 'solid' ? tone.solidIcon : tone.icon,
+	];
+}
+
+/**
+ * Builds the body-copy class list while preserving solid alert contrast.
+ *
+ * @returns {Array<string>}
+ */
+function getDescriptionClass() {
+	return [
+		'mt-1 leading-6',
+		resolvedVariant.value === 'solid'
+			? toneClasses[resolvedTone.value].solidDescription
+			: 'text-muted-fg',
+	];
+}
+
+/**
+ * Determines whether the leading icon slot or fallback icon should render.
+ *
+ * @returns {boolean}
+ */
+function getShowIcon() {
+	return props.icon !== false;
+}
+
+/**
+ * Resolves SVG path data from an explicit path string or the active tone.
+ *
+ * @returns {string}
+ */
+function getIconPath() {
+	if (typeof props.icon === 'string') return props.icon;
+	if (iconComponent.value) return '';
+	return toneIconPaths[resolvedTone.value] || toneIconPaths.info;
+}
+
+/**
+ * Resolves imported Vue icon components without treating SVG path strings as component names.
+ *
+ * @returns {import('vue').Component|null}
+ */
+function getIconComponent() {
+	if (!props.icon || typeof props.icon === 'boolean' || typeof props.icon === 'string') return null;
+	return props.icon;
+}
+
+/**
+ * Resolves the live-region role from explicit props and the alert tone.
+ *
+ * @returns {string}
+ */
+function getResolvedRole() {
+	if (props.role) return props.role;
+	return ['danger', 'warning'].includes(resolvedTone.value) ? 'alert' : 'status';
+}
+
+/**
+ * Starts the dismiss transition while retaining the activation event until the alert has left.
+ *
+ * @param {MouseEvent} event
+ * @returns {void}
+ */
+function dismiss(event) {
+	if (!props.dismissible || !visible.value) return;
+	dismissEvent = event;
+	visible.value = false;
+}
+
+/**
+ * Notifies consumers after the fade completes so parent-owned collections can remove the alert safely.
+ *
+ * @returns {void}
+ */
+function emitDismiss() {
+	emit('dismiss', dismissEvent);
+	dismissEvent = null;
+}
+</script>
+
+<template>
+	<Transition name="dom-alert-fade" @after-leave="emitDismiss">
+		<component v-if="visible" :is="as" v-bind="attrs" :class="classes" :role="resolvedRole">
+			<div class="flex gap-3">
+				<slot v-if="showIcon" name="icon">
+					<component v-if="iconComponent" :is="iconComponent" :class="iconClass" aria-hidden="true" focusable="false" />
+					<svg v-else-if="iconPath" :class="iconClass" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+						<path :d="iconPath" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+				</slot>
+				<div class="min-w-0 flex-1">
+					<p class="font-semibold leading-6">
+						<slot name="title">{{ title }}</slot>
+					</p>
+					<div v-if="$slots.default || description" :class="descriptionClass">
+						<slot>{{ description }}</slot>
+					</div>
+					<div v-if="$slots.actions" class="mt-3 flex flex-wrap gap-2">
+						<slot name="actions"></slot>
+					</div>
+				</div>
+				<DomIconButton
+					v-if="dismissible"
+					class="dom-alert__dismiss -mr-2 -mt-1"
+					size="xs"
+					:label="dismissLabel"
+					icon="M18 6 6 18M6 6l12 12"
+					@click="dismiss"
+				/>
+			</div>
+		</component>
+	</Transition>
+</template>
+
+<style scoped>
+.dom-alert-fade-leave-active {
+	transition: opacity 180ms ease;
+}
+
+.dom-alert-fade-leave-to {
+	opacity: 0;
+}
+
+.dom-alert__dismiss {
+	color: inherit;
+	opacity: 0.65;
+}
+
+.dom-alert__dismiss:hover {
+	background-color: color-mix(in oklab, currentColor 12%, transparent);
+	color: inherit;
+	opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.dom-alert-fade-leave-active {
+		transition-duration: 1ms;
+	}
+}
+</style>

package/src/pages/visual/avatar/DomAvatar.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+defineOptions({
+	__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.' },
+		],
+	},
+});
+
+const props = defineProps({
+	src: {
+		type: String,
+		default: '',
+		_edit: { description: 'Image URL.' },
+	},
+	alt: {
+		type: String,
+		default: '',
+		_edit: { description: 'Image alt text. Leave empty when adjacent text already names the person or object.' },
+	},
+	name: {
+		type: String,
+		default: '',
+		_edit: { description: 'Name used to generate fallback initials.' },
+	},
+	initials: {
+		type: String,
+		default: '',
+		_edit: { description: 'Explicit fallback initials.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: { options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Avatar size.' },
+	},
+	shape: {
+		type: String,
+		default: 'circle',
+		_edit: { options: ['circle', 'rounded', 'square'], description: 'Avatar shape.' },
+	},
+});
+
+const imageFailed = ref(false);
+
+watch(() => props.src, () => {
+	imageFailed.value = false;
+});
+
+const displayInitials = computed(() => {
+	if (props.initials) return props.initials.slice(0, 3).toUpperCase();
+	return props.name
+		.trim()
+		.split(/\s+/)
+		.filter(Boolean)
+		.slice(0, 2)
+		.map((part) => part.charAt(0))
+		.join('')
+		.toUpperCase() || '?';
+});
+
+const sizeClasses = {
+	xs: 'size-6 text-[10px]',
+	sm: 'size-8 text-xs',
+	md: 'size-10 text-sm',
+	lg: 'size-12 text-base',
+	xl: 'size-16 text-lg',
+};
+
+const shapeClasses = {
+	circle: 'rounded-full',
+	rounded: 'rounded-xl',
+	square: 'rounded-md',
+};
+
+const classes = computed(() => [
+	'relative inline-grid shrink-0 place-items-center overflow-hidden bg-secondary font-semibold text-secondary-fg ring-1 ring-border',
+	sizeClasses[props.size] || sizeClasses.md,
+	shapeClasses[props.shape] || shapeClasses.circle,
+]);
+
+const showImage = computed(() => props.src && !imageFailed.value);
+</script>
+
+<template>
+	<span :class="classes">
+		<img
+			v-if="showImage"
+			:src="src"
+			:alt="alt"
+			class="size-full object-cover"
+			@error="imageFailed = true"
+		/>
+		<slot v-else name="fallback">
+			<span aria-hidden="true">{{ displayInitials }}</span>
+		</slot>
+	</span>
+</template>

package/src/pages/visual/avatar-stack/DomAvatarStack.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue';
+import DomAvatar from '../avatar/DomAvatar.vue';
+
+defineOptions({
+	__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.' },
+		],
+	},
+});
+
+const props = defineProps({
+	items: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'People, teams, or workspace records.',
+			props: {
+				compact: true,
+				schema: [
+					{ key: 'name', label: 'Name', placeholder: 'Ada Lovelace' },
+					{ key: 'src', label: 'Image URL', type: 'url', placeholder: 'https://...' },
+					{ key: 'initials', label: 'Initials', placeholder: 'AL' },
+				],
+			},
+		},
+	},
+	max: {
+		type: Number,
+		default: 4,
+		_edit: { description: 'Maximum avatars to show before the overflow count.' },
+	},
+	size: {
+		type: String,
+		default: 'sm',
+		_edit: { options: ['xs', 'sm', 'md', 'lg'], description: 'Avatar size.' },
+	},
+	label: {
+		type: String,
+		default: 'Participants',
+		_edit: { description: 'Accessible label for the stack.' },
+	},
+});
+
+const visibleItems = computed(() => props.items.slice(0, Math.max(0, props.max)));
+const overflow = computed(() => Math.max(0, props.items.length - visibleItems.value.length));
+</script>
+
+<template>
+	<div class="inline-flex items-center -space-x-2" role="group" :aria-label="label">
+		<template v-for="(item, index) in visibleItems" :key="item.value || item.name || index">
+			<slot name="avatar" :item="item" :index="index">
+				<DomAvatar
+					:src="item.src || item.avatar"
+					:alt="item.alt || ''"
+					:name="item.name || item.label"
+					:initials="item.initials"
+					:size="size"
+					class="ring-2 ring-canvas"
+				/>
+			</slot>
+		</template>
+		<span
+			v-if="overflow"
+			class="grid shrink-0 place-items-center rounded-full bg-secondary text-xs font-semibold text-secondary-fg ring-2 ring-canvas"
+			:class="{ xs: 'size-6 text-[10px]', sm: 'size-8', md: 'size-10', lg: 'size-12' }[size] || 'size-8'"
+			:aria-label="`${overflow} more`"
+		>
+			+{{ overflow }}
+		</span>
+	</div>
+</template>