svelte-ag 1.0.17 → 1.0.18

package/dist/lib/api/form.svelte.d.ts

@@ -1,18 +1,82 @@
 import { superForm, type SuperForm, type SuperValidated } from 'sveltekit-superforms';
 import type { ApiRequestFunction, HTTPMethod, ApiEndpoints, ApiInput, ApiSuccessBody, ApiErrorBody, ApiSchema } from 'ts-ag';
-type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<ApiInput<E, P, M>>;
+export type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<ApiInput<E, P, M>>;
+/**
+ * Creates a strongly-typed form factory for an API schema.
+ *
+ * Call the returned function with `{ path, method, ... }` to get a `SuperForm`
+ * that:
+ * - Validates using the Valibot schema for the given endpoint.
+ * - Submits via the provided `request` function on each valid update.
+ * - Maps API errors to `sveltekit-superforms` field errors / messages.
+ * - Optionally two-way binds external state through the `bind` adapter.
+ */
 export type ApiRequestForm<API extends ApiEndpoints> = <Path extends API['path'], Method extends Extract<API, {
     path: Path;
 }>['method']>(a: {
+    /** API path key used to select a schema and to call `request(path, method, data)` */
     path: Path;
+    /** HTTP method used to select a schema and to call `request(path, method, data)` */
     method: Method;
+    /**
+     * Optional lifecycle hooks for consumers.
+     * - `onSuccess`: called after a successful response body is parsed.
+     * - `onFail`: called after an error response body is parsed and mapped to form errors/messages.
+     */
     actions?: {
         onSuccess?: (form: SuperValidated<ValidInput<API, Path, Method>>, response: ApiSuccessBody<API, Path, Method>) => void | Promise<void>;
         onFail?: (form: SuperValidated<ValidInput<API, Path, Method>>, response: ApiErrorBody<API, Path, Method>) => void | Promise<void>;
     };
+    /**
+     * Partial initial values merged into schema defaults via `defaults(..., valibot(schema))`.
+     * Useful for edit forms where you only have a subset of fields initially.
+     */
     defaultValue?: Partial<ApiInput<API, Path, Method>>;
+    /**
+     * Two-way binding adapter to sync this form with external state.
+     *
+     * Use this when your app keeps the source-of-truth somewhere else (e.g. a store/box),
+     * but you still want Superforms handling validation + errors + submission.
+     *
+     * How it works:
+     * - Form -> external: on any form change, `bind.get(formData)` is validated against the schema,
+     *   and if it differs from the current form value, `bind.set(formValue)` is called.
+     * - External -> form: whenever the external-derived value changes, the form store is updated
+     *   to match (only if different).
+     *
+     * Important:
+     * - `get` should return an "input shape" object using the formData arg to populate fields that the
+     *   external data store doesnt determine
+     * - `set` should update your external state based on the raw form data.
+     * - Keep `get` deterministic and free of side-effects; it is called frequently.
+     */
+    bind?: {
+        /**
+         * Derives the schema-valid value from the current form data.
+         * This is where you transform/prune the form state into the exact shape your endpoint expects.
+         *
+         * Return value must validate to `ValidInput<API, Path, Method>`.
+         */
+        get: (formData: ApiInput<API, Path, Method>) => ValidInput<API, Path, Method>;
+        /**
+         * Writes updated form data back to your external state.
+         * Called only when the derived value differs (deep) from the current form state.
+         */
+        set: (formData: ApiInput<API, Path, Method>) => void;
+    };
+    /**
+     * Extra `superForm` options (merged last).
+     * If you pass `onSubmit` / `onUpdate` here it will override the defaults in this helper.
+     */
     formProps?: Parameters<typeof superForm<ValidInput<API, Path, Method>>>[1];
 }) => SuperForm<ValidInput<API, Path, Method>>;
+/**
+ * Build an endpoint-specific Superforms factory.
+ *
+ * @param schemas A `{[path]: {[method]: schema}}` mapping used to pick the Valibot schema for each endpoint.
+ * @param request An API request function that performs `(path, method, data)` and returns a fetch-like `Response`.
+ *
+ * @returns A function that creates a `SuperForm` for a particular `{path, method}` pair.
+ */
 export declare function createFormFunction<API extends ApiEndpoints>(schemas: Partial<Record<API['path'], Partial<Record<HTTPMethod, ApiSchema>>>>, request: ApiRequestFunction<API>): ApiRequestForm<API>;
