@protobase/ui 0.0.0-stage → 0.1.0

package/dist/app/create/create-page.js

@@ -0,0 +1,118 @@
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { useRouter } from "../router.js";
+import { FieldEditor } from "../field-editor.js";
+import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
+import { can } from "../permissions.js";
+import { useLiveSave } from "../use-live-save.js";
+import { CreateRecordForm } from "./create-record-form.js";
+import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { isApiError } from "@protobase/client";
+import { encodeKey } from "@protobase/schema";
+//#region src/app/create/create-page.tsx
+const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
+/** `/:resource/new`: a form from the view's layout; on success it opens the new record. */
+const CreatePage = ({ resource }) => {
+	const meta = useAdminMeta();
+	const model = meta.resources[resource];
+	const permissions = usePermissions(resource);
+	if (!model) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not found",
+		children: [
+			"There is no resource called ",
+			resource,
+			"."
+		]
+	});
+	if (!can(permissions, "create")) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not allowed",
+		children: [
+			"You cannot create ",
+			meta.views[resource]?.names?.plural.toLowerCase() ?? resource,
+			"."
+		]
+	});
+	return /* @__PURE__ */ jsx(LoadedCreate, { resource });
+};
+const LoadedCreate = ({ resource }) => {
+	const meta = useAdminMeta();
+	const model = meta.resources[resource];
+	const view = meta.views[resource];
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const { navigate } = useRouter();
+	const noun = view?.names?.singular ?? humanize(resource);
+	const feedback = useLiveSave(view?.saveFeedback ?? "toast", `New ${noun.toLowerCase()}`);
+	const sections = createSections(model, view);
+	const [draft, setDraft] = useState(() => initialDraft(model, sections));
+	const [errors, setErrors] = useState({});
+	const change = (name, value) => {
+		setErrors((current) => without(current, name));
+		setDraft((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const submit = () => feedback.run(async () => {
+		let created;
+		try {
+			created = await client.create(resource, createBody(model, meta.resources, draft));
+		} catch (error) {
+			if (isApiError(error)) setErrors(Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])));
+			throw error;
+		}
+		for (const prefix of [
+			"page",
+			"list",
+			"first-page",
+			"facets",
+			"series"
+		]) queryClient.invalidateQueries({ queryKey: [prefix, resource] });
+		navigate(`/${resource}/${encodeKey(recordKey(model, created.record))}`, { replace: true });
+	});
+	const formSections = sections.map((section) => ({
+		title: section.title,
+		help: section.help,
+		fields: section.fields.map((name) => {
+			const field = model.fields[name];
+			const value = draft[name];
+			const target = field.relation ? meta.resources[field.relation.resource] : void 0;
+			return {
+				name,
+				label: view?.fields[name]?.label ?? humanize(name),
+				help: view?.fields[name]?.help,
+				required: isRequired(field),
+				error: errors[name],
+				editor: /* @__PURE__ */ jsx(FieldEditor, {
+					field,
+					hints: view?.fields[name],
+					value: isChosen(value) ? value.key : value ?? (field.type === "boolean" ? false : ""),
+					stored: void 0,
+					relationLabel: isChosen(value) ? value.label : void 0,
+					placeholder: hasDatabaseDefault(field) ? "Set by the database" : void 0,
+					relationPicker: target ? {
+						target,
+						view: meta.views[target.name]
+					} : void 0,
+					invalid: Boolean(errors[name]),
+					onChange: (next) => change(name, next)
+				})
+			};
+		})
+	}));
+	return /* @__PURE__ */ jsx(CreateRecordForm, {
+		noun,
+		collection: view?.names?.plural ?? humanize(resource),
+		sections: formSections,
+		saving: feedback.phase === "saving",
+		message: feedback.message,
+		onSubmit: () => void submit(),
+		onCancel: () => navigate(`/${resource}`)
+	});
+};
+//#endregion
+export { CreatePage };

package/dist/app/create/create-record-form.js

