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

package/dist/svelte/components/AccountSettingsSection.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import AccountSettingsForm from './AccountSettingsForm.svelte';
+	import type { AccountSettingsFormProps } from '../manifest-form.js';
+	import type { SettingsValues } from '../json.js';
+	import {
+		deriveAccountSettingsSectionInitialValues,
+		getAccountSettingsSectionDefinition,
+		type AccountSettingsSectionDefinition,
+		type AccountSettingsSectionId
+	} from '../settings-sections.js';
+
+	type Props = Omit<AccountSettingsFormProps, 'manifest' | 'initialValues' | 'toPatch'> & {
+		section: AccountSettingsSectionId;
+		definition?: AccountSettingsSectionDefinition;
+		settings?: SettingsValues | null;
+		value?: SettingsValues | null;
+		initialValues?: SettingsValues | null;
+	};
+
+	let {
+		section,
+		definition,
+		settings = null,
+		value = null,
+		initialValues = null,
+		onsave,
+		onsaved,
+		onerror,
+		submitLabel,
+		cardLayout = true,
+		showHeader = true,
+		disabled = false,
+		actions,
+		class: className = ''
+	}: Props = $props();
+
+	const selectedDefinition = $derived(definition ?? getAccountSettingsSectionDefinition(section));
+	const settingsSource = $derived(
+		settings ?? accountState.resolvedSettings ?? accountState.userSettings?.settings ?? null
+	);
+	const effectiveInitialValues = $derived(
+		deriveAccountSettingsSectionInitialValues(selectedDefinition, settingsSource, {
+			...initialValues,
+			...value
+		})
+	);
+	const effectiveSubmitLabel = $derived(
+		submitLabel ?? selectedDefinition.submitLabel ?? 'Save'
+	);
+	const guidance = $derived(selectedDefinition.guidance ?? null);
+</script>
+
+<div class={`space-y-4 ${className}`}>
+	{#if guidance}
+		<section class="rounded-md border bg-muted/30 p-4" aria-label="Settings impact">
+			<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+				<div class="min-w-0 flex-1 space-y-3">
+					<div class="flex items-start gap-3">
+						<span class="mt-0.5 rounded-md border bg-background p-2 text-muted-foreground" aria-hidden="true">
+							<Icon icon="lucide:route" class="h-4 w-4" />
+						</span>
+						<div class="min-w-0">
+							<p class="text-sm font-medium">Account runtime setting</p>
+							<p class="mt-1 text-sm text-muted-foreground">{guidance.summary}</p>
+						</div>
+					</div>
+					<div class="flex flex-wrap gap-2 pl-11">
+						{#each guidance.appliesTo as target (target)}
+							<Badge variant="secondary" class="font-normal">{target}</Badge>
+						{/each}
+					</div>
+				</div>
+				<div class="grid gap-3 text-sm lg:w-80">
+					<div>
+						<p class="font-medium">Default behavior</p>
+						<p class="mt-1 text-muted-foreground">{guidance.defaultBehavior}</p>
+					</div>
+				</div>
+			</div>
+		</section>
+	{/if}
+
+	<AccountSettingsForm
+		manifest={selectedDefinition.manifest}
+		initialValues={effectiveInitialValues}
+		toPatch={selectedDefinition.toPatch}
+		{onsave}
+		{onsaved}
+		{onerror}
+		submitLabel={effectiveSubmitLabel}
+		{cardLayout}
+		{showHeader}
+		{disabled}
+		{actions}
+	/>
+</div>

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

@@ -0,0 +1,14 @@
+import type { AccountSettingsFormProps } from '../manifest-form.ts';
+import type { SettingsValues } from '../json.ts';
+import { type AccountSettingsSectionDefinition, type AccountSettingsSectionId } from '../settings-sections.ts';
+type Props = Omit<AccountSettingsFormProps, 'manifest' | 'initialValues' | 'toPatch'> & {
+    section: AccountSettingsSectionId;
+    definition?: AccountSettingsSectionDefinition;
+    settings?: SettingsValues | null;
+    value?: SettingsValues | null;
+    initialValues?: SettingsValues | null;
+};
+declare const AccountSettingsSection: import("svelte").Component<Props, {}, "">;
+type AccountSettingsSection = ReturnType<typeof AccountSettingsSection>;
+export default AccountSettingsSection;
+//# sourceMappingURL=AccountSettingsSection.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountSettingsSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountSettingsSection.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAGL,KAAK,gCAAgC,EACrC,KAAK,wBAAwB,EAC7B,MAAM,yBAAyB,CAAC;AAGjC,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC,GAAG;IACvF,OAAO,EAAE,wBAAwB,CAAC;IAClC,UAAU,CAAC,EAAE,gCAAgC,CAAC;IAC9C,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CACtC,CAAC;AAgFH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/AccountThemeHead.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { AccountThemeAssets } from '@vibesdotdev/account/api';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import {
+		deferAccountThemeStylesheets,
+		removeAccountThemeStylesheets,
+		type AccountThemeStrategy
+	} from '../theme-delivery.js';
+	import { resolveAccountThemeAssetHrefs } from '../theme-assets.js';
+
+	type Props = {
+		/** Theme asset URLs from `loadAccountLayoutData()`. */
+		assets?: AccountThemeAssets | null;
+		/** Compatibility override for apps still returning a flat theme stylesheet URL. */
+		themeCssUrl?: string | null;
+		/** Compatibility override for apps still returning a flat custom stylesheet URL. */
+		customCssUrl?: string | null;
+		/** Controls whether account styles block the initial page paint. */
+		strategy?: AccountThemeStrategy;
+		/** Suppresses custom CSS only when a full resolved appearance proves it is empty. */
+		customCssEnabled?: boolean;
+	};
+
+	let {
+		assets = null,
+		themeCssUrl = null,
+		customCssUrl = null,
+		strategy = 'blocking',
+		customCssEnabled = true
+	}: Props = $props();
+
+	const resolvedAssets = $derived(assets ?? null);
+	const liveAssets = $derived(accountState.themeAssets);
+	const hrefs = $derived(
+		resolveAccountThemeAssetHrefs({
+			assets: resolvedAssets,
+			liveAssets,
+			themeCssUrl,
+			customCssUrl
+		})
+	);
+	const themeHref = $derived(hrefs.themeHref);
+	const customHref = $derived(customCssEnabled ? hrefs.customHref : null);
+
+	$effect(() => {
+		if (strategy === 'deferred') {
+			return deferAccountThemeStylesheets({
+				document,
+				requestAnimationFrame: window.requestAnimationFrame.bind(window),
+				cancelAnimationFrame: window.cancelAnimationFrame.bind(window),
+				themeHref,
+				customHref
+			});
+		}
+
+		if (strategy === 'none') removeAccountThemeStylesheets(document);
+	});
+</script>
+
+<svelte:head>
+	{#if strategy === 'blocking'}
+		{#if themeHref}
+			<link rel="stylesheet" href={themeHref} data-vibes-account-theme />
+		{/if}
+		{#if customHref}
+			<link rel="stylesheet" href={customHref} data-vibes-account-custom-theme />
+		{/if}
+	{:else if strategy === 'deferred'}
+		{#if themeHref}
+			<link rel="preload" as="style" href={themeHref} data-vibes-account-theme />
+		{/if}
+		{#if customHref}
+			<link rel="preload" as="style" href={customHref} data-vibes-account-custom-theme />
+		{/if}
+	{/if}
+</svelte:head>

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

@@ -0,0 +1,18 @@
+import type { AccountThemeAssets } from '@vibesdotdev/account/api';
+import { type AccountThemeStrategy } from '../theme-delivery.ts';
+type Props = {
+    /** Theme asset URLs from `loadAccountLayoutData()`. */
+    assets?: AccountThemeAssets | null;
+    /** Compatibility override for apps still returning a flat theme stylesheet URL. */
+    themeCssUrl?: string | null;
+    /** Compatibility override for apps still returning a flat custom stylesheet URL. */
+    customCssUrl?: string | null;
+    /** Controls whether account styles block the initial page paint. */
+    strategy?: AccountThemeStrategy;
+    /** Suppresses custom CSS only when a full resolved appearance proves it is empty. */
+    customCssEnabled?: boolean;
+};
+declare const AccountThemeHead: import("svelte").Component<Props, {}, "">;
+type AccountThemeHead = ReturnType<typeof AccountThemeHead>;
+export default AccountThemeHead;
+//# sourceMappingURL=AccountThemeHead.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountThemeHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountThemeHead.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,EAGL,KAAK,oBAAoB,EACzB,MAAM,sBAAsB,CAAC;AAI9B,KAAK,KAAK,GAAG;IACZ,uDAAuD;IACvD,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAiEH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/AccountThemePresetPicker.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import * as Dialog from '@vibesdotdev/kit/components/ui/dialog';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { settle } from '@vibesdotdev/kernel';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import type { AccountThemePresetPickerPreset } from '../theme-presets';
+
+	type Props = {
+		/** Optional theme stylesheet URL from `data.themeStylesheetUrl` to derive account origin. Reserved for static-asset URL building; the API client resolves its origin via the runtime. */
+		themeStylesheetUrl?: string | null;
+		/** Optional explicit account origin override. Reserved; the API client resolves its origin via the runtime. */
+		accountOrigin?: string | null;
+		/**
+		 * List of theme presets to offer. New apps should pass
+		 * `data.account.themePresets` from `loadAccountLayoutData()` or the
+		 * richer `readThemeCatalogProjection().catalog.enabledPresets` payload.
+		 */
+		presets: AccountThemePresetPickerPreset[];
+		/** Currently selected preset id. Empty string means "system default". */
+		value?: string;
+		/** Label for the system-default option. */
+		systemDefaultLabel?: string;
+		/** Optional change callback fired on successful selection. */
+		onChange?: (next: string) => void | Promise<void>;
+		/** Persist directly through accountState when true. Controlled forms pass false. */
+		persist?: boolean;
+		disabled?: boolean;
+		label?: string;
+		catalogLabel?: string | null;
+	};
+
+	let props: Props = $props();
+	const presetsValue = $derived(props.presets);
+	const externalValue = $derived(props.value ?? '');
+	const systemDefaultLabelValue = $derived(props.systemDefaultLabel ?? 'System default');
+	const onChangeProp = $derived(props.onChange);
+	const persistValue = $derived(props.persist ?? true);
+	const disabledValue = $derived(props.disabled ?? false);
+	const labelValue = $derived(props.label ?? 'Theme preset');
+	const catalogLabelValue = $derived(props.catalogLabel ?? null);
+
+	let current = $state<string>('');
+	let open = $state(false);
+	let query = $state('');
+	let saving = $state(false);
+	let errorMessage = $state<string | null>(null);
+
+	const selectedPreset = $derived(
+		current ? (presetsValue.find((preset) => preset.id === current) ?? null) : null
+	);
+	const triggerLabel = $derived(selectedPreset?.name ?? systemDefaultLabelValue);
+	const filteredPresets = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return presetsValue;
+		return presetsValue.filter((preset) => {
+			const haystack = `${preset.name} ${preset.description ?? ''} ${preset.id}`.toLowerCase();
+			return haystack.includes(q);
+		});
+	});
+
+	$effect(() => {
+		if (untrack(() => current) !== externalValue) {
+			current = externalValue;
+		}
+	});
+
+	function presetVariables(
+		preset: AccountThemePresetPickerPreset | null,
+		mode: 'light' | 'dark'
+	): string {
+		const palette = preset?.colors?.[mode];
+		if (!palette) return '';
+		return Object.entries(palette)
+			.map(([key, value]) => `${key}: ${value};`)
+			.join(' ');
+	}
+
+	function swatchStyle(preset: AccountThemePresetPickerPreset, key: string): string {
+		const light = preset.colors?.light?.[key];
+		const dark = preset.colors?.dark?.[key];
+		const fallback = light ?? dark ?? 'transparent';
+		return `background: ${fallback};`;
+	}
+
+	async function choose(next: string): Promise<void> {
+		if (saving || disabledValue || next === current) {
+			open = false;
+			return;
+		}
+
+		const previous = current;
+		current = next;
+		saving = true;
+		errorMessage = null;
+
+		const changed = await settle(async () => {
+			if (persistValue) {
+				await accountState.patchUserSettings({ 'theme.preset': next || 'default' });
+			}
+			await onChangeProp?.(next);
+			open = false;
+		});
+		if (!changed.ok) {
+			current = previous;
+			errorMessage = failureMessage(changed.cause, 'Failed to update theme preset');
+		}
+		saving = false;
+	}
+</script>
+
+<div class="account-theme-preset-picker space-y-2">
+	<div class="flex items-center justify-between gap-2">
+		<span class="text-sm font-medium text-foreground">{labelValue}</span>
+		{#if catalogLabelValue}
+			<span class="truncate text-xs text-muted-foreground">{catalogLabelValue}</span>
+		{/if}
+	</div>
+
+	<Button
+		type="button"
+		variant="outline"
+		disabled={disabledValue || saving}
+		onclick={() => {
+			open = true;
+			query = '';
+		}}
+		class="h-auto w-full justify-between gap-3 px-3 py-2 text-left"
+	>
+		<span class="flex min-w-0 items-center gap-3">
+			<span
+				class="grid h-8 w-8 shrink-0 grid-cols-2 overflow-hidden rounded-md border"
+				style={presetVariables(selectedPreset, 'light')}
+			>
+				<span style="background: var(--primary, #171717);"></span>
+				<span style="background: var(--secondary, #f4f4f5);"></span>
+				<span style="background: var(--accent, #e5e7eb);"></span>
+				<span style="background: var(--muted, #f4f4f5);"></span>
+			</span>
+			<span class="min-w-0">
+				<span class="block truncate text-sm font-medium">{triggerLabel}</span>
+				<span class="block truncate text-xs text-muted-foreground">
+					{selectedPreset?.description ?? 'Approved account theme'}
+				</span>
+			</span>
+		</span>
+		<Icon icon="lucide:chevrons-up-down" class="h-4 w-4 shrink-0 text-muted-foreground" />
+	</Button>
+
+	{#if errorMessage}
+		<p class="text-xs text-destructive">{errorMessage}</p>
+	{/if}
+
+	<Dialog.Root bind:open>
+		<Dialog.Content class="max-h-[86vh] max-w-3xl overflow-hidden p-0">
+			<Dialog.Header class="border-b px-5 py-4">
+				<Dialog.Title>Select Theme</Dialog.Title>
+				<Dialog.Description>
+					System-approved VibesKit theme presets for account surfaces.
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<div class="space-y-4 p-5">
+				<Input bind:value={query} placeholder="Search themes" />
+
+				<div class="max-h-[56vh] overflow-y-auto pr-1">
+					<div class="grid gap-3 sm:grid-cols-2">
+						<button
+							type="button"
+							class="rounded-md border p-3 text-left transition-colors hover:border-primary/60 {current === ''
+								? 'border-primary bg-primary/5'
+								: 'border-border'}"
+							aria-pressed={current === ''}
+							onclick={() => void choose('')}
+						>
+							<div class="flex items-start justify-between gap-3">
+								<div>
+									<p class="text-sm font-semibold">{systemDefaultLabelValue}</p>
+									<p class="text-xs text-muted-foreground">Use the published default palette.</p>
+								</div>
+								{#if current === ''}
+									<Icon icon="lucide:check" class="h-4 w-4 text-primary" />
+								{/if}
+							</div>
+							<div class="mt-3 grid grid-cols-4 overflow-hidden rounded-md border">
+								<span class="h-8 bg-background"></span>
+								<span class="h-8 bg-primary"></span>
+								<span class="h-8 bg-secondary"></span>
+								<span class="h-8 bg-accent"></span>
+							</div>
+						</button>
+
+						{#each filteredPresets as preset (preset.id)}
+							<button
+								type="button"
+								class="rounded-md border p-3 text-left transition-colors hover:border-primary/60 {current ===
+								preset.id
+									? 'border-primary bg-primary/5'
+									: 'border-border'}"
+								aria-pressed={current === preset.id}
+								onclick={() => void choose(preset.id)}
+							>
+								<div class="flex items-start justify-between gap-3">
+									<div class="min-w-0">
+										<p class="truncate text-sm font-semibold">{preset.name}</p>
+										<p class="line-clamp-2 text-xs text-muted-foreground">
+											{preset.description ?? preset.id}
+										</p>
+									</div>
+									{#if current === preset.id}
+										<Icon icon="lucide:check" class="h-4 w-4 shrink-0 text-primary" />
+									{/if}
+								</div>
+
+								<div class="mt-3 grid gap-2">
+									<div
+										class="rounded-md border p-2"
+										style={`${presetVariables(preset, 'light')} background: var(--background); border-color: var(--border); color: var(--foreground);`}
+									>
+										<div class="flex items-center justify-between gap-2">
+											<span class="text-[11px] font-semibold">Light</span>
+											<span class="flex gap-1">
+												{#each ['--primary', '--secondary', '--accent', '--ring'] as key}
+													<span
+														class="h-3 w-3 rounded-full border"
+														style={swatchStyle(preset, key)}
+													></span>
+												{/each}
+											</span>
+										</div>
+										<div
+											class="mt-2 rounded border px-2 py-1 text-[11px]"
+											style="background: var(--card); border-color: var(--border); color: var(--card-foreground);"
+										>
+											Account Settings
+										</div>
+									</div>
+
+									<div
+										class="rounded-md border p-2"
+										style={`${presetVariables(preset, 'dark')} background: var(--background); border-color: var(--border); color: var(--foreground);`}
+									>
+										<div class="flex items-center justify-between gap-2">
+											<span class="text-[11px] font-semibold">Dark</span>
+											<span class="flex gap-1">
+												{#each ['--primary', '--secondary', '--accent', '--ring'] as key}
+													<span
+														class="h-3 w-3 rounded-full border"
+														style={swatchStyle(preset, key)}
+													></span>
+												{/each}
+											</span>
+										</div>
+										<div
+											class="mt-2 rounded border px-2 py-1 text-[11px]"
+											style="background: var(--card); border-color: var(--border); color: var(--card-foreground);"
+										>
+											Account Settings
+										</div>
+									</div>
+								</div>
+							</button>
+						{/each}
+					</div>
+
+					{#if filteredPresets.length === 0}
+						<div class="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
+							No themes match the current search.
+						</div>
+					{/if}
+				</div>
+			</div>
+		</Dialog.Content>
+	</Dialog.Root>
+</div>

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

@@ -0,0 +1,28 @@
+import type { AccountThemePresetPickerPreset } from '../theme-presets';
+type Props = {
+    /** Optional theme stylesheet URL from `data.themeStylesheetUrl` to derive account origin. Reserved for static-asset URL building; the API client resolves its origin via the runtime. */
+    themeStylesheetUrl?: string | null;
+    /** Optional explicit account origin override. Reserved; the API client resolves its origin via the runtime. */
+    accountOrigin?: string | null;
+    /**
+     * List of theme presets to offer. New apps should pass
+     * `data.account.themePresets` from `loadAccountLayoutData()` or the
+     * richer `readThemeCatalogProjection().catalog.enabledPresets` payload.
+     */
+    presets: AccountThemePresetPickerPreset[];
+    /** Currently selected preset id. Empty string means "system default". */
+    value?: string;
+    /** Label for the system-default option. */
+    systemDefaultLabel?: string;
+    /** Optional change callback fired on successful selection. */
+    onChange?: (next: string) => void | Promise<void>;
+    /** Persist directly through accountState when true. Controlled forms pass false. */
+    persist?: boolean;
+    disabled?: boolean;
+    label?: string;
+    catalogLabel?: string | null;
+};
+declare const AccountThemePresetPicker: import("svelte").Component<Props, {}, "">;
+type AccountThemePresetPicker = ReturnType<typeof AccountThemePresetPicker>;
+export default AccountThemePresetPicker;
+//# sourceMappingURL=AccountThemePresetPicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountThemePresetPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountThemePresetPicker.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,kBAAkB,CAAC;AAGtE,KAAK,KAAK,GAAG;IACZ,yLAAyL;IACzL,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,+GAA+G;IAC/G,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;OAIG;IACH,OAAO,EAAE,8BAA8B,EAAE,CAAC;IAC1C,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AA+NH,QAAA,MAAM,wBAAwB,2CAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/svelte/components/AccountUserLabel.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { settle } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import type { AccountApiClient, AccountPublicUser } from '@vibesdotdev/account/api';
+	import { failureLabel, logOn } from '../runtime-log.js';
+
+
+	let {
+		userId,
+		profile: initialProfile = null,
+		class: className = ''
+	}: {
+		userId: string;
+		/** Skip the runtime fetch when the caller already resolved the public user row. */
+		profile?: AccountPublicUser | null;
+		class?: string;
+	} = $props();
+
+	let node: HTMLSpanElement | null = $state(null);
+	let profile = $state<AccountPublicUser | null>(null);
+	let loading = $state(false);
+	let loadFailed = $state(false);
+	const runtimeStore = getRuntimeSvelteContext();
+
+	$effect(() => {
+		void userId;
+		profile = initialProfile;
+		loadFailed = false;
+		loading = false;
+	});
+
+	function displayLabel(user: AccountPublicUser | null, pending: boolean): string {
+		if (user) {
+			return user.displayName?.trim() || user.name?.trim() || user.id;
+		}
+		return pending ? '…' : userId.slice(0, 8);
+	}
+
+	const label = $derived(displayLabel(profile, loading));
+
+	$effect(() => {
+		if (!node || profile || initialProfile || loadFailed) return;
+		const requestedUserId = userId;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (!entries.some((entry) => entry.isIntersecting)) return;
+				observer.disconnect();
+				loading = true;
+				void (async () => {
+					const fetched = await settle(async () => {
+						const runtime = await runtimeStore.load();
+						const client = await getVibesClient<AccountApiClient>('account', runtime);
+						return client.getPublicUser(requestedUserId);
+					});
+					if (fetched.ok) {
+						if (requestedUserId === userId) profile = fetched.value;
+					} else {
+						void logOn(runtimeStore, 'warn', 'account.user-label', 'AccountUserLabel: profile load failed', { failure: failureLabel(fetched.cause) });
+						if (requestedUserId === userId) loadFailed = true;
+					}
+					if (requestedUserId === userId) loading = false;
+				})();
+			},
+			{ rootMargin: '120px' }
+		);
+
+		observer.observe(node);
+		return () => observer.disconnect();
+	});
+</script>
+
+<span bind:this={node} class={className} data-account-user-id={userId}>
+	{label}
+</span>

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

@@ -0,0 +1,11 @@
+import type { AccountPublicUser } from '@vibesdotdev/account/api';
+type $$ComponentProps = {
+    userId: string;
+    /** Skip the runtime fetch when the caller already resolved the public user row. */
+    profile?: AccountPublicUser | null;
+    class?: string;
+};
+declare const AccountUserLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccountUserLabel = ReturnType<typeof AccountUserLabel>;
+export default AccountUserLabel;
+//# sourceMappingURL=AccountUserLabel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountUserLabel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountUserLabel.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGnF,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,OAAO,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA2EH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}