-export {};
 //# sourceMappingURL=form.svelte.d.ts.map

package/dist/lib/api/form.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/api/form.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtH,OAAO,KAAK,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,KAAK,UAAU,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAErH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,YAAY,IAAI,CACrD,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,EACrD,CAAC,EAAE;IACH,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACxC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,CAAC,EAAE,CACP,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACtC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5E,KAAK,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/C,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,YAAY,EACzD,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAC7E,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC/B,cAAc,CAAC,GAAG,CAAC,CA4CrB"}
+{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/api/form.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtH,OAAO,KAAK,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,WAAW,CACtG,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,YAAY,IAAI,CACrD,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,EACrD,CAAC,EAAE;IACH,qFAAqF;IACrF,IAAI,EAAE,IAAI,CAAC;IAEX,oFAAoF;IACpF,MAAM,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACxC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,CAAC,EAAE,CACP,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EACnD,QAAQ,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KACtC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B,CAAC;IAEF;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpD;;;;;;;;;;;;;;;;;OAiBG;IACH,IAAI,CAAC,EAAE;QACL;;;;;WAKG;QACH,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAE9E;;;WAGG;QACH,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;KACtD,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5E,KAAK,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/C;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,YAAY,EACzD,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAC7E,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC/B,cAAc,CAAC,GAAG,CAAC,CAqGrB"}

package/dist/lib/api/form.svelte.js

@@ -1,19 +1,46 @@
 import { superForm, defaults, setError, setMessage } from 'sveltekit-superforms';
 import { valibot } from 'sveltekit-superforms/adapters';
+import { watch } from 'runed';
+import { dequal } from 'dequal';
+import { get } from 'svelte/store';
+import { safeParseAsync } from 'valibot';
+/**
+ * Build an endpoint-specific Superforms factory.
+ *
+ * @param schemas A `{[path]: {[method]: schema}}` mapping used to pick the Valibot schema for each endpoint.
+ * @param request An API request function that performs `(path, method, data)` and returns a fetch-like `Response`.
+ *
+ * @returns A function that creates a `SuperForm` for a particular `{path, method}` pair.
+ */
 export function createFormFunction(schemas, request) {
-    return ({ path, method, actions, defaultValue, formProps }) => {
+    return ({ path, method, actions, defaultValue, formProps, bind }) => {
         const schema = schemas[path]?.[method];
         if (schema === undefined)
             throw new Error('Invalid schema for form');
         // if (typeof schema === 'function') {
         //   schema = schema();
         // }
-        return superForm(defaults(defaultValue, valibot(schema)), {
+        const form = superForm(defaults(defaultValue, valibot(schema)), {
             SPA: true,
             resetForm: true,
             applyAction: false, // Prevents the form redirecting to the same page on submit
             delayMs: 300,
             validators: valibot(schema),
+            async onSubmit({ submitter }) {
+                // If a submit button has a name/value, include it in JSON forms (common for "intent" buttons).
+                if (submitter &&
+                    'name' in submitter &&
+                    typeof submitter.name === 'string' &&
+                    'value' in submitter &&
+                    typeof submitter.value === 'string') {
+                    form.form.update((f) => {
+                        if (submitter.name in f) {
+                            f[submitter.name] = submitter.value;
+                        }
+                        return f;
+                    });
+                }
+            },
             async onUpdate({ form }) {
                 if (!form.valid)
                     return;
@@ -42,5 +69,35 @@ export function createFormFunction(schemas, request) {
             },
             ...formProps
         });
+        if (bind !== undefined) {
+            /**
+             * Reads current form store, maps it through `bind.get`, and validates it against the endpoint schema.
+             * Returns the parsed (schema-valid) value.
+             */
+            const bindGet = async () => {
+                const formData = get(form.form);
+                return (await safeParseAsync(schema, bind.get(formData))).output;
+            };
+            form.form.subscribe((v) => {
+                bindGet().then((bindValue) => {
+                    // console.log('Updating binded value', bindValue, 'to', v);
+                    if (!dequal(bindValue, v)) {
+                        bind.set(v);
+                        // bindGet().then((v) => {
+                        //   console.log('done update', bindGet());
+                        // });
+                    }
+                });
+            });
+            watch(() => bindGet(), (newPromise) => {
+                newPromise.then((newValue) => {
+                    // console.log('The state changed, updating the form from', get(form.form), 'to', newValue);
+                    if (!dequal(get(form.form), newValue)) {
+                        form.form.set(newValue);
+                    }
+                });
+            });
+        }
+        return form;
     };
 }

package/dist/lib/components/form/form-button.svelte

@@ -7,21 +7,33 @@ Icons:
 -->
 
 <script module lang="ts">
-  import * as Button from '$shadcn/button/index.js';
-  export type FormButtonProps = Button.Props;
+  import type { FormFieldProps } from './form-field.svelte';
+  import type { FormPath } from 'sveltekit-superforms';
+  import type { Props as ButtonProps } from '$shadcn/button/index.js';
+
+  export type FormButtonProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<ButtonProps, 'form'> & {
+    form?: FormFieldProps<T, U>['form'];
+    name?: U;
+  };
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+  import { Button } from '$shadcn/button/index.js';
   import { cn, flyAndScale } from '../../utils/utils.js';
   import { getFormContext } from './form.svelte';
 
-  let { ref = $bindable(null), children, class: className, ...restProps }: FormButtonProps = $props();
+  let {
+    ref = $bindable(null),
+    form = getFormContext<T, U>(),
+    children,
+    class: className,
+    ...restProps
+  }: FormButtonProps<T, U> = $props();
 
-  const form = getFormContext();
-  const { submitting, delayed } = form;
+  const { submitting, delayed } = $derived(form);
 </script>
 
-<Button.Root bind:ref type="submit" class={cn(className)} {...restProps}>
+<Button bind:ref type="submit" class={cn(className)} {...restProps}>
   <span class={cn('flex transition-opacity', $submitting && !$delayed && 'opacity-0')}>
     {#if $submitting && $delayed}
       <span in:flyAndScale|global class="icon-loading"></span>
@@ -29,4 +41,4 @@ Icons:
       {@render children?.()}
     {/if}
   </span>
-</Button.Root>
+</Button>

package/dist/lib/components/form/form-button.svelte.d.ts

@@ -1,6 +1,32 @@
-import * as Button from '$shadcn/button/index.js';
-export type FormButtonProps = Button.Props;
-declare const FormButton: import("svelte").Component<Button.Props, {}, "ref">;
-type FormButton = ReturnType<typeof FormButton>;
+import type { FormFieldProps } from './form-field.svelte';
+import type { FormPath } from 'sveltekit-superforms';
+import type { Props as ButtonProps } from '$shadcn/button/index.js';
+export type FormButtonProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<ButtonProps, 'form'> & {
+    form?: FormFieldProps<T, U>['form'];
+    name?: U;
+};
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: FormButtonProps<T, U>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormButton: $$IsomorphicComponent;
+type FormButton<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormButton<T, U>>;
 export default FormButton;
 //# sourceMappingURL=form-button.svelte.d.ts.map

package/dist/lib/components/form/form-button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-button.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC;AAgC7C,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"form-button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-button.svelte.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/form/form-field-full.svelte

@@ -2,7 +2,7 @@
   export type FormFullFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = FormFieldProps<T, U> & {
     label: string;
     description?: string;
-    inputProps: HTMLInputAttributes;
+    inputProps?: HTMLInputAttributes;
   } & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;
 </script>
 

package/dist/lib/components/form/form-field-full.svelte.d.ts

@@ -1,7 +1,7 @@
 export type FormFullFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = FormFieldProps<T, U> & {
     label: string;
     description?: string;
-    inputProps: HTMLInputAttributes;
+    inputProps?: HTMLInputAttributes;
 } & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;
 import { type FormFieldProps } from './form-field.svelte';
 import { type FormPath } from 'sveltekit-superforms';

package/dist/lib/components/form/form-field-full.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-full.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-full.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form-field-full.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-full.svelte.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts

@@ -18,7 +18,7 @@ declare const SearchPopover: import("svelte").Component<SearchPopoverProps, {
             score?: number;
         })[];
     }) | null;
-}, "ref" | "value" | "perPage" | "trigger">;
+}, "value" | "ref" | "perPage" | "trigger">;
 type SearchPopover = ReturnType<typeof SearchPopover>;
 export default SearchPopover;
 //# sourceMappingURL=searchPopover.svelte.d.ts.map

package/dist/lib/components/search/components/search-input.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SearchInputProps } from '../types';
-declare const SearchInput: import("svelte").Component<SearchInputProps, {}, "ref" | "value">;
+declare const SearchInput: import("svelte").Component<SearchInputProps, {}, "value" | "ref">;
 type SearchInput = ReturnType<typeof SearchInput>;
 export default SearchInput;
 //# sourceMappingURL=search-input.svelte.d.ts.map