@@ -0,0 +1,68 @@
+import { Button } from "../../primitives/button.js";
+import { ErrorBanner } from "../error-banner.js";
+import { Field } from "../../record-view/field.js";
+import { Section } from "../../record-view/section.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/create/create-record-form.tsx
+/** The presentation of "New <thing>": the view's sections, each field with its editor, and Create or Cancel. */
+const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel }) => /* @__PURE__ */ jsx("form", {
+	className: "min-h-0 flex-1 overflow-y-auto",
+	onSubmit: (event) => {
+		event.preventDefault();
+		onSubmit();
+	},
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-[760px] px-4 py-6 md:px-10 md:py-8",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-end sm:justify-between sm:gap-6",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: collection
+				}), /* @__PURE__ */ jsxs("h1", {
+					className: "mt-1 text-2xl font-semibold tracking-tight",
+					children: ["New ", noun.toLowerCase()]
+				})] }), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						className: "max-sm:min-h-11",
+						onClick: onCancel,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: "primary",
+						type: "submit",
+						className: "max-sm:min-h-11 max-sm:flex-1",
+						loading: saving,
+						children: ["Create ", noun.toLowerCase()]
+					})]
+				})]
+			}),
+			message && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: /* @__PURE__ */ jsx(ErrorBanner, {
+					title: "Not created",
+					error: new Error(message)
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "divide-y divide-border",
+				children: sections.map((section) => /* @__PURE__ */ jsx(Section, {
+					title: section.title,
+					help: section.help,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
+						children: section.fields.map((field) => /* @__PURE__ */ jsx(Field, {
+							label: field.label,
+							required: field.required,
+							help: field.help,
+							error: field.error,
+							children: field.editor
+						}, field.name))
+					})
+				}, section.title))
+			})
+		]
+	})
+});
+//#endregion
+export { CreateRecordForm };

package/dist/app/create/create-values.js

@@ -0,0 +1,52 @@
+import { isEditable, toPatchValue } from "../../live/field-values.js";
+//#region src/app/create/create-values.ts
+const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
+/** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */
+const isCreatable = (model, field) => field.name !== model.tenant && !field.readOnly && (field.type === "relation" || isEditable(field));
+/** The view's sections limited to creatable fields, plus a section for any creatable field the layout leaves out. */
+const createSections = (model, view) => {
+	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field)).map((field) => field.name);
+	const placed = /* @__PURE__ */ new Set();
+	const sections = (view?.layout ?? []).flatMap((item) => {
+		if (item.kind !== "section") return [];
+		const fields = item.fields.filter((name) => creatable.includes(name) && !placed.has(name));
+		fields.forEach((name) => placed.add(name));
+		return fields.length > 0 ? [{
+			title: item.title,
+			help: item.help,
+			fields
+		}] : [];
+	});
+	const rest = creatable.filter((name) => !placed.has(name));
+	if (rest.length === 0) return sections;
+	return [...sections, {
+		title: sections.length === 0 ? "Details" : "Other fields",
+		fields: rest
+	}];
+};
+const keyValue = (target, key) => {
+	return (target?.primaryKey.length === 1 ? target.fields[target.primaryKey[0]]?.type : void 0) === "integer" ? Number(key) : key;
+};
+/**
+* The JSON body for `POST`: only what the user filled in, so the database applies defaults to the rest
+* and the server reports what is still required.
+*/
+const createBody = (model, resources, draft) => Object.fromEntries(Object.entries(draft).flatMap(([name, value]) => {
+	const field = model.fields[name];
+	if (!field) return [];
+	if (isChosen(value)) return [[name, keyValue(resources[field.relation?.resource ?? ""], value.key)]];
+	if (field.type === "boolean") return [[name, Boolean(value)]];
+	if (String(value).trim() === "") return [];
+	return [[name, toPatchValue(field, value)]];
+}));
+/** A field is required when it can be neither empty nor filled in by a default. */
+const isRequired = (field) => !field.nullable && !field.default && field.type !== "boolean";
+/** The form's starting values: literal defaults from `/meta`. Database defaults stay empty so the database fills them. */
+const initialDraft = (model, sections) => Object.fromEntries(sections.flatMap((section) => section.fields.flatMap((name) => {
+	const fallback = model.fields[name]?.default;
+	if (!fallback || !("value" in fallback) || fallback.value === null || fallback.value === void 0) return [];
+	return [[name, typeof fallback.value === "boolean" ? fallback.value : String(fallback.value)]];
+})));
+const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
+//#endregion
+export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired };

package/dist/app/delete/dialogs.js

