@getdom/studio 0.1.0

package/src/pages/visual/badge/DomBadge.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Badge',
+		tag: '<DomBadge>',
+		description: 'A compact visual label for counts, roles, plans, tags, and metadata.',
+		playground: {
+			initial: { label: 'Scale', tone: 'success', variant: 'soft', size: 'md' },
+		},
+		slots: [
+			{ name: '(default)', description: 'Badge text or compact inline content.' },
+		],
+	},
+});
+
+const props = defineProps({
+	as: {
+		type: String,
+		default: 'span',
+		_edit: { description: "Element to render. Use 'RouterLink' or 'button' through wrappers when interaction is needed." },
+	},
+	label: {
+		type: String,
+		default: 'Badge',
+		_edit: { description: 'Fallback text when no default slot is provided.' },
+	},
+	tone: {
+		type: String,
+		default: 'neutral',
+		_edit: {
+			options: ['neutral', 'primary', 'success', 'warning', 'danger', 'info'],
+			description: 'Semantic colour treatment.',
+		},
+	},
+	variant: {
+		type: String,
+		default: 'soft',
+		_edit: {
+			options: ['soft', 'solid', 'outline'],
+			description: 'Visual weight.',
+		},
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: {
+			options: ['sm', 'md', 'lg'],
+			description: 'Badge density.',
+		},
+	},
+});
+
+const toneClasses = {
+	neutral: {
+		soft: 'bg-secondary text-secondary-fg ring-border',
+		solid: 'bg-canvas-fg text-canvas ring-transparent',
+		outline: 'bg-canvas text-canvas-fg ring-border',
+	},
+	primary: {
+		soft: 'bg-primary/10 text-primary ring-primary/15',
+		solid: 'bg-primary text-primary-fg ring-transparent',
+		outline: 'bg-canvas text-primary ring-primary/30',
+	},
+	success: {
+		soft: 'bg-success/15 text-success ring-success/20',
+		solid: 'bg-success text-success-fg ring-transparent',
+		outline: 'bg-canvas text-success ring-success/30',
+	},
+	warning: {
+		soft: 'bg-warning/20 text-warning-fg ring-warning/30',
+		solid: 'bg-warning text-warning-fg ring-transparent',
+		outline: 'bg-canvas text-warning-fg ring-warning/40',
+	},
+	danger: {
+		soft: 'bg-destructive/15 text-destructive ring-destructive/20',
+		solid: 'bg-destructive text-destructive-fg ring-transparent',
+		outline: 'bg-canvas text-destructive ring-destructive/30',
+	},
+	info: {
+		soft: 'bg-primary/10 text-canvas-fg ring-primary/15',
+		solid: 'bg-primary text-primary-fg ring-transparent',
+		outline: 'bg-canvas text-canvas-fg ring-primary/30',
+	},
+};
+
+const sizeClasses = {
+	sm: 'px-2 py-0.5 text-[11px]',
+	md: 'px-2.5 py-1 text-xs',
+	lg: 'px-3 py-1.5 text-sm',
+};
+
+const classes = computed(() => [
+	'inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium ring-1 ring-inset',
+	toneClasses[props.tone]?.[props.variant] || toneClasses.neutral.soft,
+	sizeClasses[props.size] || sizeClasses.md,
+]);
+</script>
+
+<template>
+	<component :is="as" :class="classes">
+		<slot>{{ label }}</slot>
+	</component>
+</template>

