@questpie/admin 0.0.1

package/dist/views/collection/auto-form-fields.mjs

@@ -0,0 +1,525 @@
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAdminContext } from "../../hooks/admin-provider";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs";
+import { useFormContext } from "react-hook-form";
+import { RelationSelect } from "../../components/fields/relation-select";
+import { RelationPicker } from "../../components/fields/relation-picker";
+import { EmbeddedCollectionField } from "../../components/fields/embedded-collection";
+import { ArrayField } from "../../components/fields/array-field";
+import { RichTextEditor } from "../../components/fields/rich-text-editor";
+import { FormField } from "./form-field";
+import { cn } from "../../utils";
+
+//#region src/views/collection/auto-form-fields.tsx
+/**
+* AutoFormFields Component
+*
+* Automatically generates form fields from:
+* 1. CMS schema (Drizzle columns)
+* 2. Admin config (field overrides, layout, sections, tabs)
+*
+* Replaces manual field definitions!
+*/
+/**
+* Get default fields for a collection
+* This would come from CMS schema introspection
+*/
+function getDefaultFields(collection) {
+	return {
+		barbers: [
+			"name",
+			"email",
+			"phone",
+			"bio",
+			"avatar",
+			"isActive"
+		],
+		services: [
+			"name",
+			"description",
+			"duration",
+			"price",
+			"isActive"
+		],
+		appointments: [
+			"customerId",
+			"barberId",
+			"serviceId",
+			"scheduledAt",
+			"status",
+			"notes"
+		],
+		reviews: [
+			"appointmentId",
+			"rating",
+			"comment"
+		]
+	}[collection] || [];
+}
+function getFormValues(form, fieldPrefix) {
+	if (!form?.watch) return {};
+	return (fieldPrefix ? form.watch(fieldPrefix) : form.watch()) ?? {};
+}
+function getFullFieldName(fieldName, fieldPrefix) {
+	return fieldPrefix ? `${fieldPrefix}.${fieldName}` : fieldName;
+}
+function resolveValue(value, formValues, defaultValue) {
+	if (value === void 0) return defaultValue;
+	if (typeof value === "function") return value(formValues);
+	return value;
+}
+function resolveOptions(options, formValues) {
+	if (!options) return void 0;
+	if (typeof options === "function") return options(formValues);
+	return options;
+}
+function resolveRelationTarget(relationConfig) {
+	return relationConfig?.targetCollection;
+}
+function getFieldContext({ fieldName, fieldConfig, collection, form, fieldPrefix, locale }) {
+	const formValues = getFormValues(form, fieldPrefix);
+	const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
+	const fieldError = (form?.getFieldState ? form.getFieldState(fullFieldName) : void 0)?.error?.message;
+	const fieldValue = formValues[fieldName];
+	const label = fieldConfig?.label || fieldName;
+	const description = fieldConfig?.description;
+	const placeholder = fieldConfig?.placeholder;
+	const isVisible = resolveValue(fieldConfig?.visible, formValues, true);
+	const isReadOnly = resolveValue(fieldConfig?.readOnly, formValues, false);
+	const isDisabled = resolveValue(fieldConfig?.disabled, formValues, false);
+	const isRequired = resolveValue(fieldConfig?.required, formValues, false);
+	const options = resolveOptions(fieldConfig?.options, formValues);
+	const isLocalized = !!fieldConfig?.localized;
+	const type = fieldConfig?.type;
+	const updateValue = (nextValue) => {
+		if (form?.setValue) form.setValue(fullFieldName, nextValue, {
+			shouldDirty: true,
+			shouldTouch: true
+		});
+	};
+	return {
+		fieldName,
+		fullFieldName,
+		collection,
+		fieldConfig,
+		fieldValue,
+		label,
+		description,
+		placeholder,
+		options,
+		isVisible,
+		isReadOnly,
+		isDisabled,
+		isRequired,
+		isLocalized,
+		locale,
+		fieldError,
+		updateValue,
+		type
+	};
+}
+function buildComponentProps(context) {
+	return {
+		key: context.fullFieldName,
+		name: context.fullFieldName,
+		value: context.fieldValue,
+		onChange: context.updateValue,
+		label: context.label,
+		description: context.description,
+		placeholder: context.placeholder,
+		required: context.isRequired,
+		disabled: context.isDisabled,
+		readOnly: context.isReadOnly,
+		error: context.fieldError,
+		localized: context.isLocalized,
+		locale: context.locale
+	};
+}
+function buildRelationProps(context) {
+	return {
+		label: context.label,
+		required: context.isRequired,
+		disabled: context.isDisabled,
+		readOnly: context.isReadOnly,
+		placeholder: context.placeholder,
+		error: context.fieldError,
+		localized: context.isLocalized,
+		locale: context.locale
+	};
+}
+function buildFormFieldProps(context) {
+	return {
+		name: context.fullFieldName,
+		label: context.label,
+		description: context.description,
+		placeholder: context.placeholder,
+		required: context.isRequired,
+		disabled: context.isDisabled || context.isReadOnly,
+		localized: context.isLocalized,
+		locale: context.locale
+	};
+}
+function renderConfigError(message) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",
+		children: message
+	});
+}
+function renderFormField(formFieldProps, type, extra) {
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		type,
+		...extra
+	});
+}
+function renderCustomComponent({ context, registry, componentProps }) {
+	const component = context.fieldConfig?.component;
+	if (!component) return null;
+	const CustomComponent = typeof component === "string" ? (registry?.fields)?.[component] || registry?.custom?.[component] : component;
+	if (!CustomComponent) return null;
+	return /* @__PURE__ */ jsx(CustomComponent, { ...componentProps });
+}
+function renderRelationField({ context, relationProps, formFieldProps }) {
+	const relationConfig = context.fieldConfig?.relation;
+	if (!(context.type === "relation" || !!relationConfig)) return null;
+	if (!relationConfig) return renderConfigError(`Missing relation config for "${context.fieldName}". Define relation.targetCollection.`);
+	const targetCollection = resolveRelationTarget(relationConfig);
+	if (!targetCollection) return renderConfigError(`Missing relation.targetCollection for "${context.fieldName}".`);
+	const baseRelationProps = {
+		key: context.fullFieldName,
+		name: context.fullFieldName,
+		targetCollection,
+		filter: relationConfig?.filter,
+		renderFormFields: void 0,
+		...relationProps
+	};
+	if (relationConfig?.mode === "picker" || Array.isArray(context.fieldValue)) return /* @__PURE__ */ jsx(RelationPicker, {
+		...baseRelationProps,
+		value: context.fieldValue || [],
+		onChange: context.updateValue,
+		orderable: relationConfig?.orderable
+	});
+	return /* @__PURE__ */ jsx(RelationSelect, {
+		...baseRelationProps,
+		value: context.fieldValue,
+		onChange: context.updateValue
+	});
+}
+function renderEmbeddedField({ context, registry, allCollectionsConfig, componentProps }) {
+	const embeddedConfig = context.fieldConfig?.embedded;
+	if (!embeddedConfig) return null;
+	const embeddedCollection = embeddedConfig.collection;
+	const embeddedCollectionConfig = embeddedCollection ? allCollectionsConfig?.[embeddedCollection] : void 0;
+	return /* @__PURE__ */ jsx(registry?.fields?.embedded || EmbeddedCollectionField, {
+		...componentProps,
+		value: context.fieldValue || [],
+		collection: embeddedCollection,
+		mode: embeddedConfig?.mode,
+		orderable: embeddedConfig?.orderable,
+		rowLabel: embeddedConfig?.rowLabel,
+		renderFields: (index) => embeddedCollection ? /* @__PURE__ */ jsx(AutoFormFields, {
+			collection: embeddedCollection,
+			config: embeddedCollectionConfig,
+			registry,
+			fieldPrefix: `${context.fullFieldName}.${index}`,
+			allCollectionsConfig
+		}) : null
+	});
+}
+function renderArrayField({ context, registry, componentProps }) {
+	const arrayConfig = context.fieldConfig?.array;
+	if (!(context.type === "array" || !!arrayConfig)) return null;
+	const ArrayComponent = registry?.fields?.array || ArrayField;
+	const config = arrayConfig || {};
+	return /* @__PURE__ */ jsx(ArrayComponent, {
+		...componentProps,
+		value: context.fieldValue || [],
+		placeholder: config.placeholder ?? context.placeholder,
+		itemType: config.itemType,
+		options: config.options || context.options,
+		orderable: config.orderable,
+		minItems: config.minItems,
+		maxItems: config.maxItems
+	});
+}
+function renderRichTextField({ context, registry, componentProps }) {
+	if (context.type !== "richText") return null;
+	return /* @__PURE__ */ jsx(registry?.fields?.richText || RichTextEditor, {
+		...componentProps,
+		...context.fieldConfig?.richText
+	});
+}
+function renderPrimitiveField({ context, formFieldProps }) {
+	if (!context.type) return renderConfigError(`Missing field type for "${context.fieldName}". Define it in admin config.`);
+	if (context.type === "boolean") return renderFormField(formFieldProps, "switch");
+	if (context.type === "select" && context.options) return renderFormField(formFieldProps, "select", { options: context.options });
+	return renderFormField(formFieldProps, context.type);
+}
+/**
+* Render a single field with conditional logic
+*/
+function FieldRenderer({ fieldName, fieldConfig, collection, registry, fieldPrefix, allCollectionsConfig }) {
+	const form = useFormContext();
+	const { locale } = useAdminContext();
+	const context = getFieldContext({
+		fieldName,
+		fieldConfig,
+		collection,
+		form,
+		fieldPrefix,
+		locale
+	});
+	if (!context.isVisible) return null;
+	const componentProps = buildComponentProps(context);
+	const relationProps = buildRelationProps(context);
+	const formFieldProps = buildFormFieldProps(context);
+	const renderers = [
+		() => renderCustomComponent({
+			context,
+			registry,
+			componentProps
+		}),
+		() => renderRelationField({
+			context,
+			relationProps,
+			formFieldProps
+		}),
+		() => renderEmbeddedField({
+			context,
+			registry,
+			allCollectionsConfig,
+			componentProps
+		}),
+		() => renderArrayField({
+			context,
+			registry,
+			componentProps
+		}),
+		() => renderRichTextField({
+			context,
+			registry,
+			componentProps
+		}),
+		() => renderPrimitiveField({
+			context,
+			formFieldProps
+		})
+	];
+	for (const render of renderers) {
+		const node = render();
+		if (node) return node;
+	}
+	return null;
+}
+const gridColumnClasses = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4",
+	5: "grid-cols-5",
+	6: "grid-cols-6",
+	7: "grid-cols-7",
+	8: "grid-cols-8",
+	9: "grid-cols-9",
+	10: "grid-cols-10",
+	11: "grid-cols-11",
+	12: "grid-cols-12"
+};
+function getGridColumnsClass(columns, prefix) {
+	if (!columns) return "";
+	const base = gridColumnClasses[columns];
+	if (!base) return "";
+	return prefix ? `${prefix}:${base}` : base;
+}
+function getGapStyle(gap) {
+	if (gap === void 0) return void 0;
+	return `${gap * .25}rem`;
+}
+function normalizeSectionFields(fields) {
+	if (!fields?.length) return [];
+	if (typeof fields[0] === "string") return fields.map((field) => ({ field }));
+	return fields;
+}
+function resolveSpan(span, columns) {
+	if (!span) return void 0;
+	if (typeof span === "number") return Math.max(1, Math.min(columns, span));
+	if (span === "full") return columns;
+	const fraction = {
+		"1/2": .5,
+		"1/3": 1 / 3,
+		"2/3": 2 / 3,
+		"1/4": .25,
+		"3/4": .75
+	}[span];
+	if (!fraction) return void 0;
+	return Math.max(1, Math.round(columns * fraction));
+}
+/**
+* AutoFormFields Component
+*/
+function AutoFormFields({ cms: _cms, collection, config, registry, renderField, fieldPrefix, allCollectionsConfig }) {
+	const formValues = getFormValues(useFormContext(), fieldPrefix);
+	const fieldOrder = config?.edit?.fields || getDefaultFields(collection);
+	const excludedFields = new Set(config?.edit?.exclude || []);
+	const sidebarFieldSet = new Set(config?.edit?.sidebar?.fields || []);
+	const isFieldExcluded = React$1.useCallback((fieldName) => {
+		if (excludedFields.has(fieldName)) return true;
+		if ((config?.fields?.[fieldName])?.hidden) return true;
+		return false;
+	}, [config?.fields, excludedFields]);
+	const renderFieldNode = React$1.useCallback((fieldName) => {
+		if (isFieldExcluded(fieldName)) return null;
+		const fieldConfig = config?.fields?.[fieldName];
+		const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
+		if (renderField) return renderField(fullFieldName, fieldConfig);
+		return /* @__PURE__ */ jsx(FieldRenderer, {
+			fieldName,
+			fieldConfig,
+			collection,
+			registry,
+			fieldPrefix,
+			allCollectionsConfig
+		}, fullFieldName);
+	}, [
+		collection,
+		config?.fields,
+		fieldPrefix,
+		isFieldExcluded,
+		registry,
+		renderField,
+		allCollectionsConfig
+	]);
+	const renderFieldLayout = React$1.useCallback((field, layout, columns) => {
+		const fieldNode = renderFieldNode(field.field);
+		if (!fieldNode) return null;
+		const style = {};
+		if (layout === "columns" || layout === "grid") {
+			const span = resolveSpan(field.span, columns);
+			if (span) style.gridColumn = `span ${span} / span ${span}`;
+			if (field.rowSpan) style.gridRow = `span ${field.rowSpan} / span ${field.rowSpan}`;
+		}
+		if (field.width) style.width = field.width;
+		return /* @__PURE__ */ jsx("div", {
+			style,
+			className: cn(layout === "inline" ? "min-w-[180px] flex-1" : "min-w-0"),
+			children: fieldNode
+		}, field.field);
+	}, [renderFieldNode]);
+	const renderFieldsContainer = React$1.useCallback((fields, layout, columns, grid) => {
+		const normalizedFields = fields.filter((field) => !isFieldExcluded(field.field));
+		if (!normalizedFields.length) return null;
+		if (layout === "inline") return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-4",
+			style: { gap: getGapStyle(grid?.gap) },
+			children: normalizedFields.map((field) => renderFieldLayout(field, layout, columns))
+		});
+		if (layout === "columns" || layout === "grid") {
+			const baseClass = getGridColumnsClass(columns);
+			return /* @__PURE__ */ jsx("div", {
+				className: cn("grid gap-4", baseClass, getGridColumnsClass(grid?.responsive?.sm, "sm"), getGridColumnsClass(grid?.responsive?.md, "md"), getGridColumnsClass(grid?.responsive?.lg, "lg")),
+				style: {
+					gap: getGapStyle(grid?.gap),
+					...baseClass ? {} : { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
+				},
+				children: normalizedFields.map((field) => renderFieldLayout(field, layout, columns))
+			});
+		}
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children: normalizedFields.map((field) => renderFieldLayout(field, layout, columns))
+		});
+	}, [isFieldExcluded, renderFieldLayout]);
+	const renderSection = React$1.useCallback((section, index, excludedSet) => {
+		if (!resolveValue(section.visible, formValues, true)) return null;
+		const sectionFields = normalizeSectionFields(section.fields).filter((field) => !excludedSet?.has(field.field));
+		if (!sectionFields.length) return null;
+		const layout = section.layout ?? "auto";
+		const content = renderFieldsContainer(sectionFields, layout, layout === "columns" ? section.columns || section.grid?.columns || 2 : section.grid?.columns || section.columns || 1, section.grid);
+		if (!content) return null;
+		const header = section.title || section.description ? /* @__PURE__ */ jsxs("div", { children: [section.title && /* @__PURE__ */ jsx("h3", {
+			className: "text-lg font-semibold",
+			children: section.title
+		}), section.description && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: section.description
+		})] }) : null;
+		if (section.collapsible) {
+			const value = `section-${index}`;
+			return /* @__PURE__ */ jsx(Accordion, {
+				defaultValue: section.defaultOpen ? [value] : [],
+				children: /* @__PURE__ */ jsxs(AccordionItem, {
+					value,
+					children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: section.title || "Section" }), /* @__PURE__ */ jsxs(AccordionContent, {
+						className: "space-y-3 pt-2",
+						children: [section.description && /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground",
+							children: section.description
+						}), content]
+					})]
+				})
+			}, value);
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-4", section.className),
+			children: [header, content]
+		}, index);
+	}, [formValues, renderFieldsContainer]);
+	const renderSections = React$1.useCallback((sections, excludedSet) => {
+		const renderedSections = sections.map((section, index) => renderSection(section, index, excludedSet)).filter(Boolean);
+		if (!renderedSections.length) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-6",
+			children: renderedSections
+		});
+	}, [renderSection]);
+	const renderTabs = React$1.useCallback((tabs, excludedSet) => {
+		const visibleTabs = tabs.filter((tab) => resolveValue(tab.visible, formValues, true));
+		if (!visibleTabs.length) return null;
+		const defaultTab = visibleTabs[0]?.id;
+		return /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: defaultTab,
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				variant: "line",
+				children: visibleTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, {
+					value: tab.id,
+					children: tab.label
+				}, tab.id))
+			}), visibleTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+				value: tab.id,
+				children: tab.sections ? renderSections(tab.sections, excludedSet) : renderFieldsContainer(normalizeSectionFields(tab.fields || []).filter((field) => !excludedSet?.has(field.field)), "auto", 1)
+			}, tab.id))]
+		});
+	}, [
+		formValues,
+		renderFieldsContainer,
+		renderSections
+	]);
+	const visibleFields = fieldOrder.filter((fieldName) => !isFieldExcluded(fieldName));
+	const defaultContent = config?.edit?.tabs ? renderTabs(config.edit.tabs, void 0) : config?.edit?.sections ? renderSections(config.edit.sections, void 0) : renderFieldsContainer(normalizeSectionFields(visibleFields), "auto", 1);
+	if (config?.edit?.layout === "with-sidebar" && sidebarFieldSet.size > 0) {
+		const sidebarContent = renderFieldsContainer(normalizeSectionFields(Array.from(sidebarFieldSet).filter((fieldName) => !isFieldExcluded(fieldName))), "auto", 1);
+		const mainContent = config?.edit?.tabs ? renderTabs(config.edit.tabs, sidebarFieldSet) : config?.edit?.sections ? renderSections(config.edit.sections, sidebarFieldSet) : renderFieldsContainer(normalizeSectionFields(visibleFields.filter((fieldName) => !sidebarFieldSet.has(fieldName))), "auto", 1);
+		const sidebarPosition = config?.edit?.sidebar?.position || "right";
+		const sidebarWidth = config?.edit?.sidebar?.width || "280px";
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-6 lg:flex-row", sidebarPosition === "left" ? "lg:flex-row-reverse" : ""),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: mainContent
+			}), sidebarContent && /* @__PURE__ */ jsx("aside", {
+				className: "rounded-md border bg-card p-4",
+				style: { width: sidebarWidth },
+				children: /* @__PURE__ */ jsx("div", {
+					className: "space-y-4",
+					children: sidebarContent
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx("div", { children: defaultContent });
+}
+
+//#endregion
+export { AutoFormFields };

package/dist/views/collection/collection-form.mjs

@@ -0,0 +1,91 @@
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../../components/ui/card";
+import { useCollection } from "../../hooks/use-collection-db";
+import { FormProvider, useForm } from "react-hook-form";
+
+//#region src/views/collection/collection-form.tsx
+/**
+* CollectionForm - Form wrapper for CMS collections
+* Uses React Hook Form + TanStack DB Collection for optimistic updates
+*
+* @example
+* ```tsx
+* import { CollectionForm } from '@questpie/admin/views'
+* import type { cms } from './server/cms'
+*
+* function PostForm({ id }: { id?: string }) {
+*   return (
+*     <CollectionForm<typeof cms, 'posts'>
+*       collection="posts"
+*       id={id}
+*       title={id ? 'Edit Post' : 'Create Post'}
+*       onSuccess={() => router.push('/posts')}
+*     >
+*       <FormField name="title" label="Title" />
+*       <FormField name="content" label="Content" type="textarea" />
+*     </CollectionForm>
+*   )
+* }
+* ```
+*/
+function CollectionForm({ collection, id, defaultValues, children, onSuccess, onCancel, title, headerActions, submitText = "Save", cancelText = "Cancel" }) {
+	const collectionData = useCollection(collection);
+	const item = id ? collectionData.toArray.find((i) => collectionData.config.getKey(i) === id) : void 0;
+	const form = useForm({ defaultValues: item ?? defaultValues ?? {} });
+	React.useEffect(() => {
+		form.reset(item ?? defaultValues ?? {});
+	}, [
+		form,
+		item,
+		defaultValues
+	]);
+	const onSubmit = async (data) => {
+		try {
+			let result;
+			if (id) {
+				await collectionData.update(id, data);
+				result = {
+					...item,
+					...data
+				};
+			} else result = await collectionData.insert(data);
+			onSuccess?.(result);
+		} catch (error) {
+			console.error("Form submission error:", error);
+		}
+	};
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx("form", {
+			onSubmit: form.handleSubmit(onSubmit),
+			children: /* @__PURE__ */ jsxs(Card, { children: [
+				(title || headerActions) && /* @__PURE__ */ jsxs(CardHeader, {
+					className: "flex flex-wrap items-center justify-between gap-3",
+					children: [title && /* @__PURE__ */ jsx(CardTitle, { children: title }), headerActions && /* @__PURE__ */ jsx("div", { children: headerActions })]
+				}),
+				/* @__PURE__ */ jsx(CardContent, {
+					className: "space-y-4",
+					children
+				}),
+				/* @__PURE__ */ jsxs(CardFooter, {
+					className: "flex justify-end gap-2",
+					children: [onCancel && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: onCancel,
+						children: cancelText
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: form.formState.isSubmitting,
+						children: form.formState.isSubmitting ? "Saving..." : submitText
+					})]
+				})
+			] })
+		})
+	});
+}
+
+//#endregion
+export { CollectionForm };

