runeforge 0.0.20 → 0.0.22

package/dist/components/crud/Field.svelte

@@ -44,7 +44,7 @@
   const avatarInitials = $derived(initials(record.firstName as string, record.lastName as string));
   const displayValue = $derived(saved == null ? '' : String(saved));
   const selectOptions = $derived(field.dependentOptions ? field.dependentOptions(record) : (field.options ?? []));
-  const selectDisabled = $derived(field.disabled ? field.disabled(record) : false);
+  const fieldDisabled = $derived(field.disabled ? field.disabled(record) : false);
 
   $effect(() => {
     if (!field.dependentOptions) return;
@@ -76,7 +76,8 @@
       {name}
       class="toggle toggle-primary"
       checked={!!saved}
-      disabled={readonly}
+      disabled={readonly || fieldDisabled}
+      onchange={(e) => { record[field.attribute] = (e.currentTarget as HTMLInputElement).checked; }}
     />
   {:else if field.type === 'file'}
     {#if !readonly}
@@ -86,6 +87,7 @@
         {name}
         class="file-input file-input-bordered w-full"
         class:file-input-error={!!error}
+        disabled={fieldDisabled}
         onchange={onFileChange}
       />
     {/if}
@@ -104,8 +106,9 @@
         name={field.attribute}
         bind:value={record[field.attribute] as string}
         options={selectOptions}
+        search={field.search}
         placeholder={field.placeholder}
-        disabled={selectDisabled}
+        disabled={fieldDisabled}
         {error}
       />
     {/if}
@@ -119,11 +122,11 @@
         disabled
       />
     {:else}
-      <input type="hidden" {name} value={String(record[field.attribute] ?? '')} />
+      <input type="hidden" {name} value={String(record[field.attribute] ?? '')} disabled={fieldDisabled} />
       <calendar-date
-        class="cally rounded-box border border-base-300 bg-base-100 shadow-sm"
+        class="cally rounded-box border border-base-300 bg-base-100 shadow-sm {fieldDisabled ? 'pointer-events-none opacity-50' : ''}"
         value={String(record[field.attribute] ?? '')}
-        onchange={(e: Event) => { record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value; }}
+        onchange={(e: Event) => { if (fieldDisabled) return; record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value; }}
       >
         <svg aria-label={strings.previous} class="fill-current size-4" {...{"slot": "previous"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
         <svg aria-label={strings.next} class="fill-current size-4" {...{"slot": "next"}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
@@ -141,6 +144,7 @@
         bind:value={record[field.attribute]}
         class="textarea textarea-bordered bg-base-100 w-full"
         class:textarea-error={!!error}
+        disabled={fieldDisabled}
       ></textarea>
     {/if}
   {:else if readonly}
@@ -159,8 +163,10 @@
       placeholder={field.placeholder ?? ''}
       bind:value={record[field.attribute]}
       autocomplete={field.autocomplete}
+      step={field.type === 'number' ? 'any' : undefined}
       class="input input-bordered w-full"
       class:input-error={!!error}
+      disabled={fieldDisabled}
     />
   {/if}
 

package/dist/components/crud/GenericCRUD.svelte

@@ -7,9 +7,9 @@
 	import Update from './views/Update.svelte';
 	import { AUTO_EXCLUDED } from './utils/constants.js';
 	import {
-		resolveOptions,
 		resolveFormatter,
-		inferType
+		inferType,
+		buildFieldDefinitions
 	} from './utils/resolution.js';
 	import { isFilterable } from '../table/utils.js';
 	import type { XlsxModule } from '../table/export.js';
@@ -121,6 +121,15 @@
 
 	let activeAction = $state<{ action: CustomAction<T>; item: T } | null>(null);
 
+	async function runAction(action: CustomAction<T>, item: T) {
+		if (!(action.condition?.(item) ?? true)) return;
+		if (action.href) {
+			await goto(action.href(item));
+			return;
+		}
+		activeAction = { action, item };
+	}
+
 	async function navList() {
 		await goto('?');
 	}
@@ -226,23 +235,7 @@
 	const resolvedFields: FieldDefinition<T>[] = $derived(
 		fields ??
 			(meta
-				? (Object.entries(meta) as [string, AttributeMetadata][])
-						.filter(([k, m]) => !excluded.has(k) && !m.excludedFromCreate)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label,
-							type: m.type ?? inferType(k, undefined),
-							required: m.required,
-							autocomplete: m.autocomplete,
-							placeholder: m.placeholder,
-							default: m.default,
-							options: resolveOptions(m, data),
-							dependentOptions: m.dependentOptions
-								? (record: Record<string, unknown>) => m.dependentOptions!(data, record)
-								: undefined,
-							disabled: m.disabled,
-							seed: m.seed
-						}))
+				? buildFieldDefinitions<T>(meta, data, 'excludedFromCreate', excluded)
 				: entityData.length > 0
 					? (Object.entries(entityData[0]) as [string, unknown][])
 							.filter(([k]) => !excluded.has(k))
@@ -253,23 +246,7 @@
 	const resolvedReadFields: FieldDefinition<T>[] = $derived(
 		fields ??
 			(meta
-				? (Object.entries(meta) as [string, AttributeMetadata][])
-						.filter(([k, m]) => !excluded.has(k) && !m.excludedFromRead)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label,
-							type: m.type ?? inferType(k, undefined),
-							required: m.required,
-							autocomplete: m.autocomplete,
-							placeholder: m.placeholder,
-							default: m.default,
-							options: resolveOptions(m, data),
-							dependentOptions: m.dependentOptions
-								? (record: Record<string, unknown>) => m.dependentOptions!(data, record)
-								: undefined,
-							disabled: m.disabled,
-							seed: m.seed
-						}))
+				? buildFieldDefinitions<T>(meta, data, 'excludedFromRead', excluded)
 				: entityData.length > 0
 					? (Object.entries(entityData[0]) as [string, unknown][])
 							.filter(([k]) => !excluded.has(k))
@@ -280,23 +257,7 @@
 	const resolvedUpdateFields: FieldDefinition<T>[] = $derived(
 		fields ??
 			(meta
-				? (Object.entries(meta) as [string, AttributeMetadata][])
-						.filter(([k, m]) => !excluded.has(k) && !m.excludedFromUpdate)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label,
-							type: m.type ?? inferType(k, undefined),
-							required: m.required,
-							autocomplete: m.autocomplete,
-							placeholder: m.placeholder,
-							default: m.default,
-							options: resolveOptions(m, data),
-							dependentOptions: m.dependentOptions
-								? (record: Record<string, unknown>) => m.dependentOptions!(data, record)
-								: undefined,
-							disabled: m.disabled,
-							seed: m.seed
-						}))
+				? buildFieldDefinitions<T>(meta, data, 'excludedFromUpdate', excluded)
 				: entityData.length > 0
 					? (Object.entries(entityData[0]) as [string, unknown][])
 							.filter(([k]) => !excluded.has(k))
@@ -370,9 +331,7 @@
 		onCreate={navCreate}
 		onEdit={navEdit}
 		onView={navRead}
-		onAction={(action, item) => {
-			if (action.condition?.(item) ?? true) activeAction = { action, item };
-		}}
+		onAction={runAction}
 	/>
 {/if}
 

package/dist/components/crud/utils/grouping.d.ts

@@ -0,0 +1,6 @@
+import type { FieldDefinition } from '../../../types/crud.js';
+export type FieldGroup<T extends object = Record<string, unknown>> = {
+    title?: string;
+    fields: FieldDefinition<T>[];
+};
+export declare function groupFields<T extends object = Record<string, unknown>>(fields: FieldDefinition<T>[]): FieldGroup<T>[];

package/dist/components/crud/utils/grouping.js

@@ -0,0 +1,23 @@
+// Partitions a flat field list into visual groups for create/update/read
+// views, based on `groupedAs`. Fields without a `groupedAs` render as their
+// own single-field group (unchanged from today's flat layout). Fields sharing
+// a `groupedAs` are collected together at the position of their first
+// occurrence, preserving overall order.
+export function groupFields(fields) {
+    const groups = [];
+    const byTitle = new Map();
+    for (const field of fields) {
+        if (!field.groupedAs) {
+            groups.push({ fields: [field] });
+            continue;
+        }
+        let group = byTitle.get(field.groupedAs);
+        if (!group) {
+            group = { title: field.groupedAs, fields: [] };
+            byTitle.set(field.groupedAs, group);
+            groups.push(group);
+        }
+        group.fields.push(field);
+    }
+    return groups;
+}

package/dist/components/crud/utils/resolution.d.ts

@@ -1,4 +1,6 @@
 import type { AttributeMetadata, AttributeType, SelectOption } from '../../../types/attribute.js';
+import type { FieldDefinition } from '../../../types/crud.js';
 export declare function resolveOptions(m: AttributeMetadata, d: unknown): SelectOption[] | undefined;
 export declare function resolveFormatter(m: AttributeMetadata, d: unknown): import("../../../index.ts").CellFormatter<any, any> | undefined;
 export declare function inferType(key: string, value: unknown): AttributeType;
+export declare function buildFieldDefinitions<T extends object = Record<string, unknown>>(meta: Partial<Record<string, AttributeMetadata>>, data: unknown, excludedFlag: 'excludedFromCreate' | 'excludedFromRead' | 'excludedFromUpdate', excluded: Set<string>): FieldDefinition<T>[];

package/dist/components/crud/utils/resolution.js

@@ -20,3 +20,34 @@ export function inferType(key, value) {
         return 'textarea';
     return 'text';
 }
+// Shared by GenericCRUD's create/read/update field resolution: they only
+// differ in which `excludedFromX` flag gates a field, so any metadata
+// property added here is automatically threaded through all three views
+// instead of needing to be copied into three near-identical blocks.
+export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
+    return Object.entries(meta)
+        .filter(([k, m]) => !excluded.has(k) && !m[excludedFlag])
+        .map(([k, m]) => ({
+        attribute: k,
+        title: m.label,
+        type: m.type ?? inferType(k, undefined),
+        required: m.required,
+        autocomplete: m.autocomplete,
+        placeholder: m.placeholder,
+        default: m.default,
+        options: resolveOptions(m, data),
+        dependentOptions: m.dependentOptions
+            ? (record) => m.dependentOptions(data, record)
+            : undefined,
+        search: m.search,
+        disabled: m.disabled,
+        seed: m.seed,
+        groupedAs: m.groupedAs,
+        min: m.min,
+        max: m.max,
+        integer: m.integer,
+        minLength: m.minLength,
+        maxLength: m.maxLength,
+        pattern: m.pattern
+    }));
+}

package/dist/components/crud/utils/validation.d.ts

@@ -0,0 +1,3 @@
+import type { FieldDefinition } from '../../../types/crud.js';
+import type { RuneforgeStrings } from '../../../i18n/types.js';
+export declare function validateAll<T extends object = Record<string, unknown>>(fields: FieldDefinition<T>[], formData: FormData, strings: RuneforgeStrings): Record<string, string>;

package/dist/components/crud/utils/validation.js

@@ -0,0 +1,44 @@
+import { fieldLabel } from './misc.js';
+// Shared by Create.svelte/Update.svelte's client-side pre-submit check. Errors
+// are surfaced through the same `fieldErrors` mechanism already used for
+// `required`, not native HTML5 constraint validation, so every message is
+// styled consistently regardless of which rule failed.
+export function validateAll(fields, formData, strings) {
+    const errors = {};
+    for (const field of fields) {
+        const val = String(formData.get(field.attribute) ?? '').trim();
+        if (field.required && !val) {
+            errors[field.attribute] = strings.required(fieldLabel(field));
+            continue;
+        }
+        if (!val)
+            continue;
+        if (field.type === 'number') {
+            const num = Number(val);
+            if (Number.isNaN(num)) {
+                errors[field.attribute] = strings.invalidNumber(fieldLabel(field));
+            }
+            else if (field.integer && !Number.isInteger(num)) {
+                errors[field.attribute] = strings.integer(fieldLabel(field));
+            }
+            else if (field.min != null && num < field.min) {
+                errors[field.attribute] = strings.min(fieldLabel(field), field.min);
+            }
+            else if (field.max != null && num > field.max) {
+                errors[field.attribute] = strings.max(fieldLabel(field), field.max);
+            }
+        }
+        else {
+            if (field.minLength != null && val.length < field.minLength) {
+                errors[field.attribute] = strings.minLength(fieldLabel(field), field.minLength);
+            }
+            else if (field.maxLength != null && val.length > field.maxLength) {
+                errors[field.attribute] = strings.maxLength(fieldLabel(field), field.maxLength);
+            }
+            else if (field.pattern && !new RegExp(field.pattern).test(val)) {
+                errors[field.attribute] = strings.pattern(fieldLabel(field));
+            }
+        }
+    }
+    return errors;
+}

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

@@ -6,7 +6,8 @@
   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 { validateAll } from '../utils/validation.js';
+  import { groupFields } from '../utils/grouping.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -53,17 +54,7 @@
 
   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 groups = $derived(groupFields(fields));
   const hasFileField = $derived(fields.some((f) => f.type === 'file'));
 
   const errorEntries = $derived([
@@ -103,7 +94,7 @@
     use:enhance={({ formData, cancel }) => {
       fieldErrors = {};
       internalError = '';
-      const errs = validateAll(formData);
+      const errs = validateAll(fields, formData, strings);
       if (Object.keys(errs).length > 0) {
         fieldErrors = errs;
         cancel();
@@ -127,8 +118,21 @@
       };
     }}
   >
-    {#each fields as field (field.attribute)}
-      <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.fields as field (field.attribute)}
+              <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.fields as field (field.attribute)}
+          <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+        {/each}
+      {/if}
     {/each}
 
     <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">

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

@@ -6,6 +6,7 @@
   import Header from '../../common/Header.svelte';
   import { getIconSet } from '../../../icons/context.js';
   import { defaultIconSet } from '../../../icons/sets/default.js';
+  import { groupFields } from '../utils/grouping.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -60,6 +61,8 @@
     })();
     return () => { cancelled = true; };
   });