package/src/pages/visual/card/DomCard.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Card',
+		tag: '<DomCard>',
+		description: 'A visual-only frame for grouped content, styled by the skin-card theme recipe.',
+		slots: [
+			{ name: '(default)', description: 'Card content.' },
+		],
+	},
+});
+
+const props = defineProps({
+	as: {
+		type: String,
+		default: 'div',
+		_edit: { description: "The HTML element or component to render. Use 'section', 'article', or a router-link when useful." },
+	},
+	padding: {
+		type: String,
+		default: 'p-4 md:p-6 lg:p-8',
+		_edit: {
+			component: 'DomTextInput',
+			description: 'Internal spacing. Defaults to sm on small screens, md from the md breakpoint, and lg from the lg breakpoint. Use none, sm, md, or lg for a fixed size, or provide Tailwind padding utilities.',
+			props: {
+				placeholder: 'p-4 md:p-6',
+			},
+		},
+	},
+	interactive: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Add a restrained hover lift for clickable cards.' },
+	},
+});
+
+const paddingClasses = {
+	none: '',
+	sm: 'p-4',
+	md: 'p-6',
+	lg: 'p-8',
+};
+
+/**
+ * Assemble the card surface, interaction state, and resolved padding classes.
+ *
+ * Named padding values use the component scale; any other string is treated as
+ * Tailwind utilities so callers can include responsive variants.
+ *
+ * @returns {Array<string|boolean>} Classes bound to the rendered card element.
+ */
+const classes = computed(() => [
+	'relative w-full overflow-hidden rounded-2xl skin-card',
+	props.interactive && 'transition duration-200 hover:-translate-y-0.5 hover:border-primary/30',
+	paddingClasses[props.padding] ?? props.padding,
+]);
+</script>
+
+<template>
+	<component :is="as" :class="classes">
+		<slot />
+	</component>
+</template>

package/src/pages/visual/card-rail/DomCardRail.vue

@@ -0,0 +1,99 @@
+<script setup>
+defineOptions({
+	__doc: {
+		name: 'Card rail',
+		tag: '<DomCardRail>',
+		description: 'A horizontal rail for composed card groups with native overflow, snap points, and flexible item widths.',
+		icon: 'M4 8h5v8H4V8Zm7 0h5v8h-5V8Zm7 0h2v8h-2V8Z',
+		slots: [
+			{ name: 'header', description: 'Section heading, copy, filters, or controls above the rail.' },
+			{ name: 'actions', description: 'Optional controls aligned with the header.' },
+			{ name: '(default)', description: 'Rail items. Each direct child becomes fixed-width, snap-aligned content.' },
+		],
+	},
+});
+
+defineProps({
+	as: {
+		type: String,
+		default: 'section',
+		_edit: { description: 'Element to render for the rail wrapper.' },
+	},
+	ariaLabel: {
+		type: String,
+		default: 'Scrollable card rail',
+		_edit: { description: 'Accessible label for the focusable horizontal scroll region.' },
+	},
+});
+</script>
+
+<template>
+	<component :is="as" class="dom-card-rail min-w-0">
+		<div v-if="$slots.header || $slots.actions" class="mb-4 flex min-w-0 flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+			<div v-if="$slots.header" class="min-w-0">
+				<slot name="header"></slot>
+			</div>
+			<div v-if="$slots.actions" class="flex shrink-0 items-center gap-2">
+				<slot name="actions"></slot>
+			</div>
+		</div>
+
+		<div class="dom-card-rail__viewport" role="region" tabindex="0" :aria-label="ariaLabel">
+			<div class="dom-card-rail__track">
+				<slot />
+			</div>
+		</div>
+	</component>
+</template>
+
+<style scoped>
+.dom-card-rail {
+	--dom-card-rail-edge: 0rem;
+	--dom-card-rail-gap: 1rem;
+}
+
+.dom-card-rail__viewport {
+	margin-inline: calc(var(--dom-card-rail-edge) * -1);
+	overflow-x: auto;
+	overflow-y: hidden;
+	overscroll-behavior-x: contain;
+	scroll-snap-type: x proximity;
+	scrollbar-color: var(--border) transparent;
+	scrollbar-width: thin;
+	-webkit-overflow-scrolling: touch;
+}
+
+.dom-card-rail__viewport:focus-visible {
+	border-radius: var(--radius-lg);
+	outline: 2px solid var(--ring);
+	outline-offset: 3px;
+}
+
+.dom-card-rail__viewport::-webkit-scrollbar {
+	height: 0.7rem;
+}
+
+.dom-card-rail__viewport::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.dom-card-rail__viewport::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border: 0.25rem solid transparent;
+	border-radius: 999px;
+	background-clip: padding-box;
+}
+
+.dom-card-rail__track {
+	display: flex;
+	gap: var(--dom-card-rail-gap);
+	min-width: max-content;
+	padding-block-end: 0.75rem;
+	padding-inline: var(--dom-card-rail-edge);
+}
+
+.dom-card-rail__track :slotted(*) {
+	flex: 0 0 auto;
+	scroll-snap-align: start;
+}
+</style>

