@vibesdotdev/account 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/components/AccountAppearancePanel.svelte

@@ -0,0 +1,887 @@
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import * as Tabs from '@vibesdotdev/kit/components/ui/tabs';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Switch } from '@vibesdotdev/kit/components/ui/switch';
+	import { ToggleGroup, ToggleGroupItem } from '@vibesdotdev/kit/components/ui/toggle-group';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import {
+		generateThemeCSS,
+		parseThemeColors,
+		sanitizeInjectedCSS,
+		ThemeColorSelector
+	} from '@vibesdotdev/kit/components/theme';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { CaughtFailureSchema, settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import { browserDocument, browserWindow } from '../browser.js';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { failureLabel, logOn } from '../runtime-log.js';
+	import { invalidThemeColorsFailure } from '../theme-values.js';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import AccountThemePresetPicker from './AccountThemePresetPicker.svelte';
+	import type {
+		AccountThemePresetColors,
+		AccountThemePresetPickerPreset
+	} from '../theme-presets';
+	import {
+		applyAccountAppearanceToRoot,
+		createAccountAppearanceSettingsPatch,
+		type AccountAppearanceSettings
+	} from '../appearance';
+	import { persistSharedModePreference } from '@vibesdotdev/kit/components/ui/mode-switcher';
+	import { persistShellStylePreference } from '@vibesdotdev/kit/components/app-shell';
+	import {
+		DEFAULT_THEME_PRESET_ID,
+		persistThemePresetPreference
+	} from '@vibesdotdev/kit/components/theme';
+
+	// Captured at component init: Svelte context is unavailable after mount.
+	const runtimeStore = getRuntimeSvelteContext();
+
+	const DEFAULT_APPEARANCE: AccountAppearanceSettings = {
+		mode: 'system',
+		themePresetId: '',
+		density: 'comfortable',
+		shellStyle: 'suite',
+		sidebarCollapsed: false,
+		compactMode: false,
+		reduceMotion: false,
+		highContrast: false,
+		userType: 'simple',
+		themeColors: '',
+		customCss: ''
+	};
+
+	const modeOptions = [
+		{ value: 'system', label: 'System', icon: 'lucide:monitor' },
+		{ value: 'light', label: 'Light', icon: 'lucide:sun' },
+		{ value: 'dark', label: 'Dark', icon: 'lucide:moon' }
+	] as const;
+
+	const densityOptions = [
+		{ value: 'compact', label: 'Compact', icon: 'lucide:list' },
+		{ value: 'comfortable', label: 'Comfortable', icon: 'lucide:menu' },
+		{ value: 'spacious', label: 'Spacious', icon: 'lucide:layout-dashboard' }
+	] as const;
+
+	const shellStyleOptions = [
+		{
+			value: 'suite',
+			label: 'Suite',
+			description: 'See every vibes app at a glance.',
+			icon: 'lucide:panels-left-bottom'
+		},
+		{
+			value: 'focus',
+			label: 'Focus',
+			description: 'One app at a time, chrome out of the way.',
+			icon: 'lucide:panel-left'
+		},
+		{
+			value: 'canvas',
+			label: 'Canvas',
+			description: 'Maximum room for your work.',
+			icon: 'lucide:rectangle-horizontal'
+		}
+	] as const;
+
+	const behaviorOptions = [
+		{
+			key: 'sidebarCollapsed',
+			label: 'Collapse sidebars',
+			description: 'Open supported app sidebars in their compact state.',
+			icon: 'lucide:panel-left'
+		},
+		{
+			key: 'compactMode',
+			label: 'Compact mode',
+			description: 'Tighten navigation, menus, tables, and repeated rows.',
+			icon: 'lucide:minimize-2'
+		},
+		{
+			key: 'reduceMotion',
+			label: 'Reduce motion',
+			description: 'Prefer calmer transitions and effects across apps.',
+			icon: 'lucide:pause'
+		},
+		{
+			key: 'highContrast',
+			label: 'High contrast',
+			description: 'Increase contrast for controls, borders, and text.',
+			icon: 'lucide:eye'
+		}
+	] as const;
+
+	type BehaviorKey = (typeof behaviorOptions)[number]['key'];
+	type PreviewMode = 'light' | 'dark';
+	type PreviewClassName =
+		| 'dark'
+		| 'sidebar-collapsed'
+		| 'compact-mode'
+		| 'reduce-motion'
+		| 'high-contrast';
+
+	type RootAppearanceSnapshot = {
+		classValues: Record<PreviewClassName, boolean>;
+		colorScheme: string;
+		density?: string;
+		accountUserType?: string;
+		sidebarCollapsed?: string;
+	};
+
+	const PREVIEW_STYLE_ID = 'account-appearance-live-theme-preview';
+	const previewClassNames: PreviewClassName[] = [
+		'dark',
+		'sidebar-collapsed',
+		'compact-mode',
+		'reduce-motion',
+		'high-contrast'
+	];
+
+	type Props = {
+		value?: AccountAppearanceSettings | null;
+		themePresets?: AccountThemePresetPickerPreset[];
+		systemThemeColors?: AccountThemePresetColors | null;
+		themeCatalogLabel?: string | null;
+		showAdvancedTheme?: boolean;
+		disabled?: boolean;
+		submitLabel?: string;
+		onsave?: (appearance: AccountAppearanceSettings) => Promise<void>;
+		onsaved?: (appearance: AccountAppearanceSettings) => void;
+		/** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+		onerror?: (failure: CaughtFailure) => void;
+		class?: string;
+	};
+
+	let {
+		value = null,
+		themePresets,
+		systemThemeColors = null,
+		themeCatalogLabel = null,
+		showAdvancedTheme = false,
+		disabled = false,
+		submitLabel = 'Save appearance',
+		onsave,
+		onsaved,
+		onerror,
+		class: className = ''
+	}: Props = $props();
+	const panelId = $props.id();
+
+	const source = $derived(value ?? accountState.appearance);
+	const availablePresets: AccountThemePresetPickerPreset[] = $derived(
+		themePresets ?? accountState.themePresets
+	);
+	let working = $state<AccountAppearanceSettings>({ ...DEFAULT_APPEARANCE });
+	let lastSeedKey = $state('');
+	let lastSourceKey = $state('');
+	let dirty = $state(false);
+	let saving = $state(false);
+	let errorMessage = $state<string | null>(null);
+	let activeTab = $state('basics');
+	let systemMode = $state<PreviewMode>('light');
+	let rootAppearanceSnapshot: RootAppearanceSnapshot | null = null;
+	const selectedPreset = $derived(
+		working.themePresetId
+			? (availablePresets.find((preset) => preset.id === working.themePresetId) ?? null)
+			: null
+	);
+	const previewMode = $derived(working.mode === 'system' ? systemMode : working.mode);
+	const previewCatalogLabel = $derived(
+		themeCatalogLabel ?? (selectedPreset ? 'Approved theme' : 'System default')
+	);
+
+	function normalizeAppearance(
+		next: Partial<AccountAppearanceSettings> | null | undefined
+	): AccountAppearanceSettings {
+		return { ...DEFAULT_APPEARANCE, ...next };
+	}
+
+	$effect(() => {
+		const next = normalizeAppearance(source);
+		const seedKey = JSON.stringify(next);
+		if (seedKey === lastSourceKey || dirty) return;
+		working = next;
+		lastSeedKey = seedKey;
+		lastSourceKey = seedKey;
+	});
+
+	function update(patch: Partial<AccountAppearanceSettings>): void {
+		working = { ...working, ...patch };
+		dirty = true;
+	}
+
+	function setMode(next: string): void {
+		if (!next) {
+			working = { ...working };
+			return;
+		}
+		if (next === 'light' || next === 'dark' || next === 'system') {
+			update({ mode: next });
+		}
+	}
+
+	function setDensity(next: string): void {
+		if (!next) {
+			working = { ...working };
+			return;
+		}
+		if (next === 'compact' || next === 'comfortable' || next === 'spacious') {
+			update({ density: next });
+		}
+	}
+
+	function setShellStyle(next: string): void {
+		if (next === 'suite' || next === 'focus' || next === 'canvas') {
+			update({ shellStyle: next });
+		}
+	}
+
+	function setUserType(next: string): void {
+		if (next === 'simple' || next === 'creative' || next === 'power' || next === 'developer') {
+			update({ userType: next });
+		}
+	}
+
+	function setPreset(next: string): void {
+		update({ themePresetId: next });
+	}
+
+	function setBehavior(key: BehaviorKey, checked: boolean): void {
+		update(behaviorPatch(key, checked));
+	}
+
+	function behaviorPatch(key: BehaviorKey, checked: boolean): Partial<AccountAppearanceSettings> {
+		switch (key) {
+			case 'sidebarCollapsed':
+				return { sidebarCollapsed: checked };
+			case 'compactMode':
+				return { compactMode: checked };
+			case 'reduceMotion':
+				return { reduceMotion: checked };
+			case 'highContrast':
+				return { highContrast: checked };
+		}
+	}
+
+	function presetVariables(
+		preset: AccountThemePresetPickerPreset | null,
+		mode: 'light' | 'dark'
+	): string {
+		const palette = preset?.colors?.[mode] ?? (!preset ? systemThemeColors?.[mode] : undefined);
+		if (!palette) return '';
+		return Object.entries(palette)
+			.map(([key, value]) => `${key}: ${value};`)
+			.join(' ');
+	}
+
+	function swatchStyle(key: string): string {
+		const value =
+			selectedPreset?.colors?.[previewMode]?.[key] ?? systemThemeColors?.[previewMode]?.[key];
+		return value ? `background: ${value};` : `background: var(${key});`;
+	}
+
+	function interfaceLabel(value: string): string {
+		if (value === 'power') return 'Power user';
+		return value.charAt(0).toUpperCase() + value.slice(1);
+	}
+
+	function captureRootAppearance(root: HTMLElement): RootAppearanceSnapshot {
+		return {
+			classValues: {
+				dark: root.classList.contains('dark'),
+				'sidebar-collapsed': root.classList.contains('sidebar-collapsed'),
+				'compact-mode': root.classList.contains('compact-mode'),
+				'reduce-motion': root.classList.contains('reduce-motion'),
+				'high-contrast': root.classList.contains('high-contrast')
+			},
+			colorScheme: root.style.colorScheme,
+			density: root.dataset.density,
+			accountUserType: root.dataset.accountUserType,
+			sidebarCollapsed: root.dataset.sidebarCollapsed
+		};
+	}
+
+	function restoreDatasetValue(root: HTMLElement, key: string, value: string | undefined): void {
+		if (value === undefined) {
+			delete root.dataset[key];
+			return;
+		}
+		root.dataset[key] = value;
+	}
+
+	function restoreRootAppearance(root: HTMLElement, snapshot: RootAppearanceSnapshot): void {
+		for (const className of previewClassNames) {
+			root.classList.toggle(className, snapshot.classValues[className]);
+		}
+		root.style.colorScheme = snapshot.colorScheme;
+		restoreDatasetValue(root, 'density', snapshot.density);
+		restoreDatasetValue(root, 'accountUserType', snapshot.accountUserType);
+		restoreDatasetValue(root, 'sidebarCollapsed', snapshot.sidebarCollapsed);
+	}
+
+	function removePreviewStylesheet(): void {
+		browserDocument()?.getElementById(PREVIEW_STYLE_ID)?.remove();
+	}
+
+	function setPreviewStylesheet(preset: AccountThemePresetPickerPreset | null): void {
+		const page = browserDocument();
+		if (!page) return;
+		const colors = preset?.colors ?? systemThemeColors;
+		if (!colors) {
+			removePreviewStylesheet();
+			return;
+		}
+
+		const existing = page.getElementById(PREVIEW_STYLE_ID);
+		let style = existing instanceof HTMLStyleElement ? existing : null;
+		if (!style) {
+			style = page.createElement('style');
+			style.id = PREVIEW_STYLE_ID;
+			style.dataset.accountAppearancePreview = 'true';
+			page.head.appendChild(style);
+		}
+
+		style.textContent = sanitizeInjectedCSS(
+			generateThemeCSS(parseThemeColors(colors), preset?.customCss ?? '')
+		);
+	}
+
+	function resetWorking(): void {
+		const next = normalizeAppearance(source);
+		working = next;
+		dirty = false;
+		errorMessage = null;
+		lastSeedKey = JSON.stringify(next);
+	}
+
+	function applyPreview(): void {
+		const root = browserDocument()?.documentElement;
+		if (!root || !browserWindow()) return;
+		rootAppearanceSnapshot ??= captureRootAppearance(root);
+		applyAccountAppearanceToRoot(root, working, {
+			prefersDark: systemMode === 'dark'
+		});
+		setPreviewStylesheet(selectedPreset);
+	}
+
+	onMount(() => {
+		const media = window.matchMedia('(prefers-color-scheme: dark)');
+		const syncSystemMode = () => {
+			systemMode = media.matches ? 'dark' : 'light';
+		};
+		syncSystemMode();
+		media.addEventListener('change', syncSystemMode);
+
+		return () => {
+			media.removeEventListener('change', syncSystemMode);
+			removePreviewStylesheet();
+			if (dirty && rootAppearanceSnapshot) {
+				restoreRootAppearance(document.documentElement, rootAppearanceSnapshot);
+			}
+			rootAppearanceSnapshot = null;
+		};
+	});
+
+	$effect(() => {
+		applyPreview();
+	});
+
+	async function save(): Promise<void> {
+		if (saving || disabled) return;
+		saving = true;
+		errorMessage = null;
+		const saved = await settle(async () => {
+			const next = normalizeAppearance(working);
+			const invalidColors = invalidThemeColorsFailure(next.themeColors);
+			if (invalidColors) {
+				void logOn(runtimeStore, 'warn', 'account.appearance-panel', 'Color map is not valid JSON; ignoring it', { failure: failureLabel(invalidColors) });
+			}
+			if (onsave) {
+				await onsave(next);
+			} else {
+				await accountState.patchUserSettings(createAccountAppearanceSettingsPatch(next));
+			}
+			working = next;
+			applyPreview();
+			dirty = false;
+			lastSeedKey = JSON.stringify(next);
+			// Converge the client-side cookie mirrors with the saved settings so
+			// the shell's quick switchers (which read cookies first) agree with
+			// this panel on every device immediately, not just after a re-pick.
+			persistSharedModePreference(next.mode);
+			const shellStylePersisted = persistShellStylePreference(next.shellStyle);
+			if (!shellStylePersisted.ok) {
+				// The cookie is authoritative; a refused storage mirror is logged by class only.
+				void logOn(runtimeStore, 'warn', 'account.appearance-panel', 'Shell style storage mirror refused', {
+					failure: failureLabel(CaughtFailureSchema.parse(shellStylePersisted.error))
+				});
+			}
+			persistThemePresetPreference(next.themePresetId || DEFAULT_THEME_PRESET_ID);
+			onsaved?.(next);
+		});
+		if (!saved.ok) {
+			errorMessage = failureMessage(saved.cause, 'Failed to save appearance');
+			onerror?.(saved.cause);
+		}
+		saving = false;
+	}
+
+	function handleSubmit(event: SubmitEvent): void {
+		event.preventDefault();
+		void save();
+	}
+</script>
+
+<form class={`account-appearance-panel min-w-0 space-y-6 ${className}`} onsubmit={handleSubmit}>
+	<Tabs.Root bind:value={activeTab} class="space-y-5">
+		{#if showAdvancedTheme}
+			<Tabs.List class="grid w-full grid-cols-2">
+				<Tabs.Trigger value="basics">Basics</Tabs.Trigger>
+				<Tabs.Trigger value="theme">Theme editor</Tabs.Trigger>
+			</Tabs.List>
+		{/if}
+
+		<Tabs.Content value="basics" class="space-y-7">
+			<div class="appearance-basics-grid grid min-w-0 grid-cols-1 gap-8">
+				<div class="min-w-0 space-y-6">
+					<section class="space-y-3">
+						<div class="flex items-start gap-3">
+							<span class="rounded-md border bg-muted/40 p-2 text-muted-foreground">
+								<Icon icon="lucide:sun-moon" class="h-4 w-4" />
+							</span>
+							<div class="space-y-1">
+								<Label>Color mode</Label>
+								<p class="text-sm text-muted-foreground">
+									Choose light, dark, or follow your device's setting.
+								</p>
+							</div>
+						</div>
+
+						<ToggleGroup
+							type="single"
+							value={working.mode}
+							onValueChange={setMode}
+							disabled={disabled || saving}
+							class="grid w-full grid-cols-3 rounded-md border bg-muted/30 p-1"
+						>
+							{#each modeOptions as option (option.value)}
+								<ToggleGroupItem
+									value={option.value}
+									aria-label={`Use ${option.label} mode`}
+									class="h-9 gap-2 rounded-sm text-xs sm:text-sm"
+								>
+									<Icon icon={option.icon} class="h-4 w-4" />
+									<span>{option.label}</span>
+								</ToggleGroupItem>
+							{/each}
+						</ToggleGroup>
+					</section>
+
+					<section class="space-y-3">
+						<AccountThemePresetPicker
+							presets={availablePresets}
+							value={working.themePresetId}
+							persist={false}
+							disabled={disabled || saving || availablePresets.length === 0}
+							catalogLabel={themeCatalogLabel}
+							onChange={setPreset}
+						/>
+						{#if availablePresets.length === 0}
+							<p class="text-sm text-muted-foreground">No account theme presets are available.</p>
+						{/if}
+					</section>
+
+					<section class="space-y-3">
+						<div class="space-y-1">
+							<Label>Layout</Label>
+							<p class="text-sm text-muted-foreground">
+								Choose where navigation and tools appear around your work.
+							</p>
+						</div>
+
+						<ToggleGroup
+							type="single"
+							value={working.shellStyle}
+							onValueChange={setShellStyle}
+							disabled={disabled || saving}
+							class="grid w-full grid-cols-3 rounded-md border bg-muted/30 p-1"
+						>
+							{#each shellStyleOptions as option (option.value)}
+								<ToggleGroupItem
+									value={option.value}
+									aria-label={`Use the ${option.label} layout — ${option.description}`}
+									title={option.description}
+									class="h-9 gap-1.5 rounded-sm text-xs"
+								>
+									<Icon icon={option.icon} class="h-3.5 w-3.5" />
+									<span class="truncate">{option.label}</span>
+								</ToggleGroupItem>
+							{/each}
+						</ToggleGroup>
+					</section>
+
+					<section class="space-y-3">
+						<div class="space-y-1">
+							<Label>Density</Label>
+							<p class="text-sm text-muted-foreground">
+								Fit more on screen or give text and controls more room.
+							</p>
+						</div>
+
+						<ToggleGroup
+							type="single"
+							value={working.density}
+							onValueChange={setDensity}
+							disabled={disabled || saving}
+							class="grid w-full grid-cols-3 rounded-md border bg-muted/30 p-1"
+						>
+							{#each densityOptions as option (option.value)}
+								<ToggleGroupItem
+									value={option.value}
+									aria-label={`Use ${option.label} density`}
+									class="h-9 gap-1.5 rounded-sm text-xs"
+								>
+									<Icon icon={option.icon} class="h-3.5 w-3.5" />
+									<span class="truncate">{option.label}</span>
+								</ToggleGroupItem>
+							{/each}
+						</ToggleGroup>
+					</section>
+
+					<section class="space-y-2">
+						<Label for="account-appearance-user-type">Interface type</Label>
+						<Select.Root
+							type="single"
+							value={working.userType}
+							onValueChange={setUserType}
+							disabled={disabled || saving}
+						>
+							<Select.Trigger id="account-appearance-user-type">
+								<span>
+									{working.userType === 'power'
+										? 'Power user'
+										: working.userType.charAt(0).toUpperCase() + working.userType.slice(1)}
+								</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="simple">Simple</Select.Item>
+								<Select.Item value="creative">Creative</Select.Item>
+								<Select.Item value="power">Power user</Select.Item>
+								<Select.Item value="developer">Developer</Select.Item>
+							</Select.Content>
+						</Select.Root>
+						<p class="text-sm text-muted-foreground">
+							Choose Simple for fewer controls, Creative for media work, Power user for more tools,
+							or Developer for technical workflows. You can change this later.
+						</p>
+					</section>
+				</div>
+
+					<aside
+						aria-label="Live account app preview"
+						class="min-w-0 overflow-hidden rounded-lg border shadow-sm"
+						style={`${presetVariables(selectedPreset, previewMode)} background: var(--background); border-color: var(--border); color: var(--foreground);`}
+					>
+						<div
+							class="flex min-w-0 flex-wrap items-center justify-between gap-3 border-b px-4 py-3"
+							style="background: var(--card); border-color: var(--border); color: var(--card-foreground);"
+						>
+							<div class="min-w-0">
+								<p class="text-sm font-semibold">Live account preview</p>
+								<p class="truncate text-xs" style="color: var(--muted-foreground);">
+									{selectedPreset?.name ?? 'System default'} · {previewCatalogLabel}
+								</p>
+							</div>
+							<div class="flex min-w-0 shrink-0 flex-wrap items-center justify-end gap-1.5">
+								<Badge variant="outline" class="capitalize">{previewMode}</Badge>
+								<Badge variant="secondary" class="capitalize">{working.density}</Badge>
+							</div>
+						</div>
+
+						<div
+							class="appearance-preview-grid grid h-[33rem] min-h-0 grid-cols-[2.75rem_minmax(0,1fr)] overflow-hidden"
+							style="background: var(--background); color: var(--foreground);"
+						>
+							<div
+								class="flex flex-col items-center gap-3 border-r px-2 py-3"
+								style="background: var(--sidebar); border-color: var(--sidebar-border); color: var(--sidebar-foreground);"
+							>
+								<span
+									class="grid h-7 w-7 place-items-center rounded-md"
+									style="background: var(--sidebar-primary); color: var(--sidebar-primary-foreground);"
+								>
+									<Icon icon="lucide:sparkles" class="h-3.5 w-3.5" />
+								</span>
+								{#each ['lucide:layout-grid', 'lucide:user-round', 'lucide:palette', 'lucide:shield-check', 'lucide:building-2'] as icon}
+									<span
+										class="grid h-7 w-7 place-items-center rounded-md border"
+										style="background: var(--sidebar-accent); border-color: var(--sidebar-border); color: var(--sidebar-accent-foreground);"
+									>
+										<Icon {icon} class="h-3.5 w-3.5" />
+									</span>
+								{/each}
+							</div>
+
+							<div
+								class="appearance-preview-sidebar hidden min-w-0 flex-col border-r"
+								style="background: var(--sidebar); border-color: var(--sidebar-border); color: var(--sidebar-foreground);"
+							>
+								<div class="border-b px-3 py-3" style="border-color: var(--sidebar-border);">
+									<p class="truncate text-sm font-semibold">vibes.dev</p>
+									<p class="truncate text-[11px]" style="color: var(--muted-foreground);">
+										Account
+									</p>
+								</div>
+								<div
+									class={working.density === 'compact'
+										? 'space-y-1 p-2'
+										: working.density === 'spacious'
+											? 'space-y-3 p-4'
+											: 'space-y-2 p-3'}
+								>
+									{#each ['Overview', 'Profile', 'Appearance', 'Billing', 'Organization'] as item}
+										<div
+											class="flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-xs"
+											style={item === 'Appearance'
+												? 'background: var(--sidebar-accent); color: var(--sidebar-accent-foreground);'
+												: 'color: var(--sidebar-foreground);'}
+										>
+											<span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background: var(--primary);"></span>
+											<span class="truncate">{item}</span>
+										</div>
+									{/each}
+								</div>
+								<div class="mt-auto border-t p-3" style="border-color: var(--sidebar-border);">
+									<div
+										class="rounded-md border p-2"
+										style="background: var(--sidebar-accent); border-color: var(--sidebar-border);"
+									>
+										<p class="truncate text-xs font-medium">ai@vibes.dev</p>
+										<p class="truncate text-[11px]" style="color: var(--muted-foreground);">
+											{interfaceLabel(working.userType)}
+										</p>
+									</div>
+								</div>
+							</div>
+
+							<div class="col-span-1 flex min-w-0 flex-col sm:col-span-1">
+								<div
+									class="flex items-center justify-between gap-3 border-b px-4 py-3"
+									style="background: var(--card); border-color: var(--border); color: var(--card-foreground);"
+								>
+									<div class="min-w-0">
+										<p class="truncate text-xs" style="color: var(--muted-foreground);">
+											Account / Settings
+										</p>
+										<p class="truncate text-base font-semibold">Appearance</p>
+									</div>
+									<div class="flex items-center gap-2">
+										<span
+											class="hidden h-7 w-28 rounded-md border sm:block"
+											style="background: var(--muted); border-color: var(--border);"
+										></span>
+										<span
+											class="grid h-7 w-7 place-items-center rounded-full"
+											style="background: var(--primary); color: var(--primary-foreground);"
+										>
+											A
+										</span>
+									</div>
+								</div>
+
+								<div
+									class={working.density === 'compact'
+										? 'min-h-0 flex-1 space-y-3 overflow-hidden p-3'
+										: working.density === 'spacious'
+											? 'min-h-0 flex-1 space-y-5 overflow-hidden p-5'
+											: 'min-h-0 flex-1 space-y-4 overflow-hidden p-4'}
+								>
+									<div class="grid grid-cols-6 overflow-hidden rounded-md border" style="border-color: var(--border);">
+										{#each ['--background', '--sidebar', '--card', '--primary', '--accent', '--ring'] as key}
+											<span class="h-7" style={swatchStyle(key)}></span>
+										{/each}
+									</div>
+
+									<div class="grid gap-3 xl:grid-cols-[minmax(0,1fr)_9rem]">
+										<div
+											class="rounded-md border"
+											style="background: var(--card); border-color: var(--border); color: var(--card-foreground);"
+										>
+											<div
+												class="flex items-center justify-between gap-3 border-b px-3 py-2"
+												style="border-color: var(--border);"
+											>
+												<div class="min-w-0">
+													<p class="truncate text-sm font-semibold">Theme and density</p>
+													<p class="truncate text-xs" style="color: var(--muted-foreground);">
+														Account-owned runtime settings
+													</p>
+												</div>
+												<span class="h-2 w-14 rounded-full" style="background: var(--primary);"></span>
+											</div>
+											<div class="space-y-2 p-3">
+												<div
+													class="rounded-md border px-3 py-2 text-xs"
+													style="background: var(--background); border-color: var(--input);"
+												>
+													<div class="flex min-w-0 items-center justify-between gap-3">
+														<span class="shrink-0">Theme preset</span>
+														<span class="min-w-0 truncate text-right" style="color: var(--muted-foreground);">
+															{selectedPreset?.name ?? 'Default'}
+														</span>
+													</div>
+												</div>
+												<div
+													class="rounded-md border px-3 py-2 text-xs"
+													style="background: var(--background); border-color: var(--input);"
+												>
+													<div class="flex min-w-0 items-center justify-between gap-3">
+														<span class="shrink-0">Interface</span>
+														<span class="min-w-0 truncate text-right" style="color: var(--muted-foreground);">
+															{interfaceLabel(working.userType)}
+														</span>
+													</div>
+												</div>
+											</div>
+										</div>
+
+										<div
+											class="rounded-md border p-3"
+											style="background: var(--muted); border-color: var(--border); color: var(--foreground);"
+										>
+											<p class="truncate text-xs font-semibold">Runtime</p>
+											<p class="mt-1 text-[11px] leading-snug" style="color: var(--muted-foreground);">
+												mode, preset, density, user type
+											</p>
+											<div class="mt-3 h-2 rounded-full" style="background: var(--primary);"></div>
+											<div class="mt-2 h-2 w-2/3 rounded-full" style="background: var(--accent);"></div>
+										</div>
+									</div>
+
+									<div
+										class="rounded-md border"
+										style="background: var(--card); border-color: var(--border); color: var(--card-foreground);"
+									>
+										<div class="grid grid-cols-[minmax(0,1fr)_4.5rem_3.5rem] gap-2 border-b px-3 py-2 text-xs font-medium" style="border-color: var(--border);">
+											<span>Setting</span>
+											<span class="text-right">Status</span>
+											<span class="text-right">Sync</span>
+										</div>
+										{#each [['Appearance', 'Live', 'Now'], ['Security', 'Ready', 'Auth'], ['Billing', 'Synced', 'Stripe']] as row}
+											<div class="grid grid-cols-[minmax(0,1fr)_4.5rem_3.5rem] gap-2 px-3 py-2 text-xs">
+												<span class="truncate">{row[0]}</span>
+												<span class="truncate text-right" style="color: var(--muted-foreground);">{row[1]}</span>
+												<span class="truncate text-right" style="color: var(--muted-foreground);">{row[2]}</span>
+											</div>
+										{/each}
+									</div>
+								</div>
+							</div>
+						</div>
+					</aside>
+				</div>
+
+			<section class="space-y-3">
+				<div class="flex items-center gap-3">
+					<span class="rounded-md border bg-muted/40 p-2 text-muted-foreground">
+						<Icon icon="lucide:sliders-horizontal" class="h-4 w-4" />
+					</span>
+					<div class="space-y-1">
+						<Label>Behavior</Label>
+						<p class="text-sm text-muted-foreground">
+							Adjust navigation, motion, and contrast in apps that support these preferences.
+						</p>
+					</div>
+				</div>
+
+				<div class="divide-y rounded-md border">
+					{#each behaviorOptions as option (option.key)}
+						<div class="flex items-center justify-between gap-4 p-3">
+							<div class="flex min-w-0 items-start gap-3">
+								<Icon icon={option.icon} class="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+								<div class="min-w-0 space-y-0.5">
+									<Label for={`${panelId}-${option.key}`} class="text-sm font-medium">{option.label}</Label>
+									<p id={`${panelId}-${option.key}-description`} class="text-xs text-muted-foreground">
+										{option.description}
+									</p>
+								</div>
+							</div>
+							<Switch
+								id={`${panelId}-${option.key}`}
+								aria-describedby={`${panelId}-${option.key}-description`}
+								checked={Boolean(working[option.key])}
+								disabled={disabled || saving}
+								onCheckedChange={(checked) => setBehavior(option.key, Boolean(checked))}
+							/>
+						</div>
+					{/each}
+				</div>
+			</section>
+		</Tabs.Content>
+
+		{#if showAdvancedTheme}
+			<Tabs.Content value="theme" class="space-y-4">
+				<ThemeColorSelector
+					value={working.themeColors}
+					customCss={working.customCss}
+					onchange={(themeColors) => untrack(() => update({ themeColors }))}
+					onCustomCssChange={(customCss) => untrack(() => update({ customCss }))}
+				/>
+			</Tabs.Content>
+		{/if}
+	</Tabs.Root>
+
+	{#if errorMessage}
+		<div role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm">
+			{errorMessage}
+		</div>
+	{/if}
+
+	<div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+		<Button
+			type="button"
+			variant="outline"
+			disabled={disabled || saving || !dirty}
+			onclick={resetWorking}
+		>
+			Reset
+		</Button>
+		<Button type="submit" disabled={disabled || saving || !dirty} class="gap-1.5">
+			{#if saving}
+				<Icon icon="lucide:loader-circle" class="h-4 w-4 animate-spin" />
+			{/if}
+			{saving ? 'Saving...' : submitLabel}
+		</Button>
+	</div>
+</form>
+
+<style>
+	.account-appearance-panel {
+		container-type: inline-size;
+	}
+
+	@container (min-width: 64rem) {
+		.appearance-basics-grid {
+			grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 34rem);
+		}
+	}
+
+	/* The preview has its own available width inside the settings grid. */
+	aside[aria-label='Live account app preview'] {
+		container-type: inline-size;
+	}
+
+	@container (min-width: 32rem) {
+		.appearance-preview-grid {
+			grid-template-columns: 2.75rem minmax(8rem, 10rem) minmax(0, 1fr);
+		}
+		.appearance-preview-sidebar {
+			display: flex;
+		}
+	}
+</style>