@getdom/studio 0.1.0

package/src/pages/mobile/list-item/DomAppListItem.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'App list item',
+		tag: '<DomAppListItem>',
+		description: 'A touch-sized app row for settings, inboxes, menus, and navigation.',
+		slots: [
+			{ name: 'icon', description: 'Leading icon or avatar.' },
+			{ name: 'trailing', description: 'Trailing value, switch, badge, or custom action.' },
+		],
+		playground: {
+			mobileSlot: 'content',
+			initial: {
+				label: 'Sync Capacitor status bar',
+				description: 'Match native chrome to the DOM Studio theme.',
+				meta: 'Now',
+				chevron: true,
+			},
+		},
+	},
+});
+
+const props = defineProps({
+	as: {
+		type: String,
+		default: 'button',
+		_edit: { description: 'Element or component used for the row.' },
+	},
+	label: {
+		type: String,
+		required: true,
+		_edit: { description: 'Primary row label.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional secondary copy.' },
+	},
+	meta: {
+		type: String,
+		default: '',
+		_edit: { description: 'Small trailing metadata shown beside the label.' },
+	},
+	chevron: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show a trailing chevron when no trailing slot is provided.' },
+	},
+	selected: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show the row as selected.' },
+	},
+	danger: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Style the row as a destructive action.' },
+	},
+});
+
+const isButton = computed(() => props.as === 'button');
+</script>
+
+<template>
+	<component
+		:is="as"
+		class="flex min-h-16 w-full items-center gap-3 border-b border-border bg-canvas px-4 py-3 text-left transition last:border-b-0 hover:bg-secondary/60 active:bg-secondary"
+		:class="[selected && 'bg-secondary', danger && 'text-destructive']"
+		:type="isButton ? 'button' : undefined"
+	>
+		<div v-if="$slots.icon" class="grid size-10 shrink-0 place-items-center rounded-2xl bg-secondary text-muted-fg">
+			<slot name="icon" />
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="flex min-w-0 items-baseline gap-2">
+				<p class="truncate text-sm font-medium" :class="danger ? 'text-destructive' : 'text-canvas-fg'">{{ label }}</p>
+				<p v-if="meta" class="shrink-0 text-xs text-muted-fg">{{ meta }}</p>
+			</div>
+			<p v-if="description" class="mt-0.5 line-clamp-2 text-xs leading-5 text-muted-fg">{{ description }}</p>
+		</div>
+		<div v-if="$slots.trailing" class="flex shrink-0 items-center text-muted-fg">
+			<slot name="trailing" />
+		</div>
+		<svg v-else-if="chevron" class="size-4 shrink-0 text-muted-fg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+			<path d="M7.3 4.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 1 1-1.4-1.4L11.58 10 7.3 5.7a1 1 0 0 1 0-1.4Z" />
+		</svg>
+	</component>
+</template>

package/src/pages/mobile/safe-area/DomSafeArea.vue

@@ -0,0 +1,39 @@
+<script setup>
+const edgeClasses = {
+	top: 'pt-[env(safe-area-inset-top,0px)]',
+	bottom: 'pb-[env(safe-area-inset-bottom,0px)]',
+	left: 'pl-[env(safe-area-inset-left,0px)]',
+	right: 'pr-[env(safe-area-inset-right,0px)]',
+};
+
+defineOptions({
+	__doc: {
+		name: 'Safe area',
+		tag: '<DomSafeArea>',
+		description: 'Applies safe-area inset padding around app chrome for devices with cutouts, home indicators, or inset system UI.',
+		slots: [
+			{ name: '(default)', description: 'Content that should avoid device cutouts and home indicators.' },
+		],
+		playground: {
+			mobileSlot: 'content',
+		},
+	},
+});
+
+defineProps({
+	edges: {
+		type: Array,
+		default: () => ['top', 'bottom'],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Safe-area edges to apply: top, bottom, left, right.',
+		},
+	},
+});
+</script>
+
+<template>
+	<div :class="edges.map((edge) => edgeClasses[edge]).filter(Boolean)">
+		<slot />
+	</div>
+</template>

package/src/pages/mobile/shell/DomAppShell.vue

@@ -0,0 +1,51 @@
+<script setup>
+defineOptions({
+	__doc: {
+		name: 'App shell',
+		tag: '<DomAppShell>',
+		description: 'A web app surface with safe-area padding, scrollable content, and fixed app chrome slots for mobile or desktop app layouts.',
+		slots: [
+			{ name: 'top', description: 'Top navigation, status, or toolbar content.' },
+			{ name: '(default)', description: 'Scrollable app content.' },
+			{ name: 'bottom', description: 'Bottom navigation, tab bar, or persistent controls.' },
+			{ name: 'overlay', description: 'Absolute overlay layer for drawers, action sheets, and app-level panels.' },
+		],
+		playground: {
+			mobileSlot: 'shell',
+		},
+	},
+});
+
+defineProps({
+	variant: {
+		type: String,
+		default: 'app',
+		_edit: {
+			options: ['app', 'card'],
+			description: 'Use app for full-screen app views and card for inset surfaces.',
+		},
+	},
+});
+</script>
+
+<template>
+	<div
+		data-dom-app-shell
+		class="relative isolate flex h-full min-h-0 w-full flex-col overflow-hidden overscroll-none bg-canvas text-canvas-fg"
+		:class="variant === 'card' && 'skin-card rounded-[2rem]'"
+		style="--dom-mobile-safe-top: env(safe-area-inset-top, 0px); --dom-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);"
+	>
+		<div v-if="$slots.top" class="shrink-0 pt-[var(--dom-mobile-safe-top)]">
+			<slot name="top" />
+		</div>
+		<main data-dom-app-shell-main class="min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-smooth [-webkit-overflow-scrolling:touch]">
+			<slot />
+		</main>
+		<div v-if="$slots.bottom" class="shrink-0 pb-[var(--dom-mobile-safe-bottom)]">
+			<slot name="bottom" />
+		</div>
+		<div v-if="$slots.overlay" data-dom-app-shell-overlay class="pointer-events-none absolute inset-0 z-20">
+			<slot name="overlay" />
+		</div>
+	</div>
+</template>

package/src/pages/mobile/stack/AppStackScreen.vue

@@ -0,0 +1,63 @@
+<script setup>
+defineOptions({
+	name: 'DomAppStackScreen',
+});
+
+defineProps({
+	id: {
+		type: String,
+		required: true,
+		_edit: { description: 'Unique screen id used in the stack path.' },
+	},
+	title: {
+		type: String,
+		default: '',
+		_edit: { description: 'Screen title used in breadcrumbs and generated menu rows.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional supporting text for generated menu rows.' },
+	},
+	meta: {
+		type: String,
+		default: '',
+		_edit: { description: 'Small trailing metadata for generated menu rows.' },
+	},
+	icon: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional SVG string for generated menu rows.' },
+	},
+	parent: {
+		type: String,
+		default: '',
+		_edit: { description: 'Parent screen id used to build desktop and breadcrumb paths.' },
+	},
+	children: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Child screen ids for generated settings menus.',
+		},
+	},
+	props: {
+		type: Object,
+		default: () => ({}),
+		_edit: { description: 'Props forwarded when this screen is rendered through a component.' },
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Disable generated menu rows that point to this screen.' },
+	},
+	loadingTitle: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional loading title for lazy screen content.' },
+	},
+});
+</script>
+
+<template></template>