@@ -0,0 +1,109 @@
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/delete/dialogs.tsx
+const ConfirmDeleteDialog = ({ title, noun, busy, onConfirm, onCancel }) => /* @__PURE__ */ jsx(Dialog, {
+	title: `Delete ${title}?`,
+	description: `This ${noun.toLowerCase()} will be removed. This cannot be undone.`,
+	onClose: onCancel,
+	actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: onCancel,
+		children: "Cancel"
+	}), /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		className: "bg-danger hover:bg-danger/90",
+		loading: busy,
+		onClick: onConfirm,
+		children: "Delete"
+	})] })
+});
+const ConflictDialog = ({ title, changes, busy, onReview, onDeleteAnyway, onCancel }) => /* @__PURE__ */ jsx(Dialog, {
+	title: `${title} was changed since you opened it`,
+	description: "Someone saved this record in the meantime. Review what changed before you delete it.",
+	onClose: onCancel,
+	actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: onReview,
+		children: "Review changes"
+	}), /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		className: "bg-danger hover:bg-danger/90",
+		loading: busy,
+		onClick: onDeleteAnyway,
+		children: "Delete anyway"
+	})] }),
+	children: changes.length === 0 ? /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: "No visible fields differ; the record was saved again with the same values."
+	}) : /* @__PURE__ */ jsx("ul", {
+		className: "divide-y rounded-md border text-[13px]",
+		children: changes.map((change) => /* @__PURE__ */ jsxs("li", {
+			className: "grid grid-cols-[96px_1fr] gap-3 px-3 py-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: change.label
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground line-through",
+					children: change.before
+				}),
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: change.after
+				})
+			] })]
+		}, change.field))
+	})
+});
+const BulkDeleteDialog = (props) => {
+	if (props.stage === "confirm") return /* @__PURE__ */ jsx(Dialog, {
+		title: `Delete ${props.count} ${props.count === 1 ? props.plural.replace(/s$/, "") : props.plural.toLowerCase()}?`,
+		description: "This cannot be undone. Each record is deleted only if it has not changed since the list loaded; anything that changed is reported and kept.",
+		onClose: props.onCancel,
+		actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: props.onCancel,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsxs(Button, {
+			variant: "primary",
+			className: "bg-danger hover:bg-danger/90",
+			onClick: props.onConfirm,
+			children: ["Delete ", props.count]
+		})] })
+	});
+	if (props.stage === "running") return /* @__PURE__ */ jsx(Dialog, {
+		title: "Deleting",
+		description: `${props.done} of ${props.total} done`,
+		onClose: () => void 0,
+		actions: /* @__PURE__ */ jsx(Button, {
+			loading: true,
+			disabled: true,
+			children: "Working"
+		})
+	});
+	const deleted = props.total - props.failures.length;
+	return /* @__PURE__ */ jsx(Dialog, {
+		title: props.failures.length === 0 ? `Deleted ${deleted}` : `Deleted ${deleted} of ${props.total}`,
+		description: props.failures.length === 0 ? void 0 : `${props.failures.length} could not be deleted and were kept.`,
+		onClose: props.onClose,
+		actions: /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			onClick: props.onClose,
+			children: "Done"
+		}),
+		children: props.failures.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "max-h-48 divide-y overflow-y-auto rounded-md border text-[13px]",
+			children: props.failures.map((failure) => /* @__PURE__ */ jsxs("li", {
+				className: "px-3 py-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: failure.title
+				}), /* @__PURE__ */ jsx("span", {
+					className: "block text-xs text-danger-text",
+					children: failure.message
+				})]
+			}, failure.title))
+		})
+	});
+};
+//#endregion
+export { BulkDeleteDialog, ConfirmDeleteDialog, ConflictDialog };

package/dist/app/delete/record-diff.js

@@ -0,0 +1,17 @@
+import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
+//#region src/app/delete/record-diff.ts
+const volatile = /* @__PURE__ */ new Set(["updatedAt"]);
+/** The fields whose stored value differs between two reads of a record, for the "changed since you opened it" dialog. */
+const diffRecords = (model, view, before, after) => Object.values(model.fields).flatMap((field) => {
+	if (volatile.has(field.name) || JSON.stringify(before[field.name] ?? null) === JSON.stringify(after[field.name] ?? null)) return [];
+	const hints = view?.fields[field.name];
+	return [{
+		field: field.name,
+		label: hints?.label ?? humanize(field.name),
+		before: displayValue(field, before[field.name], hints),
+		after: displayValue(field, after[field.name], hints)
+	}];
+});
+//#endregion
+export { diffRecords };