package/src/pages/visual/empty-state/DomEmptyState.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Empty state',
+		tag: '<DomEmptyState>',
+		description: 'A reusable empty, zero-data, or setup state with icon, copy, and actions.',
+		slots: [
+			{ name: 'icon', description: 'Custom icon or illustration.' },
+			{ name: 'title', description: 'Custom title markup.' },
+			{ name: 'description', description: 'Custom helper text.' },
+			{ name: 'actions', description: 'Primary and secondary actions.' },
+		],
+	},
+});
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: 'Nothing here yet',
+		_edit: { description: 'Primary empty-state message.' },
+	},
+	description: {
+		type: String,
+		default: 'Create something new or adjust your filters to continue.',
+		_edit: { description: 'Supporting copy.' },
+	},
+	icon: {
+		type: String,
+		default: 'M5 12h14M12 5v14',
+		_edit: {
+			component: 'DomIconSelector',
+			description: 'SVG path data for the default 24x24 line icon.',
+			props: {
+				kind: 'icons',
+				clearable: false,
+				placeholder: 'Search icons',
+			},
+		},
+	},
+	align: {
+		type: String,
+		default: 'center',
+		_edit: { options: ['left', 'center'], description: 'Content alignment.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: { options: ['sm', 'md', 'lg'], description: 'Spacing scale.' },
+	},
+});
+
+const classes = computed(() => [
+	'rounded-2xl border border-dashed border-border bg-secondary/30',
+	props.align === 'left' ? 'text-left' : 'text-center',
+	{
+		sm: 'p-5',
+		md: 'p-8',
+		lg: 'p-10',
+	}[props.size] || 'p-8',
+]);
+</script>
+
+<template>
+	<div :class="classes">
+		<div :class="align === 'left' ? 'items-start' : 'items-center'" class="flex flex-col">
+			<slot name="icon">
+				<div class="grid size-11 place-items-center rounded-2xl bg-canvas text-muted-fg ring-1 ring-border">
+					<svg viewBox="0 0 24 24" class="size-5" fill="none" aria-hidden="true">
+						<path :d="icon" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+				</div>
+			</slot>
+			<div class="mt-4 max-w-md">
+				<slot name="title">
+					<h3 class="text-base font-semibold tracking-tight text-canvas-fg">{{ title }}</h3>
+				</slot>
+				<slot name="description">
+					<p class="mt-2 text-sm leading-6 text-muted-fg">{{ description }}</p>
+				</slot>
+			</div>
+			<div v-if="$slots.actions" class="mt-5 flex flex-wrap gap-2" :class="align === 'left' ? 'justify-start' : 'justify-center'">
+				<slot name="actions" />
+			</div>
+		</div>
+	</div>
+</template>

package/src/pages/visual/progress/DomProgress.vue

