@thebes/cadmea 1.1.1 → 1.3.0

package/dist/index/index.js

@@ -1,40 +1,79 @@
 import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } 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 = /*#__PURE__*/ template(`<p class="text-sm text-error"role=alert>`), _tmpl$2$3 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$3$3 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$2 = /*#__PURE__*/ template(`<form class="flex flex-col gap-4"><div class="bg-base-100 sticky bottom-0 flex gap-2 border-t py-3">`), _tmpl$7$1 = /*#__PURE__*/ template(`<span class=text-error> *`), _tmpl$8$1 = /*#__PURE__*/ template(`<div class=form-control><label class=label>`), _tmpl$9$1 = /*#__PURE__*/ template(`<button type=submit class="btn btn-primary flex-1">`), _tmpl$0$1 = /*#__PURE__*/ template(`<input class=input type=text>`), _tmpl$1$1 = /*#__PURE__*/ template(`<select class=select>`), _tmpl$10$1 = /*#__PURE__*/ template(`<option>`), _tmpl$11$1 = /*#__PURE__*/ template(`<input class=input type=number>`), _tmpl$12$1 = /*#__PURE__*/ template(`<input class=input type=text readonly>`), _tmpl$13$1 = /*#__PURE__*/ template(`<input class=checkbox type=checkbox>`), _tmpl$14 = /*#__PURE__*/ template(`<p class="text-sm opacity-70 break-all">`), _tmpl$15 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$16 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><input class=file-input type=file>`), _tmpl$17 = /*#__PURE__*/ template(`<select class=select><option value>—`), _tmpl$18 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><button type=button class="btn btn-outline btn-sm self-start">Add `), _tmpl$19 = /*#__PURE__*/ template(`<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`);
-const RichTextEditor = lazy(() => import("../RichTextEditor-BPilh7Pw.js").then((mod) => ({ default: mod.RichTextEditor })));
+var _tmpl$$4 = /*#__PURE__*/ template(`<p class="text-sm text-error"role=alert>`), _tmpl$2$3 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$3$3 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$2 = /*#__PURE__*/ template(`<form class="flex flex-col gap-4"><div class="bg-base-100 sticky bottom-0 flex gap-2 border-t py-3">`), _tmpl$7$1 = /*#__PURE__*/ template(`<fieldset class="border-base-300 rounded-box border p-4"><legend class="px-2 text-sm font-semibold">`), _tmpl$8$1 = /*#__PURE__*/ template(`<div class="grid grid-cols-1 gap-4 md:grid-cols-2">`), _tmpl$9$1 = /*#__PURE__*/ template(`<span class=text-error> *`), _tmpl$0$1 = /*#__PURE__*/ template(`<p class="text-base-content/60 mb-1 text-xs">`), _tmpl$1$1 = /*#__PURE__*/ template(`<p class="text-error mt-1 text-sm"role=alert>`), _tmpl$10$1 = /*#__PURE__*/ template(`<div><label class=label>`), _tmpl$11$1 = /*#__PURE__*/ template(`<input class=input type=text>`), _tmpl$12$1 = /*#__PURE__*/ template(`<select class=select>`), _tmpl$13$1 = /*#__PURE__*/ template(`<option>`), _tmpl$14 = /*#__PURE__*/ template(`<input class=input type=number>`), _tmpl$15 = /*#__PURE__*/ template(`<input class=input type=text readonly>`), _tmpl$16 = /*#__PURE__*/ template(`<input class=checkbox type=checkbox>`), _tmpl$17 = /*#__PURE__*/ template(`<p class="text-sm opacity-70 break-all">`), _tmpl$18 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$19 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><input class=file-input type=file>`), _tmpl$20 = /*#__PURE__*/ template(`<div class="mb-1 flex flex-wrap gap-1">`), _tmpl$21 = /*#__PURE__*/ template(`<button type=button aria-label=Clear class="absolute top-2 right-2 cursor-pointer opacity-60">×`), _tmpl$22 = /*#__PURE__*/ template(`<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">`), _tmpl$23 = /*#__PURE__*/ template(`<div class=relative><input type=text role=combobox autocomplete=off class=input>`), _tmpl$24 = /*#__PURE__*/ template(`<span class="badge badge-primary gap-1"><button type=button class=cursor-pointer>×`), _tmpl$25 = /*#__PURE__*/ template(`<button type=button role=option class="rounded px-3 py-2 text-left">`), _tmpl$26 = /*#__PURE__*/ template(`<div role=menu class="bg-base-100 border-base-300 rounded-box absolute z-10 mt-1 flex flex-col border p-1 shadow">`), _tmpl$27 = /*#__PURE__*/ template(`<div class="relative self-start"><button type=button class="btn btn-outline btn-sm"aria-haspopup=menu>Add block`), _tmpl$28 = /*#__PURE__*/ template(`<div class="form-control md:col-span-2"><div class="label font-medium"></div><div class="flex flex-col gap-3">`), _tmpl$29 = /*#__PURE__*/ template(`<span class="text-base-content/60 truncate text-sm">`), _tmpl$30 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2">`), _tmpl$31 = /*#__PURE__*/ template(`<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`), _tmpl$32 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm self-start">Add `), _tmpl$33 = /*#__PURE__*/ template(`<i aria-hidden=true>`), _tmpl$34 = /*#__PURE__*/ template(`<button type=button role=menuitem class="flex items-center gap-2 rounded px-3 py-2 text-left">`);
+const RichTextEditor = lazy(() => import("../RichTextEditor-ComcBFfl.js").then((mod) => ({ default: mod.RichTextEditor })));
 function editableFields(config) {
 	return Object.entries(config.fields).filter(([key]) => key !== "id");
 }
