runeforge 0.0.27 → 0.0.28

package/README.md

@@ -34,6 +34,7 @@ A SvelteKit toolkit that forges forms, tables, actions, and CRUD workflows from
     - [Validation](#validation)
     - [Conditional fields](#conditional-fields)
     - [Field grouping](#field-grouping)
+    - [Field rows](#field-rows)
     - [Default values](#default-values)
     - [Select options](#select-options)
     - [Multiselect fields](#multiselect-fields)
@@ -159,6 +160,7 @@ Responsive overrides work too:
 | `--runeforge-crud-title-size` | `1.875rem` | `<h1>` inside the `Header` component |
 | `--runeforge-breadcrumb-font-size` | `0.875rem` | Breadcrumb label text size |
 | `--runeforge-breadcrumb-icon-size` | `1rem` | Breadcrumb icon width and height |
+| `--runeforge-tree-max-height` | `24rem` | Max height of a `tree` field before it scrolls internally |
 
 Modal sizing (see [Shared Components](#shared-components)) is set per-instance via props rather than a CSS variable.
 
@@ -362,6 +364,8 @@ Every entry in an `InterfaceMetadata<T>` object is an `AttributeMetadata` — a
 | `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) |
+| `row` | `string` | all | Renders fields sharing the same value side by side (desktop) / stacked (mobile) — see [Field rows](#field-rows) |
+| `defaultExpanded` | `boolean` | `tree` | Whether parent nodes start expanded. Defaults to `true` |
 | `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 |
@@ -485,6 +489,25 @@ sku: {
 },
 ```
 
+### Field rows
+
+Fields sharing the same `row` string render side by side on desktop and stacked on mobile, instead of each taking a full line. It's meant for small, related fields — a date range, a min/max pair — where a flat vertical stack wastes space.
+
+```ts
+createdFrom: {
+  label: 'Created from',
+  type: AttributeType.datetime,
+  row: 'createdRange',
+},
+createdTo: {
+  label: 'Created to',
+  type: AttributeType.datetime,
+  row: 'createdRange',
+},
+```
+
+A `row` only merges fields that are also in the same `groupedAs` fieldset (or both ungrouped) — it never pulls fields together across two different fieldsets. If one of the fields in a row is conditionally [hidden](#conditional-fields), the remaining field(s) simply expand to fill the row instead of leaving a gap.
+
 ### Default values
 
 `default` can be a plain value or a function of the page `data` object, evaluated once when the create form's fields are resolved — handy for defaulting a select to something derived from prefetched data.
@@ -599,6 +622,8 @@ categories: {
 
 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.
 
+By default every parent node renders expanded; set `defaultExpanded: false` to start with the whole tree collapsed instead (the user can still expand any branch — this only sets the initial state). The field itself is capped at `--runeforge-tree-max-height` (default `24rem`, see [CSS variables](#css-variables)) and scrolls internally once its content grows past that.
+
 ### 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

@@ -21,13 +21,19 @@
     record = $bindable({} as Record<string, unknown>),
     error = '',
     readonly = false,
+    class: className = '',
   }: {
     field: FieldDefinition<T>;
     record?: Record<string, unknown>;
     error?: string;
     readonly?: boolean;
+    class?: string;
   } = $props();
 
+  const datePopId = $props.id();
+  const dateAnchorName = `--date-anchor-${datePopId}`;
+  let datePopoverEl: HTMLElement | undefined = $state();
+
   const name = $derived(readonly ? undefined : field.attribute);
   const labelText = $derived(fieldLabel(field));
   let filePreview = $state<string | null>(null);
@@ -73,7 +79,7 @@
 </script>
 
 {#if !fieldHidden}
-<div class="flex flex-col gap-1">
+<div class="flex flex-col gap-1 {className}">
   {#if field.type === 'file'}
     <div class="flex justify-center">
       <Avatar src={preview} text={avatarInitials} alt={labelText} class="w-20 rounded-full" textClass="text-xl" />
@@ -141,15 +147,37 @@
       />
     {:else}
       <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 {fieldDisabled ? 'pointer-events-none opacity-50' : ''}"
-        value={String(record[field.attribute] ?? '')}
-        onchange={(e: Event) => { if (fieldDisabled) return; record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value; }}
+      <button
+        type="button"
+        class="input input-bordered w-full text-left font-normal"
+        class:opacity-40={!record[field.attribute]}
+        disabled={fieldDisabled}
+        popovertarget={datePopId}
+        style="anchor-name:{dateAnchorName}"
+      >
+        {record[field.attribute] ? displayValue : (field.placeholder ?? '')}
+      </button>
+      <div
+        popover="auto"
+        id={datePopId}
+        bind:this={datePopoverEl}
+        style="position-anchor:{dateAnchorName}; position-try-fallbacks:flip-block;"
+        class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 p-2 shadow-lg"
       >
-        <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>
-        <calendar-month></calendar-month>
-      </calendar-date>
+        <calendar-date
+          class="cally"
+          value={String(record[field.attribute] ?? '')}
+          onchange={(e: Event) => {
+            if (fieldDisabled) return;
+            record[field.attribute] = (e.currentTarget as HTMLElement & { value: string }).value;
+            datePopoverEl?.hidePopover();
+          }}
+        >
+          <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>
+          <calendar-month></calendar-month>
+        </calendar-date>
+      </div>
     {/if}
   {:else if field.type === 'textarea'}
     {#if readonly}
@@ -202,6 +230,7 @@
         bind:value={record[field.attribute] as string[]}
         options={selectOptions}
         disabled={fieldDisabled}
+        defaultExpanded={field.defaultExpanded ?? true}
       />
     {/if}
   {:else if readonly}

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

@@ -5,6 +5,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         record?: Record<string, unknown>;
         error?: string;
         readonly?: boolean;
+        class?: string;
     };
     exports: {};
     bindings: "record";

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

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

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

@@ -1,23 +1,45 @@
 // 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.
+// views, based on `groupedAs`, and each group's fields into rows, based on
+// `row`. A field without `groupedAs` renders as its own single-field group
+// (unchanged from today's flat layout) unless it shares a `row` with another
+// ungrouped field, in which case they share that anonymous group. Fields
+// sharing a `groupedAs` are collected together at the position of their first
+// occurrence, preserving overall order; within that group, fields sharing a
+// `row` are collected into the same row. A `row` never merges fields across
+// two different `groupedAs` groups.
 export function groupFields(fields) {
     const groups = [];
     const byTitle = new Map();
+    const byUngroupedRow = new Map();
     for (const field of fields) {
-        if (!field.groupedAs) {
-            groups.push({ fields: [field] });
-            continue;
+        let group;
+        if (field.groupedAs) {
+            group = byTitle.get(field.groupedAs);
+            if (!group) {
+                group = { title: field.groupedAs, rows: [] };
+                byTitle.set(field.groupedAs, group);
+                groups.push(group);
+            }
         }
-        let group = byTitle.get(field.groupedAs);
-        if (!group) {
-            group = { title: field.groupedAs, fields: [] };
-            byTitle.set(field.groupedAs, group);
+        else if (field.row) {
+            group = byUngroupedRow.get(field.row);
+            if (!group) {
+                group = { rows: [] };
+                byUngroupedRow.set(field.row, group);
+                groups.push(group);
+            }
+        }
+        else {
+            group = { rows: [] };
             groups.push(group);
         }
-        group.fields.push(field);
+        const existingRow = field.row ? group.rows.find((r) => r[0]?.row === field.row) : undefined;
+        if (existingRow) {
+            existingRow.push(field);
+        }
+        else {
+            group.rows.push([field]);
+        }
     }
     return groups;
 }

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

@@ -56,6 +56,8 @@ export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
         fields: m.fields
             ? buildFieldDefinitions(m.fields, data, excludedFlag, new Set())
             : undefined,
-        itemLabel: m.itemLabel
+        itemLabel: m.itemLabel,
+        defaultExpanded: m.defaultExpanded,
+        row: m.row
     }));
 }

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

@@ -113,14 +113,30 @@
         <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 group.rows as row (row.map((f) => f.attribute).join('|'))}
+              {#if row.length > 1}
+                <div class="flex flex-col gap-4 md:flex-row">
+                  {#each row as field (field.attribute)}
+                    <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+                  {/each}
+                </div>
+              {:else}
+                <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
+              {/if}
             {/each}
           </div>
         </fieldset>
       {:else}
-        {#each group.fields as field (field.attribute)}
-          <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+          {#if row.length > 1}
+            <div class="flex flex-col gap-4 md:flex-row">
+              {#each row as field (field.attribute)}
+                <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+              {/each}
+            </div>
+          {:else}
+            <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
+          {/if}
         {/each}
       {/if}
     {/each}

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

@@ -81,14 +81,30 @@
         <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 group.rows as row (row.map((f) => f.attribute).join('|'))}
+              {#if row.length > 1}
+                <div class="flex flex-col gap-4 md:flex-row">
+                  {#each row as field (field.attribute)}
+                    <Field {field} {record} readonly class="md:min-w-0 md:flex-1" />
+                  {/each}
+                </div>
+              {:else}
+                <Field field={row[0]} {record} readonly />
+              {/if}
             {/each}
           </div>
         </fieldset>
       {:else}
-        {#each group.fields as field (field.attribute)}
-          <Field {field} {record} readonly />
+        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+          {#if row.length > 1}
+            <div class="flex flex-col gap-4 md:flex-row">
+              {#each row as field (field.attribute)}
+                <Field {field} {record} readonly class="md:min-w-0 md:flex-1" />
+              {/each}
+            </div>
+          {:else}
+            <Field field={row[0]} {record} readonly />
+          {/if}
         {/each}
       {/if}
     {/each}

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

@@ -129,14 +129,30 @@
         <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 group.rows as row (row.map((f) => f.attribute).join('|'))}
+              {#if row.length > 1}
+                <div class="flex flex-col gap-4 md:flex-row">
+                  {#each row as field (field.attribute)}
+                    <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+                  {/each}
+                </div>
+              {:else}
+                <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
+              {/if}
             {/each}
           </div>
         </fieldset>
       {:else}
-        {#each group.fields as field (field.attribute)}
-          <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />
+        {#each group.rows as row (row.map((f) => f.attribute).join('|'))}
+          {#if row.length > 1}
+            <div class="flex flex-col gap-4 md:flex-row">
+              {#each row as field (field.attribute)}
+                <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} class="md:min-w-0 md:flex-1" />
+              {/each}
+            </div>
+          {:else}
+            <Field field={row[0]} bind:record error={fieldErrors[row[0].attribute] ?? ''} />
+          {/if}
         {/each}
       {/if}
     {/each}

package/dist/components/form/MultiSelect.svelte

@@ -111,7 +111,7 @@
     popover="auto"
     id={popId}
     bind:this={popoverEl}
-    style="position-anchor:{anchorName}; width:anchor-size(width);"
+    style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
     class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
     ontoggle={onToggle}
   >

package/dist/components/form/Select.svelte

@@ -115,7 +115,7 @@
     popover="auto"
     id={popId}
     bind:this={popoverEl}
-    style="position-anchor:{anchorName}; width:anchor-size(width);"
+    style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
     class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
     ontoggle={onToggle}
   >

package/dist/components/form/Tree.svelte

@@ -9,12 +9,14 @@
 		options = [],
 		disabled = false,
 		columns = 1,
+		defaultExpanded = true,
 	}: {
 		name?: string;
 		value?: string[];
 		options?: SelectOption[];
 		disabled?: boolean;
 		columns?: number;
+		defaultExpanded?: boolean;
 	} = $props();
 
 	const childrenByParent = $derived(buildChildrenByParent(options));
@@ -33,7 +35,8 @@
 </script>
 
 <div
-	class="rounded-box border border-base-300 p-2"
+	class="overflow-y-auto rounded-box border border-base-300 p-2"
+	style="max-height: var(--runeforge-tree-max-height, 24rem)"
 	class:opacity-50={disabled}
 	class:pointer-events-none={disabled}
 >
@@ -45,7 +48,7 @@
 	{/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} />
+			<TreeNode node={root} {childrenByParent} {selected} onToggle={toggle} {disabled} depth={0} {columns} {defaultExpanded} />
 		{/each}
 	</div>
 </div>

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

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     options?: SelectOption[];
     disabled?: boolean;
     columns?: number;
+    defaultExpanded?: boolean;
 };
 declare const Tree: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Tree = ReturnType<typeof Tree>;

package/dist/components/form/TreeNode.svelte

@@ -10,6 +10,7 @@
 		disabled,
 		depth,
 		columns,
+		defaultExpanded,
 	}: {
 		node: SelectOption;
 		childrenByParent: Map<string | null, SelectOption[]>;
@@ -18,9 +19,10 @@
 		disabled: boolean;
 		depth: number;
 		columns: number;
+		defaultExpanded: boolean;
 	} = $props();
 
-	let expanded = $state(true);
+	let expanded = $state(defaultExpanded);
 
 	const children = $derived(childrenByParent.get(node.value) ?? []);
 	const hasChildren = $derived(children.length > 0);
@@ -58,7 +60,7 @@
 
 	{#if expanded && hasChildren}
 		{#each children as child (child.value)}
-			<TreeNode node={child} {childrenByParent} {selected} {onToggle} {disabled} depth={depth + 1} {columns} />
+			<TreeNode node={child} {childrenByParent} {selected} {onToggle} {disabled} depth={depth + 1} {columns} {defaultExpanded} />
 		{/each}
 	{/if}
 </div>

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     disabled: boolean;
     depth: number;
     columns: number;
+    defaultExpanded: boolean;
 };
 declare const TreeNode: import("svelte").Component<$$ComponentProps, {}, "">;
 type TreeNode = ReturnType<typeof TreeNode>;

package/dist/components/table/ColumnFilter.svelte

@@ -92,7 +92,7 @@
 <div
   popover="auto"
   id={popId}
-  style="position-anchor:{anchor}"
+  style="position-anchor:{anchor}; position-try-fallbacks:flip-block;"
   class="dropdown dropdown-end rounded-box border border-base-content/10 bg-base-100 p-3 shadow-lg"
   class:w-56={!isDatetime}
 >

package/dist/types/attribute.d.ts

@@ -78,4 +78,10 @@ export type AttributeMetadata = {
     fields?: InterfaceMetadata<any>;
     /** Embedded fields only: short label for an item in the list. */
     itemLabel?: EmbeddedItemLabelResolver;
+    /** Tree fields only: whether parent nodes start expanded. Defaults to `true`. */
+    defaultExpanded?: boolean;
+    /** Fields sharing the same `row` string render side by side on desktop and
+     * stacked on mobile — see the Field rows section. Only merges fields that
+     * are also in the same `groupedAs` bucket (or both ungrouped). */
+    row?: string;
 };

package/dist/types/crud.d.ts

@@ -46,6 +46,10 @@ export interface FieldDefinition<T extends object = Record<string, unknown>> {
     fields?: FieldDefinition<Record<string, unknown>>[];
     /** Embedded fields only: short label for an item in the list. */
     itemLabel?: (item: Record<string, unknown>) => string;
+    /** Tree fields only: whether parent nodes start expanded. Defaults to `true`. */
+    defaultExpanded?: boolean;
+    /** Fields sharing the same `row` string render side by side. */
+    row?: string;
 }
 export interface ActionConfiguration<T extends object = Record<string, unknown>> {
     enabled?: boolean;

package/package.json

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