package/dist/lib/components/search/components/search.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SearchProps } from '../types.js';
-declare const Search: import("svelte").Component<SearchProps, {}, "items" | "ref" | "value" | "searchWith">;
+declare const Search: import("svelte").Component<SearchProps, {}, "items" | "value" | "ref" | "searchWith">;
 type Search = ReturnType<typeof Search>;
 export default Search;
 //# sourceMappingURL=search.svelte.d.ts.map

package/dist/lib/components/sidebar/sidebar-input.svelte.d.ts

@@ -6,7 +6,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;
-}, {}, "ref" | "value">;
+}, {}, "value" | "ref">;
 type SidebarInput = ReturnType<typeof SidebarInput>;
 export default SidebarInput;
 //# sourceMappingURL=sidebar-input.svelte.d.ts.map

package/dist/lib/vite/vite-plugin-component-source-collector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin-component-source-collector.d.ts","sourceRoot":"","sources":["../../../src/lib/vite/vite-plugin-component-source-collector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAKnD,UAAU,OAAO;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAKD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,IAAI,GAAE,OAA8B,GAAG,MAAM,CAyH7F"}
+{"version":3,"file":"vite-plugin-component-source-collector.d.ts","sourceRoot":"","sources":["../../../src/lib/vite/vite-plugin-component-source-collector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAKnD,UAAU,OAAO;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAKD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,IAAI,GAAE,OAA8B,GAAG,MAAM,CAsH7F"}

package/dist/lib/vite/vite-plugin-component-source-collector.js

@@ -4,15 +4,27 @@ import { resolve, relative, dirname } from 'path';
 /** All unique component directories */
 const componentFiles = new Set();
 export default function componentSourceCollector(opts = { safePackages: [] }) {
-    const outFile = opts.outputFile ?? 'component-sources.css';
+    // constants
+    const outFileName = opts.outputFile ?? 'component-sources.css';
+    const classRegex = /class(?:=|:)/;
+    const importRegex = /@import\s+['"]([^'"]+)['"]/g;
+    // state
     let config;
     let firstRound = true;
-    // ---- helpers ---- //
     let initialTransformDone = false;
     let initialTransformTimer = null;
+    function shouldAdd(code) {
+        return classRegex.test(code);
+    }
     function addPath(file) {
-        const outPath = resolve(config.root, outFile);
-        componentFiles.add(relative(dirname(outPath), file));
+        if (file !== '' && // No nothing
+            !/\.svelte-kit/.test(file) && // No svelte-kit files
+            // No dep files unless marked as safe
+            (!/\.pnpm|.vite/.test(file) || opts.safePackages.some((p) => file.includes(`node_modules/${p}`)))) {
+            const outPath = resolve(config.root, outFileName);
+            const cleanedFileName = file.replace(/\?v=.*$/, '');
+            componentFiles.add(relative(dirname(outPath), cleanedFileName));
+        }
     }
     function scheduleInitialWrite() {
         if (initialTransformTimer)
@@ -25,8 +37,7 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
         }, 1000); // adjust delay as needed
     }
     const writeOutFile = async () => {
-        // console.log('writing', componentFiles.size);
-        const outPath = resolve(config.root, outFile);
+        const outPath = resolve(config.root, outFileName);
         const lines = Array.from(componentFiles)
             .map((d) => `@source '${d}';`)
             .sort();
@@ -34,18 +45,13 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
         if (didWrite)
             console.log('Wrote', lines.length);
     };