-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
-		}));
+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);
 	}
-	function editablePayload() {
-		return Object.fromEntries(Object.entries(values()).filter(([key]) => props.config.fields[key]?.type !== "date"));
+	return groups;
+}
+function CollectionEdit(props) {
+	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;
 	}
-	function handleSubmit(event) {
-		event.preventDefault();
-		props.onSubmit(editablePayload());
+	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 (() => {
 		var _el$ = _tmpl$6$2(), _el$3 = _el$.firstChild;
-		_el$.addEventListener("submit", handleSubmit);
+		_el$.addEventListener("submit", (event) => {
+			event.preventDefault();
+			form.handleSubmit();
+		});
 		insert(_el$, createComponent(Show, {
 			get when() {
 				return props.error;
@@ -46,24 +85,35 @@ function CollectionEdit(props) {
 			}
 		}), _el$3);
 		insert(_el$, createComponent(For, {
-			get each() {
-				return editableFields(props.config);
-			},
-			children: ([key, field]) => (() => {
-				var _el$0 = _tmpl$8$1(), _el$1 = _el$0.firstChild;
-				setAttribute(_el$1, "for", key);
-				insert(_el$1, key, null);
-				insert(_el$1, createComponent(Show, {
-					get when() {
-						return field.required;
-					},
-					get children() {
-						return _tmpl$7$1();
-					}
-				}), null);
-				insert(_el$0, () => renderInput(key, field, values()[key], setField, ctx), null);
-				return _el$0;
-			})()
+			each: fieldGroups,
+			children: (group) => createComponent(Show, {
+				get when() {
+					return group.name;
+				},
+				get fallback() {
+					return createComponent(FieldsGrid, {
+						form,
+						ctx,
+						get fields() {
+							return group.fields;
+						},
+						values: formValues
+					});
+				},
+				get children() {
+					var _el$0 = _tmpl$7$1(), _el$1 = _el$0.firstChild;
+					insert(_el$1, () => group.name);
+					insert(_el$0, createComponent(FieldsGrid, {
+						form,
+						ctx,
+						get fields() {
+							return group.fields;
+						},
+						values: formValues
+					}), null);
+					return _el$0;
+				}
+			})
 		}), _el$3);
 		insert(_el$3, createComponent(Show, {
 			get when() {
@@ -75,8 +125,9 @@ function CollectionEdit(props) {
 						return props.capabilities?.canUpdate !== false;
 					},
 					get children() {
-						var _el$11 = _tmpl$9$1();
-						insert(_el$11, createComponent(Show, {
+						var _el$10 = _tmpl$4$3();
+						_el$10.$$click = () => void form.handleSubmit();
+						insert(_el$10, createComponent(Show, {
 							get when() {
 								return props.saving;
 							},
@@ -87,8 +138,8 @@ function CollectionEdit(props) {
 								return _tmpl$2$3();
 							}
 						}));
-						effect(() => _el$11.disabled = props.saving);
-						return _el$11;
+						effect(() => _el$10.disabled = props.saving);
+						return _el$10;
 					}
 				});
 			},
@@ -96,7 +147,7 @@ function CollectionEdit(props) {
 				return [
 					(() => {
 						var _el$4 = _tmpl$3$3();
-						_el$4.$$click = () => void props.draftActions?.onSaveDraft(editablePayload());
+						_el$4.$$click = () => void props.draftActions?.onSaveDraft(editablePayload(formValues()));
 						insert(_el$4, createComponent(Show, {
 							get when() {
 								return props.draftActions?.saving;
@@ -156,98 +207,204 @@ function CollectionEdit(props) {
 		return _el$;
 	})();
 }
-function renderInput(key, field, value, setField, ctx) {
-	const Widget = ctx.fieldWidgets?.[key] ?? ctx.fieldWidgets?.[key.slice(key.lastIndexOf(".") + 1)];
+function FieldsGrid(props) {
+	return (() => {
+		var _el$12 = _tmpl$8$1();
+		insert(_el$12, 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));
+				}
+			})
+		}));
+		return _el$12;
+	})();
+}
+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) => (() => {
+			var _el$13 = _tmpl$10$1(), _el$14 = _el$13.firstChild;
+			className(_el$13, `form-control ${spanClass}`);
+			setAttribute(_el$14, "for", name);
+			insert(_el$14, label, null);
+			insert(_el$14, createComponent(Show, {
+				get when() {
+					return field.required;
+				},
+				get children() {
+					return _tmpl$9$1();
+				}
+			}), null);
+			insert(_el$13, createComponent(Show, {
+				get when() {
+					return field.admin?.description;
+				},
+				get children() {
+					var _el$16 = _tmpl$0$1();
+					insert(_el$16, () => field.admin?.description);
+					return _el$16;
+				}
+			}), null);
+			insert(_el$13, () => renderControl(ctx, name, field, fieldApi), null);
+			insert(_el$13, createComponent(Show, {
+				get when() {
+					return (fieldApi().state.meta.errors?.length ?? 0) > 0;
+				},
+				get children() {
+					var _el$17 = _tmpl$1$1();
+					insert(_el$17, () => fieldApi().state.meta.errors.filter(Boolean).join(", "));
+					return _el$17;
+				}
+			}), null);
+			return _el$13;
+		})()
+	});
+}
+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 (() => {
-			var _el$13 = _tmpl$0$1();
-			_el$13.$$input = (e) => setField(key, e.currentTarget.value);
-			setAttribute(_el$13, "id", key);
-			_el$13.value = value ?? "";
-			effect(() => _el$13.required = field.required);
-			return _el$13;
+			var _el$18 = _tmpl$11$1();
+			_el$18.addEventListener("blur", () => fieldApi().handleBlur());
+			_el$18.$$input = (e) => change(e.currentTarget.value);
+			setAttribute(_el$18, "id", name);
+			_el$18.readOnly = readOnly;
+			effect((_p$) => {
+				var _v$ = field.admin?.placeholder, _v$2 = field.required;
+				_v$ !== _p$.e && setAttribute(_el$18, "placeholder", _p$.e = _v$);
+				_v$2 !== _p$.t && (_el$18.required = _p$.t = _v$2);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			effect(() => _el$18.value = fieldApi().state.value ?? "");
+			return _el$18;
 		})();
 		case "select": return (() => {
-			var _el$14 = _tmpl$1$1();
-			_el$14.addEventListener("change", (e) => setField(key, e.currentTarget.value));
-			setAttribute(_el$14, "id", key);
-			_el$14.value = value ?? "";
-			insert(_el$14, createComponent(For, {
+			var _el$19 = _tmpl$12$1();
+			_el$19.addEventListener("blur", () => fieldApi().handleBlur());
+			_el$19.addEventListener("change", (e) => change(e.currentTarget.value));
+			setAttribute(_el$19, "id", name);
+			_el$19.disabled = readOnly;
+			insert(_el$19, createComponent(For, {
 				get each() {
 					return field.options;
 				},
 				children: (option) => (() => {
-					var _el$15 = _tmpl$10$1();
-					_el$15.value = option;
-					insert(_el$15, option);
-					return _el$15;
+					var _el$20 = _tmpl$13$1();
+					_el$20.value = option;
+					insert(_el$20, option);
+					return _el$20;
 				})()
 			}));
-			effect(() => _el$14.required = field.required);
-			return _el$14;
+			effect(() => _el$19.required = field.required);
+			effect(() => _el$19.value = fieldApi().state.value ?? "");
+			return _el$19;
 		})();
 		case "number": return (() => {
-			var _el$16 = _tmpl$11$1();
-			_el$16.$$input = (e) => setField(key, e.currentTarget.valueAsNumber);
-			setAttribute(_el$16, "id", key);
-			_el$16.value = value ?? "";
-			effect(() => _el$16.required = field.required);
-			return _el$16;
+			var _el$21 = _tmpl$14();
+			_el$21.addEventListener("blur", () => fieldApi().handleBlur());
+			_el$21.$$input = (e) => change(e.currentTarget.valueAsNumber);
+			setAttribute(_el$21, "id", name);
+			_el$21.readOnly = readOnly;
+			effect((_p$) => {
+				var _v$3 = field.admin?.placeholder, _v$4 = field.required;
+				_v$3 !== _p$.e && setAttribute(_el$21, "placeholder", _p$.e = _v$3);
+				_v$4 !== _p$.t && (_el$21.required = _p$.t = _v$4);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			effect(() => _el$21.value = fieldApi().state.value ?? "");
+			return _el$21;
 		})();
 		case "date": return (() => {
-			var _el$17 = _tmpl$12$1();
-			setAttribute(_el$17, "id", key);
-			effect(() => _el$17.value = formatDateValue(value));
-			return _el$17;
+			var _el$22 = _tmpl$15();
+			setAttribute(_el$22, "id", name);
+			effect(() => _el$22.value = formatDateValue(fieldApi().state.value));
+			return _el$22;
 		})();
 		case "checkbox": return (() => {
-			var _el$18 = _tmpl$13$1();
-			_el$18.addEventListener("change", (e) => setField(key, e.currentTarget.checked));
-			setAttribute(_el$18, "id", key);
-			_el$18.checked = value ?? false;
-			return _el$18;
+			var _el$23 = _tmpl$16();
+			_el$23.addEventListener("change", (e) => change(e.currentTarget.checked));
+			setAttribute(_el$23, "id", name);
+			_el$23.disabled = readOnly;
+			effect(() => _el$23.checked = fieldApi().state.value ?? false);
+			return _el$23;
 		})();
-		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 "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 _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();
+	const value = () => props.fieldApi().state.value;
 	async function handleFileChange(e) {
 		const file = e.currentTarget.files?.[0];
 		if (!file) return;
-		if (!ctx.onUploadFile) {
+		if (!props.ctx.onUploadFile) {
 			setUploadError("No upload handler configured for this form.");
 			return;
 		}
 		setUploading(true);
 		setUploadError(void 0);
 		try {
-			const { url } = await ctx.onUploadFile(file);
-			setField(key, url);
+			const { url } = await props.ctx.onUploadFile(file);
+			props.fieldApi().handleChange(url);
 		} catch (err) {
 			setUploadError(err instanceof Error ? err.message : "Upload failed");
 		} finally {
@@ -255,18 +412,19 @@ function renderUploadInput(key, field, value, setField, ctx) {
 		}
 	}
 	return (() => {
-		var _el$20 = _tmpl$16(), _el$22 = _el$20.firstChild;
-		insert(_el$20, createComponent(Show, {
-			when: value,
+		var _el$25 = _tmpl$19(), _el$27 = _el$25.firstChild;
+		insert(_el$25, createComponent(Show, {
+			get when() {
+				return value();
+			},
 			get children() {
-				var _el$21 = _tmpl$14();
-				insert(_el$21, value);
-				return _el$21;
+				var _el$26 = _tmpl$17();
+				insert(_el$26, value);
+				return _el$26;
 			}
-		}), _el$22);
-		_el$22.addEventListener("change", handleFileChange);
-		setAttribute(_el$22, "id", key);
-		insert(_el$20, createComponent(Show, {
+		}), _el$27);
+		_el$27.addEventListener("change", handleFileChange);
+		insert(_el$25, createComponent(Show, {
 			get when() {
 				return uploading();
 			},
@@ -274,124 +432,379 @@ function renderUploadInput(key, field, value, setField, ctx) {
 				return _tmpl$2$3();
 			}
 		}), null);
-		insert(_el$20, createComponent(Show, {
+		insert(_el$25, createComponent(Show, {
 			get when() {
 				return uploadError();
 			},
 			get children() {
-				var _el$24 = _tmpl$15();
-				insert(_el$24, uploadError);
-				return _el$24;
+				var _el$29 = _tmpl$18();
+				insert(_el$29, uploadError);
+				return _el$29;
 			}
 		}), null);
 		effect((_p$) => {
-			var _v$ = field.required && !value, _v$2 = uploading();
-			_v$ !== _p$.e && (_el$22.required = _p$.e = _v$);
-			_v$2 !== _p$.t && (_el$22.disabled = _p$.t = _v$2);
+			var _v$5 = props.name, _v$6 = props.field.required && !value(), _v$7 = uploading() || props.field.admin?.readOnly;
+			_v$5 !== _p$.e && setAttribute(_el$27, "id", _p$.e = _v$5);
+			_v$6 !== _p$.t && (_el$27.required = _p$.t = _v$6);
+			_v$7 !== _p$.a && (_el$27.disabled = _p$.a = _v$7);
 			return _p$;
 		}, {
 			e: void 0,
-			t: void 0
+			t: void 0,
+			a: void 0
 		});
-		return _el$20;
+		return _el$25;
 	})();
 }
-function renderRelationshipInput(key, field, value, setField, ctx) {
-	if (field.hasMany) return null;
-	const options = ctx.relationshipOptions?.[field.relationTo] ?? [];
+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 ?? "";
+	function choose(option) {
+		if (isMulti()) {
+			props.fieldApi().handleChange([...selectedIds(), option.id]);
+			setQuery("");
+		} else {
+			props.fieldApi().handleChange(option.id);
+			setQuery("");
+			setOpen(false);
+		}
+		setActive(0);
+	}
+	function removeId(id) {
+		if (isMulti()) props.fieldApi().handleChange(selectedIds().filter((x) => x !== id));
+		else props.fieldApi().handleChange(null);
+	}
+	function onKeyDown(e) {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			setOpen(true);
+			setActive((a) => Math.min(a + 1, filtered().length - 1));
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			setActive((a) => Math.max(a - 1, 0));
+		} else if (e.key === "Enter") {
+			e.preventDefault();
+			const option = filtered()[active()];
+			if (option) choose(option);
+		} else if (e.key === "Escape") setOpen(false);
+		else if (e.key === "Backspace" && isMulti() && query() === "") {
+			const ids = selectedIds();
+			if (ids.length > 0) removeId(ids[ids.length - 1]);
+		}
+	}
 	return (() => {
-		var _el$25 = _tmpl$17();
-		_el$25.firstChild;
-		_el$25.addEventListener("change", (e) => setField(key, e.currentTarget.value === "" ? null : Number(e.currentTarget.value)));
-		setAttribute(_el$25, "id", key);
-		insert(_el$25, createComponent(For, {
-			each: options,
-			children: (option) => (() => {
-				var _el$27 = _tmpl$10$1();
-				insert(_el$27, () => option.label);
-				effect(() => _el$27.value = option.id);
-				return _el$27;
-			})()
+		var _el$30 = _tmpl$23(), _el$32 = _el$30.firstChild;
+		insert(_el$30, createComponent(Show, {
+			get when() {
+				return memo(() => !!isMulti())() && selectedOptions().length > 0;
+			},
+			get children() {
+				var _el$31 = _tmpl$20();
+				insert(_el$31, createComponent(For, {
+					get each() {
+						return selectedOptions();
+					},
+					children: (option) => (() => {
+						var _el$35 = _tmpl$24(), _el$36 = _el$35.firstChild;
+						insert(_el$35, () => option.label, _el$36);
+						_el$36.$$click = () => removeId(option.id);
+						effect(() => setAttribute(_el$36, "aria-label", `Remove ${option.label}`));
+						return _el$35;
+					})()
+				}));
+				return _el$31;
+			}
+		}), _el$32);
+		_el$32.$$keydown = onKeyDown;
+		_el$32.addEventListener("blur", () => setTimeout(() => setOpen(false), 120));
+		_el$32.addEventListener("focus", () => setOpen(true));
+		_el$32.$$input = (e) => {
+			setQuery(e.currentTarget.value);
+			setOpen(true);
+			setActive(0);
+		};
+		setAttribute(_el$32, "aria-controls", listId);
+		insert(_el$30, createComponent(Show, {
+			get when() {
+				return memo(() => !!(!isMulti() && value() != null))() && !props.field.required;
+			},
+			get children() {
+				var _el$33 = _tmpl$21();
+				_el$33.$$click = () => removeId(value());
+				_el$33.$$mousedown = (e) => e.preventDefault();
+				return _el$33;
+			}
 		}), null);
-		effect(() => _el$25.required = field.required);
-		effect(() => _el$25.value = value != null ? String(value) : "");
-		return _el$25;
+		insert(_el$30, createComponent(Show, {
+			get when() {
+				return memo(() => !!open())() && filtered().length > 0;
+			},
+			get children() {
+				var _el$34 = _tmpl$22();
+				setAttribute(_el$34, "id", listId);
+				insert(_el$34, createComponent(For, {
+					get each() {
+						return filtered();
+					},
+					children: (option, i) => (() => {
+						var _el$37 = _tmpl$25();
+						_el$37.$$click = () => choose(option);
+						_el$37.$$mousedown = (e) => e.preventDefault();
+						insert(_el$37, () => option.label);
+						effect((_p$) => {
+							var _v$11 = selectedIds().includes(option.id), _v$12 = !!(i() === active());
+							_v$11 !== _p$.e && setAttribute(_el$37, "aria-selected", _p$.e = _v$11);
+							_v$12 !== _p$.t && _el$37.classList.toggle("bg-base-200", _p$.t = _v$12);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$37;
+					})()
+				}));
+				return _el$34;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$8 = props.name, _v$9 = open(), _v$0 = props.field.required && selectedIds().length === 0, _v$1 = props.field.admin?.readOnly, _v$10 = props.field.admin?.placeholder ?? "Search…";
+			_v$8 !== _p$.e && setAttribute(_el$32, "id", _p$.e = _v$8);
+			_v$9 !== _p$.t && setAttribute(_el$32, "aria-expanded", _p$.t = _v$9);
+			_v$0 !== _p$.a && (_el$32.required = _p$.a = _v$0);
+			_v$1 !== _p$.o && (_el$32.disabled = _p$.o = _v$1);
+			_v$10 !== _p$.i && setAttribute(_el$32, "placeholder", _p$.i = _v$10);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		effect(() => _el$32.value = open() || isMulti() ? query() : singleLabel());
+		return _el$30;
 	})();
 }
-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 addBlock(variant) {
+		const seed = variant && disc ? { [disc.key]: variant } : {};
+		props.fieldApi().pushValue(seed);
+		setMenuOpen(false);
 	}
-	function addItem() {
-		setField(key, [...items(), {}]);
+	function duplicate(index) {
+		props.fieldApi().insertValue(index + 1, { ...items()[index] });
 	}
-	function removeItem(index) {
-		setField(key, items().filter((_, i) => i !== index));
+	function move(from, to) {
+		if (to < 0 || to >= items().length) return;
+		props.fieldApi().moveValue(from, to);
 	}
-	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 toggleCollapse(index) {
+		setCollapsed((prev) => {
+			const next = new Set(prev);
+			if (next.has(index)) next.delete(index);
+			else next.add(index);
+			return next;
+		});
+	}
+	function blockTitle(item) {
+		if (disc) {
+			const v = item[disc.key];
+			if (typeof v === "string") return variantLabel(disc, v);
+		}
+		return props.label;
+	}
+	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 (() => {
-		var _el$28 = _tmpl$18(), _el$29 = _el$28.firstChild;
-		_el$29.firstChild;
-		insert(_el$28, createComponent(For, {
+		var _el$38 = _tmpl$28(), _el$39 = _el$38.firstChild, _el$42 = _el$39.nextSibling;
+		insert(_el$39, () => props.label, null);
+		insert(_el$39, createComponent(Show, {
+			get when() {
+				return props.field.required;
+			},
+			get children() {
+				return _tmpl$9$1();
+			}
+		}), null);
+		insert(_el$38, createComponent(Show, {
+			get when() {
+				return props.field.admin?.description;
+			},
+			get children() {
+				var _el$41 = _tmpl$0$1();
+				insert(_el$41, () => props.field.admin?.description);
+				return _el$41;
+			}
+		}), _el$42);
+		insert(_el$42, createComponent(Index, {
 			get each() {
 				return items();
 			},
-			children: (item, index) => (() => {
-				var _el$31 = _tmpl$19(), _el$32 = _el$31.firstChild;
-				insert(_el$31, createComponent(For, {
-					get each() {
-						return fieldsForItem(item);
-					},
-					children: ([itemKey, itemField]) => {
-						const inputId = `${key}.${index()}.${itemKey}`;
-						return (() => {
-							var _el$33 = _tmpl$8$1(), _el$34 = _el$33.firstChild;
-							setAttribute(_el$34, "for", inputId);
-							insert(_el$34, itemKey, null);
-							insert(_el$34, createComponent(Show, {
-								get when() {
-									return itemField.required;
+			children: (item, index) => {
+				const isCollapsed = () => collapsed().has(index);
+				return (() => {
+					var _el$46 = _tmpl$31(), _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild, _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$52 = _el$48.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling;
+					_el$48.$$click = () => toggleCollapse(index);
+					insert(_el$49, () => isCollapsed() ? "▸" : "▾");
+					insert(_el$50, () => blockTitle(item()));
+					insert(_el$47, createComponent(Show, {
+						get when() {
+							return memo(() => !!isCollapsed())() && blockSummary(item());
+						},
+						get children() {
+							var _el$51 = _tmpl$29();
+							insert(_el$51, () => blockSummary(item()));
+							return _el$51;
+						}
+					}), _el$52);
+					_el$53.$$click = () => move(index, index - 1);
+					_el$53.disabled = index === 0;
+					_el$54.$$click = () => move(index, index + 1);
+					_el$55.$$click = () => duplicate(index);
+					_el$56.$$click = () => props.fieldApi().removeValue(index);
+					insert(_el$46, createComponent(Show, {
+						get when() {
+							return !isCollapsed();
+						},
+						get children() {
+							var _el$57 = _tmpl$30();
+							insert(_el$57, createComponent(For, {
+								get each() {
+									return fieldsForItem(props.field, item());
 								},
-								get children() {
-									return _tmpl$7$1();
-								}
-							}), null);
-							insert(_el$33, () => renderInput(inputId, itemField, item[itemKey], (_, v) => updateItem(index(), itemKey, v), ctx), null);
-							return _el$33;
-						})();
+								children: ([itemKey, itemField]) => renderField(props.form, props.ctx, `${props.name}[${index}].${itemKey}`, itemField, labelFor(itemKey, itemField))
+							}));
+							return _el$57;
+						}
+					}), null);
+					effect((_p$) => {
+						var _v$13 = !isCollapsed(), _v$14 = index === items().length - 1;
+						_v$13 !== _p$.e && setAttribute(_el$48, "aria-expanded", _p$.e = _v$13);
+						_v$14 !== _p$.t && (_el$54.disabled = _p$.t = _v$14);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$46;
+				})();
+			}
+		}), null);
+		insert(_el$42, createComponent(Show, {
+			get when() {
+				return disc && variants.length > 0;
+			},
+			get fallback() {
+				return (() => {
+					var _el$58 = _tmpl$32();
+					_el$58.firstChild;
+					_el$58.$$click = () => addBlock();
+					insert(_el$58, () => props.label, null);
+					return _el$58;
+				})();
+			},
+			get children() {
+				var _el$43 = _tmpl$27(), _el$44 = _el$43.firstChild;
+				_el$44.$$click = () => setMenuOpen((o) => !o);
+				insert(_el$43, createComponent(Show, {
+					get when() {
+						return menuOpen();
+					},
+					get children() {
+						var _el$45 = _tmpl$26();
+						insert(_el$45, createComponent(For, {
+							each: variants,
+							children: (variant) => (() => {
+								var _el$60 = _tmpl$34();
+								_el$60.$$click = () => addBlock(variant);
+								insert(_el$60, createComponent(Show, {
+									get when() {
+										return disc?.variantsAdmin?.[variant]?.icon;
+									},
+									get children() {
+										var _el$61 = _tmpl$33();
+										effect(() => className(_el$61, disc?.variantsAdmin?.[variant]?.icon));
+										return _el$61;
+									}
+								}), null);
+								insert(_el$60, () => variantLabel(disc, variant), null);
+								return _el$60;
+							})()
+						}));
+						return _el$45;
 					}
-				}), _el$32);
-				_el$32.$$click = () => removeItem(index());
-				return _el$31;
-			})()
-		}), _el$29);
-		_el$29.$$click = addItem;
-		insert(_el$29, key, null);
-		return _el$28;
+				}), null);
+				effect(() => setAttribute(_el$44, "aria-expanded", menuOpen()));
+				return _el$43;
+			}
+		}), null);
+		return _el$38;
 	})();
 }
+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 "—";
 	const date = value instanceof Date ? value : new Date(value);
 	return Number.isNaN(date.getTime()) ? "—" : date.toLocaleString();
 }
-delegateEvents(["click", "input"]);
+delegateEvents([
+	"click",
+	"input",
+	"keydown",
+	"mousedown"
+]);
 //#endregion
 //#region src/CollectionList.tsx
-var _tmpl$$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm">`), _tmpl$2$2 = /*#__PURE__*/ template(`<div class=join><select aria-label="Sort by"class="select select-sm join-item"></select><select aria-label="Sort direction"class="select select-sm join-item"><option value=asc>Ascending</option><option value=desc>Descending`), _tmpl$3$2 = /*#__PURE__*/ template(`<th>`), _tmpl$4$2 = /*#__PURE__*/ template(`<table class="table hidden md:table"><thead><tr></tr></thead><tbody>`), _tmpl$5$1 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2 md:hidden">`), _tmpl$6$1 = /*#__PURE__*/ template(`<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`), _tmpl$7 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><div class="flex flex-wrap items-center justify-between gap-2">`), _tmpl$8 = /*#__PURE__*/ template(`<option>`), _tmpl$9 = /*#__PURE__*/ template(`<p class="text-sm opacity-70">No <!> yet.`), _tmpl$0 = /*#__PURE__*/ template(`<td><input type=checkbox class="checkbox checkbox-sm">`), _tmpl$1 = /*#__PURE__*/ template(`<tr>`), _tmpl$10 = /*#__PURE__*/ template(`<td>`), _tmpl$11 = /*#__PURE__*/ template(`<input type=checkbox class="checkbox checkbox-sm mt-1">`), _tmpl$12 = /*#__PURE__*/ template(`<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">`), _tmpl$13 = /*#__PURE__*/ template(`<div class="flex justify-between gap-2 text-sm"><span class=opacity-60></span><span class=text-right>`);
+var _tmpl$$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm">`), _tmpl$2$2 = /*#__PURE__*/ template(`<div class=join><select aria-label="Sort by"class="select select-sm join-item"></select><select aria-label="Sort direction"class="select select-sm join-item"><option value=asc>Ascending</option><option value=desc>Descending`), _tmpl$3$2 = /*#__PURE__*/ template(`<table class="table hidden md:table"><thead></thead><tbody>`), _tmpl$4$2 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2 md:hidden">`), _tmpl$5$1 = /*#__PURE__*/ template(`<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`), _tmpl$6$1 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><div class="flex flex-wrap items-center justify-between gap-2">`), _tmpl$7 = /*#__PURE__*/ template(`<option>`), _tmpl$8 = /*#__PURE__*/ template(`<p class="text-sm opacity-70">No <!> yet.`), _tmpl$9 = /*#__PURE__*/ template(`<th>`), _tmpl$0 = /*#__PURE__*/ template(`<tr>`), _tmpl$1 = /*#__PURE__*/ template(`<td><input type=checkbox class="checkbox checkbox-sm">`), _tmpl$10 = /*#__PURE__*/ template(`<td>`), _tmpl$11 = /*#__PURE__*/ template(`<input type=checkbox class="checkbox checkbox-sm mt-1">`), _tmpl$12 = /*#__PURE__*/ template(`<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">`), _tmpl$13 = /*#__PURE__*/ template(`<div class="flex justify-between gap-2 text-sm"><span class=opacity-60></span><span class=text-right>`);
 function listableFields(config) {
 	const excluded = new Set([
 		"richText",
@@ -409,7 +822,21 @@ 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);
 	function toggleSelected(id) {
 		const next = new Set(props.selectedIds ?? []);
@@ -426,7 +853,7 @@ function CollectionList(props) {
 		props.onRowClick?.(row);
 	}
 	return (() => {
-		var _el$ = _tmpl$7(), _el$2 = _el$.firstChild;
+		var _el$ = _tmpl$6$1(), _el$2 = _el$.firstChild;
 		insert(_el$2, createComponent(Show, {
 			get when() {
 				return props.selectable;
@@ -447,16 +874,16 @@ function CollectionList(props) {
 				_el$5.addEventListener("change", (e) => props.onSortChange?.(e.currentTarget.value, props.sortDirection ?? "asc"));
 				insert(_el$5, createComponent(For, {
 					get each() {
-						return columns();
+						return table.getAllColumns();
 					},
-					children: ([key]) => (() => {
-						var _el$16 = _tmpl$8();
-						_el$16.value = key;
-						insert(_el$16, key);
-						return _el$16;
+					children: (column) => (() => {
+						var _el$14 = _tmpl$7();
+						insert(_el$14, () => column.id);
+						effect(() => _el$14.value = column.id);
+						return _el$14;
 					})()
 				}));
-				_el$6.addEventListener("change", (e) => props.onSortChange?.(props.sortField ?? columns()[0]?.[0] ?? "", e.currentTarget.value));
+				_el$6.addEventListener("change", (e) => props.onSortChange?.(props.sortField ?? table.getAllColumns()[0]?.id ?? "", e.currentTarget.value));
 				effect(() => _el$5.value = props.sortField ?? "");
 				effect(() => _el$6.value = props.sortDirection ?? "asc");
 				return _el$4;
@@ -468,62 +895,71 @@ function CollectionList(props) {
 			},
 			get fallback() {
 				return (() => {
-					var _el$17 = _tmpl$9(), _el$20 = _el$17.firstChild.nextSibling;
-					_el$20.nextSibling;
-					insert(_el$17, () => props.config.slug, _el$20);
-					return _el$17;
+					var _el$15 = _tmpl$8(), _el$18 = _el$15.firstChild.nextSibling;
+					_el$18.nextSibling;
+					insert(_el$15, () => props.config.slug, _el$18);
+					return _el$15;
 				})();
 			},
 			get children() {
 				return [(() => {
-					var _el$7 = _tmpl$4$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$1 = _el$8.nextSibling;
-					insert(_el$9, createComponent(Show, {
-						get when() {
-							return selectMode();
-						},
-						get children() {
-							return _tmpl$3$2();
-						}
-					}), null);
-					insert(_el$9, createComponent(For, {
+					var _el$7 = _tmpl$3$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+					insert(_el$8, createComponent(For, {
 						get each() {
-							return columns();
+							return table.getHeaderGroups();
 						},
-						children: ([key]) => (() => {
-							var _el$21 = _tmpl$3$2();
-							insert(_el$21, key);
-							return _el$21;
+						children: (headerGroup) => (() => {
+							var _el$19 = _tmpl$0();
+							insert(_el$19, createComponent(Show, {
+								get when() {
+									return selectMode();
+								},
+								get children() {
+									return _tmpl$9();
+								}
+							}), null);
+							insert(_el$19, createComponent(For, {
+								get each() {
+									return headerGroup.headers;
+								},
+								children: (header) => (() => {
+									var _el$21 = _tmpl$9();
+									insert(_el$21, () => flexRender(header.column.columnDef.header, header.getContext()));
+									return _el$21;
+								})()
+							}), null);
+							return _el$19;
 						})()
-					}), null);
-					insert(_el$1, createComponent(For, {
+					}));
+					insert(_el$9, createComponent(For, {
 						get each() {
-							return props.rows;
+							return table.getRowModel().rows;
 						},
 						children: (row) => (() => {
-							var _el$22 = _tmpl$1();
-							_el$22.$$click = () => handleRowActivate(row);
+							var _el$22 = _tmpl$0();
+							_el$22.$$click = () => handleRowActivate(row.original);
 							insert(_el$22, createComponent(Show, {
 								get when() {
 									return selectMode();
 								},
 								get children() {
-									var _el$23 = _tmpl$0(), _el$24 = _el$23.firstChild;
+									var _el$23 = _tmpl$1(), _el$24 = _el$23.firstChild;
 									_el$24.addEventListener("change", () => {
-										const id = rowId(row);
+										const id = rowId(row.original);
 										if (id !== void 0) toggleSelected(id);
 									});
 									_el$24.$$click = (e) => e.stopPropagation();
-									effect(() => _el$24.checked = rowId(row) !== void 0 && (props.selectedIds?.has(rowId(row)) ?? false));
+									effect(() => _el$24.checked = rowId(row.original) !== void 0 && (props.selectedIds?.has(rowId(row.original)) ?? false));
 									return _el$23;
 								}
 							}), null);
 							insert(_el$22, createComponent(For, {
 								get each() {
-									return columns();
+									return row.getVisibleCells();
 								},
-								children: ([key]) => (() => {
+								children: (cell) => (() => {
 									var _el$25 = _tmpl$10();
-									insert(_el$25, () => formatCellValue(row[key]));
+									insert(_el$25, () => flexRender(cell.column.columnDef.cell, cell.getContext()));
 									return _el$25;
 								})()
 							}), null);
@@ -533,20 +969,20 @@ function CollectionList(props) {
 					}));
 					return _el$7;
 				})(), (() => {
-					var _el$10 = _tmpl$5$1();
-					insert(_el$10, createComponent(For, {
+					var _el$0 = _tmpl$4$2();
+					insert(_el$0, createComponent(For, {
 						get each() {
-							return props.rows;
+							return table.getRowModel().rows;
 						},
 						children: (row) => (() => {
 							var _el$26 = _tmpl$12(), _el$27 = _el$26.firstChild, _el$29 = _el$27.firstChild;
 							_el$26.$$keydown = (e) => {
 								if (e.key === "Enter" || e.key === " ") {
 									e.preventDefault();
-									handleRowActivate(row);
+									handleRowActivate(row.original);
 								}
 							};
-							_el$26.$$click = () => handleRowActivate(row);
+							_el$26.$$click = () => handleRowActivate(row.original);
 							insert(_el$27, createComponent(Show, {
 								get when() {
 									return selectMode();
@@ -554,29 +990,29 @@ function CollectionList(props) {
 								get children() {
 									var _el$28 = _tmpl$11();
 									_el$28.addEventListener("change", () => {
-										const id = rowId(row);
+										const id = rowId(row.original);
 										if (id !== void 0) toggleSelected(id);
 									});
 									_el$28.$$click = (e) => e.stopPropagation();
-									effect(() => _el$28.checked = rowId(row) !== void 0 && (props.selectedIds?.has(rowId(row)) ?? false));
+									effect(() => _el$28.checked = rowId(row.original) !== void 0 && (props.selectedIds?.has(rowId(row.original)) ?? false));
 									return _el$28;
 								}
 							}), _el$29);
 							insert(_el$29, createComponent(For, {
 								get each() {
-									return columns();
+									return row.getVisibleCells();
 								},
-								children: ([key]) => (() => {
+								children: (cell) => (() => {
 									var _el$30 = _tmpl$13(), _el$31 = _el$30.firstChild, _el$32 = _el$31.nextSibling;
-									insert(_el$31, key);
-									insert(_el$32, () => formatCellValue(row[key]));
+									insert(_el$31, () => cell.column.id);
+									insert(_el$32, () => flexRender(cell.column.columnDef.cell, cell.getContext()));
 									return _el$30;
 								})()
 							}));
 							return _el$26;
 						})()
 					}));
-					return _el$10;
+					return _el$0;
 				})()];
 			}
 		}), null);
@@ -585,22 +1021,22 @@ function CollectionList(props) {
 				return memo(() => props.page !== void 0)() && props.pageSize !== void 0;
 			},
 			get children() {
-				var _el$11 = _tmpl$6$1(), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
-				_el$13.firstChild;
-				var _el$15 = _el$13.nextSibling;
-				_el$12.$$click = () => props.onPageChange?.((props.page ?? 1) - 1);
-				insert(_el$13, () => props.page, null);
-				_el$15.$$click = () => props.onPageChange?.((props.page ?? 1) + 1);
+				var _el$1 = _tmpl$5$1(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+				_el$11.firstChild;
+				var _el$13 = _el$11.nextSibling;
+				_el$10.$$click = () => props.onPageChange?.((props.page ?? 1) - 1);
+				insert(_el$11, () => props.page, null);
+				_el$13.$$click = () => props.onPageChange?.((props.page ?? 1) + 1);
 				effect((_p$) => {
 					var _v$ = (props.page ?? 1) <= 1, _v$2 = props.totalCount !== void 0 ? (props.page ?? 1) * (props.pageSize ?? 0) >= props.totalCount : props.rows.length < (props.pageSize ?? 0);
-					_v$ !== _p$.e && (_el$12.disabled = _p$.e = _v$);
-					_v$2 !== _p$.t && (_el$15.disabled = _p$.t = _v$2);
+					_v$ !== _p$.e && (_el$10.disabled = _p$.e = _v$);
+					_v$2 !== _p$.t && (_el$13.disabled = _p$.t = _v$2);
 					return _p$;
 				}, {
 					e: void 0,
 					t: void 0
 				});
-				return _el$11;
+				return _el$1;
 			}
 		}), null);
 		return _el$;