@getdom/studio 0.1.1 → 0.2.0

package/src/pages/components/_shared/media/useMediaInput.js

@@ -0,0 +1,200 @@
+import { computed, onScopeDispose, ref, shallowRef, watch } from 'vue';
+
+/**
+ * Owns one local capture stream. A replacement is emitted before the previous
+ * microphone is released; cameras are released first for mobile camera switching.
+ * Pending permission requests are invalidated on stop/disposal and late streams
+ * are immediately released. No media is recorded, played back, or transmitted.
+ *
+ * @param {'audio'|'video'} kind The only media kind to request.
+ * @param {object} props Reactive deviceId, muted, and constraints preferences.
+ * @param {Function} emit Vue event emitter for stream, state, errors and models.
+ * @returns {object} Reactive capture state and explicit start/stop/select actions.
+ */
+export function useMediaInput(kind, props, emit) {
+	const stream = shallowRef(null);
+	const devices = shallowRef([]);
+	const deviceId = ref(props.deviceId || '');
+	const muted = ref(Boolean(props.muted));
+	const pending = ref(false);
+	const error = ref('');
+	const interrupted = ref(false);
+	let request = 0;
+	let enumeration = 0;
+	let disposed = false;
+	let mediaDevices;
+	let removeTrackListeners = () => {};
+
+	/** Describes local capture only; it does not imply a remote connection. */
+	const state = computed(() => pending.value ? 'requesting' : stream.value ? 'active' : error.value ? 'error' : 'idle');
+	/** Resolves a usable label without exposing a device identifier to the viewer. */
+	const deviceLabel = computed(() => devices.value.find(matchesDevice)?.label || stream.value?.getTracks()[0]?.label || (kind === 'audio' ? 'Microphone' : 'Camera'));
+	/** Tests the current committed input selection. */
+	function matchesDevice(device) { return device.deviceId === deviceId.value; }
+	/** Emits each meaningful local capture state transition. */
+	watch(state, (value) => emit('state', value));
+	/** Applies externally controlled device changes through the same capture path. */
+	watch(() => props.deviceId, (value) => { if ((value || '') !== deviceId.value) select(value || ''); });
+	/** Applies an externally controlled mute preference to current and future tracks. */
+	watch(() => props.muted, (value) => setMuted(Boolean(value)));
+
+	/** Returns the secure-context media API, attaching device discovery once. */
+	function api() {
+		if (globalThis.isSecureContext === false || !globalThis.navigator?.mediaDevices?.getUserMedia) {
+			throw new Error('Device access needs HTTPS or localhost and a browser that supports media capture.');
+		}
+		if (!mediaDevices) {
+			mediaDevices = globalThis.navigator.mediaDevices;
+			mediaDevices.addEventListener?.('devicechange', refresh);
+		}
+		return mediaDevices;
+	}
+
+	/** Refreshes permission-filtered inputs without requesting or opening a device. */
+	async function refresh() {
+		const version = ++enumeration;
+		try {
+			const list = await api().enumerateDevices();
+			if (disposed || version !== enumeration) return;
+			devices.value = list.filter(isInput).map(labelDevice);
+		} catch {
+			// Discovery can be unavailable while a tab is hidden; capture still works.
+		}
+	}
+	/** Keeps only selectable inputs of the requested kind. */
+	function isInput(device) { return device.kind === `${kind}input` && Boolean(device.deviceId); }
+	/** Supplies stable fallback labels until browser permission reveals real names. */
+	function labelDevice(device, index) {
+		return { deviceId: device.deviceId, label: device.label || `${kind === 'audio' ? 'Microphone' : 'Camera'} ${index + 1}` };
+	}
+
+	/** Stops every track owned by the provided capture stream. */
+	function release(value) { for (const track of value?.getTracks() || []) track.stop(); }
+	/** Detaches listeners and releases the current stream, notifying consumers first. */
+	function clearStream() {
+		removeTrackListeners();
+		removeTrackListeners = () => {};
+		const previous = stream.value;
+		stream.value = null;
+		interrupted.value = false;
+		if (previous) emit('stream', null);
+		release(previous);
+	}
+
+	/** Converts browser capture errors into actionable, provider-independent copy. */
+	function report(cause) {
+		const input = kind === 'audio' ? 'microphone' : 'camera';
+		const messages = {
+			NotAllowedError: `Allow ${input} access in your browser settings, then try again.`,
+			SecurityError: `This page is not allowed to use your ${input}. Check the browser or embedded-page permissions.`,
+			NotFoundError: `No ${input} was found. Connect one and try again.`,
+			NotReadableError: `The ${input} is unavailable. Close other apps using it and try again.`,
+			OverconstrainedError: `The selected ${input} or its settings are unavailable. Choose another input or retry with the system default.`,
+			AbortError: `The ${input} could not start. Try again.`,
+		};
+		error.value = messages[cause?.name] || cause?.message || `Could not start the ${input}. Try again.`;
+		emit('error', { name: cause?.name || 'Error', message: error.value });
+	}
+
+	/**
+	 * Requests capture after a user action. Resolves with the committed stream or
+	 * null on failure/cancellation; consumers receive all changes via stream events.
+	 * @param {string} selected Device identifier, or an empty string for the default.
+	 * @returns {Promise<MediaStream|null>} Active local stream, if still requested.
+	 */
+	async function start(selected = deviceId.value) {
+		if (disposed) return null;
+		const version = ++request;
+		pending.value = true;
+		error.value = '';
+		try {
+			const capture = api();
+			if (kind === 'video') clearStream();
+			const constraints = { ...(props.constraints || {}) };
+			// Selection owns deviceId; caller constraints cannot silently override it.
+			delete constraints.deviceId;
+			if (selected) constraints.deviceId = { exact: selected };
+			const next = await capture.getUserMedia({ audio: false, video: false, [kind]: Object.keys(constraints).length ? constraints : true });
+			if (disposed || version !== request) { release(next); return null; }
+			const track = next.getTracks().find(isCaptureTrack);
+			if (!track || track.readyState === 'ended') {
+				release(next);
+				throw new Error('The input stopped before it was ready. Try again.');
+			}
+			removeTrackListeners();
+			const previous = stream.value;
+			stream.value = next;
+			track.enabled = !muted.value;
+			interrupted.value = track.muted;
+			track.addEventListener('ended', ended);
+			track.addEventListener('mute', trackMuted);
+			track.addEventListener('unmute', trackMuted);
+			/** Removes listeners before stopping a replaced or disposed track. */
+			removeTrackListeners = () => {
+				track.removeEventListener('ended', ended);
+				track.removeEventListener('mute', trackMuted);
+				track.removeEventListener('unmute', trackMuted);
+			};
+			deviceId.value = selected || track.getSettings().deviceId || '';
+			emit('update:deviceId', deviceId.value);
+			emit('stream', next);
+			release(previous);
+			await refresh();
+			return version === request ? next : null;
+		} catch (cause) {
+			if (!disposed && version === request) {
+				report(cause);
+				// The last working microphone stays selected when replacement fails.
+				emit('update:deviceId', deviceId.value);
+			}
+			return null;
+		} finally {
+			if (!disposed && version === request) pending.value = false;
+		}
+	}
+	/** Matches the requested media track without depending on track ordering. */
+	function isCaptureTrack(track) { return track.kind === kind; }
+	/** Surfaces hardware interruptions without pretending that silence is speech. */
+	function trackMuted() { interrupted.value = Boolean(stream.value?.getTracks().find(isCaptureTrack)?.muted); }
+	/** Reports a removed/revoked device and leaves retry under the user's control. */
+	function ended() {
+		stop();
+		report(new Error(`The ${kind === 'audio' ? 'microphone' : 'camera'} disconnected or access ended. Reconnect it and try again.`));
+		refresh();
+	}
+
+	/** Cancels pending capture and releases all currently owned media tracks. */
+	function stop() {
+		request++;
+		pending.value = false;
+		error.value = '';
+		clearStream();
+	}
+	/** Selects a future input or replaces the active stream without recording it. */
+	async function select(value) {
+		if (disposed) return;
+		if (stream.value || pending.value) return start(value);
+		deviceId.value = value;
+		error.value = '';
+		emit('update:deviceId', value);
+	}
+	/** Changes capture track enabled state, retaining the device until Stop. */
+	function setMuted(value) {
+		muted.value = value;
+		for (const track of stream.value?.getTracks() || []) track.enabled = !value;
+		emit('update:muted', value);
+	}
+	/** Toggles the microphone without opening a second capture stream. */
+	function toggleMuted() { setMuted(!muted.value); }
+	/** Releases hardware on navigation, including pages entering the back-forward cache. */
+	globalThis.window?.addEventListener('pagehide', stop);
+	/** Invalidates async work and removes all device/page listeners on scope disposal. */
+	onScopeDispose(() => {
+		disposed = true;
+		enumeration++;
+		stop();
+		mediaDevices?.removeEventListener?.('devicechange', refresh);
+		globalThis.window?.removeEventListener('pagehide', stop);
+	});
+	return { stream, devices, deviceId, deviceLabel, muted, interrupted, pending, error, state, start, stop, select, refresh, setMuted, toggleMuted };
+}