@@ -0,0 +1,212 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Progress',
+		tag: '<DomProgress>',
+		description: 'An accessible progress bar for uploads, imports, background jobs, and completion meters.',
+		icon: 'M5 12h14M5 12a3 3 0 0 1 3-3h8a3 3 0 0 1 0 6H8a3 3 0 0 1-3-3Z',
+		playground: {
+			initial: { value: 68, showValue: true },
+		},
+	},
+});
+
+const props = defineProps({
+	value: {
+		type: Number,
+		default: null,
+		_edit: { description: 'Current progress value. Leave empty for indeterminate progress.' },
+	},
+	max: {
+		type: Number,
+		default: 100,
+		_edit: { description: 'Maximum progress value.' },
+	},
+	label: {
+		type: String,
+		default: 'Progress',
+		_edit: { description: 'Accessible progress label.' },
+	},
+	tone: {
+		type: String,
+		default: 'primary',
+		_edit: {
+			options: ['primary', 'success', 'warning', 'danger', 'neutral'],
+			description: 'Filled bar tone.',
+		},
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: {
+			options: ['sm', 'md', 'lg'],
+			description: 'Track height.',
+		},
+	},
+	showValue: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show a percentage label beside the title.' },
+	},
+	showLabel: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the label above the bar. The label remains accessible when visually hidden.' },
+	},
+	indeterminate: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show a sweeping loading bar when the total is unknown.' },
+	},
+});
+
+const isIndeterminate = computed(getIsIndeterminate);
+const safeMax = computed(getSafeMax);
+const clampedValue = computed(getClampedValue);
+const percent = computed(getPercent);
+const barStyle = computed(getBarStyle);
+const trackClass = computed(getTrackClass);
+const barClass = computed(getBarClass);
+
+/**
+ * Resolves whether progress should use the unknown-total presentation.
+ *
+ * @returns {boolean} Whether progress is indeterminate.
+ */
+function getIsIndeterminate() {
+	return props.indeterminate || props.value == null;
+}
+
+/**
+ * Resolves the maximum progress value while avoiding division by zero.
+ *
+ * @returns {number} Safe maximum value.
+ */
+function getSafeMax() {
+	return Math.max(1, Number(props.max) || 100);
+}
+
+/**
+ * Resolves the current progress value inside the allowed range.
+ *
+ * @returns {number} Clamped progress value.
+ */
+function getClampedValue() {
+	const value = Number(props.value);
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(safeMax.value, Math.max(0, value));
+}
+
+/**
+ * Converts progress into a percentage.
+ *
+ * @returns {number} Rounded progress percentage.
+ */
+function getPercent() {
+	return Math.round((clampedValue.value / safeMax.value) * 100);
+}
+
+/**
+ * Builds the width and highlight treatment for the active progress bar.
+ *
+ * @returns {Record<string, string|undefined>} Inline bar style.
+ */
+function getBarStyle() {
+	return {
+		width: isIndeterminate.value ? '30%' : `${percent.value}%`,
+		backgroundImage: isIndeterminate.value
+			? 'linear-gradient(90deg, transparent, currentColor, transparent)'
+			: undefined,
+	};
+}
+
+/**
+ * Builds the track class list for the selected size.
+ *
+ * @returns {Array<string>} Vue class list.
+ */
+function getTrackClass() {
+	return [
+		'w-full overflow-hidden rounded-full bg-secondary',
+		{
+			sm: 'h-1.5',
+			md: 'h-2',
+			lg: 'h-3',
+		}[props.size] || 'h-2',
+	];
+}
+
+/**
+ * Builds the active bar class list for determinate or indeterminate progress.
+ *
+ * @returns {Array<string|boolean>} Vue class list.
+ */
+function getBarClass() {
+	const toneClasses = isIndeterminate.value
+		? {
+			primary: 'text-primary',
+			success: 'text-success',
+			warning: 'text-warning',
+			danger: 'text-destructive',
+			neutral: 'text-muted-fg',
+		}
+		: {
+			primary: 'bg-primary',
+			success: 'bg-success',
+			warning: 'bg-warning',
+			danger: 'bg-destructive',
+			neutral: 'bg-muted-fg',
+		};
+
+	return [
+		'h-full rounded-full transition-[width] duration-300',
+		isIndeterminate.value && 'dom-progress-indeterminate',
+		toneClasses[props.tone] || toneClasses.primary,
+	];
+}
+</script>
+
+<template>
+	<div class="w-full">
+		<div v-if="(showLabel && label) || showValue" class="mb-2 flex items-center justify-between gap-3 text-sm">
+			<span v-if="showLabel && label" class="font-medium text-canvas-fg">{{ label }}</span>
+			<span v-if="showValue && !isIndeterminate" class="text-xs font-medium text-muted-fg">{{ percent }}%</span>
+		</div>
+		<div
+			:class="trackClass"
+			role="progressbar"
+			:aria-label="label"
+			:aria-valuemin="0"
+			:aria-valuemax="safeMax"
+			:aria-valuenow="isIndeterminate ? undefined : clampedValue"
+			:aria-valuetext="isIndeterminate ? 'Loading' : `${percent}%`"
+		>
+			<div :class="barClass" :style="barStyle"></div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.dom-progress-indeterminate {
+	animation: dom-progress-slide 1.35s ease-in-out infinite;
+}
+
+@keyframes dom-progress-slide {
+	0% {
+		transform: translateX(-100%);
+	}
+
+	100% {
+		transform: translateX(320%);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.dom-progress-indeterminate {
+		animation: none;
+		transform: translateX(115%);
+	}
+}
+</style>