-    const classRegex = /class(?:=|:)/;
-    const importRegex = /@import\s+['"]([^'"]+)['"]/g;
-    function shouldAdd(fileName) {
-        return !/\.pnpm|.vite/.test(fileName) || opts.safePackages.some((p) => fileName.includes(`node_modules/${p}`));
-    }
     // ---- plugin ---- //
     return {
         name: 'vite-plugin-component-source-collector',
         enforce: 'post',
         async configResolved(resolved) {
             config = resolved;
-            const outPath = resolve(config.root, outFile);
+            const outPath = resolve(config.root, outFileName);
             if (config.command === 'build' && firstRound) {
                 componentFiles.clear();
                 firstRound = false;
@@ -71,30 +77,20 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
                 for (const match of matches) {
                     // console.log('MATching', match);
                     const resolved = await this.resolve(match[1], id);
-                    if (resolved && shouldAdd(resolved.id)) {
+                    if (resolved) {
                         addPath(resolved.id);
                     }
                 }
             }
-            // TODO ignore .vite files
             // Adds all other files with the classRegex
-            if (classRegex.test(code) && shouldAdd(id)) {
+            if (shouldAdd(code)) {
                 addPath(id);
-                // if (config.command === 'serve') await writeOutFile();
             }
             if (!initialTransformDone) {
                 scheduleInitialWrite();
             }
         },
         async handleHotUpdate(_ctx) {
-            // const output = await ctx.read();
-            // const id = ctx.file;
-            // console.log('Hot update sources', id, output, classRegex.test(output));
-            // if (classRegex.test(output)) {
-            //   componentFiles.add(id);
-            // } else {
-            //   componentFiles.delete(id);
-            // }
             await writeOutFile();
         },
         async buildEnd() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-ag",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Useful svelte components",
   "bugs": "https://github.com/ageorgeh/svelte-ag/issues",
   "repository": {
@@ -49,7 +49,8 @@
     "@dnd-kit/helpers": "^0.2.4",
     "@floating-ui/dom": "^1.7.5",
     "@rollup/pluginutils": "^5.3.0",
-    "bits-ui": "^2.15.8",
+    "@sveltejs/kit": "^2.52.2",
+    "bits-ui": "^2.16.1",
     "bottleneck": "^2.19.5",
     "clsx": "^2.1.1",
     "dequal": "^2.0.3",
@@ -58,6 +59,7 @@
     "formsnap": "2.0.1",
     "radash": "12.1.1",
     "runed": "0.37.1",
+    "svelte": "^5.53.0",
     "svelte-toolbelt": "^0.10.6",
     "sveltekit-superforms": "2.29.1",
     "tailwind-merge": "^3.5.0",
@@ -72,9 +74,8 @@
     "@iconify/tailwind4": "^1.2.1",
     "@iconify/types": "^2.0.0",
     "@internationalized/date": "^3.11.0",
-    "@lucide/svelte": "^0.574.0",
+    "@lucide/svelte": "^0.575.0",
     "@playwright/test": "1.57.0",
-    "@sveltejs/kit": "^2.52.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/typography": "^0.5.19",
@@ -93,7 +94,6 @@
     "prettier-plugin-svelte": "^3.5.0",
     "rollup": "^4.57.1",
     "semantic-release": "^25.0.3",
-    "svelte": "^5.53.0",
     "svelte-check": "^4.4.1",
     "tailwindcss": "4.2.0",
     "tw-animate-css": "^1.4.0",
@@ -104,8 +104,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "svelte": "^5.53.0",
-    "tailwind-variants": "^1.0.0",
+    "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.0",
     "tw-animate-css": "^1.4.0"
   },
@@ -113,6 +112,7 @@
     "onlyBuiltDependencies": [
       "esbuild",
       "@tailwindcss/oxide"
-    ]
+    ],
+    "overrides": {}
   }
 }

