runeforge 0.0.1

package/dist/components/crud/views/Create.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { untrack } from 'svelte';
+  import { enhance } from '$app/forms';
+  import Field from '../Field.svelte';
+  import Button from '../../form/Button.svelte';
+  import Header from '../../common/Header.svelte';
+  import { getIconSet } from '../../../icons/context.js';
+  import { defaultIconSet } from '../../../icons/sets/default.js';
+  import { fieldLabel } from '../utils/misc.js';
+  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+  import { getStrings } from '../../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    labelOne = '',
+    labelMany = '',
+    icon,
+    fields = [] as FieldDefinition<T>[],
+    creation = {} as ActionConfiguration<T>,
+    serverError = '',
+    onCancel,
+    onSuccess,
+  }: {
+    labelOne?: string;
+    labelMany?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon?: any;
+    fields?: FieldDefinition<T>[];
+    creation?: ActionConfiguration<T>;
+    serverError?: string;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const entityIcon = $derived(icon ?? icons.folder);
+
+  let fieldErrors = $state<Record<string, string>>({});
+  let internalError = $state('');
+  let continueCreating = $state(false);
+
+  function emptyRecord(): Record<string, unknown> {
+    return Object.fromEntries(
+      fields.map((f) => [
+        f.attribute,
+        f.type === 'boolean' ? !!f.default
+        : f.type === 'file' ? (f.default ?? null)
+        : String(f.default ?? ''),
+      ])
+    );
+  }
+
+  let record = $state<Record<string, unknown>>(untrack(() => emptyRecord()));
+
+  function validateAll(formData: FormData): Record<string, string> {
+    const errs: Record<string, string> = {};
+    for (const field of fields) {
+      if (field.required) {
+        const val = String(formData.get(field.attribute) ?? '').trim();
+        if (!val) errs[field.attribute] = strings.required(fieldLabel(field));
+      }
+    }
+    return errs;
+  }
+
+  const hasFileField = $derived(fields.some((f) => f.type === 'file'));
+
+  const errorEntries = $derived([
+    ...((serverError || internalError) ? [['_global', internalError || serverError] as [string, string]] : []),
+    ...Object.entries(fieldErrors),
+  ]);
+</script>
+
+<div class="flex flex-col gap-6">
+
+  <Header
+    admin
+    title={labelMany}
+    breadcrumbs={[
+      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
+      { label: creation.label ?? labelOne, icon: icons.create },
+    ]}
+  />
+
+  {#if errorEntries.length > 0}
+    <div role="alert" class="alert alert-error">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <ul class="list-disc list-inside text-sm">
+        {#each errorEntries as [key, msg] (key)}
+          <li>{msg}</li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+
+  <form
+    method="POST"
+    action={creation.endpoint ?? '?/create'}
+    enctype={hasFileField ? 'multipart/form-data' : undefined}
+    class="mx-auto flex w-full max-w-lg flex-col gap-4 px-4"
+    use:enhance={({ formData, cancel }) => {
+      fieldErrors = {};
+      internalError = '';
+      const errs = validateAll(formData);
+      if (Object.keys(errs).length > 0) {
+        fieldErrors = errs;
+        cancel();
+        return;
+      }
+      return async ({ result, update }) => {
+        if (result.type === 'success' || result.type === 'redirect') {
+          await update({ reset: false });
+          if (continueCreating) {
+            record = emptyRecord();
+            fieldErrors = {};
+            internalError = '';
+          } else {
+            onSuccess?.();
+          }
+        } else if (result.type === 'error') {
+          internalError = result.error?.message ?? strings.serverError;
+        } else {
+          await update({ reset: false });
+        }
+      };
+    }}
+  >
+    {#each fields as field (field.attribute)}
+      <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+    {/each}
+
+    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+      <Button variant="ghost" onclick={() => onCancel?.()}>
+        {strings.cancel}
+      </Button>
+      <Button type="submit" variant="secondary" onclick={() => (continueCreating = true)}>
+        {strings.saveAndContinue}
+      </Button>
+      <Button type="submit" variant="primary" onclick={() => (continueCreating = false)}>
+        {strings.save}
+      </Button>
+    </div>
+  </form>
+</div>

package/dist/components/crud/views/Create.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+declare function $$render<T extends object = Record<string, unknown>>(): {
+    props: {
+        labelOne?: string;
+        labelMany?: string;
+        icon?: any;
+        fields?: FieldDefinition<T>[];
+        creation?: ActionConfiguration<T>;
+        serverError?: string;
+        onCancel?: () => void;
+        onSuccess?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Create: $$IsomorphicComponent;
+type Create<T extends object = Record<string, unknown>> = InstanceType<typeof Create<T>>;
+export default Create;

package/dist/components/crud/views/List.svelte

@@ -0,0 +1,170 @@
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { SvelteSet } from 'svelte/reactivity';
+  import { invalidateAll } from '$app/navigation';
+  import Button from '../../form/Button.svelte';
+  import Header from '../../common/Header.svelte';
+  import PaginatedTable from '../../table/PaginatedTable.svelte';
+  import { getIconSet } from '../../../icons/context.js';
+  import { defaultIconSet } from '../../../icons/sets/default.js';
+  import type {
+    ActionConfiguration,
+    ColumnDefinition,
+    CustomAction,
+    RowAction
+  } from '../../../types/crud.js';
+  import { getStrings } from '../../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    data = [] as T[],
+    labelOne = '',
+    labelMany = '',
+    icon,
+    pageSize = 10,
+    creation = {} as ActionConfiguration<T>,
+    update = {} as ActionConfiguration<T>,
+    read = {} as ActionConfiguration<T>,
+    deletion = {} as ActionConfiguration<T>,
+    actions = [] as CustomAction<T>[],
+    columns = [] as ColumnDefinition<T>[],
+    onCreate,
+    onEdit,
+    onView,
+    onAction,
+  }: {
+    data?: T[];
+    labelOne?: string;
+    labelMany?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon?: any;
+    pageSize?: number;
+    creation?: ActionConfiguration<T>;
+    update?: ActionConfiguration<T>;
+    read?: ActionConfiguration<T>;
+    deletion?: ActionConfiguration<T>;
+    actions?: CustomAction<T>[];
+    columns?: ColumnDefinition<T>[];
+    onCreate?: () => void;
+    onEdit?: (item: T) => void;
+    onView?: (item: T) => void;
+    onAction?: (action: CustomAction<T>, item: T) => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const entityIcon = $derived(icon ?? icons.folder);
+
+  const allowRead = $derived(read.enabled ?? true);
+  const allowUpdate = $derived(update.enabled ?? true);
+  const allowDelete = $derived(deletion.enabled ?? true);
+  const deleteLabel = $derived(deletion.label ?? strings.delete);
+  const updateLabel = $derived(update.label ?? strings.edit);
+  const readLabel = $derived(read.label ?? strings.view);
+  const showRowActions = $derived(allowRead || allowUpdate || allowDelete || actions.length > 0);
+
+  let selected = new SvelteSet<number>();
+
+  async function runEndpointAction(endpoint: string, items: T[]) {
+    await Promise.all(items.map((item) => {
+      const fd = new FormData();
+      fd.set('id', String((item as Record<string, unknown>)._id ?? ''));
+      return fetch(endpoint, { method: 'POST', body: fd });
+    }));
+    await invalidateAll();
+  }
+
+  async function runDeletion(items: T[]) {
+    if (deletion.endpoint) {
+      await runEndpointAction(deletion.endpoint, items);
+    } else {
+      await deletion.callback?.(items);
+    }
+  }
+
+  function handleCreate() { onCreate?.(); }
+
+  async function handleDelete() {
+    const items = [...selected].map(i => data[i]);
+    selected.clear();
+    await runDeletion(items);
+  }
+
+  const rowActions = $derived<RowAction<T>[]>([
+    ...actions.map((action) => ({
+      label: action.label,
+      icon: action.icon,
+      condition: action.condition,
+      run: (item: T) => onAction?.(action, item),
+    })),
+    ...(allowRead ? [{ label: readLabel, icon: icons.view, run: (item: T) => onView?.(item) }] : []),
+    ...(allowUpdate ? [{ label: updateLabel, icon: icons.edit, run: (item: T) => onEdit?.(item) }] : []),
+    ...(allowDelete ? [{ label: deleteLabel, icon: icons.delete, class: 'text-error', run: (item: T) => runDeletion([item]) }] : []),
+  ]);
+</script>
+
+{#snippet actionsCell(item: T)}
+  <div class="flex justify-end gap-1">
+    {#each rowActions as action (action.label)}
+      {#if action.condition?.(item) ?? true}
+        {@const Icon = action.icon}
+        <Button
+          variant="ghost"
+          class={['btn-xs', action.class]}
+          title={action.label}
+          aria-label={action.label}
+          onclick={(e) => { e.stopPropagation(); action.run(item); }}
+        >
+          <Icon class="size-4" />
+        </Button>
+      {/if}
+    {/each}
+  </div>
+{/snippet}
+
+<div class="flex flex-col gap-6">
+
+  <Header
+    admin
+    title={labelMany}
+    breadcrumbs={[
+      { label: labelMany, icon: entityIcon, link: { href: '#' }, prominent: true },
+    ]}
+  >
+    {#snippet buttons()}
+      {#if allowDelete}
+        {@const DeleteIcon = icons.delete}
+        <Button
+          variant="error"
+          class="btn-outline"
+          disabled={selected.size === 0}
+          onclick={handleDelete}
+        >
+          <DeleteIcon class="size-4" />
+          {deleteLabel} ({selected.size})
+        </Button>
+      {/if}
+
+      {@const CreateIcon = icons.create}
+      <Button
+        variant="primary"
+        onclick={handleCreate}
+      >
+        <CreateIcon class="size-5" />
+        {#if creation.label}
+          <span>{creation.label}</span>
+        {:else}
+          <span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
+        {/if}
+      </Button>
+    {/snippet}
+  </Header>
+
+  <PaginatedTable
+    {data}
+    {columns}
+    {pageSize}
+    selectable={allowDelete}
+    {selected}
+    rowActions={showRowActions ? actionsCell : undefined}
+  />
+</div>

package/dist/components/crud/views/List.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { ActionConfiguration, ColumnDefinition, CustomAction } from '../../../types/crud.js';
+declare function $$render<T extends object = Record<string, unknown>>(): {
+    props: {
+        data?: T[];
+        labelOne?: string;
+        labelMany?: string;
+        icon?: any;
+        pageSize?: number;
+        creation?: ActionConfiguration<T>;
+        update?: ActionConfiguration<T>;
+        read?: ActionConfiguration<T>;
+        deletion?: ActionConfiguration<T>;
+        actions?: CustomAction<T>[];
+        columns?: ColumnDefinition<T>[];
+        onCreate?: () => void;
+        onEdit?: (item: T) => void;
+        onView?: (item: T) => void;
+        onAction?: (action: CustomAction<T>, item: T) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<T extends object = Record<string, unknown>> = InstanceType<typeof List<T>>;
+export default List;

package/dist/components/crud/views/Read.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { untrack } from 'svelte';
+  import { deserialize } from '$app/forms';
+  import Field from '../Field.svelte';
+  import Button from '../../form/Button.svelte';
+  import Header from '../../common/Header.svelte';
+  import { getIconSet } from '../../../icons/context.js';
+  import { defaultIconSet } from '../../../icons/sets/default.js';
+  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+  import { getStrings } from '../../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    labelOne = '',
+    labelMany = '',
+    icon,
+    fields = [] as FieldDefinition<T>[],
+    instance = {} as T,
+    read = {} as ActionConfiguration<T>,
+    onCancel,
+  }: {
+    labelOne?: string;
+    labelMany?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon?: any;
+    fields?: FieldDefinition<T>[];
+    instance?: T;
+    read?: ActionConfiguration<T>;
+    onCancel?: () => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const entityIcon = $derived(icon ?? icons.folder);
+
+  let record = $state<Record<string, unknown>>(untrack(() => instance as Record<string, unknown>));
+
+  $effect(() => {
+    const endpoint = read.endpoint;
+    const id = (instance as Record<string, unknown>)._id;
+    if (!endpoint || id == null) return;
+
+    let cancelled = false;
+    (async () => {
+      const fd = new FormData();
+      fd.set('id', String(id));
+      const res = await fetch(endpoint, { method: 'POST', body: fd });
+      const result = deserialize(await res.text());
+      if (!cancelled && result.type === 'success') {
+        const data = result.data as Record<string, unknown> | undefined;
+        const fetched = data
+          ? Object.values(data).find(
+              (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && '_id' in (v as object)
+            )
+          : undefined;
+        if (fetched && typeof fetched === 'object') record = fetched as Record<string, unknown>;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+</script>
+
+<div class="flex flex-col gap-6">
+
+  <Header
+    admin
+    title={labelMany}
+    breadcrumbs={[
+      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
+      { label: read.label ?? labelOne, icon: icons.view },
+    ]}
+  />
+
+  <div class="mx-auto flex w-full max-w-lg flex-col gap-4 px-4">
+    {#each fields as field (field.attribute)}
+      <Field {field} {record} readonly />
+    {/each}
+
+    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+      <Button variant="ghost" onclick={() => onCancel?.()}>
+        {strings.back}
+      </Button>
+    </div>
+  </div>
+</div>

package/dist/components/crud/views/Read.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+declare function $$render<T extends object = Record<string, unknown>>(): {
+    props: {
+        labelOne?: string;
+        labelMany?: string;
+        icon?: any;
+        fields?: FieldDefinition<T>[];
+        instance?: T;
+        read?: ActionConfiguration<T>;
+        onCancel?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Read: $$IsomorphicComponent;
+type Read<T extends object = Record<string, unknown>> = InstanceType<typeof Read<T>>;
+export default Read;

package/dist/components/crud/views/Update.svelte

@@ -0,0 +1,148 @@
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { untrack } from 'svelte';
+  import { enhance } from '$app/forms';
+  import Field from '../Field.svelte';
+  import Button from '../../form/Button.svelte';
+  import Header from '../../common/Header.svelte';
+  import { getIconSet } from '../../../icons/context.js';
+  import { defaultIconSet } from '../../../icons/sets/default.js';
+  import { fieldLabel } from '../utils/misc.js';
+  import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
+  import { getStrings } from '../../../i18n/context.js';
+
+  const strings = getStrings();
+
+  let {
+    labelOne = '',
+    labelMany = '',
+    icon,
+    fields = [] as FieldDefinition<T>[],
+    instance = {} as T,
+    update = {} as ActionConfiguration<T>,
+    serverError = '',
+    onCancel,
+    onSuccess,
+  }: {
+    labelOne?: string;
+    labelMany?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    icon?: any;
+    fields?: FieldDefinition<T>[];
+    instance?: T;
+    update?: ActionConfiguration<T>;
+    serverError?: string;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  const entityIcon = $derived(icon ?? icons.folder);
+
+  let fieldErrors = $state<Record<string, string>>({});
+  let internalError = $state('');
+
+  function seedFromInstance(inst: Record<string, unknown>): Record<string, unknown> {
+    const seeded: Record<string, unknown> = { ...inst };
+    for (const f of fields) {
+      if (f.type !== 'boolean' && f.type !== 'file') {
+        seeded[f.attribute] = String(inst[f.attribute] ?? '');
+      }
+    }
+    return seeded;
+  }
+
+  let record = $state<Record<string, unknown>>(
+    untrack(() => seedFromInstance(instance as Record<string, unknown>))
+  );
+
+  $effect(() => {
+    const id = (instance as Record<string, unknown>)._id;
+    if (!id) return;
+    untrack(() => { record = seedFromInstance(instance as Record<string, unknown>); });
+  });
+
+  function validateAll(formData: FormData): Record<string, string> {
+    const errs: Record<string, string> = {};
+    for (const field of fields) {
+      if (field.required) {
+        const val = String(formData.get(field.attribute) ?? '').trim();
+        if (!val) errs[field.attribute] = strings.required(fieldLabel(field));
+      }
+    }
+    return errs;
+  }
+
+  const hasFileField = $derived(fields.some((f) => f.type === 'file'));
+
+  const errorEntries = $derived([
+    ...((serverError || internalError) ? [['_global', internalError || serverError] as [string, string]] : []),
+    ...Object.entries(fieldErrors),
+  ]);
+</script>
+
+<div class="flex flex-col gap-6">
+
+  <Header
+    admin
+    title={labelMany}
+    breadcrumbs={[
+      { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
+      { label: update.label ?? labelOne, icon: icons.edit },
+    ]}
+  />
+
+  {#if errorEntries.length > 0}
+    <div role="alert" class="alert alert-error">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <ul class="list-disc list-inside text-sm">
+        {#each errorEntries as [key, msg] (key)}
+          <li>{msg}</li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+
+  <form
+    method="POST"
+    action={update.endpoint ?? '?/update'}
+    enctype={hasFileField ? 'multipart/form-data' : undefined}
+    class="mx-auto flex w-full max-w-lg flex-col gap-4 px-4"
+    use:enhance={({ formData, cancel }) => {
+      fieldErrors = {};
+      internalError = '';
+      const errs = validateAll(formData);
+      if (Object.keys(errs).length > 0) {
+        fieldErrors = errs;
+        cancel();
+        return;
+      }
+      return async ({ result, update: updateForm }) => {
+        if (result.type === 'success' || result.type === 'redirect') {
+          await updateForm({ reset: false });
+          onSuccess?.();
+        } else if (result.type === 'error') {
+          internalError = result.error?.message ?? strings.serverError;
+        } else {
+          await updateForm({ reset: false });
+        }
+      };
+    }}
+  >
+    <input type="hidden" name="id" value={String(record._id ?? '')} />
+
+    {#each fields as field (field.attribute)}
+      <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+    {/each}
+
+    <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+      <Button variant="ghost" onclick={() => onCancel?.()}>
+        {strings.cancel}
+      </Button>
+      <Button type="submit" variant="primary">
+        {strings.save}
+      </Button>
+    </div>
+  </form>
+</div>