package/dist/app/delete/use-delete-flow.js

@@ -0,0 +1,193 @@
+import { useClient } from "../../data/api-provider.js";
+import { humanize } from "../../live/naming.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { BulkDeleteDialog, ConfirmDeleteDialog, ConflictDialog } from "./dialogs.js";
+import { diffRecords } from "./record-diff.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { PreconditionFailedError, isApiError } from "@protobase/client";
+//#region src/app/delete/use-delete-flow.tsx
+const concurrency = 4;
+/**
+* Delete with `If-Match`: hard deletes ask first, soft deletes go straight through (with Undo when `restore` exists),
+* a 412 opens a dialog that says what changed, and bulk deletes confirm once and report each failure.
+*/
+const useDeleteFlow = ({ model, view, onDeleted, onReview, restore }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const toast = useToast();
+	const [flow, setFlow] = useState();
+	const [busy, setBusy] = useState(false);
+	const noun = view?.names?.singular ?? humanize(model.name);
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const refresh = () => {
+		for (const prefix of [
+			"page",
+			"list",
+			"first-page"
+		]) queryClient.invalidateQueries({ queryKey: [prefix, model.name] });
+		for (const prefix of [
+			"facets",
+			"series",
+			"histogram"
+		]) queryClient.invalidateQueries({ queryKey: [prefix, model.name] });
+	};
+	/** Deletes with the given ETag (`*` for any version). Returns false after opening the conflict dialog on a 412. */
+	const remove = async (target, etag) => {
+		const version = etag ?? (await client.get(model.name, target.key)).etag;
+		try {
+			await client.remove(model.name, target.key, { etag: version });
+		} catch (error) {
+			if (!(error instanceof PreconditionFailedError)) throw error;
+			return error;
+		}
+	};
+	const succeeded = (target) => {
+		refresh();
+		setFlow(void 0);
+		onDeleted?.(target);
+		toast.show({
+			state: "success",
+			title: `${target.title} deleted`,
+			...model.softDelete && restore && { action: {
+				label: "Undo",
+				onClick: () => {
+					restore(target).then(() => {
+						refresh();
+						toast.show({
+							state: "success",
+							title: `${target.title} restored`
+						});
+					}, (error) => {
+						if (!isApiError(error)) throw error;
+						refresh();
+						toast.show({
+							state: error.status === 409 ? "success" : "error",
+							title: error.status === 409 ? `${target.title} is already back` : `Could not restore ${target.title}`,
+							description: error.status === 409 ? void 0 : error.message
+						});
+					});
+				}
+			} }
+		});
+	};
+	const attempt = async (target, etag) => {
+		setBusy(true);
+		try {
+			if (!await remove(target, etag)) return succeeded(target);
+			const fresh = (await client.get(model.name, target.key)).record;
+			setFlow({
+				kind: "conflict",
+				target,
+				fresh,
+				changes: diffRecords(model, view, target.snapshot, fresh)
+			});
+		} catch (error) {
+			if (!isApiError(error)) throw error;
+			setFlow(void 0);
+			toast.show({
+				state: "error",
+				title: `Could not delete ${target.title}`,
+				description: error.message
+			});
+		} finally {
+			setBusy(false);
+		}
+	};
+	const deleteQuietly = async (target) => {
+		try {
+			return await remove(target, target.etag) ? {
+				title: target.title,
+				message: "Changed since the list loaded, so it was kept."
+			} : void 0;
+		} catch (error) {
+			if (!isApiError(error)) throw error;
+			return {
+				title: target.title,
+				message: error.message
+			};
+		}
+	};
+	const runBulk = async (targets) => {
+		const failures = [];
+		let done = 0;
+		setFlow({
+			kind: "bulk-running",
+			done,
+			total: targets.length
+		});
+		const queue = [...targets];
+		const worker = async () => {
+			for (let target = queue.shift(); target; target = queue.shift()) {
+				const failure = await deleteQuietly(target);
+				if (failure) failures.push(failure);
+				done += 1;
+				setFlow({
+					kind: "bulk-running",
+					done,
+					total: targets.length
+				});
+			}
+		};
+		await Promise.all(Array.from({ length: Math.min(concurrency, targets.length) }, worker));
+		refresh();
+		setFlow({
+			kind: "bulk-done",
+			total: targets.length,
+			failures
+		});
+	};
+	const close = () => setFlow(void 0);
+	return {
+		dialogs: flow && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			flow.kind === "confirm" && /* @__PURE__ */ jsx(ConfirmDeleteDialog, {
+				title: flow.target.title,
+				noun,
+				busy,
+				onCancel: close,
+				onConfirm: () => void attempt(flow.target, flow.target.etag)
+			}),
+			flow.kind === "conflict" && /* @__PURE__ */ jsx(ConflictDialog, {
+				title: flow.target.title,
+				changes: flow.changes,
+				busy,
+				onCancel: close,
+				onReview: () => {
+					close();
+					onReview?.(flow.target, flow.fresh);
+				},
+				onDeleteAnyway: () => void attempt(flow.target, "*")
+			}),
+			flow.kind === "bulk-confirm" && /* @__PURE__ */ jsx(BulkDeleteDialog, {
+				stage: "confirm",
+				count: flow.targets.length,
+				plural,
+				onCancel: close,
+				onConfirm: () => void runBulk(flow.targets)
+			}),
+			flow.kind === "bulk-running" && /* @__PURE__ */ jsx(BulkDeleteDialog, {
+				stage: "running",
+				done: flow.done,
+				total: flow.total
+			}),
+			flow.kind === "bulk-done" && /* @__PURE__ */ jsx(BulkDeleteDialog, {
+				stage: "done",
+				total: flow.total,
+				failures: flow.failures,
+				onClose: close
+			})
+		] }),
+		/** Soft-delete resources go straight through; others ask first. */
+		start: (target) => model.softDelete ? attempt(target, target.etag) : setFlow({
+			kind: "confirm",
+			target
+		}),
+		startBulk: (targets) => setFlow({
+			kind: "bulk-confirm",
+			targets
+		})
+	};
+};
+//#endregion
+export { useDeleteFlow };