package/src/lib/api/form.svelte.ts

@@ -9,15 +9,40 @@ import type {
   ApiErrorBody,
   ApiSchema
 } from 'ts-ag';
+import { watch } from 'runed';
+import { dequal } from 'dequal';
+import { get } from 'svelte/store';
+import { safeParseAsync } from 'valibot';
 
-type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<ApiInput<E, P, M>>;
+export type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<
+  ApiInput<E, P, M>
+>;
 
+/**
+ * Creates a strongly-typed form factory for an API schema.
+ *
+ * Call the returned function with `{ path, method, ... }` to get a `SuperForm`
+ * that:
+ * - Validates using the Valibot schema for the given endpoint.
+ * - Submits via the provided `request` function on each valid update.
+ * - Maps API errors to `sveltekit-superforms` field errors / messages.
+ * - Optionally two-way binds external state through the `bind` adapter.
+ */
 export type ApiRequestForm<API extends ApiEndpoints> = <
   Path extends API['path'],
   Method extends Extract<API, { path: Path }>['method']
 >(a: {
+  /** API path key used to select a schema and to call `request(path, method, data)` */
   path: Path;
+
+  /** HTTP method used to select a schema and to call `request(path, method, data)` */
   method: Method;
+
+  /**
+   * Optional lifecycle hooks for consumers.
+   * - `onSuccess`: called after a successful response body is parsed.
+   * - `onFail`: called after an error response body is parsed and mapped to form errors/messages.
+   */
   actions?: {
     onSuccess?: (
       form: SuperValidated<ValidInput<API, Path, Method>>,
@@ -28,15 +53,67 @@ export type ApiRequestForm<API extends ApiEndpoints> = <
       response: ApiErrorBody<API, Path, Method>
     ) => void | Promise<void>;
   };
+
+  /**
+   * Partial initial values merged into schema defaults via `defaults(..., valibot(schema))`.
+   * Useful for edit forms where you only have a subset of fields initially.
+   */
   defaultValue?: Partial<ApiInput<API, Path, Method>>;
+
+  /**
+   * Two-way binding adapter to sync this form with external state.
+   *
+   * Use this when your app keeps the source-of-truth somewhere else (e.g. a store/box),
+   * but you still want Superforms handling validation + errors + submission.
+   *
+   * How it works:
+   * - Form -> external: on any form change, `bind.get(formData)` is validated against the schema,
+   *   and if it differs from the current form value, `bind.set(formValue)` is called.
+   * - External -> form: whenever the external-derived value changes, the form store is updated
+   *   to match (only if different).
+   *
+   * Important:
+   * - `get` should return an "input shape" object using the formData arg to populate fields that the
+   *   external data store doesnt determine
+   * - `set` should update your external state based on the raw form data.
+   * - Keep `get` deterministic and free of side-effects; it is called frequently.
+   */
+  bind?: {
+    /**
+     * Derives the schema-valid value from the current form data.
+     * This is where you transform/prune the form state into the exact shape your endpoint expects.
+     *
+     * Return value must validate to `ValidInput<API, Path, Method>`.
+     */
+    get: (formData: ApiInput<API, Path, Method>) => ValidInput<API, Path, Method>;
+
+    /**
+     * Writes updated form data back to your external state.
+     * Called only when the derived value differs (deep) from the current form state.
+     */
+    set: (formData: ApiInput<API, Path, Method>) => void;
+  };
+
+  /**
+   * Extra `superForm` options (merged last).
+   * If you pass `onSubmit` / `onUpdate` here it will override the defaults in this helper.
+   */
   formProps?: Parameters<typeof superForm<ValidInput<API, Path, Method>>>[1];
 }) => SuperForm<ValidInput<API, Path, Method>>;
 