package/src/pages/components/audio-controls/DomAudioControls.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, nextTick, ref, useId } from 'vue';
+import DomButton from '../button/DomButton.vue';
+import DomIconButton from '../icon-button/DomIconButton.vue';
+import DomPopover from '../popover/DomPopover.vue';
+import DomAudioVisualizer from '../../visual/audio-visualizer/DomAudioVisualizer.vue';
+import MediaDeviceSelect from '../_shared/media/MediaDeviceSelect.vue';
+import { useMediaInput } from '../_shared/media/useMediaInput.js';
+
+defineOptions({
+	__doc: {
+		nav: { section: 'ai' },
+		name: 'Audio controls',
+		tag: '<DomAudioControls>',
+		description: 'Click to talk becomes a compact microphone control: stop, live waveform, mute, and input selection. Ready for voice AI, calls, and collaboration.',
+		icon: 'M4 9v6M8 5v14M12 8v8M16 3v18M20 9v6',
+		events: [
+			{ name: 'stream', payload: '(stream: MediaStream | null)', description: 'Initial/replacement microphone stream, or null on stop. This component releases its owned tracks.' },
+			{ name: 'update:deviceId', payload: '(deviceId: string)', description: 'Committed input selection, with v-model:deviceId support.' },
+			{ name: 'update:muted', payload: '(muted: boolean)', description: 'Microphone mute state, with v-model:muted support.' },
+			{ name: 'state', payload: "(state: 'idle' | 'requesting' | 'active' | 'error')", description: 'Local capture lifecycle, independent of your remote connection.' },
+			{ name: 'error', payload: '({ name, message })', description: 'Permission, missing device, or capture failure.' },
+		],
+		keyboard: [
+			{ keys: 'Tab', action: 'Move between stop, mute, and microphone settings.' },
+			{ keys: 'Enter / Space', action: 'Activate the focused control.' },
+			{ keys: 'Escape', action: 'Dismiss microphone settings and return to the trigger.' },
+		],
+	},
+});
+const props = defineProps({
+	label: { type: String, default: 'Click to talk', _edit: { description: 'Button label before microphone capture starts.' } },
+	deviceId: { type: String, default: '', _edit: { description: 'Input device ID, or empty for system default. Supports v-model:deviceId.' } },
+	muted: { type: Boolean, default: false, _edit: { description: 'Mute the capture track while keeping its device open. Supports v-model:muted.' } },
+	constraints: { type: Object, default: null, _edit: { description: 'Optional audio MediaTrackConstraints applied at start/selection. deviceId is controlled separately.' } },
+});
+const emit = defineEmits(['stream', 'update:deviceId', 'update:muted', 'state', 'error']);
+const { stream, devices, deviceId, deviceLabel, muted, interrupted, pending, error, state, start, stop, select, refresh, toggleMuted } = useMediaInput('audio', props, emit);
+const root = ref(null);
+const settings = ref(null);
+const settingsOpen = ref(false);
+const triggerId = useId();
+/** Announces lifecycle and mute changes without announcing each waveform sample. */
+const status = computed(() => pending.value ? 'Waiting for microphone access' : interrupted.value ? 'Microphone interrupted' : !stream.value ? 'Microphone off' : muted.value ? 'Microphone muted' : `Microphone on: ${deviceLabel.value}`);
+/** Starts capture and moves keyboard focus to the resulting control group. */
+async function begin() {
+	const active = await start();
+	if (active) { await nextTick(); root.value?.querySelector('[data-stop]')?.focus(); }
+}
+/** Stops capture and restores focus to the click-to-talk button. */
+async function end() {
+	stop();
+	settings.value?.close();
+	await nextTick();
+	root.value?.querySelector('[data-start]')?.focus();
+}
+/** Refreshes names after permission and whenever the settings panel opens. */
+function openSettings() { settingsOpen.value = true; refresh(); }
+/** Commits the chosen microphone then dismisses its settings panel on success. */
+async function selectInput(value) { await select(value); if (!error.value) settings.value?.close(); }
+defineExpose({ start, stop, stream, state });
+</script>
+
+<template>
+	<div ref="root" class="inline-flex max-w-full flex-col items-center gap-3">
+		<DomButton v-if="!stream && !pending" data-start size="lg" @click="begin">
+			<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M9 5a3 3 0 0 1 6 0v7a3 3 0 0 1-6 0V5ZM5 10v2a7 7 0 0 0 14 0v-2M12 19v3" /></svg>
+			{{ error ? 'Try again' : label }}
+		</DomButton>
+		<div v-else role="group" aria-label="Microphone controls" class="flex max-w-full items-center gap-1 rounded-full border border-border bg-secondary p-1.5 shadow-lg">
+			<DomIconButton data-stop label="Stop microphone" variant="danger" size="lg" class="bg-destructive/15" icon="M6 6l12 12M18 6 6 18" @click="end" />
+			<div class="flex h-12 w-32 min-w-12 items-center justify-center rounded-2xl bg-canvas px-2 sm:w-40">
+				<span v-if="pending" role="status" class="truncate text-xs text-muted-fg">Connecting…</span>
+				<DomAudioVisualizer v-else :stream="stream" :muted="muted || interrupted" class="w-full" :class="muted ? 'text-muted-fg/40' : 'text-canvas-fg'" />
+			</div>
+			<DomIconButton :label="muted ? 'Unmute microphone' : 'Mute microphone'" :aria-pressed="muted" :disabled="!stream" :active="muted" :variant="muted ? 'danger' : 'ghost'" size="lg" @click="toggleMuted">
+				<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M9 5a3 3 0 0 1 6 0v7a3 3 0 0 1-6 0V5ZM5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" /><path v-if="muted" d="m3 3 18 18" /></svg>
+			</DomIconButton>
+			<DomIconButton :id="triggerId" label="Select microphone" :aria-expanded="settingsOpen" aria-haspopup="dialog" :disabled="pending" size="lg" icon="m6 9 6 6 6-6" />
+			<DomPopover ref="settings" :trigger-id="triggerId" position="bottom-end" :arrow="false" width="w-72 max-w-[calc(100vw-2rem)]" @open="openSettings" @close="settingsOpen = false">
+				<div role="dialog" aria-label="Microphone settings" class="space-y-3">
+					<p class="text-sm font-semibold text-canvas-fg">Audio input</p>
+					<MediaDeviceSelect :devices="devices" :device-id="deviceId" :disabled="pending" @select="selectInput" />
+					<p class="text-xs leading-relaxed text-muted-fg">Choose the microphone you want to use.</p>
+				</div>
+			</DomPopover>
+		</div>
+		<p role="status" class="sr-only">{{ status }}</p>
+		<p v-if="error" role="alert" class="max-w-sm text-center text-sm leading-relaxed text-destructive">{{ error }}</p>
+	</div>
+</template>

