@getdom/studio 0.1.0

package/src/pages/components/menu/submenu.js

@@ -0,0 +1,58 @@
+export const SUBMENU_CLOSE_DELAY = 220;
+export const SUBMENU_OVERLAP = 8;
+
+export function submenuOptions() {
+	return {
+		placement: 'right',
+		align: 'start',
+		offset: -SUBMENU_OVERLAP,
+		padding: 8,
+		mode: 'viewport',
+		flip: true,
+	};
+}
+
+export function isSubmenuSafeTarget(target) {
+	if (!(target instanceof Element)) return false;
+	return Boolean(target.closest('[data-dom-menu-submenu-panel]'));
+}
+
+export function isLeavingSubmenu(event, trigger, panel) {
+	return !(
+		panel?.contains(event.relatedTarget)
+		|| trigger?.contains(event.relatedTarget)
+		|| isSubmenuSafeTarget(event.relatedTarget)
+	);
+}
+
+export function focusFirstMenuItem(panel) {
+	panel?.querySelector('[role="menuitem"]')?.focus();
+}
+
+export function isSubmenuOpenKey(event) {
+	return event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ';
+}
+
+export function isSubmenuCloseKey(event) {
+	return event.key === 'ArrowLeft' || event.key === 'Escape';
+}
+
+export function createSubmenuCloseTimer(close, delay = SUBMENU_CLOSE_DELAY) {
+	let timer = null;
+
+	function cancel() {
+		if (!timer) return;
+		clearTimeout(timer);
+		timer = null;
+	}
+
+	function schedule(...args) {
+		cancel();
+		timer = setTimeout(() => close(...args), delay);
+	}
+
+	return {
+		cancel,
+		schedule,
+	};
+}

