runeforge 0.0.25 → 0.0.27

package/README.md

@@ -36,6 +36,8 @@ A SvelteKit toolkit that forges forms, tables, actions, and CRUD workflows from
     - [Field grouping](#field-grouping)
     - [Default values](#default-values)
     - [Select options](#select-options)
+    - [Multiselect fields](#multiselect-fields)
+    - [Tree fields](#tree-fields)
     - [Embedded fields (sub-documents)](#embedded-fields-sub-documents)
   - [Components](#components)
     - [GenericCRUD](#genericcrud)
@@ -91,10 +93,11 @@ Runeforge provides a set of composable, metadata-driven components for building
 
 - **GenericCRUD** — a single orchestrator component that wires together list, create, read, and update views from field and column definitions.
 - **PaginatedTable** — a full-featured table with sorting, filtering, pagination, and row selection, usable either fully client-side or driven by a server-paginated backend.
-- **Field system** — declarative field definitions that drive both form rendering and display, supporting text, email, password, number, boolean, textarea, file, select, datetime, and embedded (sub-document list) types.
+- **Field system** — declarative field definitions that drive both form rendering and display, supporting text, email, password, number, boolean, textarea, file, select, multiselect, tree, datetime, and embedded (sub-document list) types.
 - **Validation** — built-in `required`, `min`/`max`, `integer`, `minLength`/`maxLength`, and `pattern` rules, checked client-side before submit with consistent, translatable error messages.
-- **Conditional fields & field grouping** — disable a field based on the current values of others in the same form, and visually group related fields under a titled `fieldset`.
-- **Smart select fields** — options can be static, computed from page data, dependent on another field's value, or resolved live from the server as the user types.
+- **Conditional fields & field grouping** — disable, or entirely hide, a field based on the current values of others in the same form, and visually group related fields under a titled `fieldset`.
+- **Smart select fields** — options can be static, computed from page data, dependent on another field's value, or resolved live from the server as the user types. `multiselect` supports the same resolvers for a checkbox-style multiple-choice list.
+- **Tree fields** — a hierarchical, cascading-selection picker (e.g. categories with parent/child relationships) driven by a flat option list with a `parentValue` link.
 - **Embedded fields** — model one-to-many sub-documents (e.g. line items, adjustments) as an in-form add/edit list backed by a single JSON field.
 - **Custom row & bulk actions** — add entity-specific actions (in a panel or via redirect) alongside the built-in view/edit/delete, and bulk actions that operate on the current selection.
 - **CSV/XLSX export** — one-click export of the current table view, with optional Excel support via the `xlsx` package.
@@ -347,20 +350,21 @@ Every entry in an `InterfaceMetadata<T>` object is an `AttributeMetadata` — a
 | Option | Type | Applies to | Description |
 | --- | --- | --- | --- |
 | `label` | `string` | all | Column header, form label, and the field name used in validation messages |
-| `type` | `AttributeType` | all | `text` \| `email` \| `password` \| `number` \| `boolean` \| `textarea` \| `file` \| `select` \| `datetime` \| `embedded` |
+| `type` | `AttributeType` | all | `text` \| `email` \| `password` \| `number` \| `boolean` \| `textarea` \| `file` \| `select` \| `multiselect` \| `tree` \| `datetime` \| `embedded` |
 | `required` | `boolean \| (record) => boolean` | all | Marks the label and enforces a non-empty value on submit. The function form re-evaluates against the other fields' current values — see [Validation](#validation) |
 | `autocomplete` | `FullAutoFill` | text-like | Native `autocomplete` attribute |
-| `placeholder` | `string` | text-like, select | Placeholder text |
+| `placeholder` | `string` | text-like, select, multiselect | Placeholder text |
 | `default` | `value \| (data) => value` | all | Initial value on the create form — see [Default values](#default-values) |
 | `min` / `max` | `number` | `number` | Numeric range validation |
 | `integer` | `boolean` | `number` | Rejects non-whole numbers |
 | `minLength` / `maxLength` | `number` | text-like | Character-count validation |
 | `pattern` | `string` | text-like | Regex the value must match (`new RegExp(pattern)`) |
 | `disabled` | `(record) => boolean` | all | Conditionally disables the input — see [Conditional fields](#conditional-fields) |
+| `hidden` | `boolean \| (record) => boolean` | all | Conditionally removes the field from the form entirely — not rendered, not validated, not submitted — see [Conditional fields](#conditional-fields) |
 | `groupedAs` | `string` | all | Visually groups fields under a titled section — see [Field grouping](#field-grouping) |
-| `options` | `SelectOption[] \| (data) => SelectOption[]` | `select` | Static or computed option list — see [Select options](#select-options) |
-| `dependentOptions` | `(data, record) => SelectOption[]` | `select` | Options derived from other fields' current values |
-| `search` | `(query) => Promise<SelectOption[]>` | `select` | Server-side option search as the user types |
+| `options` | `SelectOption[] \| (data) => SelectOption[]` | `select`, `multiselect`, `tree` | Static or computed option list — see [Select options](#select-options). `tree` options additionally accept `parentValue` — see [Tree fields](#tree-fields) |
+| `dependentOptions` | `(data, record) => SelectOption[]` | `select`, `multiselect`, `tree` | Options derived from other fields' current values |
+| `search` | `(query) => Promise<SelectOption[]>` | `select`, `multiselect` | Server-side option search as the user types |
 | `seed` | `(instance) => unknown` | all | Overrides how the update form seeds this field from the loaded record |
 | `fields` | `InterfaceMetadata<any>` | `embedded` | Sub-field schema for each item — see [Embedded fields](#embedded-fields-sub-documents) |
 | `itemLabel` | `(item) => string` | `embedded` | Summary label for an item in the embedded list |
@@ -437,6 +441,33 @@ quantity: {
 },
 ```
 
+`hidden` follows the exact same `boolean | (record) => boolean` shape, but goes a step further than `disabled`: a hidden field isn't just greyed out, it's removed from the form entirely — not rendered, not required-checked, not submitted. Use it when a field only makes sense for certain values of another field, rather than merely being non-editable:
+
+```ts
+paymentMethod: {
+  label: 'Payment method',
+  type: AttributeType.select,
+  options: [
+    { value: 'card', label: 'Credit card' },
+    { value: 'cash', label: 'Cash on delivery' },
+  ],
+},
+cardNumber: {
+  label: 'Card number',
+  type: AttributeType.text,
+  hidden: (record) => record.paymentMethod !== 'card',
+  required: (record) => record.paymentMethod === 'card',
+},
+cardExpiry: {
+  label: 'Expiry date',
+  type: AttributeType.text,
+  hidden: (record) => record.paymentMethod !== 'card',
+  required: (record) => record.paymentMethod === 'card',
+},
+```
+
+Switching `paymentMethod` between `card` and `cash` swaps which fields are present, live, in the same create/edit view — no separate step or modal needed to collect the payment-specific details.
+
 ### Field grouping
 
 Fields sharing the same `groupedAs` string render together inside a titled `fieldset`, at the position of the group's first field. Fields without `groupedAs` keep the original flat layout.
@@ -524,6 +555,50 @@ export const actions: Actions = {
 };
 ```
 
+### Multiselect fields
+
+`AttributeType.multiselect` is a checkbox-style multiple-choice dropdown — the same `options`/`dependentOptions`/`default`/`search` resolvers as `select` (see [Select options](#select-options)), but the stored value is a `string[]` instead of a single `string`. Picking an option toggles it without closing the dropdown, and the closed-state button summarizes the count (`"2 selected"`).
+
+```ts
+tags: {
+  label: 'Tags',
+  type: AttributeType.multiselect,
+  options: [
+    { value: 'fragile', label: 'Fragile' },
+    { value: 'perishable', label: 'Perishable' },
+    { value: 'oversized', label: 'Oversized' },
+  ],
+  default: [],
+},
+```
+
+Like `embedded`, the value is submitted as a single hidden field holding a JSON array — parse it back out the same way:
+
+```ts
+const tags = JSON.parse(String(data.get('tags') ?? '[]'));
+```
+
+If the field also sets `dependentOptions`, selections that fall outside the recomputed list are pruned automatically (rather than clearing the whole field, as a single `select` does) — e.g. narrowing a `provinces` multiselect to only the options valid for the currently selected `country`.
+
+### Tree fields
+
+`AttributeType.tree` is a hierarchical picker — checkboxes in a collapsible tree, where checking a parent node cascades the selection to all of its descendants. It's driven by the same flat `SelectOption[]` as `select`/`multiselect`, plus an optional `parentValue` linking each option to its parent's `value` (omit or set `null` for a root node):
+
+```ts
+categories: {
+  label: 'Categories',
+  type: AttributeType.tree,
+  options: (data: { categories?: ICategory[] }) =>
+    (data.categories ?? []).map((c) => ({
+      value: String(c.id),
+      label: c.name,
+      parentValue: c.parentCategory != null ? String(c.parentCategory) : null,
+    })),
+},
+```
+
+The stored value is a `string[]` of selected node values, submitted the same way as `multiselect` — a single hidden field holding a JSON array, parsed back out server-side with `JSON.parse`. `dependentOptions` and `hidden` work the same as any other field type.
+
 ### Embedded fields (sub-documents)
 
 `AttributeType.embedded` models a one-to-many list of sub-records — line items, adjustments, contacts, anything you'd otherwise store as an array of objects — entirely within one form field. It renders as a list with an "+ Add" button; each item is added/edited through a modal built from the `fields` sub-schema, and removed with a single click. The whole list is serialized to JSON and submitted as a single hidden form field.

package/dist/components/crud/Field.svelte

@@ -3,6 +3,8 @@
   import Avatar from '../Avatar.svelte';
   import Label from '../form/Label.svelte';
   import Select from '../form/Select.svelte';
+  import MultiSelect from '../form/MultiSelect.svelte';
+  import Tree from '../form/Tree.svelte';
   import EmbeddedField from './EmbeddedField.svelte';
   import { fieldLabel, initials } from './utils/misc.js';
   import type { FieldDefinition } from '../../types/crud.js';
@@ -47,16 +49,30 @@
   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);
+  const fieldHidden = $derived(typeof field.hidden === 'function' ? field.hidden(record) : !!field.hidden);
+  const isMultiValued = $derived(field.type === 'multiselect' || field.type === 'tree');
 
   $effect(() => {
-    if (!field.dependentOptions) return;
+    if (!field.dependentOptions || isMultiValued) return;
     const current = record[field.attribute];
     if (current && !selectOptions.some((o) => o.value === String(current))) {
       record[field.attribute] = '';
     }
   });
+
+  $effect(() => {
+    if (!field.dependentOptions || !isMultiValued) return;
+    const current = record[field.attribute];
+    if (!Array.isArray(current)) return;
+    const validValues = new Set(selectOptions.map((o) => o.value));
+    const pruned = current.filter((v) => validValues.has(String(v)));
+    if (pruned.length !== current.length) {
+      record[field.attribute] = pruned;
+    }
+  });
 </script>
 
+{#if !fieldHidden}
 <div class="flex flex-col gap-1">
   {#if field.type === 'file'}
     <div class="flex justify-center">
@@ -151,6 +167,43 @@
     {/if}
   {:else if field.type === 'embedded'}
     <EmbeddedField {field} bind:record {readonly} />
+  {:else if field.type === 'multiselect'}
+    {#if readonly}
+      <input
+        type="text"
+        id={field.attribute}
+        class="input input-bordered w-full"
+        value={(Array.isArray(saved) ? saved : []).map((v) => selectOptions.find((o) => o.value === String(v))?.label ?? String(v)).join(', ')}
+        disabled
+      />
+    {:else}
+      <MultiSelect
+        name={field.attribute}
+        bind:value={record[field.attribute] as string[]}
+        options={selectOptions}
+        search={field.search}
+        placeholder={field.placeholder}
+        disabled={fieldDisabled}
+        {error}
+      />
+    {/if}
+  {:else if field.type === 'tree'}
+    {#if readonly}
+      <input
+        type="text"
+        id={field.attribute}
+        class="input input-bordered w-full"
+        value={(Array.isArray(saved) ? saved : []).map((v) => selectOptions.find((o) => o.value === String(v))?.label ?? String(v)).join(', ')}
+        disabled
+      />
+    {:else}
+      <Tree
+        name={field.attribute}
+        bind:value={record[field.attribute] as string[]}
+        options={selectOptions}
+        disabled={fieldDisabled}
+      />
+    {/if}
   {:else if readonly}
     <input
       type={field.type ?? 'text'}
@@ -178,3 +231,4 @@
     <span class="text-error text-xs">{error}</span>
   {/if}
 </div>
+{/if}

package/dist/components/crud/GenericCRUD.svelte

@@ -11,6 +11,7 @@
 		inferType,
 		buildFieldDefinitions
 	} from './utils/resolution.js';
+	import { defaultItemLabel } from './utils/embedded.js';
 	import { isFilterable } from '../table/utils.js';
 	import type { XlsxModule } from '../table/export.js';
 	import type { AttributeMetadata } from '../../types/attribute.js';
@@ -150,15 +151,41 @@
 			(meta
 				? (Object.entries(meta) as [string, AttributeMetadata][])
 						.filter(([, m]) => !m.excludedFromList)
-						.map(([k, m]) => ({
-							attribute: k as keyof T & string,
-							title: m.label ?? k,
-							type: m.type,
-							formatter: resolveFormatter(m, data),
-							component: m.component,
-							sortable: m.sortable,
-							filterable: m.filterable
-						}))
+						.map(([k, m]) => {
+							const embeddedFields =
+								m.type === 'embedded' && m.fields
+									? buildFieldDefinitions(m.fields, data, 'excludedFromList', new Set())
+									: undefined;
+							// Arrays of objects have no sensible raw cell value, so an
+							// embedded column without an explicit formatter falls back to
+							// joining each item's label (itemLabel, or the same
+							// sub-field-joining summary the embedded form list uses).
+							const formatter =
+								resolveFormatter(m, data) ??
+								(embeddedFields
+									? (value: unknown) =>
+											Array.isArray(value)
+												? value
+														.map((item) =>
+															m.itemLabel
+																? m.itemLabel(item as Record<string, unknown>)
+																: defaultItemLabel(embeddedFields, item as Record<string, unknown>)
+														)
+														.join(', ')
+												: ''
+									: undefined);
+							return {
+								attribute: k as keyof T & string,
+								title: m.label ?? k,
+								type: m.type,
+								formatter,
+								component: m.component,
+								sortable: m.sortable,
+								filterable: m.filterable,
+								fields: embeddedFields,
+								itemLabel: m.itemLabel
+							};
+						})
 				: entityData.length > 0
 					? (Object.keys(entityData[0]) as (keyof T & string)[])
 							.filter((k) => !excluded.has(k))

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

@@ -1,4 +1,5 @@
 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 formatEmbeddedFieldValue<T extends object = Record<string, unknown>>(f: FieldDefinition<T>, raw: unknown): string;
 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

@@ -11,6 +11,12 @@ export function seedField(f, raw) {
         return raw ?? null;
     if (f.type === 'embedded')
         return Array.isArray(raw) ? raw : [];
+    if (f.type === 'multiselect' || f.type === 'tree')
+        // Selected values are matched against SelectOption.value (always a
+        // string), so a stored array of raw ids (e.g. numbers from JSON) must
+        // be stringified the same way a scalar select's value is below —
+        // otherwise `Set.has`/`Array.includes` silently never match.
+        return Array.isArray(raw) ? raw.map((v) => String(v)) : [];
     return String(raw ?? '');
 }
 // Shared by Create.svelte and EmbeddedField.svelte: both need an empty draft
@@ -20,6 +26,18 @@ export function seedField(f, raw) {
 export function emptyRecord(fields) {
     return Object.fromEntries(fields.map((f) => [f.attribute, seedField(f, f.default)]));
 }
+// Shared by defaultItemLabel and the CSV/XLSX export column expansion: renders
+// one sub-field's raw stored value as display text, resolving a select's
+// option label instead of its stored value. Booleans are left to the caller
+// since the item-label summary and an export cell want different renderings
+// (omit-when-false vs. an explicit true/false column).
+export function formatEmbeddedFieldValue(f, raw) {
+    if (raw == null || raw === '')
+        return '';
+    if (f.type === 'select')
+        return f.options?.find((o) => o.value === String(raw))?.label ?? String(raw);
+    return String(raw);
+}
 // 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.
@@ -27,13 +45,9 @@ 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);
+        return formatEmbeddedFieldValue(f, raw) || null;
     })
         .filter((v) => !!v)
         .join(' · ');

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

@@ -4,4 +4,4 @@ export declare function resolveOptions(m: AttributeMetadata, d: unknown): Select
 export declare function resolveDefault(m: AttributeMetadata, d: unknown): unknown;
 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>[];
+export declare function buildFieldDefinitions<T extends object = Record<string, unknown>>(meta: Partial<Record<string, AttributeMetadata>>, data: unknown, excludedFlag: 'excludedFromCreate' | 'excludedFromRead' | 'excludedFromUpdate' | 'excludedFromList', excluded: Set<string>): FieldDefinition<T>[];

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

@@ -44,6 +44,7 @@ export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
             : undefined,
         search: m.search,
         disabled: m.disabled,
+        hidden: m.hidden,
         seed: m.seed,
         groupedAs: m.groupedAs,
         min: m.min,

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

@@ -0,0 +1,3 @@
+import type { SelectOption } from '../../../types/attribute.js';
+export declare function buildChildrenByParent(options: SelectOption[]): Map<string | null, SelectOption[]>;
+export declare function collectDescendantIds(value: string, childrenByParent: Map<string | null, SelectOption[]>): string[];

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

@@ -0,0 +1,27 @@
+// Shared by the `tree` field type (Tree.svelte) and its readonly rendering:
+// groups a flat SelectOption[] by `parentValue`, so the tree can be walked
+// without re-scanning the full list at every node.
+export function buildChildrenByParent(options) {
+    const map = new Map();
+    for (const option of options) {
+        const key = option.parentValue ?? null;
+        const list = map.get(key) ?? [];
+        list.push(option);
+        map.set(key, list);
+    }
+    return map;
+}
+// Shared by Tree.svelte: when a node is checked/unchecked, every descendant
+// follows the same selection state (cascading select), matching how the
+// original per-app CategoryTree component behaved.
+export function collectDescendantIds(value, childrenByParent) {
+    const ids = [];
+    function visit(parentValue) {
+        for (const child of childrenByParent.get(parentValue) ?? []) {
+            ids.push(child.value);
+            visit(child.value);
+        }
+    }
+    visit(value);
+    return ids;
+}

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

@@ -7,8 +7,11 @@ export function validateAll(fields, formData, strings) {
     const errors = {};
     const record = Object.fromEntries(formData.entries());
     for (const field of fields) {
+        const hidden = typeof field.hidden === 'function' ? field.hidden(record) : !!field.hidden;
+        if (hidden)
+            continue;
         const required = typeof field.required === 'function' ? field.required(record) : !!field.required;
-        if (field.type === 'embedded') {
+        if (field.type === 'embedded' || field.type === 'multiselect' || field.type === 'tree') {
             let items;
             try {
                 items = JSON.parse(String(formData.get(field.attribute) ?? '[]'));

package/dist/components/form/MultiSelect.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { SvelteMap } from 'svelte/reactivity';
+  import { getStrings } from '../../i18n/context.js';
+  import type { SearchResolver, SelectOption } from '../../types/attribute.js';
+
+  const strings = getStrings();
+
+  let {
+    name,
+    value = $bindable([]),
+    options = [],
+    search: searchFn,
+    searchDebounceMs = 300,
+    placeholder = strings.selectPlaceholder,
+    error = '',
+    disabled = false,
+  }: {
+    name?: string;
+    value?: string[];
+    options?: SelectOption[];
+    search?: SearchResolver;
+    searchDebounceMs?: number;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+  } = $props();
+
+  const popId = $props.id();
+  const anchorName = `--multiselect-anchor-${popId}`;
+
+  let query = $state('');
+  let popoverEl: HTMLElement | undefined = $state();
+
+  let remoteResults = $state<SelectOption[] | null>(null);
+  let searching = $state(false);
+  const pickedLabels = new SvelteMap<string, string>();
+
+  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(
+    searchFn
+      ? (remoteResults ?? options)
+      : query.trim()
+        ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+        : options
+  );
+
+  const selectedLabels = $derived(
+    value.map((v) => options.find((o) => o.value === v)?.label ?? pickedLabels.get(v) ?? v)
+  );
+  const buttonLabel = $derived(value.length === 0 ? placeholder : strings.selectedCount(value.length));
+
+  function toggle(option: SelectOption) {
+    if (value.includes(option.value)) {
+      value = value.filter((v) => v !== option.value);
+    } else {
+      value = [...value, option.value];
+      pickedLabels.set(option.value, option.label);
+    }
+  }
+
+  function clear() {
+    value = [];
+    pickedLabels.clear();
+    query = '';
+  }
+
+  function onToggle(e: Event) {
+    if ((e as ToggleEvent).newState === 'closed') query = '';
+  }
+</script>
+
+<div class="relative w-full">
+  {#if name}
+    <input type="hidden" {name} value={JSON.stringify(value)} />
+  {/if}
+
+  <button
+    type="button"
+    class="select select-bordered w-full text-left font-normal"
+    class:select-error={!!error}
+    class:opacity-40={value.length === 0}
+    {disabled}
+    popovertarget={popId}
+    style="anchor-name:{anchorName}"
+    title={selectedLabels.join(', ')}
+  >
+    {buttonLabel}
+  </button>
+
+  <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)}
+        {@const checked = value.includes(option.value)}
+        <li>
+          <button
+            type="button"
+            class="flex w-full items-center gap-2 rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
+            class:bg-primary={checked}
+            class:text-primary-content={checked}
+            onclick={() => toggle(option)}
+          >
+            <input type="checkbox" class="checkbox checkbox-sm" {checked} tabindex="-1" readonly />
+            {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>
+</div>

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

@@ -0,0 +1,14 @@
+import type { SearchResolver, SelectOption } from '../../types/attribute.js';
+type $$ComponentProps = {
+    name?: string;
+    value?: string[];
+    options?: SelectOption[];
+    search?: SearchResolver;
+    searchDebounceMs?: number;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+};
+declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/components/form/Tree.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { SelectOption } from '../../types/attribute.js';
+	import { buildChildrenByParent, collectDescendantIds } from '../crud/utils/tree.js';
+	import TreeNode from './TreeNode.svelte';
+
+	let {
+		name,
+		value = $bindable([]),
+		options = [],
+		disabled = false,
+		columns = 1,
+	}: {
+		name?: string;
+		value?: string[];
+		options?: SelectOption[];
+		disabled?: boolean;
+		columns?: number;
+	} = $props();
+
+	const childrenByParent = $derived(buildChildrenByParent(options));
+	const selected = $derived(new Set(value));
+	const roots = $derived(childrenByParent.get(null) ?? []);
+
+	function toggle(nodeValue: string, checked: boolean) {
+		const affected = [nodeValue, ...collectDescendantIds(nodeValue, childrenByParent)];
+		if (checked) {
+			value = [...new Set([...value, ...affected])];
+		} else {
+			const affectedSet = new Set(affected);
+			value = value.filter((v) => !affectedSet.has(v));
+		}
+	}
+</script>
+
+<div
+	class="rounded-box border border-base-300 p-2"
+	class:opacity-50={disabled}
+	class:pointer-events-none={disabled}
+>
+	{#if name}
+		<input type="hidden" {name} value={JSON.stringify(value)} />
+	{/if}
+	{#if roots.length === 0}
+		<p class="px-1 py-2 text-sm text-base-content/40">—</p>
+	{/if}
+	<div class:leaf-columns={columns > 1} style={`--columns: ${columns}`}>
+		{#each roots as root (root.value)}
+			<TreeNode node={root} {childrenByParent} {selected} onToggle={toggle} {disabled} depth={0} {columns} />
+		{/each}
+	</div>
+</div>
+
+<style>
+	@media (min-width: 1024px) {
+		.leaf-columns {
+			columns: var(--columns);
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { SelectOption } from '../../types/attribute.js';
+type $$ComponentProps = {
+    name?: string;
+    value?: string[];
+    options?: SelectOption[];
+    disabled?: boolean;
+    columns?: number;
+};
+declare const Tree: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/components/form/TreeNode.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { SelectOption } from '../../types/attribute.js';
+	import TreeNode from './TreeNode.svelte';
+
+	let {
+		node,
+		childrenByParent,
+		selected,
+		onToggle,
+		disabled,
+		depth,
+		columns,
+	}: {
+		node: SelectOption;
+		childrenByParent: Map<string | null, SelectOption[]>;
+		selected: Set<string>;
+		onToggle: (value: string, checked: boolean) => void;
+		disabled: boolean;
+		depth: number;
+		columns: number;
+	} = $props();
+
+	let expanded = $state(true);
+
+	const children = $derived(childrenByParent.get(node.value) ?? []);
+	const hasChildren = $derived(children.length > 0);
+</script>
+
+<div class="flex flex-col" style={`--columns: ${columns}`}>
+	<div
+		class="flex w-full items-center gap-1 rounded py-1 pr-2 transition-colors hover:bg-base-200"
+		style={`padding-left: ${depth * 1.25}rem`}
+	>
+		{#if hasChildren}
+			<button
+				type="button"
+				class="btn btn-ghost btn-xs btn-circle"
+				aria-label={expanded ? 'Collapse' : 'Expand'}
+				onclick={() => (expanded = !expanded)}
+			>
+				<span class="inline-block text-xs transition-transform" class:rotate-90={expanded}>▸</span>
+			</button>
+		{:else}
+			<span class="inline-block size-6"></span>
+		{/if}
+
+		<input
+			type="checkbox"
+			class="checkbox checkbox-sm"
+			checked={selected.has(node.value)}
+			{disabled}
+			onchange={(e) => onToggle(node.value, (e.currentTarget as HTMLInputElement).checked)}
+			aria-label={node.label}
+		/>
+
+		<span>{node.label}</span>
+	</div>
+
+	{#if expanded && hasChildren}
+		{#each children as child (child.value)}
+			<TreeNode node={child} {childrenByParent} {selected} {onToggle} {disabled} depth={depth + 1} {columns} />
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { SelectOption } from '../../types/attribute.js';
+import TreeNode from './TreeNode.svelte';
+type $$ComponentProps = {
+    node: SelectOption;
+    childrenByParent: Map<string | null, SelectOption[]>;
+    selected: Set<string>;
+    onToggle: (value: string, checked: boolean) => void;
+    disabled: boolean;
+    depth: number;
+    columns: number;
+};
+declare const TreeNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;

package/dist/components/table/export.d.ts

@@ -13,5 +13,9 @@ export interface XlsxModule {
     };
     writeFile: (workbook: unknown, filename: string) => void;
 }
+export declare function buildTable<T extends object>(rows: T[], columns: ColumnDefinition<T>[]): {
+    headers: string[];
+    body: string[][];
+};
 export declare function downloadCsv<T extends object>(rows: T[], columns: ColumnDefinition<T>[], filename: string): void;
 export declare function downloadXlsx<T extends object>(rows: T[], columns: ColumnDefinition<T>[], filename: string, xlsx: XlsxModule): void;

package/dist/components/table/export.js

@@ -1,7 +1,39 @@
 import { cellRenderedText } from './utils.js';
-function buildTable(rows, columns) {
-    const headers = columns.map((col) => col.title ?? col.attribute);
-    const body = rows.map((row) => columns.map((col) => cellRenderedText(row, col)));
+import { formatEmbeddedFieldValue } from '../crud/utils/embedded.js';
+function isEmbeddedColumn(col) {
+    return col.type === 'embedded' && !!col.fields?.length;
+}
+// Embedded columns hold one array of sub-records per row — there's no single
+// plain-text cell for that, so export (unlike the on-screen table, which
+// shows a joined summary) expands each one into its own row per item and one
+// sub-column per field, duplicating the row's other column values across
+// them. Rows are aligned by index across embedded columns rather than
+// cross-joined, since unrelated embedded lists on the same row (e.g. two
+// independent one-to-many relations) have no meaningful pairing.
+export function buildTable(rows, columns) {
+    const embeddedColumns = columns.filter(isEmbeddedColumn);
+    if (embeddedColumns.length === 0) {
+        const headers = columns.map((col) => col.title ?? col.attribute);
+        const body = rows.map((row) => columns.map((col) => cellRenderedText(row, col)));
+        return { headers, body };
+    }
+    const headers = columns.flatMap((col) => isEmbeddedColumn(col)
+        ? col.fields.map((f) => `${col.title ?? col.attribute} - ${f.title ?? f.attribute}`)
+        : [col.title ?? col.attribute]);
+    const body = [];
+    for (const row of rows) {
+        const itemCount = Math.max(1, ...embeddedColumns.map((col) => row[col.attribute]?.length ?? 0));
+        for (let i = 0; i < itemCount; i++) {
+            const line = columns.flatMap((col) => {
+                if (!isEmbeddedColumn(col))
+                    return [cellRenderedText(row, col)];
+                const items = row[col.attribute] ?? [];
+                const item = items[i];
+                return col.fields.map((f) => (item ? formatEmbeddedFieldValue(f, item[f.attribute]) : ''));
+            });
+            body.push(line);
+        }
+    }
     return { headers, body };
 }
 function escapeCsvCell(value) {

package/dist/i18n/en.js

@@ -12,6 +12,7 @@ export const en = {
     selectSearch: 'Search...',
     selectSearching: 'Searching...',
     selectNoResults: 'No results',
+    selectedCount: (count) => `${count} selected`,
     view: 'View',
     edit: 'Edit',
     delete: 'Delete',

package/dist/i18n/es.js

@@ -12,6 +12,7 @@ export const es = {
     selectSearch: 'Buscar...',
     selectSearching: 'Buscando...',
     selectNoResults: 'Sin resultados',
+    selectedCount: (count) => `${count} seleccionado${count === 1 ? '' : 's'}`,
     view: 'Ver',
     edit: 'Editar',
     delete: 'Eliminar',

package/dist/i18n/types.d.ts

@@ -12,6 +12,7 @@ export interface RuneforgeStrings {
     selectSearch: string;
     selectSearching: string;
     selectNoResults: string;
+    selectedCount: (count: number) => string;
     view: string;
     edit: string;
     delete: string;

package/dist/index.d.ts

@@ -17,6 +17,8 @@ export { default as Button } from './components/form/Button.svelte';
 export { default as Label } from './components/form/Label.svelte';
 export { default as Required } from './components/form/Required.svelte';
 export { default as Select } from './components/form/Select.svelte';
+export { default as MultiSelect } from './components/form/MultiSelect.svelte';
+export { default as Tree } from './components/form/Tree.svelte';
 export { default as PasswordInput } from './components/form/PasswordInput.svelte';
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as Modal } from './components/Modal.svelte';
@@ -49,3 +51,4 @@ 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';
+export { buildChildrenByParent, collectDescendantIds } from './components/crud/utils/tree.js';

package/dist/index.js

@@ -11,6 +11,8 @@ export { default as Button } from './components/form/Button.svelte';
 export { default as Label } from './components/form/Label.svelte';
 export { default as Required } from './components/form/Required.svelte';
 export { default as Select } from './components/form/Select.svelte';
+export { default as MultiSelect } from './components/form/MultiSelect.svelte';
+export { default as Tree } from './components/form/Tree.svelte';
 export { default as PasswordInput } from './components/form/PasswordInput.svelte';
 // Shared components
 export { default as Avatar } from './components/Avatar.svelte';
@@ -46,3 +48,4 @@ export { formatBoolean, formatDatetime, formatTruncateTextUpTo, formatInstance }
 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';
+export { buildChildrenByParent, collectDescendantIds } from './components/crud/utils/tree.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' | 'embedded';
+export type AttributeType = 'text' | 'email' | 'password' | 'number' | 'boolean' | 'textarea' | 'file' | 'select' | 'multiselect' | 'tree' | 'datetime' | 'embedded';
 export declare const AttributeType: {
     readonly text: "text";
     readonly email: "email";
@@ -10,19 +10,25 @@ export declare const AttributeType: {
     readonly textarea: "textarea";
     readonly file: "file";
     readonly select: "select";
+    readonly multiselect: "multiselect";
+    readonly tree: "tree";
     readonly datetime: "datetime";
     readonly embedded: "embedded";
 };
 export type InterfaceMetadata<T> = Partial<Record<keyof T, AttributeMetadata>>;
+/** `parentValue` is only used by `tree` fields, to link a node to its parent's
+ * `value` (or omit/`null` for a root node) — `select`/`multiselect` ignore it. */
 export type SelectOption = {
     value: string;
     label: string;
+    parentValue?: string | null;
 };
 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 HiddenResolver = (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.
@@ -38,6 +44,11 @@ export type AttributeMetadata = {
      * list in memory. Leave unset to keep the default in-memory filtering. */
     search?: SearchResolver;
     disabled?: DisabledResolver;
+    /** Pass a function to remove a field from the form entirely (not rendered,
+     * not validated, not submitted) based on the current draft record — unlike
+     * `disabled`, which keeps the input visible but greyed out. Re-evaluated
+     * live as sibling fields change, same signature as `disabled`. */
+    hidden?: boolean | HiddenResolver;
     seed?: SeedResolver;
     component?: CellComponent<any, any>;
     formatter?: FormatterResolver;

package/dist/types/attribute.js

@@ -7,6 +7,8 @@ export const AttributeType = {
     textarea: 'textarea',
     file: 'file',
     select: 'select',
+    multiselect: 'multiselect',
+    tree: 'tree',
     datetime: 'datetime',
     embedded: 'embedded',
 };

package/dist/types/crud.d.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'svelte';
 import type { FullAutoFill } from 'svelte/elements';
-import type { AttributeType, SearchResolver, RequiredResolver } from './attribute.js';
+import type { AttributeType, SearchResolver, RequiredResolver, SelectOption } from './attribute.js';
 import type { CellComponent, CellFormatter } from './table.js';
 export type ColumnDefinition<T extends object = Record<string, unknown>> = {
     [K in keyof T & string]: {
@@ -11,6 +11,13 @@ export type ColumnDefinition<T extends object = Record<string, unknown>> = {
         formatter?: CellFormatter<T, T[K]>;
         sortable?: boolean;
         filterable?: boolean;
+        /** Embedded columns only: sub-field definitions for each item, used to
+         * render a default cell summary and to expand the column into one
+         * sub-column per field on CSV/XLSX export. */
+        fields?: FieldDefinition<Record<string, unknown>>[];
+        /** Embedded columns only: short label for an item, reused from the form
+         * field's `itemLabel` for the default cell summary. */
+        itemLabel?: (item: Record<string, unknown>) => string;
     };
 }[keyof T & string];
 export interface FieldDefinition<T extends object = Record<string, unknown>> {
@@ -21,16 +28,11 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
     autocomplete?: FullAutoFill;
     placeholder?: string;
     default?: any;
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    dependentOptions?: (record: Record<string, unknown>) => {
-        value: string;
-        label: string;
-    }[];
+    options?: SelectOption[];
+    dependentOptions?: (record: Record<string, unknown>) => SelectOption[];
     search?: SearchResolver;
     disabled?: (record: Record<string, unknown>) => boolean;
+    hidden?: boolean | ((record: Record<string, unknown>) => boolean);
     seed?: (instance: any) => unknown;
     groupedAs?: string;
     min?: number;

package/package.json

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