+
+  const groups = $derived(groupFields(fields));
 </script>
 
 <div class="flex flex-col gap-6">
@@ -73,8 +76,21 @@
   />
 
   <div class="fields-panel mx-auto flex w-full flex-col gap-4 px-4">
-    {#each fields as field (field.attribute)}
-      <Field {field} {record} readonly />
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.fields as field (field.attribute)}
+              <Field {field} {record} readonly />
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.fields as field (field.attribute)}
+          <Field {field} {record} readonly />
+        {/each}
+      {/if}
     {/each}
 
     <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">

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

@@ -6,7 +6,8 @@
   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 { validateAll } from '../utils/validation.js';
+  import { groupFields } from '../utils/grouping.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -64,17 +65,7 @@
     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 groups = $derived(groupFields(fields));
   const hasFileField = $derived(fields.some((f) => f.type === 'file'));
 
   const errorEntries = $derived([
@@ -114,7 +105,7 @@
     use:enhance={({ formData, cancel }) => {
       fieldErrors = {};
       internalError = '';
-      const errs = validateAll(formData);
+      const errs = validateAll(fields, formData, strings);
       if (Object.keys(errs).length > 0) {
         fieldErrors = errs;
         cancel();
@@ -134,8 +125,21 @@
   >
     <input type="hidden" name="id" value={String(record[idKey] ?? '')} />
 
-    {#each fields as field (field.attribute)}
-      <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+    {#each groups as group, i (group.title ?? `_ungrouped_${i}`)}
+      {#if group.title}
+        <fieldset class="fieldset border border-base-300 rounded-box p-4">
+          <legend class="fieldset-legend px-2">{group.title}</legend>
+          <div class="flex flex-col gap-4">
+            {#each group.fields as field (field.attribute)}
+              <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+            {/each}
+          </div>
+        </fieldset>
+      {:else}
+        {#each group.fields as field (field.attribute)}
+          <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+        {/each}
+      {/if}
     {/each}
 
     <div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">

package/dist/components/form/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getStrings } from '../../i18n/context.js';
+  import type { SearchResolver } from '../../types/attribute.js';
 
   const strings = getStrings();
 
@@ -7,6 +8,8 @@
     name,
     value = $bindable(''),
     options = [],
+    search: searchFn,
+    searchDebounceMs = 300,
     placeholder = strings.selectPlaceholder,
     error = '',
     disabled = false,
@@ -14,41 +17,84 @@
     name?: string;
     value?: string;
     options?: { value: string; label: string }[];
+    search?: SearchResolver;
+    searchDebounceMs?: number;
     placeholder?: string;
     error?: string;
     disabled?: boolean;
   } = $props();
 
   let open = $state(false);
-  let search = $state('');
+  let query = $state('');
   let container: HTMLDivElement;
 
+  // Options resolved by `searchFn` for the current query; null while no
+  // server search has run yet (e.g. box just opened, query still empty).
+  let remoteResults = $state<{ value: string; label: string }[] | null>(null);
+  let searching = $state(false);
+  // Label of whatever was last picked from `remoteResults`, kept around so the
+  // closed-state button can still show it even though it isn't in `options`.
+  let pickedLabel = $state<string | null>(null);
+
+  let searchToken = 0;
+  $effect(() => {
+    if (!searchFn) return;
+    const q = query.trim();
+    if (!q) {
+      remoteResults = null;
+      searching = false;
+      return;
+    }
+    const token = ++searchToken;
+    searching = true;
+    const timer = setTimeout(() => {
+      searchFn(q).then((results) => {
+        if (token !== searchToken) return; // stale response, a newer query took over
+        remoteResults = results;
+        searching = false;
+      });
+    }, searchDebounceMs);
+    return () => clearTimeout(timer);
+  });
+
   const filtered = $derived(
-    search.trim()
-      ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
-      : options
+    searchFn
+      ? (remoteResults ?? options)
+      : query.trim()
+        ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+        : options
   );
 
   const selectedLabel = $derived(
-    options.find((o) => o.value === value)?.label ?? placeholder
+    value === ''
+      ? placeholder
+      : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? placeholder)
   );
 
   function toggle() {
     if (disabled) return;
     open = !open;
-    if (!open) search = '';
+    if (!open) query = '';
   }
 
-  function pick(val: string) {
-    value = val;
+  function pick(option: { value: string; label: string }) {
+    value = option.value;
+    pickedLabel = option.label;
     open = false;
-    search = '';
+    query = '';
+  }
+
+  function clear() {
+    value = '';
+    pickedLabel = null;
+    open = false;
+    query = '';
   }
 
   function onWindowClick(e: MouseEvent) {
     if (open && !container.contains(e.target as Node)) {
       open = false;
-      search = '';
+      query = '';
     }
   }
 </script>
@@ -78,7 +124,7 @@
           type="text"
           class="input input-bordered input-sm w-full"
           placeholder={strings.selectSearch}
-          bind:value={search}
+          bind:value={query}
           autocomplete="off"
         />
       </div>
@@ -87,11 +133,14 @@
           <button
             type="button"
             class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-            onclick={() => pick('')}
+            onclick={clear}
           >
             {placeholder}
           </button>
         </li>
+        {#if searching}
+          <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
+        {/if}
         {#each filtered as option (option.value)}
           <li>
             <button
@@ -99,13 +148,13 @@
               class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
               class:bg-primary={value === option.value}
               class:text-primary-content={value === option.value}
-              onclick={() => pick(option.value)}
+              onclick={() => pick(option)}
             >
               {option.label}
             </button>
           </li>
         {/each}
-        {#if filtered.length === 0}
+        {#if !searching && filtered.length === 0}
           <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
         {/if}
       </ul>

package/dist/components/form/Select.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { SearchResolver } from '../../types/attribute.js';
 type $$ComponentProps = {
     name?: string;
     value?: string;
@@ -5,6 +6,8 @@ type $$ComponentProps = {
         value: string;
         label: string;
     }[];
+    search?: SearchResolver;
+    searchDebounceMs?: number;
     placeholder?: string;
     error?: string;
     disabled?: boolean;

package/dist/i18n/en.js

@@ -10,6 +10,7 @@ export const en = {
     next: 'Next',
     selectPlaceholder: 'Select an option',
     selectSearch: 'Search...',
+    selectSearching: 'Searching...',
     selectNoResults: 'No results',
     view: 'View',
     edit: 'Edit',
@@ -26,5 +27,12 @@ export const en = {
     confirm: 'Confirm',
     deleteConfirm: (count, actionLabel) => `Are you sure you want to ${String(actionLabel).toLowerCase()} ${count} item${count === 1 ? '' : 's'}?`,
     required: (field) => `${field} is required`,
+    invalidNumber: (field) => `${field} must be a number`,
+    integer: (field) => `${field} must be a whole number`,
+    min: (field, min) => `${field} must be greater than or equal to ${min}`,
+    max: (field, max) => `${field} must be less than or equal to ${max}`,
+    minLength: (field, min) => `${field} must be at least ${min} characters`,
+    maxLength: (field, max) => `${field} must be at most ${max} characters`,
+    pattern: (field) => `${field} has an invalid format`,
     serverError: 'Unexpected server error.'
 };

package/dist/i18n/es.js

@@ -10,6 +10,7 @@ export const es = {
     next: 'Siguiente',
     selectPlaceholder: 'Seleccioná una opción',
     selectSearch: 'Buscar...',
+    selectSearching: 'Buscando...',
     selectNoResults: 'Sin resultados',
     view: 'Ver',
     edit: 'Editar',
@@ -26,5 +27,12 @@ export const es = {
     confirm: 'Confirmar',
     deleteConfirm: (count, actionLabel) => `¿Seguro que querés ${String(actionLabel).toLowerCase()} ${count} elemento${count === 1 ? '' : 's'}?`,
     required: (field) => `${field} es requerido`,
+    invalidNumber: (field) => `${field} debe ser un número`,
+    integer: (field) => `${field} debe ser un número entero`,
+    min: (field, min) => `${field} debe ser mayor o igual a ${min}`,
+    max: (field, max) => `${field} debe ser menor o igual a ${max}`,
+    minLength: (field, min) => `${field} debe tener al menos ${min} caracteres`,
+    maxLength: (field, max) => `${field} debe tener como máximo ${max} caracteres`,
+    pattern: (field) => `${field} tiene un formato inválido`,
     serverError: 'Error inesperado del servidor.'
 };

package/dist/i18n/types.d.ts

@@ -10,6 +10,7 @@ export interface RuneforgeStrings {
     next: string;
     selectPlaceholder: string;
     selectSearch: string;
+    selectSearching: string;
     selectNoResults: string;
     view: string;
     edit: string;
@@ -26,5 +27,12 @@ export interface RuneforgeStrings {
     confirm: string;
     deleteConfirm: (count: number, actionLabel: string) => string;
     required: (field: string) => string;
+    invalidNumber: (field: string) => string;
+    integer: (field: string) => string;
+    min: (field: string, min: number) => string;
+    max: (field: string, max: number) => string;
+    minLength: (field: string, min: number) => string;
+    maxLength: (field: string, max: number) => string;
+    pattern: (field: string) => string;
     serverError: string;
 }

package/dist/index.d.ts

@@ -41,6 +41,9 @@ export { default as CRUDRead } from './components/crud/views/Read.svelte';
 export { default as CRUDUpdate } from './components/crud/views/Update.svelte';
 export { default as SearchInput } from './components/crud/SearchInput.svelte';
 export { AUTO_EXCLUDED } from './components/crud/utils/constants.js';
-export { resolveOptions, resolveFormatter, inferType } from './components/crud/utils/resolution.js';
+export { resolveOptions, resolveFormatter, inferType, buildFieldDefinitions } from './components/crud/utils/resolution.js';
 export { fieldLabel, initials } from './components/crud/utils/misc.js';
 export { formatBoolean, formatDatetime, formatTruncateTextUpTo, formatInstance } from './components/crud/utils/formatters.js';
+export { groupFields } from './components/crud/utils/grouping.js';
+export type { FieldGroup } from './components/crud/utils/grouping.js';
+export { validateAll } from './components/crud/utils/validation.js';

package/dist/index.js

@@ -39,6 +39,8 @@ export { default as CRUDUpdate } from './components/crud/views/Update.svelte';
 export { default as SearchInput } from './components/crud/SearchInput.svelte';
 // CRUD utilities
 export { AUTO_EXCLUDED } from './components/crud/utils/constants.js';
-export { resolveOptions, resolveFormatter, inferType } from './components/crud/utils/resolution.js';
+export { resolveOptions, resolveFormatter, inferType, buildFieldDefinitions } from './components/crud/utils/resolution.js';
 export { fieldLabel, initials } from './components/crud/utils/misc.js';
 export { formatBoolean, formatDatetime, formatTruncateTextUpTo, formatInstance } from './components/crud/utils/formatters.js';
+export { groupFields } from './components/crud/utils/grouping.js';
+export { validateAll } from './components/crud/utils/validation.js';

package/dist/types/attribute.d.ts

@@ -20,6 +20,7 @@ export type SelectOption = {
 export type OptionsResolver = SelectOption[] | ((data: any) => SelectOption[]);
 export type FormatterResolver = (data?: any) => CellFormatter<any, any>;
 export type DependentOptionsResolver = (data: any, record: Record<string, unknown>) => SelectOption[];
+export type SearchResolver = (query: string) => Promise<SelectOption[]>;
 export type DisabledResolver = (record: Record<string, unknown>) => boolean;
 export type SeedResolver = (instance: any) => unknown;
 export type AttributeMetadata = {
@@ -27,6 +28,10 @@ export type AttributeMetadata = {
     type?: AttributeType;
     options?: OptionsResolver;
     dependentOptions?: DependentOptionsResolver;
+    /** Select fields only: fetch options matching what the user typed (e.g. a
+     * server-side search) instead of filtering the (possibly partial) `options`
+     * list in memory. Leave unset to keep the default in-memory filtering. */
+    search?: SearchResolver;
     disabled?: DisabledResolver;
     seed?: SeedResolver;
     component?: CellComponent<any, any>;
@@ -41,4 +46,11 @@ export type AttributeMetadata = {
     excludedFromRead?: boolean;
     sortable?: boolean;
     filterable?: boolean;
+    groupedAs?: string;
+    min?: number;
+    max?: number;
+    integer?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
 };

package/dist/types/crud.d.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'svelte';
 import type { FullAutoFill } from 'svelte/elements';
-import type { AttributeType } from './attribute.js';
+import type { AttributeType, SearchResolver } from './attribute.js';
 import type { CellComponent, CellFormatter } from './table.js';
 export type ColumnDefinition<T extends object = Record<string, unknown>> = {
     [K in keyof T & string]: {
@@ -29,8 +29,16 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
         value: string;
         label: string;
     }[];
+    search?: SearchResolver;
     disabled?: (record: Record<string, unknown>) => boolean;
     seed?: (instance: any) => unknown;
+    groupedAs?: string;
+    min?: number;
+    max?: number;
+    integer?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
 }
 export interface ActionConfiguration<T extends object = Record<string, unknown>> {
     enabled?: boolean;
@@ -44,7 +52,12 @@ export interface CustomAction<T extends object = Record<string, unknown>> {
     icon: any;
     endpoint?: string;
     condition?: (item: T) => boolean;
-    view: Component<any>;
+    /** Renders as a modal-like panel when the action runs. Mutually exclusive
+     * with `href` — provide exactly one of the two. */
+    view?: Component<any>;
+    /** Navigates to the given URL instead of opening `view`. Takes priority
+     * over `view` if both are somehow set. */
+    href?: (item: T) => string;
 }
 export interface RowAction<T extends object = Record<string, unknown>> {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",