package/src/pages/components/pagination/DomPagination.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { computed } from 'vue';
+import DomDropdown from '../dropdown/DomDropdown.vue';
+
+defineOptions({
+	__doc: {
+		name: 'Pagination',
+		tag: '<DomPagination>',
+		description: 'A controlled page navigator for data grids, audit logs, search results, and resource lists.',
+		icon: 'M7 8l-4 4 4 4M17 8l4 4-4 4M10 12h4',
+		events: [
+			{ name: 'update:page', payload: 'number', description: 'Fired when the selected page changes.' },
+			{ name: 'page-change', payload: '{ page, previousPage, pageCount }', description: 'Fired with page transition metadata.' },
+		],
+		playground: {
+			initial: { page: 4, pageSize: 25, total: 286 },
+		},
+	},
+});
+
+const props = defineProps({
+	page: {
+		type: Number,
+		default: 1,
+		_edit: { description: 'Current 1-based page.' },
+	},
+	pageSize: {
+		type: Number,
+		default: 25,
+		_edit: { description: 'Rows or items per page.' },
+	},
+	total: {
+		type: Number,
+		default: 0,
+		_edit: { description: 'Total available items.' },
+	},
+	pageCount: {
+		type: Number,
+		default: null,
+		_edit: { description: 'Explicit total page count. Overrides total/pageSize when provided.' },
+	},
+	siblingCount: {
+		type: Number,
+		default: 1,
+		_edit: { description: 'Pages to show around the current page.' },
+	},
+	boundaryCount: {
+		type: Number,
+		default: 1,
+		_edit: { description: 'Pages to show at the beginning and end.' },
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Disable pagination controls.' },
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Hide first and last buttons.' },
+	},
+	label: {
+		type: String,
+		default: 'Pagination',
+		_edit: { description: 'Navigation landmark label.' },
+	},
+	activeStyle: {
+		type: String,
+		default: 'secondary',
+		_edit: {
+			options: ['secondary', 'primary'],
+			description: 'Visual style for the current page. Use primary to restore the stronger selected treatment.',
+		},
+	},
+});
+
+const emit = defineEmits(['update:page', 'page-change']);
+
+const resolvedPageCount = computed(() => {
+	const explicit = Number(props.pageCount);
+	if (Number.isFinite(explicit) && explicit > 0) return Math.floor(explicit);
+
+	const pageSize = Number(props.pageSize);
+	const total = Number(props.total);
+	if (!Number.isFinite(pageSize) || pageSize <= 0 || !Number.isFinite(total) || total <= 0) return 1;
+	return Math.max(1, Math.ceil(total / pageSize));
+});
+const currentPage = computed(() => clampPage(props.page));
+const pageItems = computed(() => visiblePageItems(currentPage.value, resolvedPageCount.value));
+const canGoPrevious = computed(() => !props.disabled && currentPage.value > 1);
+const canGoNext = computed(() => !props.disabled && currentPage.value < resolvedPageCount.value);
+const itemRangeLabel = computed(() => {
+	const total = Number(props.total);
+	const pageSize = Number(props.pageSize);
+	if (!Number.isFinite(total) || total <= 0 || !Number.isFinite(pageSize) || pageSize <= 0) {
+		return `${resolvedPageCount.value} page${resolvedPageCount.value === 1 ? '' : 's'}`;
+	}
+
+	const start = (currentPage.value - 1) * pageSize + 1;
+	const end = Math.min(total, currentPage.value * pageSize);
+	return `${start}-${end} of ${total}`;
+});
+const controls = computed(() => {
+	const items = [];
+	if (!props.compact) {
+		items.push({ type: 'action', key: 'first', label: 'First page', disabled: !canGoPrevious.value, target: 1, icon: 'first' });
+	}
+	items.push({ type: 'action', key: 'previous', label: 'Previous page', disabled: !canGoPrevious.value, target: currentPage.value - 1, icon: 'previous' });
+	for (const item of pageItems.value) items.push(item);
+	items.push({ type: 'action', key: 'next', label: 'Next page', disabled: !canGoNext.value, target: currentPage.value + 1, icon: 'next' });
+	if (!props.compact) {
+		items.push({ type: 'action', key: 'last', label: 'Last page', disabled: !canGoNext.value, target: resolvedPageCount.value, icon: 'last' });
+	}
+	return items;
+});
+
+function clampPage(page) {
+	const value = Math.floor(Number(page));
+	if (!Number.isFinite(value)) return 1;
+	return Math.min(resolvedPageCount.value, Math.max(1, value));
+}
+
+function visiblePageItems(page, count) {
+	const pages = new Set();
+	const boundary = Math.max(0, Math.floor(Number(props.boundaryCount) || 0));
+	const siblings = Math.max(0, Math.floor(Number(props.siblingCount) || 0));
+
+	for (let index = 1; index <= Math.min(boundary, count); index += 1) pages.add(index);
+	for (let index = Math.max(1, count - boundary + 1); index <= count; index += 1) pages.add(index);
+	for (let index = Math.max(1, page - siblings); index <= Math.min(count, page + siblings); index += 1) pages.add(index);
+
+	const sorted = [...pages].sort((a, b) => a - b);
+	const items = [];
+	let previous = 0;
+
+	for (const item of sorted) {
+		if (previous && item - previous > 1) {
+			const hiddenPages = range(previous + 1, item - 1);
+			if (hiddenPages.length === 1) {
+				items.push({ type: 'page', page: hiddenPages[0], key: `page-${hiddenPages[0]}` });
+			} else {
+				items.push({ type: 'ellipsis', key: `ellipsis-${previous}-${item}`, pages: hiddenPages });
+			}
+		}
+		items.push({ type: 'page', page: item, key: `page-${item}` });
+		previous = item;
+	}
+
+	return items;
+}
+
+function range(start, end) {
+	const pages = [];
+	for (let page = start; page <= end; page += 1) pages.push(page);
+	return pages;
+}
+
+function goTo(page) {
+	const nextPage = clampPage(page);
+	if (props.disabled || nextPage === currentPage.value) return;
+
+	emit('update:page', nextPage);
+	emit('page-change', {
+		page: nextPage,
+		previousPage: currentPage.value,
+		pageCount: resolvedPageCount.value,
+	});
+}
+
+function onHiddenPageSelect(value) {
+	const page = Number(value);
+	if (Number.isFinite(page)) goTo(page);
+}
+
+function hiddenPageOptions(item) {
+	return (item.pages || []).map((page) => ({
+		label: `Page ${page}`,
+		value: String(page),
+	}));
+}
+
+function hiddenPagesLabel(item) {
+	const pages = item.pages || [];
+	if (!pages.length) return 'Hidden pages';
+	return `Pages ${pages[0]} to ${pages[pages.length - 1]}`;
+}
+
+function activePageClasses() {
+	const styles = {
+		primary: 'z-20 border-primary bg-primary text-primary-fg shadow-sm',
+		secondary: 'z-20 border-border bg-secondary bg-[linear-gradient(rgb(0_0_0/6%)_0_0)] text-secondary-fg shadow-[inset_0_2px_4px_rgba(0,0,0,0.28)]',
+	};
+	return styles[props.activeStyle] || styles.secondary;
+}
+
+function buttonClasses(active = false) {
+	return [
+		'relative grid size-9 place-items-center border text-sm font-medium transition hover:z-30 focus:z-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed disabled:opacity-45',
+		active
+			? activePageClasses()
+			: 'border-border bg-canvas text-canvas-fg hover:border-primary/40 hover:bg-secondary',
+	];
+}
+
+function controlClasses(item, index) {
+	return [
+		buttonClasses(item.type === 'page' && item.page === currentPage.value),
+		index === 0 ? 'ml-0' : '-ml-px',
+		index === 0 && 'rounded-l-md',
+		index === controls.value.length - 1 && 'rounded-r-md',
+	];
+}
+</script>
+
+<template>
+	<nav class="flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between" :aria-label="label">
+		<p class="text-muted-fg">{{ itemRangeLabel }}</p>
+		<div class="inline-flex items-center rounded-md shadow-sm">
+			<template v-for="(item, index) in controls" :key="item.key">
+				<DomDropdown
+					v-if="item.type === 'ellipsis'"
+					class="!contents"
+					align="left"
+					placement="bottom"
+					width="min-w-28"
+					:items="hiddenPageOptions(item)"
+					:label="hiddenPagesLabel(item)"
+					:focus-value="String(item.pages?.[0] || '')"
+					:disabled="disabled || !item.pages?.length"
+					:trigger-class="controlClasses(item, index)"
+					:show-indicator="false"
+					@select="onHiddenPageSelect"
+				>
+					<template #trigger>
+						<span class="sr-only">{{ hiddenPagesLabel(item) }}</span>
+						<span aria-hidden="true">...</span>
+					</template>
+				</DomDropdown>
+				<button
+					v-else
+					type="button"
+					:class="controlClasses(item, index)"
+					:disabled="item.disabled || disabled"
+					:aria-current="item.type === 'page' && item.page === currentPage ? 'page' : undefined"
+					:aria-label="item.label || `Page ${item.page}`"
+					@click="goTo(item.target ?? item.page)"
+				>
+					<template v-if="item.type === 'page'">{{ item.page }}</template>
+					<svg v-else-if="item.icon === 'first'" viewBox="0 0 24 24" class="size-4" fill="none" aria-hidden="true">
+						<path d="M11 7l-5 5 5 5M18 7l-5 5 5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+					<svg v-else-if="item.icon === 'previous'" viewBox="0 0 24 24" class="size-4" fill="none" aria-hidden="true">
+						<path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+					<svg v-else-if="item.icon === 'next'" viewBox="0 0 24 24" class="size-4" fill="none" aria-hidden="true">
+						<path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+					<svg v-else viewBox="0 0 24 24" class="size-4" fill="none" aria-hidden="true">
+						<path d="M13 7l5 5-5 5M6 7l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+				</button>
+			</template>
+		</div>
+	</nav>
+</template>

