@getdom/studio 0.1.1 → 0.2.1

package/src/pages/mobile/bottom-sheet/DomBottomSheet.vue

@@ -0,0 +1,221 @@
+<script setup>
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';
+import { normalizeSnapPoints, resolveSnapPoint } from '../_shared/interactionMath.js';
+import { useKeyboardViewport } from '../_shared/useKeyboardViewport.js';
+
+defineOptions({
+	__doc: {
+		name: 'Bottom sheet',
+		tag: '<DomBottomSheet>',
+		description: 'A modal content sheet with configurable snap heights, a draggable and keyboard-operable handle, scrolling body, and pinned footer. Uses the shared drawer for focus, dismissal, and scroll locking. Works standalone or in the DomAppShell overlay slot.',
+		slots: [
+			{ name: '(default)', payload: '{ close, expand }', description: 'Scrollable sheet content.' },
+			{ name: 'header', description: 'Custom heading content beside the close button.' },
+			{ name: 'footer', payload: '{ close, expand }', description: 'Pinned controls, such as a reply composer.' },
+		],
+		events: [
+			{ name: 'update:modelValue', payload: 'boolean', description: 'Open or dismiss the sheet.' },
+			{ name: 'update:snapPoint', payload: 'number', description: 'The selected fraction of the available sheet viewport.' },
+		],
+		keyboard: [
+			{ keys: 'Handle: Arrow Up / Down', action: 'Expand or collapse to the next visible stop.' },
+			{ keys: 'Handle: Home / End', action: 'Choose the smallest or largest visible stop.' },
+			{ keys: 'Handle: Enter / Space', action: 'Cycle through visible snap heights.' },
+			{ keys: 'Escape', action: 'Dismiss and return focus to the opener.' },
+		],
+	},
+});
+
+const props = defineProps({
+	modelValue: { type: Boolean, default: false, _edit: { description: 'Whether the modal sheet is open.' } },
+	title: { type: String, default: '', _edit: { description: 'Visible title and accessible dialog name.' } },
+	label: { type: String, default: 'Details', _edit: { description: 'Accessible dialog name when supplying a custom header without a title.' } },
+	snapPoints: { type: Array, default: () => [0, 0.5, 0.9], _edit: { typeRef: 'Array<number>', description: 'Fractions of the available height, from 0 to 1. Include 0 to allow drag dismissal.' } },
+	initialSnapPoint: { type: Number, default: 0.5, _edit: { description: 'Preferred height on each open, rounded to the nearest non-zero stop.' } },
+	snapPoint: { type: Number, default: null, _edit: { typeRef: 'number | null', description: 'Optional controlled height. Use v-model:snapPoint; null uses internal state.' } },
+	contained: { type: Boolean, default: undefined, _edit: { description: 'Defaults to contained in DomAppShell, viewport otherwise. Use the shell overlay slot.' } },
+	static: { type: Boolean, default: false, _edit: { description: 'Disable backdrop dismissal. Close and Escape remain available; omit zero from snapPoints to disable drag dismissal.' } },
+	keyboardInset: { type: Number, default: null, _edit: { typeRef: 'number | null', description: 'Optional native keyboard inset for standalone sheets. Contained sheets inherit the resized shell.' } },
+});
+const emit = defineEmits(['update:modelValue', 'update:snapPoint']);
+const drawer = ref(null);
+const overlay = ref(null);
+const panel = ref(null);
+const handle = ref(null);
+const teleportTarget = ref(null);
+const shell = inject('dom-app-shell', null);
+const isContained = computed(() => props.contained ?? Boolean(shell));
+const points = computed(() => normalizeSnapPoints(props.snapPoints));
+const visiblePoints = computed(() => points.value.filter((point) => point > 0));
+const localSnap = ref(resolveSnapPoint(visiblePoints.value, props.initialSnapPoint));
+const currentSnap = computed(() => resolveSnapPoint(visiblePoints.value, props.snapPoint ?? localSnap.value));
+const dragHeight = ref(null);
+const dragging = computed(() => dragHeight.value !== null);
+const titleId = `dom-bottom-sheet-${useId()}`;
+const handleDescriptionId = `${titleId}-size`;
+const keyboard = useKeyboardViewport(drawer, () => !isContained.value && props.modelValue, () => props.keyboardInset);
+const viewportStyle = computed(() => keyboard.open.value ? { height: `${keyboard.available.value}px`, top: `${keyboard.top.value}px`, bottom: 'auto', '--dom-safe-area-bottom': '0px' } : undefined);
+const panelStyle = computed(() => ({
+	height: dragging.value ? `${dragHeight.value}px` : `${currentSnap.value * 100}%`,
+	transition: dragging.value ? 'none' : undefined,
+}));
+let gesture = null;
+let ready = false;
+let removeListeners;
+let suppressClickUntil = 0;
+
+/** Requests dismissal through the component's controlled open state. */
+function close() {
+	cancelDrag();
+	emit('update:modelValue', false);
+}
+
+/** Sets a valid stop or requests dismissal for the explicit zero stop. */
+function snapTo(value) {
+	const next = resolveSnapPoint(points.value, value);
+	if (next === 0) return close();
+	localSnap.value = next;
+	emit('update:snapPoint', next);
+}
+
+/** Expands to the largest configured stop, including before the keyboard opens. */
+function expand() {
+	snapTo(visiblePoints.value.at(-1));
+}
+
+/** Cycles visible heights when the handle is activated without dragging. */
+function cycle() {
+	if (Date.now() < suppressClickUntil) return;
+	const index = visiblePoints.value.indexOf(currentSnap.value);
+	snapTo(visiblePoints.value[(index + 1) % visiblePoints.value.length]);
+}
+
+/** Supports predictable keyboard resizing without triggering swipe dismissal. */
+function onHandleKey(event) {
+	const index = visiblePoints.value.indexOf(currentSnap.value);
+	const destinations = { ArrowUp: index + 1, ArrowDown: index - 1, Home: 0, End: visiblePoints.value.length - 1 };
+	if (!(event.key in destinations)) return;
+	event.preventDefault();
+	snapTo(visiblePoints.value[Math.max(0, Math.min(visiblePoints.value.length - 1, destinations[event.key]))]);
+}
+
+/** Starts a dedicated handle gesture; body scrolling stays native and independent. */
+function onPointerDown(event) {
+	if (!props.modelValue || gesture || !event.isPrimary || event.button !== 0) return;
+	const available = overlay.value.clientHeight;
+	if (!available) return;
+	gesture = { id: event.pointerId, startY: event.clientY, height: panel.value.getBoundingClientRect().height, available, lastY: event.clientY, time: event.timeStamp, velocity: 0, moved: false };
+	handle.value.setPointerCapture(event.pointerId);
+}
+
+/** Resizes the panel with the finger while keeping its footer inside the visible area. */
+function onPointerMove(event) {
+	if (!gesture || event.pointerId !== gesture.id) return;
+	const delta = gesture.startY - event.clientY;
+	if (!gesture.moved && Math.abs(delta) < 4) return;
+	gesture.moved = true;
+	event.preventDefault();
+	gesture.velocity = (gesture.lastY - event.clientY) / Math.max(1, event.timeStamp - gesture.time) / gesture.available;
+	gesture.lastY = event.clientY;
+	gesture.time = event.timeStamp;
+	const minimum = points.value[0] * gesture.available;
+	const maximum = visiblePoints.value.at(-1) * gesture.available;
+	dragHeight.value = Math.max(Math.max(64, minimum), Math.min(maximum, gesture.height + delta));
+}
+
+/** Releases capture without selecting a stop, used for cancellation and teardown. */
+function cancelDrag() {
+	const previous = gesture;
+	gesture = null;
+	dragHeight.value = null;
+	if (previous && handle.value?.hasPointerCapture?.(previous.id)) handle.value.releasePointerCapture(previous.id);
+}
+
+/** Snaps after a completed drag; interrupted gestures return to their previous height. */
+function onPointerUp(event) {
+	if (!gesture || event.pointerId !== gesture.id) return;
+	const previous = gesture;
+	const destination = resolveSnapPoint(points.value, (dragHeight.value ?? previous.height) / previous.available, event.timeStamp - previous.time > 100 ? 0 : previous.velocity);
+	if (previous.moved) suppressClickUntil = Date.now() + 400;
+	cancelDrag();
+	if (previous.moved) snapTo(destination);
+}
+
+/** Drops a cancelled gesture without letting a subsequent click resize the sheet. */
+function onPointerCancel(event) {
+	if (!gesture || event.pointerId !== gesture.id) return;
+	if (gesture.moved) suppressClickUntil = Date.now() + 400;
+	cancelDrag();
+}
+
+/** Expands editable content before a software keyboard reduces usable space. */
+function onFocusIn(event) {
+	if (event.target.matches('input, textarea, [contenteditable="true"], [contenteditable=""]')) expand();
+}
+
+/** Keeps the headless drawer in sync without emitting a late close over a new open. */
+function onState(event) {
+	if (event.target === drawer.value) emit('update:modelValue', event.detail.open);
+}
+
+/** Restores the configured initial stop on each new presentation. */
+function setOpen(value) {
+	if (value && !drawer.value?.open) {
+		localSnap.value = resolveSnapPoint(visiblePoints.value, props.initialSnapPoint);
+	}
+	if (!value) cancelDrag();
+	if (ready && drawer.value) drawer.value.open = value;
+}
+
+/** Upgrades custom elements before teleporting, then installs owned listeners. */
+async function mount() {
+	await import('../../lib/headless/drawer.js');
+	if (!drawer.value) return;
+	const element = drawer.value;
+	element.addEventListener('dom:state', onState);
+	removeListeners = () => element.removeEventListener('dom:state', onState);
+	teleportTarget.value = element.ownerDocument.body;
+	await nextTick();
+	if (!drawer.value) return;
+	ready = true;
+	setOpen(props.modelValue);
+}
+
+/** Cleans up pointer capture and events before the drawer releases focus and scroll. */
+function unmount() {
+	ready = false;
+	cancelDrag();
+	removeListeners?.();
+}
+
+watch(() => props.modelValue, setOpen);
+watch(points, cancelDrag);
+onMounted(mount);
+onBeforeUnmount(unmount);
+defineExpose({ close, expand, snapTo });
+</script>
+
+<template>
+	<Teleport :to="teleportTarget || 'body'" :disabled="isContained || !teleportTarget">
+		<dom-drawer ref="drawer" side="bottom" :static="static || null" :aria-labelledby="title && !$slots.header ? titleId : null" :aria-label="title && !$slots.header ? null : title || label"
+			data-dom-bottom-sheet class="inset-0 z-50 block pointer-events-none data-[state=open]:pointer-events-auto" :class="isContained ? 'absolute' : 'fixed'" :style="viewportStyle">
+			<div ref="overlay" data-overlay data-no-defaults class="absolute inset-0 pointer-events-none data-[state=open]:pointer-events-auto" hidden>
+				<div data-backdrop data-no-defaults class="absolute inset-0 bg-canvas-fg/35 opacity-0 transition-opacity duration-250 data-[state=open]:opacity-100 motion-reduce:transition-none" @pointerdown="cancelDrag"></div>
+				<section ref="panel" data-panel data-no-defaults class="absolute inset-x-0 bottom-0 mx-auto flex max-h-[calc(100%-max(0.75rem,var(--dom-safe-area-top,env(safe-area-inset-top,0px))))] max-w-xl flex-col overflow-hidden rounded-t-3xl border border-b-0 border-border bg-canvas text-canvas-fg shadow-2xl outline-none translate-y-full transition-[height,transform] duration-250 ease-out data-[state=open]:translate-y-0 motion-reduce:transition-none" :style="panelStyle" :data-snap-point="currentSnap" @focusin="onFocusIn">
+					<span :id="handleDescriptionId" class="sr-only">{{ Math.round(currentSnap * 100) }} percent height. Use the up and down arrow keys to resize.</span>
+					<button ref="handle" type="button" class="flex h-11 w-full shrink-0 touch-none cursor-grab items-center justify-center active:cursor-grabbing focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring" :aria-label="`Resize ${title || label}`" :aria-describedby="handleDescriptionId"
+						@pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp" @pointercancel="onPointerCancel" @lostpointercapture="onPointerCancel" @click="cycle" @keydown="onHandleKey">
+						<span class="h-1 w-10 rounded-full bg-muted-fg/40" aria-hidden="true"></span>
+					</button>
+					<header class="flex shrink-0 items-center gap-3 border-b border-border px-5 pb-3">
+						<div class="min-w-0 flex-1"><slot name="header"><h2 :id="titleId" class="truncate text-base font-semibold">{{ title || label }}</h2></slot></div>
+						<button type="button" class="grid size-11 shrink-0 place-items-center rounded-full bg-secondary text-muted-fg hover:text-canvas-fg focus-visible:outline-2 focus-visible:outline-ring" :aria-label="`Close ${title || label}`" @click="close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" stroke-linecap="round" /></svg></button>
+					</header>
+					<div data-sheet-scroll class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4 [scroll-padding-block:1rem]"><slot :close="close" :expand="expand" /></div>
+					<footer v-if="$slots.footer" class="shrink-0 border-t border-border bg-canvas px-4 pt-3 pb-[max(0.75rem,var(--dom-safe-area-bottom,env(safe-area-inset-bottom,0px)))]"><slot name="footer" :close="close" :expand="expand" /></footer>
+					<div v-else class="shrink-0 pb-[var(--dom-safe-area-bottom,env(safe-area-inset-bottom,0px))]"></div>
+				</section>
+			</div>
+		</dom-drawer>
+	</Teleport>
+</template>

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

