runeforge 0.0.23 → 0.0.24

package/dist/components/Modal.svelte

@@ -6,15 +6,40 @@
     title = '',
     onClose,
     children,
+    class: additionalClass,
+    width,
+    maxWidth,
+    height,
+    maxHeight,
   }: {
     title?: string;
     onClose?: () => void;
     children: Snippet;
+    /** Extra classes merged onto the modal box, e.g. Tailwind size utilities
+     * like `max-w-4xl` or `w-11/12`. */
+    class?: string;
+    /** Explicit size overrides (any valid CSS length, e.g. '600px', '90vw').
+     * Applied as inline styles, so they take priority over `class` utilities. */
+    width?: string;
+    maxWidth?: string;
+    height?: string;
+    maxHeight?: string;
   } = $props();
+
+  const boxStyle = $derived(
+    [
+      width ? `width:${width}` : '',
+      maxWidth ? `max-width:${maxWidth}` : '',
+      height ? `height:${height}` : '',
+      maxHeight ? `max-height:${maxHeight}` : '',
+    ]
+      .filter(Boolean)
+      .join(';')
+  );
 </script>
 
 <dialog class="modal" open>
-  <div class="modal-box">
+  <div class={['modal-box', additionalClass]} style={boxStyle}>
     <div class="flex items-center justify-between gap-4">
       <h3 class="text-lg font-bold">{title}</h3>
       {#if onClose}

package/dist/components/Modal.svelte.d.ts

@@ -3,6 +3,15 @@ type $$ComponentProps = {
     title?: string;
     onClose?: () => void;
     children: Snippet;
+    /** Extra classes merged onto the modal box, e.g. Tailwind size utilities
+     * like `max-w-4xl` or `w-11/12`. */
+    class?: string;
+    /** Explicit size overrides (any valid CSS length, e.g. '600px', '90vw').
+     * Applied as inline styles, so they take priority over `class` utilities. */
+    width?: string;
+    maxWidth?: string;
+    height?: string;
+    maxHeight?: string;
 };
 declare const Modal: import("svelte").Component<$$ComponentProps, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/crud/EmbeddedField.svelte

@@ -0,0 +1,144 @@
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+	import Field from './Field.svelte';
+	import Button from '../form/Button.svelte';
+	import Modal from '../Modal.svelte';
+	import { emptyRecord, seedField, defaultItemLabel } from './utils/embedded.js';
+	import { fieldLabel } from './utils/misc.js';
+	import { validateAll } from './utils/validation.js';
+	import type { FieldDefinition } from '../../types/crud.js';
+	import { getStrings } from '../../i18n/context.js';
+
+	const strings = getStrings();
+
+	let {
+		field,
+		record = $bindable({} as Record<string, unknown>),
+		readonly = false
+	}: {
+		field: FieldDefinition<T>;
+		record?: Record<string, unknown>;
+		readonly?: boolean;
+	} = $props();
+
+	const subFields = $derived(field.fields ?? []);
+	const items = $derived((record[field.attribute] as Record<string, unknown>[] | undefined) ?? []);
+
+	let modalOpen = $state(false);
+	// null while adding a new item; the item's index while editing an existing
+	// one, so saveItem knows whether to append or replace in place.
+	let editingIndex = $state<number | null>(null);
+	let draft = $state<Record<string, unknown>>({});
+	let draftErrors = $state<Record<string, string>>({});
+
+	function openCreateModal() {
+		editingIndex = null;
+		draft = emptyRecord(subFields);
+		draftErrors = {};
+		modalOpen = true;
+	}
+
+	function openEditModal(index: number) {
+		const item = items[index];
+		editingIndex = index;
+		draft = Object.fromEntries(
+			subFields.map((f) => [f.attribute, seedField(f, f.seed ? f.seed(item) : item[f.attribute])])
+		);
+		draftErrors = {};
+		modalOpen = true;
+	}
+
+	function closeModal() {
+		modalOpen = false;
+	}
+
+	function coerce(f: FieldDefinition, raw: unknown): unknown {
+		if (f.type === 'number') return raw === '' || raw == null ? null : Number(raw);
+		return raw;
+	}
+
+	function saveItem() {
+		const fd = new FormData();
+		for (const f of subFields) fd.set(f.attribute, String(draft[f.attribute] ?? ''));
+		const errs = validateAll(subFields, fd, strings);
+		if (Object.keys(errs).length > 0) {
+			draftErrors = errs;
+			return;
+		}
+		const item = Object.fromEntries(
+			subFields.map((f) => [f.attribute, coerce(f, draft[f.attribute])])
+		);
+		record[field.attribute] =
+			editingIndex == null
+				? [...items, item]
+				: items.map((existing, i) => (i === editingIndex ? item : existing));
+		modalOpen = false;
+	}
+
+	function removeItem(index: number) {
+		record[field.attribute] = items.filter((_, i) => i !== index);
+	}
+
+	function itemLabel(item: Record<string, unknown>): string {
+		return field.itemLabel ? field.itemLabel(item) : defaultItemLabel(subFields, item);
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	{#if !readonly}
+		<input type="hidden" name={field.attribute} value={JSON.stringify(items)} />
+	{/if}
+
+	{#if items.length === 0}
+		<p class="text-sm text-base-content/50">{strings.noItems}</p>
+	{:else}
+		<ul class="flex flex-col gap-1">
+			{#each items as item, i (i)}
+				<li
+					class="flex items-center justify-between gap-2 rounded-box border border-base-300 px-3 py-2 text-sm"
+				>
+					{#if readonly}
+						<span>{itemLabel(item)}</span>
+					{:else}
+						<button
+							type="button"
+							class="flex-1 text-left hover:underline"
+							onclick={() => openEditModal(i)}
+						>
+							{itemLabel(item)}
+						</button>
+						<Button
+							variant="ghost"
+							class="btn-xs btn-circle"
+							aria-label={strings.remove}
+							onclick={() => removeItem(i)}
+						>
+							✕
+						</Button>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if !readonly}
+		<Button variant="outline" class="btn-sm self-start" onclick={openCreateModal}>
+			+ {strings.add}
+		</Button>
+	{/if}
+</div>
+
+{#if modalOpen}
+	<Modal title={fieldLabel(field)} onClose={closeModal}>
+		<div class="flex flex-col gap-4">
+			{#each subFields as f (f.attribute)}
+				<Field field={f} bind:record={draft} error={draftErrors[f.attribute] ?? ''} />
+			{/each}
+			<div class="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+				<Button variant="ghost" onclick={closeModal}>{strings.cancel}</Button>
+				<Button variant="primary" onclick={saveItem}>
+					{editingIndex == null ? strings.add : strings.edit}
+				</Button>
+			</div>
+		</div>
+	</Modal>
+{/if}

package/dist/components/crud/EmbeddedField.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { FieldDefinition } from '../../types/crud.js';
+declare function $$render<T extends object = Record<string, unknown>>(): {
+    props: {
+        field: FieldDefinition<T>;
+        record?: Record<string, unknown>;
+        readonly?: boolean;
+    };
+    exports: {};
+    bindings: "record";
+    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(): "record";
+    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 EmbeddedField: $$IsomorphicComponent;
+type EmbeddedField<T extends object = Record<string, unknown>> = InstanceType<typeof EmbeddedField<T>>;
+export default EmbeddedField;

package/dist/components/crud/Field.svelte

@@ -3,6 +3,7 @@
   import Avatar from '../Avatar.svelte';
   import Label from '../form/Label.svelte';
   import Select from '../form/Select.svelte';
+  import EmbeddedField from './EmbeddedField.svelte';
   import { fieldLabel, initials } from './utils/misc.js';
   import type { FieldDefinition } from '../../types/crud.js';
   import { getStrings } from '../../i18n/context.js';
@@ -147,6 +148,8 @@
         disabled={fieldDisabled}
       ></textarea>
     {/if}
+  {:else if field.type === 'embedded'}
+    <EmbeddedField {field} bind:record {readonly} />
   {:else if readonly}
     <input
       type={field.type ?? 'text'}

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

@@ -0,0 +1,4 @@
+import type { FieldDefinition } from '../../../types/crud.js';
+export declare function seedField<T extends object = Record<string, unknown>>(f: FieldDefinition<T>, raw: unknown): unknown;
+export declare function emptyRecord<T extends object = Record<string, unknown>>(fields: FieldDefinition<T>[]): Record<string, unknown>;
+export declare function defaultItemLabel<T extends object = Record<string, unknown>>(fields: FieldDefinition<T>[], item: Record<string, unknown>): string;

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

@@ -0,0 +1,40 @@
+import { fieldLabel } from './misc.js';
+// Shared by emptyRecord/Update.svelte's seedFromInstance/EmbeddedField's edit
+// mode: converts one raw stored value into its editable draft form, using the
+// same convention everywhere — booleans and embedded arrays keep their real
+// type (Field.svelte's checkbox/list binds them directly), everything else
+// becomes a string since Field.svelte's other inputs bind as strings.
+export function seedField(f, raw) {
+    if (f.type === 'boolean')
+        return !!raw;
+    if (f.type === 'file')
+        return raw ?? null;
+    if (f.type === 'embedded')
+        return Array.isArray(raw) ? raw : [];
+    return String(raw ?? '');
+}
+// Shared by Create.svelte and EmbeddedField.svelte: both need an empty draft
+// record seeded with each field's default, keyed the same way regardless of
+// whether it ends up serialized as a top-level form or as one item inside an
+// embedded list.
+export function emptyRecord(fields) {
+    return Object.fromEntries(fields.map((f) => [f.attribute, seedField(f, f.default)]));
+}
+// Default summary shown per item in an embedded list when the field has no
+// `itemLabel`: joins each sub-field's resolved display value so the list is
+// at least readable out of the box.
+export function defaultItemLabel(fields, item) {
+    return fields
+        .map((f) => {
+        const raw = item[f.attribute];
+        if (raw == null || raw === '')
+            return null;
+        if (f.type === 'select')
+            return f.options?.find((o) => o.value === String(raw))?.label ?? String(raw);
+        if (f.type === 'boolean')
+            return raw ? fieldLabel(f) : null;
+        return String(raw);
+    })
+        .filter((v) => !!v)
+        .join(' · ');
+}

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

@@ -51,6 +51,10 @@ export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
         integer: m.integer,
         minLength: m.minLength,
         maxLength: m.maxLength,
-        pattern: m.pattern
+        pattern: m.pattern,
+        fields: m.fields
+            ? buildFieldDefinitions(m.fields, data, excludedFlag, new Set())
+            : undefined,
+        itemLabel: m.itemLabel
     }));
 }

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

@@ -6,6 +6,19 @@ import { fieldLabel } from './misc.js';
 export function validateAll(fields, formData, strings) {
     const errors = {};
     for (const field of fields) {
+        if (field.type === 'embedded') {
+            let items;
+            try {
+                items = JSON.parse(String(formData.get(field.attribute) ?? '[]'));
+            }
+            catch {
+                items = [];
+            }
+            if (field.required && (!Array.isArray(items) || items.length === 0)) {
+                errors[field.attribute] = strings.required(fieldLabel(field));
+            }
+            continue;
+        }
         const val = String(formData.get(field.attribute) ?? '').trim();
         if (field.required && !val) {
             errors[field.attribute] = strings.required(fieldLabel(field));

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

@@ -8,6 +8,7 @@
   import { defaultIconSet } from '../../../icons/sets/default.js';
   import { validateAll } from '../utils/validation.js';
   import { groupFields } from '../utils/grouping.js';
+  import { emptyRecord } from '../utils/embedded.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -41,18 +42,7 @@
   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()));
+  let record = $state<Record<string, unknown>>(untrack(() => emptyRecord(fields)));
 
   const groups = $derived(groupFields(fields));
   const hasFileField = $derived(fields.some((f) => f.type === 'file'));
@@ -104,7 +94,7 @@
         if (result.type === 'success' || result.type === 'redirect') {
           await update({ reset: false });
           if (continueCreating) {
-            record = emptyRecord();
+            record = emptyRecord(fields);
             fieldErrors = {};
             internalError = '';
           } else {

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

@@ -8,6 +8,7 @@
   import { defaultIconSet } from '../../../icons/sets/default.js';
   import { validateAll } from '../utils/validation.js';
   import { groupFields } from '../utils/grouping.js';
+  import { seedField } from '../utils/embedded.js';
   import type { ActionConfiguration, FieldDefinition } from '../../../types/crud.js';
   import { getStrings } from '../../../i18n/context.js';
 
@@ -47,10 +48,8 @@
   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') {
-        const raw = f.seed ? f.seed(inst) : inst[f.attribute];
-        seeded[f.attribute] = String(raw ?? '');
-      }
+      const raw = f.seed ? f.seed(inst) : inst[f.attribute];
+      seeded[f.attribute] = seedField(f, raw);
     }
     return seeded;
   }

package/dist/i18n/en.js

@@ -24,6 +24,9 @@ export const en = {
     saveAndContinue: 'Save and continue',
     cancel: 'Cancel',
     back: 'Back',
+    add: 'Add',
+    remove: 'Remove',
+    noItems: 'No items added',
     confirm: 'Confirm',
     deleteConfirm: (count, actionLabel) => `Are you sure you want to ${String(actionLabel).toLowerCase()} ${count} item${count === 1 ? '' : 's'}?`,
     required: (field) => `${field} is required`,

package/dist/i18n/es.js

@@ -24,6 +24,9 @@ export const es = {
     saveAndContinue: 'Guardar y continuar',
     cancel: 'Cancelar',
     back: 'Volver',
+    add: 'Agregar',
+    remove: 'Quitar',
+    noItems: 'Sin elementos agregados',
     confirm: 'Confirmar',
     deleteConfirm: (count, actionLabel) => `¿Seguro que querés ${String(actionLabel).toLowerCase()} ${count} elemento${count === 1 ? '' : 's'}?`,
     required: (field) => `${field} es requerido`,

package/dist/i18n/types.d.ts

@@ -24,6 +24,9 @@ export interface RuneforgeStrings {
     saveAndContinue: string;
     cancel: string;
     back: string;
+    add: string;
+    remove: string;
+    noItems: string;
     confirm: string;
     deleteConfirm: (count: number, actionLabel: string) => string;
     required: (field: string) => string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { BreadcrumbItem } from './types/breadcrumb.js';
 export { AttributeType } from './types/attribute.js';
-export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver } from './types/attribute.js';
+export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver, EmbeddedItemLabelResolver } from './types/attribute.js';
 export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry, PaginatedEnvelope, ServerPagination, FilterSnapshot, TableQuery } from './types/table.js';
 export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, CustomBulkAction, RowAction, SearchConfiguration } from './types/crud.js';
 export type { RuneforgeConfig } from './config/context.js';
@@ -32,6 +32,7 @@ export { SortState, FilterState, snapshotFilter } from './components/table/state
 export { cellRenderedText, isSortable, isFilterable, compare, distinctEntries } from './components/table/utils.js';
 export { default as GenericCRUD } from './components/crud/GenericCRUD.svelte';
 export { default as Field } from './components/crud/Field.svelte';
+export { default as EmbeddedField } from './components/crud/EmbeddedField.svelte';
 export { default as Header } from './components/common/Header.svelte';
 export { default as AvatarCell } from './components/crud/columns/Avatar.svelte';
 export { default as IconCell } from './components/crud/columns/Icon.svelte';
@@ -47,3 +48,4 @@ export { formatBoolean, formatDatetime, formatTruncateTextUpTo, formatInstance }
 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';
+export { emptyRecord, defaultItemLabel } from './components/crud/utils/embedded.js';

package/dist/index.js

@@ -29,6 +29,7 @@ export { cellRenderedText, isSortable, isFilterable, compare, distinctEntries }
 // CRUD components
 export { default as GenericCRUD } from './components/crud/GenericCRUD.svelte';
 export { default as Field } from './components/crud/Field.svelte';
+export { default as EmbeddedField } from './components/crud/EmbeddedField.svelte';
 export { default as Header } from './components/common/Header.svelte';
 export { default as AvatarCell } from './components/crud/columns/Avatar.svelte';
 export { default as IconCell } from './components/crud/columns/Icon.svelte';
@@ -44,3 +45,4 @@ 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';
+export { emptyRecord, defaultItemLabel } from './components/crud/utils/embedded.js';

package/dist/types/attribute.d.ts

@@ -1,6 +1,6 @@
 import type { FullAutoFill } from 'svelte/elements';
 import type { CellComponent, CellFormatter } from './table.js';
-export type AttributeType = 'text' | 'email' | 'password' | 'number' | 'boolean' | 'textarea' | 'file' | 'select' | 'datetime';
+export type AttributeType = 'text' | 'email' | 'password' | 'number' | 'boolean' | 'textarea' | 'file' | 'select' | 'datetime' | 'embedded';
 export declare const AttributeType: {
     readonly text: "text";
     readonly email: "email";
@@ -11,6 +11,7 @@ export declare const AttributeType: {
     readonly file: "file";
     readonly select: "select";
     readonly datetime: "datetime";
+    readonly embedded: "embedded";
 };
 export type InterfaceMetadata<T> = Partial<Record<keyof T, AttributeMetadata>>;
 export type SelectOption = {
@@ -23,6 +24,9 @@ export type DependentOptionsResolver = (data: any, record: Record<string, unknow
 export type SearchResolver = (query: string) => Promise<SelectOption[]>;
 export type DisabledResolver = (record: Record<string, unknown>) => boolean;
 export type SeedResolver = (instance: any) => unknown;
+/** Embedded fields only: renders a short summary for one item in the list.
+ * Falls back to a dash-joined summary of the item's sub-field values. */
+export type EmbeddedItemLabelResolver = (item: Record<string, unknown>) => string;
 export type AttributeMetadata = {
     label?: string;
     type?: AttributeType;
@@ -56,4 +60,8 @@ export type AttributeMetadata = {
     minLength?: number;
     maxLength?: number;
     pattern?: string;
+    /** Embedded fields only: schema for each item added through the "+" modal. */
+    fields?: InterfaceMetadata<any>;
+    /** Embedded fields only: short label for an item in the list. */
+    itemLabel?: EmbeddedItemLabelResolver;
 };

package/dist/types/attribute.js

@@ -8,4 +8,5 @@ export const AttributeType = {
     file: 'file',
     select: 'select',
     datetime: 'datetime',
+    embedded: 'embedded',
 };

package/dist/types/crud.d.ts

@@ -39,6 +39,11 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
     minLength?: number;
     maxLength?: number;
     pattern?: string;
+    /** Embedded fields only: sub-field definitions for each item, built from
+     * the metadata's `fields`. */
+    fields?: FieldDefinition<Record<string, unknown>>[];
+    /** Embedded fields only: short label for an item in the list. */
+    itemLabel?: (item: Record<string, unknown>) => string;
 }
 export interface ActionConfiguration<T extends object = Record<string, unknown>> {
     enabled?: boolean;

package/package.json

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