package/src/pages/components/audio-input/DomAudioInput.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from 'vue';
+import DomButton from '../button/DomButton.vue';
+import DomIconButton from '../icon-button/DomIconButton.vue';
+import DomAudioVisualizer from '../../visual/audio-visualizer/DomAudioVisualizer.vue';
+import MediaDeviceSelect from '../_shared/media/MediaDeviceSelect.vue';
+import { useMediaInput } from '../_shared/media/useMediaInput.js';
+
+defineOptions({
+	__doc: {
+		nav: { section: 'ai' },
+		name: 'Audio input',
+		tag: '<DomAudioInput>',
+		description: 'Microphone setup with device selection, a live input meter, mute, and explicit start/stop. Emits a local MediaStream for your meeting or AI application.',
+		icon: 'M12 15a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v7a3 3 0 0 0 3 3ZM5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8',
+		events: [
+			{ name: 'stream', payload: '(stream: MediaStream | null)', description: 'Emits the initial or replacement stream; null means capture stopped. This component owns and releases its tracks.' },
+			{ name: 'update:deviceId', payload: '(deviceId: string)', description: 'Committed microphone selection. Supports v-model:deviceId.' },
+			{ name: 'update:muted', payload: '(muted: boolean)', description: 'Track enabled state changed. Supports v-model:muted.' },
+			{ name: 'state', payload: "(state: 'idle' | 'requesting' | 'active' | 'error')", description: 'Local device lifecycle. Active does not imply a network connection.' },
+			{ name: 'error', payload: '({ name, message })', description: 'Actionable capture failure. A failed microphone switch keeps the previous stream.' },
+		],
+	},
+});
+const props = defineProps({
+	deviceId: { type: String, default: '', _edit: { description: 'Microphone device ID, or empty for the system default. Supports v-model:deviceId.' } },
+	muted: { type: Boolean, default: false, _edit: { description: 'Mute current and future tracks without releasing the microphone. Supports v-model:muted.' } },
+	constraints: { type: Object, default: null, _edit: { description: 'Optional audio MediaTrackConstraints, applied at start or selection. deviceId is controlled separately.' } },
+	label: { type: String, default: 'Microphone', _edit: { description: 'Setup heading and device picker label.' } },
+});
+const emit = defineEmits(['stream', 'update:deviceId', 'update:muted', 'state', 'error']);
+const { stream, devices, deviceId, muted, interrupted, pending, error, state, start, stop, select, refresh, toggleMuted } = useMediaInput('audio', props, emit);
+/** Explains the true input state without confusing a quiet microphone with failure. */
+const status = computed(() => pending.value ? 'Waiting for microphone access…' : interrupted.value ? 'Microphone interrupted' : !stream.value ? 'Microphone is off' : muted.value ? 'Microphone muted' : 'Speak to check your input');
+defineExpose({ start, stop, stream, state });
+</script>
+
+<template>
+	<section class="w-full min-w-0 space-y-5 rounded-2xl border border-border bg-canvas p-5 text-canvas-fg" :aria-label="`${label} setup`">
+		<div class="flex items-center justify-between gap-3">
+			<h3 class="text-sm font-semibold">{{ label }}</h3>
+			<span class="flex items-center gap-1.5 text-xs text-muted-fg"><span class="size-1.5 rounded-full" :class="stream && !muted && !interrupted ? 'bg-success' : 'bg-muted-fg/40'" />{{ stream ? 'On' : 'Off' }}</span>
+		</div>
+		<MediaDeviceSelect :devices="devices" :device-id="deviceId" :label="label" :disabled="pending" @select="select" @focusin="refresh" />
+		<div class="rounded-xl bg-secondary/60 px-4 py-3">
+			<DomAudioVisualizer :stream="stream" :muted="muted || interrupted" class="text-primary" />
+			<p role="status" class="mt-2 text-center text-xs text-muted-fg">{{ status }}</p>
+		</div>
+		<p v-if="error" role="alert" class="text-sm leading-relaxed text-destructive">{{ error }}</p>
+		<div class="flex flex-wrap items-center gap-2">
+			<DomButton v-if="!stream && !pending" size="sm" @click="start()">{{ error ? 'Try microphone again' : 'Enable microphone' }}</DomButton>
+			<DomButton v-if="pending || stream" variant="secondary" size="sm" @click="stop">{{ pending ? 'Cancel' : 'Stop microphone' }}</DomButton>
+			<DomIconButton v-if="stream" :label="muted ? 'Unmute microphone' : 'Mute microphone'" :aria-pressed="muted" :active="muted" :variant="muted ? 'danger' : 'ghost'" @click="toggleMuted">
+				<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M9 5a3 3 0 0 1 6 0v7a3 3 0 0 1-6 0V5ZM5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" /><path v-if="muted" d="m3 3 18 18" /></svg>
+			</DomIconButton>
+		</div>
+	</section>
+</template>