+/**
+ * Build an endpoint-specific Superforms factory.
+ *
+ * @param schemas A `{[path]: {[method]: schema}}` mapping used to pick the Valibot schema for each endpoint.
+ * @param request An API request function that performs `(path, method, data)` and returns a fetch-like `Response`.
+ *
+ * @returns A function that creates a `SuperForm` for a particular `{path, method}` pair.
+ */
 export function createFormFunction<API extends ApiEndpoints>(
   schemas: Partial<Record<API['path'], Partial<Record<HTTPMethod, ApiSchema>>>>,
   request: ApiRequestFunction<API>
 ): ApiRequestForm<API> {
-  return ({ path, method, actions, defaultValue, formProps }) => {
+  return ({ path, method, actions, defaultValue, formProps, bind }) => {
     const schema = schemas[path]?.[method];
     if (schema === undefined) throw new Error('Invalid schema for form');
 
@@ -44,12 +121,29 @@ export function createFormFunction<API extends ApiEndpoints>(
     //   schema = schema();
     // }
 
-    return superForm<ValidInput<API, typeof path, typeof method>>(defaults(defaultValue, valibot(schema)), {
+    const form = superForm<ValidInput<API, typeof path, typeof method>>(defaults(defaultValue, valibot(schema)), {
       SPA: true,
       resetForm: true,
       applyAction: false, // Prevents the form redirecting to the same page on submit
       delayMs: 300,
       validators: valibot(schema),
+      async onSubmit({ submitter }) {
+        // If a submit button has a name/value, include it in JSON forms (common for "intent" buttons).
+        if (
+          submitter &&
+          'name' in submitter &&
+          typeof submitter.name === 'string' &&
+          'value' in submitter &&
+          typeof submitter.value === 'string'
+        ) {
+          form.form.update((f) => {
+            if ((submitter.name as any) in f) {
+              f[submitter.name as any] = submitter.value;
+            }
+            return f;
+          });
+        }
+      },
       async onUpdate({ form }) {
         if (!form.valid) return;
 
@@ -78,5 +172,45 @@ export function createFormFunction<API extends ApiEndpoints>(
       },
       ...formProps
     });
+
+    if (bind !== undefined) {
+      /**
+       * Reads current form store, maps it through `bind.get`, and validates it against the endpoint schema.
+       * Returns the parsed (schema-valid) value.
+       */
+      const bindGet = async () => {
+        const formData = get(form.form);
+        return (await safeParseAsync(schema, bind.get(formData))).output as ValidInput<API, typeof path, typeof method>;
+      };
+
+      form.form.subscribe((v) => {
+        bindGet().then((bindValue) => {
+          // console.log('Updating binded value', bindValue, 'to', v);
+
+          if (!dequal(bindValue, v)) {
+            bind.set(v);
+
+            // bindGet().then((v) => {
+            //   console.log('done update', bindGet());
+            // });
+          }
+        });
+      });
+
+      watch(
+        () => bindGet(),
+        (newPromise) => {
+          newPromise.then((newValue) => {
+            // console.log('The state changed, updating the form from', get(form.form), 'to', newValue);
+
+            if (!dequal(get(form.form), newValue)) {
+              form.form.set(newValue);
+            }
+          });
+        }
+      );
+    }
+
+    return form;
   };
 }

package/src/lib/components/form/form-button.svelte

@@ -7,21 +7,33 @@ Icons:
 -->
 
 <script module lang="ts">
-  import * as Button from '$shadcn/button/index.js';
-  export type FormButtonProps = Button.Props;
+  import type { FormFieldProps } from './form-field.svelte';
+  import type { FormPath } from 'sveltekit-superforms';
+  import type { Props as ButtonProps } from '$shadcn/button/index.js';
+
+  export type FormButtonProps<T extends Record<string, unknown>, U extends FormPath<T>> = Omit<ButtonProps, 'form'> & {
+    form?: FormFieldProps<T, U>['form'];
+    name?: U;
+  };
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+  import { Button } from '$shadcn/button/index.js';
   import { cn, flyAndScale } from '$utils/utils.js';
   import { getFormContext } from './form.svelte';
 
-  let { ref = $bindable(null), children, class: className, ...restProps }: FormButtonProps = $props();
+  let {
+    ref = $bindable(null),
+    form = getFormContext<T, U>(),
+    children,
+    class: className,
+    ...restProps
+  }: FormButtonProps<T, U> = $props();
 
-  const form = getFormContext();
-  const { submitting, delayed } = form;
+  const { submitting, delayed } = $derived(form);
 </script>
 
-<Button.Root bind:ref type="submit" class={cn(className)} {...restProps}>
+<Button bind:ref type="submit" class={cn(className)} {...restProps}>
   <span class={cn('flex transition-opacity', $submitting && !$delayed && 'opacity-0')}>
     {#if $submitting && $delayed}
       <span in:flyAndScale|global class="icon-loading"></span>
@@ -29,4 +41,4 @@ Icons:
       {@render children?.()}
     {/if}
   </span>
-</Button.Root>
+</Button>

package/src/lib/components/form/form-field-full.svelte

@@ -2,7 +2,7 @@
   export type FormFullFieldProps<T extends Record<string, unknown>, U extends FormPath<T>> = FormFieldProps<T, U> & {
     label: string;
     description?: string;
-    inputProps: HTMLInputAttributes;
+    inputProps?: HTMLInputAttributes;
   } & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>>;
 </script>
 

package/src/lib/vite/vite-plugin-component-source-collector.ts

@@ -24,18 +24,33 @@ interface Options {
 const componentFiles = new Set<string>();
 
 export default function componentSourceCollector(opts: Options = { safePackages: [] }): Plugin {
-  const outFile = opts.outputFile ?? 'component-sources.css';
+  // constants
+  const outFileName = opts.outputFile ?? 'component-sources.css';
+  const classRegex = /class(?:=|:)/;
+  const importRegex = /@import\s+['"]([^'"]+)['"]/g;
 
+  // state
   let config: ResolvedConfig;
   let firstRound = true;
-
-  // ---- helpers ---- //
   let initialTransformDone = false;
   let initialTransformTimer: NodeJS.Timeout | null = null;
 
+  function shouldAdd(code: string) {
+    return classRegex.test(code);
+  }
+
   function addPath(file: string) {
-    const outPath = resolve(config.root, outFile);
-    componentFiles.add(relative(dirname(outPath), file));
+    if (
+      file !== '' && // No nothing
+      !/\.svelte-kit/.test(file) && // No svelte-kit files
+      // No dep files unless marked as safe
+      (!/\.pnpm|.vite/.test(file) || opts.safePackages.some((p) => file.includes(`node_modules/${p}`)))
+    ) {
+      const outPath = resolve(config.root, outFileName);
+      const cleanedFileName = file.replace(/\?v=.*$/, '');
+
+      componentFiles.add(relative(dirname(outPath), cleanedFileName));
+    }
   }
 
   function scheduleInitialWrite() {
@@ -47,9 +62,10 @@ export default function componentSourceCollector(opts: Options = { safePackages:
       }
     }, 1000); // adjust delay as needed
   }
+
   const writeOutFile = async () => {
-    // console.log('writing', componentFiles.size);
-    const outPath = resolve(config.root, outFile);
+    const outPath = resolve(config.root, outFileName);
+
     const lines = Array.from(componentFiles)
       .map((d) => `@source '${d}';`)
       .sort();
@@ -58,14 +74,6 @@ export default function componentSourceCollector(opts: Options = { safePackages:
     if (didWrite) console.log('Wrote', lines.length);
   };
 
-  const classRegex = /class(?:=|:)/;
-
-  const importRegex = /@import\s+['"]([^'"]+)['"]/g;
-
-  function shouldAdd(fileName: string) {
-    return !/\.pnpm|.vite/.test(fileName) || opts.safePackages.some((p) => fileName.includes(`node_modules/${p}`));
-  }
-
   // ---- plugin ---- //
 
   return {
@@ -74,7 +82,7 @@ export default function componentSourceCollector(opts: Options = { safePackages:
 
     async configResolved(resolved) {
       config = resolved;
-      const outPath = resolve(config.root, outFile);
+      const outPath = resolve(config.root, outFileName);
 
       if (config.command === 'build' && firstRound) {
         componentFiles.clear();
@@ -103,34 +111,23 @@ export default function componentSourceCollector(opts: Options = { safePackages:
         for (const match of matches) {
           // console.log('MATching', match);
           const resolved = await this.resolve(match[1], id);
-          if (resolved && shouldAdd(resolved.id)) {
+          if (resolved) {
             addPath(resolved.id);
           }
         }
       }
-      // TODO ignore .vite files
 
       // Adds all other files with the classRegex
-      if (classRegex.test(code) && shouldAdd(id)) {
+      if (shouldAdd(code)) {
         addPath(id);
-        // if (config.command === 'serve') await writeOutFile();
       }
+
       if (!initialTransformDone) {
         scheduleInitialWrite();
       }
     },
 
     async handleHotUpdate(_ctx) {
-      // const output = await ctx.read();
-      // const id = ctx.file;
-
-      // console.log('Hot update sources', id, output, classRegex.test(output));
-
-      // if (classRegex.test(output)) {
-      //   componentFiles.add(id);
-      // } else {
-      //   componentFiles.delete(id);
-      // }
       await writeOutFile();
     },