runeforge 0.0.23 → 0.0.25

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';
@@ -45,6 +46,7 @@
   const displayValue = $derived(saved == null ? '' : String(saved));
   const selectOptions = $derived(field.dependentOptions ? field.dependentOptions(record) : (field.options ?? []));
   const fieldDisabled = $derived(field.disabled ? field.disabled(record) : false);
+  const fieldRequired = $derived(typeof field.required === 'function' ? field.required(record) : !!field.required);
 
   $effect(() => {
     if (!field.dependentOptions) return;
@@ -66,7 +68,7 @@
     text={labelText}
     for={field.attribute}
     capitalize={true}
-    required={field.required && !readonly}
+    required={fieldRequired && !readonly}
   />
 
   {#if field.type === 'boolean'}
@@ -147,6 +149,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

@@ -5,9 +5,24 @@ import { fieldLabel } from './misc.js';
 // styled consistently regardless of which rule failed.
 export function validateAll(fields, formData, strings) {
     const errors = {};
+    const record = Object.fromEntries(formData.entries());
     for (const field of fields) {
+        const required = typeof field.required === 'function' ? field.required(record) : !!field.required;
+        if (field.type === 'embedded') {
+            let items;
+            try {
+                items = JSON.parse(String(formData.get(field.attribute) ?? '[]'));
+            }
+            catch {
+                items = [];
+            }
+            if (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) {
+        if (required && !val) {
             errors[field.attribute] = strings.required(fieldLabel(field));
             continue;
         }

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/components/form/Select.svelte

@@ -24,9 +24,11 @@
     disabled?: boolean;
   } = $props();
 
-  let open = $state(false);
+  const popId = $props.id();
+  const anchorName = `--select-anchor-${popId}`;
+
   let query = $state('');
-  let container: HTMLDivElement;
+  let popoverEl: HTMLElement | undefined = $state();
 
   // Options resolved by `searchFn` for the current query; null while no
   // server search has run yet (e.g. box just opened, query still empty).
@@ -71,37 +73,28 @@
       : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? placeholder)
   );
 
-  function toggle() {
-    if (disabled) return;
-    open = !open;
-    if (!open) query = '';
-  }
-
   function pick(option: { value: string; label: string }) {
     value = option.value;
     pickedLabel = option.label;
-    open = false;
     query = '';
+    popoverEl?.hidePopover();
   }
 
   function clear() {
     value = '';
     pickedLabel = null;
-    open = false;
     query = '';
+    popoverEl?.hidePopover();
   }
 
-  function onWindowClick(e: MouseEvent) {
-    if (open && !container.contains(e.target as Node)) {
-      open = false;
-      query = '';
-    }
+  // Catches dismissal paths that don't go through pick()/clear() (outside
+  // click, Escape), so a stale search doesn't linger for next time it opens.
+  function onToggle(e: Event) {
+    if ((e as ToggleEvent).newState === 'closed') query = '';
   }
 </script>
 
-<svelte:window onclick={onWindowClick} />
-
-<div class="relative w-full" bind:this={container}>
+<div class="relative w-full">
   {#if name}
     <input type="hidden" {name} {value} />
   {/if}
@@ -112,52 +105,58 @@
     class:select-error={!!error}
     class:opacity-40={!value}
     {disabled}
-    onclick={toggle}
+    popovertarget={popId}
+    style="anchor-name:{anchorName}"
   >
     {selectedLabel}
   </button>
 
-  {#if open}
-    <div class="absolute z-50 mt-1 w-full rounded-box border border-base-content/10 bg-base-100 shadow-lg">
-      <div class="p-2">
-        <input
-          type="text"
-          class="input input-bordered input-sm w-full"
-          placeholder={strings.selectSearch}
-          bind:value={query}
-          autocomplete="off"
-        />
-      </div>
-      <ul class="max-h-48 overflow-y-auto p-1">
+  <div
+    popover="auto"
+    id={popId}
+    bind:this={popoverEl}
+    style="position-anchor:{anchorName}; width:anchor-size(width);"
+    class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
+    ontoggle={onToggle}
+  >
+    <div class="p-2">
+      <input
+        type="text"
+        class="input input-bordered input-sm w-full"
+        placeholder={strings.selectSearch}
+        bind:value={query}
+        autocomplete="off"
+      />
+    </div>
+    <ul class="max-h-48 overflow-y-auto p-1">
+      <li>
+        <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={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
             type="button"
-            class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-            onclick={clear}
+            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)}
           >
-            {placeholder}
+            {option.label}
           </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
-              type="button"
-              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)}
-            >
-              {option.label}
-            </button>
-          </li>
-        {/each}
-        {#if !searching && filtered.length === 0}
-          <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
-        {/if}
-      </ul>
-    </div>
-  {/if}
+      {/each}
+      {#if !searching && filtered.length === 0}
+        <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
+      {/if}
+    </ul>
+  </div>
 </div>

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 = {
@@ -22,7 +23,11 @@ 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 RequiredResolver = (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;
@@ -36,7 +41,9 @@ export type AttributeMetadata = {
     seed?: SeedResolver;
     component?: CellComponent<any, any>;
     formatter?: FormatterResolver;
-    required?: boolean;
+    /** Pass a function to require a field only in certain conditions, e.g. a
+     * quantity that only applies to some of a select's options. */
+    required?: boolean | RequiredResolver;
     autocomplete?: FullAutoFill;
     placeholder?: string;
     /** Initial value on the create form. Pass a plain value, or a function of
@@ -56,4 +63,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',
 };