package/src/pages/components/playground/DomRenderer.vue

@@ -0,0 +1,48 @@
+<script>
+import { computed, defineComponent, h } from 'vue';
+import { deserializeTree } from '../../_layout/inspector/serialize.js';
+
+const isTextNode = (node) => node && node.type === 'text';
+
+// Recursive renderer for the spec tree.
+const RenderNode = defineComponent({
+	name: 'RenderNode',
+	props: { node: { type: Object, required: true } },
+	setup(props) {
+		return () => {
+			const n = props.node;
+			if (isTextNode(n)) return n.text;
+			const tag = n.component || 'div';
+			const children = (n.children || []).map((c) =>
+				isTextNode(c) ? c.text : h(RenderNode, { node: c, key: c.id }),
+			);
+			return h(tag, { ...(n.props || {}) }, children.length ? children : undefined);
+		};
+	},
+});
+
+// Rehydrate a saved spec into a live tree of components. Use this to render
+// content stored in a database, fetched from an API, or generated by the
+// studio export.
+//
+//   <DomRenderer :spec="loadedFromDb" />
+export default defineComponent({
+	name: 'DomRenderer',
+	__doc: {
+		hidden: true,
+		studio: { hidden: true },
+	},
+	props: { spec: { type: Object, required: true } },
+	setup(props) {
+		const tree = computed(() => {
+			try { return deserializeTree(props.spec); } catch { return null; }
+		});
+		return () =>
+			tree.value
+				? h(RenderNode, { node: tree.value })
+				: h('div', {
+					class: 'rounded-xl border border-dashed border-border bg-secondary/40 p-4 text-xs text-muted-fg',
+				}, 'Unable to render the provided spec.');
+	},
+});
+</script>

