@r2digisolutions/components 0.6.0 → 0.6.1

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.6.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",