@r2digisolutions/components 0.6.0 → 0.6.2

package/dist/components/molecules/ComboboxItem/ComboboxItem.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+interface ComboboxItemProps {
+    value: string;
+    /** Used for default text and query filtering when nested in `Combobox`. */
+    label?: string;
+    disabled?: boolean;
+    /** Extra strings matched against the parent `Combobox` query. */
+    keywords?: string[];
+    /**
+     * When omitted, selection comes from the parent `Combobox`.
+     * Pass explicitly when using the item standalone.
+     */
+    selected?: boolean;
+    /**
+     * When omitted, highlight comes from the parent `Combobox`.
+     * Pass explicitly when using the item standalone.
+     */
+    highlighted?: boolean;
+    /**
+     * Register this row for keyboard navigation / query filtering.
+     * Internal `Combobox` rows set this to `false` (parent already filters).
+     */
+    register?: boolean;
+    class?: string;
+    children?: Snippet;
+    leading?: Snippet;
+    trailing?: Snippet;
+    onclick?: () => void;
+    onhighlight?: () => void;
+}
+declare const ComboboxItem: import("svelte").Component<ComboboxItemProps, {}, "">;
+type ComboboxItem = ReturnType<typeof ComboboxItem>;
+export default ComboboxItem;

package/dist/components/molecules/ComboboxItem/ComboboxItemStory.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import ComboboxItem from './ComboboxItem.svelte';
+
+	let selected = $state('svelte');
+	let highlighted = $state('svelte');
+
+	const frameworks = [
+		{ value: 'svelte', label: 'Svelte', hint: 'Compiler UI' },
+		{ value: 'react', label: 'React', hint: 'Component model' },
+		{ value: 'vue', label: 'Vue', hint: 'Progressive' },
+		{ value: 'solid', label: 'Solid', hint: 'Fine-grained' },
+		{ value: 'qwik', label: 'Qwik', hint: 'Resumable', disabled: true }
+	];
+</script>
+
+<div class="max-w-sm space-y-3 w-full">
+	<div class="space-y-1">
+		<p class="text-sm font-semibold text-primary">ComboboxItem</p>
+		<p class="text-xs text-secondary">
+			Fila de opción para listas de Combobox. Funciona sola o anidada en
+			<code class="text-primary">Combobox</code>.
+		</p>
+	</div>
+
+	<div class="rounded-xl border-border bg-surface-elevated p-1.5 shadow-sm border">
+		{#each frameworks as fw (fw.value)}
+			<ComboboxItem
+				value={fw.value}
+				label={fw.label}
+				disabled={fw.disabled}
+				selected={selected === fw.value}
+				highlighted={highlighted === fw.value}
+				onclick={() => (selected = fw.value)}
+				onhighlight={() => (highlighted = fw.value)}
+			>
+				<span class="min-w-0 flex flex-col">
+					<span class="truncate">{fw.label}</span>
+					<span
+						class={[
+							'truncate text-[11px]',
+							selected === fw.value || highlighted === fw.value ? 'text-white/80' : 'text-muted'
+						]}
+					>
+						{fw.hint}
+					</span>
+				</span>
+			</ComboboxItem>
+		{/each}
+	</div>
+
+	<p class="text-xs text-muted">
+		Value: <span class="text-primary">{selected}</span>
+	</p>
+</div>

package/dist/components/molecules/ComboboxItem/ComboboxItemStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ComboboxItemStory: import("svelte").Component<Record<string, never>, {}, "">;
+type ComboboxItemStory = ReturnType<typeof ComboboxItemStory>;
+export default ComboboxItemStory;

package/dist/components/molecules/Form/Form.svelte

@@ -3,11 +3,12 @@
 	generics="TData extends FormDataValues = FormDataValues, TInput extends RemoteFormInput | void = RemoteFormInput, TOutput = unknown"
 >
 	import type { Snippet } from 'svelte';
-	import { setContext } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import type { RemoteFormInput } from '@sveltejs/kit';
 	import Alert from '../Alert/Alert.svelte';
 	import {
 		FORM_CONTEXT_KEY,
+		getRemoteFormId,
 		isRemoteForm,
 		remoteIssuesToErrors,
 		type FormContext,
@@ -79,6 +80,9 @@
 	const isRemote = $derived(remote != null);
 	const remotePending = $derived(Boolean(kitForm?.pending));
 	const busy = $derived(loading || remotePending || disabled);
+	// Prefer page-provided `inputName` on fields; optional inferred id is set once below.
+	let remoteFormId = $state<string | null>(null);
+	let didInitRemoteFormId = false;
 
 	const errorEntries = $derived(Object.entries(errors).filter(([, msg]) => Boolean(msg)));
 	const hasErrors = $derived(errorEntries.length > 0);
@@ -135,6 +139,12 @@
 		get result() {
 			return (result ?? kitForm?.result) as TOutput | undefined;
 		},
+		get remote() {
+			return kitForm as FormContext<TData, TOutput>['remote'];
+		},
+		get remoteFormId() {
+			return remoteFormId;
+		},
 		setError,
 		clearError,
 		clearErrors,
@@ -143,19 +153,31 @@
 		getData
 	} satisfies FormContext<TData, TOutput>);
 