package/src/pages/components/popover/DomPopover.vue

@@ -0,0 +1,244 @@
+<script>
+export const popoverProps = {
+	position: {
+		type: String,
+		default: 'bottom-start',
+		_edit: {
+			component: 'DomPositionInput',
+			props: {
+				label: 'Position',
+			},
+			description: 'Preferred side and alignment around the trigger.',
+		},
+	},
+	offset: {
+		type: Number,
+		default: 8,
+		_edit: { description: 'Gap in pixels between the trigger and the popover.' },
+	},
+	collisionPadding: {
+		type: Number,
+		default: 8,
+		_edit: { description: 'Viewport padding used when the panel flips or shifts.' },
+	},
+	floatingMode: {
+		type: String,
+		default: 'viewport',
+		_edit: { options: ['viewport', 'anchor'], description: 'viewport keeps the panel inside the browser; anchor keeps it attached while scrolling.' },
+	},
+	flip: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Allow the popover to flip to the opposite side when it would collide with the viewport.' },
+	},
+	lockScroll: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Lock browser scrolling while the popover is open.' },
+	},
+	trigger: {
+		type: String,
+		default: 'click',
+		_edit: { options: ['click', 'hover', 'hover-click'], description: 'How the trigger opens the popover. hover-click opens on hover and pins open on click.' },
+	},
+	hoverCloseDelay: {
+		type: Number,
+		default: 140,
+		_edit: { description: 'Delay in milliseconds before a hover-triggered popover closes after pointer or focus leaves.' },
+	},
+	arrow: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show a small arrow pointing back to the trigger.' },
+	},
+	width: {
+		type: String,
+		default: 'min-w-[14rem] max-w-[20rem]',
+		_edit: { description: 'Tailwind width utility(ies) for the panel.' },
+	},
+	padding: {
+		type: String,
+		default: 'p-4',
+		_edit: { description: 'Tailwind padding utility for the panel.' },
+	},
+	label: {
+		type: String,
+		default: 'More',
+		_edit: { description: 'Trigger button label (use the #trigger slot for richer content).' },
+	},
+	triggerId: {
+		type: String,
+		default: '',
+		_edit: { description: 'ID of an external trigger button. When set, DomPopover will not render its own trigger.' },
+	},
+};
+</script>
+
+<script setup>
+import { computed, onMounted, ref, useSlots } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Popover',
+		tag: '<DomPopover>',
+		description: 'A floating panel anchored to a trigger. Built on the HTML Popover API so it sits in the top layer — no parent overflow, transform, or z-index can clip it.',
+		slots: [
+			{ name: 'trigger', description: 'Replaces the trigger button. Omit when using triggerId.' },
+			{ name: '(default)', payload: '{ open, close, toggle }', description: 'Popover body. Receives helpers so content can close itself without storing a component ref.' },
+		],
+		keyboard: [
+			{ keys: 'Click trigger', action: 'Toggles the popover.' },
+			{ keys: 'Focus trigger', action: 'Opens the popover when trigger is hover.' },
+			{ keys: 'Click outside', action: 'Light-dismiss via the native popover API.' },
+			{ keys: 'Esc', action: 'Closes the popover.' },
+		],
+	},
+});
+
+const props = defineProps(popoverProps);
+const emit = defineEmits(['open', 'close']);
+
+const root = ref(null);
+const slots = useSlots();
+const hasTriggerSlot = computed(() => !!slots.trigger);
+const positionMap = {
+	'start-bottom': { placement: 'left', align: 'end' },
+	start: { placement: 'left', align: 'center' },
+	'start-top': { placement: 'left', align: 'start' },
+	'top-start': { placement: 'top', align: 'start' },
+	top: { placement: 'top', align: 'center' },
+	'top-end': { placement: 'top', align: 'end' },
+	'end-top': { placement: 'right', align: 'start' },
+	end: { placement: 'right', align: 'center' },
+	'end-bottom': { placement: 'right', align: 'end' },
+	'bottom-end': { placement: 'bottom', align: 'end' },
+	bottom: { placement: 'bottom', align: 'center' },
+	'bottom-start': { placement: 'bottom', align: 'start' },
+};
+
+const resolvedPosition = computed(() => {
+	return positionMap[props.position] || positionMap['bottom-start'];
+});
+
+function open() {
+	if (root.value) root.value.open = true;
+}
+
+function close() {
+	if (root.value) root.value.open = false;
+}
+
+function toggle() {
+	root.value?.toggle?.();
+}
+
+defineExpose({
+	open,
+	close,
+	toggle,
+});
+
+onMounted(async () => {
+	await import('../../lib/headless/popover.js');
+	root.value?.addEventListener('dom:open', () => emit('open'));
+	root.value?.addEventListener('dom:close', () => emit('close'));
+});
+</script>
+
+<template>
+	<dom-popover
+		ref="root"
+		:align="resolvedPosition.align"
+		:offset="offset"
+		:placement="resolvedPosition.placement"
+		:collision-padding="collisionPadding"
+		:floating-mode="floatingMode"
+		:flip="flip ? null : 'false'"
+		:lock-scroll="lockScroll ? '' : null"
+		:trigger="trigger"
+		:hover-close-delay="hoverCloseDelay"
+		:data-trigger-id="triggerId || null"
+		:class="triggerId ? 'absolute' : 'relative inline-block'"
+	>
+		<span v-if="!triggerId && hasTriggerSlot" slot="trigger" data-trigger class="inline-block align-baseline"><slot name="trigger" /></span>
+		<button
+			v-else-if="!triggerId"
+			slot="trigger"
+			type="button"
+			class="skin-control inline-flex h-10 items-center gap-2 rounded-full px-4 text-sm font-medium transition hover:brightness-[0.98] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+		>
+			{{ label }}
+		</button>
+		<div
+			slot="panel"
+			class="dom-popover-panel dom-floating-transition outline-none rounded-lg"
+			:class="width"
+		>
+			<div
+				class="dom-popover-card skin-popover relative rounded-lg text-left text-sm"
+				:class="padding"
+			>
+				<svg v-if="arrow" class="dom-popover-arrow" aria-hidden="true" viewBox="0 0 16 8">
+					<path class="dom-popover-arrow-fill" d="M1 8L8 1L15 8Z" />
+					<path class="dom-popover-arrow-stroke" d="M1 8L8 1L15 8" />
+				</svg>
+				<div class="dom-popover-content relative z-10 whitespace-normal text-left">
+					<slot :open="open" :close="close" :toggle="toggle" />
+				</div>
+			</div>
+		</div>
+	</dom-popover>
+</template>
+
+<style>
+.dom-popover-arrow {
+	position: absolute;
+	z-index: 0;
+	display: block;
+	width: 16px;
+	height: 8px;
+	overflow: visible;
+	fill: var(--skin-bg, var(--canvas));
+	stroke: var(--skin-border, var(--border));
+	stroke-width: 1;
+	stroke-linejoin: round;
+	pointer-events: none;
+}
+
+.dom-popover-arrow-fill {
+	fill: var(--skin-bg, var(--canvas));
+	stroke: none;
+}
+
+.dom-popover-arrow-stroke {
+	fill: none;
+	stroke: var(--skin-border, var(--border));
+	stroke-width: 1;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.dom-floating-transition[data-side="top"] > .dom-popover-card > .dom-popover-arrow {
+	bottom: -8px;
+	left: var(--dom-popover-arrow-x);
+	transform: translateX(-50%) rotate(180deg);
+}
+
+.dom-floating-transition[data-side="bottom"] > .dom-popover-card > .dom-popover-arrow {
+	top: -8px;
+	left: var(--dom-popover-arrow-x);
+	transform: translateX(-50%);
+}
+
+.dom-floating-transition[data-side="left"] > .dom-popover-card > .dom-popover-arrow {
+	right: -12px;
+	top: var(--dom-popover-arrow-y);
+	transform: translateY(-50%) rotate(90deg);
+}
+
+.dom-floating-transition[data-side="right"] > .dom-popover-card > .dom-popover-arrow {
+	left: -12px;
+	top: var(--dom-popover-arrow-y);
+	transform: translateY(-50%) rotate(-90deg);
+}
+</style>