@@ -5,7 +5,7 @@ defineOptions({
 	__doc: {
 		name: 'App list item',
 		tag: '<DomAppListItem>',
-		description: 'A touch-sized app row for settings, inboxes, menus, and navigation.',
+		description: 'A touch-sized row that works in any layout. Use as="div" for rows containing switches, inputs, or other controls so interactive elements are never nested inside a button.',
 		slots: [
 			{ name: 'icon', description: 'Leading icon or avatar.' },
 			{ name: 'trailing', description: 'Trailing value, switch, badge, or custom action.' },
@@ -66,8 +66,8 @@ const isButton = computed(() => props.as === 'button');
 <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']"
+		class="flex min-h-14 w-full items-center gap-3 border-b border-border bg-canvas px-4 py-3 text-left transition last:border-b-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring disabled:opacity-50 disabled:pointer-events-none"
+		:class="[selected && 'bg-secondary', danger && 'text-destructive', as !== 'div' && 'hover:bg-secondary/60 active:bg-secondary']"
 		: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">
@@ -75,12 +75,12 @@ const isButton = computed(() => props.as === 'button');
 		</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>
+				<p class="min-w-0 flex-1 break-words text-sm font-medium" :class="danger ? 'text-destructive' : 'text-canvas-fg'">{{ label }}</p>
+				<p v-if="meta" class="max-w-[45%] shrink-0 break-words text-right 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">
+		<div v-if="$slots.trailing" class="flex shrink-0 items-center text-muted-fg [&_dom-toggle]:before:absolute [&_dom-toggle]:before:inset-x-0 [&_dom-toggle]:before:-inset-y-2.5">
 			<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">

package/src/pages/mobile/profile/DomAppProfile.vue

@@ -0,0 +1,42 @@
+<script setup>
+import DomAvatar from '../../visual/avatar/DomAvatar.vue';
+import DomButton from '../../components/button/DomButton.vue';
+
+defineOptions({
+	__doc: {
+		name: 'App profile',
+		tag: '<DomAppProfile>',
+		description: 'An iOS-style account header with a circular profile image, name, email, and an optional action. Place it above settings rows or inside any app stack screen.',
+		slots: [{ name: 'actions', description: 'Replace the default profile action with account controls.' }],
+		events: [{ name: 'action', payload: '()', description: 'Fired when the profile action is selected. The application owns navigation or editing.' }],
+		playground: {
+			mobileSlot: 'content',
+			initial: {
+				name: 'Alex Morgan',
+				email: 'alex@example.com',
+				src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&crop=faces&w=192&h=192&q=80',
+			},
+		},
+	},
+});
+
+defineProps({
+	name: { type: String, required: true, _edit: { description: 'Account holder name; also supplies initials if the image is unavailable.' } },
+	email: { type: String, default: '', _edit: { description: 'Optional account email shown below the name.' } },
+	src: { type: String, default: '', _edit: { description: 'Profile image URL. Falls back to initials if it cannot load.' } },
+	actionLabel: { type: String, default: 'Edit profile', _edit: { description: 'Profile action label. Set to an empty string to hide the default action.' } },
+});
+
+defineEmits(['action']);
+</script>
+
+<template>
+	<section class="flex flex-col items-center px-4 pt-5 pb-2 text-center" :aria-label="`${name} profile`">
+		<DomAvatar :name="name" :src="src" size="xl" class="size-20! bg-primary/10! text-2xl! text-primary! ring-0!" />
+		<h2 class="mt-4 max-w-full break-words text-2xl font-semibold tracking-tight text-canvas-fg">{{ name }}</h2>
+		<p v-if="email" class="mt-1 max-w-full break-words text-sm text-muted-fg">{{ email }}</p>
+		<slot name="actions">
+			<DomButton v-if="actionLabel" type="button" variant="ghost" class="mt-1 min-h-11 text-primary" @click="$emit('action')">{{ actionLabel }}</DomButton>
+		</slot>
+	</section>
+</template>

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

@@ -1,21 +1,21 @@
 <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)]',
+	top: 'pt-[var(--dom-safe-area-top,env(safe-area-inset-top,0px))]',
+	bottom: 'pb-[var(--dom-safe-area-bottom,env(safe-area-inset-bottom,0px))]',
+	left: 'pl-[var(--dom-safe-area-left,env(safe-area-inset-left,0px))]',
+	right: 'pr-[var(--dom-safe-area-right,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.',
+		description: 'Applies selected device safe-area insets in any layout. App shell and app stack already reserve their own insets, so no extra wrapper is needed there. Enable viewport-fit=cover in the app viewport meta tag for edge-to-edge iOS layouts.',
 		slots: [
 			{ name: '(default)', description: 'Content that should avoid device cutouts and home indicators.' },
 		],
 		playground: {
-			mobileSlot: 'content',
+			mobileSlot: 'safe-area',
 		},
 	},
 });

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

