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

package/dist/svelte/components/CreditsPurchaseDialog.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import {
+		Button,
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogFooter,
+		DialogHeader,
+		DialogTitle,
+		Icon
+	} from '@vibesdotdev/kit/components';
+	import CreditPurchase from './CreditPurchase.svelte';
+	import { getAllProducts } from '@vibesdotdev/account/billing/definitions/products';
+	import type { CreditsPurchaseDialogProps } from '../billing/schemas.js';
+
+	let {
+		open = $bindable(false),
+		products = getAllProducts().filter((p) => p.productType === 'credits'),
+		initialSelected = null,
+		onPurchase,
+		onClose = () => {}
+	}: CreditsPurchaseDialogProps = $props();
+
+	let selected = $state('');
+	let purchasing = $state(false);
+
+	function handleOpenChange(isOpen: boolean) {
+		if (!isOpen) {
+			selected = '';
+			purchasing = false;
+			onClose();
+		}
+	}
+
+	async function handlePurchase() {
+		if (!selected) return;
+		purchasing = true;
+		try {
+			onPurchase?.(selected);
+		} finally {
+			purchasing = false;
+		}
+	}
+
+	$effect(() => {
+		if (open && initialSelected) {
+			selected = initialSelected;
+		} else if (open && !selected) {
+			selected = products[0]?.slug ?? '';
+		}
+	});
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent
+		class="flex max-h-[min(680px,calc(100vh-2rem))] flex-col overflow-hidden sm:max-w-xl"
+		data-testid="credits-purchase-dialog"
+	>
+		<DialogHeader class="shrink-0">
+			<DialogTitle class="flex items-center gap-2">
+				<Icon icon="lucide:coins" class="size-5 text-amber-500" />
+				Buy Credits
+			</DialogTitle>
+			<DialogDescription>
+				Select a credit pack to add to your account.
+			</DialogDescription>
+		</DialogHeader>
+
+		<CreditPurchase {products} bind:selected class="min-h-0 flex-1 overflow-y-auto pr-1" />
+
+		<DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:justify-end">
+			<Button variant="ghost" class="w-full sm:w-auto" onclick={() => (open = false)}>
+				Cancel
+			</Button>
+			<Button
+				class="w-full sm:w-auto"
+				disabled={!selected || purchasing}
+				onclick={handlePurchase}
+			>
+				{#if purchasing}
+					Processing...
+				{:else}
+					Purchase
+				{/if}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

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

@@ -0,0 +1,5 @@
+import type { CreditsPurchaseDialogProps } from '../billing/schemas.ts';
+declare const CreditsPurchaseDialog: import("svelte").Component<CreditsPurchaseDialogProps, {}, "open">;
+type CreditsPurchaseDialog = ReturnType<typeof CreditsPurchaseDialog>;
+export default CreditsPurchaseDialog;
+//# sourceMappingURL=CreditsPurchaseDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsPurchaseDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CreditsPurchaseDialog.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAyExE,QAAA,MAAM,qBAAqB,oEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/OrgSelector.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { failureLabel, logOn } from '../runtime-log.js';
+
+	// Captured at component init: Svelte context is unavailable after mount.
+	const runtimeStore = getRuntimeSvelteContext();
+
+
+	/**
+	 * OrgSelector — picker bound to `accountState.organizations` /
+	 * `accountState.activeOrg`. Switches the active org via
+	 * `accountState.setActiveOrg(orgId)` on selection.
+	 *
+	 * Mirrors the visual shape of `apps/account-web/src/lib/components/selectors/OrgSelector.svelte`
+	 * so consumer apps get the same look without importing app-internal code.
+	 *
+	 * The picker emits `onswitch(orgId)` after a successful switch so callers
+	 * can invalidate their server load (`invalidateAll`) or navigate.
+	 */
+	type Props = {
+		name?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		/** When true, hide the "Personal" (null org) entry. */
+		required?: boolean;
+		class?: string;
+		/** Fired after a successful switch with the new org id (or `null` for personal). */
+		onswitch?: (orgId: string | null) => void;
+		/** Fired when the switch fails; receives the failure (the `Error` itself, or a wrapper holding the non-Error value that was thrown). */
+		onerror?: (failure: CaughtFailure) => void;
+	};
+
+	let {
+		name = 'organizationId',
+		placeholder = 'Select an organization',
+		disabled = false,
+		required = false,
+		class: className = '',
+		onswitch,
+		onerror
+	}: Props = $props();
+
+	const options = $derived(accountState.organizationOptions);
+	const activeId = $derived(accountState.currentOrgId ?? '');
+	const selectedLabel = $derived(
+		options.find((opt) => opt.id === activeId)?.name ?? placeholder
+	);
+
+	let switching = $state(false);
+
+	async function handleChange(next: string) {
+		if (switching) return;
+		const orgId = next === '' ? null : next;
+		if (orgId === accountState.currentOrgId) return;
+		switching = true;
+		const switched = await settle(async () => {
+			await accountState.setActiveOrg(orgId);
+			onswitch?.(orgId);
+		});
+		if (!switched.ok) {
+			onerror?.(switched.cause);
+			void logOn(runtimeStore, 'warn', 'account.org-selector', 'Switching the active organization failed', { failure: failureLabel(switched.cause) });
+		}
+		switching = false;
+	}
+</script>
+
+<input type="hidden" {name} value={activeId} />
+
+<Select.Root
+	type="single"
+	value={activeId}
+	onValueChange={handleChange}
+	disabled={disabled || switching}
+>
+	<Select.Trigger class={className}>
+		<span class={activeId ? '' : 'text-muted-foreground'}>{selectedLabel}</span>
+	</Select.Trigger>
+	<Select.Content>
+		{#if !required}
+			<Select.Item value="" label="Personal">Personal</Select.Item>
+		{/if}
+		{#each options as org (org.id)}
+			<Select.Item value={org.id} label={org.name}>
+				<span class="flex items-center gap-2">
+					<span>{org.name}</span>
+					{#if org.role}
+						<span class="text-muted-foreground text-xs">({org.role})</span>
+					{/if}
+				</span>
+			</Select.Item>
+		{/each}
+		{#if options.length === 0}
+			<div class="text-muted-foreground px-2 py-1.5 text-sm">No organizations available</div>
+		{/if}
+	</Select.Content>
+</Select.Root>

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

@@ -0,0 +1,28 @@
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+/**
+ * OrgSelector — picker bound to `accountState.organizations` /
+ * `accountState.activeOrg`. Switches the active org via
+ * `accountState.setActiveOrg(orgId)` on selection.
+ *
+ * Mirrors the visual shape of `apps/account-web/src/lib/components/selectors/OrgSelector.svelte`
+ * so consumer apps get the same look without importing app-internal code.
+ *
+ * The picker emits `onswitch(orgId)` after a successful switch so callers
+ * can invalidate their server load (`invalidateAll`) or navigate.
+ */
+type Props = {
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** When true, hide the "Personal" (null org) entry. */
+    required?: boolean;
+    class?: string;
+    /** Fired after a successful switch with the new org id (or `null` for personal). */
+    onswitch?: (orgId: string | null) => void;
+    /** Fired when the switch fails; receives the failure (the `Error` itself, or a wrapper holding the non-Error value that was thrown). */
+    onerror?: (failure: CaughtFailure) => void;
+};
+declare const OrgSelector: import("svelte").Component<Props, {}, "">;
+type OrgSelector = ReturnType<typeof OrgSelector>;
+export default OrgSelector;
+//# sourceMappingURL=OrgSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrgSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/OrgSelector.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOhE;;;;;;;;;;GAUG;AACH,KAAK,KAAK,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,wIAAwI;IACxI,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AA4EH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/OrgThemeSettings.svelte

@@ -0,0 +1,382 @@
+<script lang="ts">
+	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 * as Tabs from '@vibesdotdev/kit/components/ui/tabs';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { ThemeColorSelector } from '@vibesdotdev/kit/components/theme';
+	import type {
+		AccountOrgSettingsPatch,
+		AccountOrgSettingsResponse,
+		AccountThemePresetSummary
+	} from '@vibesdotdev/account/api';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	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 {
+		createAccountOrgThemeSettingsPatch,
+		refreshAccountOrgThemeStylesheets,
+		type AccountOrgThemeSettings
+	} from '../org-theme';
+
+	const SYSTEM_PRESET_VALUE = '__system_default__';
+	const DEFAULT_ORG_THEME: AccountOrgThemeSettings = {
+		themePresetId: '',
+		themeColors: '',
+		customCss: '',
+		brandingName: '',
+		brandingLogoHorizontal: '',
+		brandingLogoSquare: '',
+		brandingMarkType: 'logo',
+		brandingMarkLetter: '',
+		brandingCircleBg: '',
+		brandingCircleFg: '',
+		brandingHideWordmark: false
+	};
+
+	type SaveResult = AccountOrgSettingsResponse | void;
+
+	type Props = {
+		orgId?: string | null;
+		orgName?: string | null;
+		value?: AccountOrgThemeSettings | null;
+		themePresets?: AccountThemePresetSummary[];
+		showAdvancedTheme?: boolean;
+		disabled?: boolean;
+		submitLabel?: string;
+		onsave?: (
+			settings: AccountOrgThemeSettings,
+			patch: AccountOrgSettingsPatch
+		) => Promise<SaveResult>;
+		onsaved?: (settings: AccountOrgThemeSettings, result: SaveResult) => 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 {
+		orgId = null,
+		orgName = null,
+		value = null,
+		themePresets,
+		showAdvancedTheme = true,
+		disabled = false,
+		submitLabel = 'Save organization theme',
+		onsave,
+		onsaved,
+		onerror,
+		class: className = ''
+	}: Props = $props();
+
+	let working = $state<AccountOrgThemeSettings>({ ...DEFAULT_ORG_THEME });
+	let lastSeedKey = $state('');
+	let dirty = $state(false);
+	let saving = $state(false);
+	let errorMessage = $state<string | null>(null);
+	let activeTab = $state('branding');
+
+	const source = $derived(value ?? DEFAULT_ORG_THEME);
+	const availablePresets = $derived(themePresets ?? accountState.themePresets);
+	const selectedPresetValue = $derived(working.themePresetId || SYSTEM_PRESET_VALUE);
+	const selectedPresetLabel = $derived(
+		working.themePresetId
+			? (availablePresets.find((preset) => preset.id === working.themePresetId)?.name ??
+					'Custom preset')
+			: 'System default'
+	);
+
+	$effect(() => {
+		const seedKey = JSON.stringify(source);
+		if (!dirty && seedKey !== lastSeedKey) {
+			working = { ...source };
+			lastSeedKey = seedKey;
+		}
+	});
+
+	function update(patch: Partial<AccountOrgThemeSettings>): void {
+		working = { ...working, ...patch };
+		dirty = true;
+	}
+
+	function setPreset(next: string): void {
+		update({ themePresetId: next === SYSTEM_PRESET_VALUE ? '' : next });
+	}
+
+	function resetWorking(): void {
+		working = { ...source };
+		dirty = false;
+		errorMessage = null;
+		lastSeedKey = JSON.stringify(source);
+	}
+
+	// Captured at component init: Svelte context is unavailable after mount.
+	const runtimeStore = getRuntimeSvelteContext();
+
+	async function save(): Promise<void> {
+		if (saving || disabled) return;
+		saving = true;
+		errorMessage = null;
+		const saved = await settle(async () => {
+			const invalidColors = invalidThemeColorsFailure(working.themeColors);
+			if (invalidColors) {
+				void logOn(runtimeStore, 'warn', 'account.org-theme', 'Color map is not valid JSON; ignoring it', { failure: failureLabel(invalidColors) });
+			}
+			const patch = createAccountOrgThemeSettingsPatch(working);
+			const result = onsave
+				? await onsave(working, patch)
+				: await saveThroughAccountClient(patch);
+			if (orgId) {
+				refreshAccountOrgThemeStylesheets(orgId);
+			}
+			dirty = false;
+			lastSeedKey = JSON.stringify(working);
+			onsaved?.(working, result);
+		});
+		if (!saved.ok) {
+			errorMessage = failureMessage(saved.cause, 'Failed to update organization theme');
+			onerror?.(saved.cause);
+		}
+		saving = false;
+	}
+
+	async function saveThroughAccountClient(
+		patch: AccountOrgSettingsPatch
+	): Promise<AccountOrgSettingsResponse> {
+		if (!orgId) {
+			throw new Error('Organization id is required to save organization theme settings.');
+		}
+		return await accountState.patchOrgSettings(orgId, patch);
+	}
+</script>
+
+<div class={`org-theme-settings space-y-5 rounded-lg border p-5 ${className}`}>
+	<div class="space-y-1">
+		<h2 class="text-base font-semibold">Organization Branding & Theme</h2>
+		<p class="text-sm text-muted-foreground">
+			Configure brand identity, marks, and theme styling for {orgName ?? 'this organization'}.
+		</p>
+	</div>
+
+	<Tabs.Root bind:value={activeTab} class="space-y-4">
+		<Tabs.List class="grid w-full grid-cols-3">
+			<Tabs.Trigger value="branding">Brand Identity</Tabs.Trigger>
+			<Tabs.Trigger value="preset">Base Theme</Tabs.Trigger>
+			<Tabs.Trigger value="theme">Custom & AI</Tabs.Trigger>
+		</Tabs.List>
+
+		<!-- Brand Identity Tab -->
+		<Tabs.Content value="branding" class="space-y-4">
+			<div class="grid gap-4 sm:grid-cols-2">
+				<div class="space-y-2">
+					<Label for="org-brand-name">Brand Display Name</Label>
+					<Input
+						id="org-brand-name"
+						placeholder={orgName ?? 'Organization name'}
+						value={working.brandingName ?? ''}
+						oninput={(e) => update({ brandingName: e.currentTarget.value })}
+					/>
+					<p class="text-xs text-muted-foreground">Primary display name shown in headers and app shells.</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="org-mark-type">Primary Mark Type</Label>
+					<Select.Root
+						type="single"
+						value={working.brandingMarkType ?? 'logo'}
+						onValueChange={(val: string) => update({ brandingMarkType: val as 'logo' | 'letter' | 'icon' })}
+					>
+						<Select.Trigger id="org-mark-type" class="w-full">
+							<span>{working.brandingMarkType === 'letter' ? 'Letter Mark (e.g. M)' : 'Logo Image'}</span>
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="logo">Logo Image</Select.Item>
+							<Select.Item value="letter">Letter Mark (Badge)</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					<p class="text-xs text-muted-foreground">Choose whether to display an image logo or letter icon.</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="org-brand-logo-horizontal">Horizontal Logo URL</Label>
+					<Input
+						id="org-brand-logo-horizontal"
+						placeholder="https://example.com/logo-horizontal.png"
+						value={working.brandingLogoHorizontal ?? ''}
+						oninput={(e) => update({ brandingLogoHorizontal: e.currentTarget.value })}
+					/>
+					<p class="text-xs text-muted-foreground">Wide format logo for expanded sidebar and desktop banners.</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="org-brand-logo-square">Square Icon URL</Label>
+					<Input
+						id="org-brand-logo-square"
+						placeholder="https://example.com/logo-square.png"
+						value={working.brandingLogoSquare ?? ''}
+						oninput={(e) => update({ brandingLogoSquare: e.currentTarget.value })}
+					/>
+					<p class="text-xs text-muted-foreground">Square favicon / icon for compact rails and mobile headers.</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="org-brand-letter">Letter Mark</Label>
+					<Input
+						id="org-brand-letter"
+						placeholder="M"
+						maxlength={4}
+						value={working.brandingMarkLetter ?? ''}
+						oninput={(e) => update({ brandingMarkLetter: e.currentTarget.value.toUpperCase() })}
+					/>
+					<p class="text-xs text-muted-foreground">1-2 character letter mark for compact circular avatars (e.g. "W" for Walnut).</p>
+				</div>
+
+				<div class="grid grid-cols-2 gap-2">
+					<div class="space-y-2">
+						<Label for="org-circle-bg">Circle BG Color</Label>
+						<div class="flex items-center gap-2">
+							<input
+								type="color"
+								id="org-circle-bg-picker"
+								class="h-9 w-9 cursor-pointer rounded border p-0.5"
+								value={working.brandingCircleBg || '#92400e'}
+								oninput={(e) => update({ brandingCircleBg: e.currentTarget.value })}
+							/>
+							<Input
+								id="org-circle-bg"
+								placeholder="#92400e"
+								class="font-mono text-xs"
+								value={working.brandingCircleBg ?? ''}
+								oninput={(e) => update({ brandingCircleBg: e.currentTarget.value })}
+							/>
+						</div>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="org-circle-fg">Circle Text Color</Label>
+						<div class="flex items-center gap-2">
+							<input
+								type="color"
+								id="org-circle-fg-picker"
+								class="h-9 w-9 cursor-pointer rounded border p-0.5"
+								value={working.brandingCircleFg || '#ffffff'}
+								oninput={(e) => update({ brandingCircleFg: e.currentTarget.value })}
+							/>
+							<Input
+								id="org-circle-fg"
+								placeholder="#ffffff"
+								class="font-mono text-xs"
+								value={working.brandingCircleFg ?? ''}
+								oninput={(e) => update({ brandingCircleFg: e.currentTarget.value })}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Live Brand Mark Preview -->
+			<div class="rounded-md border bg-muted/20 p-4">
+				<h4 class="mb-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+					Live Brand Mark Preview
+				</h4>
+				<div class="flex flex-wrap items-center gap-6">
+					<!-- Collapsed Rail View -->
+					<div class="flex flex-col items-center gap-1.5">
+						<span class="text-[10px] text-muted-foreground">Collapsed Rail</span>
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full font-bold shadow-xs transition-transform"
+							style="background-color: {working.brandingCircleBg || '#92400e'}; color: {working.brandingCircleFg || '#ffffff'};"
+						>
+							{#if working.brandingMarkLetter}
+								<span class="text-base">{working.brandingMarkLetter}</span>
+							{:else if working.brandingLogoSquare}
+								<img src={working.brandingLogoSquare} alt="Icon" class="h-6 w-6 object-contain rounded-full" />
+							{:else}
+								<span class="text-base font-bold">{(orgName || 'V').charAt(0).toUpperCase()}</span>
+							{/if}
+						</div>
+					</div>
+
+					<!-- Expanded Sidebar Header View -->
+					<div class="flex flex-col items-start gap-1.5">
+						<span class="text-[10px] text-muted-foreground">Expanded Header</span>
+						<div class="flex items-center gap-3 rounded-md border bg-card px-3 py-2 shadow-xs">
+							<div
+								class="flex h-8 w-8 items-center justify-center rounded-full font-bold shadow-xs"
+								style="background-color: {working.brandingCircleBg || '#92400e'}; color: {working.brandingCircleFg || '#ffffff'};"
+							>
+								{#if working.brandingMarkLetter}
+									<span class="text-sm">{working.brandingMarkLetter}</span>
+								{:else}
+									<span class="text-sm">{(orgName || 'V').charAt(0).toUpperCase()}</span>
+								{/if}
+							</div>
+							<div>
+								<p class="text-xs font-semibold leading-tight">{working.brandingName || orgName || 'Organization'}</p>
+								<p class="text-[10px] text-muted-foreground leading-tight">Workspace Suite</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Tabs.Content>
+
+		<!-- Base Theme Preset Tab -->
+		<Tabs.Content value="preset" class="space-y-3">
+			<div class="space-y-2">
+				<Label for="org-theme-settings-preset">Base Theme Preset</Label>
+				<Select.Root
+					type="single"
+					value={selectedPresetValue}
+					onValueChange={setPreset}
+					disabled={disabled || saving || availablePresets.length === 0}
+				>
+					<Select.Trigger id="org-theme-settings-preset" class="w-full">
+						<span>{selectedPresetLabel}</span>
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value={SYSTEM_PRESET_VALUE}>System default</Select.Item>
+						{#each availablePresets as preset}
+							<Select.Item value={preset.id}>{preset.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+				<p class="text-xs text-muted-foreground">
+					Select from clean, professional, or nostalgic presets (including Walnut, Nordic Frost, Corpo Vibes, Synthwave).
+				</p>
+			</div>
+		</Tabs.Content>
+
+		<!-- Custom & AI Studio Tab -->
+		<Tabs.Content value="theme" class="space-y-4">
+			<ThemeColorSelector
+				value={working.themeColors}
+				customCss={working.customCss}
+				onchange={(themeColors) => update({ themeColors })}
+				onCustomCssChange={(customCss) => update({ customCss })}
+			/>
+		</Tabs.Content>
+	</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="button" disabled={disabled || saving || !dirty} onclick={save} class="gap-1.5">
+			{#if saving}
+				<Icon icon="lucide:loader-circle" class="h-4 w-4 animate-spin" />
+			{/if}
+			{saving ? 'Saving...' : submitLabel}
+		</Button>
+	</div>
+</div>

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

@@ -0,0 +1,22 @@
+import type { AccountOrgSettingsPatch, AccountOrgSettingsResponse, AccountThemePresetSummary } from '@vibesdotdev/account/api';
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import { type AccountOrgThemeSettings } from '../org-theme';
+type SaveResult = AccountOrgSettingsResponse | void;
+type Props = {
+    orgId?: string | null;
+    orgName?: string | null;
+    value?: AccountOrgThemeSettings | null;
+    themePresets?: AccountThemePresetSummary[];
+    showAdvancedTheme?: boolean;
+    disabled?: boolean;
+    submitLabel?: string;
+    onsave?: (settings: AccountOrgThemeSettings, patch: AccountOrgSettingsPatch) => Promise<SaveResult>;
+    onsaved?: (settings: AccountOrgThemeSettings, result: SaveResult) => void;
+    /** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+    onerror?: (failure: CaughtFailure) => void;
+    class?: string;
+};
+declare const OrgThemeSettings: import("svelte").Component<Props, {}, "">;
+type OrgThemeSettings = ReturnType<typeof OrgThemeSettings>;
+export default OrgThemeSettings;
+//# sourceMappingURL=OrgThemeSettings.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrgThemeSettings.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/OrgThemeSettings.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,MAAM,0BAA0B,CAAC;AAEnC,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKjE,OAAO,EAGL,KAAK,uBAAuB,EAC5B,MAAM,cAAc,CAAC;AAGtB,KAAK,UAAU,GAAG,0BAA0B,GAAG,IAAI,CAAC;AAEpD,KAAK,KAAK,GAAG;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,yBAAyB,EAAE,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CACR,QAAQ,EAAE,uBAAuB,EACjC,KAAK,EAAE,uBAAuB,KAC1B,OAAO,CAAC,UAAU,CAAC,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,uBAAuB,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1E,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAuSH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}