@r2digisolutions/components 0.5.0 → 0.6.1

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;

package/dist/index.d.ts

@@ -210,7 +210,10 @@ export type { TimeFormat } from './components/molecules/TimePicker/TimePicker.sv
 export { default as DateTimePicker } from './components/molecules/DateTimePicker/DateTimePicker.svelte';
 export { default as DateRangePicker } from './components/molecules/DateRangePicker/DateRangePicker.svelte';
 export { default as Combobox } from './components/molecules/Combobox/Combobox.svelte';
-export type { ComboboxOption } from './components/molecules/Combobox/Combobox.svelte';
+export type { ComboboxOption, ComboboxItemState } from './components/molecules/Combobox/Combobox.svelte';
+export { default as ComboboxItem } from './components/molecules/ComboboxItem/ComboboxItem.svelte';
+export { COMBOBOX_CONTEXT, COMBOBOX_CREATE_KEY, getComboboxContext, setComboboxContext } from './components/molecules/Combobox/combobox-context.js';
+export type { ComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export { default as MultiSelect } from './components/molecules/MultiSelect/MultiSelect.svelte';
 export type { MultiSelectOption } from './components/molecules/MultiSelect/MultiSelect.svelte';
 export { default as ConfirmDialog } from './components/molecules/ConfirmDialog/ConfirmDialog.svelte';
@@ -306,8 +309,8 @@ export type { FilterChip } from './components/molecules/FilterBar/FilterBar.svel
 export { default as SortableList } from './components/molecules/SortableList/SortableList.svelte';
 export type { SortableItem } from './components/molecules/SortableList/SortableList.svelte';
 export { default as Form } from './components/molecules/Form/Form.svelte';
-export { getFormContext, FORM_CONTEXT_KEY, remoteIssuesToErrors, isRemoteForm, fieldPath, resolveFormFieldState, applyFormDataSync, sameStringArray } from './utils/formContext.js';
-export type { FormErrors, FormContext, FormDataValues, FormFieldStatus, FormRemote, 
+export { getFormContext, FORM_CONTEXT_KEY, remoteIssuesToErrors, isRemoteForm, fieldPath, resolveFormFieldState, resolveRemoteInputProps, parseRemoteFieldName, remoteAsProps, getRemoteFormId, applyFormDataSync, sameStringArray } from './utils/formContext.js';
+export type { FormErrors, FormContext, FormDataValues, FormFieldStatus, FormRemote, ResolvedRemoteInputProps, ParsedRemoteFieldName, 
 /** @deprecated Use `FormRemote` */
 RemoteFormSpread, RemoteForm, RemoteFormInput, RemoteFormIssue } from './utils/formContext.js';
 export { validateForm, isFormDirty, firstFormError } from './utils/formValidate.js';

package/dist/index.js

@@ -166,6 +166,8 @@ export { default as TimePicker } from './components/molecules/TimePicker/TimePic
 export { default as DateTimePicker } from './components/molecules/DateTimePicker/DateTimePicker.svelte';
 export { default as DateRangePicker } from './components/molecules/DateRangePicker/DateRangePicker.svelte';
 export { default as Combobox } from './components/molecules/Combobox/Combobox.svelte';
+export { default as ComboboxItem } from './components/molecules/ComboboxItem/ComboboxItem.svelte';
+export { COMBOBOX_CONTEXT, COMBOBOX_CREATE_KEY, getComboboxContext, setComboboxContext } from './components/molecules/Combobox/combobox-context.js';
 export { default as MultiSelect } from './components/molecules/MultiSelect/MultiSelect.svelte';
 export { default as ConfirmDialog } from './components/molecules/ConfirmDialog/ConfirmDialog.svelte';
 export { default as ContextMenu } from './components/molecules/ContextMenu/ContextMenu.svelte';
@@ -233,7 +235,7 @@ export { default as TableOfContents } from './components/molecules/TableOfConten
 export { default as FilterBar } from './components/molecules/FilterBar/FilterBar.svelte';
 export { default as SortableList } from './components/molecules/SortableList/SortableList.svelte';
 export { default as Form } from './components/molecules/Form/Form.svelte';
-export { getFormContext, FORM_CONTEXT_KEY, remoteIssuesToErrors, isRemoteForm, fieldPath, resolveFormFieldState, applyFormDataSync, sameStringArray } from './utils/formContext.js';
+export { getFormContext, FORM_CONTEXT_KEY, remoteIssuesToErrors, isRemoteForm, fieldPath, resolveFormFieldState, resolveRemoteInputProps, parseRemoteFieldName, remoteAsProps, getRemoteFormId, applyFormDataSync, sameStringArray } from './utils/formContext.js';
 export { validateForm, isFormDirty, firstFormError } from './utils/formValidate.js';
 export { UI_DICTIONARIES, resolveLocaleTag, getDictionary, formatMessage } from './utils/i18n.js';
 export { i18n } from './utils/i18n.svelte.js';

package/dist/styles.css

@@ -234,4 +234,10 @@
   .text-primary { color: var(--text-primary); }
   .text-secondary { color: var(--text-secondary); }
   .text-muted { color: var(--text-muted); }
+
+  /* SVG chart labels — Tailwind fill-* needs these (text-* alone does not paint <text>) */
+  .fill-primary { fill: var(--text-primary); }
+  .fill-secondary { fill: var(--text-secondary); }
+  .fill-muted { fill: var(--text-muted); }
+  .stroke-border { stroke: var(--border); }
 }

package/dist/utils/formContext.d.ts

@@ -30,6 +30,13 @@ export interface FormContext<TData extends FormDataValues = FormDataValues, TRes
     disabled: boolean;
     /** Last result from a remote form / submit handler, if any */
     result: TResult | undefined;
+    /**
+     * Full Kit `RemoteForm` when `<Form remote={...}>` received one
+     * (not an `.enhance(...)` return). Used by fields to call `.as()`.
+     */
+    remote: RemoteForm<any, any> | null;
+    /** Stable Kit form id (`1p9kxmo/login_user`) for encoding input names */
+    remoteFormId: string | null;
     setError: (name: string, message: string) => void;
     clearError: (name: string) => void;
     clearErrors: () => void;
@@ -37,6 +44,57 @@ export interface FormContext<TData extends FormDataValues = FormDataValues, TRes
     getError: (name: string) => string | undefined;
     getData: <K extends keyof TData & string>(name: K) => TData[K] | undefined;
 }