package/dist/views/collection/collection-list.mjs

@@ -0,0 +1,76 @@
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
+import { useCollection } from "../../hooks/use-collection-db";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/views/collection/collection-list.tsx
+/**
+* CollectionList - Table view for CMS collections
+* Uses TanStack DB Collection for offline-first, realtime data
+*
+* @example
+* ```tsx
+* import { CollectionList } from '@questpie/admin/views'
+* import type { cms } from './server/cms'
+*
+* function PostsList() {
+*   return (
+*     <CollectionList<typeof cms, 'posts'>
+*       collection="posts"
+*       columns={[
+*         { accessorKey: 'title', header: 'Title' },
+*         { accessorKey: 'createdAt', header: 'Created' },
+*       ]}
+*       realtime={true}
+*       onRowClick={(post) => router.push(`/posts/${post.id}`)}
+*     />
+*   )
+* }
+* ```
+*/
+function CollectionList({ collection, columns, baseFindOptions, realtime = false, rowActions, headerActions, emptyState, onRowClick }) {
+	const collectionData = useCollection(collection, {
+		baseFindOptions,
+		realtime
+	});
+	const [sorting, setSorting] = React.useState([]);
+	const items = collectionData.toArray;
+	const table = useReactTable({
+		data: items,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onSortingChange: setSorting,
+		state: { sorting }
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [headerActions && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "text-sm text-muted-foreground",
+				children: [items.length, " items"]
+			}), /* @__PURE__ */ jsx("div", { children: headerActions })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "rounded-md border",
+			children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { children: [headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
+				className: header.column.getCanSort() ? "cursor-pointer select-none flex items-center gap-2" : "",
+				onClick: header.column.getToggleSortingHandler(),
+				children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ jsx("span", { children: header.column.getIsSorted() === "asc" ? "↑" : "↓" })]
+			}) }, header.id)), rowActions && /* @__PURE__ */ jsx(TableHead, { children: "Actions" })] }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+				"data-state": row.getIsSelected() && "selected",
+				onClick: () => onRowClick?.(row.original),
+				className: onRowClick ? "cursor-pointer" : "",
+				children: [row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)), rowActions && /* @__PURE__ */ jsx(TableCell, { children: rowActions(row.original) })]
+			}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: columns.length + (rowActions ? 1 : 0),
+				className: "h-24 text-center",
+				children: emptyState || "No results."
+			}) }) })] })
+		})]
+	});
+}
+
+//#endregion
+export { CollectionList };