@thebes/cadmea 1.1.1 → 1.3.0

package/dist/index/server.js

@@ -1,6 +1,8 @@
 import { createComponent, escape, ssr, ssrAttribute, ssrStyleProperty } from "solid-js/web";
-import { For, Show, Suspense, createEffect, createMemo, createSignal, lazy, onCleanup, onMount } from "solid-js";
-import { VISUAL_EDIT_MESSAGE } from "@thebes/cadmus/cms";
+import { createForm } from "@tanstack/solid-form";
+import { VISUAL_EDIT_MESSAGE, validateDocument } from "@thebes/cadmus/cms";
+import { For, Index, Show, Suspense, createEffect, createMemo, createSignal, lazy, onCleanup, onMount } from "solid-js";
+import { createSolidTable, flexRender, getCoreRowModel } from "@tanstack/solid-table";
 //#region src/CollectionEdit.tsx
 var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmpl$2$3 = "<span class=\"loading loading-spinner loading-sm\"></span>", _tmpl$3$3 = [
 	"<button type=\"button\" class=\"btn flex-1\"",
@@ -19,45 +21,50 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	"",
 	"<div class=\"bg-base-100 sticky bottom-0 flex gap-2 border-t py-3\">",
 	"</div></form>"
-], _tmpl$7$1 = "<span class=\"text-error\"> *</span>", _tmpl$8$1 = [
-	"<div class=\"form-control\"><label class=\"label\"",
+], _tmpl$7$1 = [
+	"<fieldset class=\"border-base-300 rounded-box border p-4\"><legend class=\"px-2 text-sm font-semibold\">",
+	"</legend>",
+	"</fieldset>"
+], _tmpl$8$1 = ["<div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">", "</div>"], _tmpl$9$1 = "<span class=\"text-error\"> *</span>", _tmpl$0$1 = ["<p class=\"text-base-content/60 mb-1 text-xs\">", "</p>"], _tmpl$1$1 = ["<p class=\"text-error mt-1 text-sm\" role=\"alert\">", "</p>"], _tmpl$10$1 = [
+	"<div class=\"",
+	"\"><label class=\"label\"",
 	">",
 	"",
 	"</label>",
+	"",
+	"",
 	"</div>"
-], _tmpl$9$1 = [
-	"<button type=\"submit\" class=\"btn btn-primary flex-1\"",
-	">",
-	"</button>"
-], _tmpl$0$1 = [
+], _tmpl$11$1 = [
 	"<input",
 	" class=\"input\" type=\"text\"",
 	"",
 	">"
-], _tmpl$1$1 = [
+], _tmpl$12$1 = [
 	"<select",
 	" class=\"select\"",
 	"",
+	"",
 	">",
 	"</select>"
-], _tmpl$10$1 = [
+], _tmpl$13$1 = [
 	"<option",
 	">",
 	"</option>"
-], _tmpl$11$1 = [
+], _tmpl$14$1 = [
 	"<input",
 	" class=\"input\" type=\"number\"",
 	"",
 	">"
-], _tmpl$12$1 = [
+], _tmpl$15$1 = [
 	"<input",
 	" class=\"input\" type=\"text\" readonly",
 	">"
-], _tmpl$13$1 = [
+], _tmpl$16 = [
 	"<input",
 	" class=\"checkbox\" type=\"checkbox\"",
+	"",
 	">"
-], _tmpl$14$1 = ["<p class=\"text-sm opacity-70 break-all\">", "</p>"], _tmpl$15 = ["<p class=\"text-sm text-error\">", "</p>"], _tmpl$16 = [
+], _tmpl$17 = ["<p class=\"text-sm opacity-70 break-all\">", "</p>"], _tmpl$18 = ["<p class=\"text-sm text-error\">", "</p>"], _tmpl$19 = [
 	"<div class=\"flex flex-col gap-2\">",
 	"<input",
 	" class=\"file-input\" type=\"file\"",
@@ -65,38 +72,115 @@ var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmp
 	">",
 	"",
 	"</div>"
-], _tmpl$17 = [
-	"<select",
-	" class=\"select\"",
+], _tmpl$20 = ["<div class=\"mb-1 flex flex-wrap gap-1\">", "</div>"], _tmpl$21 = "<button type=\"button\" aria-label=\"Clear\" class=\"absolute top-2 right-2 cursor-pointer opacity-60\">×</button>", _tmpl$22 = [
+	"<div",
+	" role=\"listbox\" class=\"bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex max-h-56 w-full flex-col overflow-auto border p-1 shadow\">",
+	"</div>"
+], _tmpl$23 = [
+	"<div class=\"relative\">",
+	"<input",
+	" type=\"text\" role=\"combobox\"",
+	" autocomplete=\"off\" class=\"input\"",
 	"",
-	"><option value>—</option>",
-	"</select>"
-], _tmpl$18 = [
+	">",
+	"",
+	"</div>"
+], _tmpl$24 = [
+	"<span class=\"badge badge-primary gap-1\">",
+	"<button type=\"button\" aria-label=\"",
+	"\" class=\"cursor-pointer\">×</button></span>"
+], _tmpl$25 = [
+	"<button type=\"button\" role=\"option\"",
+	" class=\"",
+	"\">",
+	"</button>"
+], _tmpl$26 = ["<div role=\"menu\" class=\"bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex flex-col border p-1 shadow\">", "</div>"], _tmpl$27 = [
+	"<div class=\"relative self-start\"><button type=\"button\" class=\"btn btn-outline btn-sm\" aria-haspopup=\"menu\"",
+	">Add block</button>",
+	"</div>"
+], _tmpl$28 = [
+	"<div class=\"form-control md:col-span-2\"><div class=\"label font-medium\">",
+	"",
+	"</div>",
 	"<div class=\"flex flex-col gap-3\">",
-	"<button type=\"button\" class=\"btn btn-outline btn-sm self-start\">Add ",
-	"</button></div>"
-], _tmpl$19 = ["<div class=\"card bg-base-200 flex flex-col gap-2 p-3\">", "<button type=\"button\" class=\"btn btn-error btn-outline btn-sm self-start\">Remove</button></div>"];
-const RichTextEditor = lazy(() => import("../RichTextEditor-DcLqdFY7.js").then((mod) => ({ default: mod.RichTextEditor })));
+	"",
+	"</div></div>"
+], _tmpl$29 = ["<span class=\"text-base-content/60 truncate text-sm\">", "</span>"], _tmpl$30 = ["<div class=\"flex flex-col gap-2\">", "</div>"], _tmpl$31 = [
+	"<div class=\"card bg-base-200 flex flex-col gap-2 p-3\"><div class=\"flex items-center gap-2\"><button type=\"button\" class=\"btn btn-ghost btn-sm gap-2\"",
+	"><span aria-hidden=\"true\">",
+	"</span><span class=\"font-semibold\">",
+	"</span></button>",
+	"<div class=\"ml-auto flex gap-1\"><button type=\"button\" class=\"btn btn-ghost btn-xs\" aria-label=\"Move up\"",
+	">↑</button><button type=\"button\" class=\"btn btn-ghost btn-xs\" aria-label=\"Move down\"",
+	">↓</button><button type=\"button\" class=\"btn btn-ghost btn-xs\" aria-label=\"Duplicate\">⧉</button><button type=\"button\" class=\"btn btn-ghost btn-xs text-error\" aria-label=\"Remove\">Remove</button></div></div>",
+	"</div>"
+], _tmpl$32 = ["<button type=\"button\" class=\"btn btn-outline btn-sm self-start\">Add ", "</button>"], _tmpl$33 = ["<i", " aria-hidden=\"true\"></i>"], _tmpl$34 = [
+	"<button type=\"button\" role=\"menuitem\" class=\"flex items-center gap-2 rounded px-3 py-2 text-left\">",
+	"",
+	"</button>"
+];
+const RichTextEditor = lazy(() => import("../RichTextEditor-CPQTvhQD.js").then((mod) => ({ default: mod.RichTextEditor })));
 function editableFields(config) {
 	return Object.entries(config.fields).filter(([key]) => key !== "id");
 }