package/src/pages/components/button/DomButton.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, useAttrs } from 'vue';
+import { buttonInteraction } from './buttonStyles.js';
 
 defineOptions({
 	inheritAttrs: false,
@@ -35,6 +36,11 @@ const props = defineProps({
 			description: 'Five balanced sizes.',
 		},
 	},
+	pressed: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show native press feedback for an external activation, such as a keyboard shortcut. Does not represent toggle selection.' },
+	},
 	loading: {
 		type: Boolean,
 		default: false,
@@ -47,11 +53,11 @@ const props = defineProps({
 	},
 });
 const attrs = useAttrs();
-const interaction = 'select-none active:bg-[linear-gradient(rgb(0_0_0/6%)_0_0)] active:scale-[0.97] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] motion-reduce:active:scale-100';
 const variants = {
 	primary: 'skin-action hover:opacity-90',
 	secondary: 'skin-control hover:brightness-[0.98]',
-	ghost: 'text-canvas-fg hover:bg-secondary hover:text-secondary-fg',
+	// Reserve the border so variant changes fade from transparent without a currentColor flash or width shift.
+	ghost: 'border border-transparent text-canvas-fg hover:bg-secondary hover:text-secondary-fg',
 	danger: 'skin-control text-destructive hover:brightness-[0.98]',
 };
 const sizes = {
@@ -63,7 +69,7 @@ const sizes = {
 };
 
 const classes = computed(() => [
-	interaction,
+	buttonInteraction,
 	'inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full font-medium tracking-tight transition',
 	'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-canvas',
 	variants[props.variant] || variants.primary,
@@ -122,7 +128,7 @@ function onClick(event) {
 </script>
 
 <template>
-	<component :is="as" v-bind="componentAttrs" :class="classes" @click="onClick">
+	<component :is="as" v-bind="componentAttrs" :class="classes" :data-pressed="pressed ? '' : undefined" @click="onClick">
 		<svg v-if="loading" class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
 			<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-opacity="0.25" />
 			<path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />

package/src/pages/components/button/buttonStyles.js

@@ -0,0 +1,5 @@
+/**
+ * Shared pointer and programmatic press feedback for text and icon buttons.
+ * The pressed attribute is visual feedback, independent of toggle selection.
+ */
+export const buttonInteraction = 'select-none [&:is(:active,[data-pressed])]:bg-[linear-gradient(rgb(0_0_0/6%)_0_0)] [&:is(:active,[data-pressed])]:scale-[0.97] [&:is(:active,[data-pressed])]:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] motion-reduce:[&:is(:active,[data-pressed])]:scale-100';

package/src/pages/components/camera-input/DomCameraInput.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import DomButton from '../button/DomButton.vue';
+import MediaDeviceSelect from '../_shared/media/MediaDeviceSelect.vue';
+import { useMediaInput } from '../_shared/media/useMediaInput.js';
+
+defineOptions({
+	__doc: {
+		nav: { section: 'ai' },
+		name: 'Camera input',
+		tag: '<DomCameraInput>',
+		description: 'Select a webcam and check a private local preview before joining a call. Emits a video-only MediaStream and releases the camera when stopped.',
+		icon: 'M3 5h12v14H3zM15 10l6-4v12l-6-4',
+		events: [
+			{ name: 'stream', payload: '(stream: MediaStream | null)', description: 'Video-only local stream or null when released. Cameras are released before switching for mobile compatibility.' },
+			{ name: 'update:deviceId', payload: '(deviceId: string)', description: 'Committed camera selection. Supports v-model:deviceId.' },
+			{ name: 'state', payload: "(state: 'idle' | 'requesting' | 'active' | 'error')", description: 'Local camera capture state.' },
+			{ name: 'error', payload: '({ name, message })', description: 'Camera access or device failure.' },
+		],
+	},
+});
+const props = defineProps({
+	deviceId: { type: String, default: '', _edit: { description: 'Camera device ID, or empty for system default. Supports v-model:deviceId.' } },
+	constraints: { type: Object, default: null, _edit: { description: 'Optional video MediaTrackConstraints such as facingMode or ideal width. Applied at start or selection.' } },
+	mirror: { type: Boolean, default: true, _edit: { description: 'Mirror only the local preview for a front-facing camera. The emitted stream is unchanged.' } },
+	label: { type: String, default: 'Camera', _edit: { description: 'Setup heading and camera picker label.' } },
+});
+const emit = defineEmits(['stream', 'update:deviceId', 'state', 'error']);
+const { stream, devices, deviceId, deviceLabel, interrupted, pending, error, state, start, stop, select, refresh } = useMediaInput('video', props, emit);
+const video = ref(null);
+const previewBlocked = ref(false);
+let playback = 0;
+/** Describes capture independently of whether browser autoplay displayed it. */
+const status = computed(() => pending.value ? 'Waiting for camera access…' : interrupted.value ? 'Camera interrupted' : stream.value ? 'Camera preview is on' : 'Camera is off');
+/** Binds a MediaStream using srcObject; avoids URLs, recording, and audio playback. */
+async function showPreview() {
+	const version = ++playback;
+	const element = video.value;
+	if (!element) return;
+	previewBlocked.value = false;
+	element.srcObject = stream.value;
+	if (!stream.value) return;
+	try { await element.play(); }
+	catch { if (version === playback) previewBlocked.value = true; }
+}
+/** Attaches each replacement stream after Vue creates its video element. */
+watch([stream, video], showPreview, { flush: 'post' });
+/** Clears media-element references after capture ownership releases its tracks. */
+onBeforeUnmount(() => { playback++; if (video.value) video.value.srcObject = null; });
+defineExpose({ start, stop, stream, state });
+</script>
+
+<template>
+	<section class="w-full min-w-0 space-y-5 rounded-2xl border border-border bg-canvas p-5 text-canvas-fg" :aria-label="`${label} setup`">
+		<div class="flex items-center justify-between gap-3">
+			<h3 class="text-sm font-semibold">{{ label }}</h3>
+			<span class="flex items-center gap-1.5 text-xs text-muted-fg"><span class="size-1.5 rounded-full" :class="stream && !interrupted ? 'bg-success' : 'bg-muted-fg/40'" />{{ stream ? 'On' : 'Off' }}</span>
+		</div>
+		<div class="relative aspect-video overflow-hidden rounded-xl border border-border bg-secondary">
+			<video v-if="stream" ref="video" autoplay muted playsinline :aria-label="`${deviceLabel} local preview`" class="h-full w-full object-cover" :class="{ '-scale-x-100': mirror }" />
+			<div v-if="!stream || previewBlocked || interrupted" class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-secondary text-muted-fg">
+				<svg class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h12v14H3zM15 10l6-4v12l-6-4" /></svg>
+				<DomButton v-if="previewBlocked" variant="secondary" size="sm" @click="showPreview">Show camera preview</DomButton>
+				<p v-else class="text-sm">{{ pending ? 'Starting camera…' : interrupted ? 'Camera interrupted' : 'Your camera preview' }}</p>
+			</div>
+		</div>
+		<MediaDeviceSelect :devices="devices" :device-id="deviceId" :label="label" :disabled="pending" @select="select" @focusin="refresh" />
+		<p v-if="error" role="alert" class="text-sm leading-relaxed text-destructive">{{ error }}</p>
+		<div class="flex flex-wrap items-center justify-between gap-3">
+			<DomButton v-if="!stream && !pending" size="sm" @click="start()">{{ error ? 'Try camera again' : 'Enable camera' }}</DomButton>
+			<DomButton v-else variant="secondary" size="sm" @click="stop">{{ pending ? 'Cancel' : 'Stop camera' }}</DomButton>
+			<p role="status" class="text-xs text-muted-fg">{{ status }}</p>
+		</div>
+	</section>
+</template>

package/src/pages/components/command-palette/DomCommandPalette.vue

@@ -67,7 +67,16 @@ const filtered = computed(() => {
 		.map((result) => result.command);
 });
 
-watch(() => props.modelValue, async (open) => {
+watch(() => props.modelValue, syncPaletteOpenState);
+
+/**
+ * Synchronizes visibility and focus for an existing palette or an initially open
+ * palette mounted through an async component after the user requests it.
+ *
+ * @param {boolean} open Whether the palette should be visible.
+ * @returns {Promise<void>} Resolves after the panel is ready for focus.
+ */
+async function syncPaletteOpenState(open) {
 	if (!open) {
 		if (!isRendered.value) return;
 		isVisible.value = false;
@@ -85,7 +94,7 @@ watch(() => props.modelValue, async (open) => {
 		isVisible.value = true;
 		input.value?.focus();
 	});
-});
+}
 watch(query, resetActiveIndex);
 watch(filtered, syncActiveIndex);
 
@@ -112,6 +121,7 @@ function syncActiveIndex(items) {
 onMounted(() => {
 	teleportTarget.value = panel.value?.ownerDocument?.body || document.body;
 	isMounted.value = true;
+	if (props.modelValue) void syncPaletteOpenState(true);
 	window.addEventListener('keydown', onShortcut, { capture: true });
 	document.addEventListener('keydown', onShortcut, { capture: true });
 	window.addEventListener('keyup', onShortcutFallback, { capture: true });