-	$effect(() => {
-		if (!kitForm || !syncRemoteIssues) return;
-		errors = remoteIssuesToErrors(kitForm.fields.allIssues());
-	});
+	if (kitForm && !didInitRemoteFormId) {
+		didInitRemoteFormId = true;
+		remoteFormId = untrack(() => getRemoteFormId(kitForm.action));
+	}
 
-	$effect(() => {
-		if (!kitForm) return;
-		if (kitForm.result !== undefined) result = kitForm.result;
-	});
+	function syncRemoteIssuesNow() {
+		if (!kitForm || !syncRemoteIssues) return;
+		const next = remoteIssuesToErrors(kitForm.fields.allIssues());
+		errors = next;
+		if (Object.keys(next).length > 0) submitted = true;
+	}
 
 	function handleSubmit(e: SubmitEvent) {
 		if (isRemote) {
 			submitted = true;
+			queueMicrotask(() => {
+				const check = () => {
+					if (kitForm && kitForm.pending > 0) {
+						requestAnimationFrame(check);
+						return;
+					}
+					syncRemoteIssuesNow();
+				};
+				check();
+			});
 			return;
 		}
 		e.preventDefault();
@@ -189,7 +211,11 @@
 			<ul class="mt-1 list-disc space-y-0.5 pl-4 text-sm">
 				{#each errorEntries as [field, message] (field)}
 					<li>
-						<span class="font-medium capitalize">{field}</span>: {message}
+						{#if field === '_form'}
+							{message}
+						{:else}
+							<span class="font-medium capitalize">{field}</span>: {message}
+						{/if}
 					</li>
 				{/each}
 			</ul>

package/dist/components/molecules/FormField/FormField.svelte

@@ -4,6 +4,8 @@
 	import {
 		getFormContext,
 		resolveFormFieldState,
+		resolveRemoteInputProps,
+		parseRemoteFieldName,
 		applyFormDataSync,
 		type FormFieldStatus
 	} from '../../../utils/formContext.js';
@@ -22,7 +24,18 @@
 
 	/**
 	 * Form-bound text input (email, tel, url, search, …).
-	 * There is no separate `FormTextInput` — use this component.
+	 *
+	 * Kit remote: pass the encoded `name` (and `type`) from `.as()`, **not** the full
+	 * spread — Kit’s `value` get/set fights `$bindable` and can loop.
+	 *
+	 * @example
+	 * ```svelte
+	 * <FormField
+	 *   name={login_user.fields.email.as('email').name}
+	 *   type="email"
+	 *   label="Email"
+	 * />
+	 * ```
 	 */
 	interface FormFieldProps {
 		id?: string;
@@ -41,19 +54,23 @@
 		size?: 'sm' | 'md' | 'lg';
 		/**
 		 * When true and inside `<Form>`, keep `value` in sync with `form.data[name]`.
-		 * Requires `name`.
+		 * Uses the logical field name (strips Kit `/formId` when present).
 		 */
 		bindData?: boolean;
-		leadIcon?: Snippet;
-		trailIcon?: Snippet;
 		/**
-		 * Custom control instead of the default `<Input>`.
-		 * Receives resolved status / disabled / helpers from form context.
+		 * Override HTML `name` if logical `name` is separate.
+		 * Prefer passing Kit `.as(...).name` as `name` instead.
 		 */
+		inputName?: string;
+		leadIcon?: Snippet;
+		trailIcon?: Snippet;
 		control?: Snippet<[FormFieldControlProps]>;
 		class?: string;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
+		/** Absorbed if a Kit `.as()` object is spread by mistake. */
+		defaultValue?: unknown;
+		'aria-invalid'?: boolean | 'true' | 'false';
 	}
 
 	let {
@@ -72,23 +89,43 @@
 		clearable = false,
 		size = 'md',
 		bindData = false,
+		inputName,
 		leadIcon,
 		trailIcon,
 		control,
 		class: className = '',
 		oninput,
-		onchange
+		onchange,
+		defaultValue: _kitDefaultValue = undefined,
+		'aria-invalid': _ariaInvalid = undefined
 	}: FormFieldProps = $props();
 
 	const form = getFormContext();
+	const parsed = $derived(parseRemoteFieldName(name, form?.remoteFormId));
+	const logicalName = $derived(parsed.logicalName);
+
 	const resolved = $derived(
-		resolveFormFieldState({ name, errorMessage, helperText, status, disabled, form })
+		resolveFormFieldState({
+			name: logicalName,
+			errorMessage,
+			helperText,
+			status,
+			disabled,
+			form
+		})
 	);
 
+	/** HTML `name`: override → encoded as-is → else encode with remoteFormId. */
+	const htmlName = $derived.by(() => {
+		if (inputName) return inputName;
+		if (parsed.isEncoded) return parsed.htmlName;
+		return resolveRemoteInputProps(form?.remoteFormId, name, type).name;
+	});
+
 	$effect(() => {
-		if (!bindData || !name || !form) return;
+		if (!bindData || !logicalName || !form) return;
 		applyFormDataSync({
-			fromCtx: form.data[name],
+			fromCtx: form.data[logicalName],
 			getLocal: () => value,
 			setLocal: (v) => {
 				value = v;
@@ -99,20 +136,20 @@
 
 	function setValue(next: string) {
 		value = next;
-		if (bindData && name && form) {
-			form.setData(name, next);
-			form.clearError(name);
+		if (bindData && logicalName && form) {
+			form.setData(logicalName, next);
+			form.clearError(logicalName);
 		}
 	}
 
 	function clearFieldError() {
-		if (name && form) form.clearError(name);
+		if (logicalName && form) form.clearError(logicalName);
 	}
 
 	function handleInput(e: Event) {
-		if (bindData && name && form) {
-			form.setData(name, (e.currentTarget as HTMLInputElement).value);
-			form.clearError(name);
+		if (bindData && logicalName && form) {
+			form.setData(logicalName, (e.currentTarget as HTMLInputElement).value);
+			form.clearError(logicalName);
 		}
 		oninput?.(e);
 	}
@@ -122,7 +159,7 @@
 	{#if control}
 		{@render control({
 			id,
-			name,
+			name: logicalName,
 			value,
 			status: resolved.status,
 			helperText: resolved.helperText,
@@ -134,7 +171,7 @@
 	{:else}
 		<Input
 			{id}
-			{name}
+			name={htmlName}
 			{label}
 			{placeholder}
 			{type}

package/dist/components/molecules/FormField/FormField.svelte.d.ts

@@ -13,7 +13,18 @@ export interface FormFieldControlProps {
 }
 /**
  * Form-bound text input (email, tel, url, search, …).
- * There is no separate `FormTextInput` — use this component.
+ *
+ * Kit remote: pass the encoded `name` (and `type`) from `.as()`, **not** the full
+ * spread — Kit’s `value` get/set fights `$bindable` and can loop.
+ *
+ * @example
+ * ```svelte
+ * <FormField
+ *   name={login_user.fields.email.as('email').name}
+ *   type="email"
+ *   label="Email"
+ * />
+ * ```
  */
 interface FormFieldProps {
     id?: string;
@@ -32,19 +43,23 @@ interface FormFieldProps {
     size?: 'sm' | 'md' | 'lg';
     /**
      * When true and inside `<Form>`, keep `value` in sync with `form.data[name]`.
-     * Requires `name`.
+     * Uses the logical field name (strips Kit `/formId` when present).
      */
     bindData?: boolean;
-    leadIcon?: Snippet;
-    trailIcon?: Snippet;
     /**
-     * Custom control instead of the default `<Input>`.
-     * Receives resolved status / disabled / helpers from form context.
+     * Override HTML `name` if logical `name` is separate.
+     * Prefer passing Kit `.as(...).name` as `name` instead.
      */
+    inputName?: string;
+    leadIcon?: Snippet;
+    trailIcon?: Snippet;
     control?: Snippet<[FormFieldControlProps]>;
     class?: string;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
+    /** Absorbed if a Kit `.as()` object is spread by mistake. */
+    defaultValue?: unknown;
+    'aria-invalid'?: boolean | 'true' | 'false';
 }
 declare const FormField: import("svelte").Component<FormFieldProps, {}, "value">;
 type FormField = ReturnType<typeof FormField>;

package/dist/components/molecules/FormPasswordInput/FormPasswordInput.svelte

@@ -3,9 +3,15 @@
 	import {
 		getFormContext,
 		resolveFormFieldState,
+		resolveRemoteInputProps,
+		parseRemoteFieldName,
 		applyFormDataSync
 	} from '../../../utils/formContext.js';
 
+	/**
+	 * Kit remote: pass `.as('password').name` as `name`, not the full `.as()` spread
+	 * (Kit’s `value` get/set fights local binding).
+	 */
 	interface FormPasswordInputProps {
 		id?: string;
 		name?: string;
@@ -18,11 +24,14 @@
 		disabled?: boolean;
 		required?: boolean;
 		size?: 'sm' | 'md' | 'lg';
-		/** Sync with `form.data[name]` when inside `<Form>`. */
 		bindData?: boolean;
+		inputName?: string;
 		class?: string;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
+		defaultValue?: unknown;
+		type?: string;
+		'aria-invalid'?: boolean | 'true' | 'false';
 	}
 
 	let {
@@ -38,20 +47,40 @@
 		required = false,
 		size = 'md',
 		bindData = false,
+		inputName,
 		class: className = '',
 		oninput,
-		onchange
+		onchange,
+		defaultValue: _kitDefaultValue = undefined,
+		type: _kitType = undefined,
+		'aria-invalid': _ariaInvalid = undefined
 	}: FormPasswordInputProps = $props();
 
 	const form = getFormContext();
+	const parsed = $derived(parseRemoteFieldName(name, form?.remoteFormId));
+	const logicalName = $derived(parsed.logicalName);
+
 	const resolved = $derived(
-		resolveFormFieldState({ name, errorMessage, helperText, status, disabled, form })
+		resolveFormFieldState({
+			name: logicalName,
+			errorMessage,
+			helperText,
+			status,
+			disabled,
+			form
+		})
 	);
 
+	const htmlName = $derived.by(() => {
+		if (inputName) return inputName;
+		if (parsed.isEncoded) return parsed.htmlName;
+		return resolveRemoteInputProps(form?.remoteFormId, name, 'password').name;
+	});
+
 	$effect(() => {
-		if (!bindData || !name || !form) return;
+		if (!bindData || !logicalName || !form) return;
 		applyFormDataSync({
-			fromCtx: form.data[name],
+			fromCtx: form.data[logicalName],
 			getLocal: () => value,
 			setLocal: (v) => {
 				value = v;
@@ -61,9 +90,9 @@
 	});
 
 	function handleInput(e: Event) {
-		if (bindData && name && form) {
-			form.setData(name, (e.currentTarget as HTMLInputElement).value);
-			form.clearError(name);
+		if (bindData && logicalName && form) {
+			form.setData(logicalName, (e.currentTarget as HTMLInputElement).value);
+			form.clearError(logicalName);
 		}
 		oninput?.(e);
 	}
@@ -72,7 +101,7 @@
 <div class={['w-full', className]}>
 	<PasswordInput
 		{id}
-		{name}
+		name={htmlName}
 		{label}
 		{placeholder}
 		disabled={resolved.disabled}

package/dist/components/molecules/FormPasswordInput/FormPasswordInput.svelte.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Kit remote: pass `.as('password').name` as `name`, not the full `.as()` spread
+ * (Kit’s `value` get/set fights local binding).
+ */
 interface FormPasswordInputProps {
     id?: string;
     name?: string;
@@ -10,11 +14,14 @@ interface FormPasswordInputProps {
     disabled?: boolean;
     required?: boolean;
     size?: 'sm' | 'md' | 'lg';
-    /** Sync with `form.data[name]` when inside `<Form>`. */
     bindData?: boolean;
+    inputName?: string;
     class?: string;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
+    defaultValue?: unknown;
+    type?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
 }
 declare const FormPasswordInput: import("svelte").Component<FormPasswordInputProps, {}, "value">;
 type FormPasswordInput = ReturnType<typeof FormPasswordInput>;

package/dist/components/organisms/BlogEditor/BlogEditorStory.svelte

@@ -82,7 +82,7 @@
 	let value = $state<BlogDocument>({
 		...emptyBlogDocument('Shipping our component library'),
 		description: 'A richer block model with media, layout, and registered components.',
-		author: 'R2 Digisolutions',
+		author: 'Evoteg',
 		publishedAt: '2026-07-28',
 		tags: ['design-system', 'svelte', 'blog'],
 		coverImage: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&q=80',

package/dist/components/organisms/FileUploader/FileUploader.svelte

@@ -525,14 +525,18 @@
 					'focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:border-brand-500',
 					isDragging
 						? 'border-brand-500 bg-brand-500/10'
-						: hasFile
+						: hasFile || externalSrc
 							? 'border-transparent'
 							: 'border-border bg-surface-elevated hover:border-border-strong',
 					disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 				]}
 			>
-				{#if primaryFile?.previewUrl}
-					<img src={primaryFile.previewUrl} alt="" class="h-full w-full object-cover" />
+				{#if primaryFile?.previewUrl || externalSrc}
+					<img
+						src={primaryFile?.previewUrl || externalSrc}
+						alt=""
+						class="h-full w-full object-cover"
+					/>
 					{#if !disabled}
 						<div
 							class="absolute inset-0 flex items-center justify-center bg-black/45 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"

package/dist/components/organisms/InvoicePage/InvoicePage.svelte

@@ -52,7 +52,7 @@
 		paidAt,
 		status = 'sent',
 		from = {
-			name: 'R2 Digi Solutions',
+			name: 'Evoteg',
 			email: 'billing@r2digi.com',
 			addressLines: ['Calle Mayor 12', '28013 Madrid, Spain'],
 			taxId: 'ES B12345678'

package/dist/components/organisms/ProfileHeaderUploader/ProfileHeaderUploader.svelte

@@ -17,6 +17,10 @@
 		label?: string;
 		coverHelperText?: string;
 		avatarHelperText?: string;
+		/** Existing remote cover URL (shown when no local File is selected). */
+		coverSrc?: string;
+		/** Existing remote avatar URL (shown when no local File is selected). */
+		avatarSrc?: string;
 		accept?: string;
 		maxCoverMb?: number;
 		maxAvatarMb?: number;
@@ -30,6 +34,8 @@
 		label = 'Profile media',
 		coverHelperText = 'Cover · PNG or JPG · max 10MB',
 		avatarHelperText = 'Avatar · square image recommended',
+		coverSrc = '',
+		avatarSrc = '',
 		accept = 'image/*',
 		maxCoverMb = 10,
 		maxAvatarMb = 5,
@@ -52,6 +58,12 @@
 	const coverInputId = $derived(`${id}-cover`);
 	const avatarInputId = $derived(`${id}-avatar`);
 
+	const coverDisplayUrl = $derived(cover?.previewUrl || coverSrc || '');
+	const avatarDisplayUrl = $derived(avatar?.previewUrl || avatarSrc || '');
+	const hasCoverMedia = $derived(Boolean(coverDisplayUrl));
+	const hasAvatarMedia = $derived(Boolean(avatarDisplayUrl));
+	const hasLocalMedia = $derived(Boolean(cover || avatar));
+
 	function revoke(media: ProfileMedia | null) {
 		if (media?.previewUrl) URL.revokeObjectURL(media.previewUrl);
 	}
@@ -171,7 +183,7 @@
 	/>
 
 	<div
-		class="relative overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-sm"
+		class="relative rounded-xl border border-border bg-surface-elevated shadow-sm"
 		aria-labelledby={label ? labelId : undefined}
 		aria-describedby={[coverHelperText || avatarHelperText ? helperId : '', errorMessage ? errorId : '']
 			.filter(Boolean)
@@ -182,7 +194,11 @@
 		<div
 			role="button"
 			tabindex={disabled ? -1 : 0}
-			aria-label={cover ? `Change cover photo, ${cover.name}` : 'Upload cover photo'}
+			aria-label={hasCoverMedia
+				? cover
+					? `Change cover photo, ${cover.name}`
+					: 'Change cover photo'
+				: 'Upload cover photo'}
 			aria-disabled={disabled || undefined}
 			ondragenter={(e) => {
 				e.preventDefault();
@@ -200,14 +216,14 @@
 			}}
 			onclick={() => !disabled && coverInput?.click()}
 			class={[
-				'group relative aspect-3/1 min-h-36 w-full overflow-hidden outline-none transition-colors',
+				'group relative aspect-3/1 min-h-36 w-full overflow-hidden rounded-t-xl outline-none transition-colors',
 				'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500/40',
 				coverDragging ? 'bg-brand-500/10' : 'bg-surface-overlay',
 				disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
 			]}
 		>
-			{#if cover}
-				<img src={cover.previewUrl} alt="" class="h-full w-full object-cover" />
+			{#if hasCoverMedia}
+				<img src={coverDisplayUrl} alt="" class="h-full w-full object-cover" />
 				{#if !disabled}
 					<div
 						class="absolute inset-0 flex items-start justify-end bg-linear-to-b from-black/35 via-transparent to-transparent p-3 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
@@ -267,7 +283,11 @@
 				<div
 					role="button"
 					tabindex={disabled ? -1 : 0}
-					aria-label={avatar ? `Change profile photo, ${avatar.name}` : 'Upload profile photo'}
+					aria-label={hasAvatarMedia
+						? avatar
+							? `Change profile photo, ${avatar.name}`
+							: 'Change profile photo'
+						: 'Upload profile photo'}
 					aria-disabled={disabled || undefined}
 					ondragenter={(e) => {
 						e.preventDefault();
@@ -298,14 +318,14 @@
 						if (!disabled) avatarInput?.click();
 					}}
 					class={[
-						'group relative h-20 w-20 shrink-0 overflow-hidden rounded-full border-4 border-surface-elevated bg-surface-overlay shadow-md outline-none transition sm:h-24 sm:w-24',
+						'group relative z-10 h-20 w-20 shrink-0 overflow-hidden rounded-full border-4 border-surface-elevated bg-surface-overlay shadow-md outline-none transition sm:h-24 sm:w-24',
 						'focus-visible:ring-2 focus-visible:ring-brand-500/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-elevated',
 						avatarDragging ? 'ring-2 ring-brand-500' : '',
 						disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
 					]}
 				>
-					{#if avatar}
-						<img src={avatar.previewUrl} alt="" class="h-full w-full object-cover" />
+					{#if hasAvatarMedia}
+						<img src={avatarDisplayUrl} alt="" class="h-full w-full object-cover" />
 						{#if !disabled}
 							<div
 								class="absolute inset-0 flex items-center justify-center bg-black/45 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
@@ -339,7 +359,7 @@
 				</div>
 
 				<div class="min-w-0 flex-1 pb-1">
-					{#if avatar || cover}
+					{#if hasLocalMedia}
 						<div class="flex flex-wrap items-center gap-2">
 							{#if cover && !disabled}
 								<button

package/dist/components/organisms/ProfileHeaderUploader/ProfileHeaderUploader.svelte.d.ts

@@ -7,6 +7,10 @@ interface ProfileHeaderUploaderProps {
     label?: string;
     coverHelperText?: string;
     avatarHelperText?: string;
+    /** Existing remote cover URL (shown when no local File is selected). */
+    coverSrc?: string;
+    /** Existing remote avatar URL (shown when no local File is selected). */
+    avatarSrc?: string;
     accept?: string;
     maxCoverMb?: number;
     maxAvatarMb?: number;