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

package/dist/svelte/components/SettingsForm.svelte

@@ -0,0 +1,288 @@
+<script lang="ts">
+	import { settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import { failureMessage, type AccountPreferences } from '@vibesdotdev/account/api';
+	import {
+		createAccountPreferencesSettingsPatch,
+		deriveAccountPreferences,
+		type AccountPreferenceField
+	} from '../appearance.js';
+
+	/**
+	 * SettingsForm — minimal form that edits the documented keys on
+	 * `AccountPreferences` (theme, themePresetId, userType, displayDensity,
+	 * sidebarCollapsed, compactMode, reduceMotion, highContrast) and persists
+	 * them through canonical account dot-key settings.
+	 *
+	 * This is a lightweight inline preference editor. Manifest-driven account
+	 * settings pages should use `AccountSettingsForm`, which owns the reusable
+	 * VibesKit config-manifest renderer.
+	 */
+	type Props = {
+		/** Which preference keys to render. Defaults to all documented keys. */
+		fields?: AccountPreferenceField[];
+		/** Disable the form. */
+		disabled?: boolean;
+		/** Custom submit button label. */
+		submitLabel?: string;
+		/** Fired after a successful save with the new preferences payload. */
+		onsaved?: (preferences: AccountPreferences) => void;
+		/** Fired when the save fails. */
+		onerror?: (failure: CaughtFailure) => void;
+		class?: string;
+	};
+
+	const DEFAULT_FIELDS: AccountPreferenceField[] = [
+		'theme',
+		'userType',
+		'displayDensity',
+		'sidebarCollapsed',
+		'compactMode',
+		'reduceMotion',
+		'highContrast'
+	];
+
+	let {
+		fields = DEFAULT_FIELDS,
+		disabled = false,
+		submitLabel = 'Save',
+		onsaved,
+		onerror,
+		class: className = ''
+	}: Props = $props();
+
+	// Local working copy. Reset whenever canonical settings or compatibility preferences change.
+	let working = $state<Partial<AccountPreferences>>({
+		...deriveAccountPreferences(accountState.resolvedSettings, accountState.preferences)
+	});
+	let lastSeedKey = $state('');
+
+	$effect(() => {
+		const next = deriveAccountPreferences(accountState.resolvedSettings, accountState.preferences);
+		const nextKey = JSON.stringify(next) ?? '';
+		if (nextKey !== lastSeedKey) {
+			lastSeedKey = nextKey;
+			working = { ...next };
+		}
+	});
+
+	let saving = $state(false);
+	let errorMessage = $state<string | null>(null);
+
+	function setField<K extends keyof AccountPreferences>(key: K, value: AccountPreferences[K]) {
+		working = { ...working, [key]: value };
+	}
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (saving) return;
+		saving = true;
+		errorMessage = null;
+		const updated = await settle(async () => {
+			// Only send keys the user selected to render.
+			const patch = buildSelectedPreferencesPatch(working, fields);
+			const record = await accountState.patchUserSettings(
+				createAccountPreferencesSettingsPatch(patch, fields)
+			);
+			const next =
+				deriveAccountPreferences(accountState.resolvedSettings ?? record.settings, accountState.preferences) ??
+				{};
+			onsaved?.(next);
+		});
+		if (!updated.ok) {
+			errorMessage = failureMessage(updated.cause, 'Failed to update settings');
+			onerror?.(updated.cause);
+		}
+		saving = false;
+	}
+
+	function buildSelectedPreferencesPatch(
+		source: Partial<AccountPreferences>,
+		selectedFields: readonly AccountPreferenceField[]
+	): Partial<AccountPreferences> {
+		const patch: Partial<AccountPreferences> = {};
+		for (const key of selectedFields) {
+			switch (key) {
+				case 'theme':
+					if (source.theme !== undefined) patch.theme = source.theme;
+					break;
+				case 'themePresetId':
+					if (source.themePresetId !== undefined) patch.themePresetId = source.themePresetId;
+					break;
+				case 'userType':
+					if (source.userType !== undefined) patch.userType = source.userType;
+					break;
+				case 'displayDensity':
+					if (source.displayDensity !== undefined) patch.displayDensity = source.displayDensity;
+					break;
+				case 'sidebarCollapsed':
+					if (source.sidebarCollapsed !== undefined) patch.sidebarCollapsed = source.sidebarCollapsed;
+					break;
+				case 'compactMode':
+					if (source.compactMode !== undefined) patch.compactMode = source.compactMode;
+					break;
+				case 'reduceMotion':
+					if (source.reduceMotion !== undefined) patch.reduceMotion = source.reduceMotion;
+					break;
+				case 'highContrast':
+					if (source.highContrast !== undefined) patch.highContrast = source.highContrast;
+					break;
+			}
+		}
+		return patch;
+	}
+
+	const themeOptions = [
+		{ value: 'light', label: 'Light' },
+		{ value: 'dark', label: 'Dark' },
+		{ value: 'system', label: 'System' }
+	];
+	const userTypeOptions = [
+		{ value: 'simple', label: 'Simple' },
+		{ value: 'creative', label: 'Creative' },
+		{ value: 'developer', label: 'Developer' },
+		{ value: 'power', label: 'Power User' }
+	];
+	const densityOptions = [
+		{ value: 'compact', label: 'Compact' },
+		{ value: 'comfortable', label: 'Comfortable' },
+		{ value: 'spacious', label: 'Spacious' }
+	];
+
+	function labelFor(field: AccountPreferenceField): string {
+		switch (field) {
+			case 'theme':
+				return 'Color mode';
+			case 'themePresetId':
+				return 'Theme preset';
+			case 'userType':
+				return 'Interface type';
+			case 'displayDensity':
+				return 'Density';
+			case 'sidebarCollapsed':
+				return 'Collapse sidebars';
+			case 'compactMode':
+				return 'Compact mode';
+			case 'reduceMotion':
+				return 'Reduce motion';
+			case 'highContrast':
+				return 'High contrast';
+			default:
+				return String(field);
+		}
+	}
+</script>
+
+<form onsubmit={handleSubmit} class={`account-settings-form flex flex-col gap-4 ${className}`}>
+	{#each fields as field (field)}
+		<div class="grid gap-1.5">
+			<label for={`account-settings-${String(field)}`} class="text-sm font-medium">
+				{labelFor(field)}
+			</label>
+
+			{#if field === 'theme'}
+				<Select.Root
+					type="single"
+					value={(working.theme ?? 'system') as string}
+					onValueChange={(v: string) => setField('theme', v as AccountPreferences['theme'])}
+					disabled={disabled || saving}
+				>
+					<Select.Trigger id={`account-settings-${String(field)}`}>
+						<span>{themeOptions.find((o) => o.value === (working.theme ?? 'system'))?.label}</span>
+					</Select.Trigger>
+					<Select.Content>
+						{#each themeOptions as opt (opt.value)}
+							<Select.Item value={opt.value} label={opt.label}>{opt.label}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{:else if field === 'userType'}
+				<Select.Root
+					type="single"
+					value={(working.userType ?? 'simple') as string}
+					onValueChange={(v: string) => setField('userType', v as AccountPreferences['userType'])}
+					disabled={disabled || saving}
+				>
+					<Select.Trigger id={`account-settings-${String(field)}`}>
+						<span
+							>{userTypeOptions.find((o) => o.value === (working.userType ?? 'simple'))
+								?.label}</span
+						>
+					</Select.Trigger>
+					<Select.Content>
+						{#each userTypeOptions as opt (opt.value)}
+							<Select.Item value={opt.value} label={opt.label}>{opt.label}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{:else if field === 'displayDensity'}
+				<Select.Root
+					type="single"
+					value={(working.displayDensity ?? 'comfortable') as string}
+					onValueChange={(v: string) =>
+						setField('displayDensity', v as AccountPreferences['displayDensity'])}
+					disabled={disabled || saving}
+				>
+					<Select.Trigger id={`account-settings-${String(field)}`}>
+						<span
+							>{densityOptions.find(
+								(o) => o.value === (working.displayDensity ?? 'comfortable')
+							)?.label}</span
+						>
+					</Select.Trigger>
+					<Select.Content>
+						{#each densityOptions as opt (opt.value)}
+							<Select.Item value={opt.value} label={opt.label}>{opt.label}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{:else if field === 'themePresetId'}
+				<Input
+					id={`account-settings-${String(field)}`}
+					type="text"
+					value={(working.themePresetId ?? '') as string}
+					oninput={(e) => setField('themePresetId', (e.currentTarget as HTMLInputElement).value)}
+					disabled={disabled || saving}
+					class="h-9"
+				/>
+			{:else if field === 'sidebarCollapsed' || field === 'compactMode' || field === 'reduceMotion' || field === 'highContrast'}
+				<label class="inline-flex items-center gap-2 text-sm">
+					<input
+						id={`account-settings-${String(field)}`}
+						type="checkbox"
+						checked={Boolean(working[field])}
+						onchange={(e) =>
+							setField(field, (e.currentTarget as HTMLInputElement).checked)}
+						disabled={disabled || saving}
+					/>
+					Enable
+				</label>
+			{:else}
+				<Input
+					id={`account-settings-${String(field)}`}
+					type="text"
+					value={(working[field] ?? '') as string}
+					oninput={(e) => setField(field, (e.currentTarget as HTMLInputElement).value)}
+					disabled={disabled || saving}
+					class="h-9"
+				/>
+			{/if}
+		</div>
+	{/each}
+
+	{#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 justify-end">
+		<Button type="submit" disabled={disabled || saving}>
+			{saving ? 'Saving…' : submitLabel}
+		</Button>
+	</div>
+</form>

package/dist/svelte/components/SettingsForm.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import { type AccountPreferences } from '@vibesdotdev/account/api';
+import { type AccountPreferenceField } from '../appearance.ts';
+/**
+ * SettingsForm — minimal form that edits the documented keys on
+ * `AccountPreferences` (theme, themePresetId, userType, displayDensity,
+ * sidebarCollapsed, compactMode, reduceMotion, highContrast) and persists
+ * them through canonical account dot-key settings.
+ *
+ * This is a lightweight inline preference editor. Manifest-driven account
+ * settings pages should use `AccountSettingsForm`, which owns the reusable
+ * VibesKit config-manifest renderer.
+ */
+type Props = {
+    /** Which preference keys to render. Defaults to all documented keys. */
+    fields?: AccountPreferenceField[];
+    /** Disable the form. */
+    disabled?: boolean;
+    /** Custom submit button label. */
+    submitLabel?: string;
+    /** Fired after a successful save with the new preferences payload. */
+    onsaved?: (preferences: AccountPreferences) => void;
+    /** Fired when the save fails. */
+    onerror?: (failure: CaughtFailure) => void;
+    class?: string;
+};
+declare const SettingsForm: import("svelte").Component<Props, {}, "">;
+type SettingsForm = ReturnType<typeof SettingsForm>;
+export default SettingsForm;
+//# sourceMappingURL=SettingsForm.svelte.d.ts.map

package/dist/svelte/components/SettingsForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SettingsForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKjE,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAGL,KAAK,sBAAsB,EAC3B,MAAM,kBAAkB,CAAC;AAG1B;;;;;;;;;GASG;AACH,KAAK,KAAK,GAAG;IACZ,wEAAwE;IACxE,MAAM,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAClC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,CAAC,WAAW,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAkOH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}