@@ -1,22 +1,56 @@
 <script setup>
+import { computed, provide, ref, watch } from 'vue';
+import { useKeyboardViewport } from '../_shared/useKeyboardViewport.js';
+
+const shell = ref(null);
+provide('dom-app-shell', shell);
+
 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.',
+		description: 'A bounded app viewport with safe areas, pinned top and bottom slots, and one scrolling content region. Fills the viewport by default; use height="100%" only inside an explicitly sized parent. Set content-scroll to false when a nested DomAppStack owns scrolling.',
 		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: 'bottom', payload: '{ keyboardOpen }', description: 'Bottom navigation or persistent controls. Receives the detected keyboard state.' },
 			{ name: 'overlay', description: 'Absolute overlay layer for drawers, action sheets, and app-level panels.' },
 		],
+		events: [{ name: 'keyboard-change', payload: '{ open, height }', description: 'Estimated keyboard state or the app-supplied native keyboard inset.' }],
 		playground: {
 			mobileSlot: 'shell',
+			initial: { height: '100%' },
 		},
 	},
 });
 
-defineProps({
+const props = defineProps({
+	keyboardBehavior: {
+		type: String,
+		default: 'resize',
+		validator: (value) => ['resize', 'none'].includes(value),
+		_edit: { options: ['resize', 'none'], description: 'Resize to the visible viewport while editing. Use none when the native host owns keyboard layout.' },
+	},
+	keyboardInset: {
+		type: Number,
+		default: null,
+		_edit: { typeRef: 'number | null', description: 'Optional native keyboard height in CSS pixels. Leave null to detect viewport changes; zero explicitly means closed.' },
+	},
+	hideBottomOnKeyboard: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Hide bottom navigation while the keyboard is visible. Leave false for a persistent reply composer.' },
+	},
+	height: {
+		type: String,
+		default: '100dvh',
+		_edit: { description: 'App height as a CSS length. Use 100dvh standalone, 36rem for an embedded app, or 100% inside a sized parent.' },
+	},
+	contentScroll: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Let the main region scroll. Disable when a nested stack or split-pane layout owns scrolling.' },
+	},
 	variant: {
 		type: String,
 		default: 'app',
@@ -26,23 +60,40 @@ defineProps({
 		},
 	},
 });
+const emit = defineEmits(['keyboard-change']);
+const keyboard = useKeyboardViewport(shell, () => props.keyboardBehavior === 'resize', () => props.keyboardInset);
+const keyboardOpen = keyboard.open;
+const shellStyle = computed(() => ({
+	height: props.height,
+	maxHeight: keyboardOpen.value ? `${keyboard.available.value}px` : undefined,
+	'--dom-keyboard-height': `${keyboard.height.value}px`,
+	'--dom-safe-area-bottom': keyboardOpen.value ? '0px' : undefined,
+}));
+
+/** Reports geometry changes so the app can coordinate native controls. */
+function reportKeyboard() {
+	emit('keyboard-change', { open: keyboardOpen.value, height: keyboard.height.value });
+}
+watch([keyboard.open, keyboard.height], reportKeyboard);
 </script>
 
 <template>
 	<div
+		ref="shell"
 		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"
+		:data-keyboard-open="keyboardOpen"
+		class="[&_input]:text-base [&_textarea]:text-base [&_select]:text-base relative isolate flex min-h-0 min-w-0 w-full flex-col overflow-hidden overscroll-none bg-canvas text-canvas-fg pt-[var(--dom-safe-area-top,env(safe-area-inset-top,0px))] pb-[var(--dom-safe-area-bottom,env(safe-area-inset-bottom,0px))] pl-[var(--dom-safe-area-left,env(safe-area-inset-left,0px))] pr-[var(--dom-safe-area-right,env(safe-area-inset-right,0px))]"
 		: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);"