+/**
+ * Props safe to spread onto library `<Input>` / `<PasswordInput>` for Kit remote forms.
+ * Omits Kit `value` getters/setters so they do not fight `bind:value`.
+ */
+export type ResolvedRemoteInputProps = {
+    name?: string;
+};
+/**
+ * Extract Kit remote form id from `remote.action` (`?/remote=<id>`).
+ * Pass `untrack(() => remote.action)` from callers inside effects/derived.
+ */
+export declare function getRemoteFormId(action: string | undefined | null): string | null;
+/**
+ * Resolve HTML input props for a field inside a Kit remote form.
+ * Prefer a precomputed `formId` string so fields never touch Kit proxies.
+ */
+export declare function resolveRemoteInputProps(formId: string | null | undefined, logicalName: string | undefined, type?: string): ResolvedRemoteInputProps;
+export type ParsedRemoteFieldName = {
+    /** Field path for errors / `form.data` (`email`, `items[0].name`) */
+    logicalName: string | undefined;
+    /** Exact HTML `name` to put on the input (Kit-encoded or plain) */
+    htmlName: string | undefined;
+    /** True when `name` already includes `/formId` (from Kit `.as()`) */
+    isEncoded: boolean;
+};
+/**
+ * Split a Kit-encoded HTML `name` (`email/1p9kxmo/login_user`, `n:age/...`)
+ * into logical + html parts. Plain names pass through unchanged.
+ *
+ * When `formId` is known, uses Kit’s suffix rule (`/${formId}`).
+ * Otherwise treats the first `/` after an optional `n:`/`b:` prefix as the form-id boundary
+ * (logical paths use `.` / `[n]`, never `/`).
+ */
+export declare function parseRemoteFieldName(name: string | undefined, formId?: string | null): ParsedRemoteFieldName;
+/**
+ * Safe props to spread onto `FormField` / `FormPasswordInput` from Kit `.as(...)`.
+ * Keeps `name` (+ `type`) and drops Kit `value` / `defaultValue` accessors that
+ * fight library `$bindable` and can cause `effect_update_depth_exceeded`.
+ *
+ * @example
+ * ```svelte
+ * <FormField {...remoteAsProps(login_user.fields.email.as('email'))} label="Email" />
+ * ```
+ */
+export declare function remoteAsProps(asProps: {
+    name: string;
+    type?: string;
+}): {
+    name: string;
+    type?: string;
+};
 /**
  * Access the nearest `<Form>` context from a child component.
  * Returns `null` when used outside a Form.

package/dist/utils/formContext.js

@@ -7,6 +7,83 @@ export const FORM_CONTEXT_KEY = 'r2-form';
 export function fieldPath(...segments) {
     return segments.map(String).filter((s) => s.length > 0).join('.');
 }
+/**
+ * Extract Kit remote form id from `remote.action` (`?/remote=<id>`).
+ * Pass `untrack(() => remote.action)` from callers inside effects/derived.
+ */
+export function getRemoteFormId(action) {
+    if (!action)
+        return null;
+    const match = action.match(/\/remote=([^&]+)/);
+    return match ? decodeURIComponent(match[1]) : null;
+}
+/**
+ * Resolve HTML input props for a field inside a Kit remote form.
+ * Prefer a precomputed `formId` string so fields never touch Kit proxies.
+ */
+export function resolveRemoteInputProps(formId, logicalName, type = 'text') {
+    if (!logicalName)
+        return {};
+    if (!formId)
+        return { name: logicalName };
+    let prefix = '';
+    if (type === 'number' || type === 'range')
+        prefix = 'n:';
+    else if (type === 'checkbox' || type === 'boolean')
+        prefix = 'b:';
+    return { name: `${prefix}${logicalName}/${formId}` };
+}
+/**
+ * Split a Kit-encoded HTML `name` (`email/1p9kxmo/login_user`, `n:age/...`)
+ * into logical + html parts. Plain names pass through unchanged.
+ *
+ * When `formId` is known, uses Kit’s suffix rule (`/${formId}`).
+ * Otherwise treats the first `/` after an optional `n:`/`b:` prefix as the form-id boundary
+ * (logical paths use `.` / `[n]`, never `/`).
+ */
+export function parseRemoteFieldName(name, formId) {
+    if (!name) {
+        return { logicalName: undefined, htmlName: undefined, isEncoded: false };
+    }
+    const htmlName = name;
+    if (formId && name.endsWith(`/${formId}`)) {
+        let logical = name.slice(0, -(formId.length + 1));
+        if (logical.startsWith('n:') || logical.startsWith('b:'))
+            logical = logical.slice(2);
+        if (logical.endsWith('[]'))
+            logical = logical.slice(0, -2);
+        return { logicalName: logical, htmlName, isEncoded: true };
+    }
+    // Heuristic without formId: Kit-encoded names contain `/`
+    if (name.includes('/')) {
+        let rest = name;
+        if (rest.startsWith('n:') || rest.startsWith('b:'))
+            rest = rest.slice(2);
+        const slash = rest.indexOf('/');
+        if (slash !== -1) {
+            let logical = rest.slice(0, slash);
+            if (logical.endsWith('[]'))
+                logical = logical.slice(0, -2);
+            return { logicalName: logical, htmlName, isEncoded: true };
+        }
+    }
+    return { logicalName: name, htmlName: name, isEncoded: false };
+}
+/**
+ * Safe props to spread onto `FormField` / `FormPasswordInput` from Kit `.as(...)`.
+ * Keeps `name` (+ `type`) and drops Kit `value` / `defaultValue` accessors that
+ * fight library `$bindable` and can cause `effect_update_depth_exceeded`.
+ *
+ * @example
+ * ```svelte
+ * <FormField {...remoteAsProps(login_user.fields.email.as('email'))} label="Email" />
+ * ```
+ */
+export function remoteAsProps(asProps) {
+    return asProps.type != null
+        ? { name: asProps.name, type: asProps.type }
+        : { name: asProps.name };
+}
 /**
  * Access the nearest `<Form>` context from a child component.
  * Returns `null` when used outside a Form.
@@ -42,7 +119,8 @@ export function remoteIssuesToErrors(issues) {
 }
 /** True when the spread value is a full `RemoteForm` (has `fields` / `pending`). */
 export function isRemoteForm(remote) {
-    return !!remote && 'fields' in remote && typeof remote.fields === 'object';
+    // Avoid reading `.fields` (client getter allocates a proxy and can loop in `$derived`).
+    return !!remote && 'fields' in remote;
 }
 /**
  * Shared resolution for form-aware controls (error / status / disabled).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.5.0",
+	"version": "0.6.1",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -66,37 +66,37 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@lucide/svelte": "^1.26.0",
-		"@playwright/test": "^1.61.1",
-		"@storybook/addon-a11y": "^8.6.18",
+		"@lucide/svelte": "^1.27.0",
+		"@playwright/test": "^1.62.0",
+		"@storybook/addon-a11y": "^10.5.5",
 		"@storybook/addon-essentials": "^8.6.18",
 		"@storybook/addon-svelte-csf": "^5.1.2",
-		"@storybook/addon-themes": "^8.6.18",
-		"@storybook/svelte": "^8.6.18",
-		"@storybook/sveltekit": "^8.6.18",
+		"@storybook/addon-themes": "^10.5.5",
+		"@storybook/svelte": "^10.5.5",
+		"@storybook/sveltekit": "^10.5.5",
 		"@sveltejs/adapter-static": "next",
 		"@sveltejs/kit": "next",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.2.0",
 		"@tailwindcss/vite": "^4.3.3",
-		"@types/node": "^24.13.3",
+		"@types/node": "^26.1.2",
 		"@vitest/browser-playwright": "^4.1.10",
-		"bumpp": "^10.4.1",
-		"eslint": "^10.7.0",
+		"bumpp": "^12.1.1",
+		"eslint": "^10.8.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.22.0",
-		"globals": "^17.7.0",
+		"globals": "^17.8.0",
 		"mdsvex": "^0.12.8",
-		"playwright": "^1.61.1",
+		"playwright": "^1.62.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
 		"publint": "^0.3.22",
-		"storybook": "^8.6.18",
-		"svelte": "^5.56.7",
-		"svelte-check": "^4.7.3",
+		"storybook": "^10.5.5",
+		"svelte": "^5.56.8",
+		"svelte-check": "^4.7.4",
 		"tailwindcss": "^4.3.3",
-		"typescript": "^6.0.3",
+		"typescript": "6.0.3",
 		"typescript-eslint": "^8.65.0",
 		"vite": "^8.1.5",
 		"vitest": "^4.1.10",