@thebes/cadmea 1.0.0

package/dist/tanstack-start/index.js

@@ -0,0 +1,897 @@
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { createMutation, createQuery, useQueryClient } from "@tanstack/solid-query";
+import { For, Show, Suspense, createEffect, createSignal, lazy } from "solid-js";
+import { Link, useBlocker } from "@tanstack/solid-router";
+//#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$1 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$1 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$1 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$1 = /*#__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 })));
+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 editablePayload() {
+		return Object.fromEntries(Object.entries(values()).filter(([key]) => props.config.fields[key]?.type !== "date"));
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		props.onSubmit(editablePayload());
+	}
+	const ctx = {
+		onUploadFile: props.onUploadFile,
+		relationshipOptions: props.relationshipOptions
+	};
+	const versioned = () => props.config.versions?.drafts && props.draftActions;
+	return (() => {
+		var _el$ = _tmpl$6$1(), _el$3 = _el$.firstChild;
+		_el$.addEventListener("submit", handleSubmit);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.error;
+			},
+			get children() {
+				var _el$2 = _tmpl$$4();
+				insert(_el$2, () => props.error);
+				return _el$2;
+			}
+		}), _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;
+			})()
+		}), _el$3);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return versioned();
+			},
+			get fallback() {
+				return createComponent(Show, {
+					get when() {
+						return props.capabilities?.canUpdate !== false;
+					},
+					get children() {
+						var _el$11 = _tmpl$9$1();
+						insert(_el$11, createComponent(Show, {
+							get when() {
+								return props.saving;
+							},
+							get fallback() {
+								return props.submitLabel ?? "Save";
+							},
+							get children() {
+								return _tmpl$2$3();
+							}
+						}));
+						effect(() => _el$11.disabled = props.saving);
+						return _el$11;
+					}
+				});
+			},
+			get children() {
+				return [
+					(() => {
+						var _el$4 = _tmpl$3$1();
+						_el$4.$$click = () => void props.draftActions?.onSaveDraft(editablePayload());
+						insert(_el$4, createComponent(Show, {
+							get when() {
+								return props.draftActions?.saving;
+							},
+							get fallback() {
+								return props.draftActions?.saveDraftLabel ?? "Save draft";
+							},
+							get children() {
+								return _tmpl$2$3();
+							}
+						}));
+						effect(() => _el$4.disabled = props.draftActions?.saving);
+						return _el$4;
+					})(),
+					(() => {
+						var _el$6 = _tmpl$4$1();
+						_el$6.$$click = () => void props.draftActions?.onPublish?.();
+						insert(_el$6, createComponent(Show, {
+							get when() {
+								return props.draftActions?.publishing;
+							},
+							get fallback() {
+								return props.draftActions?.publishLabel ?? "Publish";
+							},
+							get children() {
+								return _tmpl$2$3();
+							}
+						}));
+						effect(() => _el$6.disabled = !props.draftActions?.canPublish || props.draftActions?.publishing);
+						return _el$6;
+					})(),
+					createComponent(Show, {
+						get when() {
+							return props.draftActions?.onPreview;
+						},
+						get children() {
+							var _el$8 = _tmpl$5$1();
+							_el$8.$$click = () => void props.draftActions?.onPreview?.();
+							insert(_el$8, createComponent(Show, {
+								get when() {
+									return props.draftActions?.previewing;
+								},
+								get fallback() {
+									return props.draftActions?.previewLabel ?? "Preview";
+								},
+								get children() {
+									return _tmpl$2$3();
+								}
+							}));
+							effect(() => _el$8.disabled = !props.draftActions?.canPreview || props.draftActions?.previewing);
+							return _el$8;
+						}
+					})
+				];
+			}
+		}));
+		return _el$;
+	})();
+}
+function renderInput(key, field, value, setField, ctx) {
+	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;
+		})();
+		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, {
+				get each() {
+					return field.options;
+				},
+				children: (option) => (() => {
+					var _el$15 = _tmpl$10$1();
+					_el$15.value = option;
+					insert(_el$15, option);
+					return _el$15;
+				})()
+			}));
+			effect(() => _el$14.required = field.required);
+			return _el$14;
+		})();
+		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;
+		})();
+		case "date": return (() => {
+			var _el$17 = _tmpl$12$1();
+			setAttribute(_el$17, "id", key);
+			effect(() => _el$17.value = formatDateValue(value));
+			return _el$17;
+		})();
+		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;
+		})();
+		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 "richText": return createComponent(Suspense, {
+			get fallback() {
+				return _tmpl$2$3();
+			},
+			get children() {
+				return createComponent(RichTextEditor, {
+					id: key,
+					content: value,
+					onChange: (doc) => setField(key, doc)
+				});
+			}
+		});
+		default: return null;
+	}
+}
+function renderUploadInput(key, field, value, setField, ctx) {
+	const [uploading, setUploading] = createSignal(false);
+	const [uploadError, setUploadError] = createSignal();
+	async function handleFileChange(e) {
+		const file = e.currentTarget.files?.[0];
+		if (!file) return;
+		if (!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);
+		} catch (err) {
+			setUploadError(err instanceof Error ? err.message : "Upload failed");
+		} finally {
+			setUploading(false);
+		}
+	}
+	return (() => {
+		var _el$20 = _tmpl$16(), _el$22 = _el$20.firstChild;
+		insert(_el$20, createComponent(Show, {
+			when: value,
+			get children() {
+				var _el$21 = _tmpl$14();
+				insert(_el$21, value);
+				return _el$21;
+			}
+		}), _el$22);
+		_el$22.addEventListener("change", handleFileChange);
+		setAttribute(_el$22, "id", key);
+		insert(_el$20, createComponent(Show, {
+			get when() {
+				return uploading();
+			},
+			get children() {
+				return _tmpl$2$3();
+			}
+		}), null);
+		insert(_el$20, createComponent(Show, {
+			get when() {
+				return uploadError();
+			},
+			get children() {
+				var _el$24 = _tmpl$15();
+				insert(_el$24, uploadError);
+				return _el$24;
+			}
+		}), 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);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$20;
+	})();
+}
+function renderRelationshipInput(key, field, value, setField, ctx) {
+	if (field.hasMany) return null;
+	const options = ctx.relationshipOptions?.[field.relationTo] ?? [];
+	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;
+			})()
+		}), null);
+		effect(() => _el$25.required = field.required);
+		effect(() => _el$25.value = value != null ? String(value) : "");
+		return _el$25;
+	})();
+}
+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 addItem() {
+		setField(key, [...items(), {}]);
+	}
+	function removeItem(index) {
+		setField(key, items().filter((_, i) => i !== index));
+	}
+	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;
+	}
+	return (() => {
+		var _el$28 = _tmpl$18(), _el$29 = _el$28.firstChild;
+		_el$29.firstChild;
+		insert(_el$28, createComponent(For, {
+			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;
+								},
+								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;
+						})();
+					}
+				}), _el$32);
+				_el$32.$$click = () => removeItem(index());
+				return _el$31;
+			})()
+		}), _el$29);
+		_el$29.$$click = addItem;
+		insert(_el$29, key, null);
+		return _el$28;
+	})();
+}
+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"]);
+//#endregion
+//#region src/tanstack-start/create.tsx
+var _tmpl$$3 = /*#__PURE__*/ template(`<div class="flex flex-col gap-4"><h1 class="text-xl font-semibold">`);
+/**
+* Builds a create-page component for a collection. See
+* `createCollectionListPage`'s doc comment for the same rationale on
+* keeping navigation in the route file rather than this package.
+*/
+function createCollectionCreatePage(options) {
+	return function CollectionCreatePage() {
+		const queryClient = useQueryClient();
+		const [error, setError] = createSignal();
+		const create = createMutation(() => ({
+			mutationFn: options.createFn,
+			onSuccess: (created) => {
+				queryClient.invalidateQueries({ queryKey: options.invalidateQueryKey });
+				options.onCreated?.(created);
+			},
+			onError: (e) => setError(e.message)
+		}));
+		return (() => {
+			var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild;
+			insert(_el$2, () => options.label ?? `New ${options.collection.slug}`);
+			insert(_el$, createComponent(CollectionEdit, {
+				get config() {
+					return options.collection;
+				},
+				get submitLabel() {
+					return options.submitLabel ?? "Create";
+				},
+				get error() {
+					return error();
+				},
+				onSubmit: (values) => create.mutate(values),
+				get onUploadFile() {
+					return options.onUploadFile;
+				}
+			}), null);
+			return _el$;
+		})();
+	};
+}
+//#endregion
+//#region src/tanstack-start/edit.tsx
+var _tmpl$$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-error btn-outline btn-sm self-start">`), _tmpl$2$2 = /*#__PURE__*/ template(`<div class="flex flex-col gap-4"><h1 class="text-xl font-semibold">`);
+/**
+* Builds an edit-page component for a collection — fetch, update, and
+* delete, all wired together, plus a router-level unsaved-changes guard
+* (`useBlocker`) driven by `CollectionEdit`'s `onDirtyChange`. See
+* `createCollectionListPage`'s doc comment for the rationale on keeping
+* navigation in the route file.
+*/
+function createCollectionEditPage(options) {
+	return function CollectionEditPage() {
+		const queryClient = useQueryClient();
+		const [error, setError] = createSignal();
+		const [dirty, setDirty] = createSignal(false);
+		const [latestDraftId, setLatestDraftId] = createSignal();
+		useBlocker({
+			shouldBlockFn: () => dirty(),
+			enableBeforeUnload: () => dirty()
+		});
+		const row = createQuery(() => ({
+			queryKey: options.queryKey(),
+			queryFn: options.queryFn
+		}));
+		const update = createMutation(() => ({
+			mutationFn: options.updateFn,
+			onSuccess: () => {
+				setError(void 0);
+				queryClient.invalidateQueries({ queryKey: options.invalidateQueryKey });
+			},
+			onError: (e) => setError(e.message)
+		}));
+		const remove = createMutation(() => ({
+			mutationFn: options.deleteFn,
+			onSuccess: () => {
+				queryClient.invalidateQueries({ queryKey: options.invalidateQueryKey });
+				options.onDeleted?.();
+			},
+			onError: (e) => setError(e.message)
+		}));
+		const saveDraft = createMutation(() => ({
+			mutationFn: (values) => options.draftActions?.saveDraftFn(values) ?? Promise.reject(/* @__PURE__ */ new Error("No draftActions configured")),
+			onSuccess: (draft) => {
+				setError(void 0);
+				setLatestDraftId(draft.id);
+			},
+			onError: (e) => setError(e.message)
+		}));
+		const publish = createMutation(() => ({
+			mutationFn: () => {
+				const versionId = latestDraftId();
+				if (versionId === void 0 || !options.draftActions) return Promise.reject(/* @__PURE__ */ new Error("No draft saved yet"));
+				return options.draftActions.publishFn(versionId);
+			},
+			onSuccess: () => {
+				setError(void 0);
+				queryClient.invalidateQueries({ queryKey: options.invalidateQueryKey });
+			},
+			onError: (e) => setError(e.message)
+		}));
+		const preview = createMutation(() => ({
+			mutationFn: () => {
+				const versionId = latestDraftId();
+				if (versionId === void 0 || !options.draftActions?.previewFn) return Promise.reject(/* @__PURE__ */ new Error("No draft saved yet"));
+				return options.draftActions.previewFn(versionId);
+			},
+			onSuccess: ({ url }) => {
+				setError(void 0);
+				window.open(url, "_blank", "noopener,noreferrer");
+			},
+			onError: (e) => setError(e.message)
+		}));
+		return (() => {
+			var _el$ = _tmpl$2$2(), _el$2 = _el$.firstChild;
+			insert(_el$2, () => options.label ?? `Edit ${options.collection.slug}`);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return row.data;
+				},
+				get children() {
+					return createComponent(CollectionEdit, {
+						get config() {
+							return options.collection;
+						},
+						get initialValues() {
+							return row.data ?? void 0;
+						},
+						get submitLabel() {
+							return options.submitLabel ?? "Save changes";
+						},
+						get error() {
+							return error();
+						},
+						get saving() {
+							return update.isPending;
+						},
+						onSubmit: (values) => update.mutate(values),
+						get onUploadFile() {
+							return options.onUploadFile;
+						},
+						onDirtyChange: setDirty,
+						get capabilities() {
+							return options.capabilities?.();
+						},
+						get draftActions() {
+							return memo(() => !!options.draftActions)() && {
+								onSaveDraft: (values) => saveDraft.mutate(values),
+								onPublish: () => publish.mutate(),
+								onPreview: options.draftActions.previewFn ? () => preview.mutate() : void 0,
+								saving: saveDraft.isPending,
+								publishing: publish.isPending,
+								previewing: preview.isPending,
+								canPublish: latestDraftId() !== void 0,
+								canPreview: latestDraftId() !== void 0,
+								saveDraftLabel: options.draftActions.saveDraftLabel,
+								publishLabel: options.draftActions.publishLabel,
+								previewLabel: options.draftActions.previewLabel
+							};
+						}
+					});
+				}
+			}), null);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return options.capabilities?.()?.canDelete !== false;
+				},
+				get children() {
+					var _el$3 = _tmpl$$2();
+					_el$3.$$click = () => remove.mutate();
+					insert(_el$3, () => options.deleteLabel ?? `Delete ${options.collection.slug}`);
+					return _el$3;
+				}
+			}), null);
+			return _el$;
+		})();
+	};
+}
+delegateEvents(["click"]);
+//#endregion
+//#region src/CollectionList.tsx
+var _tmpl$$1 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm">`), _tmpl$2$1 = /*#__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 = /*#__PURE__*/ template(`<th>`), _tmpl$4 = /*#__PURE__*/ template(`<table class="table hidden md:table"><thead><tr></tr></thead><tbody>`), _tmpl$5 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2 md:hidden">`), _tmpl$6 = /*#__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>`);
+function listableFields(config) {
+	const excluded = new Set([
+		"richText",
+		"array",
+		"relationship"
+	]);
+	return Object.entries(config.fields).filter(([key, field]) => key !== "id" && !excluded.has(field.type));
+}
+function formatCellValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (value instanceof Date) return value.toLocaleDateString();
+	return String(value);
+}
+function rowId(row) {
+	return typeof row.id === "number" ? row.id : void 0;
+}
+function CollectionList(props) {
+	const columns = () => listableFields(props.config);
+	const [selectMode, setSelectMode] = createSignal(false);
+	function toggleSelected(id) {
+		const next = new Set(props.selectedIds ?? []);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		props.onSelectionChange?.(next);
+	}
+	function handleRowActivate(row) {
+		if (selectMode()) {
+			const id = rowId(row);
+			if (id !== void 0) toggleSelected(id);
+			return;
+		}
+		props.onRowClick?.(row);
+	}
+	return (() => {
+		var _el$ = _tmpl$7(), _el$2 = _el$.firstChild;
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return props.selectable;
+			},
+			get children() {
+				var _el$3 = _tmpl$$1();
+				_el$3.$$click = () => setSelectMode((v) => !v);
+				insert(_el$3, () => selectMode() ? "Done" : "Select");
+				return _el$3;
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return props.onSortChange;
+			},
+			get children() {
+				var _el$4 = _tmpl$2$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+				_el$5.addEventListener("change", (e) => props.onSortChange?.(e.currentTarget.value, props.sortDirection ?? "asc"));
+				insert(_el$5, createComponent(For, {
+					get each() {
+						return columns();
+					},
+					children: ([key]) => (() => {
+						var _el$16 = _tmpl$8();
+						_el$16.value = key;
+						insert(_el$16, key);
+						return _el$16;
+					})()
+				}));
+				_el$6.addEventListener("change", (e) => props.onSortChange?.(props.sortField ?? columns()[0]?.[0] ?? "", e.currentTarget.value));
+				effect(() => _el$5.value = props.sortField ?? "");
+				effect(() => _el$6.value = props.sortDirection ?? "asc");
+				return _el$4;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.rows.length > 0;
+			},
+			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;
+				})();
+			},
+			get children() {
+				return [(() => {
+					var _el$7 = _tmpl$4(), _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();
+						}
+					}), null);
+					insert(_el$9, createComponent(For, {
+						get each() {
+							return columns();
+						},
+						children: ([key]) => (() => {
+							var _el$21 = _tmpl$3();
+							insert(_el$21, key);
+							return _el$21;
+						})()
+					}), null);
+					insert(_el$1, createComponent(For, {
+						get each() {
+							return props.rows;
+						},
+						children: (row) => (() => {
+							var _el$22 = _tmpl$1();
+							_el$22.$$click = () => handleRowActivate(row);
+							insert(_el$22, createComponent(Show, {
+								get when() {
+									return selectMode();
+								},
+								get children() {
+									var _el$23 = _tmpl$0(), _el$24 = _el$23.firstChild;
+									_el$24.addEventListener("change", () => {
+										const id = rowId(row);
+										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));
+									return _el$23;
+								}
+							}), null);
+							insert(_el$22, createComponent(For, {
+								get each() {
+									return columns();
+								},
+								children: ([key]) => (() => {
+									var _el$25 = _tmpl$10();
+									insert(_el$25, () => formatCellValue(row[key]));
+									return _el$25;
+								})()
+							}), null);
+							effect(() => className(_el$22, props.onRowClick || selectMode() ? "cursor-pointer hover" : void 0));
+							return _el$22;
+						})()
+					}));
+					return _el$7;
+				})(), (() => {
+					var _el$10 = _tmpl$5();
+					insert(_el$10, createComponent(For, {
+						get each() {
+							return props.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);
+								}
+							};
+							_el$26.$$click = () => handleRowActivate(row);
+							insert(_el$27, createComponent(Show, {
+								get when() {
+									return selectMode();
+								},
+								get children() {
+									var _el$28 = _tmpl$11();
+									_el$28.addEventListener("change", () => {
+										const id = rowId(row);
+										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));
+									return _el$28;
+								}
+							}), _el$29);
+							insert(_el$29, createComponent(For, {
+								get each() {
+									return columns();
+								},
+								children: ([key]) => (() => {
+									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]));
+									return _el$30;
+								})()
+							}));
+							return _el$26;
+						})()
+					}));
+					return _el$10;
+				})()];
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return memo(() => props.page !== void 0)() && props.pageSize !== void 0;
+			},
+			get children() {
+				var _el$11 = _tmpl$6(), _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);
+				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);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$11;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+delegateEvents(["click", "keydown"]);
+//#endregion
+//#region src/tanstack-start/list.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class="flex flex-col gap-4"><div class="flex items-center justify-between"><h1 class="text-xl font-semibold">`), _tmpl$2 = /*#__PURE__*/ template(`<div class="loading loading-spinner">`);
+/**
+* Builds a list-view page component for a collection — paginated/sortable
+* query, loading state, and the generic table/card list, wired together.
+* The returned component is meant to be passed directly as a route's
+* `component`:
+*
+* ```tsx
+* export const Route = createFileRoute('/admin/pages/')({
+*   component: createCollectionListPage({
+*     collection: pagesCollection,
+*     label: 'Pages',
+*     queryKey: ['pages'],
+*     queryFn: (params) => getPages({ data: params }),
+*     newHref: '/admin/pages/new',
+*     newLabel: 'New page',
+*     onRowClick: (row) => navigate({ to: '/admin/pages/$pageId', params: { pageId: String(row.id) } }),
+*   }),
+* })
+* ```
+*
+* Navigation stays in the route file (via `onRowClick`/`newHref` as plain
+* strings) rather than this package calling `useNavigate()` itself —
+* TanStack Router's route-typing is generated per-app, so a generic
+* package can't produce a correctly-typed `navigate()` call for routes
+* it doesn't know about.
+*/
+function createCollectionListPage(options) {
+	return function CollectionListPage() {
+		const pageSize = options.pageSize ?? 20;
+		const [page, setPage] = createSignal(1);
+		const [sortField, setSortField] = createSignal(void 0);
+		const [sortDirection, setSortDirection] = createSignal("asc");
+		const result = createQuery(() => ({
+			queryKey: [
+				...options.queryKey,
+				page(),
+				sortField(),
+				sortDirection()
+			],
+			queryFn: () => options.queryFn({
+				page: page(),
+				pageSize,
+				sortField: sortField(),
+				sortDirection: sortDirection()
+			})
+		}));
+		function handleSortChange(field, direction) {
+			setSortField(field);
+			setSortDirection(direction);
+			setPage(1);
+		}
+		return (() => {
+			var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+			insert(_el$3, () => options.label ?? options.collection.slug);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return memo(() => !!options.newHref)() && options.capabilities?.()?.canCreate !== false;
+				},
+				get children() {
+					return createComponent(Link, {
+						get to() {
+							return options.newHref;
+						},
+						"class": "btn btn-primary btn-sm",
+						get children() {
+							return options.newLabel ?? `New ${options.collection.slug}`;
+						}
+					});
+				}
+			}), null);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return !result.isLoading;
+				},
+				get fallback() {
+					return _tmpl$2();
+				},
+				get children() {
+					return createComponent(CollectionList, {
+						get config() {
+							return options.collection;
+						},
+						get rows() {
+							return result.data?.rows ?? [];
+						},
+						get onRowClick() {
+							return options.onRowClick;
+						},
+						get page() {
+							return page();
+						},
+						pageSize,
+						get totalCount() {
+							return result.data?.total;
+						},
+						onPageChange: setPage,
+						get sortField() {
+							return sortField();
+						},
+						get sortDirection() {
+							return sortDirection();
+						},
+						onSortChange: handleSortChange
+					});
+				}
+			}), null);
+			return _el$;
+		})();
+	};
+}
+//#endregion
+export { createCollectionCreatePage, createCollectionEditPage, createCollectionListPage };
+
+//# sourceMappingURL=index.js.map