+function humanize(key) {
+	const spaced = key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();
+}
+function labelFor(key, field) {
+	return field.admin?.label ?? humanize(key);
+}
+function groupFields(entries) {
+	const groups = [];
+	const byName = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const name = entry[1].admin?.group;
+		let group = byName.get(name);
+		if (!group) {
+			group = {
+				name,
+				fields: []
+			};
+			byName.set(name, group);
+			groups.push(group);
+		}
+		group.fields.push(entry);
+	}
+	return groups;
+}
 function CollectionEdit(props) {
-	const initialSnapshot = JSON.stringify(props.initialValues ?? {});
-	const [values, setValues] = createSignal(props.initialValues ?? {});
-	createEffect(() => {
-		props.onDirtyChange?.(JSON.stringify(values()) !== initialSnapshot);
-	});
-	function setField(key, value) {
-		setValues((prev) => ({
-			...prev,
-			[key]: value
-		}));
+	const operation = props.initialValues?.id != null ? "update" : "create";
+	async function validateForm(value) {
+		const violations = await validateDocument(props.config, value, { operation });
+		const fields = {};
+		for (const v of violations) if (v.severity === "error" && !(v.path in fields)) fields[v.path] = v.message;
+		return Object.keys(fields).length > 0 ? { fields } : void 0;
+	}
+	const form = createForm(() => ({
+		defaultValues: props.initialValues ?? {},
+		validators: { onSubmitAsync: ({ value }) => validateForm(value) },
+		onSubmit: async ({ value }) => {
+			await props.onSubmit(editablePayload(value));
+		}
+	}));
+	const isDefaultValue = form.useStore((s) => s.isDefaultValue);
+	createEffect(() => props.onDirtyChange?.(!isDefaultValue()));
+	const formValues = form.useStore((s) => s.values);
+	function editablePayload(value) {
+		return Object.fromEntries(Object.entries(value).filter(([key]) => props.config.fields[key]?.type !== "date"));
 	}
 	const ctx = {
-		onUploadFile: props.onUploadFile,
-		relationshipOptions: props.relationshipOptions,
-		fieldWidgets: props.fieldWidgets
+		get onUploadFile() {
+			return props.onUploadFile;
+		},
+		get relationshipOptions() {
+			return props.relationshipOptions;
+		},
+		get fieldWidgets() {
+			return props.fieldWidgets;
+		}
 	};
+	const fieldGroups = groupFields(editableFields(props.config));
 	const versioned = () => props.config.versions?.drafts && props.draftActions;
 	return ssr(_tmpl$6$2, escape(createComponent(Show, {
 		get when() {
@@ -106,17 +190,32 @@ function CollectionEdit(props) {
 			return ssr(_tmpl$$4, escape(props.error));
 		}
 	})), escape(createComponent(For, {
-		get each() {
-			return editableFields(props.config);
-		},
-		children: ([key, field]) => ssr(_tmpl$8$1, ssrAttribute("for", escape(key, true), false), escape(key), escape(createComponent(Show, {
+		each: fieldGroups,
+		children: (group) => createComponent(Show, {
 			get when() {
-				return field.required;
+				return group.name;
+			},
+			get fallback() {
+				return createComponent(FieldsGrid, {
+					form,
+					ctx,
+					get fields() {
+						return group.fields;
+					},
+					values: formValues
+				});
 			},
 			get children() {
-				return ssr(_tmpl$7$1);
+				return ssr(_tmpl$7$1, escape(group.name), escape(createComponent(FieldsGrid, {
+					form,
+					ctx,
+					get fields() {
+						return group.fields;
+					},
+					values: formValues
+				})));
 			}
-		})), escape(renderInput(key, field, values()[key], setField, ctx)))
+		})
 	})), escape(createComponent(Show, {
 		get when() {
 			return versioned();
@@ -127,7 +226,7 @@ function CollectionEdit(props) {
 					return props.capabilities?.canUpdate !== false;
 				},
 				get children() {
-					return ssr(_tmpl$9$1, ssrAttribute("disabled", props.saving, true), escape(createComponent(Show, {
+					return ssr(_tmpl$4$3, ssrAttribute("disabled", props.saving, true), escape(createComponent(Show, {
 						get when() {
 							return props.saving;
 						},
@@ -187,54 +286,121 @@ function CollectionEdit(props) {
 		}
 	})));
 }
-function renderInput(key, field, value, setField, ctx) {
-	const Widget = ctx.fieldWidgets?.[key] ?? ctx.fieldWidgets?.[key.slice(key.lastIndexOf(".") + 1)];
+function FieldsGrid(props) {
+	return ssr(_tmpl$8$1, escape(createComponent(For, {
+		get each() {
+			return props.fields;
+		},
+		children: ([key, field]) => createComponent(Show, {
+			get when() {
+				return !field.admin?.condition || field.admin.condition(props.values());
+			},
+			get children() {
+				return renderField(props.form, props.ctx, key, field, labelFor(key, field));
+			}
+		})
+	})));
+}
+function renderField(form, ctx, name, field, label) {
+	if (field.type === "array") return renderArray(form, ctx, name, field, label);
+	const spanClass = field.admin?.width === "half" ? "md:col-span-1" : "md:col-span-2";
+	return createComponent(form.Field, {
+		name,
+		children: (fieldApi) => ssr(_tmpl$10$1, `form-control ${escape(spanClass, true)}`, ssrAttribute("for", escape(name, true), false), escape(label), escape(createComponent(Show, {
+			get when() {
+				return field.required;
+			},
+			get children() {
+				return ssr(_tmpl$9$1);
+			}
+		})), escape(createComponent(Show, {
+			get when() {
+				return field.admin?.description;
+			},
+			get children() {
+				return ssr(_tmpl$0$1, escape(field.admin?.description));
+			}
+		})), escape(renderControl(ctx, name, field, fieldApi)), escape(createComponent(Show, {
+			get when() {
+				return (fieldApi().state.meta.errors?.length ?? 0) > 0;
+			},
+			get children() {
+				return ssr(_tmpl$1$1, escape(fieldApi().state.meta.errors.filter(Boolean).join(", ")));
+			}
+		})))
+	});
+}
+function renderControl(ctx, name, field, fieldApi) {
+	const Widget = ctx.fieldWidgets?.[name] ?? ctx.fieldWidgets?.[name.slice(name.lastIndexOf(".") + 1)];
 	if (Widget) return createComponent(Widget, {
-		fieldKey: key,
-		value,
-		setValue: (v) => setField(key, v),
+		fieldKey: name,
+		get value() {
+			return fieldApi().state.value;
+		},
+		setValue: (v) => fieldApi().handleChange(v),
 		get onUploadFile() {
 			return ctx.onUploadFile;
 		}
 	});
+	const readOnly = field.admin?.readOnly;
+	const change = (v) => fieldApi().handleChange(v);
 	switch (field.type) {
-		case "text": return ssr(_tmpl$0$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", escape(value ?? "", true), false), ssrAttribute("required", field.required, true));
-		case "select": return ssr(_tmpl$1$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", escape(value ?? "", true), false), ssrAttribute("required", field.required, true), escape(createComponent(For, {
+		case "text": return ssr(_tmpl$11$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("placeholder", escape(field.admin?.placeholder, true), false) + ssrAttribute("readonly", escape(readOnly, true), false) + ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true));
+		case "select": return ssr(_tmpl$12$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true), ssrAttribute("disabled", readOnly, true), escape(createComponent(For, {
 			get each() {
 				return field.options;
 			},
-			children: (option) => ssr(_tmpl$10$1, ssrAttribute("value", escape(option, true), false), escape(option))
+			children: (option) => ssr(_tmpl$13$1, ssrAttribute("value", escape(option, true), false), escape(option))
 		})));
-		case "number": return ssr(_tmpl$11$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", escape(value ?? "", true), false), ssrAttribute("required", field.required, true));
-		case "date": return ssr(_tmpl$12$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", escape(formatDateValue(value), true), false));
-		case "checkbox": return ssr(_tmpl$13$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("checked", value ?? false, true));
-		case "upload": return renderUploadInput(key, field, value, setField, ctx);
-		case "relationship": return renderRelationshipInput(key, field, value, setField, ctx);
-		case "array": return renderArrayInput(key, field, value, setField, ctx);
+		case "number": return ssr(_tmpl$14$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("placeholder", escape(field.admin?.placeholder, true), false) + ssrAttribute("readonly", escape(readOnly, true), false) + ssrAttribute("value", escape(fieldApi().state.value ?? "", true), false), ssrAttribute("required", field.required, true));
+		case "date": return ssr(_tmpl$15$1, ssrAttribute("id", escape(name, true), false), ssrAttribute("value", escape(formatDateValue(fieldApi().state.value), true), false));
+		case "checkbox": return ssr(_tmpl$16, ssrAttribute("id", escape(name, true), false), ssrAttribute("disabled", readOnly, true), ssrAttribute("checked", fieldApi().state.value ?? false, true));
+		case "upload": return createComponent(UploadControl, {
+			name,
+			field,
+			fieldApi,
+			ctx
+		});
+		case "relationship": return createComponent(RelationshipField, {
+			name,
+			field,
+			fieldApi,
+			get options() {
+				return ctx.relationshipOptions?.[field.relationTo] ?? [];
+			}
+		});
 		case "richText": return createComponent(Suspense, {
 			get fallback() {
 				return ssr(_tmpl$2$3);
 			},
 			get children() {
 				return createComponent(RichTextEditor, {
-					id: key,
-					content: value,
-					onChange: (doc) => setField(key, doc)
+					id: name,
+					get content() {
+						return fieldApi().state.value;
+					},
+					onChange: (doc) => change(doc),
+					get onUploadFile() {
+						return ctx.onUploadFile;
+					}
 				});
 			}
 		});
 		default: return null;
 	}
 }
-function renderUploadInput(key, field, value, setField, ctx) {
+function UploadControl(props) {
 	const [uploading, setUploading] = createSignal(false);
 	const [uploadError, setUploadError] = createSignal();
-	return ssr(_tmpl$16, escape(createComponent(Show, {
-		when: value,
+	const value = () => props.fieldApi().state.value;
+	return ssr(_tmpl$19, escape(createComponent(Show, {
+		get when() {
+			return value();
+		},
 		get children() {
-			return ssr(_tmpl$14$1, escape(value));
+			return ssr(_tmpl$17, escape(value()));
 		}
-	})), ssrAttribute("id", escape(key, true), false), ssrAttribute("required", field.required && !value, true), ssrAttribute("disabled", uploading(), true), escape(createComponent(Show, {
+	})), ssrAttribute("id", escape(props.name, true), false), ssrAttribute("required", props.field.required && !value(), true), ssrAttribute("disabled", uploading() || props.field.admin?.readOnly, true), escape(createComponent(Show, {
 		get when() {
 			return uploading();
 		},
@@ -246,57 +412,175 @@ function renderUploadInput(key, field, value, setField, ctx) {
 			return uploadError();
 		},
 		get children() {
-			return ssr(_tmpl$15, escape(uploadError()));
+			return ssr(_tmpl$18, escape(uploadError()));
 		}
 	})));
 }
-function renderRelationshipInput(key, field, value, setField, ctx) {
-	if (field.hasMany) return null;
-	const options = ctx.relationshipOptions?.[field.relationTo] ?? [];
-	return ssr(_tmpl$17, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", value != null ? escape(String(value), true) : "", false), ssrAttribute("required", field.required, true), escape(createComponent(For, {
-		each: options,
-		children: (option) => ssr(_tmpl$10$1, ssrAttribute("value", escape(option.id, true), false), escape(option.label))
+function RelationshipField(props) {
+	const [query, setQuery] = createSignal("");
+	const [open, setOpen] = createSignal(false);
+	const [active, setActive] = createSignal(0);
+	const listId = `${props.name}-listbox`;
+	const isMulti = () => props.field.hasMany === true;
+	const value = () => props.fieldApi().state.value;
+	const selectedIds = () => {
+		const v = value();
+		if (isMulti()) return Array.isArray(v) ? v : [];
+		return v != null ? [v] : [];
+	};
+	const selectedOptions = () => props.options.filter((o) => selectedIds().includes(o.id));
+	const filtered = () => {
+		const q = query().toLowerCase();
+		return props.options.filter((o) => o.label.toLowerCase().includes(q) && (!isMulti() || !selectedIds().includes(o.id)));
+	};
+	const singleLabel = () => selectedOptions()[0]?.label ?? "";
+	return ssr(_tmpl$23, escape(createComponent(Show, {
+		get when() {
+			return isMulti() && selectedOptions().length > 0;
+		},
+		get children() {
+			return ssr(_tmpl$20, escape(createComponent(For, {
+				get each() {
+					return selectedOptions();
+				},
+				children: (option) => ssr(_tmpl$24, escape(option.label), `Remove ${escape(option.label, true)}`)
+			})));
+		}
+	})), ssrAttribute("id", escape(props.name, true), false), ssrAttribute("aria-expanded", escape(open(), true), false) + ssrAttribute("aria-controls", escape(listId, true), false), ssrAttribute("required", props.field.required && selectedIds().length === 0, true), ssrAttribute("disabled", props.field.admin?.readOnly, true) + ssrAttribute("placeholder", escape(props.field.admin?.placeholder ?? "Search…", true), false) + ssrAttribute("value", open() || isMulti() ? escape(query(), true) : escape(singleLabel(), true), false), escape(createComponent(Show, {
+		get when() {
+			return !isMulti() && value() != null && !props.field.required;
+		},
+		get children() {
+			return ssr(_tmpl$21);
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return open() && filtered().length > 0;
+		},
+		get children() {
+			return ssr(_tmpl$22, ssrAttribute("id", escape(listId, true), false), escape(createComponent(For, {
+				get each() {
+					return filtered();
+				},
+				children: (option, i) => ssr(_tmpl$25, ssrAttribute("aria-selected", escape(selectedIds().includes(option.id), true), false), `rounded px-3 py-2 text-left ${i() === active() ? "bg-base-200" : ""}`, escape(option.label))
+			})));
+		}
 	})));
 }
-function renderArrayInput(key, field, value, setField, ctx) {
-	const items = () => Array.isArray(value) ? value : [];
-	function updateItem(index, itemKey, itemValue) {
-		const next = items().slice();
-		next[index] = {
-			...next[index],
-			[itemKey]: itemValue
-		};
-		setField(key, next);
+function renderArray(form, ctx, name, field, label) {
+	return createComponent(form.Field, {
+		name,
+		mode: "array",
+		children: (fieldApi) => createComponent(BlockEditor, {
+			form,
+			ctx,
+			name,
+			field,
+			label,
+			fieldApi
+		})
+	});
+}
+function variantLabel(disc, variant) {
+	return disc.variantsAdmin?.[variant]?.label ?? humanize(variant);
+}
+function BlockEditor(props) {
+	const [collapsed, setCollapsed] = createSignal(/* @__PURE__ */ new Set());
+	const [menuOpen, setMenuOpen] = createSignal(false);
+	const disc = props.field.discriminator;
+	const variants = disc ? Object.keys(disc.variants) : [];
+	const items = () => Array.isArray(props.fieldApi().state.value) ? props.fieldApi().state.value : [];
+	function blockTitle(item) {
+		if (disc) {
+			const v = item[disc.key];
+			if (typeof v === "string") return variantLabel(disc, v);
+		}
+		return props.label;
 	}
-	function fieldsForItem(item) {
-		const base = Object.entries(field.fields);
-		const discriminator = field.discriminator;
-		if (!discriminator) return base;
-		const variantValue = item[discriminator.key];
-		const variantFields = typeof variantValue === "string" ? discriminator.variants[variantValue] : void 0;
-		return variantFields ? [...base, ...Object.entries(variantFields)] : base;
+	function blockSummary(item) {
+		for (const [key, f] of fieldsForItem(props.field, item)) {
+			if (key === disc?.key) continue;
+			if ((f.type === "text" || f.type === "select") && item[key]) return String(item[key]);
+		}
+		return "";
 	}
-	return ssr(_tmpl$18, escape(createComponent(For, {
+	return ssr(_tmpl$28, escape(props.label), escape(createComponent(Show, {
+		get when() {
+			return props.field.required;
+		},
+		get children() {
+			return ssr(_tmpl$9$1);
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.field.admin?.description;
+		},
+		get children() {
+			return ssr(_tmpl$0$1, escape(props.field.admin?.description));
+		}
+	})), escape(createComponent(Index, {
 		get each() {
 			return items();
 		},
-		children: (item, index) => ssr(_tmpl$19, escape(createComponent(For, {
-			get each() {
-				return fieldsForItem(item);
-			},
-			children: ([itemKey, itemField]) => {
-				const inputId = `${key}.${index()}.${itemKey}`;
-				return ssr(_tmpl$8$1, ssrAttribute("for", escape(inputId, true), false), escape(itemKey), escape(createComponent(Show, {
-					get when() {
-						return itemField.required;
-					},
-					get children() {
-						return ssr(_tmpl$7$1);
-					}
-				})), escape(renderInput(inputId, itemField, item[itemKey], (_, v) => updateItem(index(), itemKey, v), ctx)));
-			}
-		})))
-	})), escape(key));
+		children: (item, index) => {
+			const isCollapsed = () => collapsed().has(index);
+			return ssr(_tmpl$31, ssrAttribute("aria-expanded", !isCollapsed(), false), isCollapsed() ? "▸" : "▾", escape(blockTitle(item())), escape(createComponent(Show, {
+				get when() {
+					return isCollapsed() && blockSummary(item());
+				},
+				get children() {
+					return ssr(_tmpl$29, escape(blockSummary(item())));
+				}
+			})), ssrAttribute("disabled", index === 0, true), ssrAttribute("disabled", index === items().length - 1, true), escape(createComponent(Show, {
+				get when() {
+					return !isCollapsed();
+				},
+				get children() {
+					return ssr(_tmpl$30, escape(createComponent(For, {
+						get each() {
+							return fieldsForItem(props.field, item());
+						},
+						children: ([itemKey, itemField]) => renderField(props.form, props.ctx, `${props.name}[${index}].${itemKey}`, itemField, labelFor(itemKey, itemField))
+					})));
+				}
+			})));
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return disc && variants.length > 0;
+		},
+		get fallback() {
+			return ssr(_tmpl$32, escape(props.label));
+		},
+		get children() {
+			return ssr(_tmpl$27, ssrAttribute("aria-expanded", escape(menuOpen(), true), false), escape(createComponent(Show, {
+				get when() {
+					return menuOpen();
+				},
+				get children() {
+					return ssr(_tmpl$26, escape(createComponent(For, {
+						each: variants,
+						children: (variant) => ssr(_tmpl$34, escape(createComponent(Show, {
+							get when() {
+								return disc?.variantsAdmin?.[variant]?.icon;
+							},
+							get children() {
+								return ssr(_tmpl$33, ssrAttribute("class", escape(disc?.variantsAdmin?.[variant]?.icon, true), false));
+							}
+						})), escape(variantLabel(disc, variant)))
+					})));
+				}
+			})));
+		}
+	})));
+}
+function fieldsForItem(field, item) {
+	const base = Object.entries(field.fields);
+	const discriminator = field.discriminator;
+	if (!discriminator) return base;
+	const variantValue = item[discriminator.key];
+	const variantFields = typeof variantValue === "string" ? discriminator.variants[variantValue] : void 0;
+	return variantFields ? [...base, ...Object.entries(variantFields)] : base;
 }
 function formatDateValue(value) {
 	if (!value) return "—";
@@ -310,36 +594,39 @@ var _tmpl$$3 = ["<button type=\"button\" class=\"btn btn-outline btn-sm\">", "</
 	">",
 	"</select><select aria-label=\"Sort direction\" class=\"select select-sm join-item\"",
 	"><option value=\"asc\">Ascending</option><option value=\"desc\">Descending</option></select></div>"
-], _tmpl$3$2 = "<th></th>", _tmpl$4$2 = [
-	"<table class=\"table hidden md:table\"><thead><tr>",
-	"",
-	"</tr></thead><tbody>",
+], _tmpl$3$2 = [
+	"<table class=\"table hidden md:table\"><thead>",
+	"</thead><tbody>",
 	"</tbody></table>"
-], _tmpl$5$1 = ["<div class=\"flex flex-col gap-2 md:hidden\">", "</div>"], _tmpl$6$1 = [
+], _tmpl$4$2 = ["<div class=\"flex flex-col gap-2 md:hidden\">", "</div>"], _tmpl$5$1 = [
 	"<div class=\"bg-base-100 sticky bottom-0 flex items-center justify-between gap-2 border-t py-2\"><button type=\"button\" class=\"btn btn-sm\"",
 	">Prev</button><span class=\"text-sm opacity-70\">Page ",
 	"</span><button type=\"button\" class=\"btn btn-sm\"",
 	">Next</button></div>"
-], _tmpl$7 = [
+], _tmpl$6$1 = [
 	"<div class=\"flex flex-col gap-3\"><div class=\"flex flex-wrap items-center justify-between gap-2\">",
 	"",
 	"</div>",
 	"",
 	"</div>"
-], _tmpl$8 = [
+], _tmpl$7 = [
 	"<option",
 	">",
 	"</option>"
-], _tmpl$9 = ["<p class=\"text-sm opacity-70\">No ", " yet.</p>"], _tmpl$0 = ["<th>", "</th>"], _tmpl$1 = ["<td><input type=\"checkbox\" class=\"checkbox checkbox-sm\"", "></td>"], _tmpl$10 = [
+], _tmpl$8 = ["<p class=\"text-sm opacity-70\">No ", " yet.</p>"], _tmpl$9 = "<th></th>", _tmpl$0 = [
+	"<tr>",
+	"",
+	"</tr>"
+], _tmpl$1 = ["<th>", "</th>"], _tmpl$10 = ["<td><input type=\"checkbox\" class=\"checkbox checkbox-sm\"", "></td>"], _tmpl$11 = [
 	"<tr",
 	">",
 	"",
 	"</tr>"
-], _tmpl$11 = ["<td>", "</td>"], _tmpl$12 = ["<input type=\"checkbox\" class=\"checkbox checkbox-sm mt-1\"", ">"], _tmpl$13 = [
+], _tmpl$12 = ["<td>", "</td>"], _tmpl$13 = ["<input type=\"checkbox\" class=\"checkbox checkbox-sm mt-1\"", ">"], _tmpl$14 = [
 	"<div class=\"card bg-base-200 cursor-pointer p-3\" role=\"button\" tabindex=\"0\"><div class=\"flex items-start gap-3\">",
 	"<div class=\"flex flex-1 flex-col gap-1\">",
 	"</div></div></div>"
-], _tmpl$14 = [
+], _tmpl$15 = [
 	"<div class=\"flex justify-between gap-2 text-sm\"><span class=\"opacity-60\">",
 	"</span><span class=\"text-right\">",
 	"</span></div>"
@@ -361,9 +648,23 @@ function rowId(row) {
 	return typeof row.id === "number" ? row.id : void 0;
 }
 function CollectionList(props) {
-	const columns = () => listableFields(props.config);
+	const columns = () => listableFields(props.config).map(([key]) => ({
+		id: key,
+		accessorFn: (row) => row[key],
+		header: key,
+		cell: (info) => formatCellValue(info.getValue())
+	}));
+	const table = createSolidTable({
+		get data() {
+			return props.rows;
+		},
+		get columns() {
+			return columns();
+		},
+		getCoreRowModel: getCoreRowModel()
+	});
 	const [selectMode, setSelectMode] = createSignal(false);
-	return ssr(_tmpl$7, escape(createComponent(Show, {
+	return ssr(_tmpl$6$1, escape(createComponent(Show, {
 		get when() {
 			return props.selectable;
 		},
@@ -377,9 +678,9 @@ function CollectionList(props) {
 		get children() {
 			return ssr(_tmpl$2$2, ssrAttribute("value", escape(props.sortField ?? "", true), false), escape(createComponent(For, {
 				get each() {
-					return columns();
+					return table.getAllColumns();
 				},
-				children: ([key]) => ssr(_tmpl$8, ssrAttribute("value", escape(key, true), false), escape(key))
+				children: (column) => ssr(_tmpl$7, ssrAttribute("value", escape(column.id, true), false), escape(column.id))
 			})), ssrAttribute("value", escape(props.sortDirection ?? "asc", true), false));
 		}
 	})), escape(createComponent(Show, {
@@ -387,54 +688,59 @@ function CollectionList(props) {
 			return props.rows.length > 0;
 		},
 		get fallback() {
-			return ssr(_tmpl$9, escape(props.config.slug));
+			return ssr(_tmpl$8, escape(props.config.slug));
 		},
 		get children() {
-			return [ssr(_tmpl$4$2, escape(createComponent(Show, {
-				get when() {
-					return selectMode();
-				},
-				get children() {
-					return ssr(_tmpl$3$2);
-				}
-			})), escape(createComponent(For, {
+			return [ssr(_tmpl$3$2, escape(createComponent(For, {
 				get each() {
-					return columns();
+					return table.getHeaderGroups();
 				},
-				children: ([key]) => ssr(_tmpl$0, escape(key))
+				children: (headerGroup) => ssr(_tmpl$0, escape(createComponent(Show, {
+					get when() {
+						return selectMode();
+					},
+					get children() {
+						return ssr(_tmpl$9);
+					}
+				})), escape(createComponent(For, {
+					get each() {
+						return headerGroup.headers;
+					},
+					children: (header) => ssr(_tmpl$1, escape(flexRender(header.column.columnDef.header, header.getContext())))
+				})))
 			})), escape(createComponent(For, {
 				get each() {
-					return props.rows;
+					return table.getRowModel().rows;
 				},
-				children: (row) => ssr(_tmpl$10, ssrAttribute("class", props.onRowClick || selectMode() ? "cursor-pointer hover" : escape(void 0, true), false), escape(createComponent(Show, {
+				children: (row) => ssr(_tmpl$11, ssrAttribute("class", props.onRowClick || selectMode() ? "cursor-pointer hover" : escape(void 0, true), false), escape(createComponent(Show, {
 					get when() {
 						return selectMode();
 					},
 					get children() {
-						return ssr(_tmpl$1, ssrAttribute("checked", rowId(row) !== void 0 && (props.selectedIds?.has(rowId(row)) ?? false), true));
+						return ssr(_tmpl$10, ssrAttribute("checked", rowId(row.original) !== void 0 && (props.selectedIds?.has(rowId(row.original)) ?? false), true));
 					}
 				})), escape(createComponent(For, {
 					get each() {
-						return columns();
+						return row.getVisibleCells();
 					},
-					children: ([key]) => ssr(_tmpl$11, escape(formatCellValue(row[key])))
+					children: (cell) => ssr(_tmpl$12, escape(flexRender(cell.column.columnDef.cell, cell.getContext())))
 				})))
-			}))), ssr(_tmpl$5$1, escape(createComponent(For, {
+			}))), ssr(_tmpl$4$2, escape(createComponent(For, {
 				get each() {
-					return props.rows;
+					return table.getRowModel().rows;
 				},
-				children: (row) => ssr(_tmpl$13, escape(createComponent(Show, {
+				children: (row) => ssr(_tmpl$14, escape(createComponent(Show, {
 					get when() {
 						return selectMode();
 					},
 					get children() {
-						return ssr(_tmpl$12, ssrAttribute("checked", rowId(row) !== void 0 && (props.selectedIds?.has(rowId(row)) ?? false), true));
+						return ssr(_tmpl$13, ssrAttribute("checked", rowId(row.original) !== void 0 && (props.selectedIds?.has(rowId(row.original)) ?? false), true));
 					}
 				})), escape(createComponent(For, {
 					get each() {
-						return columns();
+						return row.getVisibleCells();
 					},
-					children: ([key]) => ssr(_tmpl$14, escape(key), escape(formatCellValue(row[key])))
+					children: (cell) => ssr(_tmpl$15, escape(cell.column.id), escape(flexRender(cell.column.columnDef.cell, cell.getContext())))
 				})))
 			})))];
 		}
@@ -443,7 +749,7 @@ function CollectionList(props) {
 			return props.page !== void 0 && props.pageSize !== void 0;
 		},
 		get children() {
-			return ssr(_tmpl$6$1, ssrAttribute("disabled", (props.page ?? 1) <= 1, true), escape(props.page), ssrAttribute("disabled", props.totalCount !== void 0 ? (props.page ?? 1) * (props.pageSize ?? 0) >= props.totalCount : props.rows.length < (props.pageSize ?? 0), true));
+			return ssr(_tmpl$5$1, ssrAttribute("disabled", (props.page ?? 1) <= 1, true), escape(props.page), ssrAttribute("disabled", props.totalCount !== void 0 ? (props.page ?? 1) * (props.pageSize ?? 0) >= props.totalCount : props.rows.length < (props.pageSize ?? 0), true));
 		}
 	})));
 }