+		:style="shellStyle"
 	>
-		<div v-if="$slots.top" class="shrink-0 pt-[var(--dom-mobile-safe-top)]">
+		<div v-if="$slots.top" class="shrink-0 [--dom-safe-area-top:0px] [--dom-safe-area-bottom:0px] [--dom-safe-area-left:0px] [--dom-safe-area-right:0px]">
 			<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]">
+		<main data-dom-app-shell-main class="min-h-0 min-w-0 flex-1 overscroll-contain [--dom-safe-area-top:0px] [--dom-safe-area-bottom:0px] [--dom-safe-area-left:0px] [--dom-safe-area-right:0px]" :class="contentScroll ? 'overflow-y-auto' : 'flex flex-col overflow-hidden'">
 			<slot />
 		</main>
-		<div v-if="$slots.bottom" class="shrink-0 pb-[var(--dom-mobile-safe-bottom)]">
-			<slot name="bottom" />
+		<div v-if="$slots.bottom" v-show="!hideBottomOnKeyboard || !keyboardOpen" class="shrink-0 [--dom-safe-area-top:0px] [--dom-safe-area-bottom:0px] [--dom-safe-area-left:0px] [--dom-safe-area-right:0px]">
+			<slot name="bottom" :keyboard-open="keyboardOpen" />
 		</div>
 		<div v-if="$slots.overlay" data-dom-app-shell-overlay class="pointer-events-none absolute inset-0 z-20">
 			<slot name="overlay" />