package/dist/app/delete/use-restore.js

@@ -0,0 +1,9 @@
+import { useClient } from "../../data/api-provider.js";
+//#region src/app/delete/use-restore.ts
+/** Brings a soft-deleted record back (AIP-164), for the Undo toast. */
+const useRestore = (model) => {
+	const client = useClient();
+	return model.softDelete ? async (target) => void await client.undelete(model.name, target.key) : void 0;
+};
+//#endregion
+export { useRestore };

package/dist/app/draft-storage.js

@@ -0,0 +1,18 @@
+import { guarded } from "../lib/guarded.js";
+//#region src/app/draft-storage.ts
+const draftStorageKey = (userId, resource, recordKey) => `protobase:draft:${userId}:${resource}:${recordKey}`;
+/** The saved draft, only if it was made against the version of the record that is on screen now. */
+const readDraft = (storage, key, etag) => guarded(() => {
+	const raw = storage.getItem(key);
+	if (raw === null) return void 0;
+	const parsed = JSON.parse(raw);
+	if (!parsed || parsed.etag !== etag || typeof parsed.fields !== "object" || parsed.fields === null) return void 0;
+	return {
+		etag,
+		fields: parsed.fields,
+		...Array.isArray(parsed.order) && { order: parsed.order.map(String) }
+	};
+}, void 0);
+const writeDraft = (storage, key, draft) => guarded(() => draft ? storage.setItem(key, JSON.stringify(draft)) : storage.removeItem(key), void 0);
+//#endregion
+export { draftStorageKey, readDraft, writeDraft };

package/dist/app/error-banner.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from "lucide-react";
+import { isApiError } from "@protobase/client";
+//#region src/app/error-banner.tsx
+const describe = (error) => {
+	if (!isApiError(error)) return [{ message: error instanceof Error ? error.message : "Something went wrong" }];
+	const detailed = error.errors.map((entry) => ({
+		message: entry.message,
+		hint: entry.hint
+	}));
+	return detailed.length > 0 ? detailed : [{ message: error.message }];
+};
+const ErrorBanner = ({ error, title }) => /* @__PURE__ */ jsxs("div", {
+	role: "alert",
+	className: "flex gap-2.5 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2 text-[13px] text-danger-text",
+	children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "font-medium",
+		children: title
+	}), describe(error).map((detail) => /* @__PURE__ */ jsxs("p", {
+		className: "text-xs",
+		children: [detail.message, detail.hint && /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground",
+			children: [" ", detail.hint]
+		})]
+	}, detail.message))] })]
+});
+//#